/* ==========================================================
   VSHVDOW · styles.css
   Design tokens live at the top. Layout/section rules follow.
   RTL (Arabic) is handled mostly by CSS logical properties, so
   most rules do not need a separate [dir="rtl"] override.
   ========================================================== */

/* ---------- Fonts ---------- */
/* Aileron (free, CC0) is hosted with the site and used for numbers only. */
@font-face { font-family: 'Aileron'; src: url('aileron-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aileron'; src: url('aileron-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* "VSH Numerals" only contains the digits 0 to 9 (unicode-range), so putting it
   first in the font stack draws every number on the site in Aileron while
   all the letters stay Raleway (or Cairo in Arabic). */
@font-face { font-family: 'VSH Numerals'; src: url('aileron-300.woff2') format('woff2'); font-weight: 1 350; font-style: normal; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: 'VSH Numerals'; src: url('aileron-400.woff2') format('woff2'); font-weight: 351 1000; font-style: normal; font-display: swap; unicode-range: U+0030-0039; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body { min-height: 100%; }
body { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, h4, strong, b, th { font-weight: var(--w-heavy); }

/* ---------- Design tokens ---------- */
:root {
  --c-void:  #0a0a0a;
  --c-ink:   #1a1a1a;
  --c-iron:  #4a4a4a;
  --c-mist:  #8a8a8a;
  --c-fog:   #d6d6d6;
  --c-paper: #fafafa;

  --bg: var(--c-paper);
  --bg-raised: #ffffff;
  --text: var(--c-void);
  --text-muted: var(--c-iron);
  --text-faint: var(--c-mist);
  --border: #dcdcdc;
  --invert-bg: var(--c-void);
  --invert-text: var(--c-paper);
  --invert-muted: #b5b5b5;
  --scrim: rgba(10,10,10,.5);
  color-scheme: light;

  --font-display: 'VSH Numerals', 'Raleway', sans-serif;
  --font-body: 'VSH Numerals', 'Raleway', sans-serif;
  --font-mono: 'Aileron', 'Raleway', sans-serif; /* big numbers: pyramid layers, prices, product numbers */
  --w-heavy: 500; /* headlines and titles use Medium, never bold */
  --w-light: 300; /* the logo, the hero line and big numbers use Light */
  --w-text: 500;

  --container: 1180px;
  --radius: 0;
  --ease: cubic-bezier(.22,.61,.36,1);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  --text-xs: .78rem; --text-sm: .9rem; --text-base: 1rem; --text-lg: 1.15rem;
  --text-xl: 1.4rem;  --text-2xl: 1.75rem; --text-3xl: 2.25rem;
  --text-4xl: 3rem;   --text-hero: clamp(2.4rem, 6.5vw, 5rem);
}

html[lang="ar"] {
  --font-display: 'VSH Numerals', 'Cairo', sans-serif;
  --font-body: 'VSH Numerals', 'Cairo', sans-serif;
}

html[data-theme="dark"] {
  --bg: var(--c-void);
  --bg-raised: #141414;
  --text: var(--c-paper);
  --text-muted: #b5b5b5;
  --text-faint: #6b6b6b;
  --border: #262626;
  --invert-bg: var(--c-paper);
  --invert-text: var(--c-void);
  --invert-muted: #575757;
  --scrim: rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ---------- Base ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--w-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.section-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
main { display: flow-root; } /* contains .hero's negative margin so it can't collapse through to <body> and break the sticky header */
section { padding-block: clamp(5.5rem, 9vw, 8.5rem); }
section[id] { scroll-margin-top: 84px; }
@media (max-width: 760px) { section { padding-block: 4.5rem; } }

h2 { font-family: var(--font-display); font-weight: var(--w-heavy); font-size: var(--text-3xl); line-height: 1.15; letter-spacing: -.2px; }
html[lang="ar"] h2 { letter-spacing: 0; }
/* balanced headlines and no lonely last words in paragraphs */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.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; }
::selection { background: var(--text); color: var(--bg); }
.section-sub { max-width: 46ch; color: var(--text-muted); font-size: var(--text-lg); margin-top: var(--sp-3); }

.skip-link { position: absolute; inset-inline-start: -999px; top: 0; background: var(--text); color: var(--bg); padding: .8em 1.2em; z-index: 999; }
.skip-link:focus { inset-inline-start: var(--sp-3); top: var(--sp-3); }

:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; }
/* Moving between the home page and the Mission page cross-fades instead of
   flashing white (browsers that support it). The header is identical on both
   pages, so it holds still through the fade. It must NOT get its own
   view-transition-name: that turns it into a "backdrop root" and switches
   off the blur behind it. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

.icon { width: 20px; height: 20px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .95em 1.7em; font-family: var(--font-body); font-weight: 500; font-size: var(--text-base);
  text-decoration: none; border: 1.5px solid var(--text); border-radius: var(--radius);
  transition: transform .15s var(--ease), background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--text); }
/* Outline: transparent fill, only the edge (and text) coloured */
.btn-outline { background: transparent; color: var(--text); border-color: currentColor; }
.btn-outline:hover { background: var(--text); color: var(--bg); border-color: var(--text); transform: translateY(-2px); }
.btn-ghost:hover { background: var(--text); color: var(--bg); }
.btn-small { padding: .55em 1.2em; font-size: var(--text-sm); }
.btn[disabled], .btn.is-waitlist { opacity: .55; cursor: default; }
.btn.is-waitlist:hover { transform: none; }

/* ---------- Header ---------- */
/* Transparent at the very top (sits over the hero video). Once the page
   scrolls, script.js adds .scrolled and a soft fog fades in behind the
   header: a light blur that is strongest at the very top and dissolves
   downwards (masked), so there is no hard edge or frame line. The fog lives
   on ::before (not the header itself) so the fixed mobile menu inside the
   header still positions against the viewport. .on-dark / .on-light (set by
   script.js over dark photo bands) flip the text colour and the fog tint. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
}
.site-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 45%, transparent) 0%, color-mix(in srgb, var(--bg) 18%, transparent) 60%, transparent 100%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.site-header.scrolled::before { opacity: 1; }
/* same strength over the dark photo bands, just a darker tint so white text stays readable */
.site-header.on-dark::before { background: linear-gradient(180deg, rgba(10,10,10,.3) 0%, rgba(10,10,10,.1) 60%, rgba(10,10,10,0) 100%); }
.site-header.on-light::before { background: linear-gradient(180deg, rgba(250,250,250,.5) 0%, rgba(250,250,250,.2) 60%, rgba(250,250,250,0) 100%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 85%, transparent) 0%, transparent 100%); }
}
.header-inner { position: relative; z-index: 1; }
.header-inner .wordmark::after { display: none; }
.header-inner .pill-btn { border-color: transparent; }
.wordmark, .pill-btn, .icon-btn { transition: color .2s var(--ease), opacity .15s var(--ease); }

.site-header.on-dark .wordmark,
.site-header.on-dark .pill-btn,
.site-header.on-dark .icon-btn { color: #fff; }
.site-header.on-light .wordmark,
.site-header.on-light .pill-btn,
.site-header.on-light .icon-btn { color: var(--c-void); }
@media (min-width: 1141px) {
  /* on smaller screens the nav links live inside the solid dropdown panel, so they keep theme colours */
  .site-header.on-dark .main-nav a { color: #fff; }
  .site-header.on-light .main-nav a { color: var(--c-void); }
}
.site-header .main-nav a:hover,
.site-header .pill-btn:hover,
.site-header .icon-btn:hover { opacity: .65; background: none; }
.site-header .main-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.header-inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5);
  height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--sp-5);
}
.wordmark {
  display: block; line-height: 0; text-decoration: none; color: var(--text); position: relative;
  grid-column: 2; justify-self: center;
}
/* the header logo is outlined SVG (the Canva logo: Raleway Bold, letter spacing -130), so it looks identical everywhere and follows the text colour */
.wordmark svg { display: block; height: 18px; width: auto; }
@media (max-width: 860px) { .wordmark svg { height: 15px; } }
.main-nav { display: flex; align-items: center; gap: 28px; grid-column: 1; justify-self: start; }
.main-nav a { text-decoration: none; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; transition: color .15s var(--ease); }
.main-nav a:hover { color: var(--text); }
.main-nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.header-actions { display: flex; align-items: center; gap: var(--sp-3); grid-column: 3; justify-self: end; }
.pill-btn {
  border: 1px solid var(--border); border-radius: 999px; padding: .4em 1em;
  font-size: var(--text-xs); font-weight: 500; letter-spacing: .3px; color: var(--text-muted);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.pill-btn:hover { border-color: var(--text); color: var(--text); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--text-muted); border-radius: 999px; }
.icon-btn:hover { color: var(--text); background: var(--border); }
.icon-moon { display: none; }
html[data-theme="dark"] .icon-sun { display: none; }
html[data-theme="dark"] .icon-moon { display: block; }

.nav-toggle { display: none; }
.burger { width: 20px; height: 14px; position: relative; display: block; }
.burger span { position: absolute; inset-inline-start: 0; width: 100%; height: 1.6px; background: currentColor; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 6px; }
.burger span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-utility { display: none; }
@media (max-width: 1140px) {
  .header-inner { display: flex; justify-content: flex-end; align-items: center; position: relative; }
  .wordmark { position: absolute; left: 50%; transform: translateX(-50%); }
  .main-nav {
    position: fixed; inset: 68px 0 auto 0; background: var(--bg); border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-4) var(--sp-5) var(--sp-6);
    transform: translateY(-6px); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease);
  }
  .main-nav.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .main-nav a { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); font-size: var(--text-lg); }
  .nav-toggle { display: flex; }
  #langToggle, #themeToggle { display: none; }
  .nav-utility { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
  .nav-utility-btn {
    flex: 1; border: 1px solid var(--border); border-radius: var(--radius); padding: .8em;
    font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); text-align: center;
  }
}

