/* ==========================================================================
   Khattaly Consulting — Base design tokens
   Bright/editorial base + selected dark sections, per approved design.
   ========================================================================== */

:root {
  /* Colors */
  --color-cream:        #F7F3EC; /* page background */
  --color-navy:         #1B2A4A; /* headings, nav, primary text */
  --color-navy-dark:    #0F1A30; /* dark section background */
  --color-gold:         #B8873A; /* accent — links, CTAs, eyebrow labels */
  --color-gold-light:   #D9B978; /* gold on dark backgrounds */
  --color-grey:         #5B5F66; /* body copy on light background */
  --color-grey-light:   #9AA0A8; /* body copy on dark background */
  --color-line:         #DFD8C8; /* hairline dividers on light background */
  --color-line-dark:    #33405C; /* hairline dividers on dark background */
  --color-white:        #FFFFFF;
  --color-risk-high:    #B4432E;
  --color-risk-medium:  #B8873A;
  --color-risk-low:     #2E6B4F;

  /* Typography */
  --font-display: Georgia, "Times New Roman", serif; /* headlines */
  --font-body: "Segoe UI", Tahoma, Arial, sans-serif; /* body copy, nav, UI */
  --font-arabic: "Segoe UI", Tahoma, "Noto Kufi Arabic", Arial, sans-serif;

  /* Spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  /* Layout */
  --container-max: 1360px;                 /* max width of the content "box" — backgrounds are always full width */
  --gutter: clamp(16px, 4vw, 56px);        /* side padding: 16px on phones, up to 56px on big screens */
  --radius: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-cream);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

html[lang="ar"] body {
  font-family: var(--font-arabic);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-navy);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.15;
  font-weight: 400;
}

h1 { font-size: 48px; }
h2 { font-size: 32px; }
h3 { font-size: 22px; }

p { margin: 0 0 var(--space-2) 0; color: var(--color-grey); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Home hero: text + image side by side inside the container. The image is a tall arch
   (like a Moroccan doorway) with the photo's own 2:3 proportions, so nothing is cropped —
   the tiled floor at the bottom and the sky at the top both stay visible. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
/* headline: navy line + warm gold italic line (gold → amber, picking up the sunset in the photo) */
.hero-title {
  max-width: 15em;
  font-size: clamp(2.2rem, 1.2rem + 2.2vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}
.hero-title-accent {
  display: block;
  margin-top: 0.12em;
  font-style: italic;
  color: var(--color-gold);
  background: linear-gradient(90deg, #B8873A 0%, #C77B35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[dir="rtl"] .hero-title-accent { background-image: linear-gradient(270deg, #B8873A 0%, #C77B35 100%); font-style: normal; }
/* Arabic: Amiri (already loaded by the layout for the logo, weight 700) */
html[lang="ar"] .hero-title { font-family: "Amiri", var(--font-display); font-weight: 700; line-height: 1.45; letter-spacing: 0; }
.hero-rule {
  display: block;
  width: 56px;
  height: 2px;
  margin: var(--space-3) 0;
  background: linear-gradient(90deg, var(--color-gold), rgba(184, 135, 58, 0));
}
html[dir="rtl"] .hero-rule { background: linear-gradient(270deg, var(--color-gold), rgba(184, 135, 58, 0)); }
.hero-lead {
  max-width: 34em;
  margin-bottom: var(--space-4);
  font-size: clamp(16px, 0.9rem + 0.25vw, 18px);
  line-height: 1.8;
  color: #4A4F57;
}
/* hero CTA: navy pill with the arrow in a gold circle; on hover the pill lifts and the arrow slides */
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 7px 7px 7px 28px;
  border-radius: 999px;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 24px rgba(27, 42, 74, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
html[dir="rtl"] .btn-hero { padding: 7px 28px 7px 7px; letter-spacing: 0; }
.btn-hero-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-white);
  overflow: hidden;
  transition: background 0.3s ease;
}
.btn-hero-arrow svg { width: 18px; height: 18px; transition: transform 0.35s ease; }
html[dir="rtl"] .btn-hero-arrow svg { transform: scaleX(-1); }
.btn-hero:hover,
.btn-hero:focus-visible {
  background: #22355C;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(27, 42, 74, 0.24);
}
.btn-hero:hover .btn-hero-arrow,
.btn-hero:focus-visible .btn-hero-arrow { background: #C99A4A; }
.btn-hero:hover .btn-hero-arrow svg,
.btn-hero:focus-visible .btn-hero-arrow svg { transform: translateX(3px); }
html[dir="rtl"] .btn-hero:hover .btn-hero-arrow svg,
html[dir="rtl"] .btn-hero:focus-visible .btn-hero-arrow svg { transform: scaleX(-1) translateX(3px); }
.hero-media img {
  height: clamp(460px, 70vh, 620px);
  width: auto;
  /* a bit wider than the photo (2:3) to fill more of the page; the extra is trimmed
     from the empty sky at the top only, so the tiled floor stays fully visible */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center bottom;
  /* 9999px top radii get scaled down by the browser to exactly half the width = a perfect arch */
  border-radius: 9999px 9999px 6px 6px;
  box-shadow: 0 24px 48px rgba(27, 42, 74, 0.14);
}
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-4); padding-top: var(--space-4); }
  .hero-media { max-width: 400px; width: 100%; margin-inline: auto; }
  .hero-media img { width: 100%; height: auto; }
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 14px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.btn-primary {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--color-navy-dark); }

.btn-outline {
  background: transparent;
  border-color: var(--color-navy);
  color: var(--color-navy);
}
.btn-outline:hover { background: var(--color-navy); color: var(--color-white); }

/* Elegant pill button: thin gold border, fills with gold on hover, arrow slides forward */
.btn-pill-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  color: var(--color-navy);
  font-size: 15px;
  letter-spacing: 0.03em;
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.btn-pill-arrow {
  display: inline-block;
  color: var(--color-gold);
  transition: transform 0.3s ease, color 0.3s ease;
}
.btn-pill-gold:hover,
.btn-pill-gold:focus-visible {
  background: var(--color-gold);
  color: var(--color-white);
  box-shadow: 0 6px 18px rgba(184, 135, 58, 0.28);
}
.btn-pill-gold:hover .btn-pill-arrow,
.btn-pill-gold:focus-visible .btn-pill-arrow {
  color: var(--color-white);
  transform: translateX(4px);
}
/* In Arabic "forward" is to the left */
html[dir="rtl"] .btn-pill-gold:hover .btn-pill-arrow,
html[dir="rtl"] .btn-pill-gold:focus-visible .btn-pill-arrow {
  transform: translateX(-4px);
}

/* Dark section */
.section-dark {
  background: var(--color-navy-dark);
  color: var(--color-white);
}
.section-dark h1, .section-dark h2, .section-dark h3 {
  color: var(--color-white);
}
.section-dark p { color: var(--color-grey-light); }
.section-dark .btn-outline {
  border-color: var(--color-gold-light);
  color: var(--color-gold-light);
}
.section-dark .btn-outline:hover {
  background: var(--color-gold-light);
  color: var(--color-navy-dark);
}

/* Eyebrow label (small caps label above a heading) */
.eyebrow {
  color: var(--color-gold);
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: var(--space-1);
  display: block;
}

/* Risk indicator badges (used in Khattaly Brief section) */
.risk-high   { color: var(--color-risk-high); font-weight: 600; }
.risk-medium { color: var(--color-risk-medium); font-weight: 600; }
.risk-low    { color: var(--color-risk-low); font-weight: 600; }

/* Header / nav */
.site-header {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-cream);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.site-nav { display: flex; gap: var(--space-3); align-items: center; }
.site-nav a {
  font-size: 14px;
  color: var(--color-navy);
}
/* Page links: a gold line grows from the middle on hover; the page you're on stays gold + underlined */
.site-nav a:not(.btn):not(.lang-switch) {
  position: relative;
  padding: 6px 0;
  transition: color 0.25s ease;
}
.site-nav a:not(.btn):not(.lang-switch)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.site-nav a:hover { color: var(--color-gold); }
.site-nav a:not(.btn):not(.lang-switch):hover::after,
.site-nav a.is-active::after { transform: scaleX(1); }
.site-nav a.is-active { color: var(--color-gold); font-weight: 600; }
.site-nav a.btn-primary,
.site-nav a.btn-primary:hover {
  color: var(--color-white);
}
.lang-switch {
  font-size: 13px;
  border: 1px solid var(--color-navy);
  border-radius: var(--radius);
  padding: 6px 12px;
  transition: background 0.25s ease, color 0.25s ease;
}
.site-nav a.lang-switch:hover,
.lang-switch:hover { background: var(--color-navy); color: var(--color-white); }

/* "Home / Section" bar under the header (all pages except home) */
.breadcrumb {
  font-size: 13px;
  color: var(--color-grey);
  border-bottom: 1px solid var(--color-line);
}
.breadcrumb .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.breadcrumb a { color: var(--color-navy); transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--color-gold); }
.breadcrumb-home { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb-arrow { color: var(--color-gold); transition: transform 0.25s ease; }
.breadcrumb-home:hover .breadcrumb-arrow { transform: translateX(-4px); }
html[dir="rtl"] .breadcrumb-home:hover .breadcrumb-arrow { transform: translateX(4px); }
.breadcrumb-sep { color: var(--color-line); }
.breadcrumb [aria-current="page"] { color: var(--color-gold); font-weight: 600; }

/* Menu items never wrap onto two lines */
.site-nav a { white-space: nowrap; }
/* Small laptops (1025–1280px): 5 menu items + language + button — tighter spacing so everything fits on one line */
@media (min-width: 1025px) and (max-width: 1280px) {
  .site-nav { gap: 18px; }
  .site-nav a { font-size: 13.5px; }
  .site-nav .btn { padding: 12px 18px; }
}

/* Mobile/tablet menu — the ☰ button + its language switch are hidden on desktop */
.header-actions { display: none; }

@media (max-width: 1024px) {
  .site-header { position: relative; }

  /* language switch + ☰ side by side, so changing language never needs the menu */
  .header-actions { display: flex; align-items: center; gap: 10px; }
  .header-actions .lang-switch { padding: 9px 14px; }

  /* ☰ button: 3 navy bars in a 44px tap target */
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    background: none;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-toggle-bar {
    display: block;
    height: 2px;
    background: var(--color-navy);
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  /* When open, the 3 bars turn into an ✕ */
  .nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The nav becomes a panel that drops down under the header */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--space-3) var(--space-3);
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-line);
    box-shadow: 0 12px 24px rgba(27, 42, 74, 0.10);
  }
  .nav-open .site-nav { display: flex; }
  .site-nav a,
  .site-nav a:not(.btn):not(.lang-switch) {
    font-size: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-line);
  }
  /* in the dropdown the current page gets a gold bar on its start side instead of the underline */
  .site-nav a:not(.btn):not(.lang-switch)::after { display: none; }
  .site-nav a.is-active {
    border-inline-start: 3px solid var(--color-gold);
    padding-inline-start: 12px;
  }
  .site-nav .lang-switch { display: none; } /* already shown next to ☰ */
  .site-nav .btn-primary {
    margin-top: var(--space-2);
    padding: 14px;
    text-align: center;
    border-bottom: none;
  }
}

