/* 1pc-training-site — design-parity build (mobile-first, bilingual RTL/LTR).
   Visual language ported from retreats.1percent.community (website_templates.py). */

:root {
  --bg: #000000;
  --bg-2: #0A0A0A;
  --card: #111111;
  --text: #FFFFFF;
  --text-dim: #C6C6C6;
  --text-muted: #A0A0A0;
  --accent: #25CE8E;
  --accent-soft: rgba(37, 206, 142, 0.15);
  --accent-softer: rgba(37, 206, 142, 0.08);
  --accent-watermark: rgba(37, 206, 142, 0.04);
  --border: #222222;
  --border-faint: rgba(255, 255, 255, 0.05);

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 72px;
  --space-2xl: 100px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --tap: 48px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t: 0.3s var(--ease);

  --font-ar: 'Cairo', system-ui, sans-serif;
  --font-en: 'Inter', system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.7 var(--font-ar);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* Signature diagonal grid watermark — ported from the retreats build. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(-55deg,
      var(--accent-watermark) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(55deg,
      var(--accent-watermark) 0 1px, transparent 1px 36px);
  opacity: 1;
}
html[lang="en"] body { font-family: var(--font-en); }
body > * { position: relative; z-index: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; color: inherit; background: transparent; border: 0; }

/* ── Language visibility — flips off html[lang] ───────────────────────── */
html[lang="ar"] [data-lang="en"] { display: none; }
html[lang="en"] [data-lang="ar"] { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   HEADER — frosted glass, logo image + nav + lang toggle
   ══════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.logo {
  display: inline-flex;
  align-items: center;
  height: 40px;
  flex: 0 0 auto;
}
.logo img {
  height: 32px;
  width: auto;
  display: block;
}
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
  gap: 2px;
}
.site-header.nav-open .site-nav { display: flex; }
.nav-link {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px var(--space-sm);
  min-height: var(--tap);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: color var(--t), background var(--t);
}
.nav-link:hover, .nav-link:focus-visible {
  color: var(--accent);
  background: var(--accent-softer);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.btn-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  transition: color var(--t), border-color var(--t);
}
.btn-nav-toggle:hover { color: var(--accent); border-color: var(--accent); }
.btn-nav-toggle svg { width: 22px; height: 22px; }
.btn-lang {
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 10px 16px;
  border-radius: 999px;
  font: 700 13px var(--font-en);
  min-height: var(--tap);
  min-width: 64px;
  transition: color var(--t), border-color var(--t);
}
.btn-lang:hover { color: var(--accent); border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════
   HERO — full-bleed background image with text overlay.
   The source composition has black negative space on the LEFT and the
   subject (man + green circle + white lightning + triangle pattern) on
   the RIGHT. The text block is pinned to the left edge via absolute
   positioning in BOTH languages so the layout matches the composition.
   Text direction inside the block still follows html[dir] — Arabic reads
   right-to-left within the block, English left-to-right.
   ══════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 85vh;
  min-height: 85svh;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
}
.hero-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
  z-index: 0;
  background: transparent;
}
.hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Subject sits in the right half of the source composition. Anchoring
     the image at 75% x keeps the subject inside the right third of the
     viewport regardless of aspect ratio. */
  object-position: center center;
}
/* Scrim — darker on the LEFT where the text block sits, fading to
   transparent over the subject on the right. Same in both languages. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(10, 10, 10, 0.85) 0%,
    rgba(10, 10, 10, 0.55) 35%,
    rgba(10, 10, 10, 0.15) 60%,
    rgba(10, 10, 10, 0) 80%
  );
}
.hero-body {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  right: auto;
  transform: translateY(-50%);
  max-width: min(560px, 90vw);
  padding: clamp(1.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
  margin: 0;
  /* Inherit direction from <html> so Arabic text flows RTL and English
     LTR within the block. Text-align: start makes the text hug its own
     reading edge — the block itself stays pinned to the viewport left. */
  text-align: start;
}
.hero-badge {
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-en);
  margin: 0 0 var(--space-md);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero-title {
  font-size: clamp(2.2rem, 7vw, 4.2rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 var(--space-xs);
  color: var(--text);
  word-wrap: break-word;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.hero-sub {
  color: var(--accent);
  font-weight: 700;
  font-size: clamp(1rem, 2.6vw, 1.4rem);
  margin: 0 0 var(--space-sm);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.hero-desc {
  color: var(--text);
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  margin: 0 0 var(--space-lg);
  max-width: 48ch;
  line-height: 1.75;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
/* Narrow viewports — tighten the scrim so text stays legible even when
   the subject has drifted into the text area. */
@media (max-width: 600px) {
  .hero { min-height: 80vh; min-height: 80svh; }
  .hero::after {
    background: linear-gradient(
      to right,
      rgba(10, 10, 10, 0.88) 0%,
      rgba(10, 10, 10, 0.62) 55%,
      rgba(10, 10, 10, 0.28) 90%,
      rgba(10, 10, 10, 0.15) 100%
    );
  }
  html[dir="ltr"] .hero::after,
  body.lang-en .hero::after {
    background: linear-gradient(
      to left,
      rgba(10, 10, 10, 0.88) 0%,
      rgba(10, 10, 10, 0.62) 55%,
      rgba(10, 10, 10, 0.28) 90%,
      rgba(10, 10, 10, 0.15) 100%
    );
  }
}

/* ══════════════════════════════════════════════════════════════════════
   BUTTONS — primary hexagonal CTA + outline variant
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-block;
  padding: 16px 44px;
  min-height: var(--tap);
  background: var(--accent);
  color: #000;
  font-weight: 800;
  font-size: 0.98rem;
  font-family: var(--font-en);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  transition: filter var(--t), transform var(--t);
  will-change: transform;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-3px); }
.btn:active { transform: translateY(0); }

.btn-outline {
  display: inline-block;
  padding: 14px 40px;
  min-height: var(--tap);
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--font-en);
  letter-spacing: 0.04em;
  transition: background var(--t), filter var(--t), transform var(--t);
}
.btn-outline:hover {
  background: var(--accent-softer);
  filter: brightness(1.1);
  transform: translateY(-3px);
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION SHELL — alternating surface, horizontal accent divider above
   ══════════════════════════════════════════════════════════════════════ */
.section {
  padding: var(--space-xl) var(--space-sm);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}
.section-label {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-en);
  margin: 0 0 var(--space-md);
}
.section-title {
  font-size: 1.65rem;
  font-weight: 800;
  margin: 0 auto var(--space-sm);
  text-align: center;
  max-width: 760px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.section-sub {
  color: var(--text-dim);
  text-align: center;
  margin: 0 auto var(--space-lg);
  max-width: 600px;
  font-size: 0.98rem;
  line-height: 1.75;
}
.section-head {
  text-align: center;
  margin-bottom: var(--space-lg);
}

/* ── About strip (quiet surface, no divider) ──────────────────────────── */
.about-strip {
  background: var(--bg-2);
  padding: var(--space-xl) var(--space-sm);
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.about-strip img {
  width: 100%;
  max-width: 460px;
  max-height: 360px;
  object-fit: cover;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-faint);
}
.about-strip p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.85;
}

/* ══════════════════════════════════════════════════════════════════════
   PROGRAM CARDS — signature left accent bar reveal on hover
   ══════════════════════════════════════════════════════════════════════ */
.programs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.program-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t);
  display: flex;
  flex-direction: column;
}
/* The left accent bar — slides up to 100% on hover. In RTL, flip to the right. */
.program-card::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 3px;
  height: 0;
  background: var(--accent);
  transition: height var(--t);
  z-index: 2;
}
.program-card:hover {
  border-color: var(--accent-soft);
  transform: translateY(-4px);
}
.program-card:hover::before { height: 100%; }
.program-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #1c1c1c 0%, #0a0a0a 100%);
  object-fit: cover;
}
.program-body {
  padding: var(--space-md) var(--space-md) calc(var(--space-md) + 4px);
  text-align: start;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.program-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.01em;
}
.program-desc {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 0 0 var(--space-sm);
  line-height: 1.7;
}
.program-price {
  color: var(--accent);
  font-weight: 800;
  font-family: var(--font-en);
  font-size: 1.15rem;
  margin: auto 0 var(--space-sm);
  letter-spacing: 0.01em;
}
.program-cta {
  display: block;
  padding: 13px 16px;
  min-height: var(--tap);
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  text-align: center;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  transition: background var(--t), color var(--t), transform var(--t);
}
.program-cta:hover {
  background: var(--accent);
  color: #000;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════════
   WHY cards — flat, icon-forward, matches retreats benefit grid
   ══════════════════════════════════════════════════════════════════════ */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.why-card {
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  transition: border-color var(--t), transform var(--t);
}
.why-card:hover {
  border-color: var(--accent-soft);
  transform: translateY(-3px);
}
.why-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-sm);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-softer);
  border-radius: var(--radius-md);
}
.why-icon svg { width: 28px; height: 28px; display: block; }
.why-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 var(--space-xs);
  letter-spacing: -0.005em;
}
.why-desc {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════════════════════════════ */
.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.quote {
  background: var(--card);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-faint);
  position: relative;
  transition: border-color var(--t), transform var(--t);
}
.quote:hover {
  border-color: var(--accent-soft);
  transform: translateY(-3px);
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  inset-inline-start: 14px;
  color: var(--accent);
  font-size: 2.6rem;
  line-height: 1;
  font-family: var(--font-en);
  opacity: 0.6;
}
.quote-text {
  color: var(--text-dim);
  font-size: 0.96rem;
  line-height: 1.8;
  margin: var(--space-sm) 0 var(--space-sm);
  padding-inline-start: 20px;
}
.quote-author {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  font-family: var(--font-en);
  padding-inline-start: 20px;
}