/* ---------- Hero ---------- */
/* Full-bleed black & white video, graded high-contrast with a vignette
   and a little film grain. The text block sits in the exact centre of the
   whole video frame (the video runs up behind the header too). */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 540px; margin-top: -68px;
  display: grid; place-items: center; overflow: hidden; background: var(--c-void); padding: 0;
}
.hero-media { position: absolute; inset: 0; }
.hero-video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block;
  filter: grayscale(1) contrast(1.22) brightness(.86);
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 50%, rgba(10,10,10,0) 0%, rgba(10,10,10,.28) 62%, rgba(10,10,10,.78) 100%),
    linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 70%, rgba(10,10,10,.5) 100%),
    rgba(10,10,10,.2);
}
/* one fine film grain, shared by the hero and the product films so they read as one reel */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-grain {
  position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; pointer-events: none;
  background-image: var(--grain);
}
.hero-content {
  position: relative; z-index: 1; width: 100%; max-width: var(--container);
  padding: var(--sp-6) var(--sp-5); margin-inline: auto; color: #fff;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero-headline { font-family: var(--font-display); font-weight: var(--w-heavy); margin: 0; }
.hero-headline span { display: block; }
.hero-line1 {
  font-size: clamp(1.3rem, 2.3vw, 1.95rem); line-height: 1.1; letter-spacing: -.005em; text-transform: uppercase;
  text-wrap: balance; max-width: 10.5em; margin-inline: auto; /* two lines, like the reference */
}
.hero-line2 {
  margin-top: var(--sp-4); font-family: var(--font-body); font-size: clamp(.68rem, .75vw, .76rem);
  letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.8); font-weight: 400;
}
html[lang="ar"] .hero-line1 { letter-spacing: 0; line-height: 1.3; text-transform: none; font-family: 'Cairo', sans-serif; }
/* rectangular outline button, like the reference: wide, square corners, small spaced caps */
.hero-cta {
  margin-top: var(--sp-6); display: inline-flex; align-items: center; justify-content: center;
  padding: 1.25em 2em; box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.78); border-radius: 0; background: transparent; color: #fff;
  font-family: var(--font-body); font-size: .7rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.hero-cta:hover, .hero-cta:focus-visible { background: #fff; color: var(--c-void); border-color: #fff; }
html[lang="ar"] .hero-cta { letter-spacing: 0; font-size: .85rem; }
/* a thin line at the bottom of the hero with a slow light running down it */
.scroll-cue { position: absolute; left: 50%; bottom: clamp(18px, 4vh, 36px); transform: translateX(-50%); z-index: 1; display: block; width: 24px; height: 56px; }
.scroll-cue span { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: rgba(255,255,255,.22); overflow: hidden; }
.scroll-cue span::after { content: ""; position: absolute; left: 0; top: -45%; width: 1px; height: 45%; background: #fff; animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { 0% { top: -45%; } 65%, 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span::after { animation: none; top: 0; } }

.reveal { opacity: 0; filter: blur(10px); animation: reveal .9s var(--ease) forwards; }
.reveal-delay { animation-delay: .16s; }
.reveal-delay-2 { animation-delay: .32s; }
@keyframes reveal { to { opacity: 1; filter: blur(0); } }

/* Scroll reveal (script.js tags elements with .rv and adds .in as they enter
   the screen). Only active when JS runs (html.js), so nothing is ever hidden
   without it. 'backwards' fill means hover transforms work after it plays. */
html.js .rv { opacity: 0; }
html.js .rv.in { opacity: 1; animation: rise .9s var(--ease) backwards; animation-delay: var(--d, 0s); }
html.js .layer.rv.in { animation-name: build; animation-duration: .75s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes build { from { opacity: 0; transform: translateY(18px) scaleX(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1; } html.js .rv.in { animation: none; } }

/* ---------- Pyramid ---------- */
.pyramid { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: var(--sp-8); }
/* each layer is a hairline that widens towards the base, so the pyramid is drawn with lines and space */
.layer {
  width: calc(40% + var(--step, 4) * 15%); max-width: 760px; background: transparent; border: 0; border-top: 1px solid var(--border);
  padding: var(--sp-5) var(--sp-4); text-align: center;
}
.layer:last-child { border-bottom: 1px solid var(--border); }
.layer-num { transition: color .35s var(--ease); }
.layer:hover .layer-num { color: var(--text); }
.layer-num { font-family: var(--font-mono); font-weight: 300; font-size: clamp(1.7rem, 3.6vw, 2.4rem); color: var(--text-faint); display: block; margin-bottom: 6px; }
.layer-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--w-heavy); }
.layer-detail { font-size: var(--text-sm); color: var(--text-muted); margin-top: 4px; }
@media (max-width: 640px) { .layer { width: calc(70% + var(--step, 4) * 7.5%); padding: var(--sp-4) var(--sp-2); } .layer-name { font-size: 1.2rem; } }

/* ---------- Band (mid-page statement) ---------- */
.band { position: relative; height: 56vh; min-height: 360px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; }
/* photo bands melt into the page at the top and bottom instead of ending on a hard edge */
.band::after, .contact-section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 24%, transparent 76%, var(--bg) 100%);
}
.band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-scrim { position: absolute; inset: 0; background: var(--scrim); }
.band-line { position: relative; z-index: 1; color: #fff; font-family: var(--font-display); font-weight: var(--w-heavy); font-size: clamp(.85rem, 1.4vw, 1.1rem); text-align: center; padding-inline: var(--sp-5); letter-spacing: .42em; text-transform: uppercase; }
html[lang="ar"] .band-line { letter-spacing: 0; font-size: clamp(1.15rem, 2.2vw, 1.6rem); }

/* ---------- Bundles ---------- */
.pricing-note { max-width: 62ch; color: var(--text-muted); margin-top: var(--sp-5); padding-inline-start: var(--sp-4); border-inline-start: 1px solid var(--border); font-size: var(--text-sm); line-height: 1.7; }
.bundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-7); align-items: stretch; }
@media (max-width: 940px) { .bundle-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

.bundle-card { display: flex; flex-direction: column; gap: var(--sp-5); background: var(--bg-raised); border: 1px solid var(--border); padding: var(--sp-7) var(--sp-6); transition: transform .45s var(--ease), border-color .3s var(--ease), box-shadow .45s var(--ease); }
.bundle-card:hover { transform: translateY(-6px); border-color: var(--text-faint); box-shadow: 0 26px 48px -32px rgba(0,0,0,.45); }
.bundle-card.featured:hover { border-color: var(--invert-bg); }
.bundle-card.featured { background: var(--invert-bg); color: var(--invert-text); border-color: var(--invert-bg); }
.bundle-card.featured .bundle-list-title { color: var(--invert-muted); }
.bundle-card.featured .bundle-price small,
.bundle-card.featured .bundle-price .egp,
.bundle-card.featured .bundle-badge,
.bundle-card.featured .bundle-minimum,
.bundle-card.featured .spots-label { color: var(--invert-muted); }
.bundle-card.featured .btn-primary.is-waitlist { opacity: .6; }

.bundle-badge { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); letter-spacing: .3px; color: var(--text-muted); }
.bundle-name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--w-heavy); }
.bundle-price { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 500; margin-top: var(--sp-1); }
.bundle-price small { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--text-muted); }
.bundle-price .egp { display: block; font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; margin-top: 2px; }
.bundle-minimum { font-size: var(--text-xs); color: var(--text-faint); }
.spots-row { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); }
.spots-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text); flex: none; }
.bundle-card.featured .spots-dot { background: var(--invert-text); }
.spots-row.is-full .spots-dot { background: var(--text-faint); }

