/* ============================================================
   SHA Career Hub — design system
   Palette psychology:
   - Deep navy  : institutional trust, competence, stability
   - Warm amber : optimism + action (reserved for CTAs & accents)
   - Warm ivory : premium, calm, editorial (not stark white)
   Type: Fraunces (authority, established) + Inter (modern, clear)
   ============================================================ */

:root {
  --navy-950: #081426;
  --navy-900: #0C1D38;
  --navy-800: #122A4E;
  --navy-700: #1A3A66;
  --navy-100: #DCE4F0;
  --ink:      #12203A;
  --muted:    #55617A;
  --faint:    #8792A8;

  --amber:        #E39A2D;
  --amber-strong: #C97F14;
  --amber-soft:   #FDF3E1;
  --amber-grad:   linear-gradient(120deg, #F0B454 0%, #DE8F1F 100%);

  --teal:      #0F7B63;
  --teal-soft: #E2F2EC;

  --bg:      #F8F6F1;
  --surface: #FFFFFF;
  --line:    #E7E2D6;
  --line-soft: #EFEBE1;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(12, 29, 56, .06), 0 2px 8px rgba(12, 29, 56, .05);
  --shadow-md: 0 4px 14px rgba(12, 29, 56, .08), 0 12px 32px rgba(12, 29, 56, .07);
  --shadow-lg: 0 8px 24px rgba(12, 29, 56, .12), 0 24px 64px rgba(12, 29, 56, .12);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.18; color: var(--navy-900); letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.35rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0; }
a  { color: var(--navy-700); text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--dark { background: var(--navy-900); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: var(--navy-100); }

/* kicker + section headers */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber-strong); margin-bottom: 14px;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--amber); border-radius: 2px; }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 1.05rem; }
.section--dark .section-head p { color: var(--navy-100); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .98rem; font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--amber-grad); color: var(--navy-950); box-shadow: 0 4px 14px rgba(222, 143, 31, .35); }
.btn--primary:hover { box-shadow: 0 6px 20px rgba(222, 143, 31, .45); }
.btn--dark { background: var(--navy-900); color: #fff; }
.btn--dark:hover { background: var(--navy-800); }
.btn--ghost { background: transparent; color: var(--navy-900); border: 1.5px solid var(--navy-900); }
.btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn--ghost-light:hover { border-color: #fff; }
.btn--lg { padding: 16px 34px; font-size: 1.05rem; }
.btn--sm { padding: 9px 18px; font-size: .88rem; }
@media (max-width: 640px) {
  /* long labels must wrap inside the pill, never overflow it */
  .btn { white-space: normal; line-height: 1.3; }
  .btn--lg { padding: 14px 22px; font-size: 1rem; }
}

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--navy-950); color: var(--navy-100);
  font-size: .86rem; text-align: center; padding: 9px 18px;
}
.announce a { color: #F0B454; font-weight: 600; margin-left: 8px; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(248, 246, 241, .92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 74px; }
.logo { display: flex; align-items: center; gap: 12px; flex: none; }
.logo svg, .logo img { height: 44px; width: auto; }
/* The header CTA reads "Check My IT Career Eligibility" (2026-09-12). Logo + nav + phone + that button need ~1250 px
   but the container is 1180 px, so the logo (the only flexible item) squashed to 34 px. The phone number is
   dropped from the header (it stays in the announcement bar, Contact and the footer); the nav collapses at 1100 px. */
.header__cta .btn { white-space: nowrap; }
.header__phone { display: none; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-size: .95rem; font-weight: 500; color: var(--ink); position: relative; padding: 6px 0; }
.nav a:hover { color: var(--amber-strong); }
.nav a.active { color: var(--amber-strong); }
.nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--amber); border-radius: 2px; }
.header__cta { display: flex; align-items: center; gap: 14px; }
.header__phone { font-size: .88rem; font-weight: 600; color: var(--navy-700); white-space: nowrap; }
@media (max-width: 1180px) { .header__phone { display: none; } }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy-900); margin: 5px 0; border-radius: 2px; transition: .2s; }

@media (max-width: 1180px) { /* was 1100; the ninth nav link (Events, 2026-09-13) pushed the CTA past the edge up to ~1170 */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start;
    background: var(--surface); padding: 18px 24px 26px; gap: 16px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; z-index: 190;
  }
  .nav.open { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease; }
  .nav-toggle { display: block; }
  .header__phone { display: none; }
  /* the long CTA folds to two lines here so the logo and the menu button stay inside the bar */
  .header__cta { gap: 8px; min-width: 0; }
  .header__cta .btn { white-space: normal; text-align: center; line-height: 1.2; padding: 8px 14px; max-width: 200px; }
}
@media (max-width: 480px) {
  /* phones: smaller logo and a compact two-line button ("Check My IT / Career Eligibility") */
  .logo img { height: 36px !important; }
  .header__cta .btn { font-size: .8rem; padding: 7px 12px; max-width: 168px; }
}

