/* ============================================================================
   Almostasmer Alsagher — EDITORIAL theme layer  (ported from Lovable design)
   Scope: everything lives under `.ed` so it never touches vendor CSS.
   White-background variant (owner chose white over the Lovable cream #FAF6EC).
   Bilingual: Instrument Serif for Latin display, Cairo for Arabic display.
   ==========================================================================*/

.ed {
  /* palette — "Gold on white" (option 2a): warm paper + forest + gold gradients */
  --paper:  #FDFCF8;   /* warm-white page background */
  --panel:  #F8F5EC;   /* warm alt band / ticker bg */
  --ink:    #16261C;   /* near-black forest — text */
  --ink-soft:#54644F;  /* muted green-gray body text */
  --label:  #5B6B5D;   /* eyebrows / caps labels */
  --gold:   #CBAA63;   /* legacy champagne (kept for older refs) */
  --gold-b: #D8C182;   /* lighter champagne — on-dark highlights */
  --gold-d: #B08C3F;   /* stat numerals, underlines, small links */
  --gold-deep:#8A6D2E; /* prices & small gold text on white */
  --gold-text:#7A5F26; /* gold for caption/body sizes — gold-deep is only 4.43:1 on the warm panel */
  --rule:   #EAE5D6;   /* warm hairline */
  --forest: #1C2A20;   /* masthead / page heroes / footer accents */
  --sage:   #4A6852;
  /* gold gradient system */
  --gold-grad:        linear-gradient(100deg,#A9853B,#D3B871);  /* display accents */
  --gold-grad-bright: linear-gradient(100deg,#D3B871,#B08C3F);  /* primary CTAs */
  --gold-grad-cta:    linear-gradient(100deg,#EBD8A4,#C9A758);  /* CTA band panel */
  --pill-bg: #F6F1E2; --pill-line: #E2D9BF;
  /* on-forest text */
  --on-forest: #EDE7D2; --on-forest-mut: #C9BF9F; --on-forest-gold: #EBD8A4; --on-forest-line: rgba(216,193,130,.25);

  --ed-serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --ed-sans:  'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  color: var(--ink);
  background: var(--paper);
  font-family: var(--ed-sans);
  -webkit-font-smoothing: antialiased;
}

/* Arabic keeps Cairo everywhere (Instrument Serif has no Arabic glyphs) */
[dir="rtl"] .ed,
.ed:lang(ar) { --ed-sans: 'Cairo', sans-serif; }

/* style.css paints bare `h1…h6` #333 — the type selector behind four separate
   invisible-text incidents. Neutralise it inside the editorial scope; every
   later .ed rule that names a heading still outranks this one. */
.ed :is(h1,h2,h3,h4,h5,h6) { color: inherit; }

/* Wide tracking is a Latin device — Arabic letters must not be pulled apart.
   These caps classes are the ones that never got an RTL reset of their own. */
[dir="rtl"] :is(.ed-btn,.ed-stat span,.ed-tag-forest span,.ed-tag-gold span,.ed-search button,.ed-cat .num,
.ed-pagehero .kick,.ed-pagehero .crumb,.ed-chip,.ed-cc h3,.ed-share span,.ed-footer .ft-legal a,.ed-signin,
.ed-enrol,.ed-lang) { letter-spacing: .04em; }

/* ---- layout ---- */
.ed-wrap { max-width: 1240px; margin-inline: auto; padding-inline: 24px; }
.ed-sec  { padding-block: clamp(56px, 8vw, 96px); border-bottom: 1px solid var(--rule); }
.ed-sec.tight { padding-block: clamp(40px, 5vw, 64px); }
.ed-panel { background: var(--panel); }
/* Deep-forest band with a soft gold glow (reference gradient 1 + CTA glow) */
.ed-forest {
  background:
    radial-gradient(58% 130% at 88% 42%, rgba(203,170,99,.26) 0%, transparent 62%),
    linear-gradient(135deg, #16241B 0%, #1C2A20 45%, #263A2C 100%);
  color: #F3EFE3;
}

/* ---- type ---- */
.ed-display, .ed-h1, .ed-h2, .ed-h3, .ed-quote {
  font-family: var(--ed-serif);
  font-weight: 400;               /* Instrument Serif reads bold optically at 400 */
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--ink);              /* explicit so vendor h1/h2/h3 colors can't hijack (esp. dark mode) */
}
[dir="rtl"] .ed-display, [dir="rtl"] .ed-h1, [dir="rtl"] .ed-h2,
[dir="rtl"] .ed-h3, [dir="rtl"] .ed-quote,
.ed-display:lang(ar), .ed-h1:lang(ar), .ed-h2:lang(ar), .ed-h3:lang(ar), .ed-quote:lang(ar) {
  font-family: 'Cairo', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.18;
}
.ed-h1 { font-size: clamp(2.6rem, 6.5vw, 5.4rem); }
.ed-h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -0.015em; }
.ed-h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.18; }
.ed-lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.7; color: var(--ink-soft); max-width: 52ch; }

.ed-em { color: var(--gold); font-style: italic; }
[dir="rtl"] .ed-em, .ed-em:lang(ar) { font-style: normal; }   /* italic Arabic looks wrong */

.ed-eyebrow {
  font-family: var(--ed-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-soft);
}
[dir="rtl"] .ed-eyebrow, .ed-eyebrow:lang(ar) { letter-spacing: 0.12em; }
.ed-eyebrow { color: var(--label); }
.ed-eyebrow.gold { color: var(--gold-d); }

/* gold pill eyebrow (2a hero) */
.ed-pill { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--pill-line); background: var(--pill-bg);
  border-radius: 100px; padding: 7px 16px; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); }
[dir="rtl"] .ed-pill, .ed-pill:lang(ar) { letter-spacing: .06em; }
.ed-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-d); flex: none; }

/* section head — number · label ......... Title (numbered editorial rule) */
.ed-head { display: flex; align-items: baseline; gap: 1.5rem; border-top: 1px solid var(--rule); padding-top: 2rem; flex-wrap: wrap; }
.ed-head .num { font-family: var(--ed-serif); font-size: 1.6rem; color: var(--gold); }
[dir="rtl"] .ed-head .num, .ed-head .num:lang(ar) { font-family: var(--ed-serif); }
.ed-head .ed-h2 { margin-inline-start: auto; }
@media (max-width: 640px){ .ed-head .ed-h2 { margin-inline-start: 0; flex-basis: 100%; } }

