/* ==========================================================================
   JBN TYCOONS 19.0 — design system
   Premium / editorial / confident. Charcoal + off-white, orange as an accent
   (never a wash), large stat typography, restrained motion.
   ========================================================================== */

:root{
  --charcoal:#17140F;
  --charcoal-soft:#2A2520;
  --offwhite:#FBF8F3;
  --paper:#F3EFE8;
  --warm-grey:#8A8177;
  --line:#E4DDD1;
  --orange:#E8622C;
  --orange-deep:#C94E1E;
  --orange-tint:#FBE6D9;
  --white:#FFFFFF;
  --ink:#17140F;

  --font-head:'Space Grotesk', 'Sora', sans-serif;
  --font-body:'Inter', 'DM Sans', sans-serif;

  --container:1180px;
  --gutter:24px;
  --radius-s:10px;
  --radius-m:18px;
  --radius-l:28px;

  --shadow-card: 0 1px 2px rgba(23,20,15,.04), 0 8px 24px -12px rgba(23,20,15,.12);
  --shadow-card-hover: 0 4px 10px rgba(23,20,15,.06), 0 20px 40px -16px rgba(23,20,15,.18);

  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--offwhite);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-head); margin:0; line-height:1.05; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:15px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.container--narrow{ max-width:820px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange);
}
.eyebrow::before{ content:''; width:16px; height:2px; background:var(--orange); display:inline-block; }

.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }
.section--charcoal{ background:var(--charcoal); color:var(--offwhite); }
.section--charcoal .eyebrow{ color:var(--orange); }
.section--paper{ background:var(--paper); }

.section-head{ max-width:640px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(28px,4vw,42px); margin-top:14px; }
.section-head p{ margin-top:14px; color:var(--warm-grey); font-size:16.5px; }
.section--charcoal .section-head p{ color:#C9C2B7; }
.section-head__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:999px; font-weight:600; font-size:14.5px;
  border:1px solid transparent; transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--orange); color:#fff; }