/* ---------- Hero ---------- */
.hero { background: var(--navy-900); color: #fff; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(720px 420px at 85% -10%, rgba(240, 180, 84, .16), transparent 60%),
    radial-gradient(600px 420px at -5% 110%, rgba(26, 58, 102, .8), transparent 60%);
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding-top: 88px; padding-bottom: 96px; }
.hero h1 { color: #fff; margin: 18px 0 20px; }
.hero h1 em { font-style: italic; color: #F0B454; }
.hero__sub { font-size: 1.13rem; color: var(--navy-100); max-width: 540px; margin-bottom: 32px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 7px 16px; font-size: .85rem; color: var(--navy-100);
}
.hero__badge strong { color: #F0B454; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn-row--center { justify-content: center; }
.page-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.page-hero p + p { margin-top: 12px; }

/* ---------- Campus programs ---------- */
.campus-event { padding: 28px 0; border-top: 1px solid var(--line); }
.campus-event:first-of-type { border-top: 0; }
.campus-event__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.campus-event__head h3 { font-size: 1.35rem; }
.campus-event__date { font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--amber-strong); }
.campus-event__desc { margin-top: 6px; max-width: 760px; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.gallery__item { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--navy-950); box-shadow: var(--shadow-sm); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; font-size: .78rem; color: #fff; background: linear-gradient(to top, rgba(8, 20, 38, .8), transparent); pointer-events: none; z-index: 1; }
/* A video sits in the same grid as the photos, as an equal 4:3 tile: the play button fills it, the caption overlays it
   and disappears once the player is running (it would cover YouTube's controls). hqdefault thumbnails carry letterbox
   bars for 16:9 videos; the scale crops them. */
.gallery__tile--video { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--navy-950); box-shadow: var(--shadow-sm); }
.gallery__tile--video .video-card { aspect-ratio: auto; height: 100%; border-radius: 0; box-shadow: none; }
.gallery__tile--video .video-card:hover { transform: none; box-shadow: none; }
.gallery__tile--video .video-card img { transform: scale(1.34); }
.gallery__tile--video:has(iframe) .gallery__caption { display: none; }
@media (max-width: 960px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; } .gallery__caption { display: none; } }
.lightbox { position: fixed; inset: 0; z-index: 700; display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(8, 20, 38, .92); }
.lightbox__figure { position: relative; margin: 0; max-width: min(1100px, 94vw); max-height: 92vh; display: flex; flex-direction: column; align-items: center; }
.lightbox__figure img { max-width: 100%; max-height: 82vh; border-radius: 10px; box-shadow: var(--shadow-lg); }
.lightbox__figure figcaption { color: var(--navy-100); font-size: .9rem; margin-top: 12px; text-align: center; }
.lightbox__figure figcaption[hidden] { display: none; }
.lightbox__close { position: absolute; top: 14px; right: 18px; border: 0; background: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; z-index: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: rgba(255,255,255,.12); color: #fff; width: 48px; height: 64px; border-radius: 10px; font-size: 40px; line-height: 1; cursor: pointer; z-index: 1; }
.lightbox__nav:hover { background: rgba(255,255,255,.24); }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }
.lightbox__nav[hidden] { display: none; }

/* ---------- Modal (syllabus download) ---------- */
.modal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal [hidden] { display: none !important; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(8, 20, 38, .62); backdrop-filter: blur(3px); }
.modal__panel { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px 26px 22px; }
.modal__close { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; padding: 6px 10px; }
.modal__close:hover { color: var(--navy-900); }
.modal__panel h3 { font-size: 1.35rem; margin: 6px 0 8px; }
.modal__error { color: #B4232A; font-size: .86rem; margin: 0; }
.modal__fine { font-size: .78rem; margin: 0; }
.modal__dev { background: var(--amber-soft); border: 1px dashed var(--amber); border-radius: 10px; padding: 10px 12px; font-size: .88rem; font-weight: 600; color: #6B4E12; margin: 10px 0 0; }
.modal__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.syl-code { font-size: 1.5rem !important; letter-spacing: .35em; text-align: center; }
@media (max-width: 480px) { .modal { padding: 10px; } .modal__panel { padding: 22px 16px 18px; } }
.hero__note { margin-top: 16px; font-size: .85rem; color: var(--faint); }

.hero__panel {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg); padding: 28px; backdrop-filter: blur(6px);
}
.hero__panel h3 { color: #fff; font-size: 1.05rem; margin-bottom: 18px; }
.hero__steps { display: grid; gap: 0; }
.hero__step { display: flex; gap: 14px; align-items: flex-start; position: relative; padding-bottom: 18px; }
.hero__step:last-child { padding-bottom: 0; }
.hero__step::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: rgba(255,255,255,.15); }
.hero__step:last-child::before { display: none; }
.hero__num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--amber-grad); color: var(--navy-950);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
}
.hero__step div strong { display: block; color: #fff; font-size: .95rem; }
.hero__step div span { font-size: .84rem; color: var(--navy-100); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 72px; }
}

