/* ============================================================================
   CFI-STRUCTURE  —  المستثمر الصغير
   ----------------------------------------------------------------------------
   An institutional page-structure layer modelled on the information
   architecture and layout system used by large finance-education sites
   (measured on corporatefinanceinstitute.com, 2026-08):

       container 1150px · section rhythm 80px · centred section headers ·
       serif display + sans body · 4px buttons / 8px cards · alternating
       white and tinted bands · a closing full-bleed dark call to action.

   NOTHING here is copied from that site: no markup, no stylesheet, no copy,
   no image. Only the proportions and the section grammar are borrowed, and
   every colour, typeface, logo and word below is المستثمر الصغير's own.

   Loaded AFTER editorial.css, so on the pages that opt in (body wrapper gets
   `.cfi`) these rules win. Pages that do not carry `.cfi` are untouched.

   RTL: written with logical properties throughout. Arabic is the primary
   direction; Latin is the mirror, not the other way round.
   ==========================================================================*/

/* ---------------------------------------------------------------- tokens -- */
.cfi, .cfi-subpage {
  /* structure */
  --c-ink:        #1C2A20;   /* forest — headings, dark bands, secondary CTA  */
  --c-ink-2:      #16261C;   /* deepest forest — the closing band             */
  --c-body:       #4C5A48;   /* body copy (7.2:1 on white)                    */
  --c-muted:      #6A7765;   /* meta, captions                                */
  --c-gold:       #A67D2E;   /* primary CTA — the logo's gold                 */
  --c-gold-d:     #8A6420;   /* CTA hover                                     */
  --c-gold-soft:  #F4EEDF;   /* eyebrow pill fill                             */
  --c-gold-line:  #E3D6B4;   /* eyebrow pill edge                             */
  --c-green:      #4A6852;   /* the tick                                      */

  /* surfaces */
  --c-paper:      #FFFFFF;   /* the white band                                */
  --c-tint:       #F8F5EC;   /* the alternate band (warm cream)               */
  --c-surface:    #FFFFFF;   /* cards                                         */
  --c-rule:       #E8E2D2;   /* hairline                                      */
  --c-shadow:     0 8px 24px rgba(28, 42, 32, .13);
  --c-shadow-lg:  0 18px 44px rgba(28, 42, 32, .16);

  /* on the dark band */
  --c-on-dark:      #F1EFE3;
  --c-on-dark-mut:  #BFC9B8;
  --c-on-dark-gold: #E4CB90;
  --c-on-dark-line: rgba(228, 203, 144, .22);

  /* metrics — the measured proportions */
  --c-wrap:  1150px;
  --c-gut:   clamp(18px, 4vw, 24px);
  --c-sec:   clamp(52px, 7vw, 80px);
  --c-r-btn: 4px;
  --c-r-card: 8px;

  /* type */
  --c-serif: 'Instrument Serif', 'Cairo', ui-serif, Georgia, 'Times New Roman', serif;
  --c-sans:  'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  color: var(--c-body);
  font-family: var(--c-sans);
  font-size: 16px;
  line-height: 1.6;
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
}

/* Instrument Serif carries no Arabic glyph, so Arabic display text is set in
   Cairo 800 — the weight is what does the "display" work, not the serif. */
[dir="rtl"] .cfi, [dir="rtl"] .cfi-subpage, .cfi:lang(ar), .cfi-subpage:lang(ar) { --c-sans: 'Cairo', sans-serif; }

.ed-dark .cfi, .ed-dark .cfi-subpage {
  --c-ink:       #EDF2EA;
  --c-ink-2:     #0E140F;
  --c-body:      #BCC7B7;
  --c-muted:     #9AA795;
  --c-gold:      #D2B36C;
  --c-gold-d:    #E4CB90;
  --c-gold-soft: rgba(210, 179, 108, .12);
  --c-gold-line: rgba(210, 179, 108, .30);
  --c-green:     #7FA588;
  --c-paper:     #0E140F;
  --c-tint:      #141C16;
  --c-surface:   #161F19;
  --c-rule:      #2C3830;
  --c-shadow:    0 8px 24px rgba(0, 0, 0, .40);
  --c-shadow-lg: 0 18px 44px rgba(0, 0, 0, .50);
}

/* The editorial parchment gradient is a different design language. A page that
   opts into this structure gets flat alternating bands instead — that is the
   whole point of the layout. `.ed.cfi` outranks `.ed`. */
.ed.cfi { background: var(--c-paper); }

/* ------------------------------------------------------------ primitives -- */
.cfi-wrap { width: 100%; max-width: var(--c-wrap); margin-inline: auto; padding-inline: var(--c-gut); }

.cfi-sec { padding-block: var(--c-sec); background: var(--c-paper); position: relative; }
.cfi-sec.tint { background: var(--c-tint); }
.cfi-sec.flush-top { padding-block-start: 0; }
.cfi-sec.flush-bottom { padding-block-end: 0; }

/* Section header — centred, the measure held to ~72ch so the eye can return */
.cfi-shead { text-align: center; max-width: 880px; margin-inline: auto; margin-block-end: 44px; }
.cfi-shead.start { text-align: start; margin-inline: 0; }
.cfi-shead > .cfi-pill { margin-block-end: 18px; }
.cfi-shead p { color: var(--c-body); font-size: 1rem; line-height: 1.62; margin: 0; }
.cfi-shead h2 + p { margin-block-start: 16px; }

/* Display type. Sizes track the reference scale: 48 / 32 / 24 at 1150px. */
.cfi h1, .cfi h2, .cfi h3, .cfi h4 {
  font-family: var(--c-serif);
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: normal;
  margin: 0;
}
[dir="rtl"] .cfi h1, [dir="rtl"] .cfi h2, [dir="rtl"] .cfi h3, [dir="rtl"] .cfi h4,
.cfi h1.ar, .cfi h2.ar, .cfi h3.ar, .cfi h4.ar { font-family: 'Cairo', sans-serif; font-weight: 800; }

.cfi h1 { font-size: clamp(2rem, 4.2vw, 3rem);    line-height: 1.10; }
.cfi h2 { font-size: clamp(1.5rem, 2.9vw, 2rem);  line-height: 1.18; }
.cfi h3 { font-size: clamp(1.18rem, 2vw, 1.5rem); line-height: 1.30; }
.cfi h4 { font-size: 1.06rem; line-height: 1.4; }

/* Arabic sits a touch smaller than the Latin serif at the same optical size,
   and its ascenders need more room. */
[dir="rtl"] .cfi h1 { font-size: clamp(1.85rem, 3.8vw, 2.7rem); line-height: 1.30; }
[dir="rtl"] .cfi h2 { font-size: clamp(1.4rem, 2.7vw, 1.85rem); line-height: 1.38; }
[dir="rtl"] .cfi h3 { font-size: clamp(1.1rem, 1.9vw, 1.35rem);  line-height: 1.45; }

.cfi .gold { color: var(--c-gold); }

/* Eyebrow pill */
.cfi-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-gold-soft); border: 1px solid var(--c-gold-line);
  color: var(--c-ink); border-radius: 999px;
  padding: 6px 14px; font-size: .74rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; line-height: 1;
}
/* Arabic is cursive: letter-spacing breaks the joins, and it has no case. */
[dir="rtl"] .cfi-pill { letter-spacing: 0; text-transform: none; font-size: .82rem; }

/* Small kicker above a heading inside a panel */
.cfi-kick { font-size: .85rem; font-weight: 700; color: var(--c-gold); margin-block-end: 10px; }

/* ---------------------------------------------------------------- buttons -- */
.cfi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--c-sans); font-size: 1rem; font-weight: 700; line-height: 1.25;
  padding: 12px 24px; border-radius: var(--c-r-btn);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cfi-btn:hover { transform: translateY(-1px); text-decoration: none; }
.cfi-btn .arr { transition: transform .25s ease; }
.cfi-btn:hover .arr { transform: translateX(3px); }
[dir="rtl"] .cfi-btn:hover .arr { transform: translateX(-3px); }