.btn-primary:hover{ background:var(--orange-deep); }
.btn-dark{ background:var(--charcoal); color:var(--offwhite); }
.btn-dark:hover{ background:#000; }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); }
.section--charcoal .btn-outline{ border-color:rgba(251,248,243,.3); color:var(--offwhite); }
.section--charcoal .btn-outline:hover{ border-color:var(--offwhite); }
.btn-ghost{ padding:8px 0; border-radius:0; font-weight:600; color:var(--orange); }
.btn-ghost::after{ content:'→'; margin-left:6px; transition:transform .2s var(--ease); display:inline-block; }
.btn-ghost:hover::after{ transform:translateX(4px); }
.btn-sm{ padding:9px 18px; font-size:13px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* ---------- navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:100;
  background:rgba(251,248,243,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.navbar__inner{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px; }
.navbar__brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:18px; }
.navbar__brand img{ height:30px; width:auto; }
.navbar__brand b{ color:var(--orange); }
.navbar__links{ display:flex; align-items:center; gap:28px; }
.navbar__links a{ font-size:13.5px; font-weight:600; letter-spacing:.02em; color:var(--charcoal-soft); position:relative; padding:4px 0; }
.navbar__links a::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange); transform:scaleX(0); transition:transform .25s var(--ease); }
.navbar__links a:hover::after, .navbar__links a.is-active::after{ transform:scaleX(1); }
.navbar__links a.is-active{ color:var(--ink); }
.navbar__actions{ display:flex; align-items:center; gap:10px; }
.navbar__burger{ display:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center; }
.navbar__burger span, .navbar__burger span::before, .navbar__burger span::after{ content:''; display:block; width:16px; height:2px; background:var(--ink); position:relative; transition:.2s; }
.navbar__burger span::before{ position:absolute; top:-5px; }
.navbar__burger span::after{ position:absolute; top:5px; }
.navbar__mobile{ display:none; flex-direction:column; gap:2px; background:#fff; border-top:1px solid var(--line); }
.navbar__mobile a{ padding:16px var(--gutter); border-bottom:1px solid var(--line); font-weight:600; font-size:15px; }
.navbar__mobile.is-open{ display:flex; }

@media (max-width:900px){
  .navbar__links{ display:none; }
  .navbar__burger{ display:flex; }
  .navbar__actions .btn{ display:none; }
}

/* ---------- hero ---------- */
.hero{ position:relative; padding:64px 0 80px; overflow:hidden; background:var(--offwhite); }
.hero__stripe{ position:absolute; top:0; right:0; width:120px; height:100%; background:var(--orange); opacity:.08; }
.hero__eyebrow{ margin-bottom:22px; }
.hero h1{ font-size:clamp(44px,8vw,84px); }
.hero h1 .accent{ color:var(--orange); }
.hero__lede{ max-width:560px; margin-top:22px; font-size:18px; color:var(--warm-grey); }
.hero__cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero__meta{ margin-top:54px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__meta span{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal-soft); background:#fff; border:1px solid var(--line); padding:8px 14px; border-radius:999px; }

/* ---------- stat blocks ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat-grid.stat-grid--3{ grid-template-columns:repeat(3,1fr); }
.stat{ padding:34px var(--gutter); border-left:1px solid var(--line); }
.stat:first-child{ border-left:none; }
.stat .stat__num{ font-family:var(--font-head); font-size:clamp(34px,4.6vw,58px); font-weight:700; line-height:1; color:var(--charcoal); }
.stat .stat__num .accent{ color:var(--orange); }
.stat .stat__label{ margin-top:10px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--warm-grey); }
@media (max-width:720px){ .stat-grid, .stat-grid.stat-grid--3{ grid-template-columns:repeat(2,1fr); } .stat{ border-left:1px solid var(--line); } .stat:nth-child(2n+1){ border-left:none; } }

/* ---------- cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m);
  box-shadow:var(--shadow-card); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-hover); border-color:#D8CFBF; }
.grid{ display:grid; gap:20px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid--3, .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; } }

/* member card */
.member-card{ padding:22px; display:flex; flex-direction:column; gap:14px; position:relative; }
.member-card__top{ display:flex; gap:14px; align-items:center; }
.avatar{
  width:56px; height:56px; border-radius:50%; flex:none; overflow:hidden;
  background:var(--orange-tint); color:var(--orange-deep);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:17px;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.member-card__name{ font-family:var(--font-head); font-weight:700; font-size:16.5px; }
.member-card__company{ font-size:13px; color:var(--warm-grey); margin-top:2px; }
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.03em; background:var(--orange-tint); color:var(--orange-deep);
  width:fit-content;
}
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--orange); }
.badge--outline{ background:transparent; border:1px solid var(--line); color:var(--charcoal-soft); }
.badge--outline::before{ display:none; }
.badge--new{ position:absolute; top:14px; right:14px; background:var(--charcoal); color:#fff; padding:4px 10px; font-size:10px; }
.badge--new::before{ display:none; }
.member-card__meta{ display:flex; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--warm-grey); }
.member-card__actions{ display:flex; gap:8px; margin-top:auto; padding-top:8px; }
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  transition:.2s; background:#fff;
}
.icon-btn:hover{ border-color:var(--orange); color:var(--orange); }

/* power team card */
.pt-card{ padding:28px; position:relative; overflow:hidden; }
.pt-card__num{ font-family:var(--font-head); font-size:13px; font-weight:700; color:var(--orange); letter-spacing:.08em; }
.pt-card__name{ font-family:var(--font-head); font-size:24px; margin-top:10px; }
.pt-card__count{ margin-top:14px; font-size:13px; color:var(--warm-grey); }
.pt-card__dot{ position:absolute; top:-30px; right:-30px; width:110px; height:110px; border-radius:50%; background:var(--orange); opacity:.08; }

/* category / open-seat card */
.cat-card{ padding:18px 20px; display:flex; align-items:center; gap:14px; }
.cat-card__badge{ width:34px; height:34px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--orange-deep); flex:none; }
.cat-card__title{ font-weight:700; font-size:14.5px; }
.cat-card__sub{ font-size:12px; color:var(--warm-grey); margin-top:2px; }

/* achievement card */
.award-card{ padding:24px; display:flex; gap:16px; align-items:center; }
.award-card .avatar{ width:64px; height:64px; font-size:19px; }
.award-card__type{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); }
.award-card__name{ font-family:var(--font-head); font-weight:700; font-size:16px; margin-top:4px; }
.award-card__meta{ font-size:12.5px; color:var(--warm-grey); margin-top:2px; }