/* ---------- Trust bar ---------- */
.trustbar { background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.trustbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-top: 22px; padding-bottom: 22px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item strong { font-family: var(--font-display); font-size: 1.35rem; color: var(--navy-900); display: block; line-height: 1.1; }
.trust-item span { font-size: .82rem; color: var(--muted); }
.stars { color: var(--amber); letter-spacing: 2px; font-size: .95rem; }

/* ---------- Logos strip ---------- */
.logo-strip { text-align: center; }
.logo-strip__label { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 22px; }
.logo-strip__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; }
.logo-strip__row span {
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 600;
  color: var(--faint); opacity: .85;
}
.logo-strip__more { font-size: .9rem; font-weight: 600; color: var(--amber-strong); align-self: center; white-space: nowrap; }
.logo-strip__more:hover { text-decoration: underline; }
/* Accreditation badges under the alumni strip (admin-editable list) */
.badge-strip { margin-top: 38px; text-align: center; }
.badge-strip__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.accred {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 14px 22px; max-width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.accred strong { font-family: var(--font-display); font-size: 1.08rem; color: var(--navy-900); }
.accred span { font-size: .85rem; color: var(--faint); }
.accred--logo { flex-direction: row; gap: 16px; text-align: left; padding: 12px 22px 12px 14px; }
.accred--logo > div { display: flex; flex-direction: column; gap: 4px; }
.accred__logo { width: 104px; height: 80px; object-fit: contain; border-radius: 8px; background: #fff; }
.accred-card { display: flex; gap: 22px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.accred-card img { width: 150px; height: 116px; object-fit: contain; flex: none; background: #fff; border-radius: 10px; border: 1px solid var(--line); }
.accred-card h3 { font-size: 1.15rem; margin: 4px 0 6px; }
.accred-card p { color: var(--muted); font-size: .92rem; margin: 0 0 8px; }
.accred-card a { font-weight: 600; color: var(--amber-strong); font-size: .9rem; }
@media (max-width: 480px) { .accred-card { flex-direction: column; align-items: flex-start; } }
@media (max-width: 640px) { .accred--logo { flex-direction: column; text-align: center; } .accred--logo > div { align-items: center; } }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 26px; }
.grid > * { min-width: 0; } /* prevent intrinsic-width children (selects, long words) blowing out tracks */
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.course-card { display: flex; flex-direction: column; position: relative; }
.course-card__flag {
  position: absolute; top: 20px; right: 20px;
  background: var(--amber-soft); color: var(--amber-strong);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
}
.course-card__icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--navy-900);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  color: #F0B454;
}
.course-card__icon svg { width: 26px; height: 26px; }
.course-card h3 { margin-bottom: 8px; font-size: 1.22rem; padding-right: 70px; }
.course-card__tag { color: var(--muted); font-size: .93rem; flex: 1; }
.course-card__meta { display: flex; gap: 14px; margin: 18px 0; font-size: .82rem; color: var(--faint); flex-wrap: wrap; }
.course-card__link { font-weight: 600; color: var(--amber-strong); font-size: .95rem; }
.course-card__link:hover { text-decoration: underline; }
/* Second link on a course card (syllabus PDF modal). Not a .course-card__link: that class stretches over the whole card. */
.course-card__links { margin-top: auto; display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.course-card__pdf { position: relative; z-index: 1; font-weight: 600; color: var(--navy-700); font-size: .9rem; }
.course-card__pdf:hover { text-decoration: underline; color: var(--amber-strong); }
/* Stretched link: the whole course card is clickable (scoped to cards only) */
.course-card .course-card__link::after { content: ""; position: absolute; inset: 0; }
.course-card:has(.course-card__link) { cursor: pointer; }

/* ---------- Feature rows ---------- */
.feature { display: flex; gap: 18px; align-items: flex-start; }
.feature__icon {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  background: var(--teal-soft); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
}
.feature__icon svg { width: 23px; height: 23px; }
.feature h3 { font-size: 1.08rem; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: .95rem; }

/* ---------- Journey / lifecycle ---------- */
.journey { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 960px) { .journey { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .journey { grid-template-columns: 1fr; } }
.journey__item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; position: relative;
}
.journey__item::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-display); font-size: 2rem; font-weight: 600;
  color: var(--line); position: absolute; top: 18px; right: 22px; line-height: 1;
}
.journey__item h3 { font-size: 1.05rem; margin-bottom: 8px; padding-right: 52px; }
.journey__item p { color: var(--muted); font-size: .92rem; }

