@charset "UTF-8";
/* =====================================================================
   Modern Dental Clinics — Dr. Mohammad Nofal
   style-ar.css  •  Arabic (RTL) master stylesheet — generated from style-en.css
   Built with CSS logical properties so the same rules mirror for RTL.
   Author: ES Team  •  HTML5 / Bootstrap 5 / CSS3
   ===================================================================== */
@import url("../fonts/fonts-ar.css");

/* ---------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------- */
:root {
  /* Brand palette (sampled from the approved design) */
  --navy-900: #012a4a;
  --navy-800: #013a63;
  --navy-700: #024e7c;
  --navy-600: #0a5c8c;
  --primary:  #0e6ba8;
  --cyan-600: #17b6d8;
  --cyan-500: #22c7e6;   /* bright brand accent — fills, badges, borders, on-dark */
  --cyan-400: #38d6f2;
  --cyan-ink: #0a7ea0;   /* AA-accessible deep cyan — cyan TEXT/links/accents on light (4.6:1) */
  --cyan-soft:#cbe7f6;
  --cyan-100: #e6f5fb;

  --ink:      #1e3346;   /* headings on light */
  --text:     #45586b;   /* body */
  --muted:    #5b6f86;   /* secondary — darkened to meet WCAG AA (5.1:1 on white) */
  --line:     #e4edf5;   /* borders */
  --bg:       #ffffff;
  --bg-soft:  #f4f9fd;
  --bg-soft-2:#eaf3fb;

  --star:     #ffb100;
  --whatsapp: #25d366;
  --danger:   #e5484d;
  --white:    #ffffff;

  /* Gradients */
  --grad-cyan: linear-gradient(120deg, var(--cyan-500), var(--cyan-400));
  --grad-navy: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  --grad-title: linear-gradient(90deg, var(--navy-800), var(--primary));

  /* Typography */
  --font-body: "Cairo", "Tajawal", "Segoe UI", system-ui, sans-serif;
  --font-head: "Cairo", "Tajawal", "Segoe UI", system-ui, sans-serif;

  /* Radius */
  --r-sm: .6rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 4px 14px rgba(2, 62, 108, .06);
  --sh-md: 0 12px 30px rgba(2, 62, 108, .09);
  --sh-lg: 0 22px 50px rgba(2, 62, 108, .14);
  --sh-cyan: 0 14px 30px rgba(34, 199, 230, .35);
  --sh-navy: 0 14px 30px rgba(2, 62, 108, .28);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .28s var(--ease);
  --t-med:  .45s var(--ease);

  /* Layout */
  --header-h: 84px;
  --container: 1200px;
}

/* ---------------------------------------------------------------------
   2. Base / reset
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(.95rem, .9rem + .25vw, 1.05rem);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 .6em;
}

p { margin: 0 0 1rem; }

a { color: var(--primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--cyan-600); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; cursor: pointer; }

:focus-visible { outline: 3px solid var(--cyan-500); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--cyan-500); color: #fff; }

/* Accessible skip link */
.skip-link {
  position: absolute; inset-block-start: -60px; inset-inline-start: 16px;
  z-index: 2000; background: var(--navy-800); color: #fff;
  padding: .6rem 1.2rem; border-radius: var(--r-sm); transition: inset-block-start var(--t-fast);
}
.skip-link:focus { inset-block-start: 12px; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   3. Layout helpers
   --------------------------------------------------------------------- */
.container-x {
  width: min(100% - 2.4rem, var(--container));
  margin-inline: auto;
}

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem); }
.section--soft { background: var(--bg-soft); }
.section--tint {
  background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
}

/* Section heading block */
.sec-head { text-align: center; max-width: 720px; margin-inline: auto; margin-block-end: 3rem; }
.eyebrow {
  display: inline-block;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--primary);
  background: var(--cyan-100);
  padding: .5rem 1.2rem; border-radius: var(--r-pill);
  margin-block-end: 1.1rem;
}
.sec-title {
  font-size: clamp(1.8rem, 1.3rem + 2.4vw, 3rem);
  font-weight: 800; letter-spacing: -.01em; margin-block-end: .8rem;
}
.sec-title .accent { color: var(--cyan-ink); }
.sec-sub { color: var(--muted); font-size: 1.05rem; margin: 0; }

.text-accent { color: var(--cyan-ink); }

/* ---------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------- */
.btn-x {
  --btn-bg: var(--cyan-500);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600; font-size: 1rem; line-height: 1;
  padding: .95rem 1.9rem; border: 2px solid transparent; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: var(--sh-cyan);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
  will-change: transform;
}
.btn-x i { font-size: 1.05em; transition: transform var(--t-fast); }
.btn-x:hover { transform: translateY(-3px); color: var(--btn-fg); }
.btn-x:hover i.bi-arrow-right, .btn-x:hover .arrow { transform: translateX(4px); }
.btn-x:active { transform: translateY(-1px); }

/* bright cyan fill with deep-navy label — keeps the vibrant brand colour while
   meeting WCAG AA (navy on cyan ≈ 6.5:1, vs 2:1 for white on cyan) */
.btn-cyan  { --btn-bg: var(--cyan-500); --btn-fg: var(--navy-900); box-shadow: var(--sh-cyan); }
.btn-cyan:hover { --btn-bg: var(--cyan-600); box-shadow: 0 18px 36px rgba(34,199,230,.45); }

.btn-navy  { --btn-bg: var(--navy-800); box-shadow: var(--sh-navy); }
.btn-navy:hover { --btn-bg: var(--navy-900); }

.btn-ghost {
  --btn-bg: transparent; --btn-fg: #fff;
  border-color: rgba(255,255,255,.6); box-shadow: none;
}
.btn-ghost:hover { --btn-bg: rgba(255,255,255,.14); }

.btn-outline {
  --btn-bg: transparent; --btn-fg: var(--navy-800);
  border-color: var(--line); box-shadow: none;
}
.btn-outline:hover { --btn-bg: var(--navy-800); --btn-fg:#fff; border-color: var(--navy-800); }

.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: 1.1rem 2.3rem; font-size: 1.08rem; }

/* Circular carousel controls */
.nav-round {
  inline-size: 3.2rem; block-size: 3.2rem; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line);
  background: #fff; color: var(--navy-800); font-size: 1.2rem;
  box-shadow: var(--sh-sm); transition: all var(--t-fast);
}
.nav-round:hover { background: var(--navy-800); color: #fff; transform: scale(1.08); }
.nav-round.is-active { background: var(--navy-800); color: #fff; }

/* ---------------------------------------------------------------------
   5. Header / navigation
   --------------------------------------------------------------------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 1030;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-block-end: 1px solid transparent;
  transition: box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.site-header.is-stuck { box-shadow: var(--sh-sm); border-block-end-color: var(--line); background: rgba(255,255,255,.95); }

.nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-block-size: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; min-inline-size: 0; flex: none; }
.brand img { block-size: clamp(38px, 3.2vw, 46px); width: auto; max-inline-size: min(58vw, 200px); object-fit: contain; }

.main-nav ul { display: flex; align-items: center; gap: .1rem; }
.main-nav a {
  display: inline-block; padding: .5rem .6rem; border-radius: var(--r-pill);
  color: var(--ink); font-weight: 500; font-size: .9rem; white-space: nowrap; position: relative;
  transition: color var(--t-fast), background var(--t-fast);
}
.main-nav a:hover { color: var(--primary); }
.main-nav a.is-active { color: var(--primary); background: var(--cyan-100); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: .5rem; }

/* language switch */
.lang-switch {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--navy-800); font-weight: 600; font-size: .9rem;
  background: #fff; transition: all var(--t-fast);
}
.lang-switch:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
/* the in-nav language link is only for the mobile drawer; hide it on desktop
   so only the .nav-actions switch shows (prevents the duplicate button) */
.main-nav .lang-switch { display: none; }
/* drawer header (logo + close) is injected by JS; only shown inside the mobile drawer */
.nav-drawer-head, .nav-close { display: none; }

/* hamburger */
.nav-toggle {
  display: none; inline-size: 46px; block-size: 46px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: #fff; position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; block-size: 2px; border-radius: 2px;
  background: var(--navy-800); transition: transform var(--t-fast), opacity var(--t-fast), inset-block-start var(--t-fast);
}
.nav-toggle span { inset-inline: 12px; inset-block-start: 21px; }              /* middle bar */
.nav-toggle span::before, .nav-toggle span::after { inset-inline: 0; }          /* full-width top & bottom bars */
.nav-toggle span::before { inset-block-start: -6px; }
.nav-toggle span::after  { inset-block-start: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { inset-block-start: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { inset-block-start: 0; transform: rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0; background: rgba(1,42,74,.45);
  opacity: 0; visibility: hidden; transition: opacity var(--t-fast), visibility var(--t-fast); z-index: 1029;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------------
   6. Hero (carousel)
   --------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero-slider { position: relative; overflow: hidden; }
.hero-slide {
  position: relative; min-block-size: min(88vh, 760px);
  display: grid; align-items: center;
  padding-block: 4rem; overflow: hidden;
}
.hero-slide::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(1,42,74,.86) 0%, rgba(2,78,124,.6) 45%, rgba(2,78,124,.15) 100%);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0; object-fit: cover; inline-size: 100%; block-size: 100%;
  transform: scale(1.08); transition: transform 7s ease;
}
.hero-slide.is-active .hero-bg { transform: scale(1); }
.hero-content { position: relative; z-index: 2; max-width: 640px; color: #fff; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  padding: .5rem 1.1rem; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  backdrop-filter: blur(6px); margin-block-end: 1.4rem;
}
.hero-badge .dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--cyan-400); box-shadow: 0 0 0 4px rgba(56,214,242,.3); }
.hero-title {
  color: #fff; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(2.4rem, 1.6rem + 4.5vw, 4.6rem); line-height: 1.05; margin-block-end: 1.2rem;
}
.hero-text { font-size: clamp(1rem, .95rem + .4vw, 1.2rem); color: rgba(255,255,255,.9); max-width: 34em; margin-block-end: 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-dots { position: absolute; inset-block-end: 2rem; inset-inline: 0; z-index: 3; display: flex; justify-content: center; gap: .6rem; }
.hero-dots button {
  inline-size: 34px; block-size: 6px; border: 0; border-radius: var(--r-pill);
  background: rgba(255,255,255,.4); transition: background var(--t-fast), inline-size var(--t-fast);
}
.hero-dots button.is-active { background: #fff; inline-size: 52px; }

/* stack slides */
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease); }
.hero-slide.is-active { position: relative; opacity: 1; visibility: visible; }
.hero-slider { min-block-size: min(88vh, 760px); }

/* ---------------------------------------------------------------------
   7. About
   --------------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.about-media { position: relative; }
.about-media img { border-radius: var(--r-lg); box-shadow: var(--sh-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-badge {
  position: absolute; inset-block-start: -1.4rem; inset-inline-start: -1.2rem;
  background: var(--grad-navy); color: #fff; border-radius: var(--r-md);
  padding: 1rem 1.4rem; box-shadow: var(--sh-navy); text-align: center;
}
.about-badge b { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1; }
.about-badge span { font-size: .8rem; opacity: .85; }
.about-float {
  position: absolute; inset-block-end: -1.2rem; inset-inline-end: -1rem;
  background: var(--grad-navy); color: #fff; border-radius: var(--r-md);
  padding: 1.1rem 1.5rem; box-shadow: var(--sh-navy); text-align: center; min-inline-size: 150px;
}
.about-float small { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.about-float b { font-size: 2rem; font-weight: 800; display: block; line-height: 1.1; }

.about-body .eyebrow { margin-block-end: 1rem; }
.about-title { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); font-weight: 800; margin-block-end: 1.2rem; }
.about-title .accent { display: block; color: var(--cyan-ink); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-block: 2rem; }
.stat-card {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.4rem 1.5rem; transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.stat-card b { display: block; font-size: 2.2rem; font-weight: 800; color: var(--navy-800); line-height: 1; }
.stat-card span { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------------
   8. Services grid
   --------------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.svc-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  min-block-size: 320px; display: flex; align-items: flex-end;
  box-shadow: var(--sh-sm); isolation: isolate;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.svc-card img {
  position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform var(--t-med);
}
.svc-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(1,42,74,.92) 8%, rgba(2,78,124,.55) 45%, rgba(2,78,124,.05) 85%);
  transition: opacity var(--t-med);
}
.svc-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.svc-card:hover img { transform: scale(1.09); }
.svc-body { padding: 1.5rem; color: #fff; }
.svc-body h3 { color: #fff; font-size: 1.2rem; margin-block-end: .5rem; }
.svc-body p { color: rgba(255,255,255,.82); font-size: .9rem; margin: 0; }
.svc-card.is-tall { min-block-size: 400px; }
.svc-card .card-link { position: absolute; inset: 0; z-index: 4; font-size: 0; color: transparent; }
.svc-card .card-link:focus-visible { outline: 3px solid var(--cyan-400); outline-offset: -4px; }
.svc-card .svc-body { position: relative; z-index: 3; pointer-events: none; }

/* ---------------------------------------------------------------------
   9. Solutions slider ("Find Your Perfect Solution")
   --------------------------------------------------------------------- */
.slider-shell { position: relative; }
.drag-track { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 1rem; scrollbar-width: none; }
.drag-track::-webkit-scrollbar { display: none; }
.sol-card {
  flex: 0 0 clamp(260px, 28%, 300px); scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-sm); transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.sol-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.sol-card .thumb { aspect-ratio: 16/11; overflow: hidden; }
.sol-card .thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--t-med); }
.sol-card:hover .thumb img { transform: scale(1.07); }
.sol-body { padding: 1.3rem 1.4rem 1.6rem; }
.tag-soft {
  display: inline-block; font-size: .74rem; font-weight: 600; color: var(--primary);
  background: var(--cyan-100); padding: .32rem .8rem; border-radius: var(--r-pill); margin-block-end: .8rem;
}
.sol-body h3 { font-size: 1.12rem; display: flex; align-items: center; gap: .5rem; margin-block-end: .5rem; }
.sol-body h3 .arrow { color: var(--cyan-ink); }
.sol-body p { font-size: .88rem; color: var(--muted); margin: 0; }
.slider-arrows { display: flex; gap: .6rem; justify-content: center; margin-block-start: 1.6rem; }

/* ---------------------------------------------------------------------
   10. Before / After
   --------------------------------------------------------------------- */
.filter-tabs { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-block-end: 2.5rem; }
.filter-tab {
  padding: .6rem 1.4rem; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: #fff; color: var(--navy-800); font-weight: 600; font-size: .92rem; transition: all var(--t-fast);
}
.filter-tab:hover { border-color: var(--cyan-500); color: var(--primary); }
.filter-tab.is-active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.ba-card { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); }
.ba-compare {
  position: relative; aspect-ratio: 4/3; overflow: hidden; user-select: none; touch-action: none; cursor: ew-resize;
}
.ba-compare img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; }
.ba-after { clip-path: inset(0 0 0 50%); }
.ba-label {
  position: absolute; inset-block-start: .8rem; z-index: 4; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; padding: .3rem .8rem; border-radius: var(--r-pill); color: #fff; backdrop-filter: blur(4px);
}
.ba-label.before { inset-inline-start: .8rem; background: rgba(1,42,74,.8); }
.ba-label.after  { inset-inline-end: .8rem; background: rgba(34,199,230,.85); }
.ba-handle {
  position: absolute; inset-block: 0; inset-inline-start: 50%; inline-size: 3px; background: #fff; z-index: 5; transform: translateX(-50%);
}
.ba-handle::after {
  content: "\F493"; font-family: "bootstrap-icons"; font-size: 1rem;
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%);
  inline-size: 40px; block-size: 40px; border-radius: 50%; background: #fff; color: var(--navy-800);
  display: grid; place-items: center; box-shadow: var(--sh-md);
}
.ba-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; }
.ba-meta b { display: block; color: var(--ink); }
.ba-meta small { color: var(--muted); }
.ba-meta .hint { font-size: .8rem; color: var(--primary); background: var(--cyan-100); padding: .4rem .9rem; border-radius: var(--r-pill); white-space: nowrap; }

/* ---------------------------------------------------------------------
   11. Why choose us
   --------------------------------------------------------------------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.why-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2rem; box-shadow: var(--sh-sm); transition: transform var(--t-fast), box-shadow var(--t-fast);
  position: relative; overflow: hidden;
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.why-ico {
  inline-size: 3.4rem; block-size: 3.4rem; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--cyan-100); color: var(--cyan-600); font-size: 1.4rem; margin-block-end: 1.3rem;
  transition: transform var(--t-fast);
}
.why-card:hover .why-ico { transform: rotate(-6deg) scale(1.05); }
.why-card h3 { font-size: 1.15rem; margin-block-end: .6rem; }
.why-card p { color: var(--muted); font-size: .92rem; margin: 0; }
.why-card.is-dark { background: var(--grad-navy); border-color: transparent; color: #fff; }
.why-card.is-dark h3 { color: #fff; }
.why-card.is-dark p { color: rgba(255,255,255,.82); }
.why-card.is-dark .why-ico { background: rgba(255,255,255,.14); color: #fff; }
.why-stat { margin-block-start: 1.3rem; padding-block-start: 1.2rem; border-block-start: 1px solid rgba(255,255,255,.2); }
.why-stat b { font-size: 2.2rem; font-weight: 800; color: var(--cyan-400); display: block; line-height: 1; }
.why-stat span { font-size: .82rem; opacity: .85; }

/* ---------------------------------------------------------------------
   12. CTA band
   --------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; color: #fff; text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: var(--grad-navy); opacity: .93; z-index: 1; }
.cta-band .cta-bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: 0; }
.cta-inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 2rem + 6vw, 6rem); }
.cta-band .eyebrow { background: rgba(255,255,255,.16); color: #fff; }
.cta-title { color: #fff; font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); font-weight: 800; margin-block-end: 1rem; }
.cta-title .accent { color: var(--cyan-400); }
.cta-text { color: rgba(255,255,255,.88); max-width: 620px; margin-inline: auto; margin-block-end: 2rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   13. Specialists
   --------------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.team-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-sm); transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.team-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.team-photo { aspect-ratio: 1/1; overflow: hidden; background: var(--bg-soft-2); }
.team-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--t-med); }
.team-card:hover .team-photo img { transform: scale(1.06); }
.team-body { padding: 1.4rem; }
.team-body h3 { font-size: 1.15rem; margin-block-end: .2rem; }
.team-role { color: var(--cyan-ink); font-weight: 600; font-size: .9rem; margin-block-end: .8rem; }
.team-body p { font-size: .88rem; color: var(--muted); margin-block-end: 1rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { font-size: .72rem; font-weight: 600; color: var(--navy-700); background: var(--bg-soft-2); padding: .3rem .7rem; border-radius: var(--r-pill); }

/* ---------------------------------------------------------------------
   14. Testimonials
   --------------------------------------------------------------------- */
.rev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-end: 2.5rem; }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.rev-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem;
  box-shadow: var(--sh-sm); position: relative; transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.rev-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.rev-card .quote { font-size: 2.4rem; color: var(--cyan-soft); line-height: .6; margin-block-end: .6rem; font-family: Georgia, serif; }
.rev-stars { color: var(--star); font-size: .95rem; margin-block-end: .9rem; letter-spacing: .1em; }
.rev-card p { color: var(--text); font-size: .95rem; }
.rev-person { display: flex; align-items: center; gap: .8rem; margin-block-start: 1.3rem; }
.rev-person img { inline-size: 48px; block-size: 48px; border-radius: 50%; object-fit: cover; }
.rev-person b { display: block; color: var(--ink); font-size: .95rem; }
.rev-person small { color: var(--muted); font-size: .82rem; }
.rev-card.is-dark { background: var(--grad-navy); border-color: transparent; }
.rev-card.is-dark p { color: rgba(255,255,255,.9); }
.rev-card.is-dark .quote { color: rgba(255,255,255,.25); }
.rev-card.is-dark .rev-person b { color: #fff; }
.rev-card.is-dark .rev-person small { color: rgba(255,255,255,.7); }

/* ---------------------------------------------------------------------
   15. Blog
   --------------------------------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.post-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-sm); transition: transform var(--t-fast), box-shadow var(--t-fast); display: flex; flex-direction: column;
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.post-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.post-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--t-med); }
.post-card:hover .post-thumb img { transform: scale(1.07); }
.post-cat {
  position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem;
  background: var(--navy-800); color: #fff; font-size: .74rem; font-weight: 600;
  padding: .35rem .9rem; border-radius: var(--r-pill);
}
.post-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post-meta { display: flex; gap: 1.1rem; font-size: .8rem; color: var(--muted); margin-block-end: .8rem; }
.post-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.post-body h3 { font-size: 1.14rem; margin-block-end: .7rem; }
.post-body h3 a { color: var(--ink); }
.post-body h3 a:hover { color: var(--primary); }
.post-body p { font-size: .9rem; color: var(--muted); margin-block-end: 1.2rem; }
.post-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: auto; padding-block-start: 1rem; border-block-start: 1px solid var(--line); }
.post-author { display: flex; align-items: center; gap: .6rem; font-size: .85rem; font-weight: 600; color: var(--ink); }
.avatar-initials { inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--grad-navy); color: #fff; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.read-more { font-weight: 600; font-size: .88rem; color: var(--cyan-ink); display: inline-flex; gap: .3rem; align-items: center; }
.read-more:hover .arrow { transform: translateX(3px); }
.read-more .arrow { transition: transform var(--t-fast); }

/* ---------------------------------------------------------------------
   16. Insurance
   --------------------------------------------------------------------- */
.ins-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; }
.ins-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.2rem;
  display: grid; place-items: center; min-block-size: 110px; box-shadow: var(--sh-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.ins-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.ins-card img { max-block-size: 64px; width: auto; object-fit: contain; filter: saturate(1); }

/* payment methods */
.pay-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.pay-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: .9rem 1.3rem; min-inline-size: 96px; min-block-size: 66px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  box-shadow: var(--sh-sm); transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.pay-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.pay-card .pay-ico { font-size: 1.9rem; color: var(--primary); line-height: 1; }
.pay-card small { font-size: .72rem; color: var(--muted); text-align: center; }
.pay-txt { font-family: Arial, Helvetica, sans-serif; font-weight: 800; line-height: 1; }
.pay-visa { color: #1434cb; font-style: italic; font-size: 1.55rem; letter-spacing: .01em; }
.pay-amex { color: #2e77bc; font-size: 1.15rem; letter-spacing: .04em; }
.pay-mc { block-size: 30px; width: auto; display: block; }
/* compact spacing around the payment band (home page) */
#payments { padding-block: clamp(1.5rem, .8rem + 1.5vw, 2.5rem); }
#payments .sec-head { margin-block-end: clamp(1.5rem, 1rem + 1vw, 2rem); }
#insurance { padding-block-end: clamp(1.75rem, 1rem + 1.5vw, 2.75rem); }
#payments + #contact { padding-block-start: clamp(2rem, 1.25rem + 1.5vw, 3.25rem); }

/* ---------------------------------------------------------------------
   17. Contact
   --------------------------------------------------------------------- */
.contact-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-block-end: 2.5rem; }
.info-card {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.3rem 1.4rem;
  display: flex; gap: .9rem; align-items: flex-start; transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.info-ico { inline-size: 2.8rem; block-size: 2.8rem; flex: none; border-radius: var(--r-sm); background: #fff; color: var(--primary); display: grid; place-items: center; font-size: 1.15rem; box-shadow: var(--sh-sm); }
.info-card small { display: block; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.info-card b { color: var(--ink); font-size: 1rem; display: block; margin-block: .1rem; word-break: break-word; }
.info-card span { color: var(--muted); font-size: .82rem; }

.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.6rem; align-items: stretch; }
.contact-form-wrap { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.contact-form-wrap h3 { font-size: 1.4rem; margin-block-end: 1.4rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-block-end: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: .88rem; color: var(--ink); margin-block-end: .45rem; }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea {
  inline-size: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); font-family: inherit; font-size: 1rem; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-block-size: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan-500); box-shadow: 0 0 0 4px rgba(34,199,230,.15); }
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(229,72,77,.12); }
.field .err { color: var(--danger); font-size: .78rem; margin-block-start: .3rem; display: none; }
.field.has-error .err { display: block; }
.form-note { font-size: .85rem; padding: .9rem 1.1rem; border-radius: var(--r-sm); margin-block-start: 1rem; display: none; }
.form-note.ok { display: block; background: #e7f8ee; color: #12704a; border: 1px solid #b6e6cc; }
.form-note.err-note { display: block; background: #fdecec; color: #b4272b; border: 1px solid #f3c2c3; }

.map-wrap { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); min-block-size: 340px; position: relative; border: 1px solid var(--line); }
.map-wrap iframe, .map-wrap img { inline-size: 100%; block-size: 100%; min-block-size: 340px; object-fit: cover; border: 0; display: block; }

/* ---------------------------------------------------------------------
   18. Footer
   --------------------------------------------------------------------- */
.site-footer { background: var(--grad-navy); color: rgba(255,255,255,.78); padding-block: 4rem 0; position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr 1.6fr; gap: 2rem; }
.footer-brand img { block-size: 110px; width: auto; margin-block-end: 1.2rem; }
.footer-brand p { font-size: .9rem; max-width: 30ch; }
.social-row { display: flex; gap: .6rem; margin-block-start: 1.3rem; }
.social-row a {
  inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: #fff; font-size: 1.05rem; transition: transform var(--t-fast), background var(--t-fast);
}
.social-row a:hover { background: var(--cyan-500); transform: translateY(-3px); }
.footer-col h4 { color: #fff; font-size: 1.05rem; margin-block-end: 1.2rem; }
.footer-col li { margin-block-end: .7rem; }
.footer-col a { color: rgba(255,255,255,.78); font-size: .92rem; display: inline-flex; gap: .5rem; align-items: center; }
.footer-col a::before { content: "\2022"; color: var(--cyan-400); }
.footer-col a:hover { color: #fff; padding-inline-start: .3rem; }
.footer-contact li { display: flex; gap: .8rem; margin-block-end: 1.1rem; align-items: flex-start; }
.footer-contact .fc-ico { inline-size: 2.4rem; block-size: 2.4rem; flex: none; border-radius: var(--r-sm); background: rgba(255,255,255,.1); display: grid; place-items: center; color: var(--cyan-400); }
.footer-contact b { color: #fff; font-weight: 600; display: block; font-size: .95rem; }
.footer-contact small { color: rgba(255,255,255,.6); font-size: .8rem; }
.hours-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: 1.2rem 1.3rem; }
.hours-card li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .55rem; border-block-end: 1px solid rgba(255,255,255,.08); font-size: .88rem; }
.hours-card li:last-child { border-block-end: 0; }
.hours-card .day { color: rgba(255,255,255,.85); }
.hours-card .time { color: #fff; font-weight: 600; }
.hours-card .time.closed { color: var(--danger); }
.footer-bottom { margin-block-start: 3rem; border-block-start: 1px solid rgba(255,255,255,.12); padding-block: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-bottom p { margin: 0; font-size: .86rem; }
.footer-bottom .brand-link { color: var(--cyan-400); font-weight: 600; }
.footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,.7); font-size: .86rem; }
.footer-legal a::before { content: none; }
.footer-legal a:hover { color: #fff; }

/* ---------------------------------------------------------------------
   19. Floating WhatsApp
   --------------------------------------------------------------------- */
.wa-float {
  position: fixed; inset-block-end: 1.5rem; inset-inline-end: 1.5rem; z-index: 1040;
  inline-size: 3.6rem; block-size: 3.6rem; border-radius: 50%; background: var(--whatsapp); color: #fff;
  display: grid; place-items: center; font-size: 1.7rem; box-shadow: 0 10px 26px rgba(37,211,102,.5);
  transition: transform var(--t-fast);
}
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: waPulse 2.4s infinite; }
.wa-float:hover { transform: scale(1.1); color: #fff; }
@keyframes waPulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 18px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* Back-to-top */
.to-top {
  position: fixed; inset-block-end: 1.5rem; inset-inline-start: 1.5rem; z-index: 1040;
  inline-size: 3rem; block-size: 3rem; border-radius: 50%; border: 0; background: var(--navy-800); color: #fff;
  display: grid; place-items: center; font-size: 1.2rem; box-shadow: var(--sh-navy);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: all var(--t-fast);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--cyan-500); }

/* ---------------------------------------------------------------------
   19b. Mobile bottom action bar (phones) — injected by JS on every page
   --------------------------------------------------------------------- */
.mobile-actionbar { display: none; }
@media (max-width: 768px) {
  .mobile-actionbar {
    display: flex; direction: ltr;            /* fixed physical order in both languages */
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 1020;
    align-items: stretch; justify-content: space-around;
    background: var(--navy-900);
    padding: .5rem .5rem;
    padding-block-end: max(.5rem, env(safe-area-inset-bottom));
    border-start-start-radius: 26px; border-start-end-radius: 26px;   /* rounded top corners */
    box-shadow: 0 -8px 24px rgba(1, 42, 74, .28);
  }
  .mab-item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: .3rem; min-block-size: 46px; padding-block-start: .2rem;
    color: #fff; font-size: .72rem; font-weight: 500; line-height: 1.15; text-align: center; text-decoration: none;
  }
  .mab-item > i { font-size: 1.35rem; color: var(--cyan-400); transition: transform var(--t-fast); }
  .mab-item:hover { color: var(--cyan-400); }
  .mab-item:active > i { transform: scale(.9); }
  /* elevated WhatsApp button in the centre */
  .mab-wa { position: relative; }
  .mab-wa .mab-wa-circle {
    position: absolute; inset-block-start: -36px; left: 50%; transform: translateX(-50%);
    inline-size: 70px; block-size: 70px; display: block;
    filter: drop-shadow(0 4px 6px rgba(1, 42, 74, .35));
    transition: transform var(--t-fast);
  }
  .mab-wa-svg { inline-size: 100%; block-size: 100%; display: block; overflow: visible; }
  .wa-bubble { fill: var(--whatsapp); stroke: #fff; stroke-width: 3.4; stroke-linejoin: round; paint-order: stroke; }
  .wa-phone { fill: #fff; }
  .mab-wa:active .mab-wa-circle { transform: translateX(-50%) scale(.93); }
  /* make room for the bar and remove the standalone floating buttons on phones */
  body { padding-block-end: 4.75rem; }
  .wa-float, .to-top { display: none !important; }
}

/* ---------------------------------------------------------------------
   20. Inner page hero (sub pages)
   --------------------------------------------------------------------- */
.page-hero { position: relative; color: #fff; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: var(--grad-navy); opacity: .9; z-index: 1; }
.page-hero .ph-bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: 0; }
.page-hero-inner { position: relative; z-index: 2; padding-block: clamp(3rem, 2rem + 5vw, 5.5rem); text-align: center; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); font-weight: 800; margin-block-end: .8rem; }
.page-hero .crumbs { display: inline-flex; gap: .5rem; align-items: center; font-size: .9rem; color: rgba(255,255,255,.8); }
.page-hero .crumbs a { color: var(--cyan-400); }
.page-hero .crumbs .sep { opacity: .6; }

/* generic prose card */
.prose-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--sh-sm); }
.feature-list li { display: flex; gap: .8rem; align-items: flex-start; margin-block-end: .9rem; }
.feature-list li i { color: var(--cyan-500); font-size: 1.15rem; margin-block-start: .15rem; }

/* article body (blog post pages) */
.article-body h2 { font-size: 1.35rem; margin-block: 1.7rem .6rem; color: var(--navy-800); }
.article-body h2:first-of-type { margin-block-start: 1rem; }
.article-body p { color: var(--text); line-height: 1.85; }
.article-body .post-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-block-start: 1px solid var(--line); padding-block-start: 1.3rem; }

/* two-column media + text row (reusable) */
.split { display: flex; gap: clamp(2rem,1rem + 4vw,4rem); align-items: center; }
.split > * { flex: 1 1 0; min-inline-size: 0; }   /* equal columns that never blow out */
.split img { border-radius: var(--r-lg); box-shadow: var(--sh-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split.reverse { direction: ltr; }

/* Prevent grid blow-out: 1fr children must be allowed to shrink below their
   content size, otherwise long headings widen the column past the container
   and get clipped (esp. large RTL headings). */
.split > *, .about-grid > *, .contact-grid > *, .footer-grid > *,
.stat-grid > *, .stat-band > *, .rev-head > * { min-inline-size: 0; }
.sec-title, .about-title, .hero-title, .cta-title,
.page-hero h1, .split h2, .prose-card h2 { overflow-wrap: break-word; }

/* mission / vision / values */
.mvc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }

/* numbered process steps */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; counter-reset: step; }
.step-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2.4rem 1.6rem 1.6rem; box-shadow: var(--sh-sm); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.step-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.step-card::before { counter-increment: step; content: counter(step,decimal-leading-zero); position: absolute; inset-block-start: -1.1rem; inset-inline-start: 1.4rem; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; background: var(--grad-cyan); color: #fff; font-weight: 800; display: grid; place-items: center; box-shadow: var(--sh-cyan); }
.step-card h3 { font-size: 1.1rem; margin-block-end: .5rem; }
.step-card p { font-size: .9rem; color: var(--muted); margin: 0; }

/* stats band (dark) */
.stat-band { background: var(--grad-navy); border-radius: var(--r-lg); padding: clamp(2.5rem,1.8rem + 2.5vw,3.5rem) clamp(1.75rem,1rem + 2.5vw,3.5rem); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2.25rem 1.25rem; text-align: center; color: #fff; box-shadow: var(--sh-navy); }
.stat-band > div { padding-inline: .5rem; }
.stat-band .n { font-size: clamp(2rem,1.4rem + 2vw,2.8rem); font-weight: 800; color: var(--cyan-400); line-height: 1; }
.stat-band .l { font-size: .9rem; opacity: .85; margin-block-start: .4rem; }

/* FAQ (native details, no JS needed) */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); margin-block-end: 1rem; overflow: hidden; transition: box-shadow var(--t-fast); }
.faq details[open] { box-shadow: var(--sh-md); }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "\F64D"; font-family: "bootstrap-icons"; color: var(--cyan-600); transition: transform var(--t-fast); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 1.3rem 1.2rem; color: var(--muted); font-size: .95rem; }

/* data table (design-system component; horizontally scrolls on small screens) */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); box-shadow: var(--sh-sm); border: 1px solid var(--line); }
.table-x { inline-size: 100%; border-collapse: collapse; background: #fff; min-inline-size: 520px; }
.table-x caption { caption-side: top; text-align: start; font-weight: 700; color: var(--ink); padding: 1rem 1.2rem; }
.table-x thead th { background: var(--grad-navy); color: #fff; font-weight: 600; font-size: .9rem; text-align: start; padding: 1rem 1.2rem; white-space: nowrap; }
.table-x th:first-child { border-start-start-radius: 0; }
.table-x tbody td { padding: .95rem 1.2rem; border-block-start: 1px solid var(--line); font-size: .92rem; color: var(--text); }
.table-x tbody tr:nth-child(even) { background: var(--bg-soft); }
.table-x tbody tr:hover { background: var(--cyan-100); }
.table-x .price { font-weight: 700; color: var(--primary); }

/* call-out row */
.callout { background: var(--cyan-100); border: 1px solid var(--cyan-soft); border-radius: var(--r-lg); padding: clamp(1.75rem,1.25rem + 1.5vw,2.5rem) clamp(1.75rem,1rem + 2vw,3rem); display: flex; gap: 1.5rem 2.5rem; align-items: center; flex-wrap: wrap; justify-content: space-between; max-inline-size: 1000px; margin-inline: auto; }
.callout .ci { display: flex; gap: 1.2rem; align-items: center; flex: 1 1 320px; }
.callout .btn-x { flex: 0 0 auto; }
.callout .ci i { font-size: 2.4rem; color: var(--primary); flex: none; }
.callout h3 { margin: 0; font-size: 1.3rem; line-height: 1.3; }
.callout p { margin: .45rem 0 0; color: var(--muted); }

@media (max-width: 1024px){ .steps{grid-template-columns:repeat(2,1fr);} .stat-band{grid-template-columns:repeat(2,1fr);} .mvc-grid{grid-template-columns:1fr;} }
@media (max-width: 768px){ .split{flex-direction:column;} .split > *{flex-basis:auto; width:100%;} .split .split-media{order:-1;} }
@media (max-width: 560px){ .steps{grid-template-columns:1fr;} .stat-band{grid-template-columns:1fr 1fr;} }

/* ---------------------------------------------------------------------
   21. AOS-lite reveal (fallback if AOS lib missing) & utilities
   --------------------------------------------------------------------- */
/* Self-owned reveal system (does NOT depend on external aos.css, so content
   is never permanently hidden if a CDN fails). AOS.js — when present — adds
   .aos-animate; our IntersectionObserver fallback adds .in/.aos-animate. */
[data-aos], [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-aos="fade-right"] { transform: translateX(-32px); }
[data-aos="fade-left"]  { transform: translateX(32px); }
[data-aos="zoom-in"]    { transform: scale(.92); }
[data-aos].aos-animate, [data-aos].in,
[data-reveal].in, [data-reveal].aos-animate { opacity: 1; transform: none; }

.mb-0{margin-block-end:0}.mt-2{margin-block-start:1rem}.text-center{text-align:center}

/* ---------------------------------------------------------------------
   22. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 76px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .team-grid, .rev-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .ins-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-info { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1120px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  /* IMPORTANT: backdrop-filter on the header makes it the containing block for
     position:fixed descendants, which would trap the drawer at header height.
     Drop it on mobile so the fixed drawer spans the full viewport height. */
  .site-header, .site-header.is-stuck { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .main-nav {
    position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(86vw, 340px);
    background: #fff; box-shadow: var(--sh-lg); padding: 1.25rem 1.5rem 2rem;
    transform: translateX(110%); transition: transform var(--t-med), visibility var(--t-med);
    z-index: 1031; overflow-y: auto; display: flex; flex-direction: column;
    visibility: hidden; /* keep off-screen links out of keyboard focus order */
  }
  body.nav-open .main-nav { transform: translateX(0); visibility: visible; }

  /* drawer header: just the circular close button, pinned to the physical
     right (top-right of the drawer, where the hamburger sits) for both langs */
  .nav-drawer-head {
    display: flex; align-items: center; justify-content: flex-end;
    margin-block-end: 1.1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--line);
  }
  .nav-close {
    display: grid; place-items: center; flex: none;
    inline-size: 42px; block-size: 42px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--bg-soft); color: var(--navy-800);
    font-size: 1.05rem; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  }
  .nav-close:hover, .nav-close:focus-visible { background: var(--navy-800); color: #fff; transform: rotate(90deg); }

  .main-nav ul { flex-direction: column; align-items: stretch; gap: .15rem; }
  .main-nav a { padding: .9rem 1rem; border-radius: var(--r-md); font-size: 1.05rem; font-weight: 500; }
  .main-nav a:hover { background: var(--bg-soft); color: var(--primary); }
  .main-nav a.is-active { background: var(--cyan-100); color: var(--primary); font-weight: 600; }

  .nav-actions .lang-switch { display: none; }
  .main-nav .lang-switch {
    display: inline-flex; justify-content: center; margin-block-start: auto;
    padding-block: .85rem; font-size: 1rem;
  }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 520px; margin-inline: auto; }
  .ba-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
/* RTL drawer flips to the left */

@media (max-width: 768px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .rev-grid, .blog-grid, .team-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
  .hero-slide { min-block-size: 82vh; }

  /* "Find Your Perfect Solution": stack the cards as a wrapping grid (no slider) */
  .drag-track { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; padding-block-end: 0; }
  .drag-track .sol-card { flex: 1 1 calc(50% - .7rem); }
  .slider-arrows { display: none; }

  /* home page (mobile): counter goes ABOVE the image, right under the hero slider.
     display:contents lets the counter/eyebrow/etc. be ordered across the grid.
     align-items:stretch is required so the counter fills the width (2 normal
     cards side by side) instead of shrinking to small centred squares. */
  .about-grid { display: flex; flex-direction: column; align-items: stretch; }
  .about-grid .about-body { display: contents; }
  .about-grid .stat-grid { order: -2; margin-block: 0 1.6rem; width: 100%; }
  .about-grid .about-media { order: -1; margin-block-end: 1.6rem; width: 100%; max-inline-size: none; margin-inline: 0; }
  .about-grid .eyebrow, .about-grid .btn-x { align-self: flex-start; }
}

@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
  .why-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
  .contact-info { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .ins-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .about-badge { inset-inline-start: 0; }
  .hero-cta .btn-x { width: 100%; justify-content: center; }
  /* larger tap targets for footer links on small screens */
  .footer-col a, .footer-legal a { padding-block: .3rem; }
  .footer-contact li { margin-block-end: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-aos], [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* =====================================================================
   RTL overrides (Arabic).  <html dir="rtl"> makes every logical
   property mirror automatically; below we only fix the few physical
   properties, transforms and gradients that do not auto-flip, plus
   Arabic typography (no letter-spacing / uppercase).
   ===================================================================== */
html { direction: rtl; }
body { line-height: 1.85; }

/* Arabic typography: drop Latin-only letter-spacing & uppercasing */
.eyebrow, .hero-badge, .stat-card span, .about-float small,
.info-card small, .why-stat span, .cta-band .eyebrow, .page-hero .crumbs {
  letter-spacing: normal;
  text-transform: none;
}
h1, h2, h3, h4, h5, h6 { line-height: 1.3; }
.hero-title { line-height: 1.2; }

/* Hero overlay gradient should originate from the (right) content side */
.hero-slide::before {
  background: linear-gradient(260deg, rgba(1,42,74,.86) 0%, rgba(2,78,124,.6) 45%, rgba(2,78,124,.15) 100%);
}

/* Directional arrows: mirror the glyphs */
.btn-x i.bi-arrow-right,
.read-more .arrow,
.sol-body h3 .arrow,
.crumbs .bi-arrow-right { display: inline-block; transform: scaleX(-1); }
.btn-x:hover i.bi-arrow-right { transform: scaleX(-1) translateX(4px); }
.read-more:hover .arrow { transform: scaleX(-1) translateX(3px); }

/* Mobile: keep the header + drawer PHYSICAL in Arabic too (logo on the left,
   menu button on the right, drawer slides in from the right). Only the drawer
   text itself stays RTL so the Arabic menu items remain right-aligned. */
@media (max-width: 1120px) {
  /* Arabic mobile keeps its natural RTL header (logo on the right, menu button
     on the left) and the drawer slides in from the left. */
  .main-nav { transform: translateX(-110%); }
  body.nav-open .main-nav { transform: translateX(0); }
}

/* Before/After compare must stay physical so labels match the images */
.ba-label.before { inset-inline-start: auto; inset-inline-end: auto; left: .8rem; right: auto; }
.ba-label.after  { inset-inline-start: auto; inset-inline-end: auto; right: .8rem; left: auto; }

/* Keep the floating WhatsApp button on the right in RTL too (brand habit) */
.wa-float { inset-inline-end: auto; right: 1.5rem; left: auto; }
.to-top   { inset-inline-start: auto; left: 1.5rem; right: auto; }