/* =====================================================================
   AMANAH STRATEGIC ADVISORY — Site-wide typography & colour polish
   Append to the END of the main stylesheet (assets/index-*.css).
   Layout, imagery, animations and components are unchanged.
   Replaces the earlier "how-we-work-contrast-fix.css" (already included).
   ===================================================================== */

:root {
  /* Palette — same family as the current brand, tuned for legibility */
  --am-navy: #061b31;          /* brand navy (unchanged)                  */
  --am-ink: #0b2038;           /* headings on light                       */
  --am-body-light: #45515c;    /* body text on cream/stone  (≈7.6:1)      */
  --am-body-dark: #c6d0d6;     /* body text on navy         (≈11:1)       */
  --am-gold: #b08d57;          /* brand gold (unchanged) — rules, icons   */
  --am-gold-light: #e8c98a;    /* gold text on dark backgrounds (≈10:1)   */
  --am-gold-deep: #8a6631;     /* gold text on light backgrounds (≈5:1)   */

  /* Type */
  --am-serif: "Cormorant Garamond", Georgia, serif;
  --am-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --am-arabic: "IBM Plex Sans Arabic", "DM Sans", sans-serif;
}

/* ---------- 1. One typographic system ---------------------------------
   Headings: Cormorant Garamond only (removes the Playfair Display mix).
   Labels, eyebrows, buttons: DM Sans small caps instead of DM Mono —
   reads as an advisory firm rather than a tech product.              */

.amanah-site h1, .amanah-site h2, .amanah-site h3,
.about-mv blockquote, .about-mission, .mv-statement,
.approach-heading h2, .approach-item h3 {
  font-family: var(--am-serif);
  letter-spacing: -0.01em;
}
.approach-heading h2 { font-weight: 600; }

/* Lead statements on About (were Playfair Display) */
.about-lead, .bahrain-lead {
  font-family: var(--am-serif) !important;
  font-weight: 500;
  color: var(--am-ink) !important;
  line-height: 1.4 !important;
}
.about-lead { font-size: 22px !important; }
.bahrain-lead { font-size: clamp(26px, 2.6vw, 32px) !important; }