/* ══════════════════════════════════════════════════════════════════════
   FINAL CTA
   ══════════════════════════════════════════════════════════════════════ */
.final-cta {
  background: var(--bg-2);
  padding: var(--space-2xl) var(--space-sm);
  text-align: center;
  border-top: 1px solid var(--border);
  position: relative;
}
.final-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.final-cta img {
  width: 100%;
  max-width: 640px;
  max-height: 400px;
  object-fit: cover;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-md);
  display: block;
  border: 1px solid var(--bg-2);
}
.final-cta h2 {
  font-size: 1.9rem;
  font-weight: 800;
  max-width: 640px;
  margin: 0 auto var(--space-sm);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.final-cta p {
  color: var(--text-dim);
  margin: 0 auto var(--space-lg);
  max-width: 520px;
  font-size: 0.98rem;
  line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER — multi-column, signature accent stripe on top
   ══════════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--bg);
  padding: var(--space-xl) var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
  position: relative;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    -55deg,
    var(--accent) 0 6px,
    transparent 6px 14px
  );
  opacity: 0.9;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.footer-col h4 {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  font-family: var(--font-en);
}
.footer-brand .logo img { height: 40px; margin-bottom: var(--space-sm); }
.footer-tagline {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: 320px;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-links a {
  color: var(--text-muted);
  padding: 6px 0;
  display: inline-block;
  transition: color var(--t);
}
.footer-links a:hover { color: var(--accent); }
.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-sm);
}
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  transition: color var(--t), border-color var(--t), transform var(--t), background var(--t);
}
.social-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-softer);
  transform: translateY(-2px);
}
.social-link svg { width: 20px; height: 20px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.footer-email {
  color: var(--text-dim);
  font-family: var(--font-en);
  font-size: 0.92rem;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  transition: color var(--t);
}
.footer-email:hover { color: var(--accent); }
.footer-bottom {
  max-width: 1200px;
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════
   LEGAL PAGES — shared typography
   ══════════════════════════════════════════════════════════════════════ */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-sm) var(--space-2xl);
}
.legal-draft-banner {
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: #facc15;
  padding: 12px var(--space-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
  font-size: 0.88rem;
  text-align: center;
  font-family: var(--font-en);
  letter-spacing: 0.02em;
}
.legal-page h1 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: var(--space-xs);
}
.legal-page .legal-meta {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: var(--space-lg);
  font-family: var(--font-en);
}
.legal-page h2 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: var(--space-lg) 0 var(--space-xs);
  color: var(--text);
}
.legal-page p, .legal-page li {
  color: var(--text-dim);
  line-height: 1.85;
  margin-bottom: var(--space-sm);
  font-size: 0.96rem;
}
.legal-page ul, .legal-page ol {
  padding-inline-start: var(--space-md);
  margin-bottom: var(--space-md);
}