/* ---------- Testimonials ---------- */
.testimonial { display: flex; flex-direction: column; height: 100%; }
.testimonial__video { margin-top: 18px; }
.testimonial__video .video-card { display: block; width: 100%; }
.testimonial__quote { flex: 1; font-size: .97rem; color: var(--ink); }
/* Quotes are clamped to three lines; site.js shows the Read more button only when the text actually overflows. */
.testimonial__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.testimonial.is-open .testimonial__text { display: block; -webkit-line-clamp: unset; overflow: visible; }
.testimonial__more { display: inline-block; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: .85rem; font-weight: 600; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.testimonial__more:hover { color: var(--navy-900); }
.testimonial__more[hidden] { display: none; } /* the explicit display above would otherwise beat the browser's [hidden] rule */
a.testimonial__source { text-decoration: underline; text-underline-offset: 2px; }
a.testimonial__source:hover { color: var(--teal); }
.testimonial__quote::before { content: "\201C"; font-family: var(--font-display); font-size: 2.6rem; color: var(--amber); display: block; line-height: .6; margin-bottom: 12px; }
.testimonial__person { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; gap: 14px; align-items: center; }
.testimonial__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--amber); }
.leader-photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--amber-soft); margin-bottom: 16px; }
.testimonial__person strong { display: block; font-size: .95rem; color: var(--navy-900); }
.testimonial__source { font-style: normal; font-weight: 500; font-size: .72rem; color: var(--faint); margin-left: 8px; letter-spacing: .02em; }
.testimonial__person span { font-size: .82rem; color: var(--muted); }
.testimonial__outcome {
  display: inline-block; margin-top: 10px; background: var(--teal-soft); color: var(--teal);
  font-size: .78rem; font-weight: 600; line-height: 1.45; padding: 7px 14px; border-radius: 14px;
}

