/* ═══════════════════════════════════════════════════════════════
   WMFCCT ANNUAL REPORT — STYLES
   A4 Format (210mm × 297mm) | Luxury Editorial Design
═══════════════════════════════════════════════════════════════ */

/* ─── TOKENS ──────────────────────────────────────────────────── */
:root {
  --gold:        #C9A87C;
  --gold-light:  #E8D5B0;
  --gold-dark:   #8B6914;
  --teal-deep:   #1A3A3A;
  --teal-mid:    #2C5050;
  --teal-light:  #3D6B6B;
  --teal-pale:   #EAF2F2;
  --cream:       #F8F4EE;
  --cream-dark:  #EDE8DF;
  --charcoal:    #1C1C1C;
  --text:        #2A2A2A;
  --text-light:  #5A5A5A;
  --white:       #FDFAF6;
  --border:      rgba(201,168,124,0.25);

  /* A4 dimensions */
  --page-w: 210mm;
  --page-h: 297mm;
  --page-pad: 14mm;
}

/* ─── RESET & BASE ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
  background: #D0C8BC;
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--text);
  line-height: 1.6;
}

/* ─── PAGE SHELL ──────────────────────────────────────────────── */
.page {
  width: var(--page-w);
  min-height: var(--page-h);
  background: var(--white);
  margin: 12mm auto;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 32px rgba(0,0,0,0.18);
  overflow: hidden;
  page-break-after: always;
}

/* ─── PAGE HEADER ─────────────────────────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5mm var(--page-pad) 4mm;
  border-bottom: 1.5px solid var(--gold);
  background: var(--teal-deep);
}
.page-header-title {
  font-family: 'Manrope', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.page-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--gold);
  letter-spacing: 0.05em;
}

/* ─── PAGE CONTENT ────────────────────────────────────────────── */
.page-content {
  flex: 1;
  padding: 8mm var(--page-pad) 6mm;
  overflow: hidden;
}

/* ─── PAGE FOOTER ─────────────────────────────────────────────── */
.page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.5mm var(--page-pad);
  border-top: 1px solid var(--border);
  background: var(--cream);
  font-size: 0.58rem;
  color: var(--text-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── SECTION LABELS & TITLES ─────────────────────────────────── */
.section-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 2mm;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--teal-deep);
  line-height: 1.15;
  margin-bottom: 5mm;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 3mm;
}
.section-intro {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-bottom: 5mm;
  line-height: 1.65;
}
.sub-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--teal-deep);
  margin: 5mm 0 3mm;
  border-left: 3px solid var(--gold);
  padding-left: 3mm;
}

/* ─── QUOTE STRIP ─────────────────────────────────────────────── */
.quote-strip {
  background: var(--teal-deep);
  color: var(--gold-light);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.85rem;
  padding: 4mm 8mm;
  margin: 5mm 0;
  border-left: 4px solid var(--gold);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   COVER PAGE
═══════════════════════════════════════════════════════════════ */
.cover-page { min-height: var(--page-h); }
.cover-bg {
  width: 100%;
  min-height: var(--page-h);
  background: linear-gradient(160deg, var(--teal-deep) 0%, #0D2020 60%, #1A3A3A 100%);
  position: relative;
  display: flex;
  flex-direction: column;
}
.cover-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(201,168,124,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.cover-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: var(--page-h);
  padding: 10mm var(--page-pad);
}
.cover-logo-bar {
  display: flex;
  align-items: center;
  gap: 4mm;
  align-self: flex-start;
}
.cover-logo-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.cover-logo-divider {
  width: 1px;
  height: 8mm;
  background: var(--gold);
  opacity: 0.5;
}
.cover-logo-sub {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.cover-picture-frame {
  width: 140mm;
  height: 70mm;
  border: 2px dashed rgba(201,168,124,0.4);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: border-color 0.2s;
}
.cover-picture-frame:hover { border-color: var(--gold); }
.cover-picture-frame .frame-label {
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 500;
  text-align: center;
}
.cover-picture-frame .frame-hint {
  color: rgba(201,168,124,0.5);
  font-size: 0.6rem;
  margin-top: 2mm;
}
.cover-title-block { text-align: center; }
.cover-eyebrow {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2mm;
}
.cover-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.2rem;
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.cover-year {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--gold);
  letter-spacing: 0.3em;
  margin: 3mm 0;
}
.cover-rule {
  width: 30mm;
  height: 1px;
  background: var(--gold);
  margin: 3mm auto;
  opacity: 0.6;
}
.cover-subtitle {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0.8;
}
.cover-footer-bar {
  display: flex;
  align-items: center;
  gap: 4mm;
  font-size: 0.58rem;
  color: rgba(232,213,176,0.6);
  letter-spacing: 0.06em;
  align-self: stretch;
  justify-content: center;
  border-top: 1px solid rgba(201,168,124,0.2);
  padding-top: 4mm;
}
.cover-footer-bar .dot { color: var(--gold); font-size: 0.4rem; }

/* ═══════════════════════════════════════════════════════════════
   PICTURE FRAMES (Editable)
═══════════════════════════════════════════════════════════════ */
.picture-frame,
.dept-picture-frame,
.scholarship-picture-frame {
  border: 2px dashed rgba(201,168,124,0.5);
  border-radius: 2px;
  background: var(--cream);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
  position: relative;
}
.picture-frame:hover,
.dept-picture-frame:hover,
.scholarship-picture-frame:hover {
  border-color: var(--gold);
  background: var(--cream-dark);
}
.picture-frame.tall { height: 80mm; }
.frame-photo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 40mm;
  padding: 4mm;
  text-align: center;
}
.frame-icon { font-size: 2rem; margin-bottom: 2mm; opacity: 0.5; }
.frame-name-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--teal-mid);
  margin-bottom: 1mm;
}
.frame-hint-small {
  font-size: 0.6rem;
  color: var(--text-light);
  line-height: 1.4;
}
.frame-hint-small em { color: var(--gold-dark); }

/* Department frame */
.dept-picture-frame {
  width: 100%;
  height: 52mm;
  margin-bottom: 4mm;
}
.dept-frame { min-height: 52mm; }

/* Scholarship frame */
.scholarship-picture-frame {
  height: 40mm;
  margin: 4mm 0;
}

/* ═══════════════════════════════════════════════════════════════
   PERSON FRAMES (Organogram & Manager)
═══════════════════════════════════════════════════════════════ */
.person-frame {
  border: 2px dashed rgba(201,168,124,0.5);
  border-radius: 50%;
  background: var(--cream);
  cursor: pointer;
  transition: border-color 0.2s;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.person-frame.large {
  width: 42mm;
  height: 42mm;
  border-radius: 4px;
  margin: 0 auto 3mm;
}
.person-frame:hover { border-color: var(--gold); }
.person-frame .frame-photo-area { min-height: unset; padding: 3mm; }

/* ═══════════════════════════════════════════════════════════════
   MANAGER PAGE
═══════════════════════════════════════════════════════════════ */
.manager-layout {
  display: grid;
  grid-template-columns: 52mm 1fr;
  gap: 8mm;
  align-items: start;
}
.manager-photo-col { text-align: center; }
.manager-sig-block { margin-top: 4mm; }
.sig-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--teal-deep);
}
.sig-title, .sig-org {
  font-size: 0.62rem;
  color: var(--text-light);
  line-height: 1.5;
}
.pull-quote-top {
  font-family: 'Cormorant Garamond', serif;
  font-size: 4rem;
  color: var(--gold);
  line-height: 0.5;
  margin-bottom: 3mm;
  opacity: 0.6;
}
.manager-body {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 3mm;
}
.manager-quote-strip {
  background: var(--teal-deep);
  color: var(--gold-light);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.82rem;
  padding: 3mm 5mm;
  margin-top: 4mm;
  border-left: 3px solid var(--gold);
}
.mqs {
  font-size: 1.2rem;
  color: var(--gold);
  vertical-align: middle;
  margin: 0 1mm;
}

/* ═══════════════════════════════════════════════════════════════
   ORGANOGRAM
═══════════════════════════════════════════════════════════════ */
.org-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 2mm 0;
}
.org-level {
  display: flex;
  justify-content: center;
  gap: 4mm;
  width: 100%;
}
.org-level-1 { margin-bottom: 0; }
.org-level-2 { margin-bottom: 0; }
.org-level-3 {
  display: flex;
  justify-content: center;
  gap: 3mm;
  flex-wrap: wrap;
  width: 100%;
  align-items: flex-start;
}

.org-connector-down {
  width: 1px;
  height: 6mm;
  background: var(--gold);
  margin: 0 auto;
}
.org-horizontal-line {
  width: 85%;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 4mm;
  opacity: 0.5;
}

/* Org Card */
.org-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2mm;
}
.manager-card .org-photo-frame { width: 28mm; height: 28mm; }
.asst-card .org-photo-frame { width: 24mm; height: 24mm; }
.org-photo-frame {
  border: 2px dashed var(--gold);
  border-radius: 3px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
  margin-bottom: 1.5mm;
}
.org-photo-frame:hover { border-color: var(--teal-mid); background: var(--teal-pale); }
.org-photo-frame.sm { width: 18mm; height: 18mm; }
.org-photo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1mm;
}
.org-photo-icon { font-size: 1.2rem; opacity: 0.4; line-height: 1; }
.org-hint { font-size: 0.45rem; color: var(--text-light); margin-top: 0.5mm; }
.org-name {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--teal-deep);
  line-height: 1.2;
  max-width: 22mm;
}
.org-desig {
  font-size: 0.52rem;
  color: var(--gold-dark);
  font-weight: 500;
  max-width: 22mm;
  line-height: 1.2;
}

/* Department groups in org */
.org-dept-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1mm;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2mm 2.5mm;
  background: var(--cream);
  min-width: 38mm;
}
.org-dept-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1mm;
  margin-bottom: 1mm;
  width: 100%;
  text-align: center;
}
.org-dept-group .org-card { padding: 1mm; }
.org-dept-group .org-name { max-width: 18mm; font-size: 0.55rem; }
.org-dept-group .org-desig { max-width: 18mm; font-size: 0.48rem; }

/* ═══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
═══════════════════════════════════════════════════════════════ */
.toc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2mm 6mm;
}
.toc-item {
  display: flex;
  align-items: center;
  gap: 3mm;
  padding: 2.5mm 3mm;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.15s;
  border-radius: 1px;
}
.toc-item:hover { background: var(--cream); }
.toc-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold);
  min-width: 8mm;
}
.toc-title {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--teal-deep);
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════════════════════════ */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 52mm;
  gap: 6mm;
  align-items: start;
}
.about-text p {
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 3mm;
}
.info-table { margin-top: 4mm; }
.info-row {
  display: flex;
  gap: 3mm;
  padding: 1.5mm 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.68rem;
}
.info-key {
  font-weight: 700;
  color: var(--teal-mid);
  min-width: 22mm;
  flex-shrink: 0;
}
.info-val { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   MISSION & VISION
═══════════════════════════════════════════════════════════════ */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
  margin-bottom: 4mm;
}
.mv-card {
  padding: 5mm;
  border-radius: 2px;
  border-top: 3px solid var(--gold);
}
.mv-card.mission { background: var(--teal-pale); }
.mv-card.vision { background: var(--cream); border-color: var(--teal-mid); }
.mv-icon { font-size: 1.4rem; margin-bottom: 2mm; }
.mv-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--teal-deep);
  margin-bottom: 2mm;
}
.mv-card p { font-size: 0.7rem; line-height: 1.65; color: var(--text); }

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3mm;
}
.value-card {
  padding: 3mm;
  background: var(--cream);
  border-left: 2px solid var(--gold);
  border-radius: 1px;
}
.val-icon { font-size: 1rem; margin-bottom: 1mm; }
.value-card h4 {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--teal-deep);
  margin-bottom: 1mm;
}
.value-card p { font-size: 0.62rem; color: var(--text-light); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════
   DEPARTMENT PAGES
═══════════════════════════════════════════════════════════════ */
.dept-page { }

/* Department hero strip */
.dept-hero-strip {
  padding: 5mm var(--page-pad);
  display: flex;
  align-items: center;
}
.gym-strip       { background: linear-gradient(135deg, var(--teal-deep) 0%, #0D2828 100%); }
.aerobics-strip  { background: linear-gradient(135deg, #2A1A3A 0%, #1A0D2A 100%); }
.yoga-strip      { background: linear-gradient(135deg, #1A3A2A 0%, #0D2A1A 100%); }
.physio-strip    { background: linear-gradient(135deg, #1A2A3A 0%, #0D1A2A 100%); }
.dietitian-strip { background: linear-gradient(135deg, #3A2A1A 0%, #2A1A0D 100%); }
.reiki-strip     { background: linear-gradient(135deg, #2A1A2A 0%, #1A0D1A 100%); }
.psych-strip     { background: linear-gradient(135deg, #1A1A3A 0%, #0D0D2A 100%); }

.dept-hero-content {
  display: flex;
  align-items: center;
  gap: 5mm;
}
.dept-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 300;
  color: rgba(201,168,124,0.3);
  line-height: 1;
  min-width: 18mm;
}
.dept-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.1;
}
.dept-tagline {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 1mm;
}

/* Department content layout */
.dept-content { padding-top: 5mm; }
.dept-layout {
  display: grid;
  grid-template-columns: 1fr 52mm;
  gap: 5mm;
  align-items: start;
}
.dept-section-head {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--teal-deep);
  margin-bottom: 2mm;
  border-left: 3px solid var(--gold);
  padding-left: 2mm;
}
.dept-body {
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 3mm;
}

/* Zone cards */
.dept-zones {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2mm;
  margin-top: 3mm;
}
.zone-card {
  padding: 2.5mm 3mm;
  background: var(--cream);
  border-left: 2px solid var(--gold);
  font-size: 0.68rem;
}
.zone-card strong { color: var(--teal-deep); display: block; margin-bottom: 0.5mm; }
.zone-card p { color: var(--text-light); line-height: 1.5; }

/* Sidebar boxes */
.dept-sidebar { display: flex; flex-direction: column; gap: 3mm; }
.dept-info-box,
.dept-fee-box,
.dept-staff-box {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 3mm;
}
.dept-info-box h4,
.dept-fee-box h4,
.dept-staff-box h4 {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.5mm;
  margin-bottom: 2mm;
}
.dept-services {
  list-style: none;
  padding: 0;
}
.dept-services li {
  font-size: 0.65rem;
  color: var(--text);
  padding: 1mm 0;
  border-bottom: 1px solid rgba(201,168,124,0.1);
  padding-left: 3mm;
  position: relative;
}
.dept-services li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.45rem;
  top: 1.5mm;
}
.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5mm 0;
  border-bottom: 1px solid rgba(201,168,124,0.1);
  font-size: 0.65rem;
}
.fee-row span { color: var(--text-light); }
.fee-amt { font-weight: 700; color: var(--teal-deep); }

/* Inline staff box */
.dept-staff-box.inline { margin-top: 3mm; }

/* Staff mini cards */
.staff-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 2mm;
  justify-content: flex-start;
}
.staff-mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 20mm;
}
.staff-mini-photo {
  width: 16mm;
  height: 16mm;
  border: 1.5px dashed var(--gold);
  border-radius: 2px;
  background: var(--cream-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.2s;
  margin-bottom: 1mm;
  line-height: 1.2;
}
.staff-mini-photo:hover { border-color: var(--teal-mid); }
.staff-mini-hint { font-size: 0.45rem; color: var(--text-light); }
.staff-mini-name {
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--teal-deep);
  line-height: 1.2;
}
.staff-mini-desig {
  font-size: 0.48rem;
  color: var(--gold-dark);
  line-height: 1.2;
}

/* Scholarship note */
.dept-scholarship-note {
  background: var(--teal-pale);
  border: 1px solid rgba(44,80,80,0.2);
  border-radius: 2px;
  padding: 2.5mm;
  font-size: 0.62rem;
  color: var(--teal-mid);
}
.scholarship-badge {
  display: block;
  font-weight: 700;
  font-size: 0.65rem;
  color: var(--teal-deep);
  margin-bottom: 1mm;
}

/* New initiative badge */
.new-initiative-badge {
  background: var(--gold);
  color: var(--teal-deep);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2mm 3mm;
  border-radius: 2px;
  text-align: center;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════
   FEE STRUCTURE PAGE
═══════════════════════════════════════════════════════════════ */
.fee-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4mm;
}
.fee-card {
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.fee-card-header {
  padding: 3mm 4mm;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.05em;
}
.gym-header      { background: var(--teal-deep); }
.physio-header   { background: #1A2A3A; }
.yoga-header     { background: #1A3A2A; }
.reiki-header    { background: #2A1A2A; }
.fee-card-body { padding: 3mm 4mm; background: var(--cream); }
.fee-line {
  display: flex;
  justify-content: space-between;
  padding: 1.5mm 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.68rem;
}
.fee-line span { color: var(--text-light); }
.fee-line strong { color: var(--teal-deep); }

/* ═══════════════════════════════════════════════════════════════
   SCHOLARSHIP PAGE
═══════════════════════════════════════════════════════════════ */
.scholarship-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3mm;
  margin-bottom: 4mm;
}
.stat-big {
  text-align: center;
  padding: 4mm;
  background: var(--teal-deep);
  border-radius: 2px;
}
.stat-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}
.stat-label {
  display: block;
  font-size: 0.58rem;
  color: var(--gold-light);
  margin-top: 1mm;
  line-height: 1.3;
}
.impact-list { margin-top: 4mm; }
.impact-list h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--teal-deep);
  margin-bottom: 2mm;
  border-left: 3px solid var(--gold);
  padding-left: 2mm;
}
.impact-item {
  font-size: 0.7rem;
  color: var(--text);
  padding: 1.5mm 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   WORKSHOPS PAGE
═══════════════════════════════════════════════════════════════ */
.workshop-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3mm;
  margin: 4mm 0;
}
.ws-stat {
  text-align: center;
  padding: 4mm;
  background: var(--cream);
  border-top: 3px solid var(--gold);
}
.ws-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--teal-deep);
}
.ws-lbl {
  display: block;
  font-size: 0.58rem;
  color: var(--text-light);
  margin-top: 1mm;
}

/* ═══════════════════════════════════════════════════════════════
   SUCCESS STORIES
═══════════════════════════════════════════════════════════════ */
.stories-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3mm;
}
.story-card {
  padding: 4mm;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 1px;
}
.story-badge {
  display: inline-block;
  background: var(--teal-deep);
  color: var(--gold);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1mm 2.5mm;
  border-radius: 1px;
  margin-bottom: 1.5mm;
  letter-spacing: 0.05em;
}
.story-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--teal-deep);
  margin-bottom: 0.5mm;
}
.story-sub {
  font-size: 0.6rem;
  color: var(--gold-dark);
  font-style: italic;
  margin-bottom: 1.5mm;
}
.story-card p { font-size: 0.68rem; color: var(--text); line-height: 1.6; margin-bottom: 1.5mm; }
.story-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--teal-mid);
  border-left: 2px solid var(--gold);
  padding-left: 2.5mm;
  margin-top: 1.5mm;
}

/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE DASHBOARD
═══════════════════════════════════════════════════════════════ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3mm;
  margin-bottom: 4mm;
}
.kpi-card {
  text-align: center;
  padding: 3.5mm;
  background: var(--teal-deep);
  border-radius: 2px;
}
.kpi-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--gold);
  display: block;
  line-height: 1;
}
.kpi-lbl {
  font-size: 0.55rem;
  color: var(--gold-light);
  display: block;
  margin-top: 1mm;
  line-height: 1.3;
}
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3mm;
}
.chart-box {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 3mm;
  height: 52mm;
}
.chart-box.wide {
  grid-column: 1 / -1;
  height: 48mm;
}
.chart-box h4 {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--teal-deep);
  margin-bottom: 2mm;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.chart-box canvas { width: 100% !important; height: calc(100% - 8mm) !important; }

/* ═══════════════════════════════════════════════════════════════
   DATA TABLES
═══════════════════════════════════════════════════════════════ */
.data-table-wrap { overflow-x: auto; margin: 3mm 0; }
.data-table-wrap.compact { margin: 2mm 0; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.65rem;
}
.data-table thead tr {
  background: var(--teal-deep);
  color: var(--gold-light);
}
.data-table th {
  padding: 2.5mm 3mm;
  text-align: left;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.data-table td {
  padding: 2mm 3mm;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.data-table tbody tr:nth-child(even) { background: var(--cream); }
.data-table tbody tr:hover { background: var(--teal-pale); }
.total-row td {
  background: var(--teal-pale) !important;
  border-top: 2px solid var(--gold);
  color: var(--teal-deep);
}
.growth { color: #2A6A2A; font-weight: 700; }
.table-note {
  font-size: 0.58rem;
  color: var(--text-light);
  font-style: italic;
  margin-top: 2mm;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   SURPLUS CARDS
═══════════════════════════════════════════════════════════════ */
.surplus-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3mm;
  margin-bottom: 4mm;
}
.surplus-card {
  padding: 3.5mm;
  border-radius: 2px;
  text-align: center;
}
.surplus-card.green  { background: #1A3A1A; }
.surplus-card.amber  { background: #3A2A1A; }
.surplus-card.teal   { background: var(--teal-deep); }
.surplus-card.gold   { background: var(--gold-dark); }
.sc-val {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.2;
}
.sc-lbl {
  display: block;
  font-size: 0.55rem;
  color: var(--gold-light);
  margin-top: 1mm;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════
   MARKETING PAGE
═══════════════════════════════════════════════════════════════ */
.marketing-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3mm;
  margin-top: 3mm;
}
.channel-card {
  padding: 4mm;
  background: var(--cream);
  border-top: 2px solid var(--gold);
  border-radius: 1px;
  text-align: center;
}
.ch-icon { font-size: 1.5rem; margin-bottom: 1.5mm; }
.channel-card h4 {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--teal-deep);
  margin-bottom: 1.5mm;
}
.channel-card p { font-size: 0.62rem; color: var(--text-light); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════
   ROADMAP
═══════════════════════════════════════════════════════════════ */
.roadmap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3mm;
}
.roadmap-item {
  display: flex;
  gap: 3mm;
  align-items: flex-start;
  padding: 3mm;
  background: var(--cream);
  border-radius: 2px;
  border-left: 3px solid var(--gold);
}
.rm-year {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold);
  min-width: 10mm;
  line-height: 1;
}
.rm-content h4 {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--teal-deep);
  margin-bottom: 1mm;
}
.rm-content p { font-size: 0.62rem; color: var(--text-light); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════
   CONCLUSION
═══════════════════════════════════════════════════════════════ */
.conclusion-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3mm;
  margin-bottom: 5mm;
}
.cs-item {
  text-align: center;
  padding: 4mm;
  background: var(--teal-deep);
  border-radius: 2px;
}
.cs-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}
.cs-lbl {
  display: block;
  font-size: 0.55rem;
  color: var(--gold-light);
  margin-top: 1mm;
}
.conclusion-body {
  font-size: 0.74rem;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 3mm;
}
.final-footer-block {
  display: flex;
  align-items: center;
  gap: 5mm;
  background: var(--teal-deep);
  padding: 5mm;
  border-radius: 2px;
  margin-top: 5mm;
}
.ffb-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  min-width: 16mm;
  text-align: center;
}
.ffb-text p {
  font-size: 0.62rem;
  color: var(--gold-light);
  line-height: 1.6;
}
.ffb-text p strong { color: var(--gold); }
.ffb-text p em { color: rgba(232,213,176,0.7); }

/* ═══════════════════════════════════════════════════════════════
   PRINT STYLES
═══════════════════════════════════════════════════════════════ */
@media print {
  body { background: white; }
  .page {
    margin: 0;
    box-shadow: none;
    page-break-after: always;
    width: 210mm;
    min-height: 297mm;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════════════════════════ */
.page {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.page.visible {
  opacity: 1;
  transform: translateY(0);
}