.bundle-list-title { font-size: var(--text-xs); font-weight: 500; text-transform: none; color: var(--text-faint); margin-top: var(--sp-2); }
.bundle-list { display: flex; flex-direction: column; gap: 8px; margin-top: var(--sp-2); }
.bundle-list li { font-size: var(--text-sm); line-height: 1.45; }
.bundle-best { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.bundle-card.featured .bundle-best { border-color: rgba(250,249,247,.18); }
.bundle-best-list { display: block; margin-top: var(--sp-2); font-size: var(--text-xs); line-height: 1.8; color: var(--text-muted); }
.bundle-best-list li { display: inline; }
.bundle-best-list li + li::before { content: " · "; }
.bundle-card.featured .bundle-best-list { color: var(--invert-muted); }
/* join buttons: the same thin, square outline as the hero button; they fill on hover */
.bundle-card .btn {
  margin-top: var(--sp-3); width: 100%; padding: 1.25em 1.5em; background: transparent; color: var(--text);
  border: 1px solid var(--text); font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.bundle-card .btn:hover { transform: none; }
.bundle-card .btn:not(.is-waitlist):hover { background: var(--text); color: var(--bg); }
.bundle-card.featured .btn { color: var(--invert-text); border-color: var(--invert-text); background: transparent; }
.bundle-card.featured .btn:not(.is-waitlist):hover { background: var(--invert-text); color: var(--invert-bg); }
html[lang="ar"] .bundle-card .btn { letter-spacing: 0; font-size: .9rem; }
.fx-note { font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--sp-6); }

/* ---------- Products ---------- */
/* A calm centred title (the crescent, "Products", one line), then the films
   as a reel, sized like Opus's training principle cards: tall 3:4 cards,
   3.3 across on computers, 1.7 on tablets, 1.2 on phones. The reel starts on
   the same line as the text above it and runs off the right edge (the left
   edge in Arabic), so the next card always peeks in. It snaps card by card,
   swipes on phones and trackpads, drags with a mouse (script.js), and a
   hairline underneath fills as you move through it. */
.products-section { overflow-x: clip; padding-top: clamp(3.5rem, 6vw, 5.5rem); }
.products-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.products-head .section-sub { margin-inline: auto; }
.products-mark { width: 104px; height: auto; margin-bottom: var(--sp-5); }
html[data-theme="dark"] .products-mark { filter: invert(1); }
@media (max-width: 760px) { .products-mark { width: 84px; margin-bottom: var(--sp-4); } }

.product-rail {
  /* the column the cards are measured against, and where it starts */
  --gap: 14px;
  --gut: var(--sp-5);
  --colw: min(calc(100vw - var(--gut) * 2), calc(var(--container) - var(--gut) * 2));
  --inset: max(var(--gut), calc((100vw - var(--container)) / 2 + var(--gut)));
  --per: 1.2;
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
  margin-inline: calc(50% - 50vw);
  padding-inline-start: var(--inset);
  scroll-padding-inline-start: var(--inset);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
}
@media (min-width: 641px) { .product-rail { --per: 1.7; } }
@media (min-width: 990px) { .product-rail { --per: 3.3; } }
.product-rail::-webkit-scrollbar { display: none; }
.product-rail:focus-visible { outline: none; }
.product-rail:focus-visible .product-card { outline: 1px solid var(--text); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .product-rail.is-scrollable { cursor: grab; }
}
/* while a mouse drags (or settles after one), snapping waits so the row follows the hand */
.product-rail.is-dragging, .product-rail.is-settling { scroll-snap-type: none; scroll-behavior: auto; }
.product-rail.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.product-track { display: flex; gap: var(--gap); width: max-content; }
/* a spacer at the end, so the last card can line up with the right edge of the text */
.product-track::after { content: ""; flex: 0 0 calc(var(--inset) - var(--gap)); }

.product-card {
  flex: 0 0 calc((var(--colw) - (var(--per) - 1) * var(--gap)) / var(--per));
  aspect-ratio: 3 / 4; max-height: 730px;
  scroll-snap-align: start; position: relative; overflow: hidden; isolation: isolate;
  background: #141414; color: #fff; pointer-events: none;
}
/* The still (the film's own first frame) fills the card; the film fades in
   over it once it's playing, so the switch can't be seen. Both are already
   graded, so no filters here. */
.product-media { position: absolute; inset: 0; overflow: hidden; }
.product-still, .product-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.product-video { opacity: 0; transition: opacity 1.2s var(--ease); }
.product-video.is-playing { opacity: 1; }
/* the four films wake one after another, a beat apart */
.product-card:nth-child(2) .product-video { transition-delay: .15s; }
.product-card:nth-child(3) .product-video { transition-delay: .3s; }
.product-card:nth-child(4) .product-video { transition-delay: .45s; }
.product-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .12; mix-blend-mode: overlay; background-image: var(--grain);
}
/* no frame: just a soft shade at the top for the crescent and a deeper one under the words */
.product-overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(18px, 1.7vw, 24px);
  background: linear-gradient(180deg, rgba(10,10,10,.3) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 46%, rgba(10,10,10,.66) 100%);
}
.product-top { display: flex; justify-content: flex-end; }
.product-mark { width: 44px; height: auto; filter: invert(1); opacity: .9; }
.product-num { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-weight: 400; font-size: 1.05rem; letter-spacing: .08em; }
.product-title { font-family: var(--font-display); font-weight: var(--w-heavy); font-size: clamp(1.2rem, 1.45vw, 1.35rem); line-height: 1.14; letter-spacing: -.2px; }
html[lang="ar"] .product-title { letter-spacing: 0; }
.product-line { margin-top: 7px; font-size: .875rem; line-height: 1.5; color: rgba(255,255,255,.78); max-width: 30ch; }