/* Footer */
.site-footer {
  background: #EFE8DA; /* light sand */
  border-top: 1px solid var(--color-gold);
  color: var(--color-grey);
  padding-top: var(--space-5);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--color-navy);
}
.footer-logo img { display: block; height: 52px; width: auto; }
html[lang="ar"] .footer-logo img { height: 58px; }
.footer-brand p {
  max-width: 340px;
  margin: var(--space-2) 0 0;
  font-size: 14px;
}
.footer-social-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-gold);
}
html[lang="ar"] .footer-social-label { letter-spacing: 0; }
.footer-social-icons { display: flex; gap: 10px; }
/* round outlined icons — on hover/focus the icon turns gold and lifts slightly, with a small name tooltip */
.social-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  color: var(--color-navy);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.social-icon svg { width: 19px; height: 19px; }
.social-icon:hover,
.social-icon:focus-visible {
  background: rgba(184, 135, 58, 0.08);
  color: var(--color-gold);
  transform: translateY(-3px);
}
.social-icon.is-disabled { cursor: default; }
/* tooltip: navy label with a small arrow, above the icon */
.social-icon::before,
.social-icon::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.social-icon::after {
  content: attr(data-tip);
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
  padding: 5px 10px;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(27, 42, 74, 0.18);
}
.social-icon::before {
  content: "";
  bottom: calc(100% + 4px);
  transform: translate(-50%, 4px);
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: var(--color-navy);
}
.social-icon:hover::before,
.social-icon:hover::after,
.social-icon:focus-visible::before,
.social-icon:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
html[lang="ar"] .social-icon::after { letter-spacing: 0; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-3);
  border-top: 1px solid #DDD3BF;
  font-size: 13px;
}
.footer-legal { color: var(--color-grey); text-decoration: underline; text-decoration-color: rgba(184, 135, 58, 0.5); text-underline-offset: 3px; }
.footer-legal:hover { color: var(--color-gold); }
.footer-bottom-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
/* designer credit: small and quiet; the name in the display serif, the phone a gold WhatsApp link */
.footer-credit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--color-grey); }
.footer-credit-sep { width: 1px; height: 14px; margin-inline-end: 12px; background: #CDBF9F; }
.footer-credit-name { font-family: var(--font-display); font-size: 14px; color: var(--color-navy); letter-spacing: 0.02em; }
.footer-credit-phone { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; color: var(--color-gold); font-variant-numeric: tabular-nums; transition: color .2s; }
.footer-credit-phone svg { width: 13px; height: 13px; }
.footer-credit-phone:hover, .footer-credit-phone:focus-visible { color: var(--color-navy); }
@media (max-width: 600px) {
  .footer-credit-sep { display: none; }
}
@media (max-width: 600px) {
  .footer-top { flex-direction: column; gap: var(--space-3); }
}

/* Cards (Latest Analysis / Insights grid) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: var(--radius);
}
.card-readmore {
  display: block;
  margin-top: auto;
  padding-top: var(--space-1);
  color: var(--color-gold);
  font-size: 14px;
  font-weight: 600;
}
.card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 12px 28px rgba(27, 42, 74, 0.14);
}
.card:hover img { filter: brightness(1.03); }
.card img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; transition: filter 0.25s ease; }
.card .eyebrow { margin-top: var(--space-2); }
.card h3 { font-size: 18px; }
.card p { font-size: 14px; }

/* Larger card variant — used for "Latest Analysis" on the homepage,
   matching the bigger proportions Omar liked from the dark alternate design */
.card-grid-large .card img { aspect-ratio: 4 / 5; }
.card-grid-large .card h3 { font-size: 21px; }
.card-grid-large .card p { font-size: 15px; }
.card-grid-large { gap: var(--space-4); }

/* Responsive */
@media (max-width: 960px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .approach-grid { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 34px; }
}
@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; }
}

/* RTL adjustments — Arabic pages set <html dir="rtl"> */
html[dir="rtl"] .card,
html[dir="rtl"] .site-nav {
  direction: rtl;
}

/* "Our Approach" pillars (4 icon blocks under the hero) */
.approach-section {
  background: #E4E9E7; /* light blue-grey band, matches reference design */
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.approach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
/* (must come after the rule above — the earlier media queries were being overridden) */
@media (max-width: 960px) { .approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .approach-grid { grid-template-columns: 1fr; } }
.approach-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.approach-item h3 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.approach-item p { color: var(--color-grey); margin-bottom: var(--space-1); }
.approach-item .approach-arrow {
  display: block;
  margin-top: auto;
  padding-top: var(--space-1);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-gold);
}

/* ==========================================================================
   Firm Overview page (/firm-overview)
   ========================================================================== */
.fo-intro {
  padding-top: var(--space-4); /* the "Home / Section" bar above already names the page */
  padding-bottom: var(--space-6);
}
.fo-intro-grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: var(--space-5);
  align-items: start;
}
.fo-portrait { margin: 0; }
/* thin gold frame, offset from the photo */
.fo-portrait-frame {
  position: relative;
  padding: 12px;
  border: 1px solid var(--color-gold);
}
.fo-portrait-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 502 / 640;
  object-fit: cover;
}
.fo-portrait figcaption {
  margin-top: var(--space-2);
  text-align: center;
}
.fo-person-name {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-navy);
}
.fo-person-title {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
}
.fo-intro-text h1 {
  font-size: 40px;
  margin-bottom: var(--space-3);
}
.fo-lead {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-navy);
  padding-inline-start: var(--space-2);
  border-inline-start: 2px solid var(--color-gold);
  margin-bottom: var(--space-3);
}
.fo-intro-text p:not(.fo-lead) {
  font-size: 17px;
  line-height: 1.8;
}

/* Light sage section with gold accents (was dark navy — changed at the client's request, 2026-10-04) */
.fo-highlights {
  background: #EEF2EF;
  border-top: 1px solid #DCE3DE;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.fo-block + .fo-block {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid #D5DDD7;
}
/* Focus sectors: two sentences — a gold-ruled lead like the intro, then the text (boxes removed 2026-10-06) */
.fo-sectors-lead {
  max-width: 820px;
  margin-top: var(--space-2);
}
.fo-clients {
  max-width: 820px;
  font-size: 17px;
  line-height: 1.8;
  padding-inline-start: calc(var(--space-2) + 2px);   /* lines up with the lead's text, after its gold rule */
  margin-bottom: 0;
}
.fo-pillars {
  list-style: none;
  counter-reset: pillar;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.fo-pillars li {
  counter-increment: pillar;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.3;
  color: var(--color-navy);
}
.fo-pillars li::before {
  content: "0" counter(pillar);
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--color-gold);
}
.fo-pillars li::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-top: var(--space-2);
  background: var(--color-gold);
}
/* Contact card: white panel with a gold top line — envelope + label + email | Request a Briefing */
.fo-contact {
  margin-top: var(--space-5);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-white);
  border: 1px solid #DCE3DE;
  border-top: 3px solid var(--color-gold);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(27, 42, 74, 0.06);
}
.fo-contact-info { display: flex; align-items: center; gap: var(--space-2); }
.fo-contact-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  background: #FBF7EE;
}
.fo-contact-icon svg { width: 24px; height: 24px; }
.fo-contact-label {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-grey);
}
html[lang="ar"] .fo-contact-label { letter-spacing: 0; text-transform: none; font-size: 15px; }
.fo-contact-email {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--color-navy);
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.fo-contact-email:hover { color: var(--color-gold); border-bottom-color: var(--color-gold); }
.fo-contact-btn { flex-shrink: 0; }

/* Arabic: Amiri headings, Tajawal body (loaded on this page) */
html[lang="ar"] .firm-overview { font-family: "Tajawal", var(--font-arabic); }
html[lang="ar"] .firm-overview h1,
html[lang="ar"] .fo-lead,
html[lang="ar"] .fo-person-name,
html[lang="ar"] .fo-pillars li {
  font-family: "Amiri", "Times New Roman", serif;
}
html[lang="ar"] .fo-person-title { letter-spacing: 0; text-transform: none; font-size: 15px; }
html[lang="ar"] .firm-overview .eyebrow { letter-spacing: 0; }
html[lang="ar"] .fo-intro-text p:not(.fo-lead),
html[lang="ar"] .fo-clients { line-height: 1.9; }

/* Fade-in on scroll (only hidden when JS is running, so content is never lost) */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 960px) {
  .fo-intro-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .fo-portrait { max-width: 340px; margin: 0 auto; }
  .fo-pillars { grid-template-columns: 1fr; gap: var(--space-3); }
}
@media (max-width: 600px) {
  .fo-intro, .fo-highlights { padding-top: var(--space-5); padding-bottom: var(--space-5); }
  .fo-intro { padding-top: var(--space-3); }
  .fo-intro-text h1 { font-size: 30px; }
  .fo-lead { font-size: 19px; }
  .fo-pillars li { font-size: 21px; }
  .fo-contact { padding: var(--space-3) var(--space-2); }
  .fo-contact-email { font-size: 18px; overflow-wrap: anywhere; }
  .fo-contact-icon { width: 46px; height: 46px; }
  .fo-contact-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Leadership page (/leadership) — same look as Firm Overview, as a profile:
   bigger photo, name/title featured, bio beside it. Reuses .fo-portrait-frame + .reveal.
   ========================================================================== */
.ld-profile {
  padding-top: var(--space-4); /* the "Home / Section" bar above already names the page */
  padding-bottom: var(--space-6);
}
.ld-profile-grid {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: var(--space-5);
  align-items: center;
}
.ld-portrait { margin: 0; }
.ld-name {
  font-size: 52px;
  line-height: 1.1;
  margin-bottom: var(--space-2);
}
.ld-title {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-gold);
}
.ld-firm {
  margin: 4px 0 var(--space-4);
  font-size: 15px;
  color: var(--color-grey);
}
/* short gold rule between the name block and the bio */
.ld-firm::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: var(--space-3);
  background: var(--color-gold);
}
.ld-bio {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.7;
  color: var(--color-navy);
  max-width: 680px;
}

/* Shared block styles (light + dark sections) */
.ld-career {
  background: #FBF9F4;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.ld-block + .ld-block {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}
.ld-heading { font-size: 32px; max-width: 900px; }
.ld-intro {
  font-size: 18px;
  line-height: 1.8;
  max-width: 820px;
  margin-bottom: var(--space-4);
}
.ld-block h3 {
  font-size: 21px;
  line-height: 1.3;
  margin-bottom: var(--space-1);
}
.ld-block article p,
.ld-block li p { font-size: 16px; line-height: 1.8; margin: 0; }

/* Sector experience: the two roles one after the other, each with a gold rule at its side (no boxes, 2026-10-06) */
.ld-roles {
  display: grid;
  gap: var(--space-4);
  max-width: 820px;
}
.ld-role {
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--color-gold);
}

/* Education: three small credential cards */
.ld-education {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.ld-education li {
  padding: var(--space-3);
  border-inline-start: 2px solid var(--color-gold);
  background: var(--color-white);
}
.ld-edu-type {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-gold);
}
.ld-edu-program {
  display: block;
  margin: var(--space-1) 0 4px;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.3;
  color: var(--color-navy);
}
.ld-edu-school { display: block; font-size: 15px; color: var(--color-grey); }

/* Light sage section (was dark navy — changed at the client's request, 2026-10-04) */
.ld-advisory {
  background: #EEF2EF;
  border-top: 1px solid #DCE3DE;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.ld-advisory .ld-block + .ld-block { border-top-color: #D5DDD7; }
/* network: numbered 01–03 like the Firm Overview pillars */
.ld-network {
  list-style: none;
  counter-reset: network;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.ld-network li { counter-increment: network; }
.ld-network li::before {
  content: "0" counter(network);
  display: block;
  margin-bottom: var(--space-1);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--color-gold);
}
.ld-network h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-top: var(--space-2);
  background: var(--color-gold);
}
/* Omar's perspective — white pull-quote card with a gold edge, a large soft gold quotation mark,
   serif italic text with the key phrase in gold, and a signature (gold line, name, title) */
.ld-perspective {
  position: relative;
  margin-inline: 0;
  margin-bottom: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--color-white);
  border: 1px solid #DCE3DE;
  border-inline-start: 3px solid var(--color-gold);
  box-shadow: 0 18px 40px rgba(27, 42, 74, 0.06);
  overflow: hidden;
}
.ld-block.ld-perspective { border-top: 1px solid #DCE3DE; padding-top: var(--space-5); }
.ld-perspective-mark {
  position: absolute;
  top: -28px;
  inset-inline-end: 28px;
  font-family: var(--font-display);
  font-size: 200px;
  line-height: 1;
  color: rgba(184, 135, 58, 0.12);
  pointer-events: none;
}
.ld-perspective-label {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.ld-perspective blockquote {
  position: relative;
  max-width: 920px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.65rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--color-navy);
}
.ld-perspective blockquote em { color: var(--color-gold); }
.ld-perspective figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: var(--space-3);
}
.ld-perspective-line { width: 40px; height: 2px; background: var(--color-gold); }
.ld-perspective-name { font-family: var(--font-display); font-size: 18px; color: var(--color-navy); }
.ld-perspective-role {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey);
}
html[lang="ar"] .ld-perspective blockquote { font-family: "Amiri", "Times New Roman", serif; font-style: normal; line-height: 1.9; }
html[lang="ar"] .ld-perspective blockquote em { font-style: normal; }
html[lang="ar"] .ld-perspective-label,
html[lang="ar"] .ld-perspective-role { letter-spacing: 0; font-size: 14px; }
html[lang="ar"] .ld-perspective-name { font-family: "Amiri", "Times New Roman", serif; font-size: 20px; }
@media (max-width: 600px) {
  .ld-perspective { padding: var(--space-4) var(--space-3) var(--space-3); }
  .ld-block.ld-perspective { padding-top: var(--space-4); }
  .ld-perspective-mark { font-size: 140px; top: -18px; inset-inline-end: 12px; }
}

/* US-MENA focus: 2×2 grid of outlined cards */
.ld-focus {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.ld-focus article {
  padding: var(--space-4) var(--space-3);
  background: var(--color-white);
  border: 1px solid #DCE3DE;
  border-top: 2px solid var(--color-gold);
}

/* Closing statement — a soft gold glow, a large faint quotation mark behind the text,
   gold lines that draw outward from the centre and a single gold shimmer across the words
   when it scrolls into view (via .reveal → .is-visible). */
.ld-closing {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  text-align: center;
  background: radial-gradient(60% 70% at 50% 50%, rgba(184, 135, 58, 0.09), transparent 70%);
}
.ld-closing::before {
  content: "\201C";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 260px;
  line-height: 1;
  color: rgba(184, 135, 58, 0.10);
  pointer-events: none;
}
.ld-closing p {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.45;
  color: var(--color-navy);
  /* navy text with a gold band that sweeps across it once */
  background: linear-gradient(100deg, var(--color-navy) 42%, var(--color-gold) 50%, var(--color-navy) 58%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ld-closing p.is-visible { animation: ld-shimmer 2.6s ease 0.9s 1 both; }
@keyframes ld-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ld-closing p::before,
.ld-closing p::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin: 0 auto var(--space-3);
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  transition: width 1.1s ease 0.3s;
}
.ld-closing p::after { margin: var(--space-3) auto 0; }
.ld-closing p.is-visible::before,
.ld-closing p.is-visible::after { width: 140px; }
/* no JavaScript, or reduced motion: show everything finished, no movement */
html:not(.js) .ld-closing p::before,
html:not(.js) .ld-closing p::after { width: 140px; }
@media (prefers-reduced-motion: reduce) {
  .ld-closing p.is-visible { animation: none; }
  .ld-closing p::before, .ld-closing p::after { width: 140px; transition: none; }
}

/* Arabic: Amiri headings, Tajawal body (loaded on this page) */
html[lang="ar"] .leadership { font-family: "Tajawal", var(--font-arabic); }
html[lang="ar"] .leadership h1,
html[lang="ar"] .leadership h2,
html[lang="ar"] .leadership h3,
html[lang="ar"] .ld-bio,
html[lang="ar"] .ld-edu-program,
html[lang="ar"] .ld-closing p {
  font-family: "Amiri", "Times New Roman", serif;
}
html[lang="ar"] .leadership h1,
html[lang="ar"] .leadership h2 { line-height: 1.4; }
html[lang="ar"] .ld-title,
html[lang="ar"] .ld-edu-type,
html[lang="ar"] .leadership .eyebrow { letter-spacing: 0; text-transform: none; }
html[lang="ar"] .ld-title { font-size: 17px; }
html[lang="ar"] .ld-edu-type { font-size: 14px; }
html[lang="ar"] .ld-bio { font-size: 21px; line-height: 1.9; }
html[lang="ar"] .ld-intro,
html[lang="ar"] .ld-block article p,
html[lang="ar"] .ld-block li p { line-height: 1.9; }

@media (max-width: 960px) {
  .ld-profile-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .ld-portrait { max-width: 380px; width: 100%; margin: 0 auto; }
  .ld-profile-text { text-align: center; }
  .ld-firm::after { margin-inline: auto; }
  .ld-bio { margin-inline: auto; text-align: start; }
  .ld-focus { grid-template-columns: 1fr; }
  .ld-education, .ld-network { grid-template-columns: 1fr; }
  .ld-network { gap: var(--space-3); }
}
@media (max-width: 600px) {
  .ld-profile, .ld-career, .ld-advisory, .ld-closing { padding-top: var(--space-5); padding-bottom: var(--space-5); }
  .ld-profile { padding-top: var(--space-3); }
  .ld-name { font-size: 34px; }
  .ld-title { font-size: 13px; }
  .ld-bio { font-size: 18px; }
  .ld-heading { font-size: 25px; }
  .ld-focus article { padding: var(--space-3) var(--space-2); }
  .ld-role { padding-inline-start: var(--space-2); }
  .ld-closing p { font-size: 22px; }
}

/* Logo: ONE image — KIC badge + KHATTALY / gold curve / INTERNATIONAL CONSULTING
   (images/logo/khattaly-logo-en.png and -ar.png, drawn at 4x for sharp screens).
   Shown at the same size the old live-text logo had. */
.brand-mark { position: relative; display: inline-flex; align-items: center; }
.brand-logo {
  display: block;
  height: 66px;
  width: auto;
}
html[lang="ar"] .brand-logo { height: 73px; }

/* Gold curve + diamond drawn again on top of the image (same spot) — on hover the curve turns navy
   and the diamond spins, like the original live-text logo. pointer-events: none keeps copy/save on the image. */
.brand-flourish {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.brand-flourish path { transition: stroke 0.3s ease; }
.brand-diamond {
  transition: transform 0.35s ease, fill 0.35s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.brand-mark:hover .brand-flourish path { stroke: var(--color-navy); }
.brand-mark:hover .brand-diamond {
  transform: rotate(180deg) scale(1.4);
  fill: var(--color-navy);
}
@media (max-width: 600px) {
  .brand-logo { height: 48px; }
  html[lang="ar"] .brand-logo { height: 52px; }
}

/* ==========================================================================
   Khattaly Brief — homepage band, /brief list, /brief/{slug} article
   ========================================================================== */
.brief-section {
  background: #FBF9F4; /* light warm white — follows the cream "Khattaly Analysis" band */
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}
.brief-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.brief-head h2 { font-size: 32px; margin-bottom: var(--space-1); }
.brief-head p { margin: 0; max-width: 560px; }

.brief-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
}

/* Card: 16:9 cover, then date · reading time, title, 2-line excerpt, Read More */
.brief-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.brief-card:hover,
.brief-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(27, 42, 74, 0.13);
  border-color: #E4D6B8;
}
.brief-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-navy);
}
.brief-card-media .brief-cover-img,
.brief-card-media .brief-cover-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.brief-card:hover .brief-cover-img,
.brief-card:hover .brief-cover-fallback { transform: scale(1.06); }
.brief-card-number {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  background: rgba(15, 26, 48, 0.72);
  border: 1px solid rgba(217, 185, 120, 0.6);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.brief-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-3);
}
.brief-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-1);
  font-size: 13px;
  color: var(--color-grey);
}
.brief-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-gold); }
.brief-card h3 { font-size: 21px; line-height: 1.3; margin-bottom: var(--space-1); }
.brief-card-excerpt {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brief-card-more {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gold);
}
.brief-card-more span { display: inline-block; transition: transform 0.3s ease; }
.brief-card:hover .brief-card-more span { transform: translateX(4px); }
html[dir="rtl"] .brief-card:hover .brief-card-more span { transform: translateX(-4px); }