/* ══════════════════════════════════════════════════════════════════════
   DATA-VISIBLE — CMS-driven visibility toggle (data-* flag set by patcher)
   ══════════════════════════════════════════════════════════════════════ */
[data-visible="false"] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   ABOUT — multi-paragraph body + 3-stat strip
   ══════════════════════════════════════════════════════════════════════ */
.about-body {
  max-width: 720px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}
.about-paragraph {
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.85;
  margin-bottom: var(--space-md);
}
.about-paragraph:last-child { margin-bottom: 0; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-sm);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.about-stat { text-align: center; padding: var(--space-xs) 0; }
.stat-value {
  color: var(--accent);
  font: 800 1.7rem/1 var(--font-en);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.stat-label {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-en);
}
html[lang="ar"] .stat-label { font-family: var(--font-ar); letter-spacing: 0; }

/* ══════════════════════════════════════════════════════════════════════
   TRAINER — photo + meta, with data-pos / data-size layout controls
   ══════════════════════════════════════════════════════════════════════ */
.trainer-section { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.trainer-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.trainer-photo {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
.trainer-photo img {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-faint);
}
/* data-size: small|medium|large */
.trainer-section[data-size="small"]  .trainer-photo img { max-width: 260px; }
.trainer-section[data-size="medium"] .trainer-photo img { max-width: 340px; }
.trainer-section[data-size="large"]  .trainer-photo img { max-width: 460px; }

.trainer-meta {
  text-align: center;
}
.trainer-name {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.trainer-role {
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  font-family: var(--font-en);
}
html[lang="ar"] .trainer-role { font-family: var(--font-ar); }
.trainer-bio {
  color: var(--text-dim);
  font-size: 0.98rem;
  line-height: 1.8;
  margin: 0 auto var(--space-md);
  max-width: 520px;
}
.trainer-social {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* ══════════════════════════════════════════════════════════════════════
   CONTACT FORM — static, mailto-backed
   ══════════════════════════════════════════════════════════════════════ */
.footer-contact-col h4 { margin-bottom: var(--space-md); }
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-field-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-en);
}
html[lang="ar"] .contact-field-label { font-family: var(--font-ar); letter-spacing: 0; }
.contact-field input,
.contact-field textarea {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 12px;
  font: 400 0.95rem var(--font-en);
  transition: border-color var(--t), box-shadow var(--t);
}
html[lang="ar"] .contact-field input,
html[lang="ar"] .contact-field textarea { font-family: var(--font-ar); }
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-softer);
}
.contact-field textarea { resize: vertical; min-height: 88px; }
.contact-submit { align-self: flex-start; padding: 12px 28px; font-size: 0.9rem; }

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP BREAKPOINTS
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  body { font-size: 17px; }
  /* Hero typography is fluid (clamp()) across all viewports — see base rules. */
  .section { padding: var(--space-2xl) var(--space-sm); }
  .section-title { font-size: 2.1rem; }
  .final-cta h2 { font-size: 2.6rem; }
  .programs-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: 1fr 1fr; }
  /* Hero layout is full-bleed across all viewports (see base .hero rules).
     Bump the body max-width at ≥768px so the text column breathes on
     wider screens without overflowing the scrimmed area. */
  .hero-body { max-width: 640px; }
  .footer-inner {
    grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
    gap: var(--space-xl);
  }

  .btn-nav-toggle { display: none; }
  .site-nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
  }
  .nav-link { padding: 10px 12px; font-size: 0.9rem; min-height: auto; }
}