/* the hairline: the share of the row you've seen so far */
.product-progress { position: relative; height: 1px; margin-top: var(--sp-6); background: var(--border); overflow: hidden; }
.product-progress[hidden] { display: none; }
.product-progress span { position: absolute; inset: 0; background: var(--text); transform-origin: left center; transform: scaleX(var(--seen, 0)); transition: transform .35s var(--ease); }
html[dir="rtl"] .product-progress span { transform-origin: right center; }

/* ---------- About / Results ---------- */
.about-grid, .results-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--sp-9); align-items: center; }
@media (max-width: 820px) { .about-grid, .results-grid { grid-template-columns: 1fr; gap: var(--sp-6); } .about-media, .results-media { max-width: 320px; justify-self: start; } }
.about-media, .results-media { max-width: 380px; width: 100%; justify-self: start; }
.about-media img, .results-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
/* Results mirrors About (photo on the other side) and sits closer to it,
   so the coach story and the proof read as one continuous chapter */
.results-section { padding-top: 0; }
@media (min-width: 821px) {
  .results-grid { grid-template-columns: 1.2fr .8fr; }
  .results-media { order: 2; justify-self: end; }
}
.results-media img { aspect-ratio: 4/5; }
.about-body { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); color: var(--text-muted); font-size: var(--text-base); line-height: 1.7; max-width: 54ch; }
.about-body p:first-child { color: var(--text); font-size: var(--text-lg); line-height: 1.6; }
.results-copy p { margin-top: var(--sp-4); color: var(--text-muted); font-size: var(--text-base); line-height: 1.7; max-width: 48ch; }

.text-link {
  display: inline-block; margin-top: var(--sp-6); font-size: var(--text-sm); color: var(--text); text-decoration: none;
  letter-spacing: .02em; padding-bottom: 3px; border-bottom: 1px solid var(--text-faint); transition: border-color .3s var(--ease);
}
.text-link:hover, .text-link:focus-visible { border-color: var(--text); }

/* ---------- Contact ---------- */
.contact-section { position: relative; padding-block: clamp(8rem, 14vw, 11rem); overflow: hidden; }
.contact-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-scrim { position: absolute; inset: 0; background: var(--scrim); }
.contact-inner { position: relative; z-index: 1; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; }
.contact-inner h2 { font-size: clamp(2rem, 4.2vw, 2.8rem); }
.contact-inner p { max-width: 50ch; color: rgba(255,255,255,.82); margin-top: var(--sp-4); font-size: var(--text-base); line-height: 1.7; }
.contact-actions { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-7); flex-wrap: wrap; justify-content: center; }
.contact-actions { flex-direction: column; gap: var(--sp-5); }
.contact-section .hero-cta { margin-top: 0; }
.contact-email { color: rgba(255,255,255,.82); font-size: var(--text-sm); letter-spacing: .04em; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.contact-email:hover { color: #fff; border-color: #fff; }

/* ---------- Join the Shadow (signup) ---------- */
.signup-section { padding-block: clamp(5rem, 9vw, 8rem) clamp(6rem, 11vw, 9.5rem); }
.signup-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.signup-inner h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.signup-sub { margin-top: var(--sp-4); max-width: 44ch; color: var(--text-muted); font-size: var(--text-base); line-height: 1.7; }
.signup-form { position: relative; margin-top: var(--sp-7); width: 100%; max-width: 600px; display: flex; border: 1px solid var(--border); transition: border-color .3s var(--ease); }
.signup-form:focus-within { border-color: var(--text); }
.signup-input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; padding: 1.3em 1.4em; font: inherit; font-size: var(--text-base); color: var(--text); }
.signup-input:focus, .signup-input:focus-visible { outline: none; }
.signup-input::placeholder { color: var(--text-faint); }
.signup-input:-webkit-autofill,
.signup-input:-webkit-autofill:hover,
.signup-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--bg) inset; box-shadow: 0 0 0 100px var(--bg) inset;
  transition: background-color 9999s ease 0s;
}
.signup-btn { flex: none; border-inline-start: 1px solid var(--border); padding: 0 2.6em; font-size: .72rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--text); transition: background .3s var(--ease), color .3s var(--ease); }
.signup-btn:hover, .signup-btn:focus-visible { background: var(--text); color: var(--bg); outline: none; }
.signup-btn:disabled { opacity: .6; cursor: default; background: transparent; color: var(--text); }
html[lang="ar"] .signup-btn { letter-spacing: 0; font-size: .9rem; }
.signup-hp { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.signup-status { min-height: 1.7em; max-width: 52ch; margin-top: var(--sp-4); font-size: var(--text-sm); line-height: 1.6; color: var(--text-muted); transition: opacity .3s var(--ease); }
.signup-status[data-state="error"] { color: var(--text); }
@media (max-width: 520px) { .signup-btn { padding: 0 1.5em; } .signup-input { padding: 1.15em 1.1em; } }

/* ---------- Mission page ---------- */
/* Hero: the foggy photo (sky extended above the athlete) runs up behind the
   header. It stays light in both themes, so its text is always black, and
   its bottom melts into the page colour. */
.mission-hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; max-height: 1100px; margin-top: -68px;
  overflow: hidden; background: #cfcfcf; color: var(--c-void); padding: 0;
  display: flex; justify-content: center; align-items: flex-start;
}
.mission-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 57% 38%; }
.mission-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 24%; pointer-events: none; background: linear-gradient(180deg, rgba(250,250,250,0) 0%, rgba(250,250,250,.35) 40%, rgba(250,250,250,.8) 75%, var(--bg) 100%); }
/* in dark mode the fog slowly sinks into the night: a longer, eased fade so there's no horizon line */
html[data-theme="dark"] .mission-hero::after {
  height: 48%;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.05) 18%, rgba(10,10,10,.18) 36%, rgba(10,10,10,.42) 56%, rgba(10,10,10,.72) 76%, rgba(10,10,10,.92) 90%, #0a0a0a 100%);
}
.mission-hero-content {
  position: relative; z-index: 1; width: 100%; max-width: var(--container);
  padding: clamp(150px, 25vh, 270px) var(--sp-5) 0; display: flex; flex-direction: column; align-items: center; text-align: center;
}
.mission-kicker { font-size: .62rem; font-weight: 500; letter-spacing: .42em; padding-inline-start: .42em; text-transform: uppercase; color: rgba(10,10,10,.6); }
.mission-title { margin-top: var(--sp-5); font-family: var(--font-display); font-size: clamp(2.1rem, 4.2vw, 3.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.015em; }
.mission-sub { margin-top: var(--sp-4); font-size: clamp(.92rem, 1.15vw, 1.05rem); color: rgba(10,10,10,.7); }
html[lang="ar"] .mission-title { letter-spacing: 0; line-height: 1.35; }

/* The statement: one calm centred column with a lot of air, like a letter */
.mission-section { padding-block: clamp(5rem, 9vw, 8rem) clamp(4rem, 8vw, 6.5rem); }
.mission-section + .signup-section { padding-top: clamp(4rem, 8vw, 6.5rem); }
.mission-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mission-lead, .mission-line, .mission-statement { text-wrap: balance; }
.mission-lead { max-width: 23em; font-family: var(--font-display); font-size: clamp(1.4rem, 2.3vw, 1.95rem); line-height: 1.32; letter-spacing: -.005em; }
.mission-body, .mission-note { max-width: 33em; font-size: clamp(.95rem, 1.05vw, 1.03rem); line-height: 1.95; }
.mission-body { margin-top: clamp(3rem, 6vw, 4.5rem); }
.mission-line { margin-top: clamp(3rem, 6vw, 4.5rem); font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.3; }
.mission-goal { margin-top: var(--sp-5); max-width: 31em; font-size: var(--text-sm); line-height: 1.85; color: var(--text-muted); }
/* the coach's own words, set apart by a short hairline */
.mission-note { position: relative; margin-top: clamp(4rem, 8vw, 6rem); padding-top: clamp(3rem, 6vw, 4.5rem); color: var(--text-muted); }
.mission-note::before { content: ""; position: absolute; top: 0; left: 50%; width: 40px; height: 1px; background: var(--text-faint); transform: translateX(-50%); }
.mission-statement { margin-top: clamp(5rem, 11vw, 9rem); max-width: 11em; font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.06; letter-spacing: -.02em; }
html[lang="ar"] .mission-lead, html[lang="ar"] .mission-statement { letter-spacing: 0; line-height: 1.4; }
.mission-sign { margin-top: var(--sp-6); font-size: .66rem; font-weight: 500; letter-spacing: .5em; padding-inline-start: .5em; color: var(--text-muted); }
.mission-cta { margin-top: clamp(3rem, 6vw, 4.5rem); }
/* words arrive softly out of a blur as you read down */
html.js .mission-inner > .rv.in { animation-name: rise-soft; animation-duration: 1.1s; }
@keyframes rise-soft { from { opacity: 0; filter: blur(6px); transform: translateY(16px); } to { opacity: 1; filter: none; transform: none; } }

/* thin square outline button on the page colour (same family as the hero button) */
.line-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 1.25em 2em;
  border: 1px solid var(--text); background: transparent; color: var(--text);
  font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.line-btn:hover, .line-btn:focus-visible { background: var(--text); color: var(--bg); }
html[lang="ar"] .line-btn { letter-spacing: 0; font-size: .85rem; }
@media (max-width: 640px) {
  .mission-hero { height: 82svh; min-height: 520px; }
  .mission-hero-content { padding-top: clamp(130px, 22vh, 200px); }
}

/* ---------- Footer ---------- */
/* one slim row: name on the left, socials in the middle, rights on the right */
.site-footer { border-top: 1px solid var(--border); }
.footer-inner {
  max-width: var(--container); margin-inline: auto; padding: var(--sp-6) var(--sp-5);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--sp-5);
}
.footer-brand { justify-self: start; color: var(--text); font-size: .7rem; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; white-space: nowrap; }
.footer-social { justify-self: center; display: flex; gap: var(--sp-4); }
.footer-social a { display: inline-flex; color: var(--text-muted); transition: color .2s var(--ease); }
.footer-social a:hover { color: var(--text); }
.footer-social .icon { width: 18px; height: 18px; }
.footer-rights { justify-self: end; color: var(--text-faint); font-size: var(--text-xs); white-space: nowrap; }
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr auto; row-gap: var(--sp-3); padding-block: var(--sp-5); }
  .footer-social { justify-self: end; }
  .footer-rights { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; inset-inline: 0; bottom: var(--sp-6); margin-inline: auto; width: max-content; max-width: 90vw;
  background: var(--text); color: var(--bg); padding: .8em 1.4em; border-radius: var(--radius);
  font-size: var(--text-sm); z-index: 200; opacity: 0; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease); pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }