/* Nahj Qatar — main stylesheet.
   Copied unchanged from the original website's inline <style> block. */
    :root {
      /* Site typeface: Noto Kufi Arabic (Arabic + Latin). Inter only fills any Latin glyph it lacks. */
      --font-ar: 'Noto Kufi Arabic', 'Inter', 'Segoe UI', Tahoma, sans-serif;
      --font-en: 'Noto Kufi Arabic', 'Inter', 'Segoe UI', Tahoma, sans-serif;
    }
    body {
      font-family: var(--font-ar);
      background-color: #F9F8F3;
      color: #121726;
      overflow-x: hidden;
    }
    .en-mode {
      font-family: var(--font-en);
    }
    .glass-header {
      background: rgba(249, 248, 243, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .gold-gradient {
      background: linear-gradient(135deg, #E6C862 0%, #D4AF37 50%, #AA8C2C 100%);
    }
    .maroon-gradient {
      background: linear-gradient(135deg, #7A1228 0%, #520B1A 50%, #340610 100%);
    }
    .charcoal-gradient {
      background: linear-gradient(135deg, #1A1A1A 0%, #121726 100%);
    }
    .card-luxury {
      background: #FFFFFF;
      border: 1px solid rgba(212, 175, 55, 0.2);
      box-shadow: 0 10px 30px -10px rgba(82, 11, 26, 0.05);
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-luxury:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px -15px rgba(122, 18, 40, 0.12);
      border-color: rgba(212, 175, 55, 0.5);
    }
    .dot-pattern {
      background-image: radial-gradient(rgba(122, 18, 40, 0.12) 1.5px, transparent 1.5px);
      background-size: 24px 24px;
    }
    .dot-pattern-gold {
      background-image: radial-gradient(rgba(212, 175, 55, 0.25) 1.5px, transparent 1.5px);
      background-size: 24px 24px;
    }
    .fade-in {
      animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* Hide scrollbar for clean tab scrolling */
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* Home page sections opened from a link (e.g. the header's "/#faq" from any page) stop below the
       sticky header instead of behind it. --nahj-header-h is kept in sync by nahj-app.js. */
    body.home main section[id] { scroll-margin-top: var(--nahj-header-h, 90px); }

    /* ============ SCROLL REVEAL & MICRO-INTERACTIONS (animation-only additions) ============ */
    @keyframes revealUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
    }
    .reveal.in-view { opacity: 1; transform: translateY(0); }

    .reveal-stagger > * {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
    }
    .reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
    .reveal-stagger.in-view > *:nth-child(1) { transition-delay: .03s; }
    .reveal-stagger.in-view > *:nth-child(2) { transition-delay: .11s; }
    .reveal-stagger.in-view > *:nth-child(3) { transition-delay: .19s; }
    .reveal-stagger.in-view > *:nth-child(4) { transition-delay: .27s; }
    .reveal-stagger.in-view > *:nth-child(5) { transition-delay: .35s; }
    .reveal-stagger.in-view > *:nth-child(6) { transition-delay: .43s; }

    .hero-in .hero-badge,
    .hero-in h1,
    .hero-in .hero-desc,
    .hero-in .hero-cta,
    .hero-in .hero-pill {
      opacity: 0; transform: translateY(16px);
      animation: revealUp .7s cubic-bezier(.16,1,.3,1) forwards;
    }
    .hero-in .hero-badge { animation-delay: .05s; }
    .hero-in h1           { animation-delay: .16s; }
    .hero-in .hero-desc    { animation-delay: .28s; }
    .hero-in .hero-cta     { animation-delay: .40s; }
    .hero-in .hero-pill    { animation-delay: .52s; }

    .service-card {
      transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
    }
    .service-card:hover {
      transform: translateY(-6px) scale(1.015);
      box-shadow: 0 20px 40px -15px rgba(122,18,40,.18);
    }
    .service-card .service-icon { transition: transform .3s cubic-bezier(.16,1,.3,1); }
    .service-card:hover .service-icon { transform: translateY(-3px) rotate(-4deg) scale(1.06); }

    .btn-anim { transition: transform .25s ease, box-shadow .25s ease; }
    .btn-anim:hover { transform: translateY(-2px); }
    .btn-anim:active { transform: translateY(0) scale(.98); }
    .btn-arrow { display: inline-block; transition: transform .3s cubic-bezier(.16,1,.3,1); }
    .btn-anim:hover .btn-arrow { transform: translateX(4px); }
    html[dir="rtl"] .btn-anim:hover .btn-arrow { transform: translateX(-4px); }

    .journey-line { position: relative; }
    .journey-line::before {
      content: ''; position: absolute; top: 20px; right: 0; left: 0; height: 2px;
      background: linear-gradient(90deg, rgba(212,175,55,.15), rgba(212,175,55,.65));
      transform: scaleX(0); transform-origin: right;
      transition: transform 1s cubic-bezier(.16,1,.3,1);
    }
    .journey-line.in-view::before { transform: scaleX(1); }

    @media (prefers-reduced-motion: reduce) {
      .reveal, .reveal-stagger > *,
      .hero-in .hero-badge, .hero-in h1, .hero-in .hero-desc, .hero-in .hero-cta, .hero-in .hero-pill {
        animation: none !important; transition: none !important;
        opacity: 1 !important; transform: none !important;
      }
      .service-card:hover, .card-luxury:hover, .btn-anim:hover { transform: none !important; }
      .journey-line::before { transition: none !important; transform: scaleX(1) !important; }
    }

    /* ============ SHARED — editorial eyebrow (stats + journey) ============ */
    .nahj-eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 12px; font-weight: 800; letter-spacing: .06em;
      color: #7A1228; text-transform: uppercase;
    }
    .nahj-eyebrow::before,
    .nahj-eyebrow--center::after {
      content: ''; width: 28px; height: 1px;
      background: linear-gradient(90deg, rgba(212,175,55,0), #D4AF37);
    }
    .nahj-eyebrow--center::after { background: linear-gradient(90deg, #D4AF37, rgba(212,175,55,0)); }
    html[dir="rtl"] .nahj-eyebrow::before { background: linear-gradient(270deg, rgba(212,175,55,0), #D4AF37); }
    html[dir="rtl"] .nahj-eyebrow--center::after { background: linear-gradient(270deg, #D4AF37, rgba(212,175,55,0)); }
    .nahj-eyebrow--plain::before { display: none; }

    /* ============ HERO — editorial stage with floating cards ============ */
    .hero-stage { --mx: 0; --my: 0; }
    .hp-layer {
      transform: translate3d(calc(var(--mx) * var(--d, 0) * 1px), calc(var(--my) * var(--d, 0) * 1px), 0);
      transition: transform 1.1s cubic-bezier(.16,1,.3,1);
    }
    .hero-glow {
      position: absolute; inset: -12% -18%; pointer-events: none;
      background: radial-gradient(closest-side, rgba(212,175,55,.20), rgba(212,175,55,.06) 55%, rgba(212,175,55,0) 75%);
    }
    .hero-arch { border-radius: 260px 260px 28px 28px; }
    .hero-arch-outline {
      position: absolute; top: 20px; bottom: -20px;
      inset-inline-start: 20px; inset-inline-end: -20px;
      border: 1px solid rgba(212,175,55,.5);
      border-radius: 260px 260px 28px 28px;
      pointer-events: none;
    }
    @media (max-width: 767px) {
      .hero-arch-outline { top: 12px; bottom: -12px; inset-inline-start: 12px; inset-inline-end: -8px; }
    }
    .hero-in .hero-visual {
      opacity: 0;
      animation: heroVisualIn 1s cubic-bezier(.16,1,.3,1) .2s forwards;
    }
    @keyframes heroVisualIn {
      from { opacity: 0; transform: translateY(24px) scale(.985); }
      to   { opacity: 1; transform: none; }
    }

    .hf { position: absolute; z-index: 20; }
    .hf-in { opacity: 0; animation: hfIn .9s cubic-bezier(.16,1,.3,1) var(--delay, .7s) forwards; }
    @keyframes hfIn {
      from { opacity: 0; transform: translateY(14px) scale(.96); }
      to   { opacity: 1; transform: none; }
    }
    .hf-bob { animation: hfBob var(--dur, 7s) ease-in-out var(--bdelay, 0s) infinite; }
    @keyframes hfBob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-7px); }
    }
    .hf-card {
      position: relative;
      background: rgba(252,252,250,.96);
      color: #121726;
      border: 1px solid rgba(212,175,55,.35);
      border-radius: 18px;
      box-shadow: 0 30px 50px -24px rgba(20,2,6,.65), 0 10px 20px -12px rgba(20,2,6,.35);
    }
    .hf-card--dark {
      background: rgba(52,6,16,.72);
      color: #fff;
      border-color: rgba(212,175,55,.4);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .hf-kicker { display: block; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #E6C862, #AA8C2C); }

    .hf-vision  { top: 9%;  inset-inline-start: -40px; }
    .hf-stat    { top: 18%; inset-inline-end: -48px; }
    .hf-experts { top: 58%; inset-inline-end: -24px; }
    .hf-path    { bottom: -44px; inset-inline-start: -48px; }
    @media (min-width: 1024px) {
      .hf-stat { top: 24%; inset-inline-end: -24px; }
      .hf-path { inset-inline-start: -36px; }
    }
    @media (min-width: 1440px) {
      .hf-stat { inset-inline-end: -52px; }
      .hf-experts { inset-inline-end: -36px; }
    }

    .hf-avatars { display: flex; }
    .hf-avatars img { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; border: 2px solid #FCFCFA; }
    .hf-avatars img + img { margin-inline-start: -10px; }

    .hf-steps { position: relative; display: flex; justify-content: space-between; }
    .hf-steps-line {
      position: absolute; top: 4px; inset-inline: 20px; height: 2px;
      background: #EFECE1; border-radius: 2px; overflow: hidden;
    }
    .hf-steps-fill {
      position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 0;
      background: linear-gradient(90deg, #E6C862, #AA8C2C);
      animation: hfFill 1.4s cubic-bezier(.16,1,.3,1) 1.7s forwards;
    }
    @keyframes hfFill { to { width: 66.6%; } }
    .hf-step {
      position: relative; width: 40px;
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      font-size: 10px; font-weight: 700; color: #6B7280; white-space: nowrap;
    }
    .hf-step i { width: 10px; height: 10px; border-radius: 999px; background: #fff; border: 2px solid #DFDBCB; }
    .hf-step.is-done i { background: #D4AF37; border-color: #D4AF37; }
    .hf-step.is-done, .hf-step.is-now { color: #520B1A; }
    .hf-step.is-now i { border-color: #D4AF37; box-shadow: 0 0 0 4px rgba(212,175,55,.2); }

    /* ============ IMPACT / STATS — wave-edged achievements band ============ */
    .impact { position: relative; z-index: 20; background: #FFFFFF; }
    .impact::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(40% 60% at 8% 50%, rgba(212,175,55,.08), transparent 70%),
        radial-gradient(40% 60% at 92% 50%, rgba(122,18,40,.05), transparent 70%);
    }
    .nahj-wave { position: absolute; left: 0; width: 100%; height: 64px; display: block; pointer-events: none; }
    .nahj-wave--top { bottom: calc(100% - 1px); }
    .nahj-wave--bottom { top: calc(100% - 1px); }
    .nahj-wave path { vector-effect: non-scaling-stroke; }
    @media (max-width: 767px) { .nahj-wave { height: 40px; } }

    .impact-ornament { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; }
    .impact-ornament span { width: 36px; height: 1px; background: rgba(212,175,55,.6); }
    .impact-ornament i { width: 7px; height: 7px; background: #D4AF37; transform: rotate(45deg); }

    .impact-item {
      position: relative; padding: 28px 12px; text-align: center;
    }
    .impact-inner { transition: transform .45s cubic-bezier(.16,1,.3,1); }
    .impact-item::before {
      content: ''; position: absolute; inset-inline-start: 0; top: 16%; bottom: 16%; width: 1px;
      background: linear-gradient(to bottom, rgba(212,175,55,0), rgba(212,175,55,.55), rgba(212,175,55,0));
    }
    .impact-item::after {
      content: ''; position: absolute; top: 0; inset-inline: 16%; height: 1px;
      background: linear-gradient(90deg, rgba(212,175,55,0), rgba(212,175,55,.55), rgba(212,175,55,0));
    }
    .impact-item:nth-child(odd)::before { display: none; }
    .impact-item:nth-child(-n+2)::after { display: none; }
    @media (min-width: 1024px) {
      .impact-item { padding: 20px 24px; }
      .impact-item:nth-child(odd)::before { display: block; }
      .impact-item:first-child::before { display: none; }
      .impact-item::after { display: none; }
    }
    .impact-icon {
      position: relative; width: 52px; height: 52px; margin: 0 auto 18px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 999px; color: #AA8C2C;
      border: 1px solid rgba(212,175,55,.45);
      background: radial-gradient(circle at 30% 30%, #FFFFFF, #FAF4D9);
      transition: background .4s ease, color .4s ease, border-color .4s ease;
    }
    .impact-icon::after {
      content: ''; position: absolute; inset: -7px; border-radius: 999px;
      border: 1px dashed rgba(212,175,55,.35);
      transition: transform 1.2s cubic-bezier(.16,1,.3,1), border-color .4s ease;
    }
    .impact-num {
      font-size: clamp(2rem, 1rem + 2.4vw, 3.4rem);
      font-weight: 800; line-height: 1; letter-spacing: -.02em;
      color: #340610; font-variant-numeric: tabular-nums;
    }
    .impact-val { display: inline-block; }
    .impact-num .plus { color: #D4AF37; font-weight: 700; margin-inline: 2px; }
    .impact-rule {
      display: block; width: 28px; height: 2px; margin: 16px auto 12px; border-radius: 2px;
      background: linear-gradient(90deg, #E6C862, #AA8C2C);
      transition: width .45s cubic-bezier(.16,1,.3,1);
    }
    .impact-lbl { font-size: 14px; font-weight: 800; color: #520B1A; }
    .impact-desc { font-size: 12px; line-height: 1.8; color: #6B7280; margin: 4px auto 0; max-width: 220px; }
    @media (hover: hover) {
      .impact-item:hover .impact-inner { transform: translateY(-4px); }
      .impact-item:hover .impact-icon { background: linear-gradient(135deg, #7A1228, #340610); color: #F3E5AB; border-color: #D4AF37; }
      .impact-item:hover .impact-icon::after { transform: rotate(90deg); border-color: rgba(212,175,55,.7); }
      .impact-item:hover .impact-rule { width: 56px; }
    }

    /* ============ JOURNEY — flowing path toward excellence ============ */
    .journey { position: relative; z-index: 20; background: #F9F8F3; }
    .jr-track { position: relative; height: 140px; }
    .jr-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    html[dir="rtl"] .jr-svg { transform: scaleX(-1); }
    .jr-svg path { fill: none; vector-effect: non-scaling-stroke; }
    .jr-path-base { stroke: #DFDBCB; stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
    .jr-path { stroke-width: 2.5; stroke-linecap: round; }
    .jr-draw { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.65,0,.35,1) .1s; }
    html[dir="rtl"] .jr-draw { clip-path: inset(0 0 0 100%); }
    .jr-flow.in-view .jr-draw { clip-path: inset(0 0 0 0); }

    .jr-node {
      position: absolute; top: var(--y); inset-inline-start: calc(12.5% + 25% * var(--i));
      width: 22px; height: 22px; margin-top: -11px; margin-inline-start: -11px;
      border-radius: 999px; background: #FCFCFA; border: 1.5px solid #D4AF37;
      box-shadow: 0 0 0 6px rgba(212,175,55,.12), 0 6px 14px -6px rgba(82,11,26,.4);
      transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1);
      transition-delay: calc(.35s + var(--i) * .28s);
    }
    .jr-node::before {
      content: ''; position: absolute; inset: 5px; border-radius: 999px;
      background: linear-gradient(135deg, #E6C862, #AA8C2C);
    }
    .jr-node--last::before { background: linear-gradient(135deg, #7A1228, #340610); }
    .jr-flow.in-view .jr-node { transform: scale(1); }
    .jr-stem {
      position: absolute; top: 24px; left: 50%; width: 1px; margin-left: -.5px;
      height: calc(140px - var(--y) - 4px);
      background: linear-gradient(to bottom, rgba(212,175,55,.75), rgba(212,175,55,0));
      transform: scaleY(0); transform-origin: top;
      transition: transform .6s cubic-bezier(.16,1,.3,1);
      transition-delay: calc(.55s + var(--i) * .28s);
    }
    .jr-flow.in-view .jr-stem { transform: scaleY(1); }

    .jr-steps { position: relative; display: grid; list-style: none; margin: 0; padding: 0; }
    .jr-step {
      position: relative;
      opacity: 0; transform: translateY(18px);
      transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
      transition-delay: calc(.3s + var(--i) * .22s);
    }
    .jr-flow.in-view .jr-step { opacity: 1; transform: none; }
    .jr-num {
      display: block; font-weight: 800; line-height: 1; letter-spacing: -.03em;
      color: rgba(212,175,55,.12); -webkit-text-stroke: 1.25px #C9A232;
      transition: color .4s ease;
    }
    .jr-label {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 800; letter-spacing: .05em; color: #8C142E;
    }
    .jr-label::before { content: ''; width: 6px; height: 6px; background: #D4AF37; transform: rotate(45deg); flex-shrink: 0; }
    .jr-title { font-size: 1.125rem; font-weight: 900; color: #340610; margin-top: 8px; }
    .jr-desc { font-size: 13px; line-height: 1.85; color: #4B5563; margin-top: 6px; }
    .jr-dot {
      position: absolute; width: 20px; height: 20px; border-radius: 999px;
      background: #FCFCFA; border: 1.5px solid #D4AF37;
      box-shadow: 0 0 0 5px rgba(212,175,55,.12);
      transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1);
      transition-delay: calc(.3s + var(--i) * .22s);
    }
    .jr-dot::before { content: ''; position: absolute; inset: 4px; border-radius: 999px; background: linear-gradient(135deg, #E6C862, #AA8C2C); }
    .jr-step:last-child .jr-dot::before { background: linear-gradient(135deg, #7A1228, #340610); }
    .jr-flow.in-view .jr-dot { transform: scale(1); }
    @media (hover: hover) {
      .jr-step:hover .jr-num { color: #D4AF37; }
    }

    /* Mobile: vertical timeline */
    @media (max-width: 767px) {
      .jr-steps { gap: 34px; padding-inline-start: 46px; }
      .jr-steps::before {
        content: ''; position: absolute; top: 14px; bottom: 30px; inset-inline-start: 10px; width: 2px; border-radius: 2px;
        background: linear-gradient(to bottom, #E6C862, #D4AF37 55%, rgba(212,175,55,.15));
        transform: scaleY(0); transform-origin: top;
        transition: transform 1.2s cubic-bezier(.65,0,.35,1) .1s;
      }
      .jr-flow.in-view .jr-steps::before { transform: scaleY(1); }
      .jr-dot { top: 12px; inset-inline-start: -45px; }
      .jr-head { display: flex; align-items: center; gap: 14px; }
      .jr-num { font-size: 2.75rem; }
      .jr-label { margin-top: 0; }
    }
    /* Tablet: 2-column grid, each step opens with its own gold rule */
    @media (min-width: 768px) and (max-width: 1023px) {
      .jr-steps { grid-template-columns: repeat(2, 1fr); column-gap: 48px; row-gap: 56px; }
      .jr-step { padding-top: 40px; }
      .jr-step::before {
        content: ''; position: absolute; top: 10px; inset-inline-start: 30px; inset-inline-end: 0; height: 1px;
        background: linear-gradient(90deg, #D4AF37, rgba(212,175,55,0));
      }
      html[dir="rtl"] .jr-step::before { background: linear-gradient(270deg, #D4AF37, rgba(212,175,55,0)); }
      .jr-dot { top: 0; inset-inline-start: 0; }
      .jr-num { font-size: 3.25rem; }
      .jr-label { margin-top: 14px; }
    }
    /* Desktop: horizontal flowing path */
    @media (min-width: 1024px) {
      .jr-steps { grid-template-columns: repeat(4, 1fr); }
      .jr-step { text-align: center; padding: 14px 20px 0; }
      .jr-dot { display: none; }
      .jr-num { font-size: 4.25rem; }
      .jr-label { margin-top: 16px; }
      .jr-desc { max-width: 240px; margin-inline: auto; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hp-layer, .hf-bob, .hf-in, .hero-in .hero-visual, .hf-steps-fill,
      .jr-draw, .jr-node, .jr-stem, .jr-step, .jr-dot, .jr-steps::before, .impact-inner, .impact-icon::after {
        animation: none !important; transition: none !important;
      }
      .hf-in, .hero-in .hero-visual, .jr-step { opacity: 1 !important; transform: none !important; }
      .hp-layer, .hf-bob { transform: none !important; }
      .hf-steps-fill { width: 66.6% !important; }
      .jr-draw { clip-path: none !important; }
      .jr-node, .jr-dot { transform: scale(1) !important; }
      .jr-stem, .jr-steps::before { transform: scaleY(1) !important; }
    }
    /* ============ CORPORATE INQUIRY PAGE — contact-style form + info column (every rule scoped to .ciq-page) ============ */
    .ciq-page .ciq-rise { opacity: 0; animation: ciqRise .7s cubic-bezier(.16,1,.3,1) var(--ciq-d, .1s) forwards; }
    @keyframes ciqRise {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }

    /* Layout: form panel + contact column */
    .ciq-page .ciq-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 48px; align-items: start; }
    @media (max-width: 1023px) { .ciq-page .ciq-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
    .ciq-page .ciq-panel {
      background: #FFFFFF; border: 1px solid #EFECE1; border-radius: 16px; padding: 40px;
      box-shadow: 0 1px 2px rgba(52,6,16,.06), 0 2px 8px rgba(52,6,16,.04);
    }
    @media (max-width: 639px) { .ciq-page .ciq-panel { padding: 24px 18px; } }

    /* Form */
    .ciq-page .ciq-form { display: grid; gap: 18px; }
    .ciq-page .ciq-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    @media (max-width: 639px) { .ciq-page .ciq-row { grid-template-columns: minmax(0, 1fr); } }
    .ciq-page .ciq-field { display: grid; gap: 8px; align-content: start; min-width: 0; }
    .ciq-page .ciq-field[hidden] { display: none; }
    .ciq-page .ciq-label { font-size: 13px; font-weight: 700; color: #374151; line-height: 1.35; }
    .ciq-page .ciq-opt { font-size: 12px; font-weight: 500; color: #9CA3AF; }
    .ciq-page .ciq-input {
      width: 100%; height: 52px; padding: 0 16px; border-radius: 8px;
      border: 1px solid #DFDBCB; background: #FFFFFF; color: #121726;
      font-family: inherit; font-size: 15px; appearance: none; -webkit-appearance: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .ciq-page textarea.ciq-input { height: auto; min-height: 120px; padding: 14px 16px; line-height: 1.75; resize: vertical; }
    .ciq-page select.ciq-input { cursor: pointer; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%237A1228' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat; padding-inline-end: 40px; }
    html[dir="rtl"] .ciq-page select.ciq-input { background-position: left 16px center; }
    html[dir="ltr"] .ciq-page select.ciq-input { background-position: right 16px center; }
    html[dir="rtl"] .ciq-page .ciq-input[dir="ltr"] { text-align: right; }
    .ciq-page .ciq-input::placeholder { color: #A8A29E; }
    .ciq-page .ciq-input:hover { border-color: #BFB9A3; }
    .ciq-page .ciq-input:focus { outline: none; border-color: #7A1228; box-shadow: 0 0 0 4px #FBE5E9; }

    /* Validation */
    .ciq-page .ciq-error { display: none; font-size: 12.5px; font-weight: 600; color: #A3303F; }
    .ciq-page .ciq-field.is-invalid .ciq-error { display: block; }
    .ciq-page .ciq-field.is-invalid .ciq-input { border-color: #A3303F; }
    .ciq-page .ciq-field.is-invalid .ciq-input:focus { box-shadow: 0 0 0 4px rgba(163,48,63,.12); }
    .ciq-page .ciq-field.is-invalid .ck span { border-color: #E7A1AA; }
    .ciq-page .ciq-summary {
      display: none; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px;
      background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; font-size: 13px; font-weight: 700;
    }
    .ciq-page .ciq-summary.is-visible { display: flex; }

    /* Request type — segmented control */
    .ciq-page .ciq-seg {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px;
      background: #F9F8F3; border: 1px solid #EFECE1; border-radius: 12px;
    }
    .ciq-page .ciq-tab {
      min-width: 0; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
      font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.25; color: #6B7280;
      transition: background-color .25s cubic-bezier(.22,.8,.26,1), color .25s ease, box-shadow .25s ease;
    }
    .ciq-page .ciq-tab:hover { color: #520B1A; }
    .ciq-page .ciq-tab.is-active { background: #FFFFFF; color: #7A1228; box-shadow: 0 1px 2px rgba(52,6,16,.08), 0 2px 8px rgba(52,6,16,.06); }
    .ciq-page .ciq-tab:focus-visible { outline: 2px solid #D4AF37; outline-offset: 1px; }

    /* Pill checkboxes / radios */
    .ciq-page .ciq-checks { display: flex; flex-wrap: wrap; gap: 8px; }
    .ciq-page .ck { position: relative; justify-self: start; }
    .ciq-page .ck input { position: absolute; opacity: 0; pointer-events: none; }
    .ciq-page .ck span {
      display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 14px; border-radius: 999px;
      border: 1px solid #DFDBCB; background: #FFFFFF; cursor: pointer;
      font-size: 13px; font-weight: 700; color: #374151; line-height: 1.4; transition: all .2s ease;
    }
    .ciq-page .ck span::before { content: ''; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 4px; border: 1.5px solid #DFDBCB; transition: all .2s ease; }
    .ciq-page .ck input[type="radio"] + span::before { border-radius: 999px; }
    .ciq-page .ck span:hover { border-color: #BFB9A3; }
    .ciq-page .ck input:checked + span { border-color: #7A1228; color: #7A1228; background: #FDF2F4; }
    .ciq-page .ck input[type="checkbox"]:checked + span::before { background: #7A1228 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='white' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") center/10px no-repeat; border-color: #7A1228; }
    .ciq-page .ck input[type="radio"]:checked + span::before { background: #7A1228; border-color: #7A1228; box-shadow: inset 0 0 0 3px #FDF2F4; }
    .ciq-page .ck input:focus-visible + span { outline: 2px solid #D4AF37; outline-offset: 2px; }

    /* Buttons */
    .ciq-page .ciq-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
    .ciq-page .ciq-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px;
      border-radius: 8px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
      font-family: inherit; font-size: 15px; font-weight: 700;
      transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }
    .ciq-page .ciq-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
    .ciq-page .ciq-btn:active { transform: translateY(1px); }
    .ciq-page .ciq-btn--primary { background: #7A1228; color: #FFFFFF; }
    .ciq-page .ciq-btn--primary:hover { background: #520B1A; box-shadow: 0 10px 24px -10px rgba(122,18,40,.6); }
    .ciq-page .ciq-btn--outline { background: transparent; color: #7A1228; border-color: #DFDBCB; }
    .ciq-page .ciq-btn--outline:hover { border-color: #7A1228; background: #FDF2F4; }
    .ciq-page .ciq-btn:disabled { opacity: .8; cursor: wait; }
    .ciq-page .ciq-btn:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }
    .ciq-page .ciq-note { font-size: 13px; color: #6B7280; }
    @media (max-width: 639px) {
      .ciq-page .ciq-btns { flex-direction: column; align-items: stretch; }
      .ciq-page .ciq-btn { width: 100%; }
    }

    /* Contact column */
    .ciq-page .ciq-info { display: grid; gap: 16px; }
    .ciq-page .ciq-cicard {
      display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start;
      padding: 22px; border-radius: 16px; background: #FFFFFF; border: 1px solid #EFECE1;
    }
    .ciq-page .ciq-cicard .ic {
      width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
      background: linear-gradient(135deg, #7A1228, #520B1A); color: #D4AF37;
    }
    .ciq-page .ciq-cicard .ic svg { width: 22px; height: 22px; }
    .ciq-page .ciq-cicard b { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 800; color: #340610; }
    .ciq-page .ciq-cicard .v { font-size: 14.5px; color: #374151; line-height: 1.6; overflow-wrap: anywhere; }
    .ciq-page .ciq-cicard a.v:hover { color: #7A1228; }
    .ciq-page .ciq-copy {
      margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
      font-family: inherit; font-size: 12px; font-weight: 700; color: #7A1228;
    }
    .ciq-page .ciq-copy svg { width: 14px; height: 14px; }
    .ciq-page .ciq-copy.is-copied { color: #2F6B4F; }

    /* Map card (illustrative) */
    .ciq-page .ciq-map { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; background: #F1ECE2; border: 1px solid #EFECE1; }
    .ciq-page .ciq-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .ciq-page .ciq-pin { position: absolute; left: 58%; top: 44%; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 6px; }
    .ciq-page .ciq-pin b {
      padding: 7px 11px; border-radius: 6px; background: #7A1228; color: #FFFFFF; white-space: nowrap;
      font-size: 12px; font-weight: 700; box-shadow: 0 2px 6px rgba(52,6,16,.1), 0 12px 24px -10px rgba(52,6,16,.35);
    }
    .ciq-page .ciq-pin i { width: 16px; height: 16px; border-radius: 50%; background: #D4AF37; border: 3px solid #FFFFFF; box-shadow: 0 0 0 6px rgba(122,18,40,.18); animation: ciqPing 2.4s ease infinite; }
    @keyframes ciqPing { 50% { box-shadow: 0 0 0 14px rgba(122,18,40,0); } }
    .ciq-page .ciq-mlink { position: absolute; bottom: 12px; inset-inline-end: 12px; height: 40px; padding: 0 16px; font-size: 13px; background: #FFFFFF; color: #7A1228; }
    .ciq-page .ciq-mlink:hover { background: #FAF4D9; }

    /* Success */
    .ciq-page .ciq-success { display: grid; justify-items: start; gap: 16px; padding: 16px 0; }
    .ciq-page .ciq-success .ok { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #FDF2F4; color: #7A1228; }
    .ciq-page .ciq-success .ok svg { width: 28px; height: 28px; }
    .ciq-page .ciq-ref { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: #F9F8F3; border: 1px solid #EFECE1; font-size: 13px; font-weight: 700; color: #6B7280; }
    .ciq-page .ciq-ref strong { font-family: 'Inter', sans-serif; color: #520B1A; }
    .ciq-page .ciq-link { font-size: 13px; font-weight: 700; color: #7A1228; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; text-decoration: underline; text-underline-offset: 4px; }

    .ciq-page .ciq-spin { animation: ciqSpin .9s linear infinite; }
    @keyframes ciqSpin { to { transform: rotate(360deg); } }

    @media (prefers-reduced-motion: reduce) {
      .ciq-page .ciq-rise { animation: none; opacity: 1; }
      .ciq-page .ciq-pin i { animation: none; }
      .ciq-page .ciq-input, .ciq-page .ciq-tab, .ciq-page .ck span, .ciq-page .ciq-btn { transition: none; }
    }

    /* ============ ORGANIC SECTION DIVIDERS — the hero → about wave, reused with variations ============ */
    /* Height scales with the viewport (--wave-k px at 1280px wide, never below 55%), so it never jumps or overflows. */
    .nahj-divider { position: absolute; left: 0; right: 0; z-index: 1; line-height: 0; pointer-events: none; overflow: hidden; }
    .nahj-divider--bottom { bottom: -1px; }
    .nahj-divider--top { top: -1px; }
    .nahj-divider svg {
      display: block; width: 100%;
      height: clamp(calc(var(--wave-k, 56) * .55px), calc(var(--wave-k, 56) * 100vw / 1280), calc(var(--wave-k, 56) * 1px));
    }
    .nahj-divider--flip svg { transform: scaleX(-1); }
    .nahj-divider path { vector-effect: non-scaling-stroke; }

    /* ============ FOOTER — faded brand mark (opposite side to the logo; flips with RTL / LTR) ============ */
    .footer-mark {
      position: absolute; top: 50%; inset-inline-end: -48px; z-index: 0;
      width: auto; height: 360px; transform: translateY(-50%) rotate(-8deg);
      opacity: .1; pointer-events: none; user-select: none;
    }
    @media (max-width: 767px) { .footer-mark { height: 220px; top: auto; bottom: 40px; transform: rotate(-8deg); inset-inline-end: -40px; } }

    /* ============ HEADER — active page ============ */
    header nav .nav-link.is-active { color: #7A1228; border-bottom-color: #D4AF37; }
    #mobileMenu .nav-link.is-active {
      color: #7A1228; padding-inline-start: 12px;
      border-inline-start: 3px solid #D4AF37;
      background: linear-gradient(90deg, rgba(212,175,55,.08), rgba(212,175,55,0));
    }
    html[dir="rtl"] #mobileMenu .nav-link.is-active { background: linear-gradient(270deg, rgba(212,175,55,.08), rgba(212,175,55,0)); }

    /* ============ DETAIL PAGES — course & workshop (every rule scoped to .dtl-page) ============ */
    .dtl-page { --dtl-offset: calc(var(--nahj-header-h, 73px) + 72px); }

    /* Breadcrumbs */
    .dtl-page .dtl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; font-weight: 700; color: rgba(243,229,171,.75); }
    .dtl-page .dtl-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
    .dtl-page .dtl-crumbs a { color: inherit; transition: color .2s ease; }
    .dtl-page .dtl-crumbs a:hover { color: #FFFFFF; }
    .dtl-page .dtl-crumbs [aria-current] { color: #FFFFFF; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dtl-page .dtl-crumbs svg { width: 14px; height: 14px; color: #D4AF37; flex-shrink: 0; }

    .dtl-page .dtl-watermark {
      position: absolute; bottom: -70px; inset-inline-start: -10px; font-size: 280px; font-weight: 900; line-height: 1;
      color: rgba(212,175,55,.06); pointer-events: none; user-select: none;
    }

    /* Hero metadata */
    .dtl-page .dtl-meta {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px;
      padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
    }
    @media (min-width: 640px) { .dtl-page .dtl-meta { grid-template-columns: repeat(var(--dtl-meta-cols, 4), minmax(0, 1fr)); } }
    /* Beside the summary card the column is narrow — 2 × 2 keeps values on one line. */
    @media (min-width: 1024px) { .dtl-page .dtl-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; } }
    .dtl-page .dtl-meta-value [dir="ltr"] { white-space: nowrap; }
    .dtl-page .dtl-meta-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .dtl-page .dtl-meta-icon {
      width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.35); color: #E6C862;
    }
    .dtl-page .dtl-meta-label { display: block; font-size: 11px; font-weight: 700; color: rgba(243,229,171,.72); }
    .dtl-page .dtl-meta-value { display: block; font-size: 14px; font-weight: 800; color: #FFFFFF; line-height: 1.5; overflow-wrap: anywhere; }

    /* Summary card */
    .dtl-page .dtl-card {
      position: relative; overflow: hidden; background: #FFFFFF; color: #121726;
      border: 1px solid rgba(212,175,55,.35); border-radius: 24px;
      box-shadow: 0 40px 80px -36px rgba(20,2,6,.7), 0 16px 32px -18px rgba(20,2,6,.45);
      animation: dtlCardIn .9s cubic-bezier(.16,1,.3,1) .25s both;
    }
    @media (min-width: 640px) { .dtl-page .dtl-card { border-radius: 28px; } }
    .dtl-page .dtl-card::after {
      content: ''; position: absolute; top: 0; inset-inline: 0; height: 4px; z-index: 2;
      background: linear-gradient(90deg, #AA8C2C, #E6C862 50%, #AA8C2C);
    }
    @keyframes dtlCardIn {
      from { opacity: 0; transform: translateY(26px) scale(.985); }
      to   { opacity: 1; transform: none; }
    }
    .dtl-page .dtl-card-media { position: relative; height: 172px; overflow: hidden; }
    .dtl-page .dtl-card-media img { width: 100%; height: 100%; object-fit: cover; }
    .dtl-page .dtl-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(52,6,16,.85), rgba(52,6,16,.1) 65%); }
    .dtl-page .dtl-card-body { padding: 22px 22px 24px; }
    @media (min-width: 640px) { .dtl-page .dtl-card-body { padding: 26px 28px 28px; } }
    .dtl-page .dtl-price-label { font-size: 11px; font-weight: 800; color: #6B7280; letter-spacing: .02em; }
    .dtl-page .dtl-price { font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 800; line-height: 1.1; color: #520B1A; letter-spacing: -.02em; }
    .dtl-page .dtl-facts { margin-top: 18px; }
    .dtl-page .dtl-fact { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid #EFECE1; font-size: 13px; }
    .dtl-page .dtl-fact dt { display: flex; align-items: center; gap: 8px; color: #6B7280; font-weight: 700; flex-shrink: 0; }
    .dtl-page .dtl-fact dt svg { width: 16px; height: 16px; color: #AA8C2C; }
    .dtl-page .dtl-fact dd { font-weight: 800; color: #340610; text-align: end; min-width: 0; overflow-wrap: anywhere; }
    .dtl-page .dtl-card-note {
      display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 12px; border-radius: 12px;
      background: #F9F8F3; border: 1px solid #EFECE1; font-size: 11.5px; font-weight: 700; color: #6B7280; line-height: 1.6;
    }
    .dtl-page .dtl-card-note svg { width: 16px; height: 16px; color: #AA8C2C; flex-shrink: 0; }

    /* Workshop ticket header (inside the summary card) */
    .dtl-page .dtl-ticket { position: relative; padding: 28px 24px 26px; overflow: hidden; color: #FFFFFF; background: linear-gradient(135deg, #7A1228 0%, #520B1A 55%, #340610 100%); }
    .dtl-page .dtl-ticket::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(212,175,55,.22) 1.5px, transparent 1.5px); background-size: 20px 20px; opacity: .6; }
    .dtl-page .dtl-ticket > * { position: relative; }
    .dtl-page .dtl-ticket-day { font-family: 'Inter', sans-serif; font-size: 58px; font-weight: 800; line-height: .9; color: #E6C862; letter-spacing: -.03em; }
    .dtl-page .dtl-ticket-perf { height: 0; border-top: 2px dashed #EFECE1; margin: 0 22px; }

    /* Sticky in-page navigation */
    .dtl-page .dtl-subnav {
      position: sticky; top: var(--nahj-header-h, 73px); z-index: 30;
      background: rgba(252,252,250,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid #EFECE1; transition: box-shadow .3s ease;
    }
    .dtl-page .dtl-subnav.is-stuck { box-shadow: 0 12px 26px -20px rgba(82,11,26,.45); }
    .dtl-page .dtl-subnav-list { display: flex; gap: 28px; flex: 1; min-width: 0; overflow-x: auto; }
    .dtl-page .dtl-subnav-link {
      position: relative; flex-shrink: 0; padding: 18px 2px; background: none; border: 0; cursor: pointer;
      font-family: inherit; font-size: 14px; font-weight: 700; color: #6B7280; white-space: nowrap; transition: color .2s ease;
    }
    .dtl-page .dtl-subnav-link::after {
      content: ''; position: absolute; bottom: 0; inset-inline: 0; height: 2px; border-radius: 2px 2px 0 0;
      background: linear-gradient(90deg, #E6C862, #AA8C2C);
      transform: scaleX(0); transition: transform .35s cubic-bezier(.16,1,.3,1);
    }
    .dtl-page .dtl-subnav-link:hover { color: #520B1A; }
    .dtl-page .dtl-subnav-link.is-active { color: #7A1228; }
    .dtl-page .dtl-subnav-link.is-active::after { transform: scaleX(1); }
    .dtl-page .dtl-subnav-link:focus-visible { outline: 2px solid #D4AF37; outline-offset: -4px; border-radius: 6px; }
    .dtl-page .dtl-subnav-cta { display: none; align-items: center; gap: 14px; flex-shrink: 0; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
    .dtl-page .dtl-subnav.is-stuck .dtl-subnav-cta { opacity: 1; transform: none; pointer-events: auto; }
    @media (min-width: 1024px) { .dtl-page .dtl-subnav-cta { display: flex; } }
    @media (max-width: 767px) {
      .dtl-page .dtl-subnav-list {
        gap: 22px; padding-inline: 14px; margin-inline: -14px;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
                mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
      }
      .dtl-page .dtl-subnav-link { padding: 15px 2px; font-size: 13px; }
    }

    /* Sections */
    .dtl-page .dtl-section { scroll-margin-top: var(--dtl-offset); padding-bottom: 56px; }
    .dtl-page .dtl-subnav + .dtl-section,
    .dtl-page .dtl-band + .dtl-section { padding-top: 56px; }
    .dtl-page .dtl-section + .dtl-section .dtl-sec-inner { border-top: 1px solid rgba(212,175,55,.22); padding-top: 56px; }
    @media (min-width: 768px) {
      .dtl-page .dtl-section { padding-bottom: 72px; }
      .dtl-page .dtl-subnav + .dtl-section,
      .dtl-page .dtl-band + .dtl-section { padding-top: 72px; }
      .dtl-page .dtl-section + .dtl-section .dtl-sec-inner { padding-top: 72px; }
    }
    .dtl-page .dtl-band { scroll-margin-top: var(--dtl-offset); }

    /* Learning outcomes */
    .dtl-page .dtl-outcomes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
    @media (min-width: 768px) { .dtl-page .dtl-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .dtl-page .dtl-outcome {
      display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: #FFFFFF;
      border: 1px solid rgba(212,175,55,.22); border-radius: 18px;
      transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
    }
    .dtl-page .dtl-outcome-icon {
      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      background: #FDF2F4; border: 1px solid rgba(212,175,55,.45); color: #7A1228;
    }
    .dtl-page .dtl-outcome p { font-size: 14px; font-weight: 700; color: #340610; line-height: 1.8; padding-top: 4px; }
    @media (hover: hover) {
      .dtl-page .dtl-outcome:hover { transform: translateY(-2px); border-color: rgba(212,175,55,.55); box-shadow: 0 16px 30px -22px rgba(82,11,26,.35); }
    }

    /* Content / agenda accordion */
    .dtl-page .dtl-acc-list { display: flex; flex-direction: column; gap: 12px; }
    .dtl-page .dtl-acc { background: #FFFFFF; border: 1px solid rgba(212,175,55,.22); border-radius: 18px; transition: border-color .3s ease, box-shadow .3s ease; }
    .dtl-page .dtl-acc.is-open { border-color: rgba(212,175,55,.55); box-shadow: 0 18px 36px -26px rgba(82,11,26,.35); }
    .dtl-page .dtl-acc-btn {
      width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px 18px; text-align: start;
      background: none; border: 0; border-radius: 18px; cursor: pointer; font-family: inherit; color: inherit;
    }
    .dtl-page .dtl-acc-btn:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }
    .dtl-page .dtl-acc--static { background: #FCFCFA; }
    .dtl-page .dtl-acc--static .dtl-acc-btn { cursor: default; }
    .dtl-page .dtl-acc--static .dtl-acc-title { color: #6B7280; }
    .dtl-page .dtl-acc-num {
      width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 800;
      background: #F9F8F3; border: 1px solid #EFECE1; color: #AA8C2C;
      transition: background .3s ease, color .3s ease, border-color .3s ease;
    }
    .dtl-page .dtl-acc.is-open .dtl-acc-num { background: linear-gradient(135deg, #7A1228, #340610); color: #F3E5AB; border-color: #D4AF37; }
    .dtl-page .dtl-acc-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: #340610; line-height: 1.6; }
    .dtl-page .dtl-acc-sub { display: block; font-size: 11.5px; font-weight: 700; color: #9CA3AF; margin-top: 2px; }
    .dtl-page .dtl-acc-icon {
      position: relative; width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
      border: 1px solid #DFDBCB; transition: background .3s ease, border-color .3s ease;
    }
    .dtl-page .dtl-acc-icon::before,
    .dtl-page .dtl-acc-icon::after {
      content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.75px; border-radius: 2px;
      background: #7A1228; transform: translate(-50%, -50%); transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s ease;
    }
    .dtl-page .dtl-acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
    .dtl-page .dtl-acc.is-open .dtl-acc-icon { background: #7A1228; border-color: #7A1228; }
    .dtl-page .dtl-acc.is-open .dtl-acc-icon::before,
    .dtl-page .dtl-acc.is-open .dtl-acc-icon::after { background: #F3E5AB; }
    .dtl-page .dtl-acc.is-open .dtl-acc-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
    .dtl-page .dtl-acc-btn:hover .dtl-acc-icon { border-color: #D4AF37; }
    .dtl-page .dtl-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.16,1,.3,1); }
    .dtl-page .dtl-acc.is-open .dtl-acc-panel { grid-template-rows: 1fr; }
    .dtl-page .dtl-acc-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear .45s; }
    .dtl-page .dtl-acc.is-open .dtl-acc-inner { visibility: visible; transition-delay: 0s; }
    .dtl-page .dtl-acc-body { padding: 0 18px 22px; }
    @media (min-width: 640px) { .dtl-page .dtl-acc-body { padding-inline-start: 78px; padding-inline-end: 66px; } }
    .dtl-page .dtl-acc-body p { font-size: 13.5px; color: #4B5563; line-height: 1.9; }
    .dtl-page .dtl-topics { display: grid; gap: 8px; margin-top: 12px; }
    @media (min-width: 640px) { .dtl-page .dtl-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .dtl-page .dtl-topics li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 700; color: #374151; line-height: 1.7; }
    .dtl-page .dtl-topics li::before { content: ''; width: 6px; height: 6px; background: #D4AF37; transform: rotate(45deg) translateY(-2px); flex-shrink: 0; }

    /* Brochure download (hero) */
    .dtl-page .dtl-brochure {
      display: inline-flex; align-items: center; gap: 12px; margin-top: 4px;
      padding: 10px; padding-inline-end: 20px; border-radius: 16px; color: #FFFFFF;
      background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.55);
      transition: background .25s ease, border-color .25s ease, transform .25s ease;
    }
    .dtl-page .dtl-brochure:hover { background: rgba(212,175,55,.2); border-color: #E6C862; transform: translateY(-2px); }
    .dtl-page .dtl-brochure:focus-visible { outline: 2px solid #E6C862; outline-offset: 3px; }
    .dtl-page .dtl-brochure-badge {
      width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #E6C862, #D4AF37 50%, #AA8C2C); color: #340610;
    }
    @media (max-width: 639px) { .dtl-page .dtl-brochure { display: flex; width: 100%; } }

    /* Accordion — labelled blocks for program details */
    .dtl-page .dtl-acc-blocks { display: grid; gap: 12px; margin-top: 16px; }
    @media (min-width: 640px) { .dtl-page .dtl-acc-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .dtl-page .dtl-acc-block { padding: 14px 16px; border-radius: 14px; background: #FCFCFA; border: 1px solid #EFECE1; }
    .dtl-page .dtl-acc-block h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 800; color: #7A1228; }
    .dtl-page .dtl-acc-block h4 svg { width: 15px; height: 15px; color: #AA8C2C; }
    .dtl-page .dtl-acc-block .dtl-topics { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
    .dtl-page .dtl-acc-outcome {
      grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 14px;
      background: linear-gradient(90deg, rgba(212,175,55,.14), rgba(212,175,55,.04)); border: 1px solid rgba(212,175,55,.35);
      font-size: 13px; font-weight: 600; color: #340610; line-height: 1.8;
    }
    html[dir="rtl"] .dtl-page .dtl-acc-outcome { background: linear-gradient(270deg, rgba(212,175,55,.14), rgba(212,175,55,.04)); }
    .dtl-page .dtl-acc-outcome svg { width: 16px; height: 16px; color: #AA8C2C; flex-shrink: 0; margin-top: 4px; }
    .dtl-page .dtl-acc-outcome strong { color: #7A1228; font-weight: 800; }

    /* Chips (skills / tools) */
    .dtl-page .dtl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .dtl-page .dtl-chip { font-size: 11.5px; font-weight: 700; line-height: 1.5; padding: 5px 11px; border-radius: 999px; background: #FDF2F4; color: #7A1228; border: 1px solid #FBE5E9; }
    .dtl-page .dtl-chip--tool { display: inline-flex; align-items: center; gap: 6px; background: #FFFFFF; color: #340610; border-color: #DFDBCB; }
    .dtl-page .dtl-chip--tool img { width: 14px; height: 14px; object-fit: contain; }

    /* Projects */
    .dtl-page .dtl-projects { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 1024px) { .dtl-page .dtl-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1024px) { .dtl-page .dtl-projects.is-single { grid-template-columns: minmax(0, 48rem); } }
    .dtl-page .dtl-project {
      display: flex; flex-direction: column; overflow: hidden; background: #FFFFFF;
      border: 1px solid rgba(212,175,55,.28); border-radius: 24px;
      box-shadow: 0 14px 34px -18px rgba(82,11,26,.22);
      transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
    }
    @media (hover: hover) {
      .dtl-page .dtl-project:hover { transform: translateY(-4px); border-color: rgba(212,175,55,.55); box-shadow: 0 24px 44px -20px rgba(82,11,26,.3); }
    }
    .dtl-page .dtl-project-head { position: relative; overflow: hidden; padding: 22px 24px; color: #FFFFFF; background: linear-gradient(135deg, #7A1228 0%, #520B1A 55%, #340610 100%); }
    .dtl-page .dtl-project-head::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(212,175,55,.2) 1.5px, transparent 1.5px); background-size: 20px 20px; opacity: .6; }
    .dtl-page .dtl-project-head > * { position: relative; }
    .dtl-page .dtl-project-num {
      position: absolute; top: 12px; inset-inline-end: 20px; font-family: 'Inter', sans-serif; font-size: 46px; font-weight: 800; line-height: 1;
      color: rgba(212,175,55,.14); -webkit-text-stroke: 1px rgba(230,200,98,.7);
    }
    .dtl-page .dtl-project-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: #E6C862; }
    .dtl-page .dtl-project-head h3 { margin-top: 6px; padding-inline-end: 72px; font-size: 18px; font-weight: 900; line-height: 1.5; }
    .dtl-page .dtl-project-body { display: flex; flex-direction: column; gap: 16px; flex: 1; padding: 22px 24px; }
    .dtl-page .dtl-project-row { display: flex; align-items: flex-start; gap: 12px; }
    .dtl-page .dtl-project-icon {
      width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      background: #F9F8F3; border: 1px solid #EFECE1; color: #AA8C2C;
    }
    .dtl-page .dtl-project-label { display: block; font-size: 11px; font-weight: 800; color: #7A1228; }
    .dtl-page .dtl-project-row p { font-size: 13.5px; color: #374151; line-height: 1.8; margin-top: 2px; }
    .dtl-page .dtl-project-foot {
      display: flex; align-items: flex-start; gap: 10px; padding: 14px 24px; border-top: 1px solid #EFECE1; background: #FCFCFA;
      font-size: 13px; font-weight: 700; color: #340610; line-height: 1.7;
    }

    /* Tools & technologies */
    .dtl-page .dtl-tools { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 640px) { .dtl-page .dtl-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1024px) { .dtl-page .dtl-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .dtl-page .dtl-tool {
      display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: #FFFFFF;
      border: 1px solid rgba(212,175,55,.22); border-radius: 18px;
      transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
    }
    @media (hover: hover) {
      .dtl-page .dtl-tool:hover { transform: translateY(-2px); border-color: rgba(212,175,55,.55); box-shadow: 0 16px 30px -22px rgba(82,11,26,.35); }
    }
    .dtl-page .dtl-tool-logo {
      width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      background: #F9F8F3; border: 1px solid #EFECE1; color: #7A1228;
    }
    .dtl-page .dtl-tool-logo img { width: 30px; height: 30px; object-fit: contain; }
    /* Two tools in one card (e.g. "n8n و Make"): both logos in the same fixed box, so every card's text starts at the same place. */
    .dtl-page .dtl-tool-logo--duo { gap: 4px; }
    .dtl-page .dtl-tool-logo--duo img { width: 20px; height: 20px; }
    .dtl-page .dtl-tool h3 { text-align: start; }
    .dtl-page .dtl-tool-mono { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 800; color: #7A1228; text-transform: uppercase; }
    .dtl-page .dtl-tool h3 { font-size: 14.5px; font-weight: 800; color: #340610; line-height: 1.5; }
    .dtl-page .dtl-tool p { font-size: 12.5px; color: #4B5563; line-height: 1.75; margin-top: 3px; }

    /* Audience "why it fits you" */
    .dtl-page .dtl-why { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #DFDBCB; }
    .dtl-page .dtl-why-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: #AA8C2C; }
    .dtl-page .dtl-why p { font-size: 13px; color: #374151; line-height: 1.8; margin-top: 4px; }

    /* Sub-nav: fade the edges whenever the tabs overflow (many sections on desktop too) */
    .dtl-page .dtl-subnav-list.is-overflowing {
      padding-inline: 14px; margin-inline: -14px;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
              mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    }
    @media (min-width: 1024px) { .dtl-page .dtl-subnav-list { gap: 24px; } }

    @media (prefers-reduced-motion: reduce) {
      .dtl-page .dtl-card { animation: none; }
      .dtl-page .dtl-acc-panel, .dtl-page .dtl-acc-inner, .dtl-page .dtl-subnav-link::after, .dtl-page .dtl-outcome, .dtl-page .dtl-project, .dtl-page .dtl-tool, .dtl-page .dtl-brochure { transition: none; }
      .dtl-page .dtl-outcome:hover { transform: none; }
    }

    /* =====================================================================================
       HERO (replaced) — split banner from the reference: maroon message panel + photo whose
       edge curves into the panel, beneficiaries badge on the photo, message slider with dots.
       Mobile/tablet: text first, photo below with an arched top edge.
       ===================================================================================== */
    .nh-hero {
      --wave-h: clamp(26.4px, calc(48 * 100vw / 1280), 48px); /* same formula as .nahj-divider, k = 48 */
      position: relative; overflow: hidden; color: #FFFFFF;
      background: linear-gradient(135deg, #7A1228 0%, #5E0D20 48%, #3E0714 100%);
    }
    /* soft fabric folds + a warm light behind the message (as in the reference) */
    .nh-hero__bg {
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(55% 70% at 72% 38%, rgba(163, 24, 54, .45), rgba(163, 24, 54, 0) 72%),
        repeating-linear-gradient(90deg,
          rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, .035) 26px, rgba(255, 255, 255, 0) 52px,
          rgba(0, 0, 0, .07) 78px, rgba(255, 255, 255, 0) 104px);
    }
    html[dir="ltr"] .nh-hero__bg {
      background:
        radial-gradient(55% 70% at 28% 38%, rgba(163, 24, 54, .45), rgba(163, 24, 54, 0) 72%),
        repeating-linear-gradient(90deg,
          rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, .035) 26px, rgba(255, 255, 255, 0) 52px,
          rgba(0, 0, 0, .07) 78px, rgba(255, 255, 255, 0) 104px);
    }
    /* Gold arabesque (8-point star lattice) fading in from the outer bottom corner */
    .nh-hero__ornament {
      position: absolute; bottom: 0; inset-inline-start: 0; z-index: 0; pointer-events: none;
      width: clamp(120px, 17vw, 270px); height: 80%; opacity: .2;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3Cpath d='M0 28h11M45 28h11M28 0v11M28 45v11'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 56px 56px; background-position: right bottom;
      -webkit-mask-image: radial-gradient(120% 90% at 100% 100%, #000 25%, transparent 72%);
              mask-image: radial-gradient(120% 90% at 100% 100%, #000 25%, transparent 72%);
    }
    html[dir="ltr"] .nh-hero__ornament {
      background-position: left bottom;
      -webkit-mask-image: radial-gradient(120% 90% at 0% 100%, #000 25%, transparent 72%);
              mask-image: radial-gradient(120% 90% at 0% 100%, #000 25%, transparent 72%);
    }

    .nh-hero__container { padding-top: 3rem; }

    /* Message slider: every slide sits in the same grid cell, so the height is the tallest message */
    .nh-slides { display: grid; }
    .nh-slide {
      grid-area: 1 / 1; display: flex; flex-direction: column; gap: 1.15rem;
      opacity: 0; visibility: hidden; transform: translateY(14px);
      transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), visibility 0s linear .7s;
    }
    .nh-slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .nh-hero__eyebrow { color: #E6C862; font-weight: 700; font-size: 1rem; line-height: 1.6; }
    .nh-hero__title { line-height: 1.4; letter-spacing: 0; }
    .nh-hero__desc { line-height: 1.95; }
    .nh-hero__cta { padding-top: .6rem; }
    .nh-btn-outline { background: transparent; border: 1px solid rgba(212, 175, 55, .75); }
    .nh-btn-outline:hover { background: rgba(212, 175, 55, .1); border-color: #E6C862; }

    /* Slider dots */
    .nh-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2.25rem; }
    .nh-dot {
      position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
      background: rgba(255, 255, 255, .38); transition: width .35s cubic-bezier(.16,1,.3,1), background-color .35s ease;
    }
    .nh-dot::before { content: ''; position: absolute; inset: -10px -6px; } /* comfortable touch target */
    .nh-dot:hover { background: rgba(255, 255, 255, .7); }
    .nh-dot.is-active { width: 26px; background: #D4AF37; }
    .nh-dot:focus-visible { outline: 2px solid #F3E5AB; outline-offset: 4px; }

    /* Photo + gold rim + badge. Mobile: full-width block with an arched top edge. */
    .nh-hero__media { position: relative; z-index: 0; width: 100%; aspect-ratio: 542 / 405; margin-top: 2.75rem; }
    .nh-hero__rim, .nh-hero__photo { position: absolute; inset: 0; }
    .nh-hero__rim {
      background: linear-gradient(180deg, #E6C862, #AA8C2C); opacity: .75;
      clip-path: ellipse(82% 100% at 50% 100%);
    }
    .nh-hero__photo { overflow: hidden; clip-path: ellipse(82% calc(100% - 4px) at 50% 100%); }
    .nh-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 100%; }

    /* Beneficiaries badge — a floating achievement card over the lower outer corner of the photo,
       kept clear of the bottom wave. Icon column + text column: small "أكثر من", dominant figure,
       gold rule, then the label. Layered with a hairline gold border and a soft two-step shadow. */
    .nh-hero__badge {
      position: absolute; z-index: 2;
      bottom: calc(var(--wave-h) + 14px); inset-inline-end: 14px;
      display: grid; grid-template-columns: auto auto; column-gap: 14px; align-items: center; text-align: start;
      padding: 14px 18px 14px 20px; border-radius: 18px; overflow: hidden;
      background: linear-gradient(160deg, #7F142C 0%, #5E0D20 58%, #4A0918 100%);
      border: 1px solid rgba(212, 175, 55, .42);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 2px 6px rgba(35, 4, 11, .25),
        0 22px 44px -18px rgba(35, 4, 11, .75);
    }
    /* thin gold highlight along the top edge */
    .nh-hero__badge::before {
      content: ''; position: absolute; top: 0; inset-inline: 18px; height: 1px; pointer-events: none;
      background: linear-gradient(90deg, rgba(230, 200, 98, 0), rgba(230, 200, 98, .85), rgba(230, 200, 98, 0));
    }
    .nh-hero__badge > :not(.nh-hero__badge-icon) { grid-column: 2; }
    .nh-hero__badge-icon {
      grid-column: 1; grid-row: 1 / span 4; align-self: center;
      width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      color: #3E0714; background: linear-gradient(145deg, #F3E5AB 0%, #D4AF37 55%, #AA8C2C 100%);
      box-shadow: 0 0 0 4px rgba(212, 175, 55, .14), 0 6px 14px -6px rgba(0, 0, 0, .5);
    }
    .nh-hero__badge-pre { font-size: 12px; font-weight: 600; color: rgba(243, 229, 171, .82); line-height: 1.4; margin-bottom: 2px; }
    /* Hero statistic — "25,000+": tabular figures (no jitter while counting), smaller gold "+",
       a short gold rule that draws in once, then the label. */
    .nh-hero__badge-num {
      display: flex; align-items: flex-start; gap: .06em; direction: ltr; unicode-bidi: isolate;
      justify-content: flex-end;
      font-size: clamp(1.9rem, 1.2rem + 1.4vw, 2.6rem); font-weight: 800; line-height: 1;
      letter-spacing: -.02em; color: #FFFFFF; font-variant-numeric: tabular-nums lining-nums;
      text-shadow: 0 2px 12px rgba(35, 4, 11, .35);
    }
    html[dir="ltr"] .nh-hero__badge-num { justify-content: flex-start; }
    .nh-hero__badge-plus { font-size: .56em; font-weight: 700; line-height: 1; color: #E6C862; margin-top: .08em; letter-spacing: 0; }
    .nh-hero__badge-rule {
      display: block; width: 34px; height: 2px; margin: 9px 0 5px; border-radius: 2px;
      background: linear-gradient(90deg, #E6C862, rgba(230, 200, 98, 0));
      transform: scaleX(0); transform-origin: left center;
      animation: nhBadgeRule .9s cubic-bezier(.16,1,.3,1) 1.2s forwards;
    }
    html[dir="rtl"] .nh-hero__badge-rule { background: linear-gradient(270deg, #E6C862, rgba(230, 200, 98, 0)); transform-origin: right center; }
    @keyframes nhBadgeRule { to { transform: scaleX(1); } }
    .nh-hero__badge-lbl { font-size: 13px; font-weight: 700; color: #F3F4F6; line-height: 1.4; letter-spacing: .01em; }
    @media (prefers-reduced-motion: reduce) { .nh-hero__badge-rule { animation: none; transform: none; } }
    @media (max-width: 639px) {
      .nh-hero__badge { bottom: calc(var(--wave-h) + 8px); inset-inline-end: 10px; column-gap: 10px; padding: 10px 13px 10px 14px; border-radius: 14px; }
      .nh-hero__badge::before { inset-inline: 12px; }
      .nh-hero__badge-icon { width: 34px; height: 34px; box-shadow: 0 0 0 3px rgba(212, 175, 55, .14), 0 4px 10px -4px rgba(0, 0, 0, .5); }
      .nh-hero__badge-icon svg { width: 16px; height: 16px; }
      .nh-hero__badge-num { font-size: 1.5rem; }
      .nh-hero__badge-pre, .nh-hero__badge-lbl { font-size: 11px; }
      .nh-hero__badge-rule { width: 24px; margin: 6px 0 4px; }
    }

    /* Desktop: photo pinned to the outer edge and stretched over the FULL hero height (top edge →
       bottom edge, under the wave), so the bottom wave — drawn above it — cuts the photo along the
       same organic curve instead of leaving a straight edge. The width is fixed (48vw / 52vw, as in
       nahj_hero_image_sizes()) and object-fit: cover fills the box; the inner edge curves into the
       maroon panel with the gold rim. */
    @media (min-width: 1024px) {
      .nh-hero { min-height: clamp(540px, 40vw, 660px); display: flex; align-items: center; }
      .nh-hero__container { padding-top: 64px; padding-bottom: calc(var(--wave-h) + 56px); }
      .nh-hero__text { width: 48%; }
      .nh-hero__media {
        position: absolute; top: 0; bottom: 0; inset-inline-end: 0; margin: 0;
        width: 48vw; height: auto; aspect-ratio: auto;
      }
      .nh-hero__photo img { object-position: 58% 22%; }
      /* one wide, shallow arc (widest a little above the middle, so the visible part above the
         wave reads as a smooth, balanced curve) */
      .nh-hero__rim   { clip-path: ellipse(100% 118% at 0% 46%); }
      .nh-hero__photo { clip-path: ellipse(calc(100% - 4px) 118% at 0% 46%); }
      html[dir="ltr"] .nh-hero__rim   { clip-path: ellipse(100% 118% at 100% 46%); }
      html[dir="ltr"] .nh-hero__photo { clip-path: ellipse(calc(100% - 4px) 118% at 100% 46%); }
      .nh-hero__badge { bottom: calc(var(--wave-h) + 40px); inset-inline-end: clamp(24px, 3.2vw, 56px); }
      .nh-dots { justify-content: flex-start; margin-top: 2.75rem; }
    }
    @media (min-width: 1280px) {
      .nh-hero__text { width: 46%; }
      .nh-hero__media { width: 52vw; }
      .nh-hero__badge { padding: 16px 22px 16px 24px; column-gap: 16px; border-radius: 20px; }
      .nh-hero__badge-icon { width: 48px; height: 48px; }
    }
    /* English (LTR): the photo sits on the right, so it is mirrored to keep the subject facing the text */
    html[dir="ltr"] .nh-hero__photo img { transform: scaleX(-1); }

    @media (prefers-reduced-motion: reduce) {
      .nh-slide, .nh-dot { transition: none !important; }
      .nh-slide { transform: none !important; }
    }

    /* ============ SERVICES — footer-style background (gold dots + faded brand mark) ============ */
    .services-mark {
      position: absolute; top: 64px; inset-inline-end: -56px; z-index: 0;
      width: auto; height: 420px; transform: rotate(-8deg);
      opacity: .08; pointer-events: none; user-select: none;
    }
    @media (max-width: 767px) { .services-mark { height: 230px; top: 36px; inset-inline-end: -44px; } }

    /* ============ CLIENTS — continuous logo marquee ============ */
    .nahj-marquee {
      position: relative; overflow: hidden; direction: ltr; padding-block: 10px;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    }
    .nahj-marquee__track { display: flex; width: max-content; animation: nahjMarquee 42s linear infinite; will-change: transform; }
    .nahj-marquee__group { display: flex; flex-shrink: 0; gap: 20px; margin: 0; padding: 0 20px 0 0; list-style: none; }
    .nahj-marquee__item { flex: 0 0 auto; width: 176px; }
    html[dir="rtl"] .nahj-marquee__item { direction: rtl; }
    @media (min-width: 640px) { .nahj-marquee__item { width: 208px; } }
    .nahj-marquee__logo {
      display: block; width: auto; height: auto; max-width: 100%; max-height: 52px; object-fit: contain;
      filter: grayscale(1); opacity: .75; transition: filter .3s ease, opacity .3s ease;
    }
    .nahj-marquee__logo--tall { max-height: 76px; }
    .nahj-marquee__item:hover .nahj-marquee__logo { filter: none; opacity: 1; }
    .nahj-marquee:hover .nahj-marquee__track,
    .nahj-marquee:focus-within .nahj-marquee__track { animation-play-state: paused; }
    html[dir="rtl"] .nahj-marquee__track { animation-direction: reverse; } /* moves with the reading direction */
    @keyframes nahjMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
    @media (prefers-reduced-motion: reduce) {
      .nahj-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
      .nahj-marquee__track { animation: none; }
      .nahj-marquee__group[aria-hidden="true"] { display: none; }
    }

    /* ============ FAQ — accordion ============ */
    .faq-item {
      transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease;
    }
    .faq-item.is-open { border-color: rgba(212, 175, 55, .55); box-shadow: 0 14px 32px -18px rgba(82, 11, 26, .25); }
    .faq-q {
      width: 100%; display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.5rem;
      background: none; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: 1rem;
    }
    .faq-q:hover { color: #7A1228; }
    .faq-q:focus-visible { outline: 2px solid #D4AF37; outline-offset: -2px; }
    .faq-chevron {
      flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      color: #7A1228; background: #FDF2F4; border: 1px solid rgba(212, 175, 55, .35);
      transition: transform .4s cubic-bezier(.16,1,.3,1), background-color .3s ease, color .3s ease;
    }
    .faq-item.is-open .faq-chevron { transform: rotate(180deg); background: #7A1228; color: #E6C862; }
    .faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.16,1,.3,1); }
    .faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
    .faq-panel > div { overflow: hidden; min-height: 0; }
    .faq-panel p {
      padding: 0 1.5rem 1.35rem; padding-inline-start: 3.5rem;
      opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
    }
    .faq-item.is-open .faq-panel p { opacity: 1; transform: none; transition-delay: .06s; }
    @media (max-width: 639px) {
      .faq-q { padding: 1.1rem 1.1rem; }
      .faq-panel p { padding: 0 1.1rem 1.2rem; padding-inline-start: 1.1rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .faq-panel, .faq-panel p, .faq-chevron { transition: none !important; }
    }
    /* Latin headlines need less leading than Arabic */
    .en-mode .nh-hero__title { line-height: 1.18; }
    /* Client logo linking to the client's website (only when a URL is set in the dashboard) */
    .nahj-marquee__link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

    /* =====================================================================================
       ARABIC TYPOGRAPHY — diacritics (فتحة، ضمة، كسرة، تنوين، شدة، سكون) need vertical room.
       Tailwind's heading sizes carry tight line-heights (1.1–1.25) that are fine for Latin but make
       Arabic marks collide with the line above or get clipped. Only line-height and letter-spacing
       change here; sizes, weights and colours are untouched. English (LTR) is not affected.
       ===================================================================================== */
    html[dir="rtl"] body { font-kerning: normal; text-rendering: optimizeLegibility; }
    html[dir="rtl"] :is(h1, h2) { line-height: 1.5; }
    html[dir="rtl"] :is(h3, h4, h5, h6) { line-height: 1.6; }
    html[dir="rtl"] .nh-hero__title { line-height: 1.55; }
    html[dir="rtl"] .leading-tight { line-height: 1.5; }
    html[dir="rtl"] .leading-snug { line-height: 1.6; }
    /* Clamped course titles/descriptions: keep marks on the last visible line inside the box */
    html[dir="rtl"] .line-clamp-2 { padding-block: .1em; }
    /* Letter-spacing breaks the joins between Arabic letters — never apply it to Arabic text */
    html[dir="rtl"] :is([class*="tracking-"], .nahj-eyebrow, .impact-lbl):not(.font-inter) { letter-spacing: 0; }
    /* Numbers, phones, emails, prices and URLs inside Arabic sentences keep their own direction */
    [dir="ltr"], .font-inter, .impact-num { unicode-bidi: isolate; }
    /* Very small phones (< 360px): the About image composite is two half-width columns — give its
       small cards a little more room and let a long single word wrap instead of overflowing. */
    #about .grid-cols-2 h4, #about .grid-cols-2 p { overflow-wrap: break-word; }
    @media (max-width: 359px) { #about .grid-cols-2 .p-6 { padding: 1rem; } }
    /* While counting up, the number is narrower than its reserved width: keep the digits against the "+" */
    .nh-hero__badge-num .impact-val { display: inline-block; text-align: right; }

    /* Header/footer logos & footer mark: Arabic assets by default, English (-en) assets while the site is in English */
    .nahj-logo-en { display: none; }
    body.en-mode .nahj-logo-ar { display: none; }
    body.en-mode .nahj-logo-en { display: block; }

    /* =====================================================================================
       TESTIMONIALS CAROUSEL — cards keep their original look; 3 per view on desktop, 2 on tablet,
       1 on mobile. Arrows sit beside the track (below it on phones).
       ===================================================================================== */
    .nahj-tslider { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
    .nahj-tslider__track {
      display: flex; gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; overscroll-behavior-x: contain;
      scrollbar-width: none; -ms-overflow-style: none;
      padding: 12px 4px 24px; margin: -12px -4px -24px;   /* room for the card hover lift & shadow */
    }
    .nahj-tslider__track::-webkit-scrollbar { display: none; }
    .nahj-tslider__slide { flex: 0 0 100%; scroll-snap-align: start; }
    @media (min-width: 768px)  { .nahj-tslider__slide { flex-basis: calc((100% - 2rem) / 2); } }
    @media (min-width: 1024px) { .nahj-tslider__slide { flex-basis: calc((100% - 4rem) / 3); } }
    .nahj-tslider__arrow {
      width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
      background: #FFFFFF; color: #7A1228; border: 1px solid rgba(212, 175, 55, 0.4);
      box-shadow: 0 10px 30px -10px rgba(82, 11, 26, 0.12); cursor: pointer;
      transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nahj-tslider__arrow:hover:not(:disabled) { background: #7A1228; color: #D4AF37; border-color: #D4AF37; }
    .nahj-tslider__arrow:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }
    .nahj-tslider__arrow:disabled { opacity: .35; cursor: default; }
    html[dir="rtl"] .nahj-tslider__arrow svg { transform: scaleX(-1); }
    @media (max-width: 639px) {
      .nahj-tslider { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
      .nahj-tslider__track { grid-column: 1 / -1; grid-row: 1; }
      .nahj-tslider [data-tslider-prev] { grid-row: 2; justify-self: end; }
      .nahj-tslider [data-tslider-next] { grid-row: 2; justify-self: start; }
    }