.cfi-btn--gold { background: var(--c-gold); border-color: var(--c-gold); color: #FFFFFF; }
.cfi-btn--gold:hover { background: var(--c-gold-d); border-color: var(--c-gold-d); color: #FFFFFF; box-shadow: 0 10px 22px rgba(166,125,46,.28); }
.ed-dark .cfi-btn--gold { color: #14200F; }
.ed-dark .cfi-btn--gold:hover { color: #14200F; }

.cfi-btn--dark { background: var(--c-ink); border-color: var(--c-ink); color: #FFFFFF; }
.cfi-btn--dark:hover { background: #253A2C; border-color: #253A2C; color: #FFFFFF; box-shadow: 0 10px 22px rgba(28,42,32,.26); }
.ed-dark .cfi-btn--dark { background: #EDF2EA; border-color: #EDF2EA; color: #0E140F; }
.ed-dark .cfi-btn--dark:hover { background: #FFFFFF; border-color: #FFFFFF; color: #0E140F; }

.cfi-btn--ghost { background: transparent; border-color: var(--c-ink); color: var(--c-ink); }
.cfi-btn--ghost:hover { background: var(--c-ink); color: var(--c-paper); }
.ed-dark .cfi-btn--ghost:hover { color: #0E140F; }

.cfi-btn--onDark { background: var(--c-gold); border-color: var(--c-gold); color: #14200F; }
.cfi-btn--onDark:hover { background: #C0964A; border-color: #C0964A; color: #16261C; }

.cfi-btnrow { display: flex; flex-wrap: wrap; gap: 14px; }
.cfi-btnrow.center { justify-content: center; }

/* Text link with a moving arrow */
.cfi-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .95rem; color: var(--c-ink); text-decoration: none;
}
.cfi-link .arr { transition: transform .25s ease; }
.cfi-link:hover { color: var(--c-gold); text-decoration: none; }
.cfi-link:hover .arr { transform: translateX(4px); }
[dir="rtl"] .cfi-link:hover .arr { transform: translateX(-4px); }

/* ------------------------------------------------------------------ card -- */
.cfi-card {
  background: var(--c-surface); border-radius: var(--c-r-card);
  box-shadow: var(--c-shadow); padding: 24px;
}
.cfi-card--lg { padding: clamp(24px, 4vw, 48px); }
.cfi-card--flat { box-shadow: none; border: 1px solid var(--c-rule); }

/* ----------------------------------------------------------- check list --- */
.cfi-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cfi-checks li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  color: var(--c-body); font-size: 1rem; line-height: 1.55;
}
.cfi-checks li::before {
  content: ""; inline-size: 20px; block-size: 20px; margin-block-start: 2px;
  background-color: var(--c-green);
  -webkit-mask: no-repeat center / 20px 20px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
          mask: no-repeat center / 20px 20px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.cfi-checks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
@media (max-width: 620px) { .cfi-checks.two { grid-template-columns: 1fr; } }

/* Plain bullet list (skills, roles) */
.cfi-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cfi-bullets li { position: relative; padding-inline-start: 18px; color: var(--c-body); font-size: .97rem; }
.cfi-bullets li::before {
  content: ""; position: absolute; inset-block-start: .62em; inset-inline-start: 0;
  inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--c-muted);
}
.cfi-bullets.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
@media (max-width: 620px) { .cfi-bullets.two { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- split ---- */
.cfi-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.cfi-split.cfi-media-end { direction: inherit; }
.cfi-split > .cfi-media { position: relative; }
.cfi-split > .cfi-media img,
.cfi-split > .cfi-media video { inline-size: 100%; block-size: auto; display: block; border-radius: var(--c-r-card); }
@media (max-width: 900px) { .cfi-split { grid-template-columns: 1fr; } .cfi-split > .cfi-media { order: -1; } }

/* ==========================================================================
   1 · HERO — copy on one side, a real screen on the other, one primary CTA
   ==========================================================================*/
.cfi-hero { background: var(--c-paper); padding-block: clamp(46px, 7vw, 104px) clamp(20px, 3vw, 30px); overflow: clip; }
.cfi-hero .cfi-hgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: clamp(28px, 5vw, 60px); align-items: center; }
.cfi-hero h1 { margin-block-end: 20px; max-inline-size: 15ch; }
[dir="rtl"] .cfi-hero h1 { max-inline-size: 18ch; }
.cfi-hero .lead { font-size: clamp(1rem, 1.35vw, 1.125rem); line-height: 1.62; color: var(--c-body); max-inline-size: 46ch; margin: 0 0 28px; }
.cfi-hero .cfi-pill { margin-block-end: 22px; }
.cfi-hero .undercta { margin-block-start: 16px; font-size: .88rem; color: var(--c-muted); }

/* The screen. A framed panel with the enrolment badge breaking its corner —
   the badge is what makes the composition read as an offer, not a stock shot. */
.cfi-hero .cfi-shot { position: relative; }
.cfi-hero .cfi-shot .frame {
  position: relative; border-radius: 12px; overflow: hidden;
  box-shadow: var(--c-shadow-lg); background: var(--c-tint); aspect-ratio: 16 / 10;
}
.cfi-hero .cfi-shot .frame img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.cfi-hero .cfi-shot .seal {
  /* over the video pane's corner — the pane is the first grid column, which is
     the inline-start side in both directions */
  position: absolute; inset-block-start: -22px; inset-inline-start: -18px;
  inline-size: clamp(96px, 12vw, 136px); aspect-ratio: 1; display: grid; place-items: center;
  text-align: center; color: #FFFFFF; line-height: 1.05;
  background: radial-gradient(circle at 35% 30%, #C79B48, #8A6420 78%);
  clip-path: polygon(50% 0%,58% 8%,68% 3%,73% 13%,84% 11%,86% 22%,96% 24%,94% 35%,103% 41%,97% 50%,103% 59%,94% 65%,96% 76%,86% 78%,84% 89%,73% 87%,68% 97%,58% 92%,50% 100%,42% 92%,32% 97%,27% 87%,16% 89%,14% 78%,4% 76%,6% 65%,-3% 59%,3% 50%,-3% 41%,6% 35%,4% 24%,14% 22%,16% 11%,27% 13%,32% 3%,42% 8%);
  filter: drop-shadow(0 10px 20px rgba(138,100,32,.35));
}
.cfi-hero .cfi-shot .seal b { display: block; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; }
.cfi-hero .cfi-shot .seal span { display: block; font-size: clamp(.52rem, .8vw, .66rem); font-weight: 700; letter-spacing: .04em; max-inline-size: 9ch; margin-inline: auto; }
[dir="rtl"] .cfi-hero .cfi-shot .seal span { letter-spacing: 0; }
@media (max-width: 900px) {
  .cfi-hero .cfi-hgrid { grid-template-columns: 1fr; }
  /* copy first on a phone: the claim and the button before the artwork */
  .cfi-hero .cfi-shot { margin-block-start: 6px; }
  .cfi-hero .cfi-shot .seal { inset-inline-start: -4px; inset-block-start: -12px; inline-size: 88px; }
  .cfi-hero .cfi-mock .mk-bar span { visibility: hidden; }
  .cfi-hero .cfi-mock .mk-live { inset-block-start: 50px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cfi-hero .cfi-shot .seal { animation: cfi-seal 6s ease-in-out infinite; }
  @keyframes cfi-seal { 0%,100% { transform: rotate(-6deg) } 50% { transform: rotate(4deg) } }
}

/* ==========================================================================
   2 · TRUST STRIP — a claim on the leading side, evidence marching past it
   ==========================================================================*/
.cfi-trustbar { padding-block: clamp(22px, 3vw, 34px); background: var(--c-paper); }
.cfi-trustbar .cfi-tbgrid { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 26px; align-items: center; }
.cfi-trustbar .lbl { font-size: .95rem; font-weight: 600; color: var(--c-body); line-height: 1.4; }
.cfi-trustbar .rail { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.cfi-trustbar .track { display: flex; inline-size: max-content; }
.cfi-trustbar .set { display: flex; align-items: center; gap: clamp(28px, 4vw, 52px); padding-inline-end: clamp(28px, 4vw, 52px); }
.cfi-trustbar .set span {
  font-family: var(--c-serif); font-size: 1.16rem; font-weight: 600; white-space: nowrap;
  color: var(--c-muted); opacity: .75; letter-spacing: .01em;
}
[dir="rtl"] .cfi-trustbar .set span { font-family: 'Cairo', sans-serif; font-weight: 700; letter-spacing: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cfi-trustbar .track { animation: cfi-marquee 34s linear infinite; }
  @keyframes cfi-marquee { to { transform: translateX(-50%); } }
  [dir="rtl"] .cfi-trustbar .track { animation-name: cfi-marquee-rtl; }
  @keyframes cfi-marquee-rtl { to { transform: translateX(50%); } }
}
@media (max-width: 760px) { .cfi-trustbar .cfi-tbgrid { grid-template-columns: 1fr; } }

/* ==========================================================================
   3 · CREDENTIAL BAND — badge, one claim, one link out
   ==========================================================================*/
.cfi-cred { padding-block: clamp(14px, 2vw, 22px); background: var(--c-paper); }
.cfi-cred .box {
  background: var(--c-tint); border-radius: var(--c-r-card);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 34px); align-items: center; padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 34px);
}
.cfi-cred .mark {
  inline-size: 78px; block-size: 78px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(150deg, #26402F, #16241B); color: var(--c-on-dark-gold);
  font-family: var(--c-serif); font-size: 1.5rem; font-weight: 700; text-align: center; line-height: 1.05; padding: 6px;
  flex: none;
}
[dir="rtl"] .cfi-cred .mark { font-family: 'Cairo', sans-serif; font-size: 1.05rem; font-weight: 800; }
.cfi-cred h3 { margin-block-end: 8px; font-size: 1.12rem; }
.cfi-cred p { margin: 0; font-size: .95rem; color: var(--c-body); }
@media (max-width: 820px) { .cfi-cred .box { grid-template-columns: auto minmax(0,1fr); } .cfi-cred .cfi-link { grid-column: 1 / -1; } }
@media (max-width: 520px) { .cfi-cred .box { grid-template-columns: 1fr; } .cfi-cred .mark { inline-size: 64px; block-size: 64px; } }

/* ==========================================================================
   4 · FEATURE CARD + SUB-CARDS — the anchor section
   ==========================================================================*/
.cfi-feature .cfi-card { overflow: hidden; }
.cfi-feature .cfi-split { align-items: center; }
.cfi-feature .cfi-media .ph {
  border-radius: var(--c-r-card); overflow: hidden; aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, #26402F, #16241B);
}
.cfi-feature .cfi-media .ph img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.cfi-feature h3 { margin-block-end: 20px; }
.cfi-feature .cfi-checks { margin-block-end: 26px; }

.cfi-subcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); margin-block-start: clamp(34px, 5vw, 56px); }
.cfi-subcard .ph { border-radius: var(--c-r-card); overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(150deg, #26402F, #16241B); margin-block-end: 20px; }
.cfi-subcard .ph img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.cfi-subcard:hover .ph img { transform: scale(1.04); }
@media (max-width: 940px) { .cfi-subcards { grid-template-columns: 1fr; max-inline-size: 620px; margin-inline: auto; } }

/* ==========================================================================
   5 · PROMOTION PANEL — a tinted box for the programme that is selling now
   ==========================================================================*/
.cfi-promo .box {
  background: var(--c-tint); border-radius: 12px; overflow: hidden;
  padding: clamp(28px, 5vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(26px, 4vw, 52px); align-items: center;
}
.cfi-promo h2 { margin-block: 14px 22px; }
.cfi-promo .cfi-checks { margin-block-end: 28px; }
.cfi-promo .art { position: relative; display: grid; place-items: center; min-block-size: 220px; }
.cfi-promo .art .grid {
  position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(var(--c-rule) 1px, transparent 1px), linear-gradient(90deg, var(--c-rule) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.cfi-promo .art .shield {
  position: relative; inline-size: clamp(150px, 20vw, 210px); padding: 26px 18px 34px;
  background: linear-gradient(160deg, #26402F, #14211A);
  color: var(--c-on-dark); text-align: center;
  border: 1px solid var(--c-on-dark-line);
  border-radius: 12px 12px 46% 46% / 12px 12px 24% 24%;
  box-shadow: var(--c-shadow-lg);
}
.cfi-promo .art .shield .t { font-size: .68rem; font-weight: 700; letter-spacing: .16em; color: var(--c-on-dark-mut); display: block; margin-block-end: 12px; }
[dir="rtl"] .cfi-promo .art .shield .t { letter-spacing: 0; font-size: .78rem; }
.cfi-promo .art .shield .b { font-family: var(--c-serif); font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 600; color: var(--c-on-dark-gold); line-height: 1.2; display: block; }
[dir="rtl"] .cfi-promo .art .shield .b { font-family: 'Cairo', sans-serif; font-weight: 800; }
.cfi-promo .art .shield hr { border: 0; border-top: 1px solid var(--c-on-dark-line); margin: 14px 22px; }
@media (max-width: 900px) { .cfi-promo .box { grid-template-columns: 1fr; } .cfi-promo .art { order: -1; } }

/* ==========================================================================
   6 · PULL QUOTE — one learner, at display size, on a ruled ground
   ==========================================================================*/
.cfi-quote { background: var(--c-tint); padding-block: var(--c-sec); position: relative; overflow: clip; }
.cfi-quote::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(var(--c-rule) 1px, transparent 1px), linear-gradient(90deg, var(--c-rule) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
          mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.cfi-quote .cfi-qin { position: relative; max-inline-size: 800px; }
.cfi-quote blockquote {
  font-family: var(--c-serif); font-weight: 600; color: var(--c-ink);
  font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.28; margin: 0 0 22px; padding: 0; border: 0;
}
[dir="rtl"] .cfi-quote blockquote { font-family: 'Cairo', sans-serif; font-weight: 800; line-height: 1.5; font-size: clamp(1.2rem, 2.5vw, 1.72rem); }
.cfi-quote p { color: var(--c-body); margin: 0 0 14px; }
.cfi-quote .who { margin-block-start: 22px; }
.cfi-quote .who b { display: block; color: var(--c-ink); font-size: 1rem; }
.cfi-quote .who span { display: block; color: var(--c-muted); font-size: .92rem; }
.cfi-quote .more { display: inline-flex; align-items: center; gap: 12px; margin-block-start: 26px; }
.cfi-quote .faces { display: inline-flex; }
.cfi-quote .faces i {
  inline-size: 30px; block-size: 30px; border-radius: 50%; display: block;
  border: 2px solid var(--c-tint); margin-inline-start: -9px;
  background: linear-gradient(150deg, #4A6852, #26402F);
}
.cfi-quote .faces i:first-child { margin-inline-start: 0; }

/* ==========================================================================
   7 · STATS + REACH
   ==========================================================================*/
.cfi-reach .cfi-rgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.cfi-statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 38px) clamp(18px, 3vw, 30px); }
.cfi-stat { padding-inline-start: 18px; border-inline-start: 2px solid var(--c-rule); }
.cfi-stat b {
  display: block; font-family: var(--c-serif); font-weight: 600; color: var(--c-ink);
  font-size: clamp(1.7rem, 3.2vw, 2.35rem); line-height: 1.05; margin-block-end: 8px;
}
[dir="rtl"] .cfi-stat b { font-family: 'Cairo', sans-serif; font-weight: 800; }
.cfi-stat span { display: block; color: var(--c-body); font-size: .95rem; line-height: 1.42; }
.cfi-reach h2 { margin-block-end: 16px; }
.cfi-reach .sub { color: var(--c-body); margin: 0; }
@media (max-width: 900px) { .cfi-reach .cfi-rgrid { grid-template-columns: 1fr; } .cfi-reach .copy { order: -1; } }

.cfi-mapnote { text-align: center; font-size: .86rem; font-weight: 700; color: var(--c-muted); margin-block: clamp(30px, 4vw, 46px) 16px; }
.cfi-flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cfi-flags span {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--c-rule); background: var(--c-surface); border-radius: 999px;
  padding: 8px 16px; font-size: .9rem; font-weight: 600; color: var(--c-body);
}

/* ==========================================================================
   8 · PROGRAMME SWITCHER — a list of programmes on one side, the open one
        described on the other. Radios, so it works with JavaScript disabled.
   ==========================================================================*/
.cfi-switch .head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: end; margin-block-end: 38px; }
.cfi-switch .head p { margin: 0; color: var(--c-body); max-inline-size: 62ch; }
@media (max-width: 820px) { .cfi-switch .head { grid-template-columns: 1fr; } }

.cfi-seg { display: inline-flex; border: 1px solid var(--c-rule); border-radius: var(--c-r-btn); overflow: hidden; background: var(--c-surface); }
.cfi-seg a, .cfi-seg button {
  padding: 12px 22px; font-size: .95rem; font-weight: 700; color: var(--c-muted);
  background: transparent; border: 0; cursor: pointer; text-decoration: none;
}
.cfi-seg a + a, .cfi-seg button + button { border-inline-start: 1px solid var(--c-rule); }
.cfi-seg .on { color: var(--c-ink); background: var(--c-tint); }

.cfi-switch .body { display: grid; grid-template-columns: minmax(230px, 320px) minmax(0, 1fr); border-block-start: 1px solid var(--c-rule); }
.cfi-switch .list { border-inline-end: 1px solid var(--c-rule); }
.cfi-switch .list label {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 22px; border-block-end: 1px solid var(--c-rule); cursor: pointer; margin: 0;
  font-weight: 700; color: var(--c-ink); font-size: 1rem; line-height: 1.35;
  transition: background-color .2s ease, color .2s ease;
}
.cfi-switch .list label .arr { color: var(--c-muted); transition: transform .25s ease; }
.cfi-switch .list label:hover { background: var(--c-tint); }
.cfi-switch .panel { padding: clamp(24px, 4vw, 48px); display: none; }
.cfi-switch input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.cfi-switch input[type="radio"]:checked + label { background: var(--c-tint); color: var(--c-gold); }
.cfi-switch input[type="radio"]:checked + label .arr { transform: translateX(4px); color: var(--c-gold); }
[dir="rtl"] .cfi-switch input[type="radio"]:checked + label .arr { transform: translateX(-4px); }
.cfi-switch input[type="radio"]:focus-visible + label { outline: 2px solid var(--c-gold); outline-offset: -3px; }
.cfi-switch .panel h3 { margin-block-end: 14px; }
.cfi-switch .panel > p { color: var(--c-body); margin: 0 0 22px; max-inline-size: 60ch; }
.cfi-switch .panel .cfi-bullets { margin-block-end: 24px; }
.cfi-switch .rate { display: flex; align-items: center; gap: 10px; margin-block-end: 24px; font-size: .92rem; color: var(--c-body); }
.cfi-switch .rate .stars { color: var(--c-gold); letter-spacing: .12em; font-size: 1rem; }
[dir="rtl"] .cfi-switch .rate .stars { letter-spacing: 0; }
@media (max-width: 880px) {
  .cfi-switch .body { grid-template-columns: 1fr; }
  .cfi-switch .list { border-inline-end: 0; }
  .cfi-switch .panel { border-block-end: 1px solid var(--c-rule); }
}

/* ==========================================================================
   9 · CATEGORY TABS + COURSE RAIL
   ==========================================================================*/
.cfi-tabbar { display: flex; gap: clamp(18px, 3vw, 34px); border-block-end: 1px solid var(--c-rule); overflow-x: auto; scrollbar-width: none; margin-block-end: 34px; }
.cfi-tabbar::-webkit-scrollbar { display: none; }
.cfi-tabbar a, .cfi-tabbar button {
  position: relative; white-space: nowrap; padding-block: 0 14px; border: 0; background: transparent;
  font-size: 1rem; font-weight: 700; color: var(--c-muted); text-decoration: none; cursor: pointer;
}
.cfi-tabbar a::after, .cfi-tabbar button::after {
  content: ""; position: absolute; inset-block-end: -1px; inset-inline: 0; block-size: 3px;
  background: var(--c-ink); transform: scaleX(0); transform-origin: center; transition: transform .28s ease;
}
.cfi-tabbar a:hover, .cfi-tabbar button:hover { color: var(--c-ink); }
.cfi-tabbar .on { color: var(--c-ink); }
.cfi-tabbar .on::after { transform: scaleX(1); }

.cfi-rail { position: relative; }
.cfi-rail .track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, calc((100% - 3 * 22px) / 4));
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-block-end: 6px;
}
.cfi-rail .track::-webkit-scrollbar { display: none; }
.cfi-rail .track > * { scroll-snap-align: start; }
@media (max-width: 1080px) { .cfi-rail .track { grid-auto-columns: minmax(0, calc((100% - 2 * 20px) / 3)); } }
@media (max-width: 860px)  { .cfi-rail .track { grid-auto-columns: minmax(0, calc((100% - 20px) / 2)); } }
@media (max-width: 560px)  { .cfi-rail .track { grid-auto-columns: 82%; } }

.cfi-arrow {
  position: absolute; inset-block-start: 40%; z-index: 3;
  inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-surface); border: 1px solid var(--c-rule); color: var(--c-ink);
  box-shadow: var(--c-shadow); cursor: pointer; transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.cfi-arrow:hover { background: var(--c-ink); color: var(--c-paper); }
.cfi-arrow[disabled] { opacity: .35; cursor: default; }
.cfi-arrow.prev { inset-inline-start: -22px; }
.cfi-arrow.next { inset-inline-end: -22px; }
@media (max-width: 1240px) { .cfi-arrow { display: none; } }

.cfi-dots { display: flex; justify-content: center; gap: 8px; margin-block-start: 26px; }
.cfi-dots i { inline-size: 30px; block-size: 3px; background: var(--c-rule); display: block; border-radius: 2px; transition: background-color .25s ease; }
.cfi-dots i.on { background: var(--c-ink); }

/* Course card */
.cfi-ccard {
  display: flex; flex-direction: column; background: var(--c-surface);
  border-radius: var(--c-r-card); box-shadow: var(--c-shadow); overflow: hidden;
  text-decoration: none; transition: transform .3s ease, box-shadow .3s ease;
}
.cfi-ccard:hover { transform: translateY(-4px); box-shadow: var(--c-shadow-lg); text-decoration: none; }
.cfi-ccard .ph { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(150deg, #26402F, #16241B); overflow: hidden; }
.cfi-ccard .ph img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.cfi-ccard:hover .ph img { transform: scale(1.045); }
.cfi-ccard .chip {
  position: absolute; inset-block-end: 8px; inset-inline-end: 8px;
  background: rgba(22, 38, 28, .88); color: #F1EFE3; font-size: .74rem; font-weight: 700;
  padding: 4px 9px; border-radius: 3px; line-height: 1.35;
}
.cfi-ccard .bd { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.cfi-ccard h3 { font-size: 1.14rem; line-height: 1.32; }
.cfi-ccard p { margin: 0; color: var(--c-body); font-size: .93rem; line-height: 1.55; }
.cfi-ccard .cfi-link { margin-block-start: auto; padding-block-start: 6px; font-size: .92rem; }
.ed-dark .cfi-ccard .cfi-link { color: var(--c-gold); } /* kept the light-mode green on a dark card: 2.73:1 */
.cfi-ccard .price { font-weight: 700; color: var(--c-gold); font-size: .95rem; }
.cfi-ccard .price .was { color: var(--c-muted); text-decoration: line-through; font-weight: 500; margin-inline-end: 8px; }

/* ==========================================================================
   10 · PEOPLE — portrait cards, the name burned into the image
   ==========================================================================*/
.cfi-people .track { grid-auto-columns: minmax(0, calc((100% - 3 * 20px) / 4)); gap: 20px; }
@media (max-width: 1080px) { .cfi-people .track { grid-auto-columns: minmax(0, calc((100% - 2 * 18px) / 3)); } }
@media (max-width: 860px)  { .cfi-people .track { grid-auto-columns: minmax(0, calc((100% - 18px) / 2)); } }
@media (max-width: 560px)  { .cfi-people .track { grid-auto-columns: 74%; } }
.cfi-person {
  position: relative; border-radius: var(--c-r-card); overflow: hidden; aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #2B4032, #16241B); display: block; text-decoration: none;
}
.cfi-person img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cfi-person .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,38,28,0) 34%, rgba(20,33,26,.92) 88%); }
.cfi-person .tx { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 20px; }
.cfi-person .tx b { display: block; font-family: var(--c-serif); font-weight: 600; font-size: 1.24rem; color: #FFFFFF; line-height: 1.2; margin-block-end: 6px; }
[dir="rtl"] .cfi-person .tx b { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 1.1rem; }
.cfi-person .tx span { display: block; font-size: .88rem; font-weight: 600; color: var(--c-on-dark-gold); line-height: 1.35; }

/* ==========================================================================
   11 · ROLE CARDS — small, flat, four across
   ==========================================================================*/
.cfi-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 940px) { .cfi-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cfi-roles { grid-template-columns: 1fr; } }
.cfi-role {
  background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: var(--c-r-card);
  padding: 22px; text-decoration: none; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cfi-role:hover { border-color: var(--c-gold); transform: translateY(-3px); box-shadow: var(--c-shadow); text-decoration: none; }
.cfi-role .ico {
  inline-size: 38px; block-size: 38px; border-radius: 8px; display: grid; place-items: center;
  background: var(--c-gold-soft); color: var(--c-gold); font-size: 1.05rem;
}
.cfi-role h4 { color: var(--c-ink); }
.cfi-role p { margin: 0; font-size: .9rem; color: var(--c-body); line-height: 1.5; }

/* ==========================================================================
   12 · PILL TABS — platform features
   ==========================================================================*/
.cfi-pilltabs {
  display: flex; gap: 4px; margin: 0 auto 42px; padding: 6px; inline-size: fit-content; max-inline-size: 100%;
  border-radius: 999px; background: var(--c-surface); box-shadow: var(--c-shadow);
  overflow-x: auto; scrollbar-width: none;
}
.cfi-pilltabs::-webkit-scrollbar { display: none; }
.cfi-pilltabs button {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  padding: 11px 22px; border-radius: 999px; font-size: .97rem; font-weight: 600; color: var(--c-muted);
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.cfi-pilltabs button:hover { color: var(--c-ink); }
.cfi-pilltabs button.on { color: var(--c-ink); font-weight: 700; background: var(--c-tint); box-shadow: inset 0 0 0 1px var(--c-rule); }
.cfi-tabpanel { display: none; }
.cfi-tabpanel.on { display: block; }
@media (prefers-reduced-motion: no-preference) { .cfi-tabpanel.on { animation: cfi-fade .35s ease both; } }
@keyframes cfi-fade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ==========================================================================
   13 · CLOSING BAND — full bleed, dark, one ask
   ==========================================================================*/
.cfi-end { background: var(--c-ink-2); padding-block: clamp(46px, 6vw, 72px); text-align: center; position: relative; overflow: clip; }
.ed-dark .cfi-end { background: #0A0F0B; }
.cfi-end::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background-image: linear-gradient(rgba(228,203,144,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(228,203,144,.16) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 100% at 50% 0%, #000, transparent 75%);
          mask-image: radial-gradient(80% 100% at 50% 0%, #000, transparent 75%);
}
.cfi-end .cfi-ein { position: relative; }
.cfi-end h2 { color: #FFFFFF; margin-block-end: 14px; }
.cfi-end p { color: var(--c-on-dark-mut); max-inline-size: 64ch; margin: 0 auto 28px; }

/* ==========================================================================
   14 · MASTHEAD — one white bar, logo, menus that drop, one outlined action
   --------------------------------------------------------------------------
   Opt-in via `.cfi-head` on <header>. The template's own topbar is removed in
   this mode: phone, WhatsApp and social move to the footer, where a visitor
   looks for them, and the bar is left to do one job — navigation.
   ==========================================================================*/
.cfi-head { background: var(--c-paper); position: sticky; inset-block-start: 0; z-index: 1000; border-block-end: 1px solid var(--c-rule); }
.cfi-head .cfi-bar { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); min-block-size: 66px; }
.cfi-head .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.cfi-head .brand img { block-size: 38px; inline-size: auto; display: block; }
.cfi-head .brand .bt { display: flex; flex-direction: column; line-height: 1.1; }
.cfi-head .brand .bt-l1 { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 1.02rem; color: var(--c-ink); }
.cfi-head .brand .bt-l1 em { font-style: normal; color: var(--c-gold); }
.cfi-head .brand .bt-l2 { font-size: .66rem; font-weight: 600; color: var(--c-muted); margin-block-start: 3px; }
@media (max-width: 1160px) { .cfi-head .brand .bt-l2 { display: none; } }

.cfi-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto 0; list-style: none; margin-block: 0; padding: 0; }
.cfi-nav > li { position: static; }
.cfi-nav > li > a, .cfi-nav > li > button {
  display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; cursor: pointer;
  padding: 22px 11px; font-size: .875rem; font-weight: 500; color: var(--c-ink); text-decoration: none; line-height: 1;
  font-family: var(--c-sans);
}
.cfi-nav > li > a:hover, .cfi-nav > li > button:hover { color: var(--c-gold); text-decoration: none; }
.cfi-nav > li.on > a, .cfi-nav > li.on > button { color: var(--c-gold); font-weight: 700; }
.cfi-nav .chev { transition: transform .25s ease; }
.cfi-nav > li:hover .chev, .cfi-nav > li:focus-within .chev { transform: rotate(180deg); }

/* The panel. Anchored to the bar, not the item, so it can be a real grid. */
.cfi-mega {
  position: absolute; inset-inline: 0; inset-block-start: 100%;
  background: var(--c-surface); border-block-start: 1px solid var(--c-rule);
  box-shadow: var(--c-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  z-index: 40;
}
.cfi-nav > li:hover > .cfi-mega,
.cfi-nav > li:focus-within > .cfi-mega { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease, visibility 0s; }
.cfi-mega .inner { max-inline-size: var(--c-wrap); margin-inline: auto; padding: 30px var(--c-gut) 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 34px; }
.cfi-mega a.item { display: block; padding: 12px 14px; border-radius: 6px; text-decoration: none; transition: background-color .2s ease; }
.cfi-mega a.item:hover { background: var(--c-tint); text-decoration: none; }
.cfi-mega a.item b { display: block; font-size: 1rem; font-weight: 600; color: var(--c-ink); margin-block-end: 4px; line-height: 1.35; }
.cfi-mega a.item span { display: block; font-size: .86rem; color: var(--c-muted); line-height: 1.45; }
.cfi-mega .foot { grid-column: 1 / -1; border-block-start: 1px solid var(--c-rule); margin-block-start: 12px; padding-block-start: 18px; }
@media (max-width: 1080px) { .cfi-mega .inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cfi-head .acts { display: flex; align-items: center; gap: 8px; flex: none; }
.cfi-head .icobtn {
  inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--c-ink); cursor: pointer; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.cfi-head .icobtn:hover { background: var(--c-tint); color: var(--c-gold); }
.cfi-head .cta {
  display: inline-flex; align-items: center; padding: 10px 20px; border-radius: var(--c-r-btn);
  border: 1px solid var(--c-ink); color: var(--c-ink); background: transparent;
  font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.cfi-head .cta:hover { background: var(--c-ink); color: var(--c-paper); text-decoration: none; }
.ed-dark .cfi-head .cta:hover { color: #0E140F; }
.cfi-head .cta--gold { background: var(--c-gold); border-color: var(--c-gold); color: #FFFFFF; }
.cfi-head .cta--gold:hover { background: var(--c-gold-d); border-color: var(--c-gold-d); color: #FFFFFF; }

.cfi-head .burger { display: none; }
@media (max-width: 1080px) {
  .cfi-nav { display: none; }
  .cfi-head .burger { display: grid; }
  .cfi-head .cta.hide-sm { display: none; }
}

/* Search sheet */
.cfi-search { display: none; border-block-start: 1px solid var(--c-rule); background: var(--c-surface); }
.cfi-search.open { display: block; }
.cfi-search form { max-inline-size: var(--c-wrap); margin-inline: auto; padding: 16px var(--c-gut); display: flex; gap: 10px; }
.cfi-search input {
  flex: 1 1 auto; min-inline-size: 0; padding: 12px 16px; font-size: 1rem; font-family: var(--c-sans);
  border: 1px solid var(--c-rule); border-radius: var(--c-r-btn); background: var(--c-paper); color: var(--c-ink);
}
.cfi-search input:focus { outline: 2px solid var(--c-gold); outline-offset: 1px; }

/* ==========================================================================
   15 · FOOTER — the site index, then a thin legal rule
   ==========================================================================*/
.cfi-foot { background: var(--c-tint); color: var(--c-body); padding-block: clamp(44px, 6vw, 68px) 0; }
.cfi-foot .cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
@media (max-width: 1000px) { .cfi-foot .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cfi-foot .cols > :first-child { grid-column: 1 / -1; } }
@media (max-width: 640px)  { .cfi-foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cfi-foot h4 { font-size: 1rem; margin-block-end: 16px; color: var(--c-ink); }
.cfi-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cfi-foot ul a, .cfi-foot ul button {
  font-size: .92rem; color: var(--c-body); text-decoration: none; background: none; border: 0; padding: 0;
  text-align: start; cursor: pointer; font-family: var(--c-sans);
  display: inline-flex; align-items: center; min-block-size: 40px; /* 27px rows on a 36px pitch were the footer's tap targets */
}
.cfi-foot ul a:hover, .cfi-foot ul button:hover { color: var(--c-gold); text-decoration: none; }
.cfi-foot .brandcol .lockup { display: flex; align-items: center; gap: 11px; margin-block-end: 16px; }
.cfi-foot .brandcol .lockup img { block-size: 44px; inline-size: auto; }
.cfi-foot .brandcol .ar { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 1.16rem; color: var(--c-ink); line-height: 1.2; }
/* THE DEEP GOLD, NOT THE CTA GOLD. --c-gold is #A67D2E, drawn for a button fill; as
   18.56px bold text on the footer's white it measures 3.75:1, under the 4.5:1 that size
   needs, and it is the academy's own name. It was the ONLY contrast failure left on the
   public site, and it is on every public page. --c-gold-d (#8A6420) is the same palette's
   deep gold and reads 5.35:1. Dark keeps the colour it already had: --c-gold is #D2B36C
   there, 9.24:1 on the dark footer, so only the light theme had anything to fix. */
.cfi-foot .brandcol .ar em { font-style: normal; color: var(--c-gold-d); }
.ed-dark .cfi-foot .brandcol .ar em { color: var(--c-gold); }
.cfi-foot .brandcol .en { font-size: .75rem; font-weight: 600; color: var(--c-muted); margin-block-start: 3px; }
.cfi-foot .brandcol p { font-size: .92rem; line-height: 1.6; margin: 0 0 18px; max-inline-size: 40ch; }
.cfi-foot .contact { display: grid; gap: 10px; }
.cfi-foot .contact li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: .9rem; }
.cfi-foot .contact svg { margin-block-start: 2px; color: var(--c-gold); }

.cfi-foot .rating { display: inline-flex; align-items: center; gap: 10px; margin-block-start: clamp(30px, 4vw, 44px); font-size: .9rem; color: var(--c-body); }
.cfi-foot .rating .stars { color: var(--c-gold); font-size: 1.05rem; letter-spacing: .1em; }
[dir="rtl"] .cfi-foot .rating .stars { letter-spacing: 0; }

.cfi-foot .rule { border: 0; border-block-start: 1px solid var(--c-rule); margin-block: clamp(30px, 4vw, 44px) 0; }
.cfi-foot .bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px 26px; font-size: .86rem; color: var(--c-muted); }
.cfi-foot .bottom a { color: var(--c-muted); text-decoration: none; display: inline-flex; align-items: center; min-block-size: 40px; }
.cfi-foot .bottom a:hover { color: var(--c-gold); }
.cfi-foot .bottom .right { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cfi-foot .social { display: inline-flex; gap: 8px; }
.cfi-foot .social a {
  inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--c-rule); color: var(--c-body); background: var(--c-surface);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cfi-foot .social a:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.ed-dark .cfi-foot .social a:hover { color: #0E140F; }
.cfi-foot .legal { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.cfi-foot .legal .sep { color: var(--c-rule); }

/* ==========================================================================
   16 · SHARED — reveal on scroll, focus rings, print
   ==========================================================================*/
.cfi [data-cfi-rv] { opacity: 0; transform: translateY(16px); }
.cfi [data-cfi-rv].in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
  .cfi [data-cfi-rv] { opacity: 1 !important; transform: none !important; }
  .cfi-trustbar .track, .cfi-hero .cfi-shot .seal { animation: none !important; }
}
.cfi a:focus-visible, .cfi button:focus-visible, .cfi input:focus-visible,
.cfi-head a:focus-visible, .cfi-head button:focus-visible,
.cfi-foot a:focus-visible, .cfi-foot button:focus-visible {
  outline: 2px solid var(--c-gold); outline-offset: 2px; border-radius: 3px;
}
@media print {
  .cfi-head, .cfi-arrow, .cfi-dots, .cfi-end { display: none !important; }
  .cfi-sec { padding-block: 18px; }
}

/* The drawer source list. Hidden where it is authored; custom.js clones it into
   .zmm-wrapper, which is not inside .cfi-head, so the clone is unaffected. */
.cfi-head .cfi-mobile-src { display: none; }

/* Tap parity: the JS click handler sets `.open` on the item so a touch, which
   grants focus less predictably than a pointer, still opens the panel. */
.cfi-nav > li.open > .cfi-mega { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease, visibility 0s; }

/* Anchor targets (#faq, #how, #instructor, #results) land below the sticky bar,
   not underneath it. */
.cfi [id], .cfi-foot [id] { scroll-margin-block-start: 84px; }

/* ==========================================================================
   17 · THE DRAWN PLATFORM — window chrome, a live pane, the outline rail
   ==========================================================================*/
.cfi-mock { background: #FFFFFF; border-radius: 12px; overflow: hidden; box-shadow: var(--c-shadow-lg); border: 1px solid var(--c-rule); }
.ed-dark .cfi-mock { background: #161F19; }
.cfi-hero .cfi-shot .frame.cfi-mock { aspect-ratio: auto; }
.cfi-mock .mk-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-block-end: 1px solid var(--c-rule); background: var(--c-tint); }
.cfi-mock .mk-bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--c-rule); }
.cfi-mock .mk-bar i:nth-child(1) { background: #D98A7A; }
.cfi-mock .mk-bar i:nth-child(2) { background: #D8C182; }
.cfi-mock .mk-bar i:nth-child(3) { background: #7FA588; }
.cfi-mock .mk-bar span { margin-inline-start: 8px; font-size: .75rem; font-weight: 700; color: var(--c-muted); }
.cfi-mock .mk-body { display: grid; grid-template-columns: 1.5fr 1fr; }
.cfi-mock .mk-video { position: relative; background: linear-gradient(150deg, #26402F, #16241B); min-block-size: 230px; display: grid; place-items: center; }
.cfi-mock .mk-video svg { position: absolute; inset: auto 0 0 0; inline-size: 100%; block-size: 60%; opacity: .8; }
.cfi-mock .mk-live {
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px;
  background: #B4453A; color: #FFF; font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 4px;
}
[dir="rtl"] .cfi-mock .mk-live { letter-spacing: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cfi-mock .mk-live { animation: cfi-blink 2.2s ease-in-out infinite; }
  @keyframes cfi-blink { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
}
.cfi-mock .mk-play {
  position: relative; inline-size: 54px; block-size: 54px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.05rem; color: #16241B;
  background: linear-gradient(140deg, #EBD8A4, #C9A758); box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
[dir="rtl"] .cfi-mock .mk-play { transform: scaleX(-1); }
.cfi-mock .mk-rail { padding: 14px; display: flex; flex-direction: column; gap: 8px; border-inline-start: 1px solid var(--c-rule); }
.cfi-mock .mk-rail b { font-size: .78rem; font-weight: 800; color: var(--c-ink); margin-block-end: 2px; }
.cfi-mock .mk-rail span {
  display: flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 600; color: var(--c-muted); line-height: 1.3;
  padding: 7px 9px; border-radius: 6px; background: var(--c-tint);
}
.cfi-mock .mk-rail span i {
  flex: none; inline-size: 15px; block-size: 15px; border-radius: 50%; font-style: normal;
  display: grid; place-items: center; font-size: .58rem;
  border: 1.5px solid var(--c-rule); color: transparent; background: transparent;
}
.cfi-mock .mk-rail span.on { color: var(--c-body); }
.cfi-mock .mk-rail span.on i { background: var(--c-green); border-color: var(--c-green); color: #FFF; }
.cfi-mock .mk-rail span.now { background: var(--c-gold-soft); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-gold-line); }
.cfi-mock .mk-rail span.now i { background: var(--c-gold); border-color: var(--c-gold); color: #FFF; }
[dir="rtl"] .cfi-mock .mk-rail span.now i { transform: scaleX(-1); }
@media (max-width: 560px) {
  .cfi-mock .mk-body { grid-template-columns: 1fr; }
  .cfi-mock .mk-rail { border-inline-start: 0; border-block-start: 1px solid var(--c-rule); }
  .cfi-mock .mk-video { min-block-size: 170px; }
}

/* Small variant for the platform tabs */
.cfi-mock.small .mk-plain { min-block-size: 210px; display: grid; place-items: center; background: linear-gradient(150deg, #26402F, #16241B); }
.mkico { display: inline-grid; place-items: center; }
.cfi-mock.small .mkico.big { font-size: 2.6rem; color: #E4CB90; inline-size: 84px; block-size: 84px; border-radius: 50%; background: rgba(228,203,144,.12); box-shadow: inset 0 0 0 1px rgba(228,203,144,.3); }

/* Benefit sub-cards: the image slot is a drawn forest panel with the icon */
.cfi-subcard .ph { display: grid; place-items: center; }
.cfi-subcard .ph .mkico { font-size: 2rem; color: #E4CB90; inline-size: 66px; block-size: 66px; border-radius: 50%; background: rgba(228,203,144,.12); box-shadow: inset 0 0 0 1px rgba(228,203,144,.3); }

/* ==========================================================================
   18 · FAQ — details/summary two-up
   ==========================================================================*/
.cfi-faqgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; align-items: start; }
@media (max-width: 880px) { .cfi-faqgrid { grid-template-columns: 1fr; } }
.cfi-faq { background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: var(--c-r-card); padding: 0; }
.cfi-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none; cursor: pointer; padding: 18px 20px;
  font-weight: 700; color: var(--c-ink); font-size: 1rem; line-height: 1.45;
}
.cfi-faq summary::-webkit-details-marker { display: none; }
.cfi-faq summary i { flex: none; position: relative; inline-size: 18px; block-size: 18px; }
.cfi-faq summary i::before, .cfi-faq summary i::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  inline-size: 100%; block-size: 2px; background: var(--c-gold); border-radius: 2px;
  transition: transform .25s ease;
}
.cfi-faq summary i::after { transform: rotate(90deg); }
.cfi-faq[open] summary i::after { transform: rotate(0deg); }
.cfi-faq > p { margin: 0; padding: 0 20px 20px; color: var(--c-body); font-size: .95rem; line-height: 1.65; }
.cfi-faq[open] { border-color: var(--c-gold-line); box-shadow: var(--c-shadow); }

/* ==========================================================================
   19 · SUBPAGE RETROFIT — existing editorial pages, flattened to the bands
   --------------------------------------------------------------------------
   The secondary pages (about, contact, articles, founder, policies) keep their
   markup; adding `cfi cfi-subpage` to their wrapper swaps the parchment canvas
   for the flat institutional one and retunes the shared primitives they use.
   Scoped hard so nothing leaks into pages that do not opt in.
   ==========================================================================*/
.ed.cfi-subpage { background: var(--c-paper); }
.ed-dark .ed.cfi-subpage { background: var(--c-paper); }

/* Page hero: flat white, no fx layers, CFI type scale */
.cfi-subpage .ed-hero2, .cfi-subpage .ed-hero-sub, .cfi-subpage .arti-hero { background: var(--c-paper) !important; }
.cfi-subpage .ed-hero2::before, .cfi-subpage .ed-hero2::after { display: none !important; }
.cfi-subpage .ed-fx { display: none !important; }
/* Sections keep their own deliberate backgrounds (forest bands, tinted panels);
   only the page canvas behind them is flattened. */
.cfi-subpage .ed-wrap { max-inline-size: var(--c-wrap); }

/* ==========================================================================
   20 · CATALOGUE PAGE
   ==========================================================================*/
.cfi-catalog .cfi-catsearch { display: flex; gap: 10px; max-inline-size: 560px; margin-block-end: 26px; }
.cfi-catalog .cfi-catsearch input {
  flex: 1 1 auto; min-inline-size: 0; padding: 12px 16px; font-size: 1rem; font-family: var(--c-sans);
  border: 1px solid var(--c-rule); border-radius: var(--c-r-btn); background: var(--c-surface); color: var(--c-ink);
}
.cfi-catalog .cfi-catsearch input:focus { outline: 2px solid var(--c-gold); outline-offset: 1px; }
.cfi-count { font-size: .9rem; font-weight: 700; color: var(--c-muted); margin: 0 0 22px; }
.cfi-catgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1120px) { .cfi-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .cfi-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cfi-catgrid { grid-template-columns: 1fr; } }
.cfi-ccard .bd .alt { display: block; font-size: .8rem; color: var(--c-muted); margin-block-start: -4px; }
.cfi-ccard .bd .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--c-muted); font-weight: 600; }
.cfi-ccard .ph .chip-cat { inset-inline-end: auto; inset-inline-start: 8px; background: #7A5F26; } /* 6:1 under the off-white text; the translucent gold was 3.5:1 */
.cfi-ccard.is-soon .ph img { filter: saturate(.35) brightness(.9); }
.cfi-includes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-block-start: clamp(30px, 4vw, 46px); padding-block-start: clamp(22px, 3vw, 30px);
  border-block-start: 1px solid var(--c-rule);
}
.cfi-includes .lbl { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-inline-end: 6px; }
[dir="rtl"] .cfi-includes .lbl { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.cfi-includes .pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: 999px;
  padding: 8px 15px; font-size: .88rem; font-weight: 600; color: var(--c-body);
}
.cfi-includes .pill i { color: var(--c-green); font-style: normal; font-weight: 800; }

/* ==========================================================================
   21 · MASTHEAD AT PHONE WIDTHS — measured at 375px
   --------------------------------------------------------------------------
   The bar is one non-wrapping row, so everything in it must be able to give
   way: the logo is capped (the mark can be a wide lockup image), the wordmark
   text yields first, then the search icon, and the call to action tightens.
   Without this the brand pushed the row to ~550px and the whole page gained
   a horizontal scrollbar at 375px.
   ==========================================================================*/
.cfi-head .cfi-bar { min-inline-size: 0; }
.cfi-head .brand { min-inline-size: 0; }
.cfi-head .brand img { max-inline-size: 150px; object-fit: contain; }
.cfi-head .acts { margin-inline-start: auto; }
[dir="rtl"] .cfi-head .acts { margin-inline-start: 0; margin-inline-end: 0; }
.cfi-head .cfi-nav + .acts, .cfi-head .acts { margin-inline-start: auto; }
@media (max-width: 640px) {
  .cfi-head .brand .bt { display: none; }
  .cfi-head .brand img { max-inline-size: 120px; }
  .cfi-head .cta { padding: 8px 14px; font-size: .82rem; }
  .cfi-head .cfi-bar { gap: 8px; }
}
@media (max-width: 460px) {
  .cfi-head [data-cfi-search-toggle] { display: none; }
}

/* The enrolment seal sits over the video pane's corner, never over the outline
   list: the pane is on the inline-start side in RTL and the end side in LTR,
   so the seal follows it. */


/* ==========================================================================
   22 · MARKET STRIP — the live ticker, kept from the platform shell
   ==========================================================================*/
.cfi-tick {
  border-block-start: 1px solid var(--c-rule); background: var(--c-tint);
  overflow: hidden; block-size: 34px; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.cfi-tick .track { display: flex; inline-size: max-content; }
.cfi-tick .set { display: flex; align-items: center; }
.cfi-tick .set > span {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding-inline: 16px; font-size: .74rem; font-weight: 600; color: var(--c-muted);
  border-inline-end: 1px solid var(--c-rule);
}
.cfi-tick .set > span > b { font-weight: 800; color: var(--c-body); }
.cfi-tick .set > span > b.u { color: #3E7A4E; }
.cfi-tick .set > span > b.d { color: #A9503F; }
.ed-dark .cfi-tick .set > span > b.u { color: #7FC08F; }
.ed-dark .cfi-tick .set > span > b.d { color: #E09A8A; }
@media (prefers-reduced-motion: no-preference) {
  .cfi-tick .track { animation: cfi-marquee 60s linear infinite; }
  [dir="rtl"] .cfi-tick .track { animation-name: cfi-marquee-rtl; }
}
@media (prefers-reduced-motion: reduce) { .cfi-tick { overflow-x: auto; } }

/* ==========================================================================
   23 · AUTH PAGES — sign in, register, password reset, e-mail verification
   --------------------------------------------------------------------------
   The same field vocabulary the old auth pages used (.ath-*) restyled into
   the institutional system, scoped under .cfi-auth so nothing leaks either
   way. The forms' names, ids and POST targets are laravel/ui's and are not
   touched — this is chrome, not plumbing.
   ==========================================================================*/
.cfi-auth { background: var(--c-tint); padding-block: clamp(36px, 6vw, 72px); min-height: 62vh; }
.cfi-auth .cfi-acard {
  background: var(--c-surface); border-radius: 10px; box-shadow: var(--c-shadow);
  padding: clamp(24px, 4vw, 40px); max-inline-size: 460px; margin-inline: auto;
}
.cfi-auth .cfi-acard--wide { max-inline-size: none; margin-inline: 0; }
.cfi-auth .cfi-alogo { display: inline-flex; margin-block-end: 18px; }
.cfi-auth .cfi-alogo img { block-size: 46px; inline-size: auto; max-inline-size: 170px; object-fit: contain; }
.cfi-auth h1 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin-block-end: 8px; }
.cfi-auth .cfi-asub { color: var(--c-body); font-size: .95rem; margin: 0 0 22px; }

/* the split register layout: form + what-you-get */
.cfi-auth .cfi-agrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 34px); align-items: start; }
@media (max-width: 880px) { .cfi-auth .cfi-agrid { grid-template-columns: 1fr; } }

.cfi-auth .cfi-aside-panel {
  background: linear-gradient(160deg, #26402F, #16241B); color: var(--c-on-dark);
  border-radius: 10px; padding: clamp(22px, 3vw, 30px); box-shadow: var(--c-shadow);
}
.ed-dark .cfi-auth .cfi-aside-panel { background: linear-gradient(160deg, #1B2A20, #101711); }
.cfi-auth .cfi-aside-panel .kick { display: block; font-weight: 800; color: var(--c-on-dark-gold); margin-block-end: 14px; font-size: 1rem; }
.cfi-auth .cfi-aside-panel .cfi-checks li { color: var(--c-on-dark); }
.cfi-auth .cfi-aside-panel .cfi-checks li::before { background-color: var(--c-on-dark-gold); }
.cfi-auth .cfi-anote {
  margin-block-start: 14px; background: var(--c-surface); border: 1px solid var(--c-rule);
  border-radius: 10px; padding: 14px 18px; font-size: .92rem; color: var(--c-body); text-align: center;
}
.cfi-auth .cfi-anote a { color: var(--c-gold); font-weight: 700; text-decoration: none; }

/* form primitives */
.cfi-auth .ath-field { margin-block-end: 16px; }
.cfi-auth .ath-lbl { display: block; font-size: .85rem; font-weight: 700; color: var(--c-ink); margin-block-end: 6px; }
.cfi-auth .ath-in {
  inline-size: 100%; padding: 11px 14px; font-size: 1rem; font-family: var(--c-sans);
  color: var(--c-ink); background: var(--c-paper); border: 1px solid var(--c-rule);
  border-radius: var(--c-r-btn); transition: border-color .15s ease, box-shadow .15s ease;
}
.cfi-auth .ath-in:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px var(--c-gold-soft); }
.cfi-auth .ath-in::placeholder { color: var(--c-muted); opacity: .8; }
.cfi-auth select.ath-in { appearance: auto; }
.cfi-auth .ath-two, .cfi-auth .rg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 460px) { .cfi-auth .ath-two, .cfi-auth .rg-two { grid-template-columns: 1fr; } }
.cfi-auth .ath-tel { display: grid; grid-template-columns: minmax(120px, 150px) minmax(0, 1fr); gap: 8px; }
.cfi-auth .ath-pw { position: relative; }
.cfi-auth .ath-pw .ath-in { padding-inline-end: 54px; }
.cfi-auth .ath-eye {
  position: absolute; inset-block-start: 50%; inset-inline-end: 8px; transform: translateY(-50%);
  inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--c-muted); cursor: pointer; border-radius: 6px;
}
.cfi-auth .ath-eye:hover { color: var(--c-gold); background: var(--c-gold-soft); }
.cfi-auth .ath-eye .i-hide { display: none; }
.cfi-auth .ath-eye.on .i-show { display: none; }
.cfi-auth .ath-eye.on .i-hide { display: block; }
.cfi-auth .ath-err { display: block; margin-block-start: 6px; font-size: .82rem; font-weight: 600; color: #A9503F; }
.ed-dark .cfi-auth .ath-err { color: #E09A8A; }
.cfi-auth .ath-alert {
  background: var(--c-gold-soft); border: 1px solid var(--c-gold-line); color: var(--c-ink);
  border-radius: var(--c-r-btn); padding: 11px 14px; font-size: .9rem; margin-block-end: 16px;
}
.cfi-auth .ath-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block: 4px 18px; font-size: .88rem; }
.cfi-auth .ath-remember { display: inline-flex; align-items: center; min-block-size: 44px; gap: 8px; color: var(--c-body); cursor: pointer; margin: 0; font-weight: 600; }
.cfi-auth .ath-remember input { accent-color: var(--c-gold); inline-size: 16px; block-size: 16px; }
.cfi-auth .ath-row > a { color: var(--c-gold); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-block-size: 44px; }
.cfi-auth .ath-row > a:hover { text-decoration: underline; }
.cfi-auth .ea-submit {
  inline-size: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--c-gold); color: #FFFFFF; border: 1px solid var(--c-gold);
  font-family: var(--c-sans); font-size: 1rem; font-weight: 700; padding: 12px 24px;
  border-radius: var(--c-r-btn); cursor: pointer; position: relative; overflow: hidden;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cfi-auth .ea-submit:hover { background: var(--c-gold-d); border-color: var(--c-gold-d); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(166,125,46,.28); }
.ed-dark .cfi-auth .ea-submit { color: #14200F; }
.cfi-auth .ea-sheen { display: none; }
.cfi-auth .ath-alt { margin: 18px 0 0; text-align: center; font-size: .9rem; color: var(--c-body); }
.cfi-auth .ath-alt a { color: var(--c-gold); font-weight: 700; text-decoration: none; }
.cfi-auth .ath-alt a:hover { text-decoration: underline; }
.cfi-auth a:focus-visible, .cfi-auth button:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* ==========================================================================
   24 · PROSE PAGE HEADER — policies and other admin-written documents
   ==========================================================================*/
.cfi-prosehead { background: var(--c-paper); padding-block: clamp(30px, 5vw, 54px) clamp(20px, 3vw, 30px); }
.cfi-prosehead .crumb { font-size: .82rem; font-weight: 700; color: var(--c-muted); margin-block-end: 10px; }
.cfi-prosehead .crumb a { color: #7A5F26; text-decoration: none; } /* gold on white was 3.75:1 at 13px */
.ed-dark .cfi-prosehead .crumb a { color: var(--c-gold); }
.cfi-prosebody { background: var(--c-tint); padding-block: clamp(26px, 4vw, 44px) clamp(40px, 6vw, 64px); }
.cfi-prosebody .content-box { max-inline-size: 880px; margin-inline: auto; }

/* ==========================================================================
   25 · THE MEGA WINDOW ON THE CLASSIC BAR
   --------------------------------------------------------------------------
   The institutional programmes panel, kept on every page by the owner's call,
   now dropping from the classic forest navbar. The panel itself keeps its
   white institutional look (the exact window he approved); only the anchoring
   changes: it hangs from the floating bar, spans the bar's own width, and
   rounds its lower corners to match the pill.
   ==========================================================================*/
.ed-sitehead .sticky-head { position: relative; }
.ed-sitehead .ed-hasmega { position: static; }
.ed-sitehead .ed-megadrop {
  position: absolute; inset-inline: 0; inset-block-start: 100%;
  background: #FFFFFF; border-radius: 0 0 16px 16px;
  border-block-start: 2px solid #CBAA63;
  box-shadow: 0 24px 54px rgba(16, 26, 19, .28);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  z-index: 60;
}
.ed-sitehead .ed-hasmega:hover > .ed-megadrop,
.ed-sitehead .ed-hasmega:focus-within > .ed-megadrop {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.ed-sitehead .ed-megadrop .inner {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 30px; padding: 26px 30px 28px;
}
@media (max-width: 1080px) { .ed-sitehead .ed-megadrop .inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ed-sitehead .ed-megadrop a.item { display: block; padding: 12px 14px; border-radius: 8px; text-decoration: none; transition: background-color .2s ease; }
.ed-sitehead .ed-megadrop a.item:hover { background: #F6F1E2; }
.ed-sitehead .ed-megadrop a.item b { display: block; font-size: 1rem; font-weight: 700; color: #1C2A20; margin-block-end: 4px; line-height: 1.35; }
.ed-sitehead .ed-megadrop a.item span { display: block; font-size: .85rem; color: #6A7765; line-height: 1.5; }
.ed-sitehead .ed-megadrop .foot { grid-column: 1 / -1; border-block-start: 1px solid #E8E2D2; margin-block-start: 12px; padding-block-start: 16px; }
.ed-sitehead .ed-megadrop .foot .cfi-link { color: #1C2A20; }
.ed-sitehead .ed-megadrop .foot .cfi-link:hover { color: #A67D2E; }

/* dark theme: the window flips to the dark surface set */
.ed-dark .ed-sitehead .ed-megadrop { background: #161F19; border-block-start-color: #D2B36C; box-shadow: 0 24px 54px rgba(0, 0, 0, .55); }
.ed-dark .ed-sitehead .ed-megadrop a.item:hover { background: rgba(210, 179, 108, .1); }
.ed-dark .ed-sitehead .ed-megadrop a.item b { color: #EDF2EA; }
.ed-dark .ed-sitehead .ed-megadrop a.item span { color: #9AA795; }
.ed-dark .ed-sitehead .ed-megadrop .foot { border-block-start-color: #2C3830; }
.ed-dark .ed-sitehead .ed-megadrop .foot .cfi-link { color: #EDF2EA; }

/* the drawer clone never shows the desktop window — phones keep the plain link */
.zmm-wrapper .ed-megadrop { display: none !important; }

/* The template's .basic-container carries overflow:hidden as a float clearfix;
   inside the navbar that clips the mega window to the bar's own 61px. The bar
   lays out with flex, not floats, so visible costs nothing here. Scoped to the
   navbar only. */
.ed-sitehead .navbar .basic-container { overflow: visible; }

/* == 26 · Motion ==============================================================
   The owner asked that the platform move. Everything here is decoration in
   time, not in space: entrances, hovers and shimmers that change nothing
   about the layout, and all of it switches off under prefers-reduced-motion.
   The scroll reveals themselves are section 15's [data-cfi-rv] rules — this
   section widens them to the subpages and adds the rest of the vocabulary. */

/* reveals reach the subpages too (autotagged at runtime, no blade changes) */
.cfi-subpage [data-cfi-rv] { opacity: 0; transform: translateY(16px); }
.cfi-subpage [data-cfi-rv].in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.7,.3,1); }

/* the caret on bar items that open a window — turns over while the window is up */
.ed-sitehead .ed-chev { display: inline-block; vertical-align: middle; margin-inline-start: 5px; margin-block-start: -2px; opacity: .7; transition: transform .25s ease, opacity .25s ease; }
.ed-sitehead .ed-hasmega:hover > a .ed-chev,
.ed-sitehead .ed-hasmega:focus-within > a .ed-chev { transform: rotate(180deg); opacity: 1; }

/* the window's items rise in one after another as it opens */
.ed-sitehead .ed-megadrop a.item,
.ed-sitehead .ed-megadrop .foot { opacity: 0; transform: translateY(9px); transition: opacity .3s ease, transform .3s ease; }
.ed-sitehead .ed-hasmega:hover .ed-megadrop a.item,
.ed-sitehead .ed-hasmega:focus-within .ed-megadrop a.item,
.ed-sitehead .ed-hasmega:hover .ed-megadrop .foot,
.ed-sitehead .ed-hasmega:focus-within .ed-megadrop .foot { opacity: 1; transform: none; }
.ed-sitehead .ed-megadrop a.item:nth-of-type(1) { transition-delay: .04s; }
.ed-sitehead .ed-megadrop a.item:nth-of-type(2) { transition-delay: .08s; }
.ed-sitehead .ed-megadrop a.item:nth-of-type(3) { transition-delay: .12s; }
.ed-sitehead .ed-megadrop a.item:nth-of-type(4) { transition-delay: .16s; }
.ed-sitehead .ed-megadrop a.item:nth-of-type(5) { transition-delay: .20s; }
.ed-sitehead .ed-megadrop a.item:nth-of-type(6) { transition-delay: .24s; }
.ed-sitehead .ed-megadrop a.item:nth-of-type(7) { transition-delay: .28s; }
.ed-sitehead .ed-megadrop a.item:nth-of-type(8) { transition-delay: .32s; }
.ed-sitehead .ed-megadrop .foot { transition-delay: .30s; }

/* cards lift toward the cursor; their artwork breathes slightly larger */
.cfi-ccard, .cfi-card, .cfi-acard { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.cfi-ccard:hover, .cfi-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(28, 42, 32, .16); }
.ed-dark .cfi-ccard:hover, .ed-dark .cfi-card:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.cfi-ccard { overflow: hidden; }
.cfi-ccard img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.cfi-ccard:hover img { transform: scale(1.045); }

/* the gold call-to-action carries a light-sweep on hover */
.cfi-btn--gold { position: relative; overflow: hidden; }
.cfi-btn--gold::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .38) 50%, transparent 58%); transform: translateX(-130%); }
.cfi-btn--gold:hover::after { animation: cfiShine .8s ease; }
[dir="rtl"] .cfi-btn--gold::after { transform: translateX(130%); }
[dir="rtl"] .cfi-btn--gold:hover::after { animation-name: cfiShineR; }
@keyframes cfiShine { to { transform: translateX(130%); } }
@keyframes cfiShineR { to { transform: translateX(-130%); } }

/* each page settles in rather than snapping on */
@keyframes cfiPageIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: cfiPageIn .4s ease both; }

/* links in the classic bar underline in from the reading side */
.ed-sitehead .theme-main-menu > li > a { position: relative; }
.ed-sitehead .theme-main-menu > li > a::after { content: ''; position: absolute; inset-inline: 12px; inset-block-end: 4px; block-size: 2px; border-radius: 2px; background: currentColor; opacity: .85; transform: scaleX(0); transform-origin: var(--cfi-uline-origin, right); transition: transform .28s cubic-bezier(.22,.61,.36,1); }
[dir="ltr"] .ed-sitehead .theme-main-menu > li > a::after { --cfi-uline-origin: left; }
.ed-sitehead .theme-main-menu > li:not(.active):hover > a::after { transform: scaleX(1); }

/* everything above honours the visitor who asked for stillness */
@media (prefers-reduced-motion: reduce) {
  .cfi-subpage [data-cfi-rv] { opacity: 1 !important; transform: none !important; }
  .ed-sitehead .ed-megadrop a.item, .ed-sitehead .ed-megadrop .foot { opacity: 1; transform: none; transition: none; }
  .cfi-ccard, .cfi-card, .cfi-acard, .cfi-ccard img, .ed-sitehead .ed-chev { transition: none; }
  .cfi-ccard:hover, .cfi-card:hover { transform: none; }
  .cfi-btn--gold:hover::after { animation: none; }
  body { animation: none; }
  .ed-sitehead .theme-main-menu > li > a::after { transition: none; }
}


/* -------------------------------------------------------------------------
   27 · Pagination (.cfi-pager)
   Replaces Laravel's Bootstrap-blue default wherever a list paginates.
   Square chips on the paper ground; the current page is a solid forest chip;
   arrows carry rel=prev/next and flip with the locale in the template.
   ------------------------------------------------------------------------- */
.cfi-pager { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-start: 10px; }
.cfi-pager .pg {
  min-inline-size: 40px; block-size: 40px; padding-inline: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-rule, #E3DFD2); border-radius: 8px;
  background: var(--c-card, #FFFFFF); color: var(--c-ink, #1C2A20);
  font: 700 .92rem/1 'Cairo', sans-serif; font-variant-numeric: tabular-nums;
  text-decoration: none; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
a.cfi-pager-link:hover, .cfi-pager a.pg:hover { border-color: var(--c-gold, #CBAA63); color: var(--c-gold-d, #8A6D2E); transform: translateY(-1px); }
.cfi-pager .is-now { background: var(--c-forest, #1C2A20); border-color: var(--c-forest, #1C2A20); color: var(--c-paper, #FDFCF7); }
.cfi-pager .is-off { opacity: .38; pointer-events: none; }
.ed-dark .cfi-pager .pg, .ed-dark.cfi-pager .pg { background: transparent; }
@media (prefers-reduced-motion: reduce) { .cfi-pager .pg { transition: none; } }
/* That reset took the current page's pill with it and left near-black text on the dark page. */
.ed-dark .cfi-pager .is-now { background: var(--c-gold, #CBAA63); border-color: var(--c-gold, #CBAA63); color: #0E140F; }

/* -------------------------------------------------------------------------
   26b · The admin's motion switch.
   data-cfi-motion="off" on <body> comes from Settings -> Site menu
   (cfi_motion_enabled). CSS media queries cannot read an attribute the way
   they read prefers-reduced-motion, so the same dead-stop is written out
   explicitly: no keyframes anywhere, no transitions anywhere, and both
   reveal systems (data-cfi-rv and .reveal) forced visible for the no-JS
   case. The JS side folds this attribute into its own `reduce` flag.
   ------------------------------------------------------------------------- */
body[data-cfi-motion="off"],
body[data-cfi-motion="off"] *,
body[data-cfi-motion="off"] *::before,
body[data-cfi-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}
body[data-cfi-motion="off"] [data-cfi-rv],
body[data-cfi-motion="off"] .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* "Every programme includes" and its siblings were the muted token at 4.04:1 on the tint. */
.cfi .lbl, .cfi-includes .lbl { color: #5A6657; }
.ed-dark .cfi .lbl, .ed-dark .cfi-includes .lbl { color: #B9C4B6; }
/* The button carried white on gold at 2.02:1. Dark ink on the BRIGHT gold is 7:1 and is what
   every other gold button on the site uses; darkening the gold instead only made it worse. */
.cfi-btn--onDark, .ed-dark .cfi-btn--onDark { background: #CBAA63; border-color: #CBAA63; }