.eyebrow, .section-label, .section-label span,
.approach-step, .package-code, .sector-card__num, .about-kicker,
.pillar-panel__copy small, .pillar-panel__value small, .pillar-panel__badge,
.c-markets__legend span, .engagement-includes li, .bahrain-markers span,
.principle > span, .site-footer__meta, .site-footer__meta span,
.about-hero__stamp, .about-hero__stamp small, .quote-band cite, cite,
.c-ticker__items button, .c-ticker__items button span {
  font-family: var(--am-sans) !important;
  font-weight: 600;
  font-size: 11.5px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Buttons */
.c-btn, .button, .site-nav__cta, .share-toggle, .share-toggle span,
.pillar-panel__copy a.button, .about-container a.button {
  font-family: var(--am-sans) !important;
  font-weight: 600;
  font-size: 12.5px !important;
  letter-spacing: 0.12em;
}

/* Body copy: larger and more open */
.amanah-site p { line-height: 1.7; }
.c-hero__content > p,
.approach-heading p, .engagement-heading p, .c-heading p,
.contact-inner p, .about-band__copy p, .about-intro__copy p,
.c-markets p { font-size: 16px !important; }
.approach-item p, .package-card p, .expertise-card p,
.principle p, .pillar-panel__copy p, .sector-card p,
.service-card p { font-size: 14.5px !important; }
.pillar-panel__copy li, .pillar-panel__list li { font-size: 14.5px; line-height: 1.55; }

/* ---------- 2. Colour on DARK sections -------------------------------- */

.c-hero .eyebrow, .eyebrow.eyebrow--gold,
.c-services .section-label, .approach-section .section-label,
.c-markets .section-label, .c-sectors .section-label,
.contact-section .eyebrow,
.approach-section .approach-step,
.c-sectors .sector-card__num,
.pillar-panel__copy small, .pillar-panel__value small { color: var(--am-gold-light) !important; }

/* How we work (home + clients) */
.approach-section,
.approach-section .approach-heading h2,
.approach-section .approach-item h3 { color: #fff !important; }
.approach-section .approach-heading h2 em,
.contact-section h2 em { color: var(--am-gold-light) !important; }
.approach-section .approach-heading p,
.approach-section .approach-item p { color: var(--am-body-dark) !important; }

/* Contact band (dark) — headline & intro; cards keep their own colours */
.contact-inner > div:first-child h2 { color: #fff !important; }
.contact-inner > div:first-child p { color: var(--am-body-dark) !important; }

/* Services intro, markets copy, hero copy */
.c-services .c-heading p,
.c-markets p, .c-markets li p,
.c-hero__content > p,
.about-hero p { color: var(--am-body-dark) !important; }

/* About / service-page hero stamp */
.about-hero__stamp, .about-hero__stamp small { color: var(--am-gold-light) !important; opacity: 1 !important; }

/* Footer */
.site-footer__meta { color: #aebbc4 !important; }
.site-footer__meta span { color: var(--am-gold-light) !important; }

/* Contact cards (cream cards on the dark contact band) */
.contact-card small {
  font-family: var(--am-sans) !important; font-weight: 600;
  font-size: 11px !important; letter-spacing: 0.16em;
  color: var(--am-gold-deep) !important;
}
.contact-card strong {
  font-family: var(--am-serif) !important; font-weight: 600;
  font-size: clamp(20px, 2.1vw, 27px) !important;
  color: var(--am-ink) !important; white-space: nowrap;
}
.contact-card span:not(.contact-card__icon) {
  font-family: var(--am-sans) !important;
  font-size: 12.5px !important; color: var(--am-body-light) !important;
}

/* ---------- 3. Colour on LIGHT sections ------------------------------- */

/* Gold italic words on cream ("Clear governance.", "direction.") */
.engagement-section h2 em, .about-band h2 em, .who-grid h2 em,
.bahrain-section em, .expertise-heading h2 em, .principles-section h2 em,
.about-intro h2 em { color: var(--am-gold-deep) !important; }

/* Labels on light */
.engagement-section .section-label, .about-band .section-label,
.engagement-section .package-code, .about-kicker,
.bahrain-markers span, .principle > span,
.engagement-includes li { color: var(--am-gold-deep) !important; }

/* Body on light */
.engagement-section p, .about-band p, .about-intro__copy p,
.expertise-section p, .principles-section p, .bahrain-section p,
.service-card p { color: var(--am-body-light) !important; }
.about-band__stats > div:not(.about-band__markets) > span {
  color: var(--am-body-light) !important;
  font-family: var(--am-sans) !important;
  font-weight: 600; font-size: 11px !important; letter-spacing: 0.14em;
}

/* Markets list detail lines (dark) */
.c-markets__points li span { color: var(--am-body-dark) !important; font-size: 14.5px !important; }

/* ---------- 4. Side margins (fix: text touching the screen edge
                 on laptop widths below ~1240px) -------------------------- */

.approach-inner,
.contact-inner,
.engagement-section {
  box-sizing: border-box;
  padding-left: clamp(20px, 4vw, 40px) !important;
  padding-right: clamp(20px, 4vw, 40px) !important;
}

/* ---------- 5. Arabic ------------------------------------------------- */

[dir="rtl"] .eyebrow, [dir="rtl"] .section-label, [dir="rtl"] .section-label span,
[dir="rtl"] .approach-step, [dir="rtl"] .package-code, [dir="rtl"] .about-kicker,
[dir="rtl"] .c-btn, [dir="rtl"] .button, [dir="rtl"] .site-nav__cta,
[dir="rtl"] .pillar-panel__copy small, [dir="rtl"] .pillar-panel__value small,
[dir="rtl"] .engagement-includes li, [dir="rtl"] cite {
  font-family: var(--am-arabic) !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  text-transform: none;
}
[dir="rtl"] .amanah-site p { font-family: var(--am-arabic); line-height: 1.9; }
/* Amiri italic renders as a slanted, calligraphic style that clashes with the
   upright headline — keep the gold accent words upright and the same weight */
[dir="rtl"] h1 em, [dir="rtl"] h2 em, [dir="rtl"] h3 em { font-style: normal !important; }
[dir="rtl"] h1, [dir="rtl"] h2 { font-weight: 700; letter-spacing: 0 !important; }

/* ---------- 6. Mobile ------------------------------------------------- */

@media (max-width: 480px) {
  .eyebrow, .section-label span { font-size: 10.5px !important; letter-spacing: 0.12em; }
  .c-hero__content > p, .approach-heading p, .engagement-heading p,
  .contact-inner p, .about-band__copy p, .c-heading p { font-size: 15.5px !important; }
}