/* ---------- FAQ ---------- */
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 19px 24px; font-weight: 600; font-size: 1rem; color: var(--navy-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--amber-strong); transition: transform .2s; flex: none; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 24px 20px; color: var(--muted); font-size: .96rem; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .86rem; font-weight: 600; color: var(--navy-900); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0;
  font-family: var(--font-body); font-size: .96rem; color: var(--ink);
  padding: 12px 15px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(227, 154, 45, .18);
}
.field .error { color: #B4232A; font-size: .8rem; }

.form-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-md); }
.alert-success { background: var(--teal-soft); border: 1px solid #BEE3D5; color: var(--teal); border-radius: var(--radius); padding: 18px 22px; font-weight: 500; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy-900); border-radius: var(--radius-lg); padding: 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(560px 300px at 90% 0%, rgba(240,180,84,.18), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: var(--navy-100); max-width: 520px; }
.cta-band p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* the default link colour vanishes on the navy band */
.cta-band p a:hover { color: var(--amber); }
@media (max-width: 820px) { .cta-band { flex-direction: column; text-align: center; padding: 44px 28px; } }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; }
@media (max-width: 820px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat strong { font-family: var(--font-display); font-size: 2.4rem; color: #F0B454; display: block; line-height: 1.1; }
.stat span { color: var(--navy-100); font-size: .9rem; }

/* ---------- Page hero / course detail ---------- */
.page-hero { background: var(--navy-900); color: #fff; padding: 64px 0; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 380px at 88% -20%, rgba(240,180,84,.15), transparent 60%); }
.page-hero > .container { position: relative; }
.page-hero h1 { color: #fff; margin: 12px 0 14px; }
.page-hero p { color: var(--navy-100); max-width: 640px; font-size: 1.06rem; }
.breadcrumb { font-size: .84rem; color: var(--faint); }
.breadcrumb a { color: var(--navy-100); }
.page-hero__meta { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.page-hero__meta + p { margin-top: 26px; }
.page-hero__meta div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 12px; padding: 10px 18px; font-size: .9rem; }
.page-hero__meta strong { color: #F0B454; display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }

.syllabus-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.syllabus-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 600; color: var(--navy-900); }
.syllabus-item summary::-webkit-details-marker { display: none; }
.syllabus-item__num { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--navy-900); color: #F0B454; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; }
.syllabus-item summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; color: var(--amber-strong); }
.syllabus-item[open] summary::after { content: "−"; }
.syllabus-item ul { padding: 0 22px 18px 70px; list-style: disc; color: var(--muted); font-size: .94rem; }
.syllabus-item ul li { margin-bottom: 6px; }

.check-list li { position: relative; display: block; padding-left: 34px; margin-bottom: 12px; color: var(--ink); font-size: .96rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font-size: .86rem; color: var(--navy-800); font-weight: 500; }

#apply-form { scroll-margin-top: 90px; }
.sticky-aside { position: sticky; top: 100px; }
.detail-layout { display: grid; grid-template-columns: 1fr 360px; gap: 44px; align-items: start; }
@media (max-width: 960px) { .detail-layout { grid-template-columns: 1fr; } .sticky-aside { position: static; } }

/* ---------- Footer ---------- */
.footer { background: var(--navy-950); color: var(--navy-100); padding: 64px 0 32px; }
.footer a { color: var(--navy-100); font-size: .92rem; }
.footer a:hover { color: #F0B454; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: 16px; font-family: var(--font-body); font-weight: 700; letter-spacing: .04em; }
.footer ul li { margin-bottom: 10px; }
.footer__about { font-size: .92rem; margin-top: 14px; max-width: 300px; }
.footer__cta { margin-top: 16px; }
.footer__cta svg { width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 26px; font-size: .85rem; color: var(--faint); flex-wrap: wrap; }
.footer__social { display: flex; gap: 14px; }
.footer__social a { display: flex; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); align-items: center; justify-content: center; }
.footer__social svg { width: 16px; height: 16px; fill: var(--navy-100); }
.footer__social a:hover svg { fill: #F0B454; }

/* ---------- Chat widget ---------- */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 400;
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--amber-grad); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.chat-fab:hover { transform: scale(1.06); }
.chat-fab svg { width: 27px; height: 27px; stroke: var(--navy-950); }
.chat-panel {
  position: fixed; right: 22px; bottom: 94px; z-index: 400;
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 130px));
  background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg);
  display: none; flex-direction: column; overflow: hidden; border: 1px solid var(--line);
}
.chat-panel.open { display: flex; }
.chat-panel__head { background: var(--navy-900); color: #fff; padding: 16px 20px; display: flex; align-items: center; gap: 12px; }
.chat-panel__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--amber-grad); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--navy-950); font-family: var(--font-display); }
.chat-panel__head strong { display: block; font-size: .95rem; }
.chat-panel__head span { font-size: .76rem; color: var(--navy-100); }
.chat-panel__close { margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.3rem; cursor: pointer; opacity: .8; }
.chat-panel__body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.chat-msg { max-width: 85%; padding: 11px 15px; border-radius: 16px; font-size: .92rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.chat-msg--bot { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-msg--user { background: var(--navy-800); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-msg--typing { color: var(--faint); font-style: italic; }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-suggest button { background: var(--surface); border: 1px solid var(--amber); color: var(--amber-strong); border-radius: 999px; padding: 6px 13px; font-size: .8rem; cursor: pointer; font-family: var(--font-body); }
.chat-suggest button:hover { background: var(--amber-soft); }
.chat-panel__input { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); background: var(--surface); }
.chat-panel__input input { flex: 1; border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 17px; font-size: .92rem; font-family: var(--font-body); }
.chat-panel__input input:focus { outline: none; border-color: var(--amber); }
.chat-panel__input button { border: 0; border-radius: 50%; width: 44px; height: 44px; background: var(--amber-grad); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
.chat-panel__input button svg { width: 19px; height: 19px; stroke: var(--navy-950); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Admin ---------- */
.admin-body { background: #F1F3F7; }
.admin-shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.admin-nav { background: var(--navy-950); padding: 26px 0; }
.admin-nav__brand { color: #fff; font-family: var(--font-display); font-size: 1.1rem; padding: 0 22px 22px; display: block; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 14px; }
.admin-nav a { display: block; padding: 11px 22px; color: var(--navy-100); font-size: .92rem; }
.admin-nav a:hover, .admin-nav a.active { background: rgba(255,255,255,.07); color: #F0B454; }
.admin-main { padding: 34px 40px; }
.admin-main h1 { font-size: 1.6rem; margin-bottom: 24px; }
.admin-card { background: #fff; border-radius: var(--radius); border: 1px solid #E3E7EE; padding: 26px; margin-bottom: 22px; box-shadow: var(--shadow-sm); }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid #E3E7EE; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.admin-table td { padding: 12px; border-bottom: 1px solid #EEF1F5; vertical-align: top; }
.admin-table tr:hover td { background: #F8FAFC; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.badge--green { background: var(--teal-soft); color: var(--teal); }
.badge--gray { background: #EEF1F5; color: var(--muted); }
.badge--amber { background: var(--amber-soft); color: var(--amber-strong); }
.admin-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 860px) { .admin-shell { grid-template-columns: 1fr; } .admin-nav { display: flex; overflow-x: auto; padding: 10px; align-items: center; } .admin-nav__brand { border: 0; padding: 10px; margin: 0; } .admin-nav a { white-space: nowrap; } .admin-main { padding: 22px; } }

/* Utility */
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 36px; }
.mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }

/* ---------- Alumni video cards ---------- */
/* display:block + width:100% give the button a size of its own; without them it only measured the thumbnail
   and collapsed to 0x0 once the click swapped the image for the player iframe (course pages, 2026-09-12). */
.video-card { display: block; width: 100%; position: relative; border: 0; padding: 0; cursor: pointer; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--navy-950); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.video-card img { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.video-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-card__play::before { content: ""; position: absolute; width: 58px; height: 58px; border-radius: 50%; background: var(--amber-grad); box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.video-card__play svg { position: relative; width: 26px; height: 26px; fill: var(--navy-950); margin-left: 4px; }
.video-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Blog ---------- */
.post-list { display: grid; gap: 22px; max-width: 820px; }
.post-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 32px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 8px 0 10px; }
.post-card h2 a { color: var(--navy-900); }
.post-card h2 a:hover { color: var(--amber-strong); }
.post-card p { color: var(--muted); }
.post-card__more { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--amber-strong); }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; color: var(--faint); font-weight: 500; }
.post-meta--hero { color: var(--navy-100); margin-top: 10px; }
.post-meta--hero time, .post-meta--hero span { color: #F0B454; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.prose { max-width: 720px; font-size: 1.04rem; line-height: 1.72; color: var(--ink); }
.prose > * + * { margin-top: 1.1em; }
.prose pre { background: #0F1B2D; color: #E6EDF5; border-radius: 12px; padding: 16px 18px; overflow-x: auto; font-size: .88rem; line-height: 1.55; max-width: 100%; }
.prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; white-space: pre; }
.prose code { background: #EEF1F5; color: var(--navy-900); padding: 2px 6px; border-radius: 6px; font-size: .9em; word-break: break-word; }
.prose img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); display: block; }
.prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); margin-top: 2.1em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.7em; }
.prose h2 + *, .prose h3 + * { margin-top: .7em; }
.prose p { margin-top: 1.1em; }
.prose a:not(.btn) { color: var(--amber-strong); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(201,127,20,.35); text-underline-offset: 3px; }
.prose a:not(.btn):hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: .45em; }
.prose li::marker { color: var(--amber-strong); font-weight: 700; }
.prose strong { color: var(--navy-900); }
.prose blockquote { border-left: 3px solid var(--amber); background: var(--bg); padding: 16px 22px; border-radius: 0 var(--radius) var(--radius) 0; color: var(--muted); font-style: italic; }
.prose blockquote p { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .94rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--bg); color: var(--navy-900); font-weight: 600; white-space: nowrap; }
.prose hr { border: 0; border-top: 1px solid var(--line); }
.prose .faq-item { margin-top: 12px; }
.prose .faq-item summary { font-size: 1rem; }
.review-box { background: var(--amber-soft); border: 1px solid #F1D9A8; border-left: 4px solid var(--amber); border-radius: var(--radius); padding: 18px 22px; font-size: .94rem; }
.review-box strong { display: block; color: var(--amber-strong); margin-bottom: 8px; }
.review-box ol { padding-left: 1.3em; list-style: decimal; }
.review-box li { margin-top: 6px; }
.review-box p { margin: 0; }
.video-stories { display: grid; gap: 26px; margin-top: 2em; }
.video-story h3 { margin-top: 14px; font-size: 1.1rem; }
.video-story p { margin-top: 6px; color: var(--muted); font-size: .96rem; }
.post-cta { background: var(--navy-900); color: #fff; border-radius: var(--radius-lg); padding: 36px; margin-top: 2.6em; }
.post-cta h2 { color: #fff; margin: 0 0 8px; font-size: 1.5rem; }
.post-cta p { color: var(--navy-100); margin: 0 0 20px; }
.post-cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.post-aside { padding: 24px; }
.post-aside:hover { transform: none; box-shadow: var(--shadow-sm); }
.post-aside ul { margin-top: 12px; }
.post-aside li + li { border-top: 1px solid var(--line); }
.post-aside li a { display: block; padding: 11px 0; color: var(--navy-900); }
.post-aside li a:hover strong { color: var(--amber-strong); }
.post-aside li strong { display: block; font-size: .96rem; line-height: 1.35; }
.post-aside li span { display: block; font-size: .8rem; color: var(--faint); margin-top: 3px; }
.post-aside p { margin-top: 10px; font-size: .95rem; color: var(--muted); }
.post-aside p a { color: var(--navy-900); font-weight: 600; }
@media (max-width: 960px) { .post-layout { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 640px) { .post-card { padding: 22px 20px; } .post-cta { padding: 26px 22px; } .prose { font-size: 1rem; } }

/* Compact chat bubble on phones */
@media (max-width: 640px) {
  .chat-fab { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .chat-fab svg { width: 22px; height: 22px; }
  .chat-panel { right: 12px; bottom: 74px; }
}

/* Fee tiers */
.tiers { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; align-items: start; }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.tier--featured { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft), var(--shadow-md); padding: 36px; }
.tier--featured h3 { font-size: 1.6rem; }
.tier--featured .tier__price strong { font-size: 2.3rem; }
.tier--quiet { background: #F7F8FA; box-shadow: none; padding: 26px; }
.tier--quiet h3 { font-size: 1.2rem; }
.tier--quiet .tier__label { color: var(--muted); background: #E9ECF1; }
.tier--quiet .tier__price strong { font-size: 1.5rem; color: var(--navy-800); }
.tier__label { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-strong); background: var(--amber-soft); padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; align-self: flex-start; }
.tier h3 { font-size: 1.35rem; }
.tier__price { margin-top: 10px; color: var(--muted); font-size: 1rem; }
.tier__price strong { font-size: 1.9rem; color: var(--navy-900); margin-left: 4px; }
.tier__note { color: var(--faint); font-size: .86rem; margin: 2px 0 16px; }
.tier .check-list { flex: 1; }
@media (max-width: 760px) { .tiers { grid-template-columns: 1fr; } .tier--featured { padding: 28px 24px; } }
/* Placements: roadmap page */
.market-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 30px; }
.market-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 26px; box-shadow: var(--shadow-sm); }
.market-stat strong { font-family: var(--font-display); font-size: 2.3rem; color: var(--amber-strong); display: block; line-height: 1.1; margin-bottom: 8px; }
.market-stat span { display: block; color: var(--ink); font-size: .95rem; line-height: 1.5; }
.market-stat small { display: block; margin-top: 10px; color: var(--muted); font-size: .8rem; }
.prose-block { max-width: 760px; color: var(--ink); line-height: 1.7; }
.prose-block p + p { margin-top: 1em; }
.pull-quote { max-width: 760px; margin: 30px 0; padding: 22px 28px; border-left: 4px solid var(--amber); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.pull-quote p { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.3; color: var(--navy-900); margin: 0; }
.pull-quote cite { display: block; margin-top: 8px; font-style: normal; color: var(--muted); font-size: .88rem; }
.roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stop { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.stop__month { display: inline-block; align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--navy-900); padding: 4px 11px; border-radius: 999px; margin-bottom: 12px; }
.stop h3 { font-size: 1.2rem; margin: 0; }
.stop__tag { color: var(--amber-strong); font-weight: 600; font-size: .9rem; margin: 2px 0 10px; }
.stop > p:not(.stop__tag) { color: var(--muted); font-size: .94rem; line-height: 1.55; flex: 1; }
.stop__show { margin-top: 16px; background: var(--teal-soft); border-radius: var(--radius); padding: 12px 14px; font-size: .9rem; line-height: 1.5; color: var(--ink); }
.stop__show strong { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-800); margin-bottom: 4px; }
.direction h3 { font-size: 1.25rem; margin-bottom: 8px; }
.direction > p { color: var(--muted); font-size: .95rem; }
.direction dl { margin-top: 14px; }
.direction dt { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-strong); margin-top: 12px; }
.direction dd { margin: 3px 0 0; color: var(--ink); font-size: .94rem; line-height: 1.5; }
.numbered-list { counter-reset: n; list-style: none; padding: 0; margin: 14px 0 18px; }
.numbered-list li { counter-increment: n; font-family: var(--font-display); font-size: 1.25rem; color: var(--navy-900); padding: 8px 0 8px 46px; position: relative; border-bottom: 1px solid var(--line); }
.numbered-list li::before { content: counter(n); position: absolute; left: 0; top: 6px; width: 32px; height: 32px; border-radius: 50%; background: var(--amber-soft); color: var(--amber-strong); font-family: var(--font-body); font-weight: 700; font-size: .95rem; display: flex; align-items: center; justify-content: center; }
.honest-box { background: var(--navy-900); color: var(--navy-100); border-radius: var(--radius-lg); padding: 28px 30px; }
.honest-box .kicker { color: #F0B454; }
.honest-box ul { list-style: none; padding: 0; margin: 14px 0 0; }
.honest-box li { position: relative; padding-left: 26px; margin-bottom: 12px; line-height: 1.55; font-size: .95rem; }
.honest-box li::before { content: "–"; position: absolute; left: 0; color: #F0B454; font-weight: 700; }
.poster { margin: 32px 0 0; max-width: 980px; }
.poster img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.poster figcaption { margin-top: 10px; color: var(--muted); font-size: .88rem; }
.join-layout { display: grid; grid-template-columns: 5fr 6fr; gap: 40px; align-items: start; }
.poster--portrait { margin: 0; max-width: 520px; }
.join-steps { counter-reset: js; list-style: none; padding: 0; margin: 0; }
.join-steps li { counter-increment: js; position: relative; padding: 0 0 22px 58px; }
.join-steps li::before { content: counter(js); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--navy-900); color: #F0B454; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.join-steps li + li::after { content: ""; position: absolute; left: 20px; top: 46px; bottom: 4px; width: 2px; background: var(--line); }
.join-steps strong { display: block; font-family: var(--font-display); font-size: 1.2rem; color: var(--navy-900); margin-bottom: 4px; }
.join-steps span { color: var(--muted); line-height: 1.55; font-size: .96rem; }
@media (max-width: 860px) { .join-layout { grid-template-columns: 1fr; } .poster--portrait { max-width: 100%; } }
.rm-faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0 20px; margin-bottom: 10px; }
.rm-faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--navy-900); list-style: none; position: relative; padding-right: 30px; }
.rm-faq summary::-webkit-details-marker { display: none; }
.rm-faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; color: var(--amber-strong); font-size: 1.3rem; }
.rm-faq details[open] summary::after { content: "–"; }
.rm-faq details p { margin: 0 0 16px; color: var(--muted); line-height: 1.6; }
@media (max-width: 960px) { .roadmap { grid-template-columns: 1fr 1fr; } .market-stats { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .roadmap { grid-template-columns: 1fr; } .pull-quote p { font-size: 1.2rem; } }
/* Blog categories */
.cat-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.cat-bar a { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: .88rem; font-weight: 600; color: var(--navy-800); }
.cat-bar a:hover { border-color: var(--amber); color: var(--amber-strong); }
.cat-bar a.is-active { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.cat-bar a span { font-weight: 500; color: var(--muted); margin-left: 4px; }
.cat-bar a.is-active span { color: var(--navy-100); }
.post-cat { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-strong); background: var(--amber-soft); padding: 3px 10px; border-radius: 999px; }
.post-cat--hero { color: #F0B454; background: rgba(240,180,84,.14); }
.post-meta .post-cat { margin-right: 4px; }

/* ===== Admin: page heads, tabs, sections, field hints (shared pattern on both sites) ===== */
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-head h1 { margin: 0; }
.admin-head p { margin: 4px 0 0; color: var(--muted); font-size: .92rem; max-width: 60ch; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid #E3E7EE; margin-bottom: 22px; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 16px; font: inherit; font-size: .92rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.tabs button:hover { color: inherit; }
.tabs button.active { color: inherit; border-bottom-color: currentColor; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.admin-section { margin-bottom: 26px; }
.admin-section:last-child { margin-bottom: 0; }
.admin-section__head { margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #EEF1F5; }
.admin-section__head h3 { margin: 0; font-size: 1.05rem; }
.admin-section__head p { margin: 4px 0 0; font-size: .86rem; color: var(--muted); max-width: 70ch; }
.field .hint { font-size: .78rem; line-height: 1.5; color: var(--muted); }
.field .hint b { font-weight: 600; color: inherit; }
.field--check { flex-direction: row; align-items: flex-start; gap: 10px; }
.field--check input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; padding: 0; border-radius: 5px; box-shadow: none; accent-color: var(--lead-accent, #0C1D38); cursor: pointer; }
.field--check label { cursor: pointer; }
.field--check label { font-weight: 600; }
.field--check .hint { display: block; font-weight: 400; margin-top: 2px; }
.admin-actions--end { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #EEF1F5; }
.admin-actions--end .status { margin-right: auto; font-size: .9rem; color: #166534; }
.alert-error { background: #FDECEC; color: #9F1D24; border: 1px solid #F5C2C2; border-radius: 10px; padding: 12px 16px; font-size: .92rem; }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .admin-card { padding: 18px; }
  .tabs button { padding: 10px 12px; font-size: .88rem; }
}

/* ===== Admin: leads as cards instead of a nine-column table ===== */
.lead-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.lead-filters button { border: 1px solid #E3E7EE; background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .86rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.lead-filters button.active { background: var(--lead-accent, #0C1D38); border-color: transparent; color: #fff; }
.lead-list { display: flex; flex-direction: column; gap: 12px; }
.lead { display: flex; gap: 20px; align-items: flex-start; background: #fff; border: 1px solid #E3E7EE; border-left-width: 4px; border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow-sm); }
.lead--new { border-left-color: var(--lead-new, #E39A2D); }
.lead__main { flex: 1; min-width: 0; }
.lead__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lead__name { font-size: 1.04rem; }
.lead__when { font-size: .82rem; color: var(--muted); }
.lead__contact { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: .92rem; }
.lead__contact a { font-weight: 600; }
.lead__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip { display: inline-block; background: #F3F5F8; border-radius: 8px; padding: 4px 10px; font-size: .8rem; color: var(--muted); }
.chip b { font-weight: 600; }
.lead__msg { margin-top: 10px; font-size: .92rem; line-height: 1.55; white-space: pre-line; }
.lead__actions { flex: none; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.lead__select { flex: none; padding-top: 3px; }
.lead__select input { width: 18px; height: 18px; accent-color: var(--lead-accent, #0C1D38); cursor: pointer; }
.lead--spam { border-left-color: #B4232A; background: #FCF8F8; }
.badge--red { background: #FBE4E6; color: #8F1B22; }
.btn--danger { background: #B4232A; color: #fff; }
.btn--danger:hover { background: #8F1B22; }
.btn--danger:disabled { opacity: .45; cursor: not-allowed; }
.bulk-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.bulk-bar form { display: flex; align-items: center; gap: 14px; }
.bulk-bar__all { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.bulk-bar__all input { width: 18px; height: 18px; accent-color: var(--lead-accent, #0C1D38); }
@media (max-width: 640px) {
  .lead { flex-wrap: wrap; }
  .lead__actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
}
/* Honeypot field on the public lead forms: off-screen for people, present for bots. */
.lg-hp { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.field--turnstile { min-height: 65px; } /* Cloudflare Turnstile widget; reserves its height so the form does not jump */
.field--turnstile .cf-turnstile { width: 100%; min-width: 0; }
@media (max-width: 720px) {
  .lead { flex-direction: column; gap: 14px; padding: 16px; }
  .lead__actions, .lead__actions .btn { width: 100%; }
}

:root { --lead-accent: var(--navy-900); --lead-new: var(--amber); }
/* Any checkbox inside an admin field: fixed square, never the text-input padding or 100% width */
.field input[type="checkbox"] { width: 20px; height: 20px; flex: none; padding: 0; margin: 0; border-radius: 5px; box-shadow: none; accent-color: var(--lead-accent, #0C1D38); cursor: pointer; vertical-align: middle; }
.booking-panel { padding: 20px; overflow: hidden; }
.calendly-inline-widget { width: 100%; }
.booking-video__box { max-width: 900px; margin: 0 auto; text-align: center; }
.booking-video__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-lg); overflow: hidden; margin-top: 18px; box-shadow: var(--shadow-md); }
.booking-video__frame video { width: 100%; height: 100%; display: block; }
.btn > svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.chat-msg--bot a { color: var(--navy-800); font-weight: 600; text-decoration: underline; }