/* Mission Possible Spy Academy — shared site stylesheet
   Design system carried over from the existing Kajabi-era ribbon pages:
   navy #041C2C / gold #C6A667 / Helvetica Neue */

* { margin:0; padding:0; box-sizing:border-box; }
body { background:#fff; color:#1a1a1a; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; line-height:1.6; }
a { color:inherit; }
img { max-width:100%; display:block; }

/* ---- Nav ---- */
nav { background:#041C2C; padding:16px 48px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; border-bottom:3px solid #C6A667; flex-wrap:wrap; gap:12px; }
.nav-logo { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; letter-spacing:0.15em; color:#fff; text-transform:uppercase; text-decoration:none; line-height:1.3; }
.nav-logo img { display:block; height:38px; width:auto; }
.nav-logo span { display:block; font-size:11px; font-weight:400; letter-spacing:0.3em; color:#C6A667; }
.nav-links { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.nav-links a { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#fff; text-decoration:none; opacity:0.8; transition:opacity 0.2s; }
.nav-links a:hover, .nav-links a.active { opacity:1; color:#C6A667; }

/* ---- Hero (interior pages) ---- */
.hero { background:#041C2C; padding:64px 48px 48px; border-bottom:4px solid #C6A667; }
.hero-inner { max-width:900px; }
.hero-phase { font-size:10px; font-weight:700; letter-spacing:0.35em; color:#C6A667; text-transform:uppercase; margin-bottom:12px; }
.status-badge { display:inline-block; font-size:11px; font-weight:700; letter-spacing:0.1em; padding:5px 14px; background:#f5f0e8; color:#8a6a20; margin-bottom:18px; border-radius:2px; }
.hero-title { font-size:clamp(36px,6vw,64px); font-weight:700; line-height:1; color:#fff; letter-spacing:0.02em; text-transform:uppercase; margin-bottom:14px; }
.hero-title span { color:#C6A667; }
.hero-skill { font-size:12px; font-weight:600; letter-spacing:0.15em; color:rgba(255,255,255,0.6); text-transform:uppercase; }

/* ---- Body / sections ---- */
.page-body { max-width:960px; margin:0 auto; padding:0 48px 80px; }
section { padding-top:52px; }
.section-label { font-size:9px; font-weight:700; letter-spacing:0.4em; color:#C6A667; text-transform:uppercase; margin-bottom:16px; padding-bottom:8px; border-bottom:2px solid #C6A667; }
.overview-text { font-size:16px; line-height:1.8; color:#333; margin-bottom:14px; }
.overview-text strong { color:#041C2C; font-weight:700; }

/* ---- CTA buttons ---- */
.btn-row { display:flex; flex-wrap:wrap; gap:12px; }
.btn { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:16px 24px; background:#041C2C; color:#fff; border:none; text-decoration:none; display:inline-block; text-align:center; flex:1 1 220px; transition:background 0.2s; cursor:pointer; }
.btn:hover { background:#C6A667; color:#041C2C; }
.btn.gold { background:#C6A667; color:#041C2C; }
.btn.gold:hover { background:#041C2C; color:#fff; }
.btn.outline { background:#fff; color:#041C2C; border:2px solid #041C2C; }
.btn.outline:hover { background:#041C2C; color:#fff; }

/* ---- Footer ---- */
footer { background:#041C2C; border-top:3px solid #C6A667; padding:28px 48px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.f-logo { font-size:12px; font-weight:700; letter-spacing:0.25em; color:#C6A667; text-transform:uppercase; }
.f-motto { font-family:Garamond,'Times New Roman',serif; font-style:italic; font-size:13px; letter-spacing:0.1em; color:rgba(255,255,255,0.6); }

/* ---- Ribbon detail pages ---- */
.hero-img { width:100%; max-height:420px; object-fit:cover; display:block; filter:brightness(0.85); }
.hero-img-wrap { position:relative; overflow:hidden; max-height:420px; background:#041C2C; }

.timeline-table { width:100%; border-collapse:collapse; font-size:14px; }
.timeline-table tr { border-bottom:1px solid #eee; }
.timeline-table td { padding:12px 0; color:#333; }
.tl-label { font-size:9px; font-weight:700; letter-spacing:0.2em; color:#C6A667; text-transform:uppercase; width:200px; vertical-align:top; padding-top:14px; }

.prog-table { width:100%; border-collapse:collapse; font-size:14px; margin-bottom:8px; }
.prog-table th { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#fff; background:#041C2C; padding:12px 16px; text-align:left; border-bottom:2px solid #C6A667; }
.th-sub { font-size:9px; font-weight:400; color:#C6A667; text-transform:none; letter-spacing:0; }
.prog-table td { padding:11px 16px; border-bottom:1px solid #e5e5e5; color:#333; font-size:14px; }
.prog-table td:first-child { color:#041C2C; font-weight:600; }
.prog-table tr:hover td { background:#f9f9f9; }
.highlight-row td { color:#041C2C !important; background:#f5f0e8; font-weight:600; }

.deliverables-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:16px; }
.deliv-item { background:#f8f8f8; padding:20px; border-top:3px solid #C6A667; }
.deliv-num { font-size:28px; font-weight:700; color:rgba(4,28,44,0.15); line-height:1; margin-bottom:8px; }
.deliv-name { font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#041C2C; margin-bottom:8px; }
.deliv-desc { font-size:13px; color:#555; line-height:1.6; }

.faculty-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.faculty-card { background:#f8f8f8; padding:18px 20px; border-top:3px solid #C6A667; }
.faculty-role { font-size:9px; font-weight:700; letter-spacing:0.3em; color:#C6A667; text-transform:uppercase; margin-bottom:6px; }
.faculty-syn-tag { display:inline-block; font-size:9px; letter-spacing:0.15em; padding:2px 8px; border:1px solid #C6A667; color:#888; margin-bottom:6px; text-transform:uppercase; }
.faculty-name { font-size:15px; font-weight:700; color:#041C2C; margin-bottom:4px; }
.faculty-spec { font-size:11px; color:#C6A667; font-weight:600; letter-spacing:0.05em; margin-bottom:8px; }
.faculty-rationale { font-size:13px; color:#555; line-height:1.6; }
.faculty-ellis { background:#f0ede6; padding:14px 20px; border-left:4px solid #C6A667; display:flex; gap:20px; align-items:flex-start; }
.faculty-ellis-label { font-size:9px; font-weight:700; letter-spacing:0.2em; color:#C6A667; text-transform:uppercase; min-width:130px; padding-top:2px; }
.faculty-ellis-name { font-size:13px; font-weight:700; color:#041C2C; margin-bottom:3px; }
.faculty-ellis-spec { font-size:12px; color:#555; line-height:1.5; }

.dl-row { display:flex; gap:12px; flex-wrap:wrap; }
.dl-btn { font-size:11px; font-weight:700; letter-spacing:0.1em; padding:11px 22px; border:2px solid #041C2C; color:#041C2C; text-decoration:none; transition:all 0.2s; display:inline-block; text-transform:uppercase; cursor:pointer; background:none; }
.dl-btn:hover { background:#041C2C; color:#fff; }

.enroll-block { margin-top:52px; padding:36px 0; border-top:3px solid #C6A667; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.enroll-btn { font-size:13px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; padding:16px 44px; background:#041C2C; color:#fff; border:none; cursor:pointer; text-decoration:none; display:inline-block; transition:background 0.2s; }
.enroll-btn:hover { background:#C6A667; color:#041C2C; }
.enroll-btn.secondary { background:#fff; color:#041C2C; border:2px solid #041C2C; }
.enroll-btn.secondary:hover { background:#041C2C; color:#fff; }
.enroll-meta { font-size:10px; font-weight:600; letter-spacing:0.15em; color:#888; text-transform:uppercase; line-height:1.8; }

@media (max-width:640px) {
  nav, .page-body, footer { padding-left:20px; padding-right:20px; }
  .hero { padding:40px 20px 32px; }
  .btn-row { flex-direction:column; }
  .deliverables-grid, .faculty-grid { grid-template-columns:1fr; }
  .enroll-block { flex-direction:column; align-items:flex-start; }
  .faculty-ellis { flex-direction:column; }
}