/**
 * Al-Bashayer — "Dar Al-Rashid" Redesign 2026
 *
 * Aesthetic: Deep forest luxury meets Islamic geometric precision.
 * Dark emerald backgrounds · Burnished gold accents · Amiri calligraphy
 * Cormorant Garamond for English · Smooth kinetic animations
 *
 * @package AlBashayer
 */

/* ─── 0. DESIGN TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --dr-bg:         #060D09;
  --dr-bg-2:       #0B1C12;
  --dr-bg-3:       #112518;
  --dr-bg-light:   #F4EDD8;
  --dr-bg-light-2: #EDE4C8;

  /* Gold */
  --dr-gold:       #C8A84B;
  --dr-gold-light: #E2C96A;
  --dr-gold-pale:  #F0DFA0;
  --dr-gold-dim:   rgba(200,168,75,.55);
  --dr-gold-glow:  rgba(200,168,75,.12);
  --dr-gold-glow2: rgba(200,168,75,.06);

  /* Green */
  --dr-green:      #1D5C42;
  --dr-green-bright: #2A7A5F;

  /* Text */
  --dr-text:       #F2EAD6;
  --dr-text-2:     rgba(242,234,214,.65);
  --dr-text-3:     rgba(242,234,214,.35);
  --dr-text-dark:  #1A1208;
  --dr-text-dark-2:#4A3F2A;

  /* Glass */
  --dr-glass:         rgba(255,255,255,.04);
  --dr-glass-hover:   rgba(255,255,255,.07);
  --dr-glass-border:  rgba(200,168,75,.14);
  --dr-glass-border-h:rgba(200,168,75,.45);

  /* Radius */
  --dr-r:   10px;
  --dr-r-lg:18px;
  --dr-r-xl:28px;

  /* Height of the fixed site header: the logo (54px) plus its 1.1rem padding
     above and below. .dr-nav is position:fixed and therefore out of flow, so any
     page that does not open with a hero has to reserve this much room itself or
     its first element renders underneath the bar. Keep this in step with
     .dr-nav padding-block and .dr-nav__logo-img height. The scrolled bar is
     shorter, which only ever widens the gap — never reintroduces the overlap. */
  --dr-nav-h: 5.6rem;

  /* Transitions */
  --dr-t:   .3s cubic-bezier(.4,0,.2,1);
  --dr-t-fast: .18s cubic-bezier(.4,0,.2,1);
  --dr-bounce: .45s cubic-bezier(.34,1.56,.64,1);

  /* Shadows */
  --dr-shadow-card: 0 2px 8px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.3);
  --dr-shadow-gold: 0 0 0 1px rgba(200,168,75,.35), 0 8px 32px rgba(200,168,75,.12), 0 24px 64px rgba(0,0,0,.5);
  --dr-shadow-glow: 0 0 60px rgba(200,168,75,.18);
}

/* ─── 1. BASE RESETS ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Global background for pages using this redesign */
body.home,
body.page-template-page-services,
body.post-type-archive-ab_service,
body.single-ab_service,
body.ab-page-dashboard {
  background: var(--dr-bg);
  color: var(--dr-text);
}

/* ─── 2. TYPOGRAPHY ─────────────────────────────────────────────────────── */

/* Arabic display: Amiri — beautiful Naskh calligraphy */
[dir="rtl"] .dr-display,
[dir="rtl"] .dr-hero-title,
[dir="rtl"] .dr-section-title,
[dir="rtl"] .dr-nav-logo-text {
  font-family: 'Amiri', 'Cairo', serif;
  font-weight: 700;
}

/* English display: Cormorant Garamond — aristocratic serif */
[dir="ltr"] .dr-display,
[dir="ltr"] .dr-hero-title,
[dir="ltr"] .dr-section-title,
[dir="ltr"] .dr-nav-logo-text {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 600;
}

/* Body override for English */
[dir="ltr"] body,
[dir="ltr"] input,
[dir="ltr"] button,
[dir="ltr"] textarea,
[dir="ltr"] select {
  font-family: 'DM Sans', -apple-system, sans-serif;
}

/* Gold gradient text */
.dr-gold-text {
  background: linear-gradient(135deg, var(--dr-gold-light) 0%, var(--dr-gold) 40%, var(--dr-gold-pale) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── 3. SHARED LAYOUT ──────────────────────────────────────────────────── */
.dr-container {
  width: min(1200px, 100% - 2.5rem);
  margin-inline: auto;
}

.dr-section {
  padding-block: clamp(5rem, 10vw, 8rem);
}

/* Section label — small caps with gold rules */
.dr-section-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 1.5rem;
}
.dr-section-label span {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dr-gold);
}
.dr-section-label::before,
.dr-section-label::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--dr-gold-dim));
}
.dr-section-label::after {
  background: linear-gradient(to left, transparent, var(--dr-gold-dim));
  max-width: 60px;
}
[dir="rtl"] .dr-section-label::before {
  background: linear-gradient(to left, transparent, var(--dr-gold-dim));
}
[dir="rtl"] .dr-section-label::after {
  background: linear-gradient(to right, transparent, var(--dr-gold-dim));
}

.dr-section-title {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.2;
  margin-block: 0 1rem;
  color: var(--dr-text);
}

.dr-section-subtitle {
  font-size: 1.05rem;
  color: var(--dr-text-2);
  max-width: 52ch;
  line-height: 1.75;
}

/* ─── 4. NAVIGATION ─────────────────────────────────────────────────────── */
.dr-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
  padding-block: 1.1rem;
  transition: background var(--dr-t), backdrop-filter var(--dr-t), box-shadow var(--dr-t), padding var(--dr-t);
}

.dr-nav.scrolled {
  background: rgba(6,13,9,.92);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(200,168,75,.12), 0 4px 32px rgba(0,0,0,.4);
  padding-block: .8rem;
}

.dr-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  /* Flex items refuse to shrink below their content by default, so on a narrow
     phone the actions cluster (theme toggle + language + hamburger) pushed past
     the container's inline-end edge. Because it overflowed the *document* the
     whole page picked up a horizontal scroll — which reads as the page having
     lost its gutter, since any sideways scroll cuts off the opposite margin. */
  min-inline-size: 0;
}
.dr-nav__inner > * { min-inline-size: 0; }
.dr-nav__logo { flex: 0 1 auto; }
.dr-nav__logo-img { max-inline-size: 100%; }
.dr-nav__actions { flex: 0 1 auto; }

@media (max-width: 400px) {
  .dr-nav__inner { gap: .75rem; }
  .dr-nav__actions { gap: .4rem; }
}

/* Logo */
.dr-nav__logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  flex-shrink: 0;
}

.dr-nav__logo-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

/* Company logo in the sticky bar. It shrinks with the bar on scroll so the
   nav keeps its slimmer scrolled height. */
/* The artwork is a 2.8:1 banner carrying two lines of Arabic, so it needs
   real height to stay legible — below ~44px the second line closes up. */
.dr-nav__logo-img {
  height: 54px;
  width: auto;
  flex-shrink: 0;
  border-radius: 12px;
  transition: height var(--dr-t), opacity var(--dr-t);
}

.dr-nav.scrolled .dr-nav__logo-img { height: 44px; border-radius: 10px; }

.dr-nav__logo:hover .dr-nav__logo-img { opacity: .85; }

.dr-nav-logo-text {
  font-size: 1.35rem;
  color: var(--dr-text);
  line-height: 1;
  transition: color var(--dr-t);
}
.dr-nav__logo:hover .dr-nav-logo-text { color: var(--dr-gold-light); }

/* Menu */
.dr-nav__menu {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dr-nav__menu a {
  display: block;
  padding: .45rem .9rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--dr-text-2);
  text-decoration: none;
  border-radius: var(--dr-r);
  transition: color var(--dr-t), background var(--dr-t);
  position: relative;
}
.dr-nav__menu a::after {
  content: '';
  position: absolute;
  inset-inline: .9rem;
  bottom: .35rem;
  height: 1.5px;
  background: var(--dr-gold);
  transform: scaleX(0);
  transition: transform var(--dr-t);
  transform-origin: inline-start;
}
.dr-nav__menu a:hover { color: var(--dr-text); }
.dr-nav__menu a:hover::after { transform: scaleX(1); }

/* Nav actions */
.dr-nav__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Language switcher in nav */
.dr-nav__lang {
  display: flex;
  align-items: center;
  gap: .2rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(200,168,75,.2);
  border-radius: 999px;
  padding: .25rem .35rem;
}
.dr-nav__lang a {
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--dr-text-3);
  transition: color var(--dr-t), background var(--dr-t);
}
.dr-nav__lang a.active {
  background: var(--dr-gold);
  color: var(--color-text-on-gold);
}
.dr-nav__lang a:not(.active):hover {
  color: var(--dr-text);
}

/* Nav CTA */
.dr-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1.25rem;
  background: var(--dr-gold);
  color: var(--color-text-on-gold) !important;
  font-size: .85rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: .02em;
  transition: background var(--dr-t), transform var(--dr-t), box-shadow var(--dr-t);
  box-shadow: 0 4px 16px rgba(200,168,75,.3);
}
.dr-nav__cta:hover {
  background: var(--dr-gold-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(200,168,75,.45);
}

/* Mobile hamburger */
.dr-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
  border-radius: var(--dr-r);
}
.dr-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--dr-text);
  border-radius: 2px;
  transition: transform var(--dr-t), opacity var(--dr-t);
}

/* Mobile menu */
/* The sheet is a sibling of <nav>, a direct child of <body>, and it has to
   stay that way. `.dr-nav.scrolled` sets a backdrop-filter, and a filter or
   backdrop-filter other than `none` makes an element the containing block for
   its position:fixed descendants. While the sheet lived inside <nav> it was
   therefore fixed to the *bar* the moment the page was scrolled: measured at
   414x896 at the top of the page, and 414x181 after scrolling — clipped to the
   bar's own box, with its 9.25rem top padding pushing every link out of view.
   The menu opened correctly and showed nothing, and nothing about the classes,
   the attributes or the cascade looked wrong. Keep it out of the bar. */
.dr-nav__mobile {
  position: fixed;
  inset: 0;
  /* Below the bar's z-index (1000) so the bar keeps painting over the sheet
     and its close button stays clickable; above everything else on the page. */
  z-index: 999;
  /* Hidden by default and shown by the `open` class, not by the absence of
     the `hidden` attribute. A browser holding an older main.js only knows how
     to add `open`, and old cached markup has no `hidden` attribute at all —
     keying on the class is the one signal both versions agree on. */
  display: none;
  flex-direction: column;
  gap: .3rem;
  padding: 7.25rem 1.25rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #0B140E;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}

/* The WordPress admin bar sits above the site bar and pushes it down. */
body.admin-bar .dr-nav__mobile { padding-block-start: 9.25rem; }
@media (min-width: 783px) {
  body.admin-bar .dr-nav__mobile { padding-block-start: 8.25rem; }
}
.dr-nav__mobile.open { display: flex; }
.dr-nav__mobile[hidden] { display: none; }
/* The class outranks the attribute, so a stale script that only knows about
   `open` still opens the sheet. */
.dr-nav__mobile.open[hidden] { display: flex; }

/* The sheet covers the whole viewport, so there is nothing left to dim. The
   element stays in the markup as the close target the script binds to. */
.dr-nav__scrim { display: none; }

.dr-nav__mobile-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1rem;
  color: var(--dr-text-2);
  text-decoration: none;
  border-radius: var(--dr-r);
  font-size: 1.02rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: color var(--dr-t), background var(--dr-t), border-color var(--dr-t);
}
.dr-nav__mobile-item:hover,
.dr-nav__mobile-item:focus-visible {
  color: var(--dr-gold-light);
  background: rgba(200,168,75,.09);
  border-color: rgba(200,168,75,.22);
}
.dr-nav__mobile-item--lang { color: var(--dr-gold); }
.dr-nav__mobile-item--quiet { font-size: .95rem; opacity: .75; }

.dr-nav__mobile-cta {
  margin-block-start: .6rem;
  padding: .9rem 1rem;
  border-radius: 999px;
  background: var(--dr-gold);
  color: #080F0A;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.02rem;
}

/* Nothing behind the sheet should scroll while it is open. */
body.dr-menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .dr-nav__menu, .dr-nav__actions .dr-nav__cta { display: none; }
  .dr-nav__hamburger { display: flex; }
}

@media (max-width: 560px) {
  .dr-nav__logo-img,
  .dr-nav.scrolled .dr-nav__logo-img { height: 40px; border-radius: 9px; }
  .dr-footer__logo-img { width: 200px; }
}

/* ─── 5. HERO ────────────────────────────────────────────────────────────── */
.dr-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block-start: 90px; /* nav height */
  background: var(--dr-bg);
}

/* Layered background */
.dr-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dr-hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 65% 20%, rgba(29,92,66,.35), transparent 70%),
    radial-gradient(ellipse 45% 55% at 15% 75%, rgba(200,168,75,.07), transparent 65%),
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(11,28,18,.8), transparent);
}

.dr-hero__pattern-wrap {
  position: absolute;
  inset: 0;
  opacity: .055;
}

.dr-hero__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
  opacity: .4;
}

/* Gold orb accents */
.dr-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.dr-hero__orb--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(29,92,66,.4), transparent 70%);
  top: -100px; inset-inline-end: 5%;
}
.dr-hero__orb--2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(200,168,75,.15), transparent 70%);
  bottom: 10%; inset-inline-start: -50px;
}

/* Content */
.dr-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
  padding-block: clamp(3rem, 8vw, 5rem);
}

.dr-hero__text > * {
  opacity: 0;
  transform: translateY(24px);
  animation: dr-fade-up .7s cubic-bezier(.4,0,.2,1) forwards;
}
.dr-hero__text > *:nth-child(1) { animation-delay: .1s; }
.dr-hero__text > *:nth-child(2) { animation-delay: .22s; }
.dr-hero__text > *:nth-child(3) { animation-delay: .34s; }
.dr-hero__text > *:nth-child(4) { animation-delay: .46s; }
.dr-hero__text > *:nth-child(5) { animation-delay: .58s; }

/* Eyebrow badge */
.dr-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(200,168,75,.1);
  border: 1px solid rgba(200,168,75,.25);
  border-radius: 999px;
  padding: .38rem 1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dr-gold-light);
  margin-block-end: 1.25rem;
}
.dr-hero__eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dr-gold);
  box-shadow: 0 0 8px var(--dr-gold);
  animation: dr-pulse-dot 2.2s ease-in-out infinite;
}

.dr-hero-title {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  line-height: 1.15;
  color: var(--dr-text);
  margin-block: 0 1.1rem;
}
[dir="rtl"] .dr-hero-title { line-height: 1.35; }

.dr-hero-title .dr-accent-line {
  display: block;
  background: linear-gradient(120deg, var(--dr-gold-light), var(--dr-gold), var(--dr-gold-pale));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dr-hero__desc {
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
  color: var(--dr-text-2);
  line-height: 1.8;
  max-width: 48ch;
  margin-block-end: 2rem;
}

/* CTA buttons */
.dr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-block-end: 3rem;
}

.dr-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.9rem;
  background: var(--dr-gold);
  color: #080F0A;
  font-weight: 700;
  font-size: .95rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--dr-t), transform var(--dr-bounce), box-shadow var(--dr-t);
  box-shadow: 0 4px 20px rgba(200,168,75,.35);
  letter-spacing: .01em;
  border: none;
  cursor: pointer;
}
.dr-btn-primary:hover {
  background: var(--dr-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(200,168,75,.5);
}

.dr-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.9rem;
  background: transparent;
  color: var(--dr-text);
  font-weight: 600;
  font-size: .95rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid rgba(200,168,75,.3);
  transition: border-color var(--dr-t), background var(--dr-t), transform var(--dr-bounce);
  letter-spacing: .01em;
  cursor: pointer;
}
.dr-btn-ghost:hover {
  border-color: var(--dr-gold);
  background: rgba(200,168,75,.07);
  transform: translateY(-2px);
}

.dr-btn-arrow {
  display: inline-block;
  transition: transform var(--dr-t);
}
.dr-btn-primary:hover .dr-btn-arrow,
.dr-btn-ghost:hover .dr-btn-arrow {
  transform: translateX(4px);
}
[dir="rtl"] .dr-btn-primary:hover .dr-btn-arrow,
[dir="rtl"] .dr-btn-ghost:hover .dr-btn-arrow {
  transform: translateX(-4px);
}

/* Hero stats strip */
.dr-hero__stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(200,168,75,.1);
  border-radius: var(--dr-r-lg);
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.dr-hero__stat {
  flex: 1;
  padding: 1.1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  border-inline-end: 1px solid rgba(200,168,75,.1);
}
.dr-hero__stat:last-child { border-inline-end: none; }
.dr-hero__stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--dr-gold-light), var(--dr-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}
.dr-hero__stat-label {
  font-size: .78rem;
  color: var(--dr-text-3);
  font-weight: 500;
  letter-spacing: .03em;
}

/* Hero visual — floating service cards */
.dr-hero__visual {
  position: relative;
  height: 420px;
  opacity: 0;
  animation: dr-fade-in .8s cubic-bezier(.4,0,.2,1) .5s forwards;
}

.dr-float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background: rgba(17,37,24,.85);
  border: 1px solid rgba(200,168,75,.18);
  border-radius: var(--dr-r-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(200,168,75,.08);
  min-width: 200px;
  transition: transform var(--dr-t), box-shadow var(--dr-t);
}
.dr-float-card:hover {
  box-shadow: var(--dr-shadow-gold);
  transform: translateY(-4px);
}
.dr-float-card--1 {
  top: 30px; inset-inline-start: 10%;
  animation: dr-float1 6s ease-in-out infinite;
}
.dr-float-card--2 {
  top: 50%; transform: translateY(-50%);
  inset-inline-end: 0;
  animation: dr-float2 7s ease-in-out 1s infinite;
}
.dr-float-card--3 {
  bottom: 40px; inset-inline-start: 5%;
  animation: dr-float3 5.5s ease-in-out .5s infinite;
}
.dr-float-card__icon {
  width: 46px; height: 46px;
  border-radius: var(--dr-r);
  background: linear-gradient(135deg, rgba(200,168,75,.2), rgba(200,168,75,.08));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  border: 1px solid rgba(200,168,75,.2);
}
.dr-float-card__text { flex: 1; }
.dr-float-card__title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--dr-text);
  margin: 0 0 .2rem;
}
.dr-float-card__status {
  font-size: .72rem;
  color: var(--dr-gold);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.dr-float-card__status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 6px var(--color-success);
}

/* Centre decorative ring */
.dr-hero__ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 1px solid rgba(200,168,75,.08);
  pointer-events: none;
  animation: dr-spin-slow 40s linear infinite;
}
.dr-hero__ring::before {
  content: '';
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px dashed rgba(200,168,75,.05);
}

/* ─── 6. SERVICES SECTION ───────────────────────────────────────────────── */
.dr-services {
  background: var(--dr-bg-2);
  padding-block: clamp(5rem, 10vw, 8rem);
  position: relative;
  overflow: hidden;
}
.dr-services::before {
  content: '';
  position: absolute;
  top: 0; inset-inline-end: 0;
  width: 50%; height: 1px;
  background: linear-gradient(to var(--dr-inline-end, right), transparent, rgba(200,168,75,.25));
}

.dr-services__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
  margin-block-end: 3.5rem;
}
.dr-services__head-text {}

.dr-services__viewall {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--dr-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(200,168,75,.3);
  padding-block-end: .1rem;
  transition: color var(--dr-t), border-color var(--dr-t), gap var(--dr-t);
  white-space: nowrap;
}
.dr-services__viewall:hover {
  color: var(--dr-gold-light);
  border-color: var(--dr-gold);
  gap: .8rem;
}

/* Service cards grid */
.dr-services-grid {
  display: grid;
  /* min() so a track can never be wider than the container it sits in —
     a bare 250px floor overflows a 320px phone and scrolls the page sideways. */
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 1.25rem;
}

.dr-service-card {
  position: relative;
  padding: 2rem 1.75rem;
  background: var(--dr-glass);
  border: 1px solid var(--dr-glass-border);
  border-radius: var(--dr-r-lg);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: background var(--dr-t), border-color var(--dr-t), transform var(--dr-bounce), box-shadow var(--dr-t);
  cursor: pointer;
  overflow: hidden;
}
.dr-service-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; top: 0;
  width: 3px; height: 100%;
  background: linear-gradient(to bottom, var(--dr-gold), transparent);
  opacity: 0;
  transition: opacity var(--dr-t);
}
.dr-service-card:hover {
  background: var(--dr-glass-hover);
  border-color: var(--dr-glass-border-h);
  transform: translateY(-6px);
  box-shadow: var(--dr-shadow-card), var(--dr-shadow-glow);
}
.dr-service-card:hover::before { opacity: 1; }

.dr-service-card__icon {
  width: 54px; height: 54px;
  border-radius: var(--dr-r);
  background: linear-gradient(135deg, rgba(200,168,75,.18), rgba(200,168,75,.06));
  border: 1px solid rgba(200,168,75,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  transition: transform var(--dr-bounce), background var(--dr-t);
}
.dr-service-card:hover .dr-service-card__icon {
  transform: scale(1.1) rotate(-3deg);
  background: linear-gradient(135deg, rgba(200,168,75,.28), rgba(200,168,75,.1));
}

.dr-service-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dr-text);
  margin: 0;
  line-height: 1.4;
}

.dr-service-card__desc {
  font-size: .88rem;
  color: var(--dr-text-2);
  line-height: 1.7;
  flex: 1;
  margin: 0;
}

.dr-service-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: .5rem;
}

.dr-service-card__count {
  font-size: .75rem;
  font-weight: 600;
  color: var(--dr-gold-dim);
  letter-spacing: .03em;
  background: rgba(200,168,75,.08);
  border: 1px solid rgba(200,168,75,.12);
  border-radius: 999px;
  padding: .2rem .7rem;
}

.dr-service-card__arrow {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(200,168,75,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  color: var(--dr-gold);
  transition: background var(--dr-t), transform var(--dr-bounce);
}
.dr-service-card:hover .dr-service-card__arrow {
  background: var(--dr-gold);
  color: #080F0A;
  transform: translateX(3px);
}
[dir="rtl"] .dr-service-card:hover .dr-service-card__arrow {
  transform: translateX(-3px);
}

/* ─── 7. HOW IT WORKS — LIGHT SECTION ───────────────────────────────────── */
.dr-steps {
  background: var(--dr-bg-light);
  padding-block: clamp(5rem, 10vw, 8rem);
  position: relative;
}
.dr-steps::before {
  content: '';
  position: absolute;
  top: 0; inset-inline: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--dr-gold), transparent);
}

/* Override text colors for light section */
.dr-steps .dr-section-label span { color: var(--dr-green); }
.dr-steps .dr-section-label::before,
.dr-steps .dr-section-label::after {
  background: linear-gradient(to right, transparent, rgba(29,92,66,.3));
}
[dir="rtl"] .dr-steps .dr-section-label::before {
  background: linear-gradient(to left, transparent, rgba(29,92,66,.3));
}
.dr-steps .dr-section-title { color: var(--dr-text-dark); }
.dr-steps .dr-section-subtitle { color: var(--dr-text-dark-2); }

.dr-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  margin-block-start: 3.5rem;
}

/* Connecting line between steps */
.dr-steps-grid::before {
  content: '';
  position: absolute;
  top: 42px;
  inset-inline: calc(12.5% + 28px);
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--dr-gold) 0, var(--dr-gold) 6px,
    transparent 6px, transparent 14px
  );
  opacity: .4;
}
[dir="rtl"] .dr-steps-grid::before {
  background: repeating-linear-gradient(
    to left,
    var(--dr-gold) 0, var(--dr-gold) 6px,
    transparent 6px, transparent 14px
  );
}

.dr-step-card {
  background: #fff;
  border-radius: var(--dr-r-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 8px 32px rgba(0,0,0,.05);
  border: 1px solid rgba(29,92,66,.08);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform var(--dr-bounce), box-shadow var(--dr-t);
  position: relative;
}
.dr-step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(29,92,66,.15), 0 2px 8px rgba(0,0,0,.06);
}

.dr-step-card__number {
  font-family: 'Cormorant Garamond', 'Amiri', serif;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, var(--dr-gold), rgba(200,168,75,.35));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  direction: ltr;
  unicode-bidi: isolate;
}

.dr-step-card__icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, rgba(29,92,66,.12), rgba(29,92,66,.06));
  border-radius: var(--dr-r);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  border: 1px solid rgba(29,92,66,.1);
}

.dr-step-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dr-text-dark);
  margin: 0;
  line-height: 1.4;
}

.dr-step-card__desc {
  font-size: .85rem;
  color: var(--dr-text-dark-2);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

/* ─── 8. STATS / TRUST SECTION ──────────────────────────────────────────── */
.dr-trust {
  background: var(--dr-bg);
  padding-block: clamp(5rem, 10vw, 8rem);
  position: relative;
  overflow: hidden;
}
.dr-trust::after {
  content: '';
  position: absolute;
  bottom: 0; inset-inline-start: 0; inset-inline-end: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,168,75,.2), transparent);
}

.dr-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.dr-trust-card {
  padding: 2.5rem 2rem;
  background: var(--dr-glass);
  border: 1px solid var(--dr-glass-border);
  border-radius: var(--dr-r-xl);
  text-align: center;
  transition: background var(--dr-t), border-color var(--dr-t), transform var(--dr-bounce);
}
.dr-trust-card:hover {
  background: var(--dr-glass-hover);
  border-color: rgba(200,168,75,.3);
  transform: translateY(-5px);
}

.dr-trust-card__icon {
  font-size: 2.2rem;
  margin-block-end: 1rem;
  display: block;
}
.dr-trust-card__value {
  font-family: 'Cormorant Garamond', 'Amiri', serif;
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--dr-gold-light), var(--dr-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
  margin-block-end: .5rem;
}
.dr-trust-card__label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--dr-text);
  margin-block-end: .75rem;
}
.dr-trust-card__desc {
  font-size: .83rem;
  color: var(--dr-text-2);
  line-height: 1.7;
  margin: 0;
}

/* ─── 9. FINAL CTA ──────────────────────────────────────────────────────── */
.dr-cta {
  background: var(--dr-bg-2);
  padding-block: clamp(5rem, 10vw, 8rem);
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Radial gold bloom */
.dr-cta::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse, rgba(200,168,75,.12) 0%, transparent 65%);
  pointer-events: none;
}

/* Top and bottom ornamental lines */
.dr-cta::after {
  content: '';
  position: absolute;
  top: 0; inset-inline: 0;
  height: 2px;
  background: linear-gradient(to right, transparent 10%, var(--dr-gold-dim) 50%, transparent 90%);
}

.dr-cta__inner {
  position: relative;
  z-index: 1;
}

.dr-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--dr-gold);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-block-end: 1.5rem;
}
.dr-cta__eyebrow::before,
.dr-cta__eyebrow::after {
  content: '✦';
  font-size: .5rem;
  opacity: .7;
}

.dr-cta__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
  color: var(--dr-text);
  margin-block: 0 1.1rem;
}
[dir="rtl"] .dr-cta__title { line-height: 1.4; }

.dr-cta__desc {
  font-size: 1.05rem;
  color: var(--dr-text-2);
  max-width: 52ch;
  margin-inline: auto;
  margin-block-end: 2.5rem;
  line-height: 1.8;
}

.dr-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ─── 10. FOOTER ────────────────────────────────────────────────────────── */
.dr-footer {
  background: var(--dr-bg);
  padding-block-start: clamp(4rem, 8vw, 6rem);
  border-top: 1px solid rgba(200,168,75,.1);
}

.dr-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 4rem;
  padding-block-end: 3.5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.dr-footer__brand {}

.dr-footer__logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  margin-block-end: 1.25rem;
}

.dr-footer__logo-img {
  width: 240px;
  border-radius: 14px;
}

.dr-footer__logo:hover .dr-footer__logo-img { opacity: .85; }

.dr-footer__brand-name {
  font-size: 1.4rem;
  color: var(--dr-text);
  line-height: 1;
}
[dir="rtl"] .dr-footer__brand-name { font-family: 'Amiri', serif; }
[dir="ltr"] .dr-footer__brand-name { font-family: 'Cormorant Garamond', serif; }

.dr-footer__tagline {
  font-size: .88rem;
  color: var(--dr-text-2);
  line-height: 1.7;
  max-width: 34ch;
  margin-block-end: 1.75rem;
}

.dr-footer__social {
  display: flex;
  gap: .6rem;
}
.dr-footer__social a {
  width: 36px; height: 36px;
  border-radius: var(--dr-r);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--dr-text-2);
  text-decoration: none;
  font-size: .85rem;
  transition: background var(--dr-t), color var(--dr-t), border-color var(--dr-t);
}
.dr-footer__social a:hover {
  background: rgba(200,168,75,.1);
  color: var(--dr-gold);
  border-color: rgba(200,168,75,.3);
}

.dr-footer__col-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dr-gold);
  margin-block-end: 1.25rem;
}

.dr-footer__links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.dr-footer__links a {
  font-size: .88rem;
  color: var(--dr-text-2);
  text-decoration: none;
  transition: color var(--dr-t), padding-inline-start var(--dr-t);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.dr-footer__links a::before {
  content: '';
  width: 0;
  height: 1.5px;
  background: var(--dr-gold);
  transition: width var(--dr-t);
  display: inline-block;
}
.dr-footer__links a:hover {
  color: var(--dr-gold-light);
}
.dr-footer__links a:hover::before {
  width: 14px;
}
[dir="rtl"] .dr-footer__links a::before {
  display: none;
}

.dr-footer__bottom {
  padding-block: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.dr-footer__copy {
  font-size: .8rem;
  color: var(--dr-text-3);
}
.dr-footer__legal {
  display: flex;
  gap: 1.5rem;
}
.dr-footer__legal a {
  font-size: .78rem;
  color: var(--dr-text-3);
  text-decoration: none;
  transition: color var(--dr-t);
}
.dr-footer__legal a:hover { color: var(--dr-gold); }

/* ─── 11. ANIMATIONS ────────────────────────────────────────────────────── */
@keyframes dr-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dr-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dr-float1 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
@keyframes dr-float2 {
  0%, 100% { transform: translateY(-50%); }
  50%       { transform: translateY(calc(-50% - 12px)); }
}
@keyframes dr-float3 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes dr-spin-slow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes dr-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px var(--dr-gold); }
  50%       { opacity: .6; transform: scale(1.3); box-shadow: 0 0 14px var(--dr-gold); }
}

/* Scroll-reveal */
.dr-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
.dr-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.dr-reveal:nth-child(2) { transition-delay: .1s; }
.dr-reveal:nth-child(3) { transition-delay: .2s; }
.dr-reveal:nth-child(4) { transition-delay: .3s; }

/* ─── 12. ISLAMIC STAR PATTERN SVG ─────────────────────────────────────── */
.dr-star-pattern {
  width: 100%; height: 100%;
}

/* ─── 13. RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .dr-hero__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .dr-hero__visual {
    height: 260px;
  }
  .dr-float-card--2 {
    top: auto; bottom: 0;
    inset-inline-end: 10%;
    transform: none;
  }
  .dr-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dr-steps-grid::before { display: none; }
  .dr-trust-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .dr-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .dr-footer__brand {
    grid-column: 1 / -1;
  }
  .dr-services__head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dr-hero__stats { flex-direction: column; }
  .dr-hero__stat { border-inline-end: none; border-bottom: 1px solid rgba(200,168,75,.1); }
  .dr-hero__stat:last-child { border-bottom: none; }
  .dr-steps-grid { grid-template-columns: 1fr; }
  .dr-trust-grid { grid-template-columns: 1fr; }
  .dr-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .dr-footer__bottom { flex-direction: column; text-align: center; }
  .dr-services-grid { grid-template-columns: 1fr; }
  .dr-hero__visual { display: none; }
}

/* ─── 14. RTL ADJUSTMENTS ───────────────────────────────────────────────── */
[dir="rtl"] .dr-services::before {
  inset-inline-end: auto;
  inset-inline-start: 0;
  background: linear-gradient(to left, transparent, rgba(200,168,75,.25));
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. SERVICES ARCHIVE PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper keeps the dark background */
.dr-svc-wrap {
  min-block-size: 100vh;
  background: var(--dr-bg);
  color: var(--dr-text);
}

/* ── Page Hero (compact) ──────────────────────────────────────────────────── */
.dr-page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 12vw, 8rem) clamp(3rem, 6vw, 5rem);
}

.dr-page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.dr-page-hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 30% 50%, rgba(11,28,18,.98) 0%, transparent 75%),
    linear-gradient(160deg, var(--dr-bg) 0%, var(--dr-bg-2) 50%, var(--dr-bg) 100%);
}

.dr-page-hero__pattern {
  position: absolute;
  inset: 0;
  opacity: .35;
}

.dr-page-hero__orb {
  position: absolute;
  inset-block-start: -120px;
  inset-inline-end: -80px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,168,75,.07) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}

.dr-page-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Breadcrumb */
.dr-breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--dr-text-2);
}
.dr-breadcrumb a {
  color: var(--dr-text-2);
  text-decoration: none;
  transition: color var(--dr-t-fast);
}
.dr-breadcrumb a:hover { color: var(--dr-gold); }
.dr-breadcrumb__sep {
  color: var(--dr-text-3);
  font-size: .7rem;
}

/* Hero text */
.dr-page-hero__text {}

.dr-page-hero__title {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dr-text);
  margin-block-end: .75rem;
}
[dir="rtl"] .dr-page-hero__title {
  font-family: 'Amiri', serif;
  line-height: 1.35;
}
[dir="ltr"] .dr-page-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}
[dir="ltr"] .dr-page-hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--dr-gold-light) 0%, var(--dr-gold) 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dr-page-hero__desc {
  font-size: 1.05rem;
  color: var(--dr-text-2);
  line-height: 1.8;
  max-width: 52ch;
}

/* Stats row */
.dr-page-hero__stats {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-block-start: .5rem;
}

.dr-page-hero__stat {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.dr-page-hero__stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.25rem;
  font-weight: 700;
  font-style: italic;
  background: linear-gradient(135deg, var(--dr-gold-light) 0%, var(--dr-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.dr-page-hero__stat-label {
  font-size: .82rem;
  color: var(--dr-text-2);
  letter-spacing: .03em;
}

.dr-page-hero__stat-div {
  width: 1px;
  height: 2rem;
  background: var(--dr-glass-border);
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.dr-filter-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 90;
  background: rgba(6,13,9,.9);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-block: 1px solid var(--dr-glass-border);
}

.dr-filter-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dr-filter-tabs::-webkit-scrollbar { display: none; }

.dr-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.25rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--dr-text-2);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  transition: color var(--dr-t-fast), background var(--dr-t-fast);
  letter-spacing: .02em;
}

.dr-filter-tab::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--dr-gold);
  transform: scaleX(0);
  transition: transform var(--dr-t);
}

.dr-filter-tab:hover {
  color: var(--dr-text);
  background: rgba(200,168,75,.04);
}

.dr-filter-tab--active {
  color: var(--dr-gold);
}
.dr-filter-tab--active::after {
  transform: scaleX(1);
}

.dr-filter-tab__icon {
  font-size: .9rem;
  color: var(--dr-gold-dim);
  flex-shrink: 0;
}
.dr-filter-tab--active .dr-filter-tab__icon { color: var(--dr-gold); }

.dr-filter-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding-inline: .35rem;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(200,168,75,.1);
  color: var(--dr-gold-dim);
  transition: background var(--dr-t-fast), color var(--dr-t-fast);
}
.dr-filter-tab--active .dr-filter-tab__count,
.dr-filter-tab:hover .dr-filter-tab__count {
  background: var(--dr-gold);
  color: #060D09;
}

/* ── Services body / grid ─────────────────────────────────────────────────── */
.dr-svc-body {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.dr-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem;
}

/* ── Service card ─────────────────────────────────────────────────────────── */
.dr-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  background: var(--dr-glass);
  border: 1px solid var(--dr-glass-border);
  border-radius: var(--dr-r-lg);
  overflow: hidden;
  transition:
    background var(--dr-t),
    border-color var(--dr-t),
    transform var(--dr-bounce),
    box-shadow var(--dr-t);
}

/* Gold top-border shimmer on hover */
.dr-svc-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--dr-gold), transparent);
  opacity: 0;
  transition: opacity var(--dr-t);
}

.dr-svc-card:hover {
  background: var(--dr-glass-hover);
  border-color: var(--dr-glass-border-h);
  transform: translateY(-5px);
  box-shadow: var(--dr-shadow-card), 0 0 40px rgba(200,168,75,.08);
}
.dr-svc-card:hover::before { opacity: 1; }

/* Full-card overlay link */
.dr-svc-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

/* Top: icon + category badge */
.dr-svc-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.dr-svc-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--dr-r);
  background: linear-gradient(135deg, rgba(200,168,75,.16), rgba(200,168,75,.06));
  border: 1px solid rgba(200,168,75,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  flex-shrink: 0;
  transition: transform var(--dr-bounce), background var(--dr-t);
}
.dr-svc-card:hover .dr-svc-card__icon {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, rgba(200,168,75,.26), rgba(200,168,75,.1));
}

.dr-svc-card__cat {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dr-gold);
  background: rgba(200,168,75,.1);
  border: 1px solid rgba(200,168,75,.18);
  border-radius: 999px;
  padding: .25rem .75rem;
  white-space: nowrap;
  margin-block-start: .1rem;
}

/* Body */
.dr-svc-card__body { flex: 1; }

.dr-svc-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  margin-block-end: .5rem;
  position: relative;
  z-index: 1;
}
[dir="rtl"] .dr-svc-card__title { font-family: 'Amiri', serif; font-size: 1.15rem; }
[dir="ltr"] .dr-svc-card__title { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; }

.dr-svc-card__title a {
  color: var(--dr-text);
  text-decoration: none;
  transition: color var(--dr-t-fast);
}
.dr-svc-card__title a:hover { color: var(--dr-gold-light); }

.dr-svc-card__excerpt {
  font-size: .875rem;
  color: var(--dr-text-2);
  line-height: 1.7;
  margin: 0;
}

/* Meta row */
.dr-svc-card__meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: .75rem;
  border-block: 1px solid rgba(255,255,255,.05);
}

.dr-svc-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--dr-text-3);
}
.dr-svc-card__meta-item svg { color: var(--dr-gold-dim); flex-shrink: 0; }

/* Footer CTA */
.dr-svc-card__footer {
  position: relative;
  z-index: 1;
}

.dr-svc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--dr-gold);
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: gap var(--dr-t), color var(--dr-t-fast);
}
.dr-svc-card__cta:hover {
  color: var(--dr-gold-light);
  gap: .75rem;
}
.dr-svc-card__cta svg { transition: transform var(--dr-t); }
.dr-svc-card__cta:hover svg { transform: translateX(3px); }
[dir="rtl"] .dr-svc-card__cta:hover svg { transform: translateX(-3px); }

/* Stagger reveal on grid items */
.dr-svc-grid .dr-reveal:nth-child(1) { transition-delay: 0s; }
.dr-svc-grid .dr-reveal:nth-child(2) { transition-delay: .07s; }
.dr-svc-grid .dr-reveal:nth-child(3) { transition-delay: .14s; }
.dr-svc-grid .dr-reveal:nth-child(4) { transition-delay: .21s; }
.dr-svc-grid .dr-reveal:nth-child(5) { transition-delay: .08s; }
.dr-svc-grid .dr-reveal:nth-child(6) { transition-delay: .15s; }
.dr-svc-grid .dr-reveal:nth-child(7) { transition-delay: .1s; }
.dr-svc-grid .dr-reveal:nth-child(8) { transition-delay: .18s; }
.dr-svc-grid .dr-reveal:nth-child(n+9) { transition-delay: 0s; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.dr-empty-state {
  text-align: center;
  padding-block: clamp(4rem, 10vw, 7rem);
  max-width: 460px;
  margin-inline: auto;
}

.dr-empty-state__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(200,168,75,.06);
  border: 1px solid rgba(200,168,75,.15);
  margin-inline: auto;
  margin-block-end: 1.75rem;
}

.dr-empty-state__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dr-text);
  margin-block-end: .75rem;
}
[dir="rtl"] .dr-empty-state__title { font-family: 'Amiri', serif; font-size: 1.65rem; }
[dir="ltr"] .dr-empty-state__title { font-family: 'Cormorant Garamond', serif; font-style: italic; }

.dr-empty-state__desc {
  font-size: .95rem;
  color: var(--dr-text-2);
  line-height: 1.8;
  margin-block-end: 2rem;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.dr-pagination {
  margin-block-start: 3.5rem;
  display: flex;
  justify-content: center;
}

.dr-pagination .page-numbers {
  display: flex;
  list-style: none;
  gap: .375rem;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.dr-pagination .page-numbers li a,
.dr-pagination .page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.375rem;
  height: 2.375rem;
  padding-inline: .75rem;
  border-radius: var(--dr-r);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--dr-glass-border);
  color: var(--dr-text-2);
  background: var(--dr-glass);
  transition: all var(--dr-t-fast);
}

.dr-pagination .page-numbers li a:hover {
  background: rgba(200,168,75,.12);
  border-color: var(--dr-gold);
  color: var(--dr-gold-light);
}

.dr-pagination .page-numbers li .current {
  background: var(--dr-gold);
  border-color: var(--dr-gold);
  color: #060D09;
  font-weight: 700;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dr-svc-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  }
}

@media (max-width: 480px) {
  .dr-svc-grid { grid-template-columns: 1fr; }
  .dr-page-hero__stats { gap: 1.25rem; }
  .dr-page-hero__stat-div { display: none; }
  .dr-filter-tab { padding: .75rem 1rem; font-size: .78rem; }
}

/* ── fade-up animation (for hero elements) ────────────────────────────────── */
.dr-fade-up {
  animation: dr-fade-up .7s cubic-bezier(.4,0,.2,1) both;
}
.dr-fade-up[data-delay="100"] { animation-delay: .1s; }
.dr-fade-up[data-delay="200"] { animation-delay: .2s; }
.dr-fade-up[data-delay="300"] { animation-delay: .3s; }

/* ═══════════════════════════════════════════════════════════════════════════
   16. SERVICE DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.dr-svc-detail-wrap { min-block-size: 100vh; }

/* Compact hero variant for inner pages */
.dr-page-hero--detail { padding-block: clamp(4.5rem, 10vw, 7rem) clamp(2.5rem, 5vw, 4rem); }

/* Hero title row: large icon + text */
.dr-det-hero-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.dr-det-hero-icon {
  font-size: 3.5rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(200,168,75,.25));
}

.dr-page-hero--detail .dr-page-hero__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  margin-block-end: .4rem;
}

.dr-det-hero-subtitle-ar,
.dr-det-hero-subtitle-en {
  font-size: .95rem;
  color: var(--dr-text-2);
  margin: 0;
  letter-spacing: .02em;
}
.dr-det-hero-subtitle-ar { font-family: 'Amiri', serif; }
.dr-det-hero-subtitle-en { font-family: 'DM Sans', sans-serif; font-style: italic; }

/* Meta badges row */
.dr-det-badges {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.dr-det-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .85rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--dr-glass-border);
  color: var(--dr-text-2);
}
.dr-det-badge svg { color: var(--dr-gold-dim); }
.dr-det-badge--gold {
  background: rgba(200,168,75,.1);
  border-color: rgba(200,168,75,.22);
  color: var(--dr-gold);
}

/* ── Two-column layout ───────────────────────────────────────────────────── */
.dr-det-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2.5rem;
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* A grid child defaults to min-width:auto, so one long word or a wide table
   can push its track past its share and paint over the neighbouring column. */
.dr-det-layout > * { min-width: 0; }

/* Tablets and phones get one column, in document order: the service
   description first, then the "ابدأ طلبك الآن" card and the rest of the
   sidebar beneath it.

   Stickiness belongs to the two-column layout only and is switched on further
   down under a min-width query — pinned inside a single-column stack the
   sidebar has the whole page to travel down, which is what rode the start card
   over the content as you scrolled. */
@media (max-width: 1024px) {
  .dr-det-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .dr-det-sidebar { order: 0; }
}

/* ── Main content ────────────────────────────────────────────────────────── */
.dr-det-section {
  margin-block-end: 3rem;
}

.dr-det-section-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dr-text);
  margin-block-end: 1.5rem;
  padding-block-end: .875rem;
  border-block-end: 1px solid var(--dr-glass-border);
}
[dir="rtl"] .dr-det-section-title { font-family: 'Amiri', serif; font-size: 1.3rem; }
[dir="ltr"] .dr-det-section-title { font-family: 'Cormorant Garamond', serif; font-style: italic; }

.dr-det-steps-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: .4rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  background: var(--dr-gold);
  color: #060D09;
  font-style: normal;
  font-family: var(--dr-font-body, 'DM Sans', sans-serif);
}

/* Prose area */
.dr-det-prose {
  font-size: .975rem;
  color: var(--dr-text-2);
  line-height: 1.85;
  overflow-wrap: break-word;
}
.dr-det-prose p { margin-block-end: 1rem; }
.dr-det-prose p:last-child { margin-block-end: 0; }

/* Steps accordion */
.dr-det-accordion {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.dr-det-step {
  border: 1px solid var(--dr-glass-border);
  border-radius: var(--dr-r-lg);
  overflow: hidden;
  transition: border-color var(--dr-t);
}
.dr-det-step[open] {
  border-color: var(--dr-glass-border-h);
  box-shadow: 0 4px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(200,168,75,.12);
}

.dr-det-step__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--dr-glass);
  transition: background var(--dr-t-fast);
}
.dr-det-step__head::-webkit-details-marker { display: none; }
.dr-det-step[open] .dr-det-step__head { background: rgba(200,168,75,.06); }
.dr-det-step__head:hover { background: var(--dr-glass-hover); }

.dr-det-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dr-gold) 0%, var(--color-gold-hover) 100%);
  color: #060D09;
  font-size: .8rem;
  font-weight: 800;
  flex-shrink: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}

.dr-det-step__icon { font-size: 1.2rem; flex-shrink: 0; }

.dr-det-step__title {
  flex: 1;
  font-size: .925rem;
  font-weight: 600;
  color: var(--dr-text);
}

.dr-det-step__badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: rgba(200,168,75,.1);
  border: 1px solid rgba(200,168,75,.18);
  color: var(--dr-gold);
  flex-shrink: 0;
}

.dr-det-step__chevron {
  color: var(--dr-text-3);
  flex-shrink: 0;
  transition: transform var(--dr-t);
}
.dr-det-step[open] .dr-det-step__chevron { transform: rotate(180deg); }

.dr-det-step__body {
  padding: 1.25rem;
  border-block-start: 1px solid rgba(255,255,255,.05);
  background: rgba(6,13,9,.5);
}

.dr-det-step__desc {
  font-size: .9rem;
  color: var(--dr-text-2);
  line-height: 1.75;
  margin-block-end: 1rem;
}

/* Prerequisite / fee note carried up from a step's notice field */
.dr-det-step__note {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .8rem .9rem;
  margin-block-end: 1rem;
  border: 1px solid rgba(200,168,75,.22);
  border-radius: 10px;
  background: rgba(200,168,75,.06);
  font-size: .84rem;
  line-height: 1.75;
  color: var(--dr-text-2);
}

.dr-det-step__note strong {
  color: var(--dr-gold);
  font-weight: 700;
}

.dr-det-step__note-file {
  align-self: flex-start;
  margin-block-start: .35rem;
  padding: .35rem .7rem;
  border: 1px solid rgba(200,168,75,.4);
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--dr-gold);
  text-decoration: none;
  transition: background var(--dr-t), border-color var(--dr-t);
}

.dr-det-step__note-file:hover,
.dr-det-step__note-file:focus-visible {
  background: rgba(200,168,75,.12);
  border-color: var(--dr-gold);
}

.dr-det-step__docs-title {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dr-gold);
  margin-block-end: .75rem;
}

.dr-det-docs-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.dr-det-docs-list__item {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .875rem;
  color: var(--dr-text-2);
  padding: .5rem .875rem;
  background: var(--dr-glass);
  border: 1px solid var(--dr-glass-border);
  border-radius: var(--dr-r);
}

.dr-det-docs-list__pin {
  color: var(--dr-gold-dim);
  flex-shrink: 0;
  font-size: .65rem;
}

.dr-det-docs-optional {
  margin-inline-start: auto;
  font-size: .68rem;
  font-weight: 600;
  color: var(--dr-text-3);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 999px;
  padding: .15rem .55rem;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.dr-det-sidebar {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

/* Sticky only where there is a second column to be sticky in. Stated as a
   min-width query rather than as an override inside the mobile block, so it
   cannot depend on which rule happens to come last in the file. */
@media (min-width: 1025px) {
  .dr-det-sidebar {
    position: sticky;
    inset-block-start: 1.5rem;
    /* A sidebar taller than the viewport has nowhere to stick to and ends up
       covering whatever it is pinned over. Cap it and let it scroll itself. */
    max-block-size: calc(100vh - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.dr-det-sidebar-card {
  background: var(--dr-glass);
  border: 1px solid var(--dr-glass-border);
  border-radius: var(--dr-r-lg);
  overflow: hidden;
}

/* Start card */
.dr-det-start-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-color: rgba(200,168,75,.22);
}

.dr-det-start-card__accent {
  margin-block-start: -1.5rem;
  margin-inline: -1.5rem;
  margin-block-end: .25rem;
}

.dr-det-start-card__icon {
  font-size: 2rem;
  line-height: 1;
}

.dr-det-start-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dr-text);
  margin: 0;
}
[dir="rtl"] .dr-det-start-card__title { font-family: 'Amiri', serif; font-size: 1.25rem; }
[dir="ltr"] .dr-det-start-card__title { font-family: 'Cormorant Garamond', serif; font-style: italic; }

.dr-det-start-card__desc {
  font-size: .875rem;
  color: var(--dr-text-2);
  line-height: 1.7;
  margin: 0;
}

.dr-det-start-card__register {
  font-size: .8rem;
  color: var(--dr-text-3);
  text-align: center;
  margin: 0;
}
.dr-det-start-card__register a {
  color: var(--dr-gold);
  text-decoration: none;
  font-weight: 600;
}
.dr-det-start-card__register a:hover { color: var(--dr-gold-light); }

/* Info list */
.dr-det-info-list {
  border-block-start: 1px solid var(--dr-glass-border);
  padding-block-start: 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.dr-det-info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.dr-det-info-item dt {
  font-size: .78rem;
  color: var(--dr-text-3);
  letter-spacing: .03em;
}

.dr-det-info-item dd {
  font-size: .875rem;
  font-weight: 600;
  color: var(--dr-text);
  margin: 0;
}

.dr-det-info-item__fee { color: var(--dr-gold); }

/* Help card */
.dr-det-help-card {
  padding: 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.dr-det-help-card__emoji { font-size: 1.5rem; line-height: 1; }

.dr-det-help-card__text {
  font-size: .85rem;
  color: var(--dr-text-2);
  line-height: 1.65;
  margin: 0;
}

/* Back link */
.dr-det-back-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--dr-text-2);
  text-decoration: none;
  padding: .5rem 0;
  transition: color var(--dr-t-fast), gap var(--dr-t);
}
.dr-det-back-link:hover { color: var(--dr-gold); gap: .75rem; }

/* Full-width button utility */
.dr-btn--full { width: 100%; justify-content: center; }