/* ---- buttons / links ---- */
.ed-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 1rem 2rem; border-radius: 4px;
  font-family: var(--ed-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  transition: opacity .2s ease, background .2s ease, color .2s ease, transform .2s ease;
  cursor: pointer; border: 0;
}
.ed-btn-dark  { background: var(--ink);  color: var(--paper); }
.ed-btn-dark:hover  { opacity: .9; color: var(--paper); }
.ed-btn-gold  { background: var(--gold-grad-bright); color: #241A05; box-shadow: 0 14px 30px rgba(166,125,46,.32); }
.ed-btn-gold:hover  { filter: brightness(1.06); color: #241A05; }
/* dark button that sits on the gold CTA panel */
.ed-btn-night { background: #141D15; color: #EBD8A4; }
.ed-btn-night:hover { background: #1C2A20; color: #EBD8A4; }
.ed-btn-outline-dim { background: transparent; color: #241A05; border: 1.5px solid rgba(36,26,5,.4); }
.ed-btn-outline-dim:hover { border-color: #241A05; color: #241A05; }
/* pulsing ping ring wrapper for the primary hero CTA */
.ed-ping { position: relative; display: inline-block; }
.ed-ping::before { content: ""; position: absolute; inset: 0; border: 2px solid #C9A758; border-radius: 4px; opacity: 0; pointer-events: none; }
.ed-btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.ed-btn-outline:hover { background: var(--ink); color: var(--paper); }
.ed-btn-ghost { background: transparent; color: #F3EFE3; border: 1px solid rgba(243,239,227,.4); }
.ed-btn-ghost:hover { background: #F3EFE3; color: var(--forest); }

.ed-inline { font-family: var(--ed-sans); font-size: .9rem; font-weight: 500; letter-spacing: .02em;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 3px; transition: color .2s ease, border-color .2s ease; }
.ed-inline:hover { color: var(--gold); border-color: var(--gold); }

/* ---- stats ---- */
.ed-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; border-top: 1px solid var(--rule); padding-top: 2rem; max-width: 440px; }
.ed-stat b { display: block; font-family: var(--ed-serif); font-size: 2.2rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
[dir="rtl"] .ed-stat b, .ed-stat b:lang(ar) { font-family: var(--ed-serif); }
.ed-stat span { display: block; margin-top: .55rem; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

/* ---- hero ---- */
.ed-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 5rem; align-items: start; }
@media (max-width: 900px){ .ed-hero-grid { grid-template-columns: 1fr; gap: 3rem; } }
.ed-hero-figure { position: relative; }
.ed-hero-figure .fig { position: relative; overflow: hidden; }
.ed-hero-figure img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(10%); }
.ed-figcap { position: absolute; inset-inline-start: 1.5rem; bottom: 1.5rem; max-width: 72%;
  background: rgba(255,255,255,.95); padding: .9rem 1.2rem; backdrop-filter: blur(4px); }
.ed-figcap .ed-h3 { margin-top: .25rem; }
.ed-tag-forest { position: absolute; inset-inline-start: -1rem; top: -1rem; background: var(--forest); color: var(--gold-b);
  padding: .8rem 1.1rem; }
.ed-tag-forest b { font-family: var(--ed-serif); font-size: 1.5rem; line-height: 1; display: block; }
[dir="rtl"] .ed-tag-forest b, .ed-tag-forest b:lang(ar) { font-family: var(--ed-serif); }
.ed-tag-forest span { display: block; margin-top: .35rem; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(243,239,227,.8); }
.ed-tag-gold { position: absolute; inset-inline-end: -.9rem; top: 33%; background: var(--gold); color: var(--ink); padding: .8rem 1.1rem; }
.ed-tag-gold b { font-family: var(--ed-serif); font-style: italic; font-size: 1.1rem; line-height: 1; display: block; }
[dir="rtl"] .ed-tag-gold b, .ed-tag-gold b:lang(ar) { font-family: 'Cairo',sans-serif; font-style: normal; font-weight: 800; }
.ed-tag-gold span { display: block; margin-top: .35rem; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 900px){ .ed-tag-forest, .ed-tag-gold { display: none; } }

/* ---- hero search ---- */
.ed-search { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--ink); background: var(--paper); padding: .35rem .35rem .35rem 1rem; max-width: 460px; }
.ed-search svg { color: var(--ink-soft); flex: none; }
.ed-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 15px var(--ed-sans); color: var(--ink); }
.ed-search input::placeholder { color: #9AA492; }
.ed-search button { flex: none; border: 0; cursor: pointer; background: var(--ink); color: var(--paper); font: 600 11px var(--ed-sans); letter-spacing: .2em; text-transform: uppercase; padding: .8rem 1.2rem; }
.ed-search button:hover { background: var(--gold-d); }

/* ---- category hairline grid ---- */
.ed-catgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 760px){ .ed-catgrid { grid-template-columns: 1fr; } }
.ed-cat { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; background: var(--paper); padding: 2.4rem 2rem; text-decoration: none; color: inherit; transition: background .2s ease; }
.ed-cat:hover { background: var(--panel); }
.ed-cat .num { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.ed-cat .ed-h3 { margin-top: .7rem; color: var(--ink); }
.ed-cat .sub { margin-top: .45rem; font-size: .85rem; color: var(--ink-soft); }
.ed-cat .arrow { font-family: var(--ed-serif); font-size: 1.5rem; color: var(--ink-soft); transition: transform .2s ease, color .2s ease; }
.ed-cat:hover .arrow { color: var(--gold); transform: translateX(4px); }
[dir="rtl"] .ed-cat:hover .arrow { transform: translateX(-4px); }

/* ---- course cards ---- */
.ed-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; }
@media (max-width: 900px){ .ed-grid3 { grid-template-columns: repeat(2,1fr); gap: 2rem; } }
@media (max-width: 600px){ .ed-grid3 { grid-template-columns: 1fr; } }
.ed-course { display: block; text-decoration: none; color: inherit; }
.ed-course .thumb { position: relative; aspect-ratio: 3/2; overflow: hidden; background: #1f1913; }
.ed-course .thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.ed-course:hover .thumb img { transform: scale(1.03); }
.ed-course .badge { position: absolute; inset-inline-start: 1rem; top: 1rem; background: var(--paper); color: var(--ink); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; padding: .35rem .7rem; }
.ed-course .row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 1.4rem; }
.ed-course .rating { font-size: .85rem; color: var(--ink-soft); }
.ed-course .ed-h3 { margin-top: .75rem; transition: color .2s ease; }
.ed-course:hover .ed-h3 { color: var(--gold); }
.ed-course .foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.ed-course .by { font-size: .85rem; font-style: italic; color: var(--ink-soft); }
.ed-course .price { font-family: var(--ed-serif); font-size: 1.2rem; color: var(--ink); }
[dir="rtl"] .ed-course .price, .ed-course .price:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 700; }

/* ---- method / how you learn ---- */
.ed-method { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; }
@media (max-width: 760px){ .ed-method { grid-template-columns: 1fr; } }
.ed-method article { border-top: 1px solid rgba(22,38,28,.2); padding-top: 1.5rem; }
.ed-method .mnum { font-family: var(--ed-serif); font-size: 3.4rem; line-height: 1; color: var(--gold-d); }
.ed-method .ed-h3 { margin-top: 1.4rem; }
.ed-method p { margin-top: 1rem; font-size: .92rem; line-height: 1.7; color: var(--ink-soft); }

/* ---- big quote band ---- */
.ed-quotegrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; }
@media (max-width: 860px){ .ed-quotegrid { grid-template-columns: 1fr; gap: 2.5rem; } }
.ed-quote { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.12; text-wrap: balance; }
/* decorative quotation marks — namespaced so Bootstrap's ".mark" highlight can't apply */
.ed-quote .qmark { color: var(--gold); background: none; padding: 0; font-family: var(--ed-serif); font-weight: 400; }
.ed-quote .qmark.open { margin-inline-end: .06em; }
.ed-quote .qmark.close { margin-inline-start: .04em; }
.ed-quote em { color: var(--gold); }
.ed-quotestats { display: flex; flex-direction: column; justify-content: flex-end; gap: 2rem; }
.ed-quotestats .qs { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.ed-quotestats .qs b { font-family: var(--ed-serif); font-size: 2.4rem; line-height: 1; }
[dir="rtl"] .ed-quotestats .qs b, .ed-quotestats .qs b:lang(ar) { font-family: var(--ed-serif); }
.ed-quotestats .qs p { margin-top: .5rem; font-size: .9rem; color: var(--ink-soft); }

/* ---- CTA forest band ---- */
.ed-cta { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: end; }
@media (max-width: 800px){ .ed-cta { grid-template-columns: 1fr; gap: 2rem; } }
.ed-cta .ed-h2 { color: #F5F2E8; font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.ed-cta .ed-em { color: var(--gold-b); }
.ed-cta p { color: rgba(243,239,227,.72); line-height: 1.7; }

/* ---- inner page hero (courses/contact/etc) ---- */
.ed-pagehero { border-bottom: 1px solid var(--rule); background: var(--forest); color: #F3EFE3; }
.ed-pagehero .in { max-width: 1240px; margin-inline: auto; padding: clamp(64px,10vw,128px) 24px; }
.ed-pagehero .kick { margin-bottom: 1.4rem; font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-b); }
.ed-pagehero h1 { font-family: var(--ed-serif); font-weight: 400; font-size: clamp(2.6rem,7vw,5rem); line-height: 1.03; letter-spacing: -.02em; color: #F5F2E8; }
[dir="rtl"] .ed-pagehero h1, .ed-pagehero h1:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; line-height: 1.15; }
.ed-pagehero .crumb { margin-top: 1.8rem; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(243,239,227,.6); }
.ed-pagehero .crumb a { color: rgba(243,239,227,.85); text-decoration: none; }
.ed-pagehero .crumb a:hover { color: var(--gold-b); }
.ed-pagehero .crumb .sep { color: rgba(243,239,227,.35); margin-inline: .5rem; }

/* ---- filter chips (courses page) ---- */
.ed-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.ed-chip { font-family: var(--ed-sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: .6rem 1.1rem; border: 1px solid var(--rule); color: var(--ink-soft); text-decoration: none; transition: all .18s ease; }
.ed-chip:hover { border-color: var(--ink); color: var(--ink); }
.ed-chip.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---- empty state ---- */
.ed-empty { text-align: center; padding: 4rem 1rem; color: var(--ink-soft); }
.ed-empty .ed-h3 { color: var(--ink); margin-top: 1rem; }

/* ============================================================================
   INNER PAGES — courses catalog, course detail, contact
   ==========================================================================*/

/* ---- contact ---- */
.ed-contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 4rem; }
@media (max-width: 760px){ .ed-contact-grid { grid-template-columns: 1fr; } }
.ed-cc { background: var(--paper); padding: 2.2rem 2rem; }
.ed-cc .ic { color: var(--gold); }
.ed-cc h3 { font-family: var(--ed-sans); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); margin: 1rem 0 .6rem; }
.ed-cc p, .ed-cc a { font-size: 1rem; color: var(--ink); line-height: 1.6; text-decoration: none; }
.ed-cc a:hover { color: var(--gold); }

/* ---- editorial form (underline inputs) ---- */
.ed-formwrap { max-width: 720px; }
.ed-form .fld { margin-bottom: 1.8rem; }
.ed-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
@media (max-width: 600px){ .ed-form .row2 { grid-template-columns: 1fr; gap: 0; } }
.ed-form label, .ed-form .form-control::placeholder, .ed-form textarea::placeholder { color: var(--ink-soft); }
.ed-form .form-control,
.ed-form input[type=text], .ed-form input[type=email], .ed-form input[type=tel], .ed-form textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: transparent;
  padding: .7rem 0; font: 400 1rem var(--ed-sans); color: var(--ink); border-radius: 0; outline: 0; transition: border-color .2s ease;
}
.ed-form .form-control:focus,
.ed-form input:focus, .ed-form textarea:focus { border-bottom-color: var(--ink); box-shadow: none; }
.ed-form textarea { resize: vertical; min-height: 120px; }

/* ============================================================================
   COURSE DETAIL
   ==========================================================================*/
.ed-cd-layout { display: grid; grid-template-columns: 1fr 380px; gap: 3.5rem; align-items: start; }
@media (max-width: 940px){ .ed-cd-layout { grid-template-columns: 1fr; gap: 2.5rem; } }
.ed-cd-preview { overflow: hidden; margin-bottom: 2.5rem; background: #1f1913; }
.ed-cd-preview img { width: 100%; height: auto; display: block; }
.ed-cd-block { border-top: 1px solid var(--rule); padding-top: 2rem; margin-bottom: 3rem; }
.ed-cd-block > .ed-eyebrow { display: block; margin-bottom: 1rem; }
.ed-cd-block .ed-h2 { font-size: clamp(1.6rem,3vw,2.2rem); }
.ed-cd-desc { color: var(--ink); line-height: 1.9; font-size: 1.02rem; }

/* curriculum */
.ed-lesson { display: flex; align-items: baseline; gap: 1.2rem; padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.ed-lesson:first-of-type { border-top: 0; }
.ed-lesson .lnum { font-family: var(--ed-serif); font-size: 1.2rem; color: var(--gold); flex: none; min-width: 2rem; }
[dir="rtl"] .ed-lesson .lnum, .ed-lesson .lnum:lang(ar) { font-family: var(--ed-serif); }
.ed-lesson .lbody { flex: 1; min-width: 0; }
.ed-lesson .ltitle { font-size: 1.05rem; color: var(--ink); }
.ed-lesson .lmeta { font-size: .82rem; color: var(--ink-soft); margin-top: .25rem; }
.ed-lesson .lock { color: var(--ink-soft); opacity: .5; flex: none; }

/* instructor */
.ed-inst { display: flex; align-items: center; gap: 1.2rem; }
.ed-inst .avatar { width: 72px; height: 72px; background: var(--forest); color: var(--gold-b); display: grid; place-items: center; font-family: var(--ed-serif); font-size: 1.8rem; flex: none; }
.ed-inst h3 { font-family: var(--ed-serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); }
[dir="rtl"] .ed-inst h3, .ed-inst h3:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; }
.ed-inst p { margin-top: .3rem; font-size: .9rem; color: var(--ink-soft); }

/* sticky enroll box */
.ed-enroll { position: sticky; top: 90px; border: 1px solid var(--ink); }
.ed-enroll .etop { aspect-ratio: 3/2; overflow: hidden; background: #1f1913; }
.ed-enroll .etop img { width: 100%; height: 100%; object-fit: contain; }
.ed-enroll .ebody { padding: 2rem 1.8rem; }
.ed-price { font-family: var(--ed-serif); font-size: 2.6rem; line-height: 1; color: var(--ink); }
[dir="rtl"] .ed-price, .ed-price:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; }
.ed-price small { font-family: var(--ed-sans); font-size: .95rem; color: var(--ink-soft); }
.ed-price.free { color: var(--sage); }
.ed-enroll .ed-btn { display: flex; justify-content: center; width: 100%; margin-top: 1.4rem; }
.ed-includes { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.ed-includes li { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; font-size: .92rem; color: var(--ink); border-top: 1px solid var(--rule); }
.ed-includes li:first-child { border-top: 0; }
.ed-includes svg { color: var(--gold-d); flex: none; }
.ed-share { display: flex; align-items: center; gap: .7rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.ed-share span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.ed-share a { width: 36px; height: 36px; border: 1px solid var(--rule); color: var(--ink); display: grid; place-items: center; transition: all .18s ease; }
.ed-share a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ed-note { margin-top: .9rem; font-size: .85rem; color: var(--ink-soft); text-align: center; }
.ed-note a { color: var(--gold-d); font-weight: 600; text-decoration: none; }

/* ============================================================================
   FOOTER (editorial, white — matches Lovable Footer)
   ==========================================================================*/
.ed-footer { border-top: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.ed-footer .ft-in { max-width: 1240px; margin-inline: auto; padding: clamp(3.5rem,6vw,5rem) 24px; }
.ed-footer .ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; }
@media (max-width: 900px){ .ed-footer .ft-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 560px){ .ed-footer .ft-grid { grid-template-columns: 1fr; gap: 2.2rem; } }

/* brand lockup — logo beside the wordmark, mirroring the masthead */
.ed-footer .ft-brand { display: flex; align-items: center; gap: 14px; }
.ed-footer .ft-logo { flex: none; height: 58px; width: auto; }
.ed-footer .ft-brand-tx { min-width: 0; }
@media (max-width: 520px) { .ed-footer .ft-logo { height: 46px; } }

.ed-footer .ft-brand-ar { font-family: var(--ed-serif); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--forest); }
.ed-dark .ed-footer .ft-brand-ar { color: var(--ink); }
.ed-footer .ft-gold { font-style: normal; background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
[dir="rtl"] .ed-footer .ft-brand-ar, .ed-footer .ft-brand-ar:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; }
.ed-footer .ft-brand-en { margin-top: .5rem; font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); }
[dir="rtl"] .ed-footer .ft-brand-en, .ed-footer .ft-brand-en:lang(ar) { letter-spacing: .06em; }
.ed-footer .ft-about { margin-top: 1.2rem; max-width: 32ch; font-size: .9rem; line-height: 1.7; color: var(--ink-soft); }
.ed-footer .ft-contact { margin-top: 1.4rem; list-style: none; padding: 0; display: grid; gap: .7rem; }
.ed-footer .ft-contact li { display: flex; align-items: flex-start; gap: .6rem; font-size: .88rem; color: var(--ink); line-height: 1.5; }
.ed-footer .ft-contact svg { color: var(--gold); flex: none; margin-top: 2px; }
.ed-footer .ft-contact a { color: var(--ink); text-decoration: none; }
.ed-footer .ft-contact a:hover { color: var(--gold); }
/* The address is Latin-only and so has no strong character to set a base
   direction; the RTL paragraph level pushed each line's trailing comma to the
   opposite edge. The phone and WhatsApp rows above already carry dir="ltr" in
   the blade — this covers the address, which does not. */
[dir="rtl"] .ed-footer .ft-contact li span { unicode-bidi: plaintext; }

.ed-footer .ft-col h4 { font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1.2rem; }
[dir="rtl"] .ed-footer .ft-col h4, .ed-footer .ft-col h4:lang(ar) { letter-spacing: .1em; }
.ed-footer .ft-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ed-footer .ft-col a { font-size: .92rem; color: var(--ink); text-decoration: none; transition: color .18s ease; }
/* THUMB-SIZED FOOTER LINKS ON A PHONE.
   These are bare inline anchors with no padding, so the tappable box was the line box:
   18px tall in English, 27px in Arabic, on a 39.2px pitch with 21.2px of clear space.
   Making the anchor a 48px flex box grows the grid row with it, so the pitch becomes
   59.2px and adjacent boxes keep 11.2px of clear space — measured, no overlap, and
   scrollWidth stays 375.
   COST, so it is not a surprise: the mobile footer grows from 1284px to 1520px
   (+236px over 3 columns and 13 links). Longer scroll, nothing clipped.
   Colour is untouched here — .ed-footer .ft-col a is recoloured later in this file. */
@media (max-width: 575px) {
  .ed-footer .ft-col a { display: flex; align-items: center; min-height: 48px; }
}
.ed-footer .ft-col a:hover { color: var(--gold); }

.ed-footer .ft-social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.ed-footer .ft-social a { width: 40px; height: 40px; border: 1px solid var(--rule); color: var(--ink); display: grid; place-items: center; transition: all .18s ease; }
.ed-footer .ft-social a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.ed-footer .ft-bottom { margin-top: clamp(2.5rem,5vw,4rem); border-top: 1px solid var(--rule); padding-top: 2rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.ed-footer .ft-copy { font-size: .8rem; color: var(--ink-soft); }
.ed-footer .ft-copy a { color: var(--ink); text-decoration: none; }
.ed-footer .ft-copy a:hover { color: var(--gold); }
.ed-footer .ft-legal { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.ed-footer .ft-legal a { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.ed-footer .ft-legal a:hover { color: var(--gold); }
.ed-footer .ft-set { font-size: .8rem; font-style: italic; color: var(--ink-soft); }
[dir="rtl"] .ed-footer .ft-set, .ed-footer .ft-set:lang(ar) { font-style: normal; }
.ed-footer .ft-top { width: 40px; height: 40px; border: 1px solid var(--rule); display: grid; place-items: center; transition: all .18s ease; }
.ed-footer .ft-top a { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink); text-decoration: none; }
.ed-footer .ft-top:hover { background: var(--ink); border-color: var(--ink); }
.ed-footer .ft-top:hover a { color: var(--paper); }

/* ============================================================================
   SITE HEADER — editorial masthead (restyles the vendor header in place)
   Scoped under .ed-sitehead so vendor JS (sticky, zmm mobile clone) keeps working.
   ==========================================================================*/
.ed-sitehead { background: var(--forest); }

/* Topbar — thin forest strip */
.ed-sitehead .topbar,
.ed-sitehead .topbar.bg-theme { background: var(--forest) !important; border: 0 !important; }
.ed-sitehead .topbar .basic-container { padding-block: .55rem; }
.ed-sitehead .topbar .header-address,
.ed-sitehead .topbar .header-address a { color: #E7E1CE !important; font-size: 12px; letter-spacing: .03em; text-decoration: none; }
.ed-sitehead .topbar .header-address a:hover { color: var(--gold-b) !important; }
.ed-sitehead .topbar .social-icons a { color: #E7E1CE !important; transition: color .18s ease; }
.ed-sitehead .topbar .social-icons a:hover { color: var(--gold-b) !important; }

/* Nav bar — forest green with gold text (2a masthead) */
.ed-sitehead .sticky-outer.full-dark,
.ed-sitehead .sticky-outer,
.ed-sitehead .sticky-head,
.ed-sitehead .navbar { background: rgba(28,42,32,.96) !important; box-shadow: none !important; }
.ed-sitehead .sticky-outer { border-bottom: 1px solid var(--on-forest-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ed-sitehead .navbar-inner { min-height: 78px; }
.ed-sitehead .navbar { padding-block: .4rem; }

/* Logo + serif brand lockup (cream + gold-gradient word) */
.ed-brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.ed-brand img { height: 44px !important; width: auto !important; }
.ed-brand .bt-l1 { display: block; font-family: var(--ed-serif); font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--on-forest); }
[dir="rtl"] .ed-brand .bt-l1, .ed-brand .bt-l1:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; }
.ed-brand .bt-l1 em { font-style: normal; background: linear-gradient(100deg,#D3B871,#EBD8A4);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ed-brand .bt { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.ed-brand .bt-l2 { display: block; margin-top: 5px; font-size: 9.2px; font-weight: 700; line-height: 1.2; letter-spacing: .26em; text-transform: uppercase; color: rgba(216,193,130,.8); white-space: nowrap; }
[dir="rtl"] .ed-brand .bt-l2, .ed-brand .bt-l2:lang(ar) { letter-spacing: .1em; }
@media (max-width: 1150px){ .ed-brand .bt { display: none; } }
@media (max-width: 520px){ .ed-brand img { height: 42px !important; } }

/* Nav links — uppercase, muted gold → bright gold */
.ed-sitehead .navbar-main > li { margin-inline: .1rem; }
.ed-sitehead .navbar-main > li > a {
  font-family: var(--ed-sans); font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-forest-mut) !important; padding: .5rem .9rem !important; line-height: 1.1; transition: color .18s ease;
}
[dir="rtl"] .ed-sitehead .navbar-main > li > a, .ed-sitehead .navbar-main > li > a:lang(ar) { letter-spacing: .06em; }
.ed-sitehead .navbar-main > li > a:hover { color: var(--on-forest-gold) !important; }
.ed-sitehead .navbar-main > li.active > a { color: var(--on-forest-gold) !important; }
.ed-sitehead .navbar-main > li.active > a::after {
  content: ""; display: block; height: 2px; background: #D3B871; margin-top: 4px;
}

/* Right-side actions */
.ed-sitehead .ed-actions { display: flex; align-items: center; gap: 1.1rem; }
.ed-signin { font-family: var(--ed-sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-forest-mut); text-decoration: none; background: none; border: 0; cursor: pointer; transition: color .18s ease; }
.ed-signin:hover { color: var(--on-forest-gold); }
.ed-enrol { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--ed-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #241A05; background: linear-gradient(100deg,#C2A052,#B08C3F); border: 0;
  padding: .55rem 1.4rem; border-radius: 4px; text-decoration: none; box-shadow: 0 8px 20px rgba(166,125,46,.25); transition: filter .2s ease; }
.ed-enrol:hover { filter: brightness(1.07); color: #241A05; }
.ed-lang { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--ed-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-forest); background: transparent; border: 1px solid rgba(216,193,130,.4);
  padding: .45rem .9rem; border-radius: 4px; cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.ed-lang:hover { border-color: var(--on-forest-gold); color: var(--on-forest-gold); }
.ed-lang svg { width: 15px; height: 15px; }

/* Mobile header (vendor .mobile-header) */
.ed-sitehead .mobile-header { background: var(--forest) !important; border-bottom: 1px solid var(--on-forest-line); }
.ed-sitehead .mobile-header .ti-menu { color: var(--on-forest); }
.ed-sitehead .mobile-header .ed-brand img { height: 40px !important; }

/* TAP TARGET ON THE ONLY NAVIGATION CONTROL A PHONE HAS.
   a.zmm-toggle is an inline anchor wrapping an icon font, so its box was whatever the line
   box gave it: 20x26 in Arabic and 20x17 in English — 340 square px against the 44x44
   minimum — on the single control that reaches Programs, Categories, Founder and Contact
   from a phone.
   vertical-align:middle is REQUIRED: an inline-flex box aligns on its baseline, and
   without it the enlarged button rendered at y -9, above the top of the 60px header.
   Measured after at 375px: 44x44, header height unchanged at 60px, y 9.2 to 53.2,
   x 15 to 59 in English and x 316 to 360 in Arabic, elementFromPoint returns its own
   icon, scrollWidth stays 375.
   Scoped to 991px because this theme shows .mobile-header at every width — the desktop
   header is deliberately left alone. */
@media (max-width: 991px) {
  .ed-sitehead .mobile-header .zmm-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; vertical-align: middle;
  }
}

/* ============================================================================
   HOME — image-free marketing hero (.ed-hero2)
   ==========================================================================*/
.ed-hero2 { text-align: center; padding-block: clamp(60px,9vw,110px); position: relative; overflow: hidden; }
.ed-hero2 .kick { display: inline-flex; justify-content: center; margin-inline: auto; }
.ed-hero2 .ed-h1 { margin: 1.6rem auto 0; max-width: 17ch; }
.ed-hero2 .ed-lead { margin: 1.8rem auto 0; text-align: center; }
.ed-hero2 .ed-search { margin: 2.2rem auto 0; }
.ed-hero2 .cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 2rem; }
.ed-hero2 .trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 2rem; margin-top: 2.6rem;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
[dir="rtl"] .ed-hero2 .trust-strip { letter-spacing: .04em; }
.ed-hero2 .trust-strip span { display: inline-flex; align-items: center; gap: .5rem; }
.ed-hero2 .trust-strip svg { color: var(--gold); }
.ed-statband { border-top: 1px solid var(--rule); margin-top: clamp(3rem,6vw,4.6rem); padding-top: clamp(2.4rem,4vw,3.4rem);
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; text-align: center; }
@media (max-width: 620px){ .ed-statband { grid-template-columns: 1fr; gap: 2rem; } }
.ed-statband b { display: block; font-family: var(--ed-serif); font-size: clamp(2.2rem,4vw,3rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
[dir="rtl"] .ed-statband b, .ed-statband b:lang(ar) { font-family: 'Cairo', sans-serif; font-weight: 800; }
.ed-statband span { display: block; margin-top: .6rem; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
[dir="rtl"] .ed-statband span { letter-spacing: .04em; }

/* ============================================================================
   DARK MODE  — token flip on .ed-dark
   The header & footer carry class "ed" too, so this covers them as well.
   ==========================================================================*/
:root { color-scheme: light; }
:root.ed-dark { color-scheme: dark; }

.ed-dark .ed {
  --paper:  #0E140F;
  --panel:  #161F19;
  --ink:    #EDF2EA;
  --ink-soft:#AEBBAC;
  --gold:   #D2B36C;
  --gold-b: #E4CB90;
  --gold-d: #D2B36C;
  --rule:   #2C3830;
  --forest: #1A281F;
  --sage:   #6B8A72;
}
/* smooth theme cross-fade */
.ed, .ed *, .ed-footer, .ed-footer * { transition: background-color .35s ease, border-color .35s ease, color .25s ease; }
.ed img, .ed svg, .ed .reveal, .ed [class*="ed-h"] { transition: none; }

/* masthead stays forest in dark mode too — just deepen it slightly */
.ed-dark .ed-sitehead,
.ed-dark .ed-sitehead .mobile-header { background: #14201A !important; }
.ed-dark .ed-sitehead .sticky-outer.full-dark,
.ed-dark .ed-sitehead .sticky-outer,
.ed-dark .ed-sitehead .sticky-head,
.ed-dark .ed-sitehead .navbar { background: rgba(20,32,26,.96) !important; }
/* dark: gold gradients swap to the brighter endpoints */
.ed-dark .ed {
  --gold-grad:        linear-gradient(100deg,#D2B36C,#E4CB90);
  --gold-grad-bright: linear-gradient(100deg,#E4CB90,#D2B36C);
  --pill-bg: rgba(210,179,108,.12); --pill-line: rgba(210,179,108,.3);
  --label: #AEBBAC; --gold-deep: #D2B36C; --gold-text: #D2B36C;
}
.ed-dark .ed-course .badge { color: var(--ink); }
.ed-dark .ed-figcap { background: rgba(24,35,28,.92); }
.ed-dark .ed-search button { color: #0F1611; }
.ed-dark .ed-hero2::before,
.ed-dark .ed-hero2::after { opacity: .5; }
/* dark: mobile slide-in menu overlay */
.ed-dark .zmm-wrapper .zmm-inner,
.ed-dark .zmm-wrapper { background: #0F1611 !important; }
.ed-dark .zmm-main-nav a { color: #EAF0E7 !important; }

/* TAP TARGET ON THE MOBILE MENU CLOSE.
   a.zmm-close measured 32x32. Its X comes from the global .close:before/:after in
   style.css, positioned left:15px top:9px for a 32px box, so the box cannot grow without
   re-centring the bars: 21px = (44-2)/2, 15px = (44-13)/2.
   Measured after at 375px Arabic: 44x44 at x 317 to 361, y 14 to 58 — inside the viewport,
   X still optically centred, elementFromPoint at its centre returns the button itself.
   Menu link colours are already correct in both themes and are NOT touched here
   (dark #EAF0E7 on #0F1611, light #222222 on #FFFFFF). */
@media (max-width: 991px) {
  .zmm-wrapper .zmm-close { width: 44px; height: 44px; }
  .zmm-wrapper .zmm-close:before, .zmm-wrapper .zmm-close:after { left: 21px; top: 15px; }
}

/* ============================================================================
   STICKY HEADER  — nav sticks; topbar scrolls away; logo stays left
   ==========================================================================*/
.ed-sitehead .sticky-outer { position: sticky; top: 0; z-index: 1000; transition: box-shadow .3s ease, background .3s ease; }
.ed-sitehead .navbar-inner { transition: min-height .3s ease; }
.ed-sitehead .ed-brand img { transition: height .3s ease; }
.ed-sitehead.scrolled .sticky-outer { box-shadow: 0 8px 30px rgba(22,38,28,.10); }
.ed-dark .ed-sitehead.scrolled .sticky-outer { box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.ed-sitehead.scrolled .navbar-inner { min-height: 66px; }
.ed-sitehead.scrolled .ed-brand img { height: 40px !important; }
.ed-sitehead .mobile-header { position: sticky; top: 0; z-index: 1000; }

/* theme toggle button (header — sits on forest) */
.ed-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid rgba(216,193,130,.4); background: transparent; color: var(--on-forest); border-radius: 4px; cursor: pointer;
  transition: color .18s ease, border-color .18s ease, transform .3s ease; }
.ed-theme-toggle:hover { color: var(--on-forest-gold); border-color: var(--on-forest-gold); }
.ed-theme-toggle .i-moon { display: none; }
.ed-theme-toggle .i-sun { display: block; }
.ed-dark .ed-theme-toggle .i-sun { display: none; }
.ed-dark .ed-theme-toggle .i-moon { display: block; }
.ed-theme-toggle:active { transform: rotate(35deg); }

/* ============================================================================
   MOTION — ripple, richer hovers, breathing, page-load, reveal variants
   ==========================================================================*/
.ed-btn, .ea-submit, .ed-enrol, .ed-chip { position: relative; overflow: hidden; }
.ed-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .28; pointer-events: none; animation: edRipple .6s ease-out; }
@keyframes edRipple { to { transform: scale(2.4); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* button lift + sheen */
  .ed-btn { transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
  .ed-btn-dark:hover, .ed-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22,38,28,.18); }
  .ed-dark .ed-btn-dark:hover, .ed-dark .ed-btn-gold:hover { box-shadow: 0 10px 26px rgba(0,0,0,.5); }

  /* card hover: lift + gold hairline */
  .ed-course, .ed-cat-card { transition: transform .28s cubic-bezier(.2,.7,.2,1); }
  .ed-course:hover, .ed-cat-card:hover { transform: translateY(-6px); }

  /* reveal variants */
  .ed .reveal.in { animation: edReveal .7s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes edReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  .ed [data-reveal="left"].in { animation: edRevealL .7s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes edRevealL { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
  .ed [data-reveal="scale"].in { animation: edRevealS .7s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes edRevealS { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
  /* staggered children */
  .ed [data-reveal-stagger].in > * { animation: edReveal .6s cubic-bezier(.2,.7,.2,1) both; }
  .ed [data-reveal-stagger].in > *:nth-child(1){animation-delay:.05s}
  .ed [data-reveal-stagger].in > *:nth-child(2){animation-delay:.12s}
  .ed [data-reveal-stagger].in > *:nth-child(3){animation-delay:.19s}
  .ed [data-reveal-stagger].in > *:nth-child(4){animation-delay:.26s}
  .ed [data-reveal-stagger].in > *:nth-child(5){animation-delay:.33s}
  .ed [data-reveal-stagger].in > *:nth-child(6){animation-delay:.40s}

  /* ambient "breathing" for financial motifs */
  .ed-float { animation: edFloat 7s ease-in-out infinite; }
  .ed-float.d2 { animation-duration: 9s; animation-delay: -2s; }
  .ed-float.d3 { animation-duration: 11s; animation-delay: -4s; }
  @keyframes edFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }
  .ed-breathe { animation: edBreathe 8s ease-in-out infinite; }
  @keyframes edBreathe { 0%,100% { opacity: .5; transform: scale(1) } 50% { opacity: .85; transform: scale(1.04) } }

  /* draw-in line chart */
  .ed-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
  .ed-hero2 .ed-draw, .ea-brand .ed-draw, .ed-pagehero .ed-draw { animation: edDraw 2.4s ease forwards .3s; }
  @keyframes edDraw { to { stroke-dashoffset: 0; } }

  /* candlestick pulse */
  .ed-candle { transform-origin: bottom; animation: edCandle 3.2s ease-in-out infinite; }
  .ed-candle.c2 { animation-delay: .4s } .ed-candle.c3 { animation-delay: .8s } .ed-candle.c4 { animation-delay: 1.2s } .ed-candle.c5 { animation-delay: 1.6s }
  @keyframes edCandle { 0%,100% { transform: scaleY(.82) } 50% { transform: scaleY(1) } }
}

/* ============================================================================
   FINANCIAL VISUALS — decorative layers (pointer-events off)
   ==========================================================================*/
.ed-hero2 { isolation: isolate; }
.ed-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ed-hero2 > .ed-wrap { position: relative; z-index: 1; }
.ed-fx .grid-lines { position: absolute; inset: -2px; background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 46px 46px; opacity: .35; -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 70%); }
.ed-fx .chart { position: absolute; inset-inline-end: -40px; top: 8%; width: 46%; max-width: 620px; opacity: .5; color: var(--gold); }
.ed-fx .coin { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-b), var(--gold-d)); box-shadow: 0 8px 20px rgba(166,125,46,.28); opacity: .5; }
.ed-fx .c1 { width: 34px; height: 34px; inset-inline-start: 8%; top: 22%; }
.ed-fx .c2 { width: 20px; height: 20px; inset-inline-start: 16%; top: 62%; }
.ed-fx .c3 { width: 46px; height: 46px; inset-inline-end: 12%; bottom: 14%; }
@media (max-width: 760px){ .ed-fx .chart { display: none; } }

/* small finance glyph before section-head numbers */
.ed-head .num { position: relative; }

/* ============================================================================
   CATEGORY CARDS  — matches the courses card language, enriched
   ==========================================================================*/
.ed-cat-card { display: block; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; padding: 2.2rem 2rem; position: relative; overflow: hidden; }
.ed-cat-card::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 3px; height: 0; background: var(--gold); transition: height .3s ease; }
.ed-cat-card:hover { border-color: var(--gold); box-shadow: 0 18px 40px rgba(22,38,28,.10); }
.ed-dark .ed-cat-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.ed-cat-card:hover::after { height: 100%; }
.ed-cat-card .cc-ico { width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 2px; color: var(--gold); margin-bottom: 1.4rem; transition: background .25s ease, color .25s ease; }
.ed-cat-card:hover .cc-ico { background: var(--forest); color: var(--gold-b); border-color: var(--forest); }
.ed-cat-card .cc-num { position: absolute; inset-inline-end: 1.6rem; top: 1.4rem; font-family: var(--ed-serif); font-size: 2.2rem; line-height: 1; color: var(--rule); }
[dir="rtl"] .ed-cat-card .cc-num, .ed-cat-card .cc-num:lang(ar) { font-family: var(--ed-serif); }
.ed-cat-card h3 { font-family: var(--ed-serif); font-weight: 400; font-size: 1.7rem; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
[dir="rtl"] .ed-cat-card h3, .ed-cat-card h3:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; }
.ed-cat-card p { margin-top: .7rem; font-size: .92rem; line-height: 1.6; color: var(--ink-soft); }
.ed-cat-card .cc-link { margin-top: 1.4rem; display: inline-flex; align-items: center; gap: .4rem; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-d); }
[dir="rtl"] .ed-cat-card .cc-link { letter-spacing: .06em; }
.ed-cat-card:hover .cc-link { gap: .7rem; }

/* ============================================================================
   MORE MOTION — page-hero financial motif, button shine, richer cards
   ==========================================================================*/
/* every forest page-hero (courses / course / contact / categories) gets a
   subtle financial grid + a breathing gold glow */
.ed-pagehero { position: relative; overflow: hidden; }
.ed-pagehero .in { position: relative; z-index: 1; }
.ed-pagehero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(203,170,99,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(203,170,99,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(130% 110% at 82% 0%, #000 0%, transparent 68%);
  mask-image: radial-gradient(130% 110% at 82% 0%, #000 0%, transparent 68%);
}
.ed-pagehero::after {
  content: ""; position: absolute; inset-inline-end: -8%; top: -40%; width: 58%; height: 180%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 50%, rgba(166,125,46,.18), transparent 60%);
}
@media (prefers-reduced-motion: no-preference) {
  .ed-pagehero::after { animation: edBreathe 9s ease-in-out infinite; }
}

/* button sweep shine */
.ed-btn::after {
  content: ""; position: absolute; top: 0; inset-inline-start: -130%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg); transition: inset-inline-start .55s ease; pointer-events: none;
}
.ed-btn:hover::after { inset-inline-start: 150%; }

/* course card: gold hairline reveal on hover (matches category cards) */
.ed-course .thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--gold); transition: box-shadow .3s ease; pointer-events: none; }
.ed-course:hover .thumb::after { box-shadow: inset 0 0 0 2px var(--gold); }
.ed-course .price { transition: color .2s ease; }
.ed-course:hover .price { color: var(--gold-d); }

/* section-head number: subtle draw-up on reveal */
@media (prefers-reduced-motion: no-preference) {
  .ed .reveal.in .num, .ed-head.reveal.in .num { animation: edNumIn .7s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes edNumIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* method cards: lift + gold top rule grow */
.ed-method article { position: relative; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.ed-method article::before { content: ""; position: absolute; inset-inline-start: 0; top: -1px; height: 2px; width: 0; background: var(--gold); transition: width .35s ease; }
.ed-method article:hover { transform: translateY(-4px); }
.ed-method article:hover::before { width: 46px; }

/* =========================================================================
   RICH LAYERS — layered color surfaces + gold typography for the public site
   (matches the student/admin treatment so the whole platform is symmetric).
   ========================================================================= */

/* Layered parchment page background + faint gold ledger grid */
.ed {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(203,170,99,.09) 0%, transparent 50%),
        radial-gradient(110% 90% at 0% 100%, rgba(74,104,82,.07) 0%, transparent 55%),
        linear-gradient(180deg, #FDFCF8 0%, #F7F4EB 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
}
.ed-dark .ed {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(210,179,108,.08) 0%, transparent 50%),
        radial-gradient(110% 90% at 0% 100%, rgba(74,104,82,.12) 0%, transparent 55%),
        linear-gradient(180deg, #101711 0%, #0C120D 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
}

/* Emphasis words in the 2a display-gold gradient (static — never animated) */
.ed-em, .ed .ed-eyebrow.gold {
    background: var(--gold-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* Cards/panels pick up the layered tint instead of flat white */
.ed-cat, .ed-cc, .ed-course, .ed-stat {
    background:
        radial-gradient(140% 120% at 100% 0%, rgba(203,170,99,.09) 0%, transparent 45%),
        linear-gradient(180deg, #FFFFFF 0%, #FAF7EF 100%);
}
.ed-dark .ed-cat, .ed-dark .ed-cc, .ed-dark .ed-course, .ed-dark .ed-stat {
    background:
        radial-gradient(140% 120% at 100% 0%, rgba(210,179,108,.10) 0%, transparent 45%),
        linear-gradient(180deg, #18211A 0%, #131B15 100%);
}

/* Vendor sticky-header fix: custom.js reserves .sticky-outer space from a
   mis-measured mobile-menu clone (≈370px of blank page under the masthead).
   The editorial masthead handles its own sticky state, so size the
   placeholder to its real content only. */
.ed-sitehead .sticky-outer { height: auto !important; min-height: 0 !important; }

/* =========================================================================
   THEME 2A — "Gold on white" (owner-approved handoff, design_handoff_theme_2a)
   Hero composition, ticker marquee, stat cards, card language, gold CTA panel.
   ========================================================================= */

/* ---- hero composition ---- */
.ed-hero2 { padding-block: clamp(64px,9vw,104px) clamp(56px,8vw,84px); }
.ed-fx .grid-lines { opacity: .5;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%); }
.ed-fx .glow { position: absolute; left: 50%; top: -30%; width: 70%; height: 120%; transform: translateX(-50%);
  background: radial-gradient(circle at 50% 30%, rgba(185,149,72,.13), transparent 60%); }
.ed-fx .chart { inset-inline-end: auto; left: 50%; top: auto; bottom: -6%; transform: translateX(-50%);
  width: 88%; max-width: 1400px; opacity: .55; color: #C9A758;
  filter: drop-shadow(0 6px 18px rgba(185,149,72,.35)); }
@media (max-width: 760px){ .ed-fx .chart { display: block; width: 130%; } }
.ed-fx .orbit { position: absolute; inset-inline-end: 6%; top: 12%; width: 74px; height: 74px; opacity: .5; }
.ed-fx .c4 { width: 16px; height: 16px; inset-inline-end: 20%; bottom: 24%; }
.ed-hero2 .cta-row { margin-top: 2.4rem; }

/* ---- hero stat cards (white, gold serif numerals) ---- */
.ed-statcards { margin: clamp(2.8rem,5vw,3.8rem) auto 0; max-width: 900px;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media (max-width: 860px){ .ed-statcards { grid-template-columns: repeat(2,1fr); } }
.ed-statcard { background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 22px 14px;
  box-shadow: 0 4px 14px rgba(22,38,28,.05); text-align: center; }
.ed-statcard b { display: block; font-family: var(--ed-serif); font-weight: 400; font-size: 34px; line-height: 1; color: var(--gold-d); font-variant-numeric: tabular-nums; }
[dir="rtl"] .ed-statcard b, .ed-statcard b:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; font-size: 30px; }
.ed-statcard span { display: block; margin-top: 9px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--label); }
[dir="rtl"] .ed-statcard span, .ed-statcard span:lang(ar) { letter-spacing: .05em; }
.ed-dark .ed-statcard { background: linear-gradient(180deg,#18211A,#131B15); border-color: var(--rule); }

/* ---- ticker marquee ---- */
.ed-ticker { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--panel);
  overflow: hidden; padding: 13px 0; }
.ed-ticker .track { display: flex; gap: 44px; width: max-content; }
.ed-ticker .set { display: flex; gap: 44px; align-items: center; font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
[dir="rtl"] .ed-ticker .set { letter-spacing: .06em; }
.ed-ticker .set span { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); }
.ed-ticker .set span:nth-child(odd) { color: var(--gold-text); }
.ed-ticker .set i { width: 6px; height: 6px; border-radius: 50%; background: #C9A758; flex: none; }

/* ---- category cards (white, icon square, ghost numeral) ---- */
.ed-catgrid { background: transparent; border: 0; gap: 16px; }
.ed-cat { display: block; position: relative; background:
    radial-gradient(140% 120% at 100% 0%, rgba(203,170,99,.09) 0%, transparent 45%),
    linear-gradient(180deg, #FFFFFF 0%, #FAF7EF 100%);
  border: 1px solid var(--rule); border-radius: 8px; padding: 30px 28px;
  box-shadow: 0 4px 14px rgba(22,38,28,.04); }
.ed-cat:hover { background:
    radial-gradient(140% 120% at 100% 0%, rgba(203,170,99,.12) 0%, transparent 45%),
    linear-gradient(180deg, #FFFFFF 0%, #FAF7EF 100%); }
.ed-cat .cat-top { display: flex; justify-content: space-between; align-items: center; }
.ed-cat .cat-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 6px;
  background: var(--pill-bg); border: 1px solid var(--pill-line); color: var(--gold-deep);
  font-family: var(--ed-serif); font-size: 22px; }
[dir="rtl"] .ed-cat .cat-ico, .ed-cat .cat-ico:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; }
.ed-cat .cat-ghost { font-family: var(--ed-serif); font-size: 32px; color: #E4DCC4; }
.ed-cat .ed-h3 { margin-top: 20px; font-size: 27px; }
.ed-cat .sub { margin-top: 8px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.ed-dark .ed-cat .cat-ghost { color: #3A4438; }

/* ---- course cards (framed, 16:9 cover, pill badge, gold price) ---- */
.ed-course { background:
    radial-gradient(140% 120% at 100% 0%, rgba(203,170,99,.09) 0%, transparent 45%),
    linear-gradient(180deg, #FFFFFF 0%, #FAF7EF 100%);
  border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(22,38,28,.04); }
.ed-course .thumb { aspect-ratio: 16/9; background: var(--forest); }
.ed-course .thumb img { object-fit: cover; }
.ed-course .thumb::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(22,38,28,0) 55%, rgba(22,38,28,.5)); }
.ed-course .badge { z-index: 2; background: rgba(253,252,248,.94); color: var(--ink);
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em; padding: 5px 11px; border-radius: 100px; }
[dir="rtl"] .ed-course .badge { letter-spacing: .06em; }
.ed-course .cbody { display: block; padding: 20px 22px 22px; }
.ed-course .row { margin-top: 0; }
.ed-course .ed-h3 { font-size: 23px; }
.ed-course .foot { border-top: 1px solid #EFEADB; }
.ed-course .price { font-size: 20px; color: var(--gold-deep); }
.ed-course .price .was { font-family: var(--ed-sans); font-size: 14px; color: #9AA492; text-decoration: line-through; margin-inline-end: 6px; }
.ed-course:hover .price { color: var(--gold-d); }
.ed-dark .ed-course .foot { border-top-color: var(--rule); }
.ed-dark .ed-course .badge { background: rgba(20,28,21,.9); color: #EDF2EA; }

/* ---- gold CTA panel (replaces the flat forest band) ---- */
.ed-ctagold { position: relative; overflow: hidden; background: var(--gold-grad-cta);
  border-radius: 10px; padding: clamp(36px,5vw,56px) clamp(28px,4.5vw,52px); color: #1B1503; }
.ed-ctagold .bubble { position: absolute; border-radius: 50%; background: rgba(255,255,255,.18); pointer-events: none; }
.ed-ctagold .b1 { left: -30px; top: -40px; width: 170px; height: 170px; }
.ed-ctagold .b2 { right: 14%; bottom: -56px; width: 130px; height: 130px; background: rgba(255,255,255,.12); }
.ed-ctagold .ed-cta { position: relative; }
.ed-ctagold .ed-h2 { color: #241A05; }
.ed-ctagold p { color: rgba(36,26,5,.75); font-weight: 500; }

/* ---- filter chips → pills ---- */
.ed-chip { border-radius: 100px; }

/* ---- sticky scrolled state (forest) ---- */
.ed-sitehead.scrolled .navbar-inner { min-height: 64px; }
.ed-sitehead.scrolled .ed-brand img { height: 38px !important; }

/* ---- 2A motion (all gated on reduced-motion preference) ---- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes edGlowPulse { 0%,100% { opacity: .35 } 50% { opacity: .7 } }
  @keyframes edTickerL { from { transform: translateX(0) } to { transform: translateX(-50%) } }
  @keyframes edTickerR { from { transform: translateX(0) } to { transform: translateX(50%) } }
  @keyframes edPing { 0% { transform: scale(1); opacity: .7 } 80%,100% { transform: scale(1.6); opacity: 0 } }
  @keyframes edSheenLoop { 0% { transform: translateX(-160%) skewX(-20deg) } 55%,100% { transform: translateX(320%) skewX(-20deg) } }
  @keyframes edSpin { to { transform: rotate(360deg) } }

  .ed-fx .glow { animation: edGlowPulse 9s ease-in-out infinite; }
  .ed-fx .chart .dot { animation: edGlowPulse 3s ease-in-out infinite; }
  .ed-fx .chart .dot.d2 { animation-delay: 1s; }
  .ed-fx .chart .dot.d3 { animation-delay: 2s; }
  .ed-fx .orbit { animation: edSpin 26s linear infinite; }
  .ed-pill .dot { animation: edGlowPulse 2.4s ease-in-out infinite; }

  .ed-ticker .track { animation: edTickerL 26s linear infinite; }
  [dir="rtl"] .ed-ticker .track { animation-name: edTickerR; }

  .ed-ping::before { animation: edPing 2.6s ease-out infinite; }

  /* looping sheen sweep on gold buttons (replaces hover-only sweep there) */
  .ed-btn-gold::after, .ed-enrol::after {
    content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 45%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
    transform: translateX(-160%) skewX(-20deg);
    animation: edSheenLoop 3.2s ease-in-out infinite; pointer-events: none; transition: none;
  }

  .ed-course:hover, .ed-cat:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(22,38,28,.12); }
  .ed-course, .ed-cat { transition: transform .25s ease, box-shadow .25s ease; }
  .ed-ctagold .bubble { animation: edFloat 9s ease-in-out infinite; }
  .ed-ctagold .b2 { animation-duration: 11s; animation-delay: -4s; }
}

/* =========================================================================
   THEME 2A — COURSE LANDING  (single-course page · owner design Course-*.dc)
   Data-driven landing: light hero + figure card, curriculum cards, forest
   stats band, audience/outcomes/instructor/FAQ, forest sticky enrol box.
   Reuses the 2a token set — only page-specific composition lives here.
   ========================================================================= */

/* ---- hero ---- */
.ed-clhero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(48px,7vw,84px) clamp(40px,6vw,60px); }
.ed-clhero > .ed-wrap { position: relative; z-index: 1; }
.ed-clhero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem,4vw,3rem); align-items: center; }
@media (max-width: 900px){ .ed-clhero-grid { grid-template-columns: 1fr; } }
.ed-clback { display: inline-flex; align-items: center; gap: .5rem; font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-text); text-decoration: none; transition: color .18s ease; }
.ed-clback:hover { color: var(--ink); }
[dir="rtl"] .ed-clback { letter-spacing: .06em; }
.ed-clback .barr { display: inline-block; }
[dir="rtl"] .ed-clback .barr { transform: scaleX(-1); }
.ed-clcat { display: inline-block; margin-top: 1.2rem; background: var(--ink); color: var(--paper); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; padding: 7px 12px; border-radius: 4px; }
[dir="rtl"] .ed-clcat { letter-spacing: .06em; }
.ed-clh1 { margin-top: 1.1rem; font-family: var(--ed-serif); font-weight: 400; font-size: clamp(2.3rem,5vw,3.7rem);
  line-height: 1.07; letter-spacing: -.02em; color: var(--ink); }
[dir="rtl"] .ed-clh1, .ed-clh1:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; line-height: 1.4; letter-spacing: 0;
  font-size: clamp(1.9rem,4.2vw,2.9rem); }
.ed-cllead { margin-top: 1.1rem; max-width: 54ch; font-size: .97rem; line-height: 1.8; color: var(--ink-soft); }
.ed-clpills { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 8px; }
.ed-checkpill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--pill-line); background: var(--pill-bg);
  border-radius: 100px; padding: 6px 13px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
[dir="rtl"] .ed-checkpill { letter-spacing: .04em; }
.ed-checkpill .tick { color: var(--gold-text); }
.ed-clcta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.ed-clprice { font-family: var(--ed-serif); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--gold-deep); }
[dir="rtl"] .ed-clprice, .ed-clprice:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; font-size: 1.6rem; }
.ed-clprice .was { font-family: var(--ed-sans); font-size: .95rem; font-weight: 500; color: #9AA492; text-decoration: line-through; margin-inline-end: 8px; }
.ed-clprice small { font-family: var(--ed-sans); font-size: .85rem; font-weight: 500; color: var(--ink-soft); }
.ed-btn .arr { display: inline-block; }
[dir="rtl"] .ed-btn .arr { transform: scaleX(-1); }
/* hero figure — thumbnail on a forest panel with gold hairline progress */
.ed-clfig { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--pill-line);
  background: radial-gradient(80% 90% at 70% 20%, rgba(203,170,99,.28), transparent 60%), linear-gradient(150deg,#1C2A20,#16241B);
  box-shadow: 0 26px 60px rgba(16,26,18,.28); }
/* cover, not contain — see the note on .ed-pc .media img. The artwork now fills the panel
   instead of floating inside it with empty bands top and bottom. */
.ed-clfig img { display: block; width: 100%; height: clamp(220px,30vw,330px); object-fit: cover; transition: transform .6s ease; }
.ed-clfig:hover img { transform: scale(1.04); }
.ed-clfig .line { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(216,193,130,.15); }
.ed-clfig .line i { position: absolute; inset: 0; background: var(--gold-grad); transform-origin: left; }
[dir="rtl"] .ed-clfig .line i { transform-origin: right; }

/* ---- centered section head ---- */
.ed-clhead { text-align: center; margin-bottom: clamp(1.8rem,3vw,2.4rem); }
.ed-clhead .ed-h2 { margin-top: .8rem; font-size: clamp(1.9rem,3.6vw,2.5rem); }

/* ---- main grid: about + curriculum | sticky aside ---- */
.ed-cl-main { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.8rem,3vw,2.6rem); align-items: start; }
@media (max-width: 940px){ .ed-cl-main { grid-template-columns: 1fr; } }
.ed-clblock { margin-bottom: clamp(2rem,4vw,3rem); }
.ed-clblock:last-child { margin-bottom: 0; }
.ed-clblock > .ed-eyebrow { display: block; margin-bottom: .8rem; }
.ed-clblock .ed-h2 { font-size: clamp(1.6rem,3vw,2.2rem); }
/* rich-HTML course description (Quill output) */
.ed-cldesc { margin-top: 1.2rem; color: var(--ink); line-height: 1.9; font-size: 1rem; }
.ed-cldesc p { margin: 0 0 1em; }
.ed-cldesc p:last-child { margin-bottom: 0; }
.ed-cldesc ul, .ed-cldesc ol { margin: 0 0 1em; padding-inline-start: 1.3em; }
.ed-cldesc li { margin-bottom: .35em; }
.ed-cldesc :is(h1,h2,h3,h4) { font-family: var(--ed-serif); font-weight: 400; font-size: 1.35rem; margin: 1.2em 0 .5em; color: var(--ink); }
[dir="rtl"] .ed-cldesc :is(h1,h2,h3,h4) { font-family: 'Cairo',sans-serif; font-weight: 800; }
.ed-cldesc a { color: var(--gold-text); }
.ed-cldesc img { max-width: 100%; height: auto; }

/* ---- curriculum cards ---- */
.ed-currlist { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 12px; }
.ed-currcard { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px;
  background: radial-gradient(140% 120% at 100% 0%, rgba(203,170,99,.09) 0%, transparent 45%), linear-gradient(180deg,#FFFFFF 0%,#FAF7EF 100%);
  transition: transform .3s ease, border-color .3s ease; }
.ed-currcard:hover { transform: translateX(8px); border-color: var(--gold); }
[dir="rtl"] .ed-currcard:hover { transform: translateX(-8px); }
.ed-dark .ed-currcard { background:
  radial-gradient(140% 120% at 100% 0%, rgba(210,179,108,.10) 0%, transparent 45%), linear-gradient(180deg,#18211A 0%,#131B15 100%); }
.ed-currcard .cnum { flex: none; min-width: 2.2rem; font-family: var(--ed-serif); font-size: 1.7rem; line-height: 1.1;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
[dir="rtl"] .ed-currcard .cnum, .ed-currcard .cnum:lang(ar) { font-family: var(--ed-serif); }
.ed-currcard .cbody { flex: 1; min-width: 0; }
.ed-currcard .ctitle { display: block; font-family: var(--ed-serif); font-weight: 400; font-size: 1.15rem; color: var(--ink); }
[dir="rtl"] .ed-currcard .ctitle, .ed-currcard .ctitle:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 700; font-size: 1.02rem; }
.ed-currcard .cmeta { display: block; margin-top: 4px; font-size: .8rem; color: var(--gold-text); }
.ed-currcard .cflag { flex: none; align-self: center; }
.ed-currcard .cflag .lock { display: inline-flex; color: var(--ink-soft); opacity: .5; }
.ed-tag-preview { display: inline-block; border: 1px solid var(--pill-line); background: var(--pill-bg); color: var(--gold-text);
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: 100px; padding: 4px 10px; }
[dir="rtl"] .ed-tag-preview { letter-spacing: .04em; }

/* ---- sticky aside: forest enrol card + ask card ---- */
.ed-claside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 940px){ .ed-claside { position: static; } }
.ed-enroll--forest { position: static; top: auto; border: 1px solid var(--on-forest-line); border-radius: 16px; overflow: hidden;
  background: radial-gradient(70% 120% at 85% 10%, rgba(203,170,99,.22), transparent 60%), linear-gradient(135deg,#16241B,#22352A);
  color: #F3EFE3; }
.ed-enroll--forest .etop { background: rgba(0,0,0,.25); border-bottom: 1px solid var(--on-forest-line); }
.ed-enroll--forest .ed-price { color: #F5F2E8; }
.ed-enroll--forest .ed-price small { color: var(--on-forest-mut); }
.ed-enroll--forest .ed-price .was { font-family: var(--ed-sans); font-size: 1rem; font-weight: 500; color: rgba(243,239,227,.5);
  text-decoration: line-through; margin-inline-end: 8px; }
.ed-enroll--forest .ed-price.free { color: #A9D3B1; }
.ed-enroll--forest .ed-includes li { color: rgba(243,239,227,.88); border-top-color: var(--on-forest-line); }
.ed-enroll--forest .ed-includes svg { color: var(--on-forest-gold); }
.ed-enroll--forest .ed-share { border-top-color: var(--on-forest-line); }
.ed-enroll--forest .ed-share span { color: var(--on-forest-mut); }
.ed-enroll--forest .ed-share a { border-color: var(--on-forest-line); color: var(--on-forest); }
.ed-enroll--forest .ed-share a:hover { background: var(--on-forest-gold); color: #241A05; border-color: var(--on-forest-gold); }
.ed-enroll--forest .ed-note { color: var(--on-forest-mut); }
.ed-enroll--forest .ed-note a { color: var(--on-forest-gold); }
.ed-enroll--forest .ed-btn-dark { background: rgba(255,255,255,.08); color: #F3EFE3; border: 1px solid var(--on-forest-line); }
.ed-fchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.4rem; }
.ed-fchip { border: 1px solid rgba(216,193,130,.35); border-radius: 100px; padding: 6px 13px; font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-forest-gold); }
[dir="rtl"] .ed-fchip { letter-spacing: .03em; }
.ed-askcard { border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; font-size: .9rem; line-height: 1.75; color: var(--ink-soft);
  background: radial-gradient(140% 120% at 100% 0%, rgba(203,170,99,.09) 0%, transparent 45%), linear-gradient(180deg,#FFFFFF 0%,#FAF7EF 100%); }
.ed-dark .ed-askcard { background:
  radial-gradient(140% 120% at 100% 0%, rgba(210,179,108,.10) 0%, transparent 45%), linear-gradient(180deg,#18211A 0%,#131B15 100%); }
.ed-askcard a { color: var(--gold-text); text-decoration: none; border-bottom: 1px solid var(--gold); }
.ed-askcard a:hover { color: var(--ink); }

/* ---- forest stats band ---- */
.ed-clstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 26px; max-width: 1000px;
  margin-inline: auto; text-align: center; }
.ed-clstats b { display: block; font-family: var(--ed-serif); font-weight: 400; font-size: clamp(2.2rem,4vw,2.75rem); line-height: 1;
  color: var(--on-forest-gold); text-shadow: 0 0 28px rgba(203,170,99,.45); font-variant-numeric: tabular-nums; }
[dir="rtl"] .ed-clstats b, .ed-clstats b:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; }
.ed-clstats span { display: block; margin-top: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(216,193,130,.85); }
[dir="rtl"] .ed-clstats span { letter-spacing: .05em; }

/* ---- audience cards ---- */
.ed-audgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 800px){ .ed-audgrid { grid-template-columns: 1fr; } }
.ed-audcard { text-align: center; border: 1px solid var(--rule); border-radius: 14px; padding: 26px 24px;
  background: radial-gradient(140% 120% at 100% 0%, rgba(203,170,99,.09) 0%, transparent 45%), linear-gradient(180deg,#FFFFFF 0%,#FAF7EF 100%);
  transition: transform .3s ease, border-color .3s ease; }
.ed-audcard:hover { border-color: var(--gold); }
.ed-dark .ed-audcard { background:
  radial-gradient(140% 120% at 100% 0%, rgba(210,179,108,.10) 0%, transparent 45%), linear-gradient(180deg,#18211A 0%,#131B15 100%); }
.ed-audcard .ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold-grad-bright); color: #241A05; font-size: 17px; box-shadow: 0 10px 22px rgba(166,125,46,.32); }
.ed-audcard h3 { margin: 14px 0 0; font-family: var(--ed-serif); font-weight: 400; font-size: 1.35rem; color: var(--ink); }
[dir="rtl"] .ed-audcard h3, .ed-audcard h3:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; font-size: 1.2rem; }
.ed-audcard p { margin: 8px 0 0; font-size: .86rem; line-height: 1.7; color: var(--ink-soft); }

/* ---- outcomes checklist ---- */
.ed-outgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px){ .ed-outgrid { grid-template-columns: 1fr; } }
.ed-outitem { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--rule); border-radius: 10px; padding: 15px 18px;
  background: radial-gradient(140% 120% at 100% 0%, rgba(203,170,99,.09) 0%, transparent 45%), linear-gradient(180deg,#FFFFFF 0%,#FAF7EF 100%);
  font-size: .9rem; line-height: 1.7; color: var(--ink); transition: transform .3s ease, border-color .3s ease; }
.ed-outitem:hover { border-color: var(--gold); transform: translateX(6px); }
[dir="rtl"] .ed-outitem:hover { transform: translateX(-6px); }
.ed-dark .ed-outitem { background:
  radial-gradient(140% 120% at 100% 0%, rgba(210,179,108,.10) 0%, transparent 45%), linear-gradient(180deg,#18211A 0%,#131B15 100%); }
.ed-outitem .chk { color: var(--gold-d); flex: none; }

/* ---- instructor forest band ---- */
.ed-instband { position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  border-radius: 16px; padding: 30px 32px; border: 1px solid var(--on-forest-line); color: #F3EFE3; max-width: 900px; margin-inline: auto;
  background: radial-gradient(70% 120% at 85% 10%, rgba(203,170,99,.22), transparent 60%), linear-gradient(135deg,#16241B,#22352A); }
.ed-instband .ghost { position: absolute; inset-inline-end: -8px; top: -24px; font-family: var(--ed-serif); font-size: 120px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(228,203,144,.2); pointer-events: none; }
.ed-instband .avatar { display: grid; place-items: center; width: 74px; height: 74px; flex: none; border-radius: 50%;
  background: var(--gold-grad-bright); color: #241A05; font-family: var(--ed-serif); font-size: 1.6rem; box-shadow: 0 12px 28px rgba(0,0,0,.3);
  overflow: hidden; }
/* When a portrait is present it fills the circle; the gold gradient stays as the ring/fallback. */
.ed-instband .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
[dir="rtl"] .ed-instband .avatar, .ed-instband .avatar:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; }
.ed-instband .bio { flex: 1; min-width: 240px; }
.ed-instband h3 { margin: 0; font-family: var(--ed-serif); font-weight: 400; font-size: 1.5rem; color: #F5F2E8; }
[dir="rtl"] .ed-instband h3, .ed-instband h3:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; }
.ed-instband p { margin: 8px 0 0; font-size: .88rem; line-height: 1.75; color: rgba(243,239,227,.75); }

/* ---- FAQ ---- */
.ed-faq { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin-inline: auto; }
.ed-faq details { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: radial-gradient(140% 120% at 100% 0%, rgba(203,170,99,.09) 0%, transparent 45%), linear-gradient(180deg,#FFFFFF 0%,#FAF7EF 100%); }
.ed-dark .ed-faq details { background:
  radial-gradient(140% 120% at 100% 0%, rgba(210,179,108,.10) 0%, transparent 45%), linear-gradient(180deg,#18211A 0%,#131B15 100%); }
.ed-faq details[open] { border-color: var(--gold); }
.ed-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 17px 22px; font-weight: 600; font-size: .95rem; color: var(--ink); }
.ed-faq summary::-webkit-details-marker { display: none; }
.ed-faq summary .plus { color: var(--gold-d); font-size: 18px; line-height: 1; flex: none; transition: transform .25s ease; }
.ed-faq details[open] summary .plus { transform: rotate(45deg); }
.ed-faq .ans { margin: 0; padding: 0 22px 18px; font-size: .88rem; line-height: 1.8; color: var(--ink-soft); }

/* ---- final CTA ---- */
.ed-clfinal { text-align: center; }
.ed-clfinal .hint { margin-top: 14px; font-size: .82rem; color: var(--gold-text); }
.ed-clfinal form { display: inline-flex; }
.ed-clcta form { display: inline-flex; }

/* ---- course-landing motion (all gated on reduced-motion) ---- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes edClFill { 0% { transform: scaleX(0) } 55%, 100% { transform: scaleX(1) } }
  .ed-clfig .line i { animation: edClFill 6s ease-in-out infinite .5s; }
  @keyframes edClNudge { 0%,100% { transform: translateX(0) } 50% { transform: translateX(4px) } }
  .ed-btn .arr { animation: edClNudge 1.6s ease-in-out infinite; }
  @keyframes edClNudgeR { 0%,100% { transform: translateX(0) scaleX(-1) } 50% { transform: translateX(-4px) scaleX(-1) } }
  [dir="rtl"] .ed-btn .arr { animation-name: edClNudgeR; }
}

/* =========================================================================
   THEME 2A — CONTACT  (owner design Contact.dc — narrow editorial column,
   floating white channel cards, underline form, dark send with sheen loop)
   ========================================================================= */

/* channel cards: hairline grid → floating white 2a cards, narrow column */
.ed-contact-grid { grid-template-columns: repeat(2,1fr); gap: 16px; background: transparent; border: 0; max-width: 760px; }
@media (max-width: 560px){ .ed-contact-grid { grid-template-columns: 1fr; } }
.ed-cc { border: 1px solid var(--rule); border-radius: 8px; padding: 30px 28px; box-shadow: 0 4px 14px rgba(22,38,28,.04); }
.ed-cc:first-child { grid-column: 1 / -1; }   /* location card spans the row */
.ed-cc .ic { color: #C9A758; }
.ed-cc h3 { font-size: 10.5px; color: var(--label); margin: 16px 0 10px; }
.ed-cc p, .ed-cc a { font-size: 16px; }
.ed-dark .ed-cc { box-shadow: 0 4px 14px rgba(0,0,0,.3); }

/* form column aligns with the cards column (reference: 760px) */
.ed-formwrap { max-width: 760px; }

/* ---- contact motion (all gated on reduced-motion) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* hero entrance rise (reference edRise) — small text elements only */
  @keyframes edRiseIn { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
  .ed-ph-rise .kick  { animation: edRiseIn .8s ease both; }
  .ed-ph-rise h1     { animation: edRiseIn .8s ease both .1s; }
  .ed-ph-rise .crumb { animation: edRiseIn .8s ease both .2s; }

  /* channel-card hover lift (matches 2a card language) */
  .ed-cc { transition: transform .25s ease, box-shadow .25s ease; }
  .ed-cc:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(22,38,28,.12); }
  .ed-dark .ed-cc:hover { box-shadow: 0 18px 38px rgba(0,0,0,.45); }

  /* dark send button carries the looping sheen from the reference */
  .ed-form .ed-btn-dark::after {
    content: ""; position: absolute; top: 0; bottom: 0; height: auto; inset-inline-start: 0; width: 45%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
    transform: translateX(-160%) skewX(-20deg);
    animation: edSheenLoop 3.2s ease-in-out infinite; pointer-events: none; transition: none;
  }
}

/* =========================================================================
   PULL3 — owner design sync (claude.ai/design → platform, DesignSync pull3)
   Hero-headline treatment, light inner-page heroes, dark track cards,
   contact split layout.
   PERF RULE: the "shimmer" ships as a STATIC gradient. Never animate
   background-position on background-clip:text — it froze the site before.
   ========================================================================= */

/* ---- THE hero-headline treatment (forest-green clipped gradient) ----
   Main headline words; pairs with the gold .ed-em accent word.        */
.ed-h1-treat {
  background: linear-gradient(110deg,#2E4A36 0%,#2E4A36 40%,#8FBE98 50%,#2E4A36 60%,#2E4A36 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* dark mode: light sage-green with pale-cream sheen stop (gold em unchanged) */
.ed-dark .ed-h1-treat {
  background-image: linear-gradient(110deg,#D9E7DB 0%,#D9E7DB 40%,#F5EBCB 50%,#D9E7DB 60%,#D9E7DB 100%);
}

/* ---- light inner-page hero (Categories / Courses / Contact / Register) ---- */
.ed-hero2.ed-hero-sub { padding-block: clamp(48px,7vw,72px) clamp(36px,5vw,48px); }
.ed-hero2.ed-hero-sub .ed-h1 { margin: 1.4rem auto 0; max-width: 24ch; font-size: clamp(2.3rem,5vw,3.65rem); line-height: 1.08; }
[dir="rtl"] .ed-hero2.ed-hero-sub .ed-h1,
.ed-hero2.ed-hero-sub .ed-h1:lang(ar) { font-size: clamp(1.9rem,4.2vw,2.75rem); line-height: 1.5; }
.ed-hero2.ed-hero-sub .ed-lead { margin: 1.2rem auto 0; max-width: 54ch; font-size: .97rem; }

/* hero kicker line (Home: "No fluff — just the skills that pay …") */
.ed-hero-kick { margin-top: 1.7rem; font-size: 10.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-text); }
[dir="rtl"] .ed-hero-kick, .ed-hero-kick:lang(ar) { letter-spacing: .06em; }

/* ---- dark forest track cards (Categories page) ---- */
.ed-trackgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px){ .ed-trackgrid { grid-template-columns: 1fr; } }
.ed-track { position: relative; overflow: hidden; display: block; text-decoration: none; border-radius: 18px;
  border: 1px solid var(--on-forest-line); padding: 36px 32px 44px; color: #F3EFE3;
  background:
    radial-gradient(80% 100% at 85% 0%, rgba(203,170,99,.2), transparent 60%),
    linear-gradient(135deg,#16241B,#22352A);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.ed-track:hover { border-color: var(--gold); transform: translateY(-6px); box-shadow: 0 26px 60px rgba(16,26,18,.35); }
.ed-track .tghost { position: absolute; top: -34px; inset-inline-end: 6px; font-family: var(--ed-serif); font-size: 170px;
  line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(228,203,144,.16); pointer-events: none; }
.ed-track .tnum { display: inline-block; font-family: var(--ed-serif); font-size: 44px; line-height: 1;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
[dir="rtl"] .ed-track .tnum, .ed-track .tnum:lang(ar) { font-family: var(--ed-serif); }
.ed-track h3 { margin: 14px 0 0; font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.75rem,2.8vw,2.15rem);
  letter-spacing: -.01em; color: #F5F2E8; }
[dir="rtl"] .ed-track h3, .ed-track h3:lang(ar) { font-family: 'Cairo',sans-serif; font-weight: 800; }
.ed-track p { margin: 12px 0 0; font-size: .92rem; line-height: 1.75; color: rgba(243,239,227,.75); }
.ed-track .tchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ed-track .tchips span { border: 1px solid rgba(216,193,130,.35); border-radius: 100px; padding: 6px 13px;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-forest-gold); }
[dir="rtl"] .ed-track .tchips span { letter-spacing: .03em; }
.ed-track .tlink { display: inline-flex; align-items: center; gap: .5rem; margin-top: 20px; font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-forest-gold); }
[dir="rtl"] .ed-track .tlink { letter-spacing: .06em; }
.ed-track .tlink .arr { display: inline-block; }
[dir="rtl"] .ed-track .tlink .arr { transform: scaleX(-1); }
.ed-track .tbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(216,193,130,.15); }
.ed-track .tbar i { position: absolute; inset: 0; background: var(--gold-grad); transform-origin: left; }
[dir="rtl"] .ed-track .tbar i { transform-origin: right; }
@media (prefers-reduced-motion: no-preference) {
  .ed-track .tbar i { animation: edClFill 6s ease-in-out infinite .5s; }
}

/* ---- "Every program/track includes" centered chip row ---- */
.ed-includerow { text-align: center; }
.ed-includerow .ed-clpills { justify-content: center; margin-top: 1.1rem; }

/* ---- contact split: form card + channel rail (owner Contact.dc) ---- */
.ed-contact2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.6rem,3vw,2.4rem); align-items: start; }
@media (max-width: 900px){ .ed-contact2 { grid-template-columns: 1fr; } }
.ed-formcard { position: relative; overflow: hidden; border: 1px solid var(--rule); border-radius: 14px;
  padding: clamp(1.7rem,3vw,2.4rem);
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(203,170,99,.09) 0%, transparent 45%),
    linear-gradient(180deg,#FFFFFF 0%,#FAF7EF 100%);
  box-shadow: 0 4px 14px rgba(22,38,28,.05); }
.ed-formcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,#B08D45,#E4CB90,#CBAA63); }
.ed-dark .ed-formcard { background:
    radial-gradient(140% 120% at 100% 0%, rgba(210,179,108,.10) 0%, transparent 45%),
    linear-gradient(180deg,#18211A 0%,#131B15 100%);
  box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.ed-formcard .ed-formwrap { max-width: none; }
.ed-contact-rail { display: grid; gap: 14px; }
.ed-notecard { border: 1px solid var(--on-forest-line); border-radius: 12px; padding: 18px 20px;
  font-size: .9rem; line-height: 1.75; color: rgba(243,239,227,.85);
  background:
    radial-gradient(70% 120% at 85% 10%, rgba(203,170,99,.22), transparent 60%),
    linear-gradient(135deg,#16241B,#22352A); }
.ed-notecard b { color: var(--on-forest-gold); font-weight: 600; }

/* =========================================================================
   PLATFORM SHELL — Phase A (owner-approved "Platform Theme" handoff)
   Market-ticker top bar · floating glass masthead with rotating gold rim ·
   forest footer · shared token + @keyframes catalog · shared JS hooks.
   PERF GUARDRAIL: never animate background-position on background-clip:text
   (edShine on text ships STATIC — this exact bug froze the site before).
   ========================================================================= */

/* ---- shell tokens (extend the .ed set — do not rename existing vars) ---- */
.ed {
  /* glass masthead */
  --glass-grad:      linear-gradient(180deg, rgba(28,42,32,.97), rgba(20,32,24,.97));
  --glass-rim:       conic-gradient(from 0deg, transparent 0%, rgba(228,203,144,.95) 7%, transparent 15%, transparent 48%, rgba(228,203,144,.55) 56%, transparent 64%);
  --glass-shadow:    0 18px 44px rgba(16,26,18,.45);
  --r-glass: 16px; --r-glass-in: 15px; --r-cta: 9px; --r-chip: 8px;
  /* market ticker strip */
  --tick-bg: #0B130C; --tick-ink: rgba(231,225,206,.75); --tick-gold: #EBD8A4;
  --up: #8FBE98; --down: #D08A79;
  /* full 5-stop display-gold gradient (handoff) — apply STATIC on clipped text */
  --gold-grad-shine: linear-gradient(110deg,#B08D45 0%,#E4CB90 30%,#CBAA63 55%,#F0DFAE 75%,#B08D45 100%);
  --gold-underline:  linear-gradient(90deg,#B08D45,#E4CB90);
}

/* ---- @keyframes catalog (handoff) — motion-gated ----
   edShine exists ONLY for non-text uses; DO NOT apply it to any element using
   background-clip:text (ship the gradient static instead — perf guardrail). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes edShine  { 0% { background-position: 115% 0 } 100% { background-position: -115% 0 } }
  @keyframes edRise   { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }
  @keyframes edGrad   { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
  @keyframes edCtaGlow{ 0%,100% { box-shadow: 0 12px 26px rgba(166,125,46,.32) } 50% { box-shadow: 0 16px 38px rgba(203,170,99,.6) } }
  @keyframes edSheen  { 0% { transform: translateX(-160%) } 55%,100% { transform: translateX(320%) } }
  @keyframes edNudge  { 0%,100% { transform: translateX(0) } 50% { transform: translateX(5px) } }
  @keyframes edBob    { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
  @keyframes edPulse  { 0%,100% { opacity: .5; transform: scale(1) } 50% { opacity: 1; transform: scale(1.25) } }
  @keyframes edGrow   { from { transform: scaleY(0) } to { transform: scaleY(1) } }
  @keyframes edRotate { to { transform: rotate(360deg) } }
  @keyframes edDrift  { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(46px,-32px) scale(1.14) } }
  @keyframes edFloatUp{ 0% { transform: translateY(60px); opacity: 0 } 12% { opacity: .45 } 80% { opacity: .3 } 100% { transform: translateY(-560px); opacity: 0 } }
  @keyframes edEq     { 0%,100% { transform: scaleY(.22) } 50% { transform: scaleY(1) } }
  @keyframes edTicker { to { transform: translateX(-50%) } }
  @keyframes edTickerRtl { to { transform: translateX(50%) } }
  @keyframes edLogo   { 0%,100% { transform: translateY(2px) } 50% { transform: translateY(-2px) } }
  /* edDraw / edCandle / edFloat already exist earlier in this file */
}

/* ---- market-ticker top bar (replaces the flat forest topbar) ---- */
.ed-sitehead .topbar,
.ed-sitehead .topbar.bg-theme,
.ed-dark .ed-sitehead .topbar,
.ed-dark .ed-sitehead .topbar.bg-theme { background: var(--tick-bg, #0B130C) !important; }
.ed-mkt-row { display: flex; align-items: center; gap: 18px; padding: 7px 22px;
  color: var(--tick-ink, rgba(231,225,206,.75)); font-size: 11.5px; font-family: var(--ed-sans); }
.ed-mkt-contact { display: flex; align-items: center; gap: 10px; white-space: nowrap; flex: none; }
.ed-mkt-contact .dot { opacity: .35; }
.ed-mkt-contact .ic { color: #CBAA63; }
.ed-mkt-contact a { color: rgba(231,225,206,.85); text-decoration: none; transition: color .18s ease; }
.ed-mkt-contact a:hover { color: var(--tick-gold); }
.ed-mkt-ticker { flex: 1; overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ed-mkt-ticker .track { display: flex; width: max-content; }
.ed-mkt-ticker .set { display: flex; gap: 34px; padding-inline-end: 34px; white-space: nowrap; align-items: center; }
.ed-mkt-ticker .set b { font-weight: 600; color: var(--tick-gold); }
.ed-mkt-ticker .set b.u { color: var(--up); }
.ed-mkt-ticker .set b.dn { color: var(--down); }
.ed-mkt-social { display: flex; gap: 8px; flex: none; }
.ed-mkt-social a { display: inline-flex; width: 22px; height: 22px; border: 1px solid rgba(216,193,130,.35);
  border-radius: 50%; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
  color: var(--tick-gold); text-decoration: none; transition: background .18s ease; }
.ed-mkt-social a:hover { background: rgba(235,216,164,.12); color: var(--tick-gold); }
.ed-mkt-social a .ti-world { font-size: 11px; }
@media (prefers-reduced-motion: no-preference) {
  /* 22s was too quick to actually read a price before it left the screen — and there are
     ten instruments now, not four, so the same duration meant each one moved faster.
     Slower is also calmer: this is a background signal, not something to chase.
     60s -> 110s on the owner's word that it still moved too fast, and matched to the
     student masthead so the two bars never scroll at different speeds. */
  .ed-mkt-ticker .track { animation: edTicker 110s linear infinite; }
  [dir="rtl"] .ed-mkt-ticker .track { animation-name: edTickerRtl; }
  /* Pause on hover so a reader can stop on a number they care about. */
  .ed-mkt-ticker:hover .track { animation-play-state: paused; }
}
@media (max-width: 700px) { .ed-mkt-ticker { display: none; } }

/* ---- floating glass masthead (rounded panel + rotating gold rim) ----
   ADAPTS the vendor .sticky-outer/.sticky-head structure: the sticky shell goes
   transparent and .basic-container/.navbar-inner become rim + glass panel, so
   vendor sticky JS and the zmm mobile clone keep working untouched. ---- */
.ed-sitehead { background: transparent; }
.ed-dark .ed-sitehead { background: transparent !important; }
.ed-sitehead .sticky-outer.full-dark,
.ed-sitehead .sticky-outer,
.ed-sitehead .sticky-head,
.ed-sitehead .navbar,
.ed-dark .ed-sitehead .sticky-outer.full-dark,
.ed-dark .ed-sitehead .sticky-outer,
.ed-dark .ed-sitehead .sticky-head,
.ed-dark .ed-sitehead .navbar {
  background: transparent !important; border-bottom: 0 !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* float padding lives on .sticky-head so it survives the vendor's
   fixed "header-sticky" state (custom.js switches it to position:fixed) */
.ed-sitehead .header-inner .sticky-head { padding: 7px 14px; }
.ed-sitehead .navbar { padding-block: 0; }
.ed-sitehead .navbar .basic-container {
  position: relative; max-width: 1310px; margin-inline: auto; padding: 0 !important;
  border-radius: var(--r-glass, 16px); overflow: hidden;
  background: rgba(228,203,144,.38);            /* static rim fallback */
  box-shadow: var(--glass-shadow, 0 18px 44px rgba(16,26,18,.45));
}
.ed-sitehead .navbar .basic-container::before {
  content: ""; position: absolute; inset: -150% -20%; pointer-events: none;
  background: var(--glass-rim, conic-gradient(from 0deg, transparent 0%, rgba(228,203,144,.95) 7%, transparent 15%, transparent 48%, rgba(228,203,144,.55) 56%, transparent 64%));
}
.ed-sitehead .navbar-inner {
  position: relative; margin: 1.5px; border-radius: var(--r-glass-in, 15px);
  background: var(--glass-grad, linear-gradient(180deg, rgba(31,47,36,.98), rgba(18,29,22,.98)));
  padding: 4px 24px; min-height: 58px;
  box-shadow: inset 0 1px 0 rgba(233,214,150,.16), inset 0 -1px 0 rgba(0,0,0,.28);
}
.ed-dark .ed-sitehead .navbar-inner { background: linear-gradient(180deg, rgba(22,35,27,.98), rgba(15,24,18,.98)); }
.ed-sitehead.scrolled .sticky-outer { box-shadow: none; }
.ed-dark .ed-sitehead.scrolled .sticky-outer { box-shadow: none; }
.ed-sitehead.scrolled .header-inner .sticky-head { padding-block: 5px; }
.ed-sitehead.scrolled .navbar-inner { min-height: 50px; padding-block: 3px; }

/* brand lockup — bobbing logo w/ gold glow, cream Arabic wordmark, gold word */
/* vendor hides .logo-general in the fixed header-sticky state (expects a
   .logo-sticky twin we don't ship) — keep our brand visible instead */
.ed-sitehead .sticky-head.header-sticky .navbar .ed-brand.logo-general { display: flex !important; }
.ed-sitehead .ed-brand img { filter: drop-shadow(0 4px 12px rgba(203,170,99,.4)); }
.ed-brand .bt-l1 { color: #F5F2E8; text-shadow: 0 0 24px rgba(203,170,99,.35); }
.ed-brand .bt-l1 em, .ed-dark .ed-brand .bt-l1 em {
  background: var(--gold-grad-shine, linear-gradient(110deg,#B08D45 0%,#E4CB90 30%,#CBAA63 55%,#F0DFAE 75%,#B08D45 100%));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* static per perf guardrail — edShine must never run on clipped text */
}
.ed-brand .bt-l2 { color: #E7CE92; font-weight: 700; text-shadow: 0 1px 10px rgba(203,170,99,.5); }

/* nav links — glow hover + gold-gradient underline on active */
.ed-sitehead .navbar-main > li > a { border-radius: 6px; }
.ed-sitehead .navbar-main > li > a:hover {
  color: #F5F2E8 !important; background: rgba(235,216,164,.09);
  text-shadow: 0 0 16px rgba(235,216,164,.7);
}
.ed-sitehead .navbar-main > li.active > a { color: #F5F2E8 !important; }
.ed-sitehead .navbar-main > li.active > a::after {
  height: 2px; border-radius: 2px; margin-top: 4px;
  background: var(--gold-underline, linear-gradient(90deg,#B08D45,#E4CB90));
  box-shadow: 0 0 10px rgba(228,203,144,.8);
}

/* actions — CTA gets the animated gold gradient + glow; chips get 8px radius */
.ed-enrol {
  border-radius: var(--r-cta, 9px);
  background: linear-gradient(100deg,#B08D45,#E4CB90,#B08C3F,#D3B871);
  background-size: 260% 100%;
}
.ed-lang, .ed-theme-toggle { border-radius: var(--r-chip, 8px); }
.ed-signin:hover { text-shadow: 0 0 16px rgba(235,216,164,.7); }

@media (prefers-reduced-motion: no-preference) {
  .ed-sitehead .navbar .basic-container::before { animation: edRotate 8s linear infinite; }
  .ed-sitehead .navbar .ed-brand img { animation: edLogo 4.5s ease-in-out infinite; }
  .ed-enrol { animation: edGrad 4.5s ease-in-out infinite, edCtaGlow 3s ease-in-out infinite; }
  /* entrance rise on the panel only — NEVER on .sticky-outer/.sticky-head:
     an animated transform there traps the vendor's fixed header (containing
     block), which breaks the sticky masthead */
  .ed-sitehead .navbar .basic-container { animation: edRise .7s ease both .1s; }
}

/* keep the vendor sticky placeholder honest (load-bearing — do not remove) */
.ed-sitehead .sticky-outer { height: auto !important; min-height: 0 !important; }

/* ---- forest footer (Home.dc.html footer treatment; markup unchanged) ---- */
.ed-footer, .ed-dark .ed-footer {
  position: relative; overflow: hidden; color: #E7E1CE;
  border-top: 1px solid rgba(216,193,130,.2);
  background:
    radial-gradient(70% 100% at 85% 0%, rgba(203,170,99,.10) 0%, transparent 55%),
    linear-gradient(180deg, #16241B 0%, #111C15 100%);
}
.ed-footer::before {
  content: ""; position: absolute; right: -10%; top: -40%; width: 520px; height: 520px;
  border-radius: 50%; background: radial-gradient(circle, rgba(203,170,99,.10), transparent 65%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ed-footer::before { animation: edDrift 20s ease-in-out infinite; }
}
.ed-footer .ft-in { position: relative; }
.ed-footer .ft-brand-ar, .ed-dark .ed-footer .ft-brand-ar { color: #F5F2E8; }
.ed-footer .ft-gold, .ed-dark .ed-footer .ft-gold {
  background: var(--gold-grad-shine, linear-gradient(110deg,#B08D45 0%,#E4CB90 30%,#CBAA63 55%,#F0DFAE 75%,#B08D45 100%));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* static per perf guardrail */
}
.ed-footer .ft-brand-en, .ed-dark .ed-footer .ft-brand-en { color: rgba(216,193,130,.85); }
.ed-footer .ft-about, .ed-dark .ed-footer .ft-about { color: rgba(243,239,227,.7); }
.ed-footer .ft-contact li, .ed-dark .ed-footer .ft-contact li { color: rgba(243,239,227,.85); }
.ed-footer .ft-contact svg, .ed-dark .ed-footer .ft-contact svg { color: #CBAA63; }
.ed-footer .ft-contact a, .ed-dark .ed-footer .ft-contact a { color: rgba(243,239,227,.85); }
.ed-footer .ft-contact a:hover, .ed-dark .ed-footer .ft-contact a:hover { color: var(--tick-gold, #EBD8A4); }
.ed-footer .ft-col h4, .ed-dark .ed-footer .ft-col h4 { color: rgba(216,193,130,.85); }
.ed-footer .ft-col a, .ed-dark .ed-footer .ft-col a { color: rgba(243,239,227,.85); }
.ed-footer .ft-col a:hover, .ed-dark .ed-footer .ft-col a:hover { color: var(--tick-gold, #EBD8A4); }
.ed-footer .ft-social a, .ed-dark .ed-footer .ft-social a { border-color: rgba(216,193,130,.3); color: #E7E1CE; }
.ed-footer .ft-social a:hover, .ed-dark .ed-footer .ft-social a:hover {
  background: var(--tick-gold, #EBD8A4); color: #241A05; border-color: var(--tick-gold, #EBD8A4); }
.ed-footer .ft-bottom, .ed-dark .ed-footer .ft-bottom { border-top-color: rgba(216,193,130,.18); }
.ed-footer .ft-copy, .ed-footer .ft-set, .ed-dark .ed-footer .ft-copy, .ed-dark .ed-footer .ft-set { color: rgba(243,239,227,.55); }
.ed-footer .ft-copy a, .ed-dark .ed-footer .ft-copy a { color: rgba(243,239,227,.85); }
.ed-footer .ft-copy a:hover, .ed-dark .ed-footer .ft-copy a:hover { color: var(--tick-gold, #EBD8A4); }
.ed-footer .ft-top, .ed-dark .ed-footer .ft-top { border-color: rgba(216,193,130,.3); }
.ed-footer .ft-top a, .ed-dark .ed-footer .ft-top a { color: #E7E1CE; }
.ed-footer .ft-top:hover, .ed-dark .ed-footer .ft-top:hover { background: var(--tick-gold, #EBD8A4); border-color: var(--tick-gold, #EBD8A4); }
.ed-footer .ft-top:hover a, .ed-dark .ed-footer .ft-top:hover a { color: #241A05; }

/* ---- shared JS hooks ---- */
/* [data-rv] reveals map onto the existing .reveal system (JS adds .in) */
@media (prefers-reduced-motion: no-preference) {
  .ed [data-rv].in { animation: edReveal .7s cubic-bezier(.2,.7,.2,1) both; }
}
[data-mag], [data-tilt] { will-change: transform; }
[data-px] { will-change: transform; }

/* ==========================================================================
   MOBILE HEADER — vendor `typo-dark` override
   The bar is markup'd `.mobile-header.bg-white.typo-dark` but we paint it
   forest. The vendor rule `.typo-dark, .typo-dark a, .typo-dark span { color:#222 !important }`
   then made the Login link / brand text near-black on the dark bar. Answer it
   with the same weight, scoped to our header only.
   ========================================================================== */
.ed-sitehead .mobile-header.typo-dark .ed-signin { color: var(--on-forest-mut) !important; }
.ed-sitehead .mobile-header.typo-dark .ed-signin:hover { color: var(--on-forest-gold) !important; }
.ed-sitehead .mobile-header.typo-dark .ed-enrol { color: #241A05 !important; }
.ed-sitehead .mobile-header.typo-dark .ed-brand .bt-l1 { color: #F5F2E8 !important; }
.ed-sitehead .mobile-header.typo-dark .ed-brand .bt-l2 { color: #E7CE92 !important; }
.ed-sitehead .mobile-header.typo-dark .ed-lang,
.ed-sitehead .mobile-header.typo-dark .ed-theme-toggle { color: var(--on-forest) !important; }

/* Gold labels that never got a dark counterpart — #9E7E3A is muddy on the
   darkest sections while their neighbours use the brighter token. */
.ed-dark .edh .edh-eyebrow,
.ed-dark .edh .edh-motto,
.ed-dark .edh .alllink,
.ed-dark .edh .edh-pcard .names .alt,
.ed-dark .edh .edh-pcard .start { color: #D2B36C; }

/* ---- live ticker: the moment a price changes ----------------------------------
   The poller in editorial.js rewrites a price in place. Without this the number
   simply differs from what it was a second ago, which nobody sees — the strip is
   scrolling and the eye is elsewhere. A short lift on the instrument that actually
   moved is the whole difference between "live" and "correct but invisible".
   Only fires when the value really changed; a pulse on every poll would be noise. */
.ed-mkt-ticker .set span.mkt-tick { animation: edMktTick 1.1s ease-out; }
@keyframes edMktTick {
  0%   { filter: brightness(1.9); text-shadow: 0 0 12px rgba(235,216,164,.55); }
  100% { filter: none; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-mkt-ticker .set span.mkt-tick { animation: none; }
}

/* ═══ HOME CONVERSION LAYER ══════════════════════════════════════════════════════
   Trust bar, before/after, instructor, testimonial frames and FAQ. Brand forest and
   gold only; no new palette. Everything uses logical properties so RTL needs no
   second rule — the site's primary audience reads right to left. */

.edh-trust { padding-block: clamp(28px,4vw,44px); border-block: 1px solid var(--rule); background: var(--paper-2, #FBFAF6); }
.ed-dark .edh-trust { background: rgba(255,255,255,.02); }
.edh-trust-lead { margin: 0 0 18px; text-align: center; color: var(--ink-soft); font-size: .95rem; }
.edh-trust-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  align-items: stretch; justify-content: center; gap: 10px 34px; }
.edh-trust-row li { display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--ed-serif); font-size: 1.35rem; color: var(--gold-deep); letter-spacing: .02em; }
.edh-trust-row li span { font-family: inherit; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
[dir="rtl"] .edh-trust-row li span { letter-spacing: .02em; text-transform: none; font-family: 'Cairo', sans-serif; }

.edh-shift { padding-block: clamp(48px,7vw,86px); }
.edh-shift-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(18px,3vw,34px); align-items: stretch; }
@media (max-width: 860px) { .edh-shift-grid { grid-template-columns: 1fr; }
  .edh-shift-arrow { transform: rotate(-90deg); justify-self: center; } }
.edh-shift-col { border: 1px solid var(--rule); border-radius: 16px; padding: clamp(20px,3vw,30px); background: var(--paper); }
.ed-dark .edh-shift-col { background: rgba(255,255,255,.03); }
.edh-shift-after { border-color: rgba(203,170,99,.5); box-shadow: 0 18px 44px rgba(166,125,46,.1); }
.edh-shift-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
[dir="rtl"] .edh-shift-tag { letter-spacing: .04em; text-transform: none; }
.edh-shift-after .edh-shift-tag { color: var(--gold-deep); }
.edh-shift-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.edh-shift-col li { position: relative; padding-inline-start: 22px; line-height: 1.75; color: var(--ink-soft); font-size: .95rem; }
.edh-shift-col li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.edh-shift-after li::before { background: var(--gold); }
.edh-shift-arrow { align-self: center; font-size: 2rem; color: var(--gold); }
[dir="ltr"] .edh-shift-arrow { transform: scaleX(-1); }

.edh-tutor { padding-block: clamp(48px,7vw,86px); border-top: 1px solid var(--rule); }
.edh-tutor-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(24px,4vw,54px); align-items: center; }
@media (max-width: 820px) { .edh-tutor-grid { grid-template-columns: 1fr; } }
.edh-tutor-photo { border-radius: 18px; overflow: hidden; border: 1px solid var(--rule);
  background: linear-gradient(150deg,#26402F,#16241B); aspect-ratio: 4/5; }
.edh-tutor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edh-tutor-ph { width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; }
.edh-tutor-ph img { width: 140px; height: 140px; object-fit: contain; opacity: .85; }
.edh-ph-note { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(228,203,144,.75); }
[dir="rtl"] .edh-ph-note { letter-spacing: .02em; text-transform: none; font-family: 'Cairo', sans-serif; }
.edh-tutor-body h2 { font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.7rem,3.2vw,2.5rem);
  margin: 8px 0 6px; color: var(--ink); line-height: 1.1; }
[dir="rtl"] .edh-tutor-body h2 { font-family: 'Cairo', sans-serif; font-weight: 800; }
.edh-tutor-role { color: var(--gold-deep); font-weight: 600; font-size: .95rem; margin: 0 0 16px; }
.edh-tutor-role .sep { opacity: .5; margin-inline: 8px; }
.edh-tutor-body p { color: var(--ink-soft); line-height: 1.85; margin: 0 0 20px; }

.edh-voices { padding-block: clamp(48px,7vw,86px); border-top: 1px solid var(--rule); }
.edh-voicegrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 900px) { .edh-voicegrid { grid-template-columns: 1fr; } }
.edh-voice { margin: 0; border: 1px solid var(--rule); border-radius: 16px; padding: 24px; background: var(--paper); }
.ed-dark .edh-voice { background: rgba(255,255,255,.03); }
/* The dashed edge and the banner are deliberate: an unfilled testimonial must be
   impossible to mistake for a real one, including by whoever ships the page. */
.edh-voice.is-placeholder { border-style: dashed; border-color: rgba(203,170,99,.55); }
.edh-voice-ph { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep); background: rgba(203,170,99,.12); border-radius: 999px;
  padding: 5px 12px; display: inline-block; margin-bottom: 14px; }
[dir="rtl"] .edh-voice-ph { letter-spacing: .02em; text-transform: none; font-family: 'Cairo', sans-serif; }
.edh-voice blockquote { margin: 0 0 16px; font-family: var(--ed-serif); font-size: 1.05rem;
  line-height: 1.75; color: var(--ink-soft); opacity: .75; }
[dir="rtl"] .edh-voice blockquote { font-family: 'Cairo', sans-serif; }
.edh-voice-who { display: flex; flex-direction: column; gap: 2px; }
.edh-voice-who .nm { font-weight: 700; color: var(--ink); font-size: .92rem; }
.edh-voice-who .rl { color: var(--ink-soft); font-size: .82rem; }

.edh-faq { padding-block: clamp(48px,7vw,86px); border-top: 1px solid var(--rule); }
.edh-faqlist { display: grid; gap: 10px; max-width: 860px; margin-inline: auto; }
.edh-faqitem { border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); overflow: hidden; }
.ed-dark .edh-faqitem { background: rgba(255,255,255,.03); }
.edh-faqitem summary { cursor: pointer; list-style: none; padding: 17px 22px; font-weight: 700;
  color: var(--ink); font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.edh-faqitem summary::-webkit-details-marker { display: none; }
.edh-faqitem summary::after { content: "+"; color: var(--gold-deep); font-size: 1.3rem; flex: none; line-height: 1; }
.edh-faqitem[open] summary::after { content: "\2212"; }
.edh-faqitem[open] summary { border-bottom: 1px solid var(--rule); }
.edh-faqitem p { margin: 0; padding: 16px 22px 20px; color: var(--ink-soft); line-height: 1.85; font-size: .95rem; }
.edh-faqitem summary:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.edh-faq-more { text-align: center; margin: 26px 0 0; color: var(--ink-soft); font-size: .95rem; }
.edh-faq-more a { color: var(--gold-text); font-weight: 700; text-decoration: none; margin-inline-start: 8px; }
.edh-faq-more a:hover { text-decoration: underline; }

/* ═══ PROGRAMME PAGE CONVERSION LAYER ════════════════════════════════════════════ */
.edc-fit { padding-block: clamp(40px,6vw,72px); border-top: 1px solid var(--rule); }
.edc-fit-grid { display: grid; grid-template-columns: 1.2fr .9fr; gap: clamp(18px,3vw,34px); }
@media (max-width: 820px) { .edc-fit-grid { grid-template-columns: 1fr; } }
.edc-fit-col { border: 1px solid var(--rule); border-radius: 16px; padding: clamp(20px,3vw,28px); background: var(--paper); }
.ed-dark .edc-fit-col { background: rgba(255,255,255,.03); }
.edc-fit-col h3 { font-family: var(--ed-serif); font-weight: 400; font-size: 1.3rem; margin: 0 0 16px; color: var(--ink); }
[dir="rtl"] .edc-fit-col h3 { font-family: 'Cairo', sans-serif; font-weight: 800; }
.edc-fit-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.edc-fit-col li { position: relative; padding-inline-start: 24px; line-height: 1.75; color: var(--ink-soft); font-size: .94rem; }
.edc-fit-col li::before { content: "\2713"; position: absolute; inset-inline-start: 0; color: var(--gold-deep); font-weight: 700; }
/* The "does not suit" column is muted and marked with a different glyph: it is guidance,
   not a warning, and it should not shout louder than the reasons to enrol. */
.edc-fit-not { background: transparent; border-style: dashed; }
.edc-fit-not li::before { content: "\2013"; color: var(--ink-soft); opacity: .7; }

.edc-inc { padding-block: clamp(30px,4vw,52px); }
.edc-incgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px; }
.edc-inc-item { border: 1px solid var(--rule); border-radius: 14px; padding: 20px; text-align: center; background: var(--paper); }
.ed-dark .edc-inc-item { background: rgba(255,255,255,.03); }
.edc-inc-item .v { display: block; font-family: var(--ed-serif); font-size: 2rem; color: var(--gold-deep); line-height: 1; }
.edc-inc-item .l { display: block; margin-top: 8px; color: var(--ink-soft); font-size: .86rem; line-height: 1.6; }

.edc-tutor { padding-block: clamp(30px,4vw,52px); }
.edc-tutor-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px solid rgba(203,170,99,.4); border-radius: 16px; padding: clamp(18px,3vw,26px);
  background: linear-gradient(150deg, rgba(203,170,99,.07), transparent); }
.edc-tutor-mark { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(150deg,#26402F,#16241B); display: grid; place-items: center; }
.edc-tutor-mark img { width: 52px; height: 52px; object-fit: contain; }
/* A real portrait fills the whole circle; the brand-mark fallback stays centred and small. */
.edc-tutor-mark.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.edc-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
[dir="rtl"] .edc-eyebrow { letter-spacing: .02em; text-transform: none; }
.edc-tutor-in h3 { font-family: var(--ed-serif); font-weight: 400; font-size: 1.45rem; margin: 4px 0 6px; color: var(--ink); }
[dir="rtl"] .edc-tutor-in h3 { font-family: 'Cairo', sans-serif; font-weight: 800; }
.edc-tutor-in p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.edc-tutor-in .sep { opacity: .45; margin-inline: 7px; }
.edc-tutor-cred { margin-top: 6px !important; color: var(--gold-text) !important; font-weight: 600; font-size: .84rem !important; }
/* opacity .45 put this separator at 2.78:1 on the dark ground (#6B603C on
   #161C14, bound 2.47–2.79:1 across the gradient). .7 keeps it visibly quieter
   than the credentials either side and measures 4.88:1. margin-inline stays —
   it is logical, so it flips correctly in RTL. */
.edc-tutor-cred span { opacity: .7; margin-inline: 6px; }

.edc-close { padding-block: clamp(42px,6vw,76px); }
.edc-close-in { text-align: center; border: 1px solid rgba(203,170,99,.4); border-radius: 20px;
  padding: clamp(26px,4vw,46px); background: linear-gradient(160deg,#1C2A20,#16241B); color: #F3EFE3; }
.edc-close-in h2 { font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.6rem,3vw,2.3rem); margin: 0 0 10px; color: #F7F3E8; }
[dir="rtl"] .edc-close-in h2 { font-family: 'Cairo', sans-serif; font-weight: 800; }
.edc-close-in p { margin: 0 auto 22px; max-width: 60ch; color: rgba(243,239,227,.82); line-height: 1.8; }
.edc-close-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.edc-close-btns .ghost { border: 1px solid rgba(231,225,206,.35); color: #E7E1CE; background: transparent; }
.edc-close-btns .ghost:hover { border-color: var(--gold); color: #F7F3E8; }

/* ═══ FOUNDER PROFILE ════════════════════════════════════════════════════════════
   Read from a QR code on a business card, so the first screen has to work on a phone
   held in one hand. Logical properties throughout; RTL needs no second rule. */
.fnd-hero { padding-block: clamp(36px,6vw,80px); }
.fnd-hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px,4vw,56px); align-items: center; }
@media (max-width: 880px) { .fnd-hero-in { grid-template-columns: 1fr; }
  .fnd-hero-photo { order: -1; max-width: 320px; margin-inline: auto; } }
.fnd-eyebrow { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
[dir="rtl"] .fnd-eyebrow { letter-spacing: .03em; text-transform: none; font-family: 'Cairo', sans-serif; }
.fnd-hero h1 { font-family: var(--ed-serif); font-weight: 400; font-size: clamp(2.1rem,5vw,3.6rem);
  line-height: 1.05; margin: 0 0 8px; color: var(--ink); }
[dir="rtl"] .fnd-hero h1 { font-family: 'Cairo', sans-serif; font-weight: 800; }
.fnd-role { color: var(--gold-deep); font-weight: 700; font-size: 1.02rem; margin: 0 0 16px; }
.fnd-lead { color: var(--ink-soft); line-height: 1.9; font-size: 1.02rem; margin: 0 0 24px; }
.fnd-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.fnd-cta .ghost { border: 1px solid var(--rule); color: var(--ink); background: transparent; }
.fnd-cta .ghost:hover { border-color: var(--gold); }
.fnd-hero-photo { border-radius: 20px; overflow: hidden; border: 1px solid var(--rule);
  background: linear-gradient(150deg,#26402F,#16241B); aspect-ratio: 4/5;
  box-shadow: 0 26px 60px rgba(16,26,18,.24); }
.fnd-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fnd-photo-ph { width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; }
.fnd-photo-ph img { width: 150px; height: 150px; object-fit: contain; opacity: .85; }
.fnd-photo-ph span { font-size: .74rem; color: rgba(228,203,144,.75); }

.fnd-facts { padding-block: clamp(20px,3vw,34px); border-block: 1px solid var(--rule); background: var(--paper-2,#FBFAF6); }
.ed-dark .fnd-facts { background: rgba(255,255,255,.02); }
.fnd-factgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 16px; }
.fnd-fact { text-align: center; }
.fnd-fact .v { display: block; font-family: var(--ed-serif); font-size: clamp(1.7rem,3vw,2.4rem);
  color: var(--gold-deep); line-height: 1; }
.fnd-fact .l { display: block; margin-top: 7px; color: var(--ink-soft); font-size: .84rem; line-height: 1.6; }

.fnd-vision { padding-block: clamp(42px,6vw,78px); }
.fnd-vision-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .fnd-vision-in { grid-template-columns: 1fr; } }
.fnd-vcard { border: 1px solid var(--rule); border-radius: 16px; padding: clamp(20px,3vw,28px); background: var(--paper); }
.ed-dark .fnd-vcard { background: rgba(255,255,255,.03); }
.fnd-vcard-lead { border-color: rgba(203,170,99,.5); background: linear-gradient(160deg, rgba(203,170,99,.08), transparent); }
.fnd-vcard h2 { font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.5rem,2.8vw,2.1rem); margin: 0 0 12px; color: var(--ink); line-height: 1.15; }
.fnd-vcard h3 { font-family: var(--ed-serif); font-weight: 400; font-size: 1.25rem; margin: 0 0 10px; color: var(--ink); }
[dir="rtl"] .fnd-vcard h2, [dir="rtl"] .fnd-vcard h3 { font-family: 'Cairo', sans-serif; font-weight: 800; }
.fnd-vcard p { margin: 0; color: var(--ink-soft); line-height: 1.85; font-size: .94rem; }

.fnd-sechead { margin-bottom: 26px; }
.fnd-sechead h2 { font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.7rem,3.4vw,2.6rem); margin: 0; color: var(--ink); }
[dir="rtl"] .fnd-sechead h2 { font-family: 'Cairo', sans-serif; font-weight: 800; }

.fnd-kpmg { padding-block: clamp(42px,6vw,78px); border-top: 1px solid var(--rule); }
.fnd-kpmg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,40px); align-items: start; }
@media (max-width: 880px) { .fnd-kpmg-grid { grid-template-columns: 1fr; } }
.fnd-kpmg-text p { color: var(--ink-soft); line-height: 1.95; margin: 0; font-size: 1rem; }
.fnd-kpmg-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fnd-kpmg-points li { border-inline-start: 3px solid var(--gold); padding-inline-start: 16px; }
.fnd-kpmg-points strong { display: block; color: var(--ink); font-size: .98rem; margin-bottom: 4px; }
.fnd-kpmg-points span { color: var(--ink-soft); font-size: .9rem; line-height: 1.7; }

.fnd-exp { padding-block: clamp(42px,6vw,78px); border-top: 1px solid var(--rule); }
.fnd-expgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 16px; }
.fnd-exp-item { border: 1px solid var(--rule); border-radius: 14px; padding: 22px; background: var(--paper); }
.ed-dark .fnd-exp-item { background: rgba(255,255,255,.03); }
.fnd-exp-item h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--gold-deep); font-weight: 700; }
.fnd-exp-item p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.75; }

.fnd-cred { padding-block: clamp(42px,6vw,78px); border-top: 1px solid var(--rule); }
.fnd-cred-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px,3vw,40px); }
@media (max-width: 880px) { .fnd-cred-in { grid-template-columns: 1fr; } }
.fnd-credlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fnd-credlist li { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.fnd-credlist b { font-family: var(--ed-serif); font-size: 1.2rem; color: var(--ink); min-width: 120px; }
.fnd-credlist span { color: var(--ink-soft); font-size: .9rem; }
.fnd-award-in { display: flex; align-items: center; gap: 18px; border: 1px solid rgba(203,170,99,.5);
  border-radius: 16px; padding: 22px; background: linear-gradient(150deg, rgba(203,170,99,.1), transparent); }
.fnd-award-in .rank { font-family: var(--ed-serif); font-size: 3rem; color: var(--gold-deep); line-height: 1; flex: none; }
.fnd-award-in strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 4px; }
.fnd-award-in p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.7; }

.fnd-video { padding-block: clamp(30px,4vw,56px); }
.fnd-video-frame { position: relative; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; border: 1px solid var(--rule); background: #16241B; }
.fnd-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.fnd-for { padding-block: clamp(42px,6vw,78px); border-top: 1px solid var(--rule); }
.fnd-forgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 16px; }
.fnd-for-item { border: 1px solid var(--rule); border-radius: 14px; padding: 22px; background: var(--paper); }
.ed-dark .fnd-for-item { background: rgba(255,255,255,.03); }
.fnd-for-item h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--ink); font-weight: 700; }
.fnd-for-item p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.75; }

.fnd-close { padding-block: clamp(42px,6vw,80px); }
.fnd-close-in { text-align: center; border-radius: 20px; padding: clamp(28px,4vw,50px);
  background: linear-gradient(160deg,#1C2A20,#16241B); color: #F3EFE3; border: 1px solid rgba(203,170,99,.4); }
.fnd-close-in h2 { font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.6rem,3vw,2.4rem); margin: 0 0 10px; color: #F7F3E8; }
[dir="rtl"] .fnd-close-in h2 { font-family: 'Cairo', sans-serif; font-weight: 800; }
.fnd-close-in p { margin: 0 auto 22px; max-width: 58ch; color: rgba(243,239,227,.85); line-height: 1.85; }
.fnd-close-in .fnd-cta { justify-content: center; }
.fnd-close-in .ghost { border-color: rgba(231,225,206,.35); color: #E7E1CE; }

/* ═══ OUTCOMES (replaced the empty testimonial frames) ═══════════════════════════ */
.edh-outcomes { padding-block: clamp(48px,7vw,86px); border-top: 1px solid var(--rule); }
.edh-outgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; }
.edh-out { border: 1px solid var(--rule); border-radius: 16px; padding: 24px; background: var(--paper);
  position: relative; padding-inline-start: 30px; }
.ed-dark .edh-out { background: rgba(255,255,255,.03); }
.edh-out::before { content: "\2713"; position: absolute; inset-inline-start: 22px; top: 24px;
  color: var(--gold-deep); font-weight: 700; }
.edh-out h3 { margin: 0 0 8px; font-size: 1.02rem; color: var(--ink); font-weight: 700; padding-inline-start: 18px; }
.edh-out p { margin: 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.8; padding-inline-start: 18px; }

/* ═══ FOUNDER CONTACT — the point of the QR code ═════════════════════════════════ */
.fnd-reach { padding-block: clamp(42px,6vw,78px); border-top: 1px solid var(--rule); }
.fnd-reachgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 14px; }
.fnd-reach-item { display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  border: 1px solid var(--rule); border-radius: 14px; padding: 20px 22px; background: var(--paper);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.ed-dark .fnd-reach-item { background: rgba(255,255,255,.03); }
.fnd-reach-item:hover { border-color: var(--gold); transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(166,125,46,.14); }
.fnd-reach-item .k { font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-deep); }
[dir="rtl"] .fnd-reach-item .k { letter-spacing: .03em; }
.fnd-reach-item .v { font-size: 1.02rem; color: var(--ink); font-weight: 600; }
/* Tap targets stay comfortable on a phone, which is where a scanned QR lands. */
@media (max-width: 560px) { .fnd-reach-item { padding: 18px 20px; } }

/* ═══ FOUNDER GALLERIES ══════════════════════════════════════════════════════════ */
.fnd-gal, .fnd-vids { padding-block: clamp(42px,6vw,78px); border-top: 1px solid var(--rule); }
.fnd-galgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; }
.fnd-galitem { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule);
  background: linear-gradient(150deg,#26402F,#16241B); aspect-ratio: 4/3; }
.fnd-galitem img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; }
.fnd-galitem:hover img { transform: scale(1.04); }
.fnd-vidgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 16px; }

/* ═══ CONSULTING SERVICES ════════════════════════════════════════════════════════ */
.fnd-serv { padding-block: clamp(46px,6vw,84px); border-top: 1px solid var(--rule);
  background: var(--paper-2,#FBFAF6); }
.ed-dark .fnd-serv { background: rgba(255,255,255,.02); }
.fnd-serv-lead { margin: 12px 0 0; color: var(--ink-soft); max-width: 62ch; line-height: 1.85; }
.fnd-servgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 14px; margin-top: 8px; }
.fnd-serv-item { border: 1px solid var(--rule); border-radius: 14px; padding: 22px; background: var(--paper);
  transition: border-color .25s ease, transform .25s ease; }
.ed-dark .fnd-serv-item { background: rgba(255,255,255,.04); }
.fnd-serv-item:hover { border-color: var(--gold); transform: translateY(-3px); }
.fnd-serv-item h3 { margin: 0 0 2px; font-size: 1.04rem; color: var(--ink); font-weight: 700; }
/* The other language as a quiet second line: the Arabic reader searches for the English
   term and the English reader recognises the Arabic one. Never on the same line. */
.fnd-serv-item .alt { display: block; font-size: .78rem; color: var(--gold-deep); margin-bottom: 9px; font-weight: 600; }
.fnd-serv-item p { margin: 0; color: var(--ink-soft); font-size: .91rem; line-height: 1.78; }
.fnd-serv-cta { margin-top: 28px; text-align: center; }
.fnd-serv-cta p { margin: 0 auto 16px; max-width: 56ch; color: var(--ink-soft); line-height: 1.8; }
.fnd-serv-cta .fnd-cta { justify-content: center; }

/* ═══ FOUNDER HERO — matched to the home page, plus the three routes ═════════════
   .fnd-hero also carries .edh-hero, so it inherits the home page's grid, blobs, conic
   sweep, floating symbols, equaliser and dust canvas rather than defining a second look.
   Only what DIFFERS is written here: the home hero is centred and text-only, this one is
   a two-column layout with a portrait. */
.fnd-hero.edh-hero { text-align: start; padding-block: clamp(48px,7vw,96px); }
.fnd-hero .fnd-hero-in { position: relative; z-index: 2; }

/* The three routes. Equal weight, because a visitor from a business card wants exactly one
   of study / hire / talk and none of them is a lesser choice. */
.fnd-routes { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 26px;
  align-items: stretch; }
@media (max-width: 720px) { .fnd-routes { grid-template-columns: 1fr; } }
/* A VISIBLE CARD, not a bare block. var(--rule) on var(--paper) is near-invisible in light
   mode, so the first two tiles read as loose text beside the filled gold one — three equal
   choices have to LOOK equal. A tinted face, a stronger edge and a resting shadow give each
   one the same presence. Equal height so the row is a row and not a staircase. */
.fnd-route { position: relative; display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  height: 100%; justify-content: flex-start;
  text-decoration: none; border: 1px solid rgba(28,42,32,.16); border-radius: 16px;
  padding: 18px 20px; background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(250,247,238,.9));
  box-shadow: 0 8px 22px rgba(28,42,32,.07);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .35s ease; }
.ed-dark .fnd-route { border-color: rgba(216,193,130,.24);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); }
.fnd-route .ic { font-size: 1.05rem; color: var(--gold-deep); line-height: 1; margin-bottom: 4px; }
.fnd-route .t { font-weight: 700; color: var(--ink); font-size: 1rem; }
.fnd-route .s { color: var(--ink-soft); font-size: .82rem; line-height: 1.55; }
.fnd-route:hover { transform: translateY(-5px); border-color: var(--gold);
  box-shadow: 0 20px 44px rgba(166,125,46,.2); }
/* A light sweeps across on hover — the same gesture the programme cards use. */
.fnd-route::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
  transform: translateX(-120%); }
.fnd-route:hover::after { transform: translateX(120%); transition: transform .85s ease; }
/* The booking tile leads, and is the only one that reads as a filled action. */
.fnd-route.is-lead { background: linear-gradient(135deg,#D3B871,#B08C3F); border-color: transparent;
  box-shadow: 0 14px 32px rgba(166,125,46,.34); }
.fnd-route.is-lead .ic, .fnd-route.is-lead .t { color: #241A05; }
.fnd-route.is-lead .s { color: rgba(36,26,5,.78); }

/* The portrait breathes, and a gold rim rotates behind it. */
.fnd-hero-photo { position: relative; }
.fnd-photo-rim { position: absolute; inset: -10px; border-radius: 26px; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(203,170,99,.55) 90deg, transparent 200deg);
  z-index: -1; filter: blur(2px); }
@media (prefers-reduced-motion: no-preference) {
  .fnd-photo-rim { animation: fndRim 9s linear infinite; }
  @keyframes fndRim { to { transform: rotate(360deg); } }
  .fnd-hero-photo img { animation: fndFloat 7s ease-in-out infinite; }
  @keyframes fndFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
  /* Each route tile arrives a beat after the one before it. */
  .fnd-routes .fnd-route { opacity: 0; transform: translateY(14px); animation: fndRise .7s cubic-bezier(.2,.7,.3,1) forwards; }
  .fnd-routes .fnd-route:nth-child(1) { animation-delay: .10s }
  .fnd-routes .fnd-route:nth-child(2) { animation-delay: .22s }
  .fnd-routes .fnd-route:nth-child(3) { animation-delay: .34s }
  @keyframes fndRise { to { opacity: 1; transform: none } }
  /* Counters and section headings lift in as they are scrolled to; .reveal/.in is the
     shared observer already running in editorial.js. */
  .fnd-fact { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in .fnd-fact { opacity: 1; transform: none; }
  .reveal.in .fnd-fact:nth-child(2) { transition-delay: .08s }
  .reveal.in .fnd-fact:nth-child(3) { transition-delay: .16s }
  .reveal.in .fnd-fact:nth-child(4) { transition-delay: .24s }
  .fnd-serv-item, .fnd-exp-item, .fnd-for-item { transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
  .fnd-serv-item:hover, .fnd-exp-item:hover, .fnd-for-item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(22,38,28,.12); }
}
@media (prefers-reduced-motion: reduce) {
  .fnd-routes .fnd-route, .fnd-fact { opacity: 1; transform: none; animation: none; }
}

/* The consent-withdrawal control, styled as the quiet link it should be. */
.ft-consent { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: inherit; opacity: .8; text-decoration: underline; text-underline-offset: 3px; }
.ft-consent:hover { opacity: 1; color: var(--gold); }

/* ==========================================================================
   FOUNDER PROFILE — /ehab-asker
   ==========================================================================
   Reshaped to read as the same site as the home page rather than a page that
   happens to live on it: forest and gold, the same numbered section heads, the
   same sheen-on-hover and fill-bar devices, the same drawn-line motif.

   TWO THINGS THIS BLOCK ASSUMES, both now true in the markup:

   1. The page is wrapped in `.ed .ed-founder`. Without the `.ed` every var()
      below resolves to nothing — which is exactly the bug that made the gold
      CTA render as invisible near-black text on the dark closing band.

   2. Dark mode needs no separate palette here. `.ed-dark .ed` flips the tokens
      at the root of the scope, so every colour written as var() follows the
      theme on its own. Only the few places that pin a literal colour — the
      permanently-dark KPMG and closing bands — carry an explicit .ed-dark rule,
      and they carry it to stop the band going *lighter* than the page around it.

   The `edh-*` helpers are re-declared under `.ed-founder` on purpose. On the
   home page they are nested inside `.edh-hero`; using them in the founder page
   body would otherwise silently do nothing.

   ALL MOTION IS GATED. Every animation sits inside a
   `prefers-reduced-motion: no-preference` block. With motion reduced the page
   is fully readable and simply still.
   ========================================================================== */

.ed-founder { background: var(--paper); color: var(--ink); overflow-x: clip; }

/* ---- shared helpers, re-declared at founder scope ---- */
.ed-founder .edh-goldtext {
  background: var(--gold-grad-bright); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; font-style: normal;
}
.ed-founder .edh-arrow { display: inline-block; margin-inline-start: .5em; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.ed-founder a:hover .edh-arrow, .ed-founder .ed-btn:hover .edh-arrow { transform: translateX(var(--ed-arr, 4px)); }
[dir="rtl"] .ed-founder { --ed-arr: -4px; }

/* the gold sweep. A pseudo-element would collide with .ed-btn::after, which is
   already used for the button's own shine — hence a real element. */
.ed-founder .edh-sheen {
  position: absolute; inset-block: 0; inset-inline-start: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); pointer-events: none; opacity: 0;
}
.ed-founder .fnd-route, .ed-founder .fnd-exp-item, .ed-founder .fnd-serv-item,
.ed-founder .fnd-vcard, .ed-founder .fnd-award, .ed-founder .fnd-galitem,
.ed-founder .fnd-reach-item, .ed-founder .ed-btn { position: relative; overflow: hidden; }

/* the gold rule that fills in under a heading */
.ed-founder .edh-draw-rule {
  display: block; height: 2px; width: 64px; margin-top: 18px; border-radius: 2px;
  background: var(--gold-grad-bright); transform-origin: inset-inline-start center;
}
.ed-founder .edh-fillbar {
  position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--gold-grad-bright); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
[dir="rtl"] .ed-founder .edh-fillbar { transform-origin: 100% 50%; }
.ed-founder .fnd-exp-item:hover .edh-fillbar,
.ed-founder .fnd-serv-item:hover .edh-fillbar,
.ed-founder .fnd-for-item:hover .edh-fillbar { transform: scaleX(1); }

/* ---- section heads: numbered, like the home page ---- */
.ed-founder .fnd-sechead { position: relative; margin-bottom: clamp(26px,4vw,44px); }
.ed-founder .fnd-sechead .num {
  display: block; font-family: var(--ed-serif); font-size: clamp(2.4rem,5vw,3.6rem);
  line-height: 1; color: var(--gold); opacity: .28; margin-bottom: .2em;
}
.ed-founder .fnd-eyebrow {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--label);
}
.ed-founder .fnd-sechead h2 {
  font-family: var(--ed-serif); font-weight: 400; margin: .35rem 0 0;
  font-size: clamp(1.9rem,4vw,3rem); line-height: 1.12; color: var(--ink);
}
.ed-founder .fnd-sechead h2:lang(ar) { line-height: 1.5; font-size: clamp(1.6rem,3.4vw,2.4rem); }
.ed-founder .fnd-sechead.on-dark h2 { color: #F7F3E8; }
.ed-founder .fnd-sechead.on-dark .fnd-eyebrow { color: rgba(235,216,164,.75); }
.ed-founder .fnd-sechead.on-dark .num { color: #CBAA63; opacity: .35; }

/* ---- HERO ---- */
.ed-founder .fnd-hero { padding-block: clamp(46px,7vw,96px) clamp(40px,6vw,80px); }
.ed-founder .fnd-hero-in {
  position: relative; z-index: 2; display: grid; gap: clamp(28px,5vw,64px);
  grid-template-columns: 1.15fr .85fr; align-items: center;
}
.ed-founder .fnd-h1 {
  font-family: var(--ed-serif); font-weight: 400; margin: 1.1rem 0 0;
  font-size: clamp(2.6rem,6vw,4.6rem); line-height: 1.04; letter-spacing: -.01em;
}
.ed-founder .fnd-h1.ar { font-size: clamp(2.1rem,5vw,3.6rem); line-height: 1.35; }
.ed-founder .fnd-role {
  margin: .9rem 0 0; display: flex; align-items: center; gap: .6rem;
  font-size: .95rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft);
}
.ed-founder .fnd-role-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none;
  box-shadow: 0 0 0 4px rgba(203,170,99,.18);
}

/* three route tiles */
.ed-founder .fnd-routes { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 2rem; }
.ed-founder .fnd-route {
  display: block; padding: 18px 18px 20px; border-radius: 16px; text-decoration: none;
  border: 1px solid var(--rule); background: var(--paper);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.ed-founder .fnd-route .ic { display: block; font-size: 15px; color: var(--gold); margin-bottom: 10px; }
.ed-founder .fnd-route .t { display: block; font-weight: 700; font-size: 1rem; color: var(--ink); }
.ed-founder .fnd-route .s { display: block; margin-top: 5px; font-size: .82rem; color: var(--ink-soft); line-height: 1.6; }
.ed-founder .fnd-route .go { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; color: var(--gold); opacity: 0; transition: opacity .3s, transform .3s; }
.ed-founder .fnd-route:hover { border-color: rgba(203,170,99,.7); box-shadow: 0 18px 40px rgba(28,42,32,.13); transform: translateY(-4px); }
.ed-founder .fnd-route:hover .go { opacity: 1; }
.ed-founder .fnd-route.is-lead { background: var(--forest); border-color: transparent; }
.ed-founder .fnd-route.is-lead .t { color: #F7F3E8; }
.ed-founder .fnd-route.is-lead .s { color: rgba(247,243,232,.72); }
.ed-founder .fnd-route.is-lead .ic { color: #CBAA63; }

/* the portrait, ringed rather than framed */
.ed-founder .fnd-hero-photo { position: relative; display: grid; place-items: center; }
.ed-founder .fnd-photo-in {
  position: relative; width: min(100%, 380px); aspect-ratio: 4/5; border-radius: 22px;
  overflow: hidden; border: 1px solid var(--rule); background: var(--panel);
  box-shadow: 0 30px 70px rgba(28,42,32,.20);
}
.ed-founder .fnd-photo-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-founder .fnd-photo-ph {
  width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 14px;
  color: var(--label); text-align: center; padding: 20px;
}
.ed-founder .fnd-photo-ph img { width: 84px; height: 84px; object-fit: contain; opacity: .5; }
.ed-founder .fnd-photo-ph span { font-size: .8rem; letter-spacing: .04em; }
.ed-founder .fnd-photo-sheen {
  position: absolute; inset-block: -20%; inset-inline-start: -50%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.ed-founder .fnd-ring {
  position: absolute; border-radius: 50%; border: 1px dashed rgba(203,170,99,.45); pointer-events: none;
}
.ed-founder .fnd-ring.a { inset: -6%; }
.ed-founder .fnd-ring.b { inset: -14%; border-style: dotted; border-color: rgba(28,42,32,.16); }
.ed-founder .fnd-halo {
  position: absolute; inset: 6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(203,170,99,.30), transparent 68%); filter: blur(26px);
}
.ed-founder .fnd-badge {
  /* CENTRED WITHOUT A TRANSFORM, because transform is physical and this site is RTL by
     default. inset-inline-start:50% + translateX(-50%) cancel only under dir=ltr: under
     dir=rtl the inset resolves to right:50% while translateX still moves LEFT, so the two
     added up and the badge landed at x -32 to 114 inside a container running x 48 to 327 —
     displaced by 146px, its own full width, with 32px clipped away by .fnd-hero's
     overflow:hidden. left:0 + right:0 + margin-inline:auto centres it in both directions
     and leaves transform free for the float animation (see @keyframes fndBadgeFloat, which
     MUST be patched too or the first animation frame reinstates the bug).
     Measured after: Arabic x 114.5 to 260.6, English x 107 to 268 (unchanged). */
  position: absolute; bottom: -14px; left: 0; right: 0; margin-inline: auto; width: fit-content;
  background: var(--forest); color: #EBD8A4; font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 12px 26px rgba(28,42,32,.28);
}

/* ---- FACTS, with count-up ---- */
.ed-founder .fnd-facts { padding-block: clamp(30px,5vw,56px); border-block: 1px solid var(--rule); background: var(--panel); }
.ed-founder .fnd-factgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(16px,3vw,34px); }
.ed-founder .fnd-fact { text-align: center; }
.ed-founder .fnd-fact .v {
  display: block; font-family: var(--ed-serif); font-size: clamp(2rem,4.4vw,3.2rem);
  line-height: 1; background: var(--gold-grad-bright); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.ed-founder .fnd-fact .bar { display: block; height: 2px; width: 34px; margin: 14px auto; background: var(--rule); border-radius: 2px; overflow: hidden; }
.ed-founder .fnd-fact .bar i { display: block; height: 100%; width: 100%; background: var(--gold-grad-bright); transform: scaleX(0); transform-origin: 0 50%; }
.ed-founder .fnd-fact .l { display: block; font-size: .82rem; line-height: 1.65; color: var(--ink-soft); max-width: 22ch; margin-inline: auto; }

/* ---- VISION ---- */
.ed-founder .fnd-vision { padding-block: clamp(48px,7vw,92px); }
.ed-founder .fnd-vision-in { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; }
.ed-founder .fnd-vcard {
  padding: clamp(22px,3vw,32px); border-radius: 18px; border: 1px solid var(--rule); background: var(--paper);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;
}
.ed-founder .fnd-vcard:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(28,42,32,.13); border-color: rgba(203,170,99,.55); }
.ed-founder .fnd-vcard h3 { font-family: var(--ed-serif); font-weight: 400; font-size: 1.35rem; margin: .6rem 0 .7rem; color: var(--ink); }
.ed-founder .fnd-vcard h3:lang(ar) { line-height: 1.55; }
.ed-founder .fnd-vcard p { margin: 0; font-size: .9rem; line-height: 1.85; color: var(--ink-soft); }
.ed-founder .fnd-vcard-lead { background: var(--forest); border-color: transparent; }
.ed-founder .fnd-vcard-lead .fnd-eyebrow { color: rgba(235,216,164,.8); }
.ed-founder .fnd-vcard-lead .lead-h {
  font-size: clamp(1.5rem,2.6vw,2.1rem); background: var(--gold-grad-bright);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.ed-founder .fnd-vcard-lead p { color: rgba(247,243,232,.80); }

/* ---- KPMG, a permanently dark band ---- */
.ed-founder .fnd-kpmg { position: relative; overflow: hidden; background: var(--forest); color: #F7F3E8; padding-block: clamp(52px,8vw,104px); }
.ed-founder .fnd-kpmg-glow { position: absolute; inset-block-start: -30%; inset-inline-end: -10%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(203,170,99,.22), transparent 70%); filter: blur(30px); pointer-events: none; }
.ed-founder .fnd-kpmg-line { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 160px; color: rgba(203,170,99,.4); pointer-events: none; }
.ed-founder .fnd-kpmg-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,4vw,56px); align-items: start; }
.ed-founder .fnd-kpmg-text p { margin: 0; font-size: 1rem; line-height: 2; color: rgba(247,243,232,.86); }
.ed-founder .fnd-kpmg-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ed-founder .fnd-kpmg-points li { position: relative; padding-inline-start: 26px; }
.ed-founder .fnd-kpmg-points .dot { position: absolute; inset-inline-start: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-grad-bright); }
.ed-founder .fnd-kpmg-points strong { display: block; color: #F7F3E8; font-size: .98rem; margin-bottom: 5px; }
.ed-founder .fnd-kpmg-points .d { display: block; font-size: .86rem; line-height: 1.8; color: rgba(247,243,232,.68); }

/* ---- EXPERTISE ---- */
.ed-founder .fnd-exp { padding-block: clamp(48px,7vw,92px); }
.ed-founder .fnd-expgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.ed-founder .fnd-exp-item {
  padding: clamp(20px,2.6vw,28px); border-radius: 16px; border: 1px solid var(--rule); background: var(--paper);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;
}
.ed-founder .fnd-exp-item:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(28,42,32,.13); border-color: rgba(203,170,99,.55); }
.ed-founder .fnd-exp-item .n { display: block; font-family: var(--ed-serif); font-size: 1.5rem; color: var(--gold); opacity: .45; margin-bottom: 8px; }
.ed-founder .fnd-exp-item h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .5rem; color: var(--ink); }
.ed-founder .fnd-exp-item p { margin: 0; font-size: .86rem; line-height: 1.8; color: var(--ink-soft); }

/* ---- CREDENTIALS ---- */
.ed-founder .fnd-cred { padding-block: clamp(40px,6vw,80px); background: var(--panel); border-block: 1px solid var(--rule); }
.ed-founder .fnd-cred-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px,4vw,52px); align-items: start; }
.ed-founder .fnd-credlist { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 12px; }
.ed-founder .fnd-credlist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.ed-founder .fnd-credlist b { font-size: 1.02rem; color: var(--ink); }
.ed-founder .fnd-credlist span { font-size: .85rem; color: var(--ink-soft); }
.ed-founder .fnd-award { padding: clamp(22px,3vw,30px); border-radius: 18px; background: var(--forest); border: 1px solid transparent; }
.ed-founder .fnd-award .fnd-eyebrow { color: rgba(235,216,164,.8); }
.ed-founder .fnd-award-in { display: flex; align-items: center; gap: 18px; margin-top: 1rem; }
.ed-founder .fnd-award .rank {
  position: relative; flex: none; display: grid; place-items: center; width: 74px; height: 74px;
  border-radius: 50%; background: var(--gold-grad-bright); color: #241A05;
}
.ed-founder .fnd-award .rank b { font-family: var(--ed-serif); font-size: 1.5rem; position: relative; z-index: 1; }
.ed-founder .fnd-award .rank .ping { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(203,170,99,.6); opacity: 0; }
.ed-founder .fnd-award strong { display: block; color: #F7F3E8; font-size: 1.05rem; margin-bottom: 5px; }
.ed-founder .fnd-award p { margin: 0; font-size: .86rem; line-height: 1.8; color: rgba(247,243,232,.72); }

/* ---- GALLERY + VIDEO ---- */
.ed-founder .fnd-gal, .ed-founder .fnd-vids { padding-block: clamp(44px,6vw,84px); }
.ed-founder .fnd-galgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 14px; }
.ed-founder .fnd-galitem { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule); background: var(--panel); }
.ed-founder .fnd-galitem img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ed-founder .fnd-galitem:hover img { transform: scale(1.05); }
.ed-founder .fnd-vidgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 16px; }
.ed-founder .fnd-video-frame { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule); background: #000; }
.ed-founder .fnd-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- SERVICES ---- */
.ed-founder .fnd-serv { padding-block: clamp(48px,7vw,92px); scroll-margin-top: 90px; }
.ed-founder .fnd-serv-lead { margin: 1rem 0 0; max-width: 60ch; font-size: .95rem; line-height: 1.9; color: var(--ink-soft); }
.ed-founder .fnd-servgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.ed-founder .fnd-serv-item {
  padding: clamp(18px,2.4vw,24px); border-radius: 16px; border: 1px solid var(--rule); background: var(--paper);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;
}
.ed-founder .fnd-serv-item:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(28,42,32,.13); border-color: rgba(203,170,99,.55); }
.ed-founder .fnd-serv-item h3 { font-size: .98rem; font-weight: 700; margin: 0 0 .3rem; color: var(--ink); }
.ed-founder .fnd-serv-item .alt { display: block; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; }
.ed-founder .fnd-serv-item p { margin: 0; font-size: .83rem; line-height: 1.8; color: var(--ink-soft); }
.ed-founder .fnd-serv-cta { margin-top: clamp(26px,4vw,44px); text-align: center; }
.ed-founder .fnd-serv-cta p { margin: 0 auto 1.3rem; max-width: 56ch; font-size: .95rem; line-height: 1.9; color: var(--ink-soft); }

/* ---- WHO IT IS FOR ---- */
.ed-founder .fnd-for { padding-block: clamp(44px,6vw,84px); background: var(--panel); border-block: 1px solid var(--rule); }
.ed-founder .fnd-forgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.ed-founder .fnd-for-item { position: relative; overflow: hidden; padding: clamp(20px,2.6vw,28px); border-radius: 16px; border: 1px solid var(--rule); background: var(--paper); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.ed-founder .fnd-for-item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28,42,32,.12); }
.ed-founder .fnd-for-item h3 { font-family: var(--ed-serif); font-weight: 400; font-size: 1.2rem; margin: 0 0 .6rem; color: var(--ink); }
.ed-founder .fnd-for-item p { margin: 0; font-size: .87rem; line-height: 1.85; color: var(--ink-soft); }

/* ---- REACH ---- */
.ed-founder .fnd-reach { padding-block: clamp(44px,6vw,84px); }
.ed-founder .fnd-reachgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 14px; }
.ed-founder .fnd-reach-item {
  display: block; padding: 20px; border-radius: 16px; text-decoration: none;
  border: 1px solid var(--rule); background: var(--paper);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.ed-founder .fnd-reach-item .k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.ed-founder .fnd-reach-item .v { display: block; margin-top: 8px; font-size: 1rem; font-weight: 700; color: var(--ink); }
.ed-founder .fnd-reach-item .go { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; color: var(--gold); opacity: 0; transition: opacity .3s; }
.ed-founder .fnd-reach-item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(28,42,32,.13); border-color: rgba(203,170,99,.6); }
.ed-founder .fnd-reach-item:hover .go { opacity: 1; }
.ed-founder .fnd-reach-lead { background: var(--forest); border-color: transparent; }
.ed-founder .fnd-reach-lead .k { color: rgba(235,216,164,.75); }
.ed-founder .fnd-reach-lead .v { color: #F7F3E8; }

/* ---- CLOSING BAND ----
   The band that was showing an invisible button. It is permanently dark in both
   themes, so its buttons are the on-dark pair: gold fill, and .ed-btn-ghost. */
.ed-founder .fnd-close { padding-block: clamp(44px,6vw,88px); }
.ed-founder .fnd-close-in {
  position: relative; overflow: hidden; text-align: center; border-radius: 22px;
  padding: clamp(34px,5vw,64px) clamp(20px,4vw,48px); background: var(--forest);
  border: 1px solid rgba(203,170,99,.35);
}
.ed-founder .fnd-close-glow { position: absolute; inset-block-start: -40%; inset-inline-start: 50%; transform: translateX(-50%); width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(203,170,99,.24), transparent 68%); filter: blur(32px); pointer-events: none; }
.ed-founder .fnd-close-in > * { position: relative; z-index: 1; }
.ed-founder .fnd-close-in h2 { font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.7rem,3.4vw,2.6rem); line-height: 1.2; margin: 0 0 .8rem; color: #F7F3E8; }
.ed-founder .fnd-close-in h2:lang(ar) { line-height: 1.6; }
.ed-founder .fnd-close-in p { margin: 0 auto 1.8rem; max-width: 54ch; font-size: .95rem; line-height: 1.9; color: rgba(247,243,232,.78); }
.ed-founder .fnd-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.ed-founder .fnd-close .eq.sm {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 0; display: flex; align-items: flex-end;
  justify-content: center; gap: 6px; opacity: .16; pointer-events: none;
}
.ed-founder .fnd-close .eq.sm span { display: block; width: 5px; border-radius: 3px 3px 0 0; background: #CBAA63; }

/* DARK MODE. Tokens flip on their own; these are the literals that cannot.
   The forest bands are darkened rather than lightened so they still read as
   bands against a dark page instead of glowing brighter than it. */
.ed-dark .ed-founder .fnd-kpmg,
.ed-dark .ed-founder .fnd-vcard-lead,
.ed-dark .ed-founder .fnd-award,
.ed-dark .ed-founder .fnd-route.is-lead,
.ed-dark .ed-founder .fnd-reach-lead,
.ed-dark .ed-founder .fnd-close-in { background: #14201A; }
.ed-dark .ed-founder .fnd-photo-in { box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.ed-dark .ed-founder .fnd-route:hover,
.ed-dark .ed-founder .fnd-exp-item:hover,
.ed-dark .ed-founder .fnd-serv-item:hover,
.ed-dark .ed-founder .fnd-vcard:hover,
.ed-dark .ed-founder .fnd-for-item:hover,
.ed-dark .ed-founder .fnd-reach-item:hover { box-shadow: 0 20px 44px rgba(0,0,0,.5); }
.ed-dark .ed-founder .fnd-ring.b { border-color: rgba(235,216,164,.14); }
.ed-dark .ed-founder .edh-sheen { background: linear-gradient(100deg, transparent, rgba(235,216,164,.14), transparent); }

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .ed-founder .fnd-hero-in { grid-template-columns: 1fr; }
  .ed-founder .fnd-hero-photo { order: -1; }
  .ed-founder .fnd-photo-in { width: min(100%, 300px); }
  .ed-founder .fnd-kpmg-grid, .ed-founder .fnd-cred-in { grid-template-columns: 1fr; }
  .ed-founder .fnd-vision-in, .ed-founder .fnd-expgrid, .ed-founder .fnd-forgrid { grid-template-columns: repeat(2,1fr); }
  .ed-founder .fnd-servgrid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 700px) {
  .ed-founder .fnd-routes, .ed-founder .fnd-vision-in, .ed-founder .fnd-expgrid,
  .ed-founder .fnd-forgrid, .ed-founder .fnd-servgrid { grid-template-columns: 1fr; }
  .ed-founder .fnd-factgrid { grid-template-columns: repeat(2,1fr); row-gap: 26px; }
  .ed-founder .fnd-cta { flex-direction: column; }
  .ed-founder .fnd-cta .ed-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   MOTION. Everything below is skipped entirely when the reader has asked for
   reduced motion, and nothing above depends on it to be legible.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* headings draw their gold rule in when the section arrives */
  .ed-founder .edh-draw-rule { transform: scaleX(0); }
  .ed-founder [data-rv].in .edh-draw-rule,
  .ed-founder .in .edh-draw-rule { animation: fndRule .8s .1s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes fndRule { from { transform: scaleX(0) } to { transform: scaleX(1) } }

  /* the count-up bar fills alongside the number */
  .ed-founder [data-rv].in .fnd-fact .bar i { animation: fndRule 1s .2s cubic-bezier(.2,.7,.2,1) both; }

  /* section numbers rise */
  .ed-founder [data-rv].in .fnd-sechead .num { animation: fndNum .7s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes fndNum { from { opacity: 0; transform: translateY(14px) } to { opacity: .28; transform: none } }
  .ed-founder .fnd-sechead.on-dark .num { }

  /* the portrait rings turn, in opposite directions, slowly */
  .ed-founder .fnd-ring.a { animation: fndSpin 34s linear infinite; }
  .ed-founder .fnd-ring.b { animation: fndSpin 46s linear infinite reverse; }
  @keyframes fndSpin { to { transform: rotate(360deg) } }

  /* the halo breathes */
  .ed-founder .fnd-halo { animation: fndBreathe 7s ease-in-out infinite; }
  @keyframes fndBreathe { 0%,100% { opacity: .55; transform: scale(1) } 50% { opacity: .95; transform: scale(1.07) } }

  /* a slow sheen crosses the portrait */
  .ed-founder .fnd-photo-sheen { animation: fndSheen 7s ease-in-out infinite; }
  @keyframes fndSheen {
    0%, 62% { transform: translateX(-160%) skewX(-18deg) }
    100%    { transform: translateX(420%)  skewX(-18deg) }
  }
  [dir="rtl"] .ed-founder .fnd-photo-sheen { animation-name: fndSheenR; }
  @keyframes fndSheenR {
    0%, 62% { transform: translateX(160%)  skewX(18deg) }
    100%    { transform: translateX(-420%) skewX(18deg) }
  }

  /* the badge floats */
    /* fndBadgeFloat, NOT fndFloat. This block used to redeclare @keyframes fndFloat, and a
     second keyframes block with the same name replaces the first wholesale rather than
     merging with it. The portrait at .fnd-hero-photo img consumes fndFloat too, so it
     silently inherited the badge's translateX(-50%) centring and rendered permanently
     offset by half its own width — harmless on the 84px placeholder, but .fnd-photo-in is
     overflow:hidden, so a real 380px portrait would have had its left half clipped away
     and the right half of the frame left empty. On the hero of the page the business-card
     QR code points at. */
  .ed-founder .fnd-badge { animation: fndBadgeFloat 5.5s ease-in-out infinite; }
    /* translateY ONLY — the centring no longer lives on transform (see .ed-founder
     .fnd-badge above). An animated transform overrides the static one, so leaving
     translateX(-50%) here would re-apply the RTL displacement on the first animation
     frame for every visitor who has not asked for reduced motion. Ship this WITH the
     .fnd-badge patch; neither is correct alone. */
  @keyframes fndBadgeFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }

  /* hover sheen on every card and tile */
  .ed-founder .fnd-route:hover .edh-sheen,
  .ed-founder .fnd-exp-item:hover .edh-sheen,
  .ed-founder .fnd-serv-item:hover .edh-sheen,
  .ed-founder .fnd-vcard:hover .edh-sheen,
  .ed-founder .fnd-award:hover .edh-sheen,
  .ed-founder .fnd-galitem:hover .edh-sheen,
  .ed-founder .fnd-reach-item:hover .edh-sheen,
  .ed-founder .ed-btn:hover .edh-sheen { animation: fndSweep .85s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes fndSweep {
    from { transform: translateX(0) skewX(-18deg); opacity: 0 }
    35%  { opacity: 1 }
    to   { transform: translateX(420%) skewX(-18deg); opacity: 0 }
  }

  /* the KPMG line draws itself when the band arrives */
  .ed-founder .fnd-kpmg-line .edh-draw { stroke-dasharray: 1600; stroke-dashoffset: 1600; }
  .ed-founder .fnd-kpmg.in .fnd-kpmg-line .edh-draw { animation: fndDraw 2.4s .2s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes fndDraw { to { stroke-dashoffset: 0 } }

  /* the KPMG bullet dots arrive with their text */
  .ed-founder .fnd-kpmg-points.in .dot { animation: fndPop .5s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes fndPop { from { transform: scale(0) } to { transform: scale(1) } }

  /* the rank badge pings — the one pure attention device on the page, on the
     single strongest external signal he has */
  .ed-founder .fnd-award .rank .ping   { animation: fndPing 2.8s ease-out infinite; }
  .ed-founder .fnd-award .rank .ping.d { animation-delay: 1.4s; }
  @keyframes fndPing { 0% { transform: scale(1); opacity: .75 } 75%,100% { transform: scale(1.75); opacity: 0 } }

  /* the equaliser under the closing band */
  .ed-founder .fnd-close .eq.sm span { animation: fndEq var(--d,3s) var(--dl,0s) ease-in-out infinite alternate; transform-origin: 50% 100%; }
  @keyframes fndEq { from { transform: scaleY(.35) } to { transform: scaleY(1) } }

  /* the gold glow behind the dark bands drifts */
  .ed-founder .fnd-kpmg-glow, .ed-founder .fnd-close-glow { animation: fndBreathe 9s ease-in-out infinite; }
}


/* ==========================================================================
   HOME HERO + HOME SECTIONS  (.edh-*)
   ==========================================================================
   MOVED HERE OUT OF index.blade.php, where it lived in a 420-line inline
   <style> block.

   WHY. It is the site's signature look — the animated grid, the drifting
   blobs, the conic sweep, the floating symbols, the equaliser, the drawn
   performance line, the gold headline treatment. Being page-local meant it
   was reachable from exactly one page, so the founder profile reusing the
   same markup got the classes and none of the rules: every decorative layer
   fell back to a static, full-width, in-flow block that shoved the actual
   content a thousand pixels down the page.

   The block contains no Blade interpolation at all, so it was only ever
   inline by habit. Moving it costs the home page nothing (same rules, same
   order, now cached with the rest of the stylesheet) and lets any page opt
   into the house hero by using the same class names.
   ========================================================================== */
/* ============================================================================
   HOME — platform theme (scoped .edh — page-specific layer only)
   PERF: every @keyframes + animation assignment is motion-gated; all gradient
   text ships STATIC (never animate background-position on clipped text);
   transform / opacity / stroke animations only; no background-attachment:fixed.
   ==========================================================================*/
.edh { overflow-x: hidden; }
.edh .edh-wrap { max-width: 1240px; margin-inline: auto; padding-inline: 24px; }

/* ---- shared page bits ---- */
.edh .edh-goldtext {
  font-style: italic;
  background: var(--gold-grad-shine); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; /* static — perf guardrail */
}
[dir="rtl"] .edh .edh-goldtext { font-style: normal; }
.edh .edh-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-text); }
[dir="rtl"] .edh .edh-eyebrow { letter-spacing: .08em; }
.edh .edh-arrow { display: inline-block; margin-inline-start: 11px; }
.edh .edh-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(158,126,58,.35); border-radius: 999px;
  padding: 6px 13px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); white-space: nowrap; }
[dir="rtl"] .edh .edh-chip { letter-spacing: .04em; }
.edh .edh-chip .tick { color: var(--gold-text); }
.ed-dark .edh .edh-chip { background: rgba(255,255,255,.06); border-color: rgba(216,193,130,.45); color: #E9DFC2; }
.edh .edh-fillbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(203,170,99,.18); overflow: hidden; }
.edh .edh-fillbar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(1);
  background: linear-gradient(90deg,#B08D45,#E4CB90,#CBAA63); }
[dir="rtl"] .edh .edh-fillbar i { transform-origin: right; }

/* ============================ HERO ============================ */
.edh-hero { position: relative; overflow: hidden; text-align: center; padding: 84px 24px 78px; isolation: isolate; }
.edh-hero .edh-grid { position: absolute; inset: -2px; pointer-events: none;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 46px 46px; opacity: .35;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%); }
.ed-dark .edh-hero .edh-grid { opacity: .08; }
.edh-hero .blob { position: absolute; border-radius: 50%; pointer-events: none; }
.edh-hero .blob.g { left: -8%; top: -14%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(203,170,99,.18), transparent 65%); }
.edh-hero .blob.f { right: -10%; bottom: -18%; width: 540px; height: 540px; background: radial-gradient(circle, rgba(62,90,69,.16), transparent 65%); }
.edh-hero .conic { position: absolute; left: 50%; top: 36%; width: 660px; height: 660px; margin: -330px 0 0 -330px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(203,170,99,0), rgba(203,170,99,.20), rgba(62,90,69,.12), rgba(203,170,99,0));
  filter: blur(46px); pointer-events: none; will-change: transform; }
.edh-hero canvas[data-dust] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.edh-hero .sym { position: absolute; bottom: -40px; font-family: var(--ed-serif); color: rgba(176,140,63,.4); pointer-events: none; opacity: 0; }
.edh-hero .eq { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; display: flex; align-items: flex-end; gap: 10px;
  padding: 0 26px; opacity: .32; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.edh-hero .eq span { flex: 1; transform-origin: bottom; transform: scaleY(.4);
  background: linear-gradient(180deg, rgba(203,170,99,0), rgba(176,140,63,.55)); }
.edh-hero .dashring { position: absolute; right: 4%; top: 10%; width: 230px; height: 230px; pointer-events: none; }
.edh-hero .dashring i { display: block; width: 100%; height: 100%; border: 1px dashed rgba(203,170,99,.5); border-radius: 50%; }
.edh-hero .chart { position: absolute; pointer-events: none; color: #CBAA63; }
.edh-hero .chart.l { left: -30px; bottom: -6px; width: 58%; max-width: 760px; opacity: .4; }
.edh-hero .chart.r { right: -50px; top: 16%; width: 44%; max-width: 600px; opacity: .45; }
.edh-hero .coin { position: absolute; pointer-events: none; }
.edh-hero .coin i { display: block; border-radius: 50%; }
.edh-hero .coin.g i { background: radial-gradient(circle at 35% 30%, #E3CE96, #B08C3F); box-shadow: 0 10px 22px rgba(166,125,46,.3); }
.edh-hero .coin.f i { background: radial-gradient(circle at 35% 30%, #3E5A45, #1C2A20); }
.edh-hero .coin.s i { background: radial-gradient(circle at 35% 30%, #E9D9A8, #C9A758 55%, #8F6D2A);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.25), 0 12px 26px rgba(166,125,46,.35); }
.edh-hero .vlab { position: absolute; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-size: 10px; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase; pointer-events: none; }
/* Full opacity and the small-text gold token: at 10px these must clear 4.5:1, and
   #9E7E3A at .7 opacity did not. --gold-text (#7A5F26) is the palette's own token for
   gold at caption sizes; the dark counterpart is the same #D2B36C the other gold
   labels use on the forest background. */
.edh-hero .vlab.l { left: 20px; color: var(--gold-text); }
.edh-hero .vlab.r { right: 20px; color: #4A5A4E; }
.ed-dark .edh-hero .vlab.l { color: #D2B36C; }
.ed-dark .edh-hero .vlab.r { color: rgba(236,232,218,.72); }
@media (max-width: 1100px) { .edh-hero .vlab { display: none; } }
@media (max-width: 760px) { .edh-hero .chart.r, .edh-hero .dashring { display: none; } }

.edh-hero .hero-in { position: relative; max-width: 1020px; margin: 0 auto; }
.edh-pill { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #E3D9BE; background: rgba(255,255,255,.72);
  border-radius: 999px; padding: 9px 18px; font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-text); }
[dir="rtl"] .edh-pill { letter-spacing: .06em; }
.edh-pill .star { color: var(--gold-text); }
.ed-dark .edh-pill { background: rgba(255,255,255,.055); border-color: rgba(216,193,130,.24); color: #E9DFC2; }

.edh-h1 { margin: 26px auto 0; max-width: 16ch; font-family: var(--ed-serif); font-weight: 400;
  font-size: clamp(3rem, 7.6vw, 5.125rem); line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
.edh-h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.edh-h1 .w.em-w { padding: .12em .22em .05em; margin: -.12em -.22em -.05em; }
.edh-h1 .t { display: inline-block; }
.edh-h1 em.t { padding: .12em .22em .05em; margin: -.12em 0 -.05em; }
.edh-h1 .t.green {
  background: linear-gradient(110deg,#2E4A36 0%,#2E4A36 40%,#8FBE98 50%,#2E4A36 60%,#2E4A36 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; /* static — perf guardrail */
}
.ed-dark .edh-h1 .t.green { background-image: linear-gradient(110deg,#D9E7DB 0%,#D9E7DB 40%,#F5EBCB 50%,#D9E7DB 60%,#D9E7DB 100%); }
.edh-h1.ar { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: clamp(2.6rem, 6.4vw, 3.875rem); line-height: 1.4; letter-spacing: 0; }

.edh-lead { margin: 26px auto 0; max-width: 50ch; font-size: 16.5px; line-height: 1.8; color: #4A5A4E; }
.ed-dark .edh-lead { color: rgba(236,232,218,.72); }

.edh-ctarow { margin-top: 32px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
/* ON A PHONE THE TWO CTAs STACK FULL WIDTH.
   At 375px the row is 327px and the buttons measured 248.3px and 249.6px in English,
   156.8px and 169.7px in Arabic — flex-wrap put them on separate lines in both languages
   regardless, at two different widths, each floating in 78px to 170px of empty column.
   Stacking them at full width makes the pair read as one decision.
   Measured after at 375px: both 327px, heights unchanged at 60px and 56px, row height
   unchanged at 130px, scrollWidth stays 375. Above 575px nothing changes — verified at
   768px, where the two still sit side by side. */
@media (max-width: 575px) {
  .edh-ctarow { flex-direction: column; align-items: stretch; }
  .edh-ctarow > .edh-btn-gold, .edh-ctarow > .edh-btn-play { width: 100%; justify-content: center; }
}
.edh-btn-gold { position: relative; overflow: hidden; display: inline-flex; align-items: center;
  background: linear-gradient(100deg,#B08D45,#E4CB90,#B08C3F,#D3B871); background-size: 260% 100%;
  color: #241A05; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: 16px 32px; border-radius: 3px; text-decoration: none; box-shadow: 0 12px 26px rgba(166,125,46,.32); }
.edh-btn-gold:hover, .edh-btn-gold:focus { color: #241A05; }
[dir="rtl"] .edh-btn-gold { letter-spacing: .04em; }
.edh-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-160%); pointer-events: none; }
.edh-btn-play { display: inline-flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ink); color: var(--ink);
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: 12px 26px 12px 14px; border-radius: 3px;
  text-decoration: none; transition: border-color .3s ease, box-shadow .3s ease; }
[dir="rtl"] .edh-btn-play { letter-spacing: .04em; padding: 12px 14px 12px 26px; }
.edh-btn-play:hover { border-color: #B08C3F; box-shadow: 0 12px 26px rgba(22,38,28,.14); color: var(--ink); }
.ed-dark .edh-btn-play { background: rgba(255,255,255,.06); border-color: rgba(216,193,130,.45); color: #F3EFE2; }
.ed-dark .edh-btn-play:hover { color: #F3EFE2; }
.edh-btn-play .pwrap { position: relative; display: inline-flex; width: 30px; height: 30px; flex: none; }
.edh-btn-play .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid #B08C3F; opacity: 0; }
.edh-btn-play .pbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: #F0DFAE; font-size: 9px; padding-left: 2px; box-sizing: border-box; }
.ed-dark .edh-btn-play .pbtn { background: #16261C; }

.edh-flipline { margin-top: 38px; display: flex; justify-content: center; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-family: var(--ed-serif); font-size: 27px; color: #4A5A4E; }
[dir="rtl"] .edh-flipline { font-family: 'Cairo', sans-serif; }
.ed-dark .edh-flipline { color: rgba(236,232,218,.72); }
.edh-flipline .flip { display: inline-block; min-width: 9ch; text-align: start;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: opacity .35s ease, transform .35s ease; }
.edh-kick { margin-top: 20px; font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); }
[dir="rtl"] .edh-kick { letter-spacing: .06em; }
.ed-dark .edh-kick { color: #D2B36C; }

/* ============================ TICKER BAND ============================ */
.edh-tickband { background: linear-gradient(90deg,#16241B,#1C2A20 50%,#16241B);
  border-top: 1px solid rgba(216,193,130,.25); border-bottom: 1px solid rgba(216,193,130,.25); overflow: hidden; padding: 13px 0; }
.edh-tickband .track { display: flex; width: max-content; }
.edh-tickband .set { display: flex; gap: 38px; padding-inline-end: 38px; font-size: 10.5px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: #EBD8A4; white-space: nowrap; }
[dir="rtl"] .edh-tickband .set { letter-spacing: .08em; }
.edh-tickband .set .sep { color: rgba(216,193,130,.5); }
/* The ticker items are bare <span>s, so brand-almostasmer.css's
   `p, li, span, td { color:#23301F }` matched them directly and beat the
   cream inherited from .set — the words were near-black on the forest strip
   in BOTH themes. Restore inheritance. */
.edh-tickband .set span { color: inherit; }

/* ============================ QUOTE + STATS ============================ */
.edh-quotesec { position: relative; overflow: hidden; background: radial-gradient(60% 120% at 0% 50%, rgba(34,53,42,.07) 0%, transparent 60%); }
.edh-quotesec .blob { position: absolute; right: -8%; top: -30%; width: 540px; height: 540px; border-radius: 50%;
  background: radial-gradient(circle, rgba(203,170,99,.14), transparent 65%); pointer-events: none; }
.edh-quotesec .mote { position: absolute; border-radius: 50%; pointer-events: none; }
.edh-quotesec .mote.g { left: 4%; top: 18%; width: 22px; height: 22px; background: radial-gradient(circle at 35% 30%, #E3CE96, #B08C3F); opacity: .45; }
.edh-quotesec .mote.f { right: 6%; bottom: 14%; width: 14px; height: 14px; background: radial-gradient(circle at 35% 30%, #3E5A45, #16241B); opacity: .35; }
.edh-quotesec .sym { position: absolute; bottom: -40px; font-family: var(--ed-serif); color: rgba(176,140,63,.25); pointer-events: none; opacity: 0; }
.edh-quotesec .qin { position: relative; max-width: 1240px; margin: 0 auto; padding: 78px 24px; }
.edh-quotesec .bigring { position: absolute; left: -130px; top: 50%; width: 360px; height: 360px; margin-top: -180px;
  border: 1px dashed rgba(203,170,99,.4); border-radius: 50%; pointer-events: none; }
.edh-quotesec .smring { position: absolute; right: 14%; top: 8%; width: 70px; height: 70px; border: 1px solid rgba(203,170,99,.3); border-radius: 50%; pointer-events: none; }
.edh-qgrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; position: relative; }
@media (max-width: 900px) { .edh-qgrid { grid-template-columns: 1fr; gap: 40px; } }
.edh-bquote { margin: 0; font-family: var(--ed-serif); font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: 1.12; letter-spacing: -.02em; color: var(--ink); }
.edh-bquote .qm { color: var(--gold-deep); }
.edh-bquote.ar { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.9vw, 2.875rem); line-height: 1.55; letter-spacing: 0; }
.edh-motto { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-text); }
[dir="rtl"] .edh-motto { letter-spacing: .08em; }
.edh-motto .star { color: var(--gold-text); }
.edh-mottotext { margin: 22px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.8; color: #4A5A4E; }
.ed-dark .edh-mottotext { color: rgba(236,232,218,.72); }
.edh-minigrid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .edh-minigrid { grid-template-columns: 1fr; } }
.edh-mini { background: rgba(255,255,255,.7); border: 1px solid #E7E3D6; border-radius: 10px; padding: 16px 18px;
  transition: transform .3s ease, border-color .3s ease; }
.edh-mini:hover { transform: translateY(-4px); border-color: #CBAA63; }
.ed-dark .edh-mini { background: rgba(255,255,255,.055); border-color: rgba(216,193,130,.24); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.edh-mini .ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg,#D3B871,#B08C3F); color: #241A05; font-size: 14px; box-shadow: 0 8px 18px rgba(166,125,46,.3); }
.edh-mini b { display: block; margin-top: 11px; font-family: var(--ed-serif); font-weight: 400; font-size: 18.5px; color: var(--ink); }
[dir="rtl"] .edh-mini b { font-family: 'Cairo', sans-serif; font-weight: 700; }
.edh-mini p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: #8A6D2E; }
.ed-dark .edh-mini p { color: #C9BF9F; }
.edh-minilink { margin-top: 22px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-text); border-bottom: 1px solid #CBAA63; padding-bottom: 4px; text-decoration: none; transition: color .2s ease; }
[dir="rtl"] .edh-minilink { letter-spacing: .04em; }
.edh-minilink:hover { color: var(--ink); }
.ed-dark .edh-minilink { color: #CBAA63; }
.edh-stats { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.edh-stat { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: rgba(255,255,255,.82);
  border: 1px solid #E7E3D6; border-radius: 12px; padding: 19px 22px; box-shadow: 0 8px 22px rgba(22,38,28,.06);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.edh-stat:hover { transform: translateX(10px); border-color: #CBAA63; box-shadow: 0 14px 32px rgba(166,125,46,.18); }
[dir="rtl"] .edh-stat:hover { transform: translateX(-10px); }
.ed-dark .edh-stat { background: rgba(255,255,255,.055); border-color: rgba(216,193,130,.24); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.edh-stat b { display: block; font-family: var(--ed-serif); font-weight: 400; font-size: 38px; line-height: 1; color: #B08C3F;
  text-shadow: 0 0 24px rgba(203,170,99,.35); font-variant-numeric: tabular-nums; }
.ed-dark .edh-stat b { color: #D2B36C; }
/* "500+" and "10+" carry no strong character, so the RTL base direction moved
   the trailing "+" to the front. The count-up script rewrites textContent, so
   this has to be CSS, not a <bdi> in the markup. */
[dir="rtl"] .edh-stat b,
[dir="rtl"] .fnd-fact .v { unicode-bidi: plaintext; }
.edh-stat p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: #8A6D2E; }
.ed-dark .edh-stat p { color: #C9BF9F; }
.edh-stat .spark { flex: none; }

/* ============================ METHOD (forest band) ============================ */
.edh-method { position: relative; overflow: hidden; color: #F3EFE3; padding: 84px 24px; margin-bottom: 84px;
  background: radial-gradient(70% 120% at 90% 8%, rgba(203,170,99,.18) 0%, transparent 60%), linear-gradient(135deg,#16241B 0%,#1C2A20 50%,#22352A 100%); }
.edh-method .fgrid { position: absolute; inset: -2px; pointer-events: none;
  background-image: linear-gradient(rgba(216,193,130,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(216,193,130,.10) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(110% 100% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(110% 100% at 50% 0%, #000 0%, transparent 75%); }
.edh-method .mote { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E3CE96, #B08C3F); pointer-events: none; }
.edh-method .sym { position: absolute; bottom: -40px; font-family: var(--ed-serif); color: rgba(216,193,130,.28); pointer-events: none; opacity: 0; }
.edh-method .min { position: relative; max-width: 1240px; margin: 0 auto; }
.edh-method .mhead { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px; }
.edh-method .mhead .kick { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: rgba(216,193,130,.85); }
[dir="rtl"] .edh-method .mhead .kick { letter-spacing: .08em; }
.edh-method .mhead h2 { margin: 12px 0 0; font-family: var(--ed-serif); font-weight: 400; font-size: clamp(2rem, 3.8vw, 2.875rem);
  line-height: 1.06; letter-spacing: -.02em; color: #F5F2E8; }
.edh-method .mhead h2.ar { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.5; letter-spacing: 0; }
.edh-method .mhead > p { margin: 0; max-width: 38ch; font-size: 14.5px; line-height: 1.75; color: rgba(243,239,227,.72); }
.edh-method .mpath { position: absolute; left: 4%; right: 4%; top: 26px; width: 92%; height: 60px; overflow: visible; pointer-events: none; }
.edh-method .mgrid { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: start; margin-top: 46px; }
@media (max-width: 860px) { .edh-method .mgrid { grid-template-columns: 1fr; } .edh-method .mcard { margin-top: 0 !important; } .edh-method .mpath { display: none; } }
.edh-method .mcard { position: relative; overflow: hidden; background: rgba(255,255,255,.05); border: 1px solid rgba(216,193,130,.28);
  border-radius: 14px; padding: 32px 30px 38px; transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease; }
.edh-method .mcard:hover { transform: translateY(-10px); border-color: rgba(228,203,144,.8); background: rgba(255,255,255,.09); box-shadow: 0 26px 54px rgba(0,0,0,.38); }
.edh-method .mcard .ghost { position: absolute; inset-inline-end: -14px; top: -26px; font-family: var(--ed-serif); font-size: 150px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(228,203,144,.18); pointer-events: none; }
.edh-method .mcard .icow { position: relative; display: inline-flex; width: 52px; height: 52px; }
.edh-method .mcard .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(228,203,144,.6); opacity: 0; }
.edh-method .mcard .ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg,#D3B871,#B08C3F); color: #241A05; font-size: 19px; box-shadow: 0 10px 24px rgba(166,125,46,.4); }
.edh-method .mcard .numrow { margin-top: 20px; display: flex; align-items: baseline; gap: 12px; }
.edh-method .mcard .num { font-family: var(--ed-serif); font-size: 44px; line-height: 1;
  background: var(--gold-grad-shine); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* static */
.edh-method .mcard h3 { margin: 0; font-family: var(--ed-serif); font-weight: 400; font-size: 28px; color: #F5F2E8; }
[dir="rtl"] .edh-method .mcard h3 { font-family: 'Cairo', sans-serif; font-weight: 700; }
.edh-method .mcard p { margin: 13px 0 0; font-size: 14.5px; line-height: 1.75; color: rgba(243,239,227,.72); }
.edh-method .mcard .edh-fillbar { background: rgba(216,193,130,.15); }

/* ============================ PROGRAMS ============================ */
.edh-progs { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 24px 84px; }
.edh-progs .blob { position: absolute; left: -14%; bottom: -10%; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(62,90,69,.12), transparent 65%); pointer-events: none; }
.edh-progs .minichart { position: absolute; inset-inline-end: 24px; top: -14px; width: 250px; opacity: .32; color: #CBAA63; pointer-events: none; }
.edh-progs .phead { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px;
  border-top: 1px solid #E7E3D6; padding-top: 36px; margin-bottom: 32px; position: relative; }
.ed-dark .edh-progs .phead { border-top-color: rgba(216,193,130,.2); }
.edh-progs .phead h2 { margin: 12px 0 0; font-family: var(--ed-serif); font-weight: 400; font-size: clamp(2rem, 3.8vw, 2.875rem);
  line-height: 1.06; letter-spacing: -.02em; color: var(--ink); }
.edh-progs .phead h2.ar { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.5; letter-spacing: 0; }
.edh-progs .alllink { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text);
  border-bottom: 1px solid #CBAA63; padding-bottom: 4px; text-decoration: none; transition: color .2s ease; }
[dir="rtl"] .edh-progs .alllink { letter-spacing: .04em; }
.edh-progs .alllink:hover { color: var(--ink); }
.ed-dark .edh-progs .alllink { color: #CBAA63; }
.edh-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 860px) { .edh-pgrid { grid-template-columns: 1fr; } }
.edh-pcard { position: relative; display: block; background: #fff; border: 1px solid #E7E3D6; border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(22,38,28,.07); text-decoration: none; color: inherit;
  transition: border-color .35s ease, box-shadow .35s ease; }
.edh-pcard:hover { border-color: #CBAA63; box-shadow: 0 26px 56px rgba(22,38,28,.16); color: inherit; }
.ed-dark .edh-pcard { background: rgba(255,255,255,.055); border-color: rgba(216,193,130,.24); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.edh-pcard .thumb { position: relative; overflow: hidden;
  background: radial-gradient(80% 90% at 70% 20%, rgba(203,170,99,.28), transparent 60%), linear-gradient(150deg,#1C2A20,#16241B); }
/* COVER, NOT CONTAIN. 'contain' plus vertical padding was letterboxing every card:
     the artwork floated in the middle of the dark panel with empty bands above and
     below, and the two programs that carried square marketing posters shrank to a
     third of the frame. The artwork is now drawn at the panel's own proportion and
     carries no text near its edges, so it can fill the frame without losing anything. */
.edh-pcard .thumb img { width: 100%; height: 250px; object-fit: cover; display: block;
  transition: transform .6s ease; filter: saturate(.9) contrast(1.03) drop-shadow(0 14px 28px rgba(0,0,0,.35)); }
.edh-pcard:hover .thumb img { transform: scale(1.06); }
.edh-pcard .thumb .ov1 { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(28,42,32,.5), rgba(34,53,42,.18) 45%, rgba(22,36,27,.6)); mix-blend-mode: multiply; pointer-events: none; }
.edh-pcard .thumb .ov2 { position: absolute; inset: 0; background: linear-gradient(20deg, rgba(203,170,99,.22), transparent 55%); mix-blend-mode: overlay; pointer-events: none; }
.edh-pcard .thumb .ov3 { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(22,38,28,.6)); pointer-events: none; }
.edh-pcard .thumb .edh-sheen { width: 38%; background: linear-gradient(115deg, transparent, rgba(255,255,255,.28), transparent); }
.edh-pcard .badge { position: absolute; top: 14px; inset-inline-start: 14px; background: #16261C; color: #FBFAF6; font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; padding: 7px 12px; border-radius: 4px; }
[dir="rtl"] .edh-pcard .badge { letter-spacing: .06em; }
.edh-pcard .ghostnum { position: absolute; inset-inline-end: 12px; top: 2px; font-family: var(--ed-serif); font-size: 88px; line-height: 1;
  color: rgba(255,255,255,.5); mix-blend-mode: overlay; pointer-events: none; }
.edh-pcard .pricepill { position: absolute; inset-inline-end: 16px; bottom: 16px; background: linear-gradient(135deg,#D3B871,#B08C3F);
  color: #241A05; font-family: var(--ed-serif); font-size: 19px; padding: 10px 18px; border-radius: 999px; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
[dir="rtl"] .edh-pcard .pricepill { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 16px; }
/* opacity .65 dropped the old price to 3.35:1 on the gold pill (3.06–3.98:1
   across the gradient) while the current price beside it sits at 7.01:1. The
   line-through and the smaller size already say "this is the old price", so the
   muting does not have to come out of the contrast: .9 measures 5.41:1. The pill
   has no dark-mode override, so this is the number in both themes.
   margin-inline-end must stay — it is the gap to the current price. */
.edh-pcard .pricepill .was { font-size: .72em; opacity: .9; text-decoration: line-through; margin-inline-end: 7px; }
.edh-pcard .pbody { padding: 24px 26px 30px; }
.edh-pcard .names { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.edh-pcard .names h3 { margin: 0; font-family: var(--ed-serif); font-weight: 400; font-size: 30px; letter-spacing: -.02em; color: var(--ink); }
[dir="rtl"] .edh-pcard .names h3 { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: 0; }
.edh-pcard .names .alt { font-family: 'Cairo', sans-serif; font-size: 13px; font-weight: 700; color: var(--gold-text); }
.edh-pcard .chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.edh-pcard .pfoot { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid #E7E3D6; padding-top: 16px; }
.ed-dark .edh-pcard .pfoot { border-top-color: rgba(216,193,130,.2); }
.edh-pcard .meta { display: flex; gap: 14px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4A5A4E; }
[dir="rtl"] .edh-pcard .meta { letter-spacing: .04em; }
.ed-dark .edh-pcard .meta { color: rgba(236,232,218,.72); }
.edh-pcard .start { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-text); }
[dir="rtl"] .edh-pcard .start { letter-spacing: .04em; }
.edh-includes { margin-top: 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.edh-includes .lbl { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }
[dir="rtl"] .edh-includes .lbl { letter-spacing: .06em; }
.ed-dark .edh-includes .lbl { color: #D2B36C; }

/* ============================ WORD MARQUEE ============================ */
.edh-marquee { overflow: hidden; padding: 30px 0; border-top: 1px solid #E7E3D6; border-bottom: 1px solid #E7E3D6; background: #F7F5EC; }
.ed-dark .edh-marquee { background: #0F1A12; border-color: rgba(216,193,130,.18); }
.edh-marquee .track { display: flex; width: max-content; }
.edh-marquee .set { display: flex; gap: 54px; padding-inline-end: 54px; align-items: baseline; font-family: var(--ed-serif);
  font-size: clamp(52px, 7vw, 84px); line-height: 1; white-space: nowrap; }
.edh-marquee .o1 { color: transparent; -webkit-text-stroke: 1.5px rgba(158,126,58,.5); }
.edh-marquee .solid { color: var(--ink); }
.edh-marquee .grad { background: var(--gold-grad-shine); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* static */
.edh-marquee .o2 { color: transparent; -webkit-text-stroke: 1.5px rgba(22,38,28,.45); }
.ed-dark .edh-marquee .o2 { -webkit-text-stroke-color: rgba(240,236,224,.4); }
.edh-marquee .sep { color: #CBAA63; font-size: 26px; }

/* ============================ CTA (forest) ============================ */
.edh-cta { position: relative; overflow: hidden; color: #F3EFE3; padding: 78px 24px;
  background: radial-gradient(58% 130% at 88% 42%, rgba(203,170,99,.26) 0%, transparent 62%), linear-gradient(135deg,#16241B 0%,#1C2A20 45%,#263A2C 100%); }
.edh-cta .fgrid { position: absolute; inset: -2px; pointer-events: none;
  background-image: linear-gradient(rgba(216,193,130,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(216,193,130,.09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(110% 100% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(110% 100% at 50% 0%, #000 0%, transparent 78%); }
.edh-cta .mote { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E3CE96, #B08C3F); pointer-events: none; }
.edh-cta .sym { position: absolute; bottom: -40px; font-family: var(--ed-serif); color: rgba(216,193,130,.26); pointer-events: none; opacity: 0; }
.edh-cta .eq { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; display: flex; align-items: flex-end; gap: 12px;
  padding: 0 30px; opacity: .22; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.edh-cta .eq span { flex: 1; transform-origin: bottom; transform: scaleY(.4);
  background: linear-gradient(180deg, rgba(216,193,130,0), rgba(216,193,130,.7)); }
.edh-cta .ghostbig { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: var(--ed-serif);
  font-size: clamp(110px, 16vw, 200px); letter-spacing: .06em; color: transparent; -webkit-text-stroke: 1px rgba(216,193,130,.14);
  white-space: nowrap; pointer-events: none; }
.edh-cta .cgrid { position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 800px) { .edh-cta .cgrid { grid-template-columns: 1fr; gap: 28px; } }
.edh-cta h2 { margin: 0; font-family: var(--ed-serif); font-weight: 400; font-size: clamp(2.2rem, 4.3vw, 3.25rem); line-height: 1.08; color: #F5F2E8; }
.edh-cta h2.ar { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.625rem); line-height: 1.5; letter-spacing: 0; }
.edh-cta .cgrid p { margin: 0; color: rgba(243,239,227,.78); line-height: 1.7; font-size: 14.5px; }
.edh-cta .seat { position: relative; overflow: hidden; margin-top: 22px; display: inline-block;
  background: linear-gradient(100deg,#D3B871,#B08C3F); color: #241A05; font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; padding: 15px 30px; border-radius: 3px; box-shadow: 0 10px 24px rgba(0,0,0,.3);
  text-decoration: none; transition: transform .25s ease; }
[dir="rtl"] .edh-cta .seat { letter-spacing: .04em; }
.edh-cta .seat:hover { transform: translateY(-2px); color: #241A05; }
.edh-cta .seat .edh-sheen { background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); }

/* ============================ MOTION (all gated) ============================ */
@media (prefers-reduced-motion: no-preference) {
  /* page-scoped keyframes missing from the shared catalog */
  @keyframes edhWord { from { transform: translateY(110%) } to { transform: none } }
  @keyframes edhRing { from { transform: scale(.55); opacity: .8 } to { transform: scale(2); opacity: 0 } }
  @keyframes edhFill { 0% { transform: scaleX(0) } 55%, 100% { transform: scaleX(1) } }
  @keyframes edhCoin { from { transform: rotateY(0) } to { transform: rotateY(360deg) } }

  .edh .edh-sheen { animation: edSheen 3s ease-in-out infinite; }
  .edh .edh-arrow { animation: edNudge 1.6s ease-in-out infinite; }
  [dir="rtl"] .edh .edh-arrow { animation: none; } /* nudge direction reads wrong in RTL */
  .edh .edh-fillbar i { animation: edhFill 5.4s ease-in-out infinite var(--dl, 0s); }
  .edh .star { animation: edPulse 2.6s ease-in-out infinite; }

  /* hero decor */
  .edh-hero .blob.g { animation: edDrift 14s ease-in-out infinite; }
  .edh-hero .blob.f { animation: edDrift 18s ease-in-out infinite reverse; }
  .edh-hero .conic { animation: edRotate 26s linear infinite; }
  .edh-hero .sym, .edh-quotesec .sym, .edh-method .sym, .edh-cta .sym {
    animation: edFloatUp var(--d, 12s) linear infinite var(--dl, 0s); }
  .edh-hero .eq span, .edh-cta .eq span { animation: edEq var(--d, 2.9s) ease-in-out infinite var(--dl, 0s); }
  .edh-hero .dashring i { animation: edRotate 34s linear infinite; }
  .edh-hero .coin.g i, .edh-hero .coin.f i { animation: edFloat var(--d, 8s) ease-in-out infinite var(--dl, 0s); }
  .edh-hero .coin.s i { animation: edhCoin var(--d, 6s) linear infinite; }
  .edh-hero .coin.s.rev i { animation-direction: reverse; }
  .edh-hero .vlab.r { animation: edFloat 6s ease-in-out infinite; }
  .edh-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: edDraw 2.6s ease forwards .4s; }
  .edh-draw.short { stroke-dasharray: 260; stroke-dashoffset: 260; animation-duration: 2.2s; }
  .edh-draw.mid { stroke-dasharray: 600; stroke-dashoffset: 600; animation-duration: 2.4s; }
  .edh-draw.long { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation-duration: 3s; }
  .edh-candle { transform-origin: bottom; animation: edCandle 3.2s ease-in-out infinite var(--dl, 0s); }

  /* hero copy entrances */
  .edh-hero .edh-rise { animation: edRise .8s ease both var(--dl, 0s); }
  .edh-h1 .t { animation: edhWord .9s cubic-bezier(.22,.9,.24,1) both var(--dl, .15s); }
  .edh-btn-gold { animation: edGrad 4.5s ease-in-out infinite, edCtaGlow 3s ease-in-out infinite; will-change: transform; }
  .edh-btn-play .ring { animation: edhRing 2.2s ease-out infinite var(--dl, 0s); }

  /* quote + stats decor */
  .edh-quotesec .blob { animation: edDrift 16s ease-in-out infinite; }
  .edh-quotesec .mote.g { animation: edFloat 8s ease-in-out infinite; }
  .edh-quotesec .mote.f { animation: edFloat 10s ease-in-out infinite -4s; }
  .edh-quotesec .bigring { animation: edRotate 42s linear infinite; }
  .edh-quotesec .smring { animation: edFloat 8s ease-in-out infinite -2s; }
  .edh-mini .ico { animation: edBob 5.5s ease-in-out infinite var(--dl, 0s); }
  .edh-stat { animation: edBob 6s ease-in-out infinite var(--dl, 0s); }

  /* method band */
  .edh-method .mote { animation: edFloat var(--d, 9s) ease-in-out infinite var(--dl, 0s); }
  .edh-method .mcard .ghost { animation: edBob 7s ease-in-out infinite var(--dl, 0s); }
  .edh-method .mcard .ring { animation: edhRing 2.6s ease-out infinite var(--dl, 0s); }

  /* programs */
  .edh-progs .blob { animation: edDrift 18s ease-in-out infinite reverse; }
  .edh-pcard .pricepill { animation: edBob 5.5s ease-in-out infinite var(--dl, 0s); }
  .edh-pcard .thumb .edh-sheen { animation: edSheen 4.6s ease-in-out infinite var(--dl, 0s); }

  /* tickers + marquee */
  .edh-tickband .track { animation: edTicker 26s linear infinite; }
  [dir="rtl"] .edh-tickband .track { animation-name: edTickerRtl; }
  .edh-marquee .track { animation: edTicker 32s linear infinite; }
  [dir="rtl"] .edh-marquee .track { animation-name: edTickerRtl; }

  /* CTA */
  .edh-cta .mote { animation: edFloat var(--d, 8s) ease-in-out infinite var(--dl, 0s); }
}
@media (prefers-reduced-motion: reduce) {
  .edh .mdot { display: none; } /* SMIL traveling dots */
  .edh-hero .sym, .edh-quotesec .sym, .edh-method .sym, .edh-cta .sym { display: none; }
  .edh-hero .eq span, .edh-cta .eq span { transform: none; }
}

/* ==========================================================================
   FOUNDER — TEXT VISIBILITY
   ==========================================================================
   Last in the file on purpose, so these win on order as well as specificity.

   Plain --gold (#CBAA63) is a display colour. On the warm paper it measures
   2.16:1, which is fine for a rule or a large numeral and not fine for the
   words underneath a heading. The palette already carries the answer and says
   so in its own comment: --gold-deep for small gold text, --gold-text for
   caption and body sizes, because gold-deep alone is only 4.43:1 on the panel.

   Measured after each change, light and dark, with a contrast pass over every
   text node on the page rather than by eye.

   The dark-mode side flips back to --gold: on #0E140F the bright champagne is
   the high-contrast choice and the deep bronze is the unreadable one. This is
   the one pair of values that has to be stated twice. */

/* the small uppercase English line under each service name — real text */
.ed-founder .fnd-serv-item .alt { color: var(--gold-text); }
.ed-dark .ed-founder .fnd-serv-item .alt { color: var(--gold); }

/* the portrait placeholder caption. Left over from before this page had the
   .ed wrapper: a pale champagne that only worked on the old dark card. */
.ed-founder .fnd-photo-ph span { color: var(--label); font-size: .8rem; }
.ed-dark .ed-founder .fnd-photo-ph span { color: var(--ink-soft); }

/* card numerals and section numbers: decorative, but still glyphs a reader
   parses, so they clear 3:1 rather than sitting at 2.16 */
.ed-founder .fnd-exp-item .n { color: var(--gold-deep); opacity: .75; }
.ed-founder .fnd-sechead .num { color: var(--gold-deep); opacity: .5; }
.ed-dark .ed-founder .fnd-exp-item .n { color: var(--gold); opacity: .6; }
.ed-dark .ed-founder .fnd-sechead .num { color: var(--gold); opacity: .4; }

/* route tile icons. The lead tile is a dark panel in both themes, so it keeps
   the bright champagne while the two paper tiles take the deep bronze. */
.ed-founder .fnd-route .ic { color: var(--gold-deep); }
.ed-founder .fnd-route.is-lead .ic { color: #EBD8A4; }
.ed-dark .ed-founder .fnd-route .ic { color: var(--gold); }

/* the star in the hero pill */
.ed-founder .edh-pill .star { color: var(--gold-text); }
.ed-dark .ed-founder .edh-pill .star { color: var(--gold); }

/* The pre-rebuild portrait frame. It painted the dark gradient card that the
   photo used to sit in, and — the reason it matters — it set overflow:hidden and
   an aspect-ratio on the OUTER element, which clipped the two rotating rings and
   the halo the new hero draws around the portrait. The frame now lives on the
   inner .fnd-photo-in, so the outer element is just a positioning context. */
.ed-founder .fnd-hero-photo {
  border: 0; background: none; box-shadow: none; overflow: visible;
  aspect-ratio: auto; border-radius: 0;
}

/* SAFETY NET: the three route tiles are the page's primary calls to action, and
   they must never be invisible because an animation did not finish.

   They were. The container carried BOTH `edh-rise` and `data-reveal-stagger`, so
   the parent ran edRise while the children each ran edReveal from opacity 0. The
   two kept re-triggering each other and the child animation sat restarting at
   60ms forever — parent at opacity 1, all three tiles at opacity 0, in a hero
   that looked simply empty. The stagger is gone from that container; the parent
   riser already brings them in.

   This rule is the belt to that braces. Anything that leaves a tile mid-reveal —
   a future animation, a paused compositor, a stalled observer — resolves to
   visible rather than to a blank space where the CTA should be. */
.ed-founder .fnd-routes,
.ed-founder .fnd-route { opacity: 1 !important; }

/* CONTACT FORM FEEDBACK — the visitor has to be told what happened.
   A rejected enquiry used to render a blank form with no message, which reads exactly like
   a successful send. These are the two states that were missing. */
.ed .ctc-status { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px;
  font-size: .92rem; line-height: 1.7; border: 1px solid transparent; }
.ed .ctc-status.is-ok  { background: rgba(46,110,64,.10); border-color: rgba(46,110,64,.35); color: #1F5233; }
.ed .ctc-status.is-bad { background: rgba(150,42,42,.08); border-color: rgba(150,42,42,.32); color: #8A2222; }
.ed .ctc-errors { margin: -6px 0 14px; padding-inline-start: 20px; font-size: .86rem;
  line-height: 1.8; color: #8A2222; }
.ed .form-control.is-bad { border-color: rgba(150,42,42,.55); }
.ed .form-control.is-bad:focus { border-color: #8A2222; box-shadow: 0 0 0 3px rgba(150,42,42,.12); }

/* Dark mode: the same two states, legible on the dark card rather than near-black on dark. */
.ed-dark .ed .ctc-status.is-ok  { background: rgba(126,200,150,.10); border-color: rgba(126,200,150,.32); color: #9FD9B4; }
.ed-dark .ed .ctc-status.is-bad { background: rgba(240,140,140,.10); border-color: rgba(240,140,140,.32); color: #F0A3A3; }
.ed-dark .ed .ctc-errors { color: #F0A3A3; }


/* Horizontal page scroll on /privacy-policy and /refund-policy: .row is 3.19px wider than its .container */
/* --- Legacy grid: every .row is 3.19px wider than the .container holding it. ---
   style.css:86 raises .row's gutter to 1.7rem, so bootstrap gives the row -13.6px
   side margins, while .container keeps bootstrap's 1.5rem and pads only 12px. The
   1.6px that sticks out each side is the sideways scroll measured on the two policy
   pages (documentElement.scrollWidth 377 vs clientWidth 375 at a 375px viewport),
   and because the site is rtl the page rests scrolled, shifting the container 1px.
   Matching the container's gutter to the row's is the smaller change: it moves the
   container padding from 12px to 13.6px and leaves .row > * (a flat 15px, style.css:89)
   and every column width alone. The eight .ed pages use .ed-wrap and are unaffected. */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl { --bs-gutter-x: 1.7rem; }

/* Mobile navigation toggle is a 20x26 hit box; the off-canvas close is 32x32 */
/* --- The only control that opens the navigation on a phone was a 20x26 box. ---
   a.zmm-toggle computes display:inline, so its box was the 20px icon plus the line
   box, nothing more; the off-canvas close was 32x32. Both are grown around the
   existing icon rather than moved. margin-inline-start is logical, so the icon keeps
   its measured optical position under both directions: centre x=350 in rtl, x=25 in
   ltr, unchanged. Capped at 991px so the desktop header is untouched. */
@media (max-width: 991px) {
	.ed-sitehead .mobile-header .zmm-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		vertical-align: middle;
		width: 46px;
		height: 46px;
		margin-inline-start: -13px;
	}
	.zmm-wrapper .zmm-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}
}

/* Mobile header controls under 44x44: theme toggle 38x38, brand 30px wide, sign-in 28px tall */
/* --- Mobile header controls under 44x44. Phone and tablet only, so the desktop
   header keeps its current proportions. Measured before: theme toggle 38.0 x 38.0,
   a.ed-brand 30.0 wide, a.ed-signin 28.0 tall in ar AND en. button.ed-lang already
   measures 70.8 x 44.4 and is not touched. --- */
@media (max-width: 991px) {
	.ed-sitehead .mobile-header .ed-theme-toggle { width: 44px; height: 44px; }
	.ed-sitehead .mobile-header .ed-brand { min-width: 44px; justify-content: center; }
	.ed-sitehead .mobile-header .ed-signin {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
	}
}

/* Footer navigation, back-to-top, jump nav and breadcrumb controls are 26-38px tall */
/* --- Footer navigation, back-to-top, jump nav and breadcrumb under 44px. ---
   Measured before at 375px: ten footer nav links 27.0 tall, .ft-consent 107.8 x 28.0,
   back-to-top 38.0 x 38.0, .ed-jump a 293.0 x 34.3, breadcrumb link 68.6 x 26.0.
   Growing them adds 160px to the mobile footer and 15px to the policy page title
   block; both measured, neither introduces sideways scroll. --- */
@media (max-width: 560px) {
	.ed-footer .ft-col ul li a,
	.ed-footer .ft-consent {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		min-width: 44px;
	}
	.ed-footer .ft-top.page-scroll > a { width: 44px; height: 44px; }
	.ed .ed-jump a { min-height: 44px; }
	.page-title-inner .breadcrumb a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}
/* ==========================================================================
   ARTICLES — the reading surface
   ==========================================================================
   Written for long-form Arabic on a phone. The measurements are the point:
   line-height 1.95 because Arabic diacritics need vertical room, max-width 68ch
   because a line longer than that loses the reader's place on the return sweep,
   and 1.05rem body text because 16px Latin-sized type is small for Arabic
   letterforms. All colour comes from the .ed tokens, so dark mode follows. */

.ed-article .art-wrap, .ed-articles .ed-wrap { max-width: 1100px; }
.ed-article .art-shell { padding-block: clamp(28px,5vw,64px); }

/* THE CONTENT IS ARABIC WHATEVER THE UI LOCALE IS. In English mode the legacy theme
   sets a physical `text-align: left` on body.ltr, and an inherited physical value
   beats the dir="rtl" the Arabic islands declare — direction flipped, alignment
   did not, and every paragraph sat left with its full stops on the wrong end.
   `start` resolves against each element's OWN direction, so the Arabic islands
   right-align themselves and the LTR formula/CTA blocks stay left. */
.ed-article [dir="rtl"], .ed-article [dir="ltr"],
.ed-articles [dir="rtl"], .ed-articles [dir="auto"] { text-align: start; }

.ed-article .art-crumbs { font-size: .82rem; color: var(--label); margin-bottom: 18px; }
.ed-article .art-crumbs a { color: var(--label); text-decoration: none; }
.ed-article .art-crumbs a:hover { color: var(--gold-deep); text-decoration: underline; }
.ed-dark .ed-article .art-crumbs a:hover { color: var(--gold); }
.ed-article .art-crumbs span { margin-inline: 8px; opacity: .5; }

.ed-article .art-cat { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-text); text-decoration: none; margin-bottom: 12px; }
.ed-dark .ed-article .art-cat { color: var(--gold); }

.ed-article .art-h1 { font-family: var(--ed-serif); font-weight: 400; margin: 0 0 16px;
  font-size: clamp(1.75rem,4.2vw,2.9rem); line-height: 1.4; color: var(--ink); max-width: 22ch; }

.ed-article .art-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: .88rem; color: var(--ink-soft); padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.ed-article .art-author { color: var(--gold-text); font-weight: 700; text-decoration: none; }
.ed-dark .ed-article .art-author { color: var(--gold); }
.ed-article .art-author:hover { text-decoration: underline; }
.ed-article .art-dot { opacity: .45; }

/* Table of contents: a list, not a widget. It is read once and then ignored. */
.ed-article .art-toc { margin: 26px 0; padding: 18px 22px; border: 1px solid var(--rule);
  border-radius: 14px; background: var(--panel); }
.ed-article .art-toc-t { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--label); }
.ed-article .art-toc ol { margin: 0; padding-inline-start: 20px; }
.ed-article .art-toc li { margin: 6px 0; font-size: .92rem; line-height: 1.7; }
.ed-article .art-toc a { color: var(--ink-soft); text-decoration: none; }
.ed-article .art-toc a:hover { color: var(--gold-deep); text-decoration: underline; }
.ed-dark .ed-article .art-toc a:hover { color: var(--gold); }

.ed-article .art-body { max-width: 68ch; margin-inline: auto; font-size: 1.05rem; line-height: 1.95; color: var(--ink); }
.ed-article .art-body p { margin: 0 0 1.05em; }
.ed-article .art-body h2 { font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.4rem,2.8vw,1.95rem);
  line-height: 1.5; margin: 2.2em 0 .7em; color: var(--ink); scroll-margin-top: 90px; }
.ed-article .art-body h3 { font-size: 1.12rem; font-weight: 700; margin: 1.8em 0 .5em; color: var(--ink); scroll-margin-top: 90px; }
.ed-article .art-list { margin: 0 0 1.2em; padding-inline-start: 22px; }
.ed-article .art-list li { margin: .45em 0; }
/* :not(.ed-btn) IS LOAD-BEARING.
   The programme CTA is injected INSIDE .art-body, so a bare `.art-body a` rule captured
   its button too — and at 3 classes it outranked `.ed-btn-gold` (1 class) and came later
   in the file, so the button rendered gold-on-gold: rgb(210,179,108) text on a
   rgb(228,203,144) gradient, about 1.3:1. The button was there, the label was not.
   Same shape of mistake as the consent notice and the founder CTA: a broad rule reaching
   an element it was never written for. Underlines are excluded for the same reason. */
.ed-article .art-body a:not(.ed-btn) { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.ed-dark .ed-article .art-body a:not(.ed-btn) { color: var(--gold); }

/* And state the button's own colours at a specificity that cannot be out-argued from
   inside an article, in either theme. */
.ed-article .art-body a.ed-btn.ed-btn-gold,
.ed-article .art-cta a.ed-btn.ed-btn-gold { color: #241A05; text-decoration: none; }
.ed-dark .ed-article .art-body a.ed-btn.ed-btn-gold,
.ed-dark .ed-article .art-cta a.ed-btn.ed-btn-gold { color: #241A05; text-decoration: none; }
.ed-article .art-body strong { font-weight: 700; color: var(--ink); }

/* Formulas and English-only lines run LTR on their own line. In an RTL document a
   left-to-right expression otherwise renders with its terms visually reordered. */
.ed-article .art-formula { direction: ltr; text-align: left; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .95rem; background: var(--panel); border: 1px solid var(--rule); border-inline-start: 3px solid var(--gold);
  border-radius: 8px; padding: 12px 16px; margin: 1.2em 0; overflow-x: auto; }
.ed-article .art-body code { direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .92em; background: var(--panel); padding: 2px 6px; border-radius: 5px; }

/* Tables scroll inside their own box rather than pushing the page sideways. */
.ed-article .art-tablewrap { overflow-x: auto; margin: 1.4em 0; border: 1px solid var(--rule); border-radius: 12px; }
.ed-article .art-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ed-article .art-table th, .ed-article .art-table td { padding: 11px 14px; text-align: start;
  border-bottom: 1px solid var(--rule); }
.ed-article .art-table th { background: var(--panel); font-weight: 700; color: var(--ink); white-space: nowrap; }
.ed-article .art-table tr:last-child td { border-bottom: 0; }

.ed-article .art-sources { margin-top: 2.4em; padding: 18px 22px; border: 1px solid var(--rule);
  border-radius: 14px; background: var(--panel); font-size: .9rem; }
.ed-article .art-sources h2 { font-size: 1.05rem; margin: 0 0 .6em; }

/* The programme card. Gold-edged so it reads as an offer, not as body copy. */
.ed-article .art-cta, .ed-articles .art-cta { margin: 2.2em 0; padding: clamp(20px,3vw,28px);
  border: 1px solid rgba(203,170,99,.5); border-radius: 16px; background: var(--panel); }
.ed-article .art-cta-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: 8px; }
.ed-dark .ed-article .art-cta-k { color: var(--gold); }
.ed-article .art-cta-h { font-family: var(--ed-serif); font-weight: 400; font-size: 1.3rem; margin: 0 0 .5em; color: var(--ink); }
.ed-article .art-cta-p { margin: 0 0 1.1em; font-size: .93rem; line-height: 1.85; color: var(--ink-soft); }

.ed-article .art-related { margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--rule); }
.ed-article .art-rel-t { font-family: var(--ed-serif); font-weight: 400; font-size: 1.35rem; margin: 0 0 1em; color: var(--ink); }
.ed-article .art-relgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 14px; }
.ed-article .art-relcard { display: block; padding: 18px; border: 1px solid var(--rule); border-radius: 14px;
  background: var(--paper); text-decoration: none; transition: transform .3s, box-shadow .3s, border-color .3s; }
.ed-article .art-relcard:hover { transform: translateY(-3px); border-color: rgba(203,170,99,.6);
  box-shadow: 0 16px 34px rgba(28,42,32,.12); }
.ed-article .art-relcard .t { display: block; font-weight: 700; color: var(--ink); line-height: 1.65; margin-bottom: 8px; }
.ed-article .art-relcard .m { font-size: .8rem; color: var(--label); }

/* ---- the index ---- */
.ed-articles .arti-hero { padding-block: clamp(34px,6vw,72px) clamp(20px,3vw,34px); border-bottom: 1px solid var(--rule); }
.ed-articles .arti-kick { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--label); margin-bottom: 12px; }
.ed-articles .arti-h1 { font-family: var(--ed-serif); font-weight: 400; margin: 0 0 14px;
  font-size: clamp(2rem,4.6vw,3.1rem); line-height: 1.35; color: var(--ink); }
.ed-articles .arti-lead { margin: 0 0 26px; max-width: 62ch; font-size: 1rem; line-height: 1.9; color: var(--ink-soft); }
.ed-articles .arti-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.ed-articles .arti-tab { padding: 9px 18px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: .88rem; color: var(--ink-soft); text-decoration: none; transition: all .25s; }
.ed-articles .arti-tab:hover { border-color: rgba(203,170,99,.6); color: var(--ink); }
.ed-articles .arti-tab.is-on { background: var(--forest); border-color: transparent; color: #F7F3E8; }
.ed-articles .arti-body { padding-block: clamp(28px,4vw,52px); }
.ed-articles .arti-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 18px; }
.ed-articles .arti-card { padding: 24px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper);
  transition: transform .35s, box-shadow .35s, border-color .35s; }
.ed-articles .arti-card:hover { transform: translateY(-4px); border-color: rgba(203,170,99,.6);
  box-shadow: 0 18px 40px rgba(28,42,32,.12); }
.ed-articles .arti-card .c { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: 10px; }
.ed-dark .ed-articles .arti-card .c { color: var(--gold); }
.ed-articles .arti-card .t { font-family: var(--ed-serif); font-weight: 400; font-size: 1.22rem; line-height: 1.55; margin: 0 0 .6em; }
.ed-articles .arti-card .t a { color: var(--ink); text-decoration: none; }
.ed-articles .arti-card .t a:hover { color: var(--gold-deep); }
.ed-dark .ed-articles .arti-card .t a:hover { color: var(--gold); }
.ed-articles .arti-card .x { margin: 0 0 1em; font-size: .9rem; line-height: 1.8; color: var(--ink-soft); }
.ed-articles .arti-card .m { font-size: .8rem; color: var(--label); }
.ed-articles .arti-pager { margin-top: 28px; }
.ed-articles .arti-empty { color: var(--ink-soft); }

@media (max-width: 700px) {
  .ed-article .art-body { font-size: 1.02rem; }
  .ed-article .art-toc { padding: 14px 16px; }
  .ed-articles .arti-grid { grid-template-columns: 1fr; }
}