/* next-meeting countdown */
.countdown-card{ background:var(--charcoal); color:#fff; border-radius:var(--radius-m); padding:28px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.countdown-card__label{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); }
.countdown-card__title{ font-family:var(--font-head); font-size:19px; font-weight:700; margin-top:6px; }
.countdown-card__meta{ font-size:13px; color:#C9C2B7; margin-top:4px; }
.countdown-timer{ display:flex; gap:18px; }
.countdown-timer__unit{ text-align:center; min-width:52px; }
.countdown-timer__num{ font-family:var(--font-head); font-size:30px; font-weight:700; line-height:1; }
.countdown-timer__unit-label{ font-size:10px; color:#C9C2B7; text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }

/* member spotlight */
.spotlight-card{ background:linear-gradient(135deg,var(--charcoal),var(--charcoal-soft)); color:#fff; border-radius:var(--radius-l); padding:36px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.spotlight-card .avatar{ width:80px; height:80px; font-size:24px; flex:none; }

/* event card */
.event-card{ padding:22px; display:flex; gap:18px; }
.event-card__date{ flex:none; width:64px; text-align:center; }
.event-card__date .d{ font-family:var(--font-head); font-size:26px; font-weight:700; color:var(--orange-deep); line-height:1; }
.event-card__date .m{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--warm-grey); margin-top:4px; }
.event-card__title{ font-family:var(--font-head); font-weight:700; font-size:16.5px; }
.event-card__meta{ font-size:13px; color:var(--warm-grey); margin-top:6px; }

/* placeholder — where a real logo/photo/ad will go once supplied. Distinct from the
   member-avatar initials fallback: this is always clearly labelled as a placeholder, never
   mistaken for real content, and never invents a name or number. */
.placeholder-block{
  border:1.5px dashed var(--line); border-radius:var(--radius-m); background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--warm-grey); text-align:center; padding:14px; flex:none; box-sizing:border-box;
}
.placeholder-block__icon{ width:22px; height:22px; opacity:.55; }
.placeholder-block__label{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.placeholder-block--logo{ width:100%; height:56px; border-radius:10px; }
.placeholder-block--avatar{ border-radius:50%; }
.placeholder-block--hero{ width:100%; height:260px; border-radius:var(--radius-l); }
.placeholder-block--ad{ width:100%; min-height:120px; border-radius:var(--radius-m); }
.placeholder-block--banner{ width:100%; height:38px; border-radius:8px; }
.placeholder-block--dark{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); color:#C9C2B7; }

/* empty state */
.empty-state{
  border:1px dashed var(--line); border-radius:var(--radius-m); padding:44px 28px; text-align:center; color:var(--warm-grey);
  background:#fff;
}
.empty-state strong{ display:block; color:var(--ink); font-family:var(--font-head); font-size:17px; margin-bottom:6px; }

/* progress bar */
.pbar{ height:8px; border-radius:999px; background:var(--paper); overflow:hidden; }
.pbar__fill{ height:100%; background:linear-gradient(90deg,var(--orange),var(--orange-deep)); border-radius:999px; transition:width 1s var(--ease); }
.status-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:700; }
.status-pill.on-track{ background:#E4F3E6; color:#2A7A3B; }
.status-pill.momentum{ background:var(--orange-tint); color:var(--orange-deep); }
.status-pill.attention{ background:#FBEAEA; color:#B23B3B; }
.status-pill.update-due{ background:var(--paper); color:var(--warm-grey); }
.status-pill.blocked{ background:#F1E8FB; color:#6C3FA6; }
.priority-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; flex:none; }
.priority-pill.high{ background:#FBEAEA; color:#B23B3B; }
.priority-pill.medium{ background:var(--orange-tint); color:var(--orange-deep); }
.priority-pill.low{ background:var(--paper); color:var(--warm-grey); }

/* filter bar / search */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:28px; }
.search-input{
  flex:1; min-width:220px; padding:13px 18px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:14.5px;
}
.search-input:focus{ outline:none; border-color:var(--orange); }
.chip{ padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:13px; font-weight:600; color:var(--charcoal-soft); transition:.2s; }
.chip.is-active, .chip:hover{ border-color:var(--orange); color:var(--orange-deep); background:var(--orange-tint); }
.select{ padding:12px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:14px; }

/* sponsor strip — integrated, never a banner */
.sponsor-strip{
  display:flex; align-items:center; gap:20px; padding:26px 28px; border-radius:var(--radius-m);
  background:var(--charcoal); color:var(--offwhite);
}
.sponsor-strip__mark{ width:52px; height:52px; border-radius:14px; background:var(--orange); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; flex:none; }
.sponsor-strip__copy{ flex:1; }
.sponsor-strip__eyebrow{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#C9C2B7; font-weight:700; }
.sponsor-strip__line{ font-family:var(--font-head); font-size:18px; margin-top:4px; }
.sponsor-strip a.btn-outline{ flex:none; }

/* footer */
.footer{ background:var(--charcoal); color:#C9C2B7; padding:64px 0 32px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer__brand{ font-family:var(--font-head); color:#fff; font-size:20px; font-weight:700; }
.footer__tag{ margin-top:12px; font-size:13.5px; max-width:280px; }
.footer h4{ color:#fff; font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.footer li{ margin-bottom:9px; font-size:13.5px; }
.footer a:hover{ color:#fff; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12.5px; flex-wrap:wrap; gap:10px; }
.footer__logos{ display:flex; gap:14px; align-items:center; opacity:.8; }
.footer__logos img{ height:26px; width:auto; filter:brightness(0) invert(1); opacity:.7; }
.footer__sponsors{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:24px; }
.footer__sponsors-label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8A8380; flex:none; }
.footer__sponsors img{ height:30px; width:auto; max-width:110px; object-fit:contain; opacity:.9; }
.footer__sponsors .placeholder-block{ width:88px; height:36px; }
.footer__sponsors .placeholder-block__icon{ width:16px; height:16px; }
.footer__sponsors .placeholder-block__label{ font-size:8px; }
@media (max-width:900px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__top{ grid-template-columns:1fr; } }

/* forms */
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-size:13px; font-weight:700; margin-bottom:8px; color:var(--charcoal-soft); }
.form-field .help{ font-size:12px; color:var(--warm-grey); margin-top:6px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:13px 16px; border-radius:var(--radius-s); border:1px solid var(--line); background:#fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--orange); }
.form-field textarea{ min-height:110px; resize:vertical; }
.form-section-title{ font-family:var(--font-head); font-size:18px; margin:34px 0 14px; padding-top:20px; border-top:1px solid var(--line); }
.form-section-title:first-child{ margin-top:0; padding-top:0; border-top:none; }

/* modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(23,20,15,.55); z-index:200; display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; }
.modal-backdrop.is-open{ display:flex; }
.modal{ background:#fff; border-radius:var(--radius-l); max-width:640px; width:100%; padding:36px; position:relative; animation:pop .25s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.modal__close{ position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; background:#fff; }

/* command-k search */
.cmdk-modal{ padding:0; max-width:560px; overflow:hidden; }
.cmdk-input-wrap{ padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; }
.cmdk-input-wrap svg{ flex:none; color:var(--warm-grey); }
.cmdk-input{ flex:1; border:none; outline:none; font-size:16.5px; font-family:var(--font-body); background:transparent; color:var(--ink); }
.cmdk-results{ max-height:min(60vh,420px); overflow-y:auto; padding:8px; }
.cmdk-group-label{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--warm-grey); padding:12px 12px 6px; }
.cmdk-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; cursor:pointer; text-decoration:none; color:inherit; }
.cmdk-item:hover, .cmdk-item.is-active{ background:var(--paper); }
.cmdk-item__name{ font-weight:600; font-size:14px; }
.cmdk-item__meta{ font-size:12px; color:var(--warm-grey); margin-top:1px; }
.cmdk-empty{ padding:32px 20px; text-align:center; color:var(--warm-grey); font-size:14px; }
.cmdk-hint{ padding:10px 20px; border-top:1px solid var(--line); font-size:11px; color:var(--warm-grey); display:flex; justify-content:space-between; }
.cmdk-hint kbd{ font-family:inherit; background:var(--paper); border-radius:5px; padding:1px 6px; font-size:10.5px; }
.navbar__search{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; flex:none; color:var(--charcoal-soft); }
.navbar__search:hover{ border-color:var(--orange); color:var(--orange); }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--charcoal); color:#fff; padding:14px 22px; border-radius:999px; font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition:.3s var(--ease); z-index:300; }
.toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* page header (interior pages) */
.page-hero{ padding:52px 0 40px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(32px,5vw,52px); margin-top:14px; }
.page-hero p{ margin-top:14px; max-width:600px; color:var(--warm-grey); font-size:16px; }

/* tables (used in progress/dashboard) */
.data-table{ width:100%; border-collapse:collapse; }
.data-table th{ text-align:left; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--warm-grey); padding:10px 14px; border-bottom:1px solid var(--line); }
.data-table td{ padding:14px; border-bottom:1px solid var(--line); font-size:14px; }

/* login / dashboard shells */
.auth-card{ max-width:420px; margin:0 auto; padding:36px; }
.kpi-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.kpi-row:last-child{ border-bottom:none; }
.dept-scorecard{ padding:24px; }
.dept-scorecard__pct{ font-family:var(--font-head); font-size:34px; font-weight:700; }

.text-center{ text-align:center; }
.mt-8{ margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.mb-8{ margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;}
.muted{ color:var(--warm-grey); }
.small{ font-size:12.5px; }
.hide{ display:none !important; }
.skeleton{ background:linear-gradient(90deg,#EFE9DF 25%,#F7F3EC 37%,#EFE9DF 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:8px; }

/* ==========================================================================
   MC "OS" — password-protected admin application shell (site/mc/index.html)
   ========================================================================== */
body.os-body{ background:var(--paper); }
.os-shell{ display:grid; grid-template-columns:264px 1fr; min-height:100vh; }
.os-sidebar{ background:var(--charcoal); color:var(--offwhite); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.os-sidebar__brand{ display:flex; align-items:center; gap:10px; padding:26px 22px 20px; font-family:var(--font-head); font-weight:700; font-size:16px; border-bottom:1px solid rgba(251,248,243,.1); }
.os-sidebar__brand b{ color:var(--orange); }
.os-sidebar__who{ padding:18px 22px; border-bottom:1px solid rgba(251,248,243,.1); }
.os-sidebar__who .name{ font-weight:700; font-size:14px; }
.os-sidebar__who .role{ font-size:11.5px; color:#C9C2B7; margin-top:3px; text-transform:uppercase; letter-spacing:.06em; }
.os-nav{ flex:1; padding:14px 12px; overflow-y:auto; }
.os-nav__group{ margin-bottom:18px; }
.os-nav__group-label{ padding:8px 12px 6px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#8F8878; font-weight:700; }
.os-nav__link{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:600; color:#D8D2C6; border:none; background:transparent; }
.os-nav__link:hover{ background:rgba(251,248,243,.06); color:#fff; }
.os-nav__link.is-active{ background:var(--orange); color:#fff; }
.os-nav__link .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5; flex:none; }
.os-sidebar__foot{ padding:16px 22px; border-top:1px solid rgba(251,248,243,.1); }
.os-main{ min-width:0; }
.os-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 32px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.os-topbar h1{ font-size:20px; }
.os-topbar__meta{ font-size:12.5px; color:var(--warm-grey); margin-top:3px; }
.os-burger{ display:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; align-items:center; justify-content:center; flex:none; }
.os-content{ padding:28px 32px 64px; max-width:1180px; }
.os-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.os-toolbar .search-input{ max-width:280px; }
.os-scope-note{ font-size:12.5px; color:var(--warm-grey); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:6px 14px; display:inline-flex; align-items:center; gap:8px; }
.os-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-m); background:#fff; }
.os-table-wrap table{ width:100%; border-collapse:collapse; min-width:640px; }
.os-table-wrap th{ text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--warm-grey); padding:12px 16px; border-bottom:1px solid var(--line); background:var(--paper); white-space:nowrap; }
.os-table-wrap td{ padding:12px 16px; border-bottom:1px solid var(--line); font-size:13.5px; max-width:280px; overflow:hidden; text-overflow:ellipsis; }
.os-table-wrap tr:last-child td{ border-bottom:none; }
.os-table-wrap td.os-cell-actions{ white-space:nowrap; text-align:right; }
.os-row-btn{ border:1px solid var(--line); background:#fff; border-radius:8px; padding:6px 10px; font-size:12px; font-weight:600; margin-left:6px; }
.os-row-btn:hover{ border-color:var(--orange); color:var(--orange-deep); }
.os-row-btn.danger:hover{ border-color:#B23B3B; color:#B23B3B; }
.os-field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.os-field-grid .form-field.full{ grid-column:1 / -1; }
.os-kpi-card, .os-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:24px; }
.os-report{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-l); padding:40px; }
.os-report__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; border-bottom:2px solid var(--charcoal); padding-bottom:20px; margin-bottom:24px; }
.os-report h2{ font-size:26px; }
.os-empty{ text-align:center; padding:48px 24px; color:var(--warm-grey); font-size:13.5px; }
.confirm-modal{ max-width:400px; text-align:center; }
@media (max-width:920px){
  .os-shell{ grid-template-columns:1fr; }
  .os-sidebar{ position:fixed; left:0; top:0; width:264px; transform:translateX(-100%); transition:transform .25s var(--ease); z-index:100; }
  .os-sidebar.is-open{ transform:translateX(0); }
  .os-burger{ display:flex; }
  .os-field-grid{ grid-template-columns:1fr; }
  .os-content{ padding:20px 16px 48px; }
  .os-topbar{ padding:16px; }
}
@keyframes shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }