/* =============================================================================
   Arpeggio — Service Pages stylesheet (RTL Arabic)
   Shared chrome + components for /services/* pages.
   Matches the Arpeggio design system EXACTLY (tokens, type scale, motion).
   - NO backdrop-filter (frosted header emulated with solid rgba(0,0,0,.85))
   - will-change only on the animated reveal layer
   - Arabic: letter-spacing NORMAL (negative tracking breaks Arabic shaping)
   - Latin / numerals / "Arpeggio" wordmark keep Inter Display + -0.04em
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. :root tokens (palette + fonts + motion + layout)
   --------------------------------------------------------------------------- */
:root {
  /* ---- Original Framer tokens (kept for parity with existing markup) ---- */
  --token-3238911e-9cd4-40ad-8e5a-3b7215265583: #FFFFFF; /* white */
  --token-fac342c6-08c7-43c1-bf13-0cab3a0cef86: #000000; /* black */
  --token-52da4e30-e37a-4629-92ea-929c1ac3ceb3: #333336; /* default text */
  --token-ee3a8e72-837b-4d5f-91c5-4a829d9a9162: #6F6F75; /* muted text */
  --token-d8014220-2a78-4e07-9390-e464885c7a19: #FF4400; /* brand orange (#f40) */
  --token-f2a325e4-7975-47c7-b249-f75b512aa063: #F6F6F6; /* off-white surface */
  --token-e309f3fd-e019-4571-a428-1d0e34f3ca38: #E6E6E6; /* light border */
  --token-d1ed6fa9-776f-4c8e-9455-c25d9df057af: #C0C0C0; /* silver border */

  /* ---- Semantic palette ---- */
  --color-black:         var(--token-fac342c6-08c7-43c1-bf13-0cab3a0cef86, #000000);
  --color-white:         var(--token-3238911e-9cd4-40ad-8e5a-3b7215265583, #FFFFFF);
  --color-bg:            var(--color-white);
  --color-surface:       var(--token-f2a325e4-7975-47c7-b249-f75b512aa063, #F6F6F6);
  --color-text:          var(--token-52da4e30-e37a-4629-92ea-929c1ac3ceb3, #333336);
  --color-text-strong:   var(--color-black);
  --color-text-muted:    var(--token-ee3a8e72-837b-4d5f-91c5-4a829d9a9162, #6F6F75);
  --color-accent:        var(--token-d8014220-2a78-4e07-9390-e464885c7a19, #FF4400);
  --color-accent-glow:   rgba(255, 77, 0, 0.05);
  --color-border:        var(--token-e309f3fd-e019-4571-a428-1d0e34f3ca38, #E6E6E6);
  --color-border-strong: var(--token-d1ed6fa9-776f-4c8e-9455-c25d9df057af, #C0C0C0);

  /* ---- Dark-section roles ---- */
  --color-dark-bg:       var(--color-black);
  --color-on-dark:       var(--color-white);
  --color-on-dark-display:#F6F6F6;
  --color-on-dark-muted: rgba(255, 255, 255, 0.3);

  /* ---- Fonts ----
     Arabic copy   -> Cairo first, then Inter Display fallback (restored per user request)
     Latin / numerals / wordmark -> Inter Display                              */
  --font-ar:      "Cairo", "Inter Display", "Inter Display Placeholder", sans-serif;
  --font-display: "Inter Display", "Inter Display Placeholder", sans-serif;
  --font-body:    Inter, "Inter Placeholder", sans-serif;

  /* ---- Motion ---- */
  --ease-brand: cubic-bezier(0.44, 0, 0.56, 1);

  /* ---- Layout scale ---- */
  --maxw-page:   1440px;
  --maxw-content:1200px;
  --gutter: 12px;        /* mobile */

  /* ---- Link theming (orange all states; underline on hover only) ---- */
  --framer-link-text-color:        var(--color-accent);
  --framer-link-hover-text-color:  var(--color-accent);
}
@media (min-width: 810px)  { :root { --gutter: 24px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; } }

/* ---------------------------------------------------------------------------
   2. Base / reset
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  /* Arabic default: site font, tracking NORMAL (never negative) */
  font-family: var(--font-ar);
  font-weight: 400;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Latin runs keep Inter Display + the brand tracking */
.ltr,
.wordmark,
.sar { direction: ltr; unicode-bidi: isolate; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent); text-decoration: underline; }

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

.btn-reset {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------------
   3. HEADER (fixed, frosted via solid rgba(0,0,0,.85) — NO backdrop-filter)
      Wordmark stays LTR/orange on the LEFT; nav + CTA flow after it.
   --------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  /* Force a clean LTR chrome regardless of the RTL page */
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 70px;
  padding: 0 var(--gutter);
  background: rgba(0, 0, 0, 0.85);      /* frosted glass, solid (no blur) */
  color: var(--color-white);
}

.site-header__inner {
  width: 100%;
  max-width: var(--maxw-content);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--color-accent); text-decoration: none; }

/* MADA logo — crossfades the EN and AR wordmarks (pure CSS; mirrors the JS
   swap used on the Framer pages). EN defines the box width; AR overlays it. */
.mada-logo { position: relative; display: inline-block; height: 34px; line-height: 0; }
.mada-logo img { height: 100%; width: auto; display: block; }
.mada-logo .mada-logo__ar { position: absolute; left: 0; top: 0; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mada-logo .mada-logo__en { animation: madaEN 11.5s ease-in-out infinite; }
  .mada-logo .mada-logo__ar { animation: madaAR 11.5s ease-in-out infinite; }
}
@keyframes madaEN {
  0%,38%  { opacity: 1; transform: scale(1); }
  50%,88% { opacity: 0; transform: scale(1.05); }
  100%    { opacity: 1; transform: scale(1); }
}
@keyframes madaAR {
  0%,38%  { opacity: 0; transform: scale(1.05); }
  50%,88% { opacity: 1; transform: scale(1); }
  100%    { opacity: 0; transform: scale(1.05); }
}
.site-footer__brand .mada-logo { height: 30px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-link {
  font-family: var(--font-ar);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;        /* Arabic labels: never negative */
  color: var(--color-white);
  text-decoration: none;
  transition: color 0.2s var(--ease-brand);
  white-space: nowrap;
}
.nav-link:hover { color: var(--color-accent); text-decoration: none; }

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-ar);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  text-decoration: none;
  transition: background 0.2s var(--ease-brand), color 0.2s var(--ease-brand);
  white-space: nowrap;
}
.header-cta:hover { background: var(--color-accent); color: var(--color-white); text-decoration: none; }

/* Hide nav on small screens (wordmark + CTA remain) */
@media (max-width: 809.98px) {
  .site-nav { display: none; }
}

/* ---------------------------------------------------------------------------
   4. HERO (dark band) — eyebrow + big display title + subtitle
   --------------------------------------------------------------------------- */
.page-hero {
  background: var(--color-dark-bg);
  color: var(--color-on-dark);
  padding: 160px var(--gutter) 80px;   /* clears the 70px fixed header */
  text-align: center;
}
.page-hero__inner {
  width: 100%;
  max-width: var(--maxw-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.page-hero__eyebrow {
  font-family: var(--font-ar);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--color-accent);
  text-transform: uppercase;
}
.page-hero__title {
  margin: 0;
  font-family: var(--font-ar);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;             /* Arabic title: NORMAL tracking */
  color: var(--color-on-dark-display);
  max-width: 18ch;
}
.page-hero__title .ltr {
  font-family: var(--font-display);
  letter-spacing: -0.04em;            /* Latin sub-label keeps brand tracking */
}
.page-hero__subtitle {
  margin: 0;
  font-family: var(--font-ar);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--color-on-dark);
  max-width: 56ch;
}
@media (min-width: 810px)  { .page-hero { padding: 200px var(--gutter) 100px; } .page-hero__title { font-size: 84px; } }
@media (min-width: 1200px) { .page-hero__title { font-size: 96px; } }

/* ---------------------------------------------------------------------------
   5. SECTION wrapper + eyebrow + section title
   --------------------------------------------------------------------------- */
.section {
  width: 100%;
  max-width: var(--maxw-page);
  margin: 0 auto;
  padding: 60px var(--gutter);
}
.section--surface { background: var(--color-surface); }
@media (min-width: 810px)  { .section { padding: 80px var(--gutter); } }

.section__inner {
  width: 100%;
  max-width: var(--maxw-content);
  margin: 0 auto;
}
.section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;            /* RTL: start = right edge */
  gap: 16px;
  margin-bottom: 48px;
}
.eyebrow {
  font-family: var(--font-ar);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-accent);
}
.section-title {
  margin: 0;
  font-family: var(--font-ar);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;             /* Arabic heading: NORMAL */
  color: var(--color-text-strong);
  max-width: 24ch;
}
@media (min-width: 810px)  { .section-title { font-size: 56px; } }
@media (min-width: 1200px) { .section-title { font-size: 64px; } }

/* ---------------------------------------------------------------------------
   6. PRICING / CARD GRID — responsive auto-fit, gutter 24, capped 1200
   --------------------------------------------------------------------------- */
.grid {
  display: grid;
  width: 100%;
  max-width: var(--maxw-content);
  margin: 0 auto;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 810px) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* ---------------------------------------------------------------------------
   7. SERVICE CARD — white surface, 6px radius, hairline, hover lift + glow
   --------------------------------------------------------------------------- */
.service-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  text-align: start;                  /* RTL-aware */
  transition: transform 0.3s var(--ease-brand),
              box-shadow 0.3s var(--ease-brand),
              border-color 0.3s var(--ease-brand);
  will-change: transform;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-strong);
  /* soft neutral elevation + accent orange glow */
  box-shadow:
    rgba(0,0,0,.18) 0px .301094px .301094px -1.25px,
    rgba(0,0,0,.16) 0px 1.14427px 1.14427px -2.5px,
    rgba(0,0,0,.06) 0px 5px 5px -3.75px,
    rgba(255,77,0,.05) 0px 6.51917px 16.9498px -1.375px,
    rgba(255,77,0,.05) 0px 17.2332px 44.8062px -2.0625px,
    rgba(255,77,0,.05) 0px 54px 140.4px -2.75px;
}

.service-card__name {
  margin: 0;
  font-family: var(--font-ar);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--color-text-strong);
}
@media (min-width: 810px) { .service-card__name { font-size: 24px; } }

.service-card__desc {
  margin: 0;
  font-family: var(--font-ar);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  color: var(--color-text-muted);
  flex: 1;                            /* push price/button to the bottom */
}

/* feature list (optional inside a card) */
.service-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-card__features li {
  position: relative;
  padding-inline-start: 22px;
  font-family: var(--font-ar);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--color-text);
}
.service-card__features li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---- PRICE row ---- */
.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  direction: rtl;                     /* amount, then ر.س */
  font-family: var(--font-display);   /* Latin numerals */
  margin-top: 4px;
}
.price__amount {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
}
.price__currency {
  font-family: var(--font-ar);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--color-text-muted);
}
.price__period {
  font-family: var(--font-ar);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--color-text-muted);
}
/* range / "حسب الباقة" / setup+monthly prices that aren't a single clean number:
   show the full text in the amount slot (smaller, wraps), no separate currency */
.price--text {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-variant-numeric: normal;
}
.price:has(.price--text) { align-items: baseline; }

/* ---- BUY button (an <a> -> /contact, carries data-service + data-price) ---- */
.buy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-ar);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: normal;
  text-decoration: none;
  transition: background 0.2s var(--ease-brand),
              color 0.2s var(--ease-brand);
}
.buy-button:hover {
  background: var(--color-accent);
  color: var(--color-white);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   8. CATEGORY CARD (large landing cards on /services index)
   --------------------------------------------------------------------------- */
.category-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 300px;
  padding: 40px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  text-decoration: none;
  text-align: start;
  transition: transform 0.3s var(--ease-brand),
              box-shadow 0.3s var(--ease-brand),
              border-color 0.3s var(--ease-brand);
  will-change: transform;
}
.category-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-strong);
  text-decoration: none;
  box-shadow:
    rgba(0,0,0,.18) 0px .301094px .301094px -1.25px,
    rgba(0,0,0,.16) 0px 1.14427px 1.14427px -2.5px,
    rgba(0,0,0,.06) 0px 5px 5px -3.75px,
    rgba(255,77,0,.05) 0px 17.2332px 44.8062px -2.0625px,
    rgba(255,77,0,.05) 0px 54px 140.4px -2.75px;
}
.category-card__title {
  margin: 0;
  font-family: var(--font-ar);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--color-text-strong);
}
.category-card__blurb {
  margin: 0;
  font-family: var(--font-ar);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  color: var(--color-text-muted);
}
.category-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ar);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--color-accent);
}
.category-card:hover .category-card__arrow { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   9. FOOTER (compact, on-brand, dark)
   --------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-dark-bg);
  color: var(--color-on-dark);
  padding: 60px var(--gutter) 40px;
}
.site-footer__inner {
  width: 100%;
  max-width: var(--maxw-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer__brand {
  font-family: var(--font-display);
  direction: ltr;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  text-decoration: none;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-nav a {
  font-family: var(--font-ar);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--color-on-dark);
  text-decoration: none;
  transition: color 0.2s var(--ease-brand);
}
.footer-nav a:hover { color: var(--color-accent); text-decoration: none; }
.site-footer__hr {
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  margin: 0;
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-footer__copy {
  font-family: var(--font-ar);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--color-on-dark-muted);
}
.site-footer__social {
  display: flex;
  gap: 20px;
}
.site-footer__social a {
  font-family: var(--font-display);
  direction: ltr;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--color-accent);
  text-decoration: none;
}
.site-footer__social a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   10. SAR currency label helper
   --------------------------------------------------------------------------- */
.sar {
  font-family: var(--font-ar);
  font-weight: 600;
  letter-spacing: normal;
}

/* ---------------------------------------------------------------------------
   11. GSAP reveal hooks — hidden initial state for [data-anim]
        (will-change ONLY on the animated layer; cleared after by GSAP)
   --------------------------------------------------------------------------- */
[data-anim],
[data-anim-group] > * {
  opacity: 0.001;
  transform: translateY(20px);
  will-change: transform, opacity;
}

/* prefers-reduced-motion: render final state, no transition baggage */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim],
  [data-anim-group] > * {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
  .service-card, .category-card { transition: none; }
}