@media (min-width: 768px) {
  .about-stats { padding: var(--space-lg) var(--space-md); gap: var(--space-lg); }
  .stat-value { font-size: 2.2rem; }
  .trainer-layout {
    grid-template-columns: auto 1fr;
    gap: var(--space-xl);
    align-items: center;
  }
  .trainer-section[data-pos="right"] .trainer-layout {
    direction: rtl;
  }
  html[dir="rtl"] .trainer-section[data-pos="right"] .trainer-layout { direction: ltr; }
  html[dir="rtl"] .trainer-section[data-pos="left"]  .trainer-layout { direction: rtl; }
  /* Text flow in the meta block always follows the html root direction.
     The grid-level direction flips above are purely for column ORDER
     (image vs text side) — the text itself must read in its natural
     reading order, so Arabic is right-aligned and English left-aligned
     regardless of which side the image lands on. */
  html[dir="rtl"] .trainer-meta { direction: rtl; }
  html:not([dir="rtl"]) .trainer-meta { direction: ltr; }
  .trainer-meta { text-align: start; }
  .trainer-social { justify-content: flex-start; }
  .contact-form { max-width: 420px; }
}

@media (min-width: 1200px) {
  .programs-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .testimonials { grid-template-columns: repeat(3, 1fr); }
  .nav-link { padding: 10px 14px; font-size: 0.92rem; }
}

/* Respect reduced-motion preferences — kill transforms, keep color transitions short */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
  .program-card:hover, .why-card:hover, .quote:hover,
  .btn:hover, .btn-outline:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   PROGRAM SUBPAGE — hero + full description + what-you-get + FAQ
   ══════════════════════════════════════════════════════════════════════ */
.program-hero {
  padding: var(--space-lg) var(--space-sm) var(--space-xl);
  text-align: center;
  position: relative;
}
.program-hero-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.program-hero-photo {
  margin: 0;
  display: flex;
  justify-content: center;
}
.program-hero-photo img {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-faint);
}
.program-hero-body { text-align: start; }
.program-hero-kicker {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-en);
  margin: 0 0 var(--space-sm);
}
.program-hero-title {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
}
.program-hero-sub {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 var(--space-md);
}
.program-hero-desc {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0 var(--space-md);
}
.program-meta-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 var(--space-md);
}
.program-meta-price {
  color: var(--accent);
  font-weight: 800;
  font-family: var(--font-en);
  font-size: 1.8rem;
  letter-spacing: -0.01em;
}
.program-meta-duration {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-en);
}
html[lang="ar"] .program-meta-duration { font-family: var(--font-ar); letter-spacing: 0; }

/* Full description — prose block below hero */
.program-description {
  padding: var(--space-xl) var(--space-sm);
  max-width: 820px;
  margin: 0 auto;
  position: relative;
}
.program-description::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}
.program-description p {
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.9;
  margin: 0 auto var(--space-md);
}
.program-description p:last-child { margin-bottom: 0; }

/* What-you-get grid */
.benefits-section {
  padding: var(--space-xl) var(--space-sm);
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.benefits-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}
.benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.benefit-item {
  background: var(--card);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: border-color var(--t), transform var(--t);
}
.benefit-item:hover {
  border-color: var(--accent-soft);
  transform: translateY(-2px);
}
.benefit-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-softer);
  color: var(--accent);
  border-radius: var(--radius-sm);
}
.benefit-icon svg { width: 22px; height: 22px; }
.benefit-text {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.7;
  padding-top: 10px;
  font-weight: 600;
}

/* FAQ accordion — native <details> */
.faq-section {
  padding: var(--space-xl) var(--space-sm);
  max-width: 820px;
  margin: 0 auto;
  position: relative;
}
.faq-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--t);
}
.faq-item[open] { border-color: var(--accent-soft); }
.faq-item summary {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--text);
  font-size: 0.98rem;
  min-height: var(--tap);
  transition: color var(--t);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--font-en);
  flex: 0 0 auto;
  line-height: 1;
  transition: transform var(--t);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--accent); }
.faq-answer {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--text-dim);
  line-height: 1.85;
  font-size: 0.96rem;
}

/* Subpage final CTA — mirrors homepage .final-cta but scoped */
.program-final-cta {
  background: var(--bg-2);
  padding: var(--space-2xl) var(--space-sm);
  text-align: center;
  border-top: 1px solid var(--border);
  position: relative;
}
.program-final-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.program-final-cta h2 {
  font-size: 1.8rem;
  font-weight: 800;
  max-width: 640px;
  margin: 0 auto var(--space-sm);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.program-final-cta p {
  color: var(--text-dim);
  margin: 0 auto var(--space-lg);
  max-width: 520px;
  font-size: 0.98rem;
  line-height: 1.8;
}

@media (min-width: 768px) {
  .program-hero { padding: var(--space-xl) var(--space-sm) var(--space-2xl); }
  .program-hero-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .program-hero-title { font-size: 2.8rem; }
  .program-hero-sub { font-size: 1.3rem; }
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .program-final-cta h2 { font-size: 2.4rem; }
}


/* ════════════════════════════════════════════════════════════════════
   TRAINER-HERO — mirrors .hero. Immersive full-bleed "Meet the Coach"
   section. Same orientation as .hero (text left, subject right) so the
   brand photos read as one visual language across both sections.
   ════════════════════════════════════════════════════════════════════ */
.trainer-hero {
  position: relative;
  min-height: 85vh;
  min-height: 85svh;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
}
.trainer-hero-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  background: transparent;
}
.trainer-hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.trainer-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(10, 10, 10, 0.85) 0%,
    rgba(10, 10, 10, 0.55) 35%,
    rgba(10, 10, 10, 0.15) 60%,
    rgba(10, 10, 10, 0) 80%
  );
}
.trainer-hero-body {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  right: auto;
  transform: translateY(-50%);
  max-width: min(560px, 90vw);
  padding: clamp(1.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
  margin: 0;
  text-align: start;
}
.trainer-hero-label {
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-en);
  margin: 0 0 var(--space-md);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.trainer-hero-title {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-sm);
}
.trainer-hero-role {
  color: var(--accent);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-md);
  font-family: var(--font-en);
}
html[lang="ar"] .trainer-hero-role { font-family: var(--font-ar); }
.trainer-hero-bio {
  color: var(--text-dim);
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  line-height: 1.7;
  margin: 0 0 var(--space-md);
}
.trainer-hero .trainer-social {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin-top: var(--space-sm);
}
@media (max-width: 720px) {
  .trainer-hero { min-height: 70vh; min-height: 70svh; }
  .trainer-hero::after {
    background: linear-gradient(
      to right,
      rgba(10, 10, 10, 0.92) 0%,
      rgba(10, 10, 10, 0.70) 60%,
      rgba(10, 10, 10, 0.35) 100%
    );
  }
}