/* Fallback cover (no photo): navy gradient, fine gold curves, KIC badge */
.brief-cover-fallback {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  background: radial-gradient(120% 90% at 20% 10%, #24365C 0%, #1B2A4A 45%, #0F1A30 100%);
  color: var(--color-gold-light);
  font-size: 11px;
  letter-spacing: 0.22em;
}
.brief-cover-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.brief-cover-lines path { fill: none; stroke: rgba(217, 185, 120, 0.35); stroke-width: 1; }
.brief-cover-fallback img {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(217, 185, 120, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.brief-cover-fallback span { position: relative; }

/* /brief list page */
.briefs-page { padding-top: var(--space-4); padding-bottom: var(--space-6); }
.briefs-page-head { max-width: 820px; margin-bottom: var(--space-5); }
.briefs-page-head h1 { font-size: 44px; margin-bottom: var(--space-1); }
.briefs-page-sub { font-family: var(--font-display); font-size: 20px; color: var(--color-grey); }

/* /brief/{slug} article */
.brief-hero {
  height: clamp(240px, 42vw, 480px);
  overflow: hidden;
  background: var(--color-navy);
}
.brief-hero .brief-cover-img,
.brief-hero .brief-cover-fallback { width: 100%; height: 100%; object-fit: cover; }
.brief-article-inner { max-width: 820px; padding-bottom: var(--space-6); }
/* the title block sits on a cream panel that overlaps the bottom of the cover */
.brief-article-head {
  position: relative;
  margin-top: calc(var(--space-6) * -1);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--color-cream);
  border-top: 3px solid var(--color-gold);
  border-radius: 6px 6px 0 0;
}
.brief-article-head h1 { font-size: 42px; line-height: 1.2; margin-bottom: var(--space-3); }
.brief-article-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}
.brief-article-bar .brief-meta { margin: 0; font-size: 14px; }

/* comfortable reading column */
.brief-body {
  padding: var(--space-4) var(--space-4) 0;
  font-size: 18px;
  line-height: 1.85;
  color: #3D4249;
}
.brief-body p { color: inherit; margin-bottom: 1.2em; }
.brief-body h2 {
  font-size: 26px;
  line-height: 1.3;
  margin: 1.8em 0 0.6em;
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--color-gold);
}
.brief-body > h2:first-child { margin-top: 0; }
.brief-body ul { margin: 0 0 1.4em; padding-inline-start: 1.3em; }
.brief-body li { margin-bottom: 0.8em; padding-inline-start: 4px; }
.brief-body li::marker { color: var(--color-gold); }
.brief-body strong { color: var(--color-navy); font-weight: 600; }
.brief-body strong.block { display: block; margin-bottom: 2px; }
.brief-body .table-wrap { overflow-x: auto; margin: 0 0 1.6em; border: 1px solid var(--color-line); border-radius: 6px; }
.brief-body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.brief-body th { background: var(--color-navy); color: var(--color-white); font-weight: 600; text-align: start; }
.brief-body th, .brief-body td { padding: 10px 14px; border-bottom: 1px solid var(--color-line); }
.brief-body tbody tr:nth-child(even) td { background: #FBF9F4; }

.brief-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) var(--space-4) 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.brief-pdf-btn svg { width: 18px; height: 18px; color: var(--color-gold); transition: color 0.3s ease; }
.brief-pdf-btn:hover svg { color: var(--color-white); }
.brief-credit { margin: 0; font-size: 12px; }
.brief-credit a { color: var(--color-grey-light); }
.brief-credit a:hover { color: var(--color-gold); }

/* share buttons — small icons next to the date, bigger labelled ones after the article */
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.share-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.share-btn:hover, .share-btn:focus-visible { background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy); transform: translateY(-2px); }
.share-btn.is-copied { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-white); }
.share-sm .share-btn { width: 36px; height: 36px; }
.share-lg .share-btn { padding: 11px 20px; font-size: 14px; font-weight: 500; }
.brief-share-block {
  margin: var(--space-4) var(--space-4) 0;
  padding: var(--space-4);
  text-align: center;
  background: #FBF9F4;
  border: 1px solid var(--color-line);
  border-radius: 6px;
}
.brief-share-block h2 { font-size: 24px; margin-bottom: var(--space-2); }
.brief-share-block .share { justify-content: center; }

/* "Back to All Briefs" — top: small gold caps like the logo's "INTERNATIONAL CONSULTING" line,
   with a gold underline that grows on hover and an arrow that slides back */
.brief-back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  border-radius: 2px;
}
.brief-back-text { position: relative; padding-bottom: 3px; }
.brief-back-text::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
html[dir="rtl"] .brief-back-text::after { transform-origin: right; }
.brief-back-arrow { display: inline-block; font-weight: 400; transition: transform 0.3s ease; }
.brief-back-link:hover .brief-back-text::after,
.brief-back-link:focus-visible .brief-back-text::after { transform: scaleX(1); }
.brief-back-link:hover .brief-back-arrow,
.brief-back-link:focus-visible .brief-back-arrow { transform: translateX(-4px); }
html[dir="rtl"] .brief-back-link:hover .brief-back-arrow,
html[dir="rtl"] .brief-back-link:focus-visible .brief-back-arrow { transform: translateX(4px); }
.brief-back-link:focus-visible,
.brief-back-pill:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; }
/* Arabic: no caps / letter-spacing (letters must stay joined), same gold and weight */
html[lang="ar"] .brief-back-link { font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 700; }

/* "Back to All Briefs" — bottom: gold-outlined pill between Previous and Next, fills gold on hover */
.brief-back-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-navy);
  background: transparent;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.brief-back-pill .brief-back-arrow { color: var(--color-gold); }
.brief-back-pill:hover,
.brief-back-pill:focus-visible {
  background: var(--color-gold);
  color: var(--color-white);
  box-shadow: 0 6px 18px rgba(184, 135, 58, 0.28);
}
.brief-back-pill:hover .brief-back-arrow,
.brief-back-pill:focus-visible .brief-back-arrow { color: var(--color-white); transform: translateX(-4px); }
html[dir="rtl"] .brief-back-pill:hover .brief-back-arrow,
html[dir="rtl"] .brief-back-pill:focus-visible .brief-back-arrow { transform: translateX(4px); }

/* previous / back / next */
.brief-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) var(--space-4) 0;
}
.brief-pager-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-white);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.brief-pager-link:hover { border-color: var(--color-gold); box-shadow: 0 10px 24px rgba(27, 42, 74, 0.08); }
.brief-pager-next { text-align: end; }
.brief-pager-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold); }
.brief-pager-title { font-family: var(--font-display); font-size: 18px; line-height: 1.35; color: var(--color-navy); }

/* Arabic: Amiri headings, Tajawal body */
html[lang="ar"] .briefs-page,
html[lang="ar"] .brief-article,
html[lang="ar"] .brief-card-body { font-family: "Tajawal", var(--font-arabic); }
html[lang="ar"] .briefs-page h1,
html[lang="ar"] .brief-card h3,
html[lang="ar"] .brief-article h1,
html[lang="ar"] .brief-body h2,
html[lang="ar"] .brief-share-block h2,
html[lang="ar"] .brief-pager-title,
html[lang="ar"] .briefs-page-sub { font-family: "Amiri", "Times New Roman", serif; }
html[lang="ar"] .brief-article h1, html[lang="ar"] .briefs-page h1 { line-height: 1.45; }
html[lang="ar"] .brief-body { font-size: 19px; line-height: 2; }

/* Disclaimer & Terms page — reading column, numbered gold section headings */
.terms-inner { max-width: 860px; }
.terms-page .briefs-page-head { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); }
.terms-updated { margin: var(--space-1) 0 0; font-size: 14px; color: var(--color-grey); }
.terms-body { padding: 0; font-size: 17px; }
.terms-body h2 { display: flex; align-items: baseline; gap: 12px; font-size: 23px; margin-top: 1.8em; }
.terms-num { font-size: 15px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-gold); }
.terms-body a { color: var(--color-gold); text-decoration: underline; text-underline-offset: 3px; }
html[lang="ar"] .terms-body { font-size: 18px; }

/* ==========================================================================
   Khattaly Analysis — list + article reuse the Khattaly Brief styles above; extras below
   ========================================================================== */
.analysis-tabs { max-width: 100%; margin-bottom: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.analysis-tabs::-webkit-scrollbar { display: none; }
.analysis-tabs .pub-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; }
.analysis-tab-count {
  min-width: 22px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: var(--color-gold);
  background: rgba(184, 135, 58, 0.12);
  border-radius: 999px;
}
.analysis-tabs .pub-tab.is-active .analysis-tab-count { color: var(--color-navy); background: var(--color-gold-light); }
.analysis-empty { max-width: 520px; }

/* figures from the Word files (charts / tables as pictures) */
.brief-body .article-figure { margin: 0.4em 0 1.8em; padding: 10px; background: var(--color-white); border: 1px solid var(--color-line); border-radius: 6px; }
.brief-body .article-figure img { width: 100%; height: auto; }
/* "References": small heading, the list after it in smaller type */
.brief-body h2.article-refs-title { font-size: 20px; margin-top: 2.2em; padding-top: 1em; border-top: 1px solid var(--color-line); }
.brief-body h2.article-refs-title ~ p,
.brief-body h2.article-refs-title ~ ul { font-size: 14px; line-height: 1.7; color: var(--color-grey); }
.brief-body h2.article-refs-title ~ ul li { margin-bottom: 0.5em; }

/* 3-part series: the parts, with the current one highlighted */
.analysis-series {
  margin: var(--space-4) var(--space-4) 0;
  padding: var(--space-3);
  background: #FBF9F4;
  border: 1px solid var(--color-line);
  border-inline-start: 3px solid var(--color-gold);
}
.analysis-series-label { display: block; margin-bottom: var(--space-1); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold); }
.analysis-series ol { margin: 0; padding: 0; list-style: none; }
.analysis-series li { padding: 6px 0; }
.analysis-series li + li { border-top: 1px dashed var(--color-line); }
.analysis-series a, .analysis-series .is-current { display: flex; gap: 12px; font-family: var(--font-display); font-size: 16px; line-height: 1.4; color: var(--color-navy); }
.analysis-series a:hover { color: var(--color-gold); }
.analysis-series b { flex-shrink: 0; width: 24px; height: 24px; font-family: var(--font-body); font-size: 12px; line-height: 24px; text-align: center; color: var(--color-gold); border: 1px solid var(--color-gold); border-radius: 50%; }
.analysis-series .is-current { font-weight: 700; }
.analysis-series .is-current b { color: var(--color-white); background: var(--color-gold); }
.analysis-next-part {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: var(--space-3) var(--space-4) 0;
  padding: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-gold);
  border-radius: 6px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.analysis-next-part:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(27, 42, 74, 0.08); }
html[lang="ar"] .analysis-series a, html[lang="ar"] .analysis-series .is-current { font-family: "Amiri", "Times New Roman", serif; font-size: 18px; }
html[lang="ar"] .analysis-series-label { letter-spacing: 0; font-size: 14px; }
@media (max-width: 600px) {
  .analysis-series, .analysis-next-part { margin-inline: 0; }
  .analysis-tabs .pub-tab { flex: 0 0 auto; padding: 9px 14px; }
}
html[lang="ar"] .brief-card-number, html[lang="ar"] .brief-pager-label, html[lang="ar"] .brief-cover-fallback { letter-spacing: 0; }

@media (max-width: 1024px) {
  .brief-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .brief-grid-cards { grid-template-columns: 1fr; }
  .brief-head h2, .briefs-page-head h1 { font-size: 28px; }
  .brief-article-head { margin-top: -40px; padding: var(--space-3) var(--space-2) var(--space-2); }
  .brief-article-head h1 { font-size: 28px; }
  .brief-body { padding: var(--space-3) var(--space-2) 0; font-size: 17px; }
  html[lang="ar"] .brief-body { font-size: 18px; }
  .brief-body h2 { font-size: 22px; }
  .brief-actions, .brief-share-block, .brief-pager { margin-inline: var(--space-2); }
  .brief-share-block { padding: var(--space-3) var(--space-2); }
  .brief-pager { grid-template-columns: 1fr; }
  .brief-pager-next { text-align: start; }
  .brief-pager-empty { display: none; }
  /* phones: Previous, Next, then the full-width "Back to All Briefs" pill */
  .brief-back-pill { order: 3; width: 100%; }
}
.trust-bar {
  background: #E9EEEA; /* light sage — a soft echo of the old dark green */
  color: var(--color-navy);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.trust-bar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1080px;
  margin-inline: auto;
  align-items: start;
}
/* 3 pillars: centred, icon in a thin gold circle, thin dividers between them; the circle fills gold on hover */
.trust-item {
  padding: 0 var(--space-4);
  text-align: center;
  color: var(--color-gold);
}
.trust-item + .trust-item { border-inline-start: 1px solid #CBD5CE; }
.trust-item svg {
  width: 58px;
  height: 58px;
  padding: 15px;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.trust-item:hover svg { background: var(--color-gold); color: var(--color-white); transform: translateY(-3px); }
.trust-item h4 { color: var(--color-navy); font-size: 20px; margin: var(--space-2) 0 6px; }
.trust-item p { max-width: 260px; margin: 0 auto; color: var(--color-grey); font-size: 15px; line-height: 1.6; }
html[lang="ar"] .trust-item h4 { font-family: "Amiri", var(--font-display); font-weight: 700; font-size: 22px; }
@media (max-width: 760px) {
  .trust-bar-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .trust-item { padding: 0; }
  .trust-item + .trust-item { border-inline-start: 0; border-top: 1px solid #CBD5CE; padding-top: var(--space-3); }
}
/* Omar's energy quote between "Our Approach" and the analysis (2026-10-06).
   Full width: the quote on white takes the larger part (its text lined up with the page container), a
   decorative energy photo runs to the screen edge on the end side. Signature "— name · role". */
.home-quote {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  background: var(--color-white);
  border-top: 1px solid #DCE3DE;
  border-bottom: 1px solid #E6DCC6;
}
.home-quote-media {
  position: relative;
  min-height: 320px;
  /* white above, below and at the screen edge, so the photo sits inside the band (client, 2026-10-06) */
  margin-block: var(--space-4);
  margin-inline-end: clamp(24px, 5vw, 96px);
  background: #8FA3AE;   /* sky tone while the photo loads */
}
.home-quote-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;   /* keep the platform (right part of the photo) in view, not cut at the edge */
}
/* soft gold fade on the inner edge, so the photo melts into the white text side */
.home-quote-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, transparent 75%, rgba(255, 255, 255, 0.3));
  pointer-events: none;
}
html[dir="rtl"] .home-quote-media::after { background: linear-gradient(to right, transparent 75%, rgba(255, 255, 255, 0.3)); }
.home-quote-text {
  display: flex;
  align-items: center;
  padding-block: var(--space-5);
  /* small start margin (not the page container's) so the quote fills its side on wide screens too (client, 2026-10-06) */
  padding-inline: clamp(24px, 6vw, 120px) clamp(32px, 5vw, 80px);
}
.home-quote-inner {
  width: 100%;   /* the quote runs right up to the gap before the photo */
  margin: 0;
}
.home-quote-mark {
  display: block;
  height: 44px;
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 1;
  color: var(--color-gold);
}
.home-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 0.9rem + 1.2vw, 2.4rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-navy);
  text-wrap: pretty;   /* full-width lines (balance made them short and left a gap before the photo) */
}
.home-quote blockquote em { color: var(--color-gold); }
.home-quote-close {
  display: inline-block;
  margin-inline-start: 0.05em;
  font-style: normal;
  font-size: 2.4em;   /* ≈ the size of the opening mark */
  line-height: 0;
  vertical-align: -0.42em;
  color: var(--color-gold);
}
html[lang="ar"] .home-quote blockquote { font-family: "Amiri", "Times New Roman", serif; font-style: normal; line-height: 1.8; }
html[lang="ar"] .home-quote blockquote em { font-style: normal; }
.home-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: var(--space-3);
}
.home-quote figcaption::before { content: ""; width: 40px; height: 2px; background: var(--color-gold); }
.home-quote-name { font-family: var(--font-display); font-size: 18px; color: var(--color-navy); }
.home-quote-name::after { content: "·"; margin-inline-start: 12px; color: var(--color-gold); }
.home-quote-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}
html[lang="ar"] .home-quote-name { font-family: "Amiri", "Times New Roman", serif; font-size: 19px; }
html[lang="ar"] .home-quote-role { font-size: 13px; letter-spacing: 0; }
@media (max-width: 860px) {
  .home-quote { grid-template-columns: 1fr; }
  .home-quote-media { min-height: 0; aspect-ratio: 21 / 9; margin: 0; }
  .home-quote-media::after { display: none; }
  .home-quote-text { padding: var(--space-4) var(--gutter); }
  .home-quote-inner { max-width: none; }
  .home-quote-mark { font-size: 64px; height: 34px; }
  .home-quote-name::after { display: none; }   /* name and role sit on two lines here */
}
@media (max-width: 960px) and (min-width: 761px) {
  .trust-item { padding: 0 var(--space-2); }
}
.approach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

/* "Khattaly Analysis" band — warm, subtle, complements the blue-grey
   approach band right above it without clashing */
.research-section {
  background: #F1EAD9;
}
/* heading column on the side + 3 cards */
.analysis-feature {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) 2fr;
  gap: var(--space-5);
  align-items: center;
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.analysis-intro .eyebrow { margin-bottom: 0; }
/* the homepage KHATTALY BRIEF label a little larger (Analysis stays as it is) — client request 2026-10-10 */
.brief-head .eyebrow { font-size: 16px; letter-spacing: 0.12em; margin-bottom: 12px; }
html[lang="ar"] .brief-head .eyebrow { font-size: 18px; letter-spacing: 0; }
/* short thin gold line between the eyebrow and the lead text */
.analysis-rule {
  display: block;
  width: 44px;
  height: 2px;
  margin: 14px 0 18px;
  background: var(--color-gold);
}
/* long lead sentence — navy serif at a refined medium size, balanced lines */
.analysis-intro h2.analysis-lead {
  max-width: 34ch;
  font-size: clamp(1.4rem, 1rem + 0.75vw, 1.9rem);
  font-weight: 400;
  line-height: 1.45;
  text-wrap: balance;
  margin-bottom: var(--space-3);
}
.analysis-lead em { color: var(--color-gold); font-style: italic; }
html[lang="ar"] .analysis-lead em { font-style: normal; }
/* boxed button (View All Analysis, View Latest Brief): navy outline with a gold accent line; on hover it fills navy and the arrow slides */
.btn-box {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius);
  box-shadow: inset 0 -3px 0 var(--color-gold);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.btn-box span { color: var(--color-gold); font-size: 16px; transition: transform 0.3s ease, color 0.3s ease; }
.btn-box:hover,
.btn-box:focus-visible {
  background: var(--color-navy);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: inset 0 -3px 0 var(--color-gold), 0 10px 22px rgba(27, 42, 74, 0.22);
}
.btn-box:hover span,
.btn-box:focus-visible span { color: var(--color-gold-light); transform: translateX(5px); }
html[dir="rtl"] .btn-box:hover span,
html[dir="rtl"] .btn-box:focus-visible span { transform: translateX(-5px); }
html[lang="ar"] .btn-box { letter-spacing: 0; }

.analysis-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
/* white card with a thin border, photo on top, text padded inside */
.analysis-card {
  gap: 0;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  overflow: hidden;
}
.analysis-card img { border-radius: 0; aspect-ratio: 4 / 3; width: 100%; }
.analysis-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  padding: 0 var(--space-3) var(--space-3);
}
.analysis-card h3 { font-size: 20px; line-height: 1.3; }
.analysis-card p { font-size: 15px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 1100px) {
  .analysis-feature { grid-template-columns: 1fr; gap: var(--space-4); }
}
.analysis-card-date { margin-top: -4px; font-size: 13px; color: var(--color-grey); }
@media (max-width: 760px) {
  .analysis-cards { grid-template-columns: 1fr; }
}
/* Phones (client request 2026-10-10): the homepage shows only the newest analysis piece and the newest brief —
   the "View All" buttons lead to the rest. The /analysis and /briefs pages are unchanged. */
@media (max-width: 680px) {
  .analysis-cards .analysis-card:nth-child(n+2),
  .brief-section .brief-grid-cards .brief-card:nth-child(n+2) { display: none; }
}

/* ==========================================================================
   Global Markets strip (homepage, under the hero) — TradingView ticker tape
   ========================================================================== */
.market-strip {
  background: var(--color-white);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.market-strip-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
}
.market-strip-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-inline-end: var(--space-3);
  border-inline-end: 1px solid var(--color-line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-navy);
  white-space: nowrap;
}
html[lang="ar"] .market-strip-label { letter-spacing: 0; font-size: 14px; }
/* small gold "live" dot that pulses softly */
.market-strip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 0 0 rgba(184, 135, 58, 0.5);
  animation: market-pulse 2.4s ease-out infinite;
}
@keyframes market-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184, 135, 58, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(184, 135, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 135, 58, 0); }
}
@media (prefers-reduced-motion: reduce) { .market-strip-dot { animation: none; } }
/* The widget's iframe is taller than its single row of prices (row at the top, empty space below),
   so it's cropped to the row. The fixed height also stops the page jumping when it loads. */
.market-strip-widget {
  flex: 1;
  min-width: 0;  /* lets the ticker shrink instead of widening the page */
  height: 44px;
  overflow: hidden;
}
/* End of the row: disclaimer on top, TradingView's attribution link (their terms) under it — small and quiet */
.market-strip-meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  max-width: 190px;
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--color-line);
  font-size: 10.5px;
  line-height: 1.35;
  text-align: end;
  color: var(--color-grey-light);
}
.market-strip-note { color: var(--color-grey); }
.market-strip-credit { color: var(--color-grey-light); white-space: nowrap; transition: color 0.2s ease; }
.market-strip-credit:hover { color: var(--color-gold); }
html[lang="ar"] .market-strip-meta { font-size: 11.5px; max-width: 210px; }

@media (max-width: 600px) {
  /* phones: label on top, full-width ticker, then the disclaimer + credit on one line underneath */
  .market-strip-inner { flex-wrap: wrap; gap: 4px var(--space-2); padding-top: 10px; padding-bottom: 8px; }
  .market-strip-label { border: 0; padding: 0; }
  .market-strip-widget { flex-basis: 100%; }
  .market-strip-meta {
    flex-basis: 100%;
    max-width: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    border: 0;
    text-align: start;
  }
}

/* ==========================================================================
   Publications page — Books / Media tabs, media cards, popup video player
   ========================================================================== */
.pub-tabs-wrap { padding-bottom: var(--space-4); }
.pub-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 999px;
}
.pub-tab {
  padding: 10px 26px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
.pub-tab:hover { color: var(--color-gold); }
.pub-tab.is-active { background: var(--color-navy); color: var(--color-white); box-shadow: inset 0 -2px 0 var(--color-gold); }
.pub-tab:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

.pub-empty { max-width: 520px; }
.pub-empty-media {
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-3);
  text-align: center;
  background: #FBF9F4;
  border: 1px dashed #D9CBAE;
  border-radius: 8px;
}
.pub-empty-media p { margin: 0; font-family: var(--font-display); font-size: 22px; color: var(--color-navy); }
.pub-empty-icon { width: 56px; height: 56px; color: var(--color-gold); }
.pub-empty-icon svg { width: 100%; height: 100%; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
}
/* exactly two videos (e.g. a 2-part talk) → two wider cards, no empty third column */
.media-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1100px; }
.media-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: start;
  color: inherit;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.media-card.is-video { cursor: pointer; }
.media-card.is-video:hover,
.media-card.is-video:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(27, 42, 74, 0.13);
  border-color: #E4D6B8;
}
.media-card:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.media-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-navy);
}
.media-card-thumb > img,
.media-card-thumb > .brief-cover-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.media-card.is-video:hover .media-card-thumb > img { transform: scale(1.06); }
/* gold-ringed play button in the middle of the thumbnail */
.media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: rgba(15, 26, 48, 0.72);
  border: 2px solid var(--color-gold-light);
  border-radius: 50%;
  backdrop-filter: blur(3px);
  transition: background 0.3s ease, transform 0.3s ease;
}
.media-play svg { width: 26px; height: 26px; margin-left: 3px; }
.media-card.is-video:hover .media-play { background: var(--color-gold); transform: scale(1.08); }
/* "Part 1 of 2" — a navy tag in the thumbnail corner */
.media-part {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(27, 42, 74, 0.88);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[lang="ar"] .media-part { font-size: 13px; letter-spacing: 0; }
/* "In Arabic" — small outlined note after the venue (English site only) */
.media-lang {
  padding: 2px 8px;
  border: 1px solid rgba(184, 135, 58, 0.5);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-grey);
}
.media-card-body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); }
.media-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--color-gold); font-weight: 600; }
.media-title { font-family: var(--font-display); font-size: 20px; line-height: 1.3; color: var(--color-navy); }
.media-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-grey);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* popup player */
.video-modal {
  width: min(960px, 92vw);
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.video-modal::backdrop { background: rgba(10, 17, 32, 0.86); backdrop-filter: blur(3px); }
.video-modal[open] { animation: video-in 0.3s ease; }
@keyframes video-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.video-modal-inner { position: relative; }
.video-modal-frame {
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(217, 185, 120, 0.5);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.video-modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal-title { margin: var(--space-2) 0 0; color: var(--color-white); font-family: var(--font-display); font-size: 18px; text-align: center; }
.video-modal-close {
  position: absolute;
  top: -48px;
  inset-inline-end: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background: transparent;
  border: 1px solid rgba(217, 185, 120, 0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.25s ease;
}
.video-modal-close svg { width: 18px; height: 18px; }
.video-modal-close:hover, .video-modal-close:focus-visible { background: var(--color-gold); }

html[lang="ar"] .media-title,
html[lang="ar"] .pub-empty-media p,
html[lang="ar"] .video-modal-title { font-family: "Amiri", "Times New Roman", serif; }

@media (max-width: 1024px) { .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .media-grid { grid-template-columns: 1fr; }
  .pub-tabs { display: flex; }
  .pub-tab { flex: 1; text-align: center; padding: 10px 14px; }
}

/* ==========================================================================
   Omar's book — 3D cover, homepage teaser band, book page (all LIGHT: white / cream, navy text, gold)
   ========================================================================== */

/* 3D book: the cover tilted in perspective, a spine cut from the cover's own edge, page edges, soft shadow */
.book3d {
  --book-w: 230px;
  --spine: 26px;
  position: relative;
  width: var(--book-w);
  margin: 0 auto;
  perspective: 1600px;
}
.book3d-lg { --book-w: 300px; --spine: 32px; }
.book3d::after {                         /* soft natural shadow on the "table" */
  content: "";
  position: absolute;
  left: 6%;
  right: 0;
  bottom: -26px;
  height: 34px;
  background: radial-gradient(ellipse at center, rgba(27, 42, 74, 0.30), transparent 70%);
  filter: blur(6px);
  z-index: -1;
  transition: transform 0.7s ease, opacity 0.7s ease;
}
.book3d-inner {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(26deg) rotateX(3deg);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.book3d:hover .book3d-inner { transform: rotateY(14deg) rotateX(2deg) translateY(-8px); }
.book3d:hover::after { transform: scaleX(0.92); opacity: 0.8; }
.book3d-cover {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px 5px 5px 2px;
  transform: translateZ(calc(var(--spine) / 2));
  box-shadow: 14px 18px 36px rgba(27, 42, 74, 0.18);
}
/* hinge crease near the spine, like a real hardcover */
.book3d-inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 10px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0));
  transform: translateZ(calc(var(--spine) / 2 + 1px));
  pointer-events: none;
  z-index: 2;
}
.book3d-spine {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--spine);
  height: 100%;
  background-size: auto 100%;
  background-position: left center;
  transform-origin: left center;
  transform: translateZ(calc(var(--spine) / 2)) rotateY(90deg);
  filter: brightness(0.62) saturate(0.9);
  border-radius: 2px 0 0 2px;
}
.book3d-pages {
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: 2px;
  width: calc(var(--spine) - 4px);
  transform-origin: right center;
  transform: translateZ(calc(var(--spine) / 2)) rotateY(-90deg);
  background: repeating-linear-gradient(90deg, #FFFFFF 0 2px, #E8E2D6 2px 3px);
}
/* Arabic books are bound on the right */
html[dir="rtl"] .book3d-inner { transform: rotateY(-26deg) rotateX(3deg); }
html[dir="rtl"] .book3d:hover .book3d-inner { transform: rotateY(-14deg) rotateX(2deg) translateY(-8px); }
html[dir="rtl"] .book3d-inner::before { left: auto; right: 5px; transform: translateZ(calc(var(--spine) / 2 + 1px)) scaleX(-1); }
html[dir="rtl"] .book3d-cover { border-radius: 5px 2px 2px 5px; box-shadow: -14px 18px 36px rgba(27, 42, 74, 0.18); }
html[dir="rtl"] .book3d-spine { left: auto; right: 0; background-position: right center; transform-origin: right center; transform: translateZ(calc(var(--spine) / 2)) rotateY(-90deg); }
html[dir="rtl"] .book3d-pages { right: auto; left: 2px; transform-origin: left center; transform: translateZ(calc(var(--spine) / 2)) rotateY(90deg); }
html[dir="rtl"] .book3d::after { left: 0; right: 6%; }
@media (prefers-reduced-motion: reduce) { .book3d-inner, .book3d::after { transition: none; } }

/* release badge: gold-outlined, small caps */
.book-release {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
}
.book-release::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
  animation: market-pulse 2.4s ease-out infinite;
}
.book-release-sm { padding: 6px 12px; font-size: 11px; margin: var(--space-1) 0; align-self: flex-start; }
.book-release-lg { padding: 11px 22px; font-size: 14px; }
html[lang="ar"] .book-release { letter-spacing: 0; text-transform: none; font-size: 15px; }
/* homepage "Coming Soon" badge: a soft gold glow that breathes + a light shine sweeping across every few seconds */
.book-feature .book-release {
  position: relative;
  overflow: hidden;
  animation: release-glow 3s ease-in-out infinite;
}
.book-feature .book-release::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: release-shine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes release-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 135, 58, 0); }
  50% { box-shadow: 0 0 0 4px rgba(184, 135, 58, 0.12), 0 6px 18px rgba(184, 135, 58, 0.18); }
}
@keyframes release-shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .book-feature .book-release, .book-feature .book-release::after { animation: none; }
}

/* Homepage book band — light band with hairline gold rules top and bottom. Inside the page container
   (tightened 2026-10-06, the client found the full-bleed version too spread out): a compact warm "stage"
   (glow + gold rings) with the 3D cover, and the text right beside it, filling its column. */
.book-feature {
  background: #FCFAF5;
  border-top: 1px solid rgba(184, 135, 58, 0.35);
  border-bottom: 1px solid rgba(184, 135, 58, 0.35);
  padding-block: var(--space-5);
}
.book-feature-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: clamp(32px, 5vw, 96px);
  /* wider than the page container, so big screens are not left with empty space on both sides (client, 2026-10-06) */
  max-width: 1840px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.book-feature-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(440px, 30vw, 600px);
  padding: var(--space-4);
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(217, 185, 120, 0.45) 0%, rgba(217, 185, 120, 0) 62%),
    linear-gradient(160deg, #F1E4CB 0%, #EADBBE 100%);
  isolation: isolate;
}
/* two thin concentric gold rings behind the book */
.book-stage-ring,
.book-stage-ring::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(184, 135, 58, 0.35);
  transform: translate(-50%, -50%);
  z-index: -1;
}
.book-stage-ring { width: clamp(340px, 24vw, 460px); height: clamp(340px, 24vw, 460px); }
.book-stage-ring::after { content: ""; width: clamp(430px, 30vw, 580px); height: clamp(430px, 30vw, 580px); border-color: rgba(184, 135, 58, 0.18); }
.book-feature-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.book-feature-text > * { max-width: 900px; }
/* "New Book" | "Coming Soon" side by side, a thin gold rule between them */
.book-feature-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: var(--space-2);
}
.book-feature-tags .book-new-tag { margin-bottom: 0; }
.book-feature-tags-sep { width: 1px; height: 22px; background: rgba(184, 135, 58, 0.5); }
.book-feature-tags .book-release { padding: 7px 15px; font-size: 12px; }
html[lang="ar"] .book-feature-tags .book-release { font-size: 14px; }
.book-feature-text h2 { font-size: clamp(34px, 1.4rem + 1.9vw, 52px); margin-bottom: var(--space-1); }
.book-feature-subtitle { font-family: var(--font-display); font-size: 20px; color: var(--color-navy); line-height: 1.5; }
.book-feature-teaser { font-size: 16px; line-height: 1.8; }
.book-feature .book3d { --book-w: clamp(240px, 16vw, 320px); --spine: 30px; }

/* "New Book" tag: bigger than an eyebrow, a slowly turning gold star + a light shimmer sweeping the words */
.book-new-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-2);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
html[lang="ar"] .book-new-tag { font-size: 18px; letter-spacing: 0; }
.book-new-star { width: 20px; height: 20px; color: var(--color-gold); animation: book-star 6s linear infinite; }
.book-new-text {
  background: linear-gradient(100deg, #B8873A 0%, #B8873A 40%, #F3DFAE 50%, #B8873A 60%, #B8873A 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: book-shimmer 3.2s ease-in-out infinite;
}
@keyframes book-star {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(1.25); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes book-shimmer { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .book-new-star, .book-new-text { animation: none; }
}

/* "Inside the Book": the 3 parts — gold roman numeral, part title, chapter count */
.book-feature-parts {
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(184, 135, 58, 0.3);
}
.book-feature-parts-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-grey);
}
html[lang="ar"] .book-feature-parts-label { font-size: 14px; letter-spacing: 0; }
.book-feature-parts ol { margin: 0; padding: 0; list-style: none; }
.book-feature-parts li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: baseline;
  gap: var(--space-2);
  padding: 11px 0;
  border-bottom: 1px solid rgba(184, 135, 58, 0.18);
  transition: padding 0.25s ease, background 0.25s ease;
}
.book-feature-parts li:hover { padding-inline-start: 8px; background: linear-gradient(90deg, rgba(184, 135, 58, 0.07), transparent); }
html[dir="rtl"] .book-feature-parts li:hover { background: linear-gradient(270deg, rgba(184, 135, 58, 0.07), transparent); }
.book-feature-part-num { font-family: var(--font-display); font-size: 22px; font-style: italic; color: var(--color-gold); }
.book-feature-part-title { font-family: var(--font-display); font-size: 17px; line-height: 1.4; color: var(--color-navy); }
.book-feature-part-count { font-size: 12px; letter-spacing: 0.06em; color: var(--color-grey); white-space: nowrap; }
html[lang="ar"] .book-feature-part-count { font-size: 13px; letter-spacing: 0; }
.book-feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }

/* "Buy the book" (Admin → Books → Sales; hidden while there is no buy link): solid gold pill + the price next to it */
.book-buy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.book-hero-text .book-buy { display: flex; margin-top: var(--space-3); }
.book-buy-center { justify-content: center; margin-top: var(--space-3); }
.book-buy-btn { background: var(--color-gold); color: var(--color-white); }
.book-buy-btn .btn-pill-arrow { color: var(--color-white); }
.book-buy-btn:hover, .book-buy-btn:focus-visible { background: var(--color-navy); border-color: var(--color-navy); }
.book-price { font-family: var(--font-display); font-size: 22px; color: var(--color-navy); }

/* Publications → Books tab card: show the whole portrait cover */
.card-book-cover {
  display: flex;
  justify-content: center;
  padding: var(--space-3) 0;
  background: #F7F1E6;
  border-radius: var(--radius);
}
.card-book-cover img { width: 62%; aspect-ratio: auto; object-fit: contain; box-shadow: 10px 12px 24px rgba(27, 42, 74, 0.18); border-radius: 2px 4px 4px 2px; }
.card-book-subtitle { font-size: 14px; }

/* Book page */
.book-hero {
  background: linear-gradient(180deg, #F7F1E6 0%, var(--color-cream) 100%);
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}
.book-hero-grid {
  display: grid;
  grid-template-columns: minmax(280px, 440px) 1fr;
  align-items: center;
  gap: var(--space-6);
}
.book-hero-cover { padding: var(--space-3) 0 var(--space-4); }
.book-hero-text h1 { font-size: 52px; line-height: 1.1; margin-bottom: var(--space-2); }
.book-hero-subtitle { font-family: var(--font-display); font-size: 22px; line-height: 1.5; color: var(--color-navy); max-width: 620px; }
.book-hero-author { margin: var(--space-2) 0 var(--space-4); font-size: 15px; color: var(--color-grey); }
.book-hero-author span { color: var(--color-navy); font-weight: 600; }

.book-preface {
  background: var(--color-white);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.book-preface-inner { position: relative; max-width: 780px; margin: 0 auto; }
.book-preface-mark {
  position: absolute;
  top: -70px;
  inset-inline-start: -30px;
  font-family: var(--font-display);
  font-size: 200px;
  line-height: 1;
  color: rgba(184, 135, 58, 0.22);
  pointer-events: none;
}
.book-preface-inner p { position: relative; font-family: var(--font-display); font-size: 19px; line-height: 1.85; color: #3D4249; margin-bottom: 1.2em; }
.book-preface-inner p:first-of-type::first-letter {   /* drop cap */
  float: left;
  font-size: 3.3em;
  line-height: 0.9;
  padding: 6px 10px 0 0;
  color: var(--color-gold);
}
.book-preface-signature { text-align: end; font-style: italic; color: var(--color-gold) !important; }

.book-toc { background: #F7F1E6; padding-top: var(--space-6); padding-bottom: var(--space-6); }
.book-toc-head { text-align: center; margin-bottom: var(--space-5); }
.book-toc-head h2 { font-size: 38px; }
.book-toc-head p { margin: 0; color: var(--color-gold); font-weight: 600; letter-spacing: 0.08em; }
/* one card per part: big gold numeral, part label, title, chapter count */
.book-parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 1100px;
  margin: 0 auto;
}
.book-part {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-4) var(--space-3);
  background: var(--color-white);
  border: 1px solid #E6DCC6;
  border-top: 2px solid var(--color-gold);
  border-radius: 4px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.book-part:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(27, 42, 74, 0.08); }
.book-part-num { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--color-gold); }
.book-part-label { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-grey); }
.book-part h3 { font-size: 21px; line-height: 1.4; margin: 0; }
.book-part-count {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(184, 135, 58, 0.25);
  font-size: 14px;
  color: var(--color-gold);
  font-weight: 600;
}
html[lang="ar"] .book-part-label, html[lang="ar"] .book-toc-head p { letter-spacing: 0; text-transform: none; font-size: 15px; }
.book-toc-cta { text-align: center; margin-top: var(--space-5); }
.book-toc-cta .btn-pill-gold { padding: 14px 30px; font-size: 16px; }
.book-toc-cta svg { width: 18px; height: 18px; }

.book-video { background: var(--color-white); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.book-video-frame { max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9; border: 1px solid rgba(184, 135, 58, 0.5); border-radius: 6px; overflow: hidden; background: #000; }
.book-video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.book-video-poster { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; }
.book-video-poster img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }

.book-closing { padding-top: var(--space-6); padding-bottom: var(--space-6); text-align: center; }
.book-closing-line { display: block; width: 120px; height: 2px; margin: 0 auto var(--space-3); background: linear-gradient(90deg, transparent, var(--color-gold), transparent); }
.book-closing p { font-family: var(--font-display); font-size: 30px; color: var(--color-navy); margin-bottom: var(--space-2); }
.book-back { display: block; margin-top: var(--space-4); font-size: 14px; color: var(--color-grey); }
.book-back:hover { color: var(--color-gold); }

html[lang="ar"] .book-page { font-family: "Tajawal", var(--font-arabic); }
html[lang="ar"] .book-page h1,
html[lang="ar"] .book-page h2,
html[lang="ar"] .book-page h3,
html[lang="ar"] .book-hero-subtitle,
html[lang="ar"] .book-preface-inner p,
html[lang="ar"] .book-closing p { font-family: "Amiri", "Times New Roman", serif; }
html[lang="ar"] .book-hero-text h1 { line-height: 1.35; }
html[lang="ar"] .book-preface-inner p { font-size: 20px; line-height: 2; }
html[lang="ar"] .book-preface-inner p:first-of-type::first-letter { float: none; font-size: inherit; padding: 0; color: inherit; } /* no drop cap in Arabic (letters join) */

@media (max-width: 960px) {
  .book-feature-frame, .book-hero-grid { grid-template-columns: 1fr; gap: var(--space-4); text-align: center; }
  .book-parts { grid-template-columns: 1fr; max-width: 520px; }
  .book-feature-frame { gap: var(--space-4); }
  .book-feature-cover { min-height: 0; padding: var(--space-5) var(--gutter); }
  .book-feature-text { align-items: center; }
  .book-feature-text > * { width: 100%; }
  .book-feature-tags { justify-content: center; }
  .book-feature-parts { text-align: start; }
  .book-feature-actions { justify-content: center; }
  .book-feature-teaser, .book-hero-subtitle { margin-inline: auto; }
}
@media (max-width: 600px) {
  .book-feature .book3d { --book-w: 200px; --spine: 22px; }
  .book-feature { padding-block: var(--space-4); }
  .book-feature-cover { padding: var(--space-4) var(--space-2); }
  .book-feature-tags-sep { display: none; }
  .book-stage-ring { width: 280px; height: 280px; }
  .book-stage-ring::after { width: 340px; height: 340px; }
  /* parts: chapter count drops under the title */
  .book-feature-parts li { grid-template-columns: 34px 1fr; gap: 4px var(--space-1); }
  .book-feature-part-count { grid-column: 2; }
  .book-feature .book-release { letter-spacing: 0.06em; font-size: 11px; }
  .book3d { --book-w: 190px; --spine: 22px; }
  .book3d-lg { --book-w: 220px; --spine: 24px; }
  .book-feature-text h2 { font-size: 30px; }
  .book-hero-text h1 { font-size: 36px; }
  .book-hero-subtitle { font-size: 18px; }
  .book-preface-mark { font-size: 130px; top: -40px; inset-inline-start: -6px; }
  .book-preface-inner p { font-size: 17px; }
  .book-toc-cta .btn-pill-gold { width: 100%; justify-content: center; font-size: 14px; padding: 13px 16px; }
  .book-closing p { font-size: 24px; }
}

/* ==========================================================================
   Request a Briefing page (/contact)
   ========================================================================== */
.contact-page {
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.contact-intro h1 { font-size: 44px; margin-bottom: var(--space-3); }
.contact-lead {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-navy);
  padding-inline-start: var(--space-2);
  border-inline-start: 2px solid var(--color-gold);
}
.contact-email { margin-top: var(--space-4); font-size: 15px; }
.contact-email a {
  display: inline-block;
  color: var(--color-gold);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.contact-email a:hover { border-bottom-color: var(--color-gold); }

/* white card holding the form, gold line on top */
.contact-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-gold);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: 0 18px 40px rgba(27, 42, 74, 0.06);
}
.contact-form { display: flex; flex-direction: column; gap: var(--space-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label,
.form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy);
}
.form-field .req { color: var(--color-gold); }
.form-field .opt { font-weight: 400; color: var(--color-grey-light); font-size: 13px; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  font-size: 16px; /* 16px stops iPhones zooming in when the field is tapped */
  color: var(--color-navy);
  background: #FDFCF9;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.contact-form textarea { resize: vertical; min-height: 150px; line-height: 1.7; }
.contact-form ::placeholder { color: #A9ADB3; }
/* in Arabic the email/phone fields stay left-to-right, but their placeholder lines up with the other fields */
html[dir="rtl"] .contact-form input[dir="ltr"]:placeholder-shown { text-align: right; }
.contact-form input:hover,
.contact-form textarea:hover { border-color: #CFC6B2; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  background: var(--color-white);
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(184, 135, 58, 0.18);
}
.contact-form [aria-invalid="true"] { border-color: var(--color-risk-high); background: #FDF7F5; }
.field-error { margin: 0; font-size: 13px; color: var(--color-risk-high); }
.field-hint { margin: 0; font-size: 13px; color: var(--color-grey-light); }
.form-alert {
  margin: 0;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--color-risk-high);
  background: #FDF7F5;
  border-inline-start: 3px solid var(--color-risk-high);
}

/* file upload: the real input is hidden, the label is styled as a button */
.file-field { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.contact-form .file-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy);
  background: #FDFCF9;
  border: 1px dashed var(--color-gold);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, border-style 0.2s ease;
}
.file-button svg { width: 18px; height: 18px; color: var(--color-gold); }
.file-button:hover { background: #F7F0E2; border-style: solid; }
.file-input:focus-visible + .file-button { box-shadow: 0 0 0 3px rgba(184, 135, 58, 0.25); }
.file-name { font-size: 14px; color: var(--color-grey-light); overflow-wrap: anywhere; }
.file-name.has-file { color: var(--color-navy); }

/* 404 page (resources/views/errors/404.blade.php) */
.error-page { padding: var(--space-6) 0; background: var(--color-cream, #FAF7F0); }
.error-page-inner { max-width: 720px; text-align: center; }
.error-page-code { display: block; font-family: var(--font-display); font-size: 120px; line-height: 1; color: var(--color-gold); opacity: .35; margin-bottom: var(--space-2); }
.error-page h1 { margin: var(--space-1) 0 var(--space-2); }
.error-page p { color: var(--color-grey); margin: 0 auto var(--space-4); max-width: 560px; }
.error-page-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

/* honeypot: invisible, never seen by people. Clipped in place (not pushed off-screen with left:-10000px —
   on the Arabic RTL page that made the page 10,000px wide on phones). */
.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.contact-submit {
  align-self: flex-start;
  margin-top: var(--space-1);
  padding: 14px 34px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
}

/* success message */
.contact-success { text-align: center; padding: var(--space-4) 0; }
.contact-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-3);
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: 50%;
}
.contact-success-icon svg { width: 30px; height: 30px; }
.contact-success h2 { font-size: 28px; }
.contact-success p { margin-bottom: var(--space-4); }

/* Arabic fonts */
html[lang="ar"] .contact-page { font-family: "Tajawal", var(--font-arabic); }
html[lang="ar"] .contact-intro h1,
html[lang="ar"] .contact-lead,
html[lang="ar"] .contact-success h2 { font-family: "Amiri", "Times New Roman", serif; }
html[lang="ar"] .contact-intro h1 { line-height: 1.4; }
html[lang="ar"] .contact-lead { line-height: 1.9; }

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .contact-card { padding: var(--space-4); }
}
@media (max-width: 600px) {
  .contact-page { padding-top: var(--space-3); padding-bottom: var(--space-5); }
  .contact-intro h1 { font-size: 32px; }
  .contact-lead { font-size: 18px; }
  .contact-card { padding: var(--space-3) var(--space-2); }
  .form-row { grid-template-columns: 1fr; }
  .contact-submit { align-self: stretch; justify-content: center; }
}