/* =========================================================================
   Global for Accounting and Tax Consultancy
   Design system: see DESIGN.md. Since 24 Oct 2026 the palette follows the
   Stripe reference system in VoltAgent/awesome-design-md (deep navy ink, one
   indigo action colour, an atmospheric gradient mesh behind dark heroes),
   re-tinted to the client's own cube logo: sky blue, indigo, coral.
   Layout rhythm, pill CTAs and 24px cards are unchanged.

   RTL strategy: no `left`/`right` anywhere. Logical properties only
   (inline-start/inline-end, margin-inline, padding-inline). One stylesheet
   serves both /  and /ar/.
   ========================================================================= */

:root {
  /* --- Brand -------------------------------------------------------- */
  /* Sampled from the logo cube. Indigo is the ONLY button colour; sky and
     coral live in gradients, the header hairline and small accents. */
  --primary: #4a33e0;          /* indigo, 7.4:1 on white */
  --primary-active: #3b26c2;
  --primary-soft: #efedfe;
  --primary-disabled: #b4aee6;
  --sky: #1a98f0;
  --coral: #f2546b;
  --amber: #f58a3c;
  --brand-gradient: linear-gradient(90deg, var(--sky) 0%, var(--primary) 52%, var(--coral) 100%);

  /* --- Ink ---------------------------------------------------------- */
  --ink: #0b1b3a;
  --body: #46536a;
  --muted: #6b7690;
  --muted-soft: #a3abc2;

  /* --- Surfaces ----------------------------------------------------- */
  --canvas: #ffffff;
  --surface-soft: #f5f7fc;
  --surface-strong: #eceff7;
  --surface-dark: #0a1433;
  --surface-dark-elev: #141f48;

  /* --- Lines -------------------------------------------------------- */
  --hairline: #dfe3ee;
  --hairline-soft: #eceff7;
  --hairline-on-dark: rgba(255, 255, 255, 0.14);

  /* --- On-colour ---------------------------------------------------- */
  --on-primary: #ffffff;
  --on-dark: #ffffff;
  --on-dark-soft: #a9b6d6;

  /* --- Semantic (never a button background) -------------------------- */
  --good: #0a7b52;
  --warn: #b25c00;
  --star: #f4b000;

  /* --- Radii -------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 100px;
  --r-full: 9999px;

  /* --- Space -------------------------------------------------------- */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-base: 16px;
  --s-md: 20px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 96px;

  /* --- Type --------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --display-weight: 400;
  --display-track: -0.025em;

  /* --- Depth: one tier only ----------------------------------------- */
  --shadow: 0 4px 12px rgba(11, 27, 58, 0.06);
  --shadow-lift: 0 14px 34px rgba(42, 30, 140, 0.14);

  --header-h: 73px;   /* 72px min-height + 1px border */
  --container: 1200px;
  --reading: 68ch;
}

/* Arabic pages swap the family and lift display weight one step: Arabic
   letterforms at weight 400 read thinner than Latin at the same size. */
html[lang='ar'] {
  --font-display: var(--font-ar);
  --font-body: var(--font-ar);
  --display-weight: 500;
  --display-track: 0;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, iframe { max-width: 100%; display: block; }
iframe { border: 0; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s-base); }
p:last-child { margin-bottom: 0; }

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

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

/* Focus ring: visible on every interactive element, both themes. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.on-dark :where(a, button, summary):focus-visible { outline-color: #ffffff; }

/* RTL-safe visually-hidden. NEVER use left:-9999px -- in an RTL document
   that becomes 10,000px of real overflow and a horizontal scrollbar. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--s-base);
  z-index: 200;
  background: var(--primary);
  color: var(--on-primary);
  padding: var(--s-sm) var(--s-md);
  border-radius: var(--r-pill);
  font-weight: 600;
}
.skip-link:focus { inset-block-start: var(--s-base); }

/* ------------------------------------------------------------ type scale */
.display-mega { font-size: clamp(2.5rem, 1.6rem + 3.9vw, 5rem); line-height: 1.0; }
.display-xl   { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 4rem); line-height: 1.02; }
.display-lg   { font-size: clamp(2rem, 1.5rem + 2.1vw, 3.25rem); line-height: 1.06; }
.display-md   { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); line-height: 1.1; }
.display-sm   { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem); line-height: 1.14; }
.title-lg     { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); line-height: 1.2; font-weight: 600; letter-spacing: 0; }
.title-md     { font-size: 1.125rem; line-height: 1.33; font-weight: 600; letter-spacing: 0; color: var(--ink); }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--body);
  max-width: var(--reading);
}
.on-dark .lede { color: var(--on-dark-soft); }

.kicker {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--s-sm);
}
html[lang='ar'] .kicker { letter-spacing: 0; text-transform: none; font-size: 0.875rem; }
.kicker::before {
  content: '';
  display: inline-block;
  inline-size: 18px;
  block-size: 2px;
  margin-inline-end: 10px;
  vertical-align: middle;
  border-radius: 2px;
  background: var(--brand-gradient);
}
.on-dark .kicker { color: #9db4ff; }

.small { font-size: 0.875rem; }
.micro { font-size: 0.8125rem; color: var(--muted); }

/* Financial figures get tabular numerals so columns of AED line up. */
.figure { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* -------------------------------------------------------------- layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-lg);
}

.section { padding-block: clamp(56px, 8vw, var(--s-section)); }
.section--soft { background: var(--surface-soft); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }

.section-head { max-width: 46rem; margin-bottom: var(--s-xxl); }
.section-head .lede { margin-top: var(--s-base); }

.grid { display: grid; gap: var(--s-lg); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.stack > * + * { margin-block-start: var(--s-base); }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { text-decoration: none; }
.btn .icon-arrow { transition: transform 0.18s ease; }
.btn:hover .icon-arrow { transform: translateX(3px); }
[dir='rtl'] .btn:hover .icon-arrow { transform: scaleX(-1) translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 18px rgba(74, 51, 224, 0.28); }
.btn--primary:hover { background: var(--primary-active); color: var(--on-primary); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(74, 51, 224, 0.36); }
.btn--primary[disabled] { background: var(--primary-disabled); cursor: not-allowed; }

.btn--secondary { background: var(--surface-strong); color: var(--ink); }
.btn--secondary:hover { background: #e3e8ef; }

.btn--outline-dark { background: transparent; color: var(--on-dark); border-color: rgba(255, 255, 255, 0.45); }
.btn--outline-dark:hover { background: rgba(255, 255, 255, 0.10); color: var(--on-dark); }

.btn--ghost { background: transparent; color: var(--primary); padding-inline: var(--s-xs); }
.btn--ghost:hover { text-decoration: underline; }

.btn--lg { min-height: 56px; padding: 16px 32px; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-sm); }

/* Icons inside buttons flip with the writing direction. */
[dir='rtl'] .btn .icon-arrow { transform: scaleX(-1); }

/* ---------------------------------------------------------------- badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xxs);
  background: var(--surface-strong);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html[lang='ar'] .badge { letter-spacing: 0; text-transform: none; font-size: 0.8125rem; }
.on-dark .badge { background: rgba(255, 255, 255, 0.12); color: var(--on-dark); }

/* ----------------------------------------------------------- top header */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: transparent;
  border-block-end: 1px solid var(--hairline);
}
/* Logo-gradient hairline across the very top of every page. */
.site-header::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  background: var(--brand-gradient);
}
/* The header carries 8 links + language + CTA, so it gets more width than
   the 1200px content column. */
.site-header > .container { max-width: 1320px; }

/* The frosted background lives on a pseudo-element, NOT on .site-header.
   backdrop-filter makes an element the containing block for every
   position:fixed descendant -- and the mobile nav sheet is a descendant of
   the header. With the filter on the header itself the sheet resolved
   against the 73px header instead of the viewport and opened as a 48px
   sliver. On a pseudo-element the frosted look is identical and the sheet
   gets the viewport back. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: var(--s-sm); text-decoration: none; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }

/* The real mark is an isometric cube in a cyan-to-magenta gradient. It is
   the one place on the site where more than one hue appears, and that is
   deliberate: the wordmark is navy, so the palette stays a single accent
   and the mark supplies the colour. */
.brand-mark {
  width: auto;
  height: 40px;
  flex: 0 0 auto;
  display: block;
}
@media (max-width: 480px) {
  .brand-mark { height: 34px; }
}
.brand-text { display: grid; line-height: 1.15; white-space: nowrap; }
.brand-name { color: var(--ink); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; }
.brand-sub { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.02em; }
html[lang='ar'] .brand-sub { letter-spacing: 0; }

.nav { margin-inline-start: auto; display: flex; align-items: center; gap: 18px; }
.nav a {
  position: relative;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  padding-block: var(--s-xs);
  text-decoration: none;
  white-space: nowrap;
}
/* Underline grows from the start edge on hover; the current page keeps it. */
.nav a:not(.btn)::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  border-radius: 2px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: var(--origin-start, left);
  transition: transform 0.22s ease;
}
[dir='rtl'] .nav a:not(.btn)::after { --origin-start: right; }
.nav a:hover { color: var(--primary); text-decoration: none; }
.nav a:not(.btn):hover::after,
.nav a[aria-current='page']::after { transform: scaleX(1); }
.nav a[aria-current='page'] { color: var(--primary); }

.header-actions { display: flex; align-items: center; gap: var(--s-xs); margin-inline-start: var(--s-sm); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  min-height: 40px;
}
.lang-switch:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: var(--surface-strong);
  border: 0;
  border-radius: var(--r-full);
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset-block: var(--header-h) 0;
    inset-inline: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--canvas);
    padding: var(--s-lg);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  .nav[data-open='true'] { opacity: 1; visibility: visible; transform: none; }
  .nav a {
    padding-block: var(--s-base);
    border-block-end: 1px solid var(--hairline-soft);
    font-size: 1.0625rem;
  }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-block-start: var(--s-lg); }
  .header-actions .btn--primary { display: none; }
}

/* ----------------------------------------------------------------- hero */
.hero {
  background: var(--surface-dark);
  color: var(--on-dark);
  padding-block: clamp(64px, 9vw, 120px);
  position: relative;
  overflow: hidden;
}
/* Gradient mesh in the logo colours (the Stripe hero device, on navy).
   Two oversized blurred layers drift slowly; only transform animates, so it
   costs no layout and freezes under prefers-reduced-motion (global rule). */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: var(--r-full);
  filter: blur(60px);
  will-change: transform;
}
.hero::before {
  inset-block-start: -35%;
  inset-inline-end: -12%;
  inline-size: 70vmax;
  block-size: 70vmax;
  max-inline-size: 980px;
  max-block-size: 980px;
  background:
    radial-gradient(closest-side at 35% 40%, rgba(26, 152, 240, 0.55), transparent),
    radial-gradient(closest-side at 65% 55%, rgba(74, 51, 224, 0.65), transparent);
  animation: mesh-a 22s ease-in-out infinite alternate;
}
.hero::after {
  inset-block-end: -45%;
  inset-inline-end: 8%;
  inline-size: 52vmax;
  block-size: 52vmax;
  max-inline-size: 720px;
  max-block-size: 720px;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(242, 84, 107, 0.42), transparent),
    radial-gradient(closest-side at 30% 70%, rgba(245, 138, 60, 0.22), transparent);
  animation: mesh-b 26s ease-in-out infinite alternate;
}
@keyframes mesh-a {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(-6%, 8%, 0) rotate(25deg) scale(1.12); }
}
@keyframes mesh-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(10%, -12%, 0) scale(1.18); }
}
.text-gradient {
  background: linear-gradient(90deg, #7fc3ff 0%, #a99bff 50%, #ff8fa0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 { color: var(--on-dark); max-width: 18ch; }
.hero .lede { margin-block-start: var(--s-lg); max-width: 54ch; }
.hero .btn-row { margin-block-start: var(--s-xl); }

.hero--page { padding-block: clamp(56px, 7vw, 88px); }
.hero--page h1 { max-width: 22ch; }

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-lg);
  margin-block-start: var(--s-xl);
  padding-block-start: var(--s-lg);
  border-block-start: 1px solid var(--hairline-on-dark);
  color: var(--on-dark-soft);
  font-size: 0.9375rem;
}
.hero-points li { display: inline-flex; align-items: center; gap: var(--s-xs); }

.rating-inline { display: inline-flex; align-items: center; gap: var(--s-xs); color: var(--on-dark); font-weight: 600; }
.stars { color: var(--star); letter-spacing: 0.08em; }

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--s-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
a.card { text-decoration: none; color: inherit; }
a.card { position: relative; isolation: isolate; }
/* Hover ring in the logo gradient: a padded pseudo-element masked down to
   the border, so no layout shift and the radius stays exact. */
a.card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--brand-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
a.card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
  text-decoration: none;
}
a.card:hover::before { opacity: 1; }
.card h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; line-height: 1.25; }
.card p { color: var(--body); }
.card .card-link { margin-block-start: auto; padding-block-start: var(--s-sm); color: var(--primary); font-weight: 600; font-size: 0.9375rem; }

.card--dark { background: var(--surface-dark-elev); border-color: transparent; color: var(--on-dark-soft); }
.card--dark h3 { color: var(--on-dark); }

.icon-plate {
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  background: var(--primary-soft);
  color: var(--primary);
  display: grid; place-items: center;
  margin-bottom: var(--s-xs);
}
.icon-plate svg { width: 22px; height: 22px; }

/* ------------------------------------------------------ threshold stats */
.stat-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--s-xl);
}
.stat-value {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: var(--display-track);
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.stat-label { color: var(--ink); font-weight: 600; margin-block-start: var(--s-sm); }
.stat-note { color: var(--body); font-size: 0.9375rem; margin-block-start: var(--s-xs); }

/* --------------------------------------------------------------- steps */
.step { border-block-start: 2px solid var(--hairline); padding-block-start: var(--s-base); }
.step-n {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.step h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: 0; margin-block: var(--s-xs) var(--s-xs); }
.step p { color: var(--body); font-size: 0.9375rem; }

/* ------------------------------------------------------------ list rows */
.rows { border-block-start: 1px solid var(--hairline); }
.row {
  display: grid;
  grid-template-columns: minmax(12rem, 22rem) 1fr;
  gap: var(--s-lg);
  padding-block: var(--s-lg);
  border-block-end: 1px solid var(--hairline);
}
.row h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.row p { color: var(--body); }
@media (max-width: 720px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: var(--s-xs); }
}

.check-list li {
  display: flex;
  gap: var(--s-sm);
  padding-block: var(--s-xs);
  color: var(--body);
}
.check-list svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--primary); margin-block-start: 3px; }
.on-dark .check-list li { color: var(--on-dark-soft); }
.on-dark .check-list svg { color: #9db4ff; }

/* ----------------------------------------------------------------- FAQ */
.faq { border-block-start: 1px solid var(--hairline); }
.faq details {
  border-block-end: 1px solid var(--hairline);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-base);
  padding-block: var(--s-lg);
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: 0 0 20px;
  width: 20px; height: 20px;
  margin-block-start: 3px;
  background: currentColor;
  -webkit-mask: var(--chev) center / contain no-repeat;
  mask: var(--chev) center / contain no-repeat;
  transition: transform 0.2s ease;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq .faq-body { padding-block-end: var(--s-lg); max-width: var(--reading); color: var(--body); }

/* ---------------------------------------------------------- dark bands */
.band-dark {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(74, 51, 224, 0.35), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(26, 152, 240, 0.22), transparent 70%),
    var(--surface-dark);
  color: var(--on-dark-soft);
}
.band-dark h2, .band-dark h3 { color: var(--on-dark); }

.cta-band { text-align: center; }
.cta-band .lede { margin-inline: auto; margin-block-start: var(--s-base); }
.cta-band .btn-row { justify-content: center; margin-block-start: var(--s-xl); }

/* --------------------------------------------------------------- forms */
.form-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: clamp(var(--s-lg), 4vw, var(--s-xl));
  box-shadow: var(--shadow);
}
.field { display: grid; gap: 6px; margin-bottom: var(--s-base); }
.field label { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--primary); }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
}
.textarea { min-height: 128px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f5a6b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: right 16px center;
  padding-inline-end: 44px;
}
[dir='rtl'] .select { background-position: left 16px center; padding-inline-end: 44px; }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.input[aria-invalid='true'], .textarea[aria-invalid='true'], .select[aria-invalid='true'] { border-color: #c0392b; }
.field-error { color: #c0392b; font-size: 0.8125rem; min-height: 1em; }

/* Phone and email always read left-to-right, even inside an RTL page. */
input[type='tel'], input[type='email'], .ltr { direction: ltr; text-align: start; }
[dir='rtl'] input[type='tel'], [dir='rtl'] input[type='email'] { text-align: right; }

.consent { display: flex; align-items: flex-start; gap: var(--s-sm); margin-block: var(--s-base); }
.consent input { width: 20px; height: 20px; margin-block-start: 3px; flex: 0 0 20px; accent-color: var(--primary); }
.consent label { font-size: 0.875rem; color: var(--body); font-weight: 400; }

/* honeypot -- inline-start offsets are RTL-unsafe, so hide it properly */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.form-status { border-radius: var(--r-md); padding: var(--s-base); margin-block-start: var(--s-base); display: none; }
.form-status[data-state='ok'] { display: block; background: #eaf6f0; border: 1px solid #b7e0cb; color: #0a5c3d; }
.form-status[data-state='err'] { display: block; background: #fdecea; border: 1px solid #f5c3bd; color: #8c2018; }

/* ------------------------------------------------------------- contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(var(--s-xl), 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

.detail-list { border-block-start: 1px solid var(--hairline); }
.detail {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s-base);
  padding-block: var(--s-base);
  border-block-end: 1px solid var(--hairline);
  align-items: start;
}
.detail .icon-plate { width: 40px; height: 40px; margin: 0; }
.detail dt { font-size: 0.8125rem; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
html[lang='ar'] .detail dt { letter-spacing: 0; text-transform: none; }
.detail dd { margin: 2px 0 0; color: var(--ink); font-size: 1.0625rem; }
.detail dd a { color: var(--ink); }
.detail dd a:hover { color: var(--primary); }

.map-frame { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--hairline); background: var(--surface-strong); }
.map-frame iframe { width: 100%; height: 420px; }

.hours-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.hours-table th, .hours-table td { text-align: start; padding-block: 10px; border-block-end: 1px solid var(--hairline-soft); font-weight: 400; color: var(--body); }
.hours-table th { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------- footer */
/* Footer (24 Oct 2026 rebalance): soft surface, logo-gradient top line,
   compact logo column, quick links in two columns so no column runs long. */
.site-footer {
  position: relative;
  background: var(--surface-soft);
  padding-block: clamp(40px, 5vw, 56px) var(--s-lg);
}
.site-footer::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  background: var(--brand-gradient);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.3fr);
  gap: var(--s-xl) clamp(var(--s-lg), 3vw, 48px);
}
@media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-lg); } }

.footer-title { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin-bottom: var(--s-sm); }
html[lang='ar'] .footer-title { letter-spacing: 0; text-transform: none; font-size: 0.9375rem; }
.site-footer li { padding-block: 4px; }
.site-footer a { color: var(--body); font-size: 0.9375rem; }
.site-footer a:hover { color: var(--primary); }

.footer-links-2 { columns: 2; column-gap: var(--s-lg); }
.footer-links-2 li { break-inside: avoid; }

.footer-contact li { display: flex; align-items: flex-start; gap: 10px; color: var(--body); font-size: 0.9375rem; line-height: 1.5; }
.footer-contact svg { inline-size: 18px; block-size: 18px; flex: 0 0 18px; margin-block-start: 2px; color: var(--primary); }
.nowrap { white-space: nowrap; }

.footer-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  margin-block-start: var(--s-base);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  font-size: 0.8125rem !important;
  color: var(--ink) !important;
  text-decoration: none;
  white-space: nowrap;
}
.footer-rating:hover { border-color: var(--primary); text-decoration: none; }

.legal-band {
  margin-block-start: var(--s-xl);
  padding-block-start: var(--s-lg);
  border-block-start: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.8125rem;
}
.legal-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs) var(--s-lg);
  justify-content: space-between;
  align-items: center;
}
.legal-note { margin: var(--s-sm) 0 0; max-width: none; color: var(--muted-soft); font-size: 0.75rem; }
.legal-row p { margin: 0; }
.site-credit a { color: var(--ink); font-weight: 600; font-size: inherit; }
.site-credit a:hover { color: var(--primary); }

/* --------------------------------------------------- floating contacts */
.float-actions {
  position: fixed;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}
.float-btn {
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  box-shadow: var(--shadow-lift);
  color: #fff;
}
.float-btn:hover { text-decoration: none; transform: translateY(-2px); }
.float-btn--wa { background: #25d366; }
.float-btn--call { background: var(--primary); }
.float-btn svg { width: 26px; height: 26px; }

@media (min-width: 1181px) { .float-actions .float-btn--call { display: none; } }

/* ------------------------------------------------------------ prose */
.prose { max-width: var(--reading); }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); margin-block: var(--s-xl) var(--s-sm); }
.prose p { color: var(--body); }

.note {
  border-inline-start: 3px solid var(--primary);
  background: var(--surface-soft);
  border-radius: var(--r-sm);
  padding: var(--s-base) var(--s-md);
  color: var(--body);
  font-size: 0.9375rem;
}

@media print {
  .site-header, .float-actions, .nav-toggle, .cta-band { display: none !important; }
  body { color: #000; }
}

/* =========================================================================
   Inline-SVG sizing. The icons are rendered inline (no icon font, no sprite
   request) so each context has to state the size it wants -- an unsized
   inline <svg> falls back to 300x150.
   ========================================================================= */
.btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.btn { white-space: nowrap; }
.btn--block { white-space: normal; }
.lang-switch svg { width: 16px; height: 16px; flex: 0 0 16px; }
.nav-toggle svg { width: 22px; height: 22px; }
.hero-points svg { width: 18px; height: 18px; flex: 0 0 18px; color: #8fb4f0; }
.hero-points li { white-space: nowrap; }

/* The nav CTA is the mobile-sheet duplicate of the header button. */
.nav [data-mobile-cta] { display: none; }
@media (max-width: 1024px) {
  .nav [data-mobile-cta] { display: inline-flex; }
}
.nav a { white-space: nowrap; }

@media (max-width: 480px) {
  .brand-sub { display: none; }
  .brand-name { font-size: 1rem; }
}

/* =========================================================================
   MOTION
   The "Subtle Scroll Reveal" preset (fade + 12px lift, ~380ms, power1.out
   easing) implemented in CSS rather than GSAP: the site has no dependencies
   and its CSP is script-src 'self', so a library would cost a bundle, a
   third-party origin and a CSP exception for motion that is four properties
   wide.

   Three rules hold this together:
   1. The hidden state only exists under `html.js-motion`, a class that only
      JavaScript adds. Without JS -- a crawler, a failed request -- nothing is
      ever hidden, so no content depends on script to be readable.
   2. That class is never added when prefers-reduced-motion is set, so the
      page renders in its final state with no observer running at all.
   3. Only opacity and transform are animated, and only on the Y axis. No
      width/height (layout thrash), and nothing that has to be mirrored for
      Arabic.
   ========================================================================= */

:root {
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-reveal: 380ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-shift: 12px;
}

/* ---------------------------------------------------------- scroll reveal */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--motion-reveal) var(--ease-out),
              transform var(--motion-reveal) var(--ease-out);
}
.js-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------- hero entrance */
/* The hero is above the fold, so it plays on load rather than on scroll.
   --enter-i is set per element in the markup to stagger the lines. */
.js-motion .hero [data-enter] {
  opacity: 0;
  transform: translateY(14px);
  animation: gatc-enter var(--motion-reveal) var(--ease-out) forwards;
  animation-delay: calc(var(--enter-i, 0) * 70ms + 60ms);
}
@keyframes gatc-enter {
  to { opacity: 1; transform: none; }
}

/* The floating contact buttons arrive last so they do not compete with the
   headline for attention. */
.js-motion .float-btn {
  opacity: 0;
  transform: scale(0.85);
  animation: gatc-pop var(--motion-base) var(--ease-out) forwards;
  animation-delay: 700ms;
}
.js-motion .float-actions a:last-child { animation-delay: 800ms; }
@keyframes gatc-pop {
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------- micro-interactions */
/* Nav underline grows from the centre, so it behaves identically in Arabic
   without a direction-specific transform-origin. */
.nav a { position: relative; }
.nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -2px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--motion-base) var(--ease-out);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current='page']::after { transform: scaleX(1); }
@media (max-width: 1024px) {
  .nav a::after { content: none; }
}

.icon-plate { transition: transform var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out); }
a.card:hover .icon-plate { transform: scale(1.06); }

.btn { transition: background-color var(--motion-fast) var(--ease-out),
                   border-color var(--motion-fast) var(--ease-out),
                   color var(--motion-fast) var(--ease-out),
                   transform var(--motion-fast) var(--ease-out); }

/* The FAQ answer cannot transition its height without JS, so it fades in
   instead -- enough to signal "this opened" without faking an accordion. */
.faq details[open] .faq-body {
  animation: gatc-fade var(--motion-base) var(--ease-out);
}
@keyframes gatc-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------ loading feedback */
/* A spinner on the submit button: an infinite animation is only acceptable
   as a loading indicator, and never as decoration. */
.btn[data-busy]::before {
  content: '';
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: var(--r-full);
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  animation: gatc-spin 700ms linear infinite;
}
@keyframes gatc-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------- safety net */
/* If .js-motion is ever present while the user asks for reduced motion,
   nothing may stay hidden or keep moving. */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal],
  .js-motion .hero [data-enter],
  .js-motion .float-btn {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .nav a::after { transition: none; }
}


/* ------------------------------------------------------- footer lockup */
.footer-brand { display: inline-block; }
.footer-lockup {
  width: 100%;
  max-width: 170px;
  height: auto;
}

/* =========================================================================
   DEADLINE BAR
   Taken from the SmartZone reference, with one change: the date is real and
   the bar removes itself once it passes. A permanent "urgent" strip is just
   decoration, and a tax firm of all businesses should not cry wolf about a
   deadline.
   ========================================================================= */
.alert-bar {
  background: #8c2018;
  color: #fff;
  font-size: 0.9375rem;
  position: relative;
  z-index: 110;
}
.alert-inner {
  display: flex;
  align-items: center;
  gap: var(--s-base);
  padding-block: 10px;
  min-height: 48px;
}
.alert-text {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px var(--s-sm);
}
.alert-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
html[lang='ar'] .alert-label { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; }
.alert-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #fff;
  color: #8c2018;
  border-radius: var(--r-pill);
  padding: 2px 10px;
  white-space: nowrap;
}
.alert-cta {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  margin-inline-start: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.alert-cta:hover { color: #fff; }
.alert-x {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-full);
  color: #fff;
  cursor: pointer;
}
.alert-x:hover { background: rgba(255, 255, 255, 0.16); }
.alert-x svg { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .alert-inner { flex-wrap: wrap; padding-block: 8px; }
  .alert-cta { margin-inline-start: 0; }
  .alert-x { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; }
  .alert-text { padding-inline-end: 36px; }
}

/* =============================================================== IMAGERY */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--s-xl), 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-media { display: none; }  /* the headline earns the first screen on a phone */
}

.hero-img,
.service-img,
.about-img,
.office-img,
.callback-img {
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  display: block;
}
.hero-img {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.service-media { margin-bottom: var(--s-lg); }
.about-media { border-radius: var(--r-xl); overflow: hidden; }
.about-img { aspect-ratio: 3 / 2; object-fit: cover; }
.office-media { margin-bottom: var(--s-lg); }
.office-img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ========================================================= CALL-BACK BAND */
.callback-band { background: var(--surface-soft); }
.callback-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(var(--s-xl), 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) {
  .callback-grid { grid-template-columns: minmax(0, 1fr); }
  .callback-media { order: 2; }
}
.callback-img { aspect-ratio: 4 / 3; object-fit: cover; }

.callback-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--s-sm);
  align-items: start;
}
.callback-fields .field { margin-bottom: 0; }
@media (max-width: 720px) {
  .callback-fields { grid-template-columns: minmax(0, 1fr); }
  .callback-fields .btn { width: 100%; }
}

/* ============================================================ TESTIMONIALS */
.quote-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--s-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-base);
}
.quote-card blockquote { margin: 0; color: var(--body); font-size: 1.0625rem; line-height: 1.6; }
.quote-who { display: flex; align-items: center; gap: var(--s-sm); margin-block-start: auto; }
.quote-avatar {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: var(--r-full);
  background: var(--primary-soft);
  color: var(--primary);
  display: grid; place-items: center;
  font-weight: 700;
}
.quote-name { color: var(--ink); font-weight: 600; font-size: 0.9375rem; }
.quote-role { color: var(--muted); font-size: 0.8125rem; }
.quote-verified {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--good); font-size: 0.8125rem; font-weight: 600;
}
.quote-verified svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* ============================================================ STATS BAND */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-lg);
}
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: minmax(0, 1fr); } }

.stat-tile {
  background: var(--surface-dark-elev);
  border: 1px solid var(--hairline-on-dark);
  border-radius: var(--r-xl);
  padding: var(--s-xl);
}
.stat-num {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  line-height: 1;
  letter-spacing: var(--display-track);
  color: #8fb4f0;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.stat-tile-label { color: var(--on-dark); font-weight: 600; margin-block: var(--s-sm) 4px; }
.stat-tile-note { color: var(--on-dark-soft); font-size: 0.875rem; margin: 0; }

/* ========================================================= COST OF DELAY */
.delay-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--s-xl), 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) {
  .delay-grid { grid-template-columns: minmax(0, 1fr); }
  .delay-media { order: 2; }
}
.delay-img { width: 100%; height: auto; border-radius: var(--r-xl); aspect-ratio: 3 / 2; object-fit: cover; }

.delay-cards { display: grid; gap: var(--s-sm); }
.delay-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-md) var(--s-lg);
}
.delay-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-sm);
  margin-bottom: 4px;
}
.delay-card h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.delay-card p { color: var(--body); font-size: 0.9375rem; margin: 0; }
.delay-badge {
  flex: 0 0 auto;
  background: var(--surface-strong);
  color: var(--muted);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
html[lang='ar'] .delay-badge { text-transform: none; letter-spacing: 0; font-size: 0.75rem; }

.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-lg);
  margin-block-start: var(--s-xxl);
}
@media (max-width: 720px) { .compare-grid { grid-template-columns: minmax(0, 1fr); } }
.compare-card { border-radius: var(--r-xl); padding: var(--s-xl); border: 1px solid var(--hairline); }
.compare-card--bad { background: var(--surface-soft); }
.compare-card--good { background: var(--surface-dark); border-color: transparent; color: var(--on-dark-soft); }
.compare-title { font-weight: 700; color: var(--ink); margin-bottom: var(--s-sm); }
.compare-card--good .compare-title { color: var(--on-dark); }
.compare-card ul li { padding-block: 6px; color: var(--body); }
.compare-card--bad ul li { padding-inline-start: var(--s-md); position: relative; }
.compare-card--bad ul li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.85em;
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--muted-soft);
}
.compare-card--good ul li { color: var(--on-dark-soft); }
.compare-card--good .check-list svg { color: #8fb4f0; }

/* ============================================================== PACKAGES */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-lg);
  align-items: start;
}
@media (max-width: 1100px) { .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pkg-grid { grid-template-columns: minmax(0, 1fr); } }

.pkg-card {
  position: relative;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--s-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-xs);
  height: 100%;
}
.pkg-card--popular { border-color: var(--primary); box-shadow: var(--shadow); }
.pkg-flag {
  position: absolute;
  inset-block-start: -12px;
  inset-inline-start: var(--s-xl);
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[lang='ar'] .pkg-flag { text-transform: none; letter-spacing: 0; font-size: 0.75rem; }

.pkg-name { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; }
.pkg-volume { color: var(--primary); font-size: 0.875rem; font-weight: 600; margin: 0; }
.pkg-price { margin-block: var(--s-sm); }
.pkg-price strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: var(--display-weight); color: var(--ink); }
.pkg-who { color: var(--muted); font-size: 0.875rem; margin-block-end: var(--s-base); }
.pkg-groups { display: grid; gap: var(--s-base); border-block-start: 1px solid var(--hairline-soft); padding-block-start: var(--s-base); }
.pkg-group-head {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
html[lang='ar'] .pkg-group-head { text-transform: none; letter-spacing: 0; font-size: 0.875rem; }
.pkg-list li { font-size: 0.9375rem; padding-block: 3px; }
.pkg-list svg { width: 16px; height: 16px; flex: 0 0 16px; margin-block-start: 5px; }
.pkg-cta { margin-block-start: auto; }

/* ====================================================== MAGNETIC POINTER */
/* One focal element only -- the hero's primary CTA. The pull is clamped so
   the button never leaves its own hit box, and it is disabled entirely on
   touch (no pointer to follow) and under reduced motion. */
@media (hover: hover) and (pointer: fine) {
  .js-motion [data-magnetic] { will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {
  [data-magnetic] { transform: none !important; }
}

/* ================================================================ INSIGHTS */
.post-meta {
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.post-meta--hero { color: var(--on-dark-soft); margin-block: var(--s-base) 0; }

.post-card h3 { font-size: 1.125rem; line-height: 1.35; }
.post-card .post-meta { margin-bottom: 2px; }

.post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(var(--s-xl), 5vw, 64px);
  align-items: start;
}
@media (max-width: 960px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Reading measure: an article that runs the full container width is
   exhausting. 68ch is about 12 words a line. */
.post-body { max-width: var(--reading); }
.post-body h2 { margin-block: var(--s-xxl) var(--s-sm); }
.post-body h2:first-child { margin-block-start: 0; }
.post-body p { font-size: 1.0625rem; line-height: 1.75; }
.post-body .note { margin-block: var(--s-lg); }

.prose-list { margin-block: var(--s-base) var(--s-lg); }
.prose-list li {
  position: relative;
  padding-inline-start: var(--s-md);
  padding-block: 5px;
  color: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.prose-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.85em;
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--primary);
}

.post-disclaimer {
  margin-block-start: var(--s-xxl);
  padding-block-start: var(--s-base);
  border-block-start: 1px solid var(--hairline);
  line-height: 1.6;
}
.post-disclaimer strong { color: var(--ink); }

/* The aside follows the reader down a long article, but only where there is
   room for it to do so without covering anything. */
@media (min-width: 961px) {
  .post-aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-lg)); }
}

/* ========================================================== TAX CHECKER */
.checker-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(var(--s-xl), 5vw, 64px);
  align-items: start;
}
@media (max-width: 960px) { .checker-grid { grid-template-columns: minmax(0, 1fr); } }

@media (min-width: 961px) {
  .checker-form { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-lg)); }
}
.checker-form .field .micro { margin-block-start: 2px; line-height: 1.45; }

.result-intro { margin-bottom: var(--s-lg); }
.checker-results { display: grid; gap: var(--s-base); }
.checker-results:focus { outline: none; }

.result-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-inline-start: 4px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
}
/* Tone is carried by a border, an icon-free label AND the wording itself --
   never by colour alone. */
.result-card--act  { border-inline-start-color: #c0392b; }
.result-card--good { border-inline-start-color: var(--good); }
.result-card--info { border-inline-start-color: var(--primary); }

.result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-sm);
  margin-bottom: var(--s-sm);
}
.result-head h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: 0; }
.result-flag {
  flex: 0 0 auto;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
html[lang='ar'] .result-flag { text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
.result-flag--act  { background: #fdecea; color: #8c2018; }
.result-flag--good { background: #eaf6f0; color: #0a5c3d; }
.result-flag--info { background: var(--surface-strong); color: var(--body); }

.result-card p { color: var(--body); font-size: 0.9375rem; line-height: 1.6; }
.result-card p + p { margin-block-start: var(--s-sm); }

.result-fact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s-sm);
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--s-xs);
  border-block-start: 1px solid var(--hairline-soft);
  margin-block-start: var(--s-sm) !important;
}
.result-fact span { color: var(--muted); font-size: 0.8125rem; }
.result-fact strong { color: var(--ink); font-variant-numeric: tabular-nums; text-align: end; }

.result-note { margin-block-start: var(--s-base); }
.checker-send { margin-block-start: var(--s-lg); }
.checker-disclaimer {
  margin-block-start: var(--s-lg);
  padding-block-start: var(--s-base);
  border-block-start: 1px solid var(--hairline);
  line-height: 1.6;
}

/* =========================================================== REVIEWS */
.review-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: clamp(var(--s-xl), 5vw, 64px);
  align-items: start;
  margin-bottom: var(--s-xxl);
}
@media (max-width: 860px) { .review-head { grid-template-columns: minmax(0, 1fr); } }

.rating-block {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--s-xl);
  text-align: center;
}
.rating-block .stars { font-size: 1.25rem; letter-spacing: 0.1em; }
.rating-score {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: var(--display-track);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-block: var(--s-xs) 0;
}
.rating-meta { color: var(--muted); font-size: 0.875rem; margin: 0; }
.rating-note { color: var(--body); font-size: 0.875rem; margin-block: var(--s-xs) var(--s-base); }

/* Masonry-ish: reviews vary a lot in length and a fixed grid leaves big
   holes under the short ones. */
.quote-grid { columns: 3; column-gap: var(--s-lg); }
@media (max-width: 1024px) { .quote-grid { columns: 2; } }
@media (max-width: 640px)  { .quote-grid { columns: 1; } }
.quote-grid > * {
  break-inside: avoid;
  margin-bottom: var(--s-lg);
  display: inline-block;   /* stops cards splitting across columns in Safari */
  width: 100%;
}

.quote-card { margin: 0; }
.quote-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-sm);
}
.quote-ago { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.quote-card blockquote {
  margin: 0;
  color: var(--body);
  font-size: 1rem;
  line-height: 1.65;
}
/* An Arabic quote on an English page keeps its own direction. */
.quote-card blockquote[dir='rtl'] { text-align: right; font-family: var(--font-ar); }
.quote-card blockquote[dir='ltr'] { text-align: left; }

.quote-id { display: grid; }
.quote-who { padding-block-start: var(--s-sm); border-block-start: 1px solid var(--hairline-soft); }
.review-empty { margin-top: var(--s-lg); }

/* ========================================================== CAROUSEL */
/* A real scroll container, not a transform track: touch swipe, trackpad,
   shift-wheel and keyboard arrows all work for free, the cards stay in DOM
   order for a screen reader, and nothing breaks if the script never runs. */
.carousel { position: relative; }

.carousel-track {
  display: flex;
  gap: var(--s-lg);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block-end: var(--s-sm);
  /* room for the focus ring, which would otherwise be clipped by overflow */
  padding-inline: 3px;
  margin-inline: -3px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
.carousel-track::-webkit-scrollbar { height: 6px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: var(--r-pill); }
.carousel-track::-webkit-scrollbar-track { background: transparent; }

.carousel-track > * {
  flex: 0 0 clamp(264px, 80vw, 352px);
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}

/* One row means every card is as tall as the tallest. Clamping the quote
   keeps that height sane; the full text stays in the DOM for screen readers
   and is on /reviews/ in full. */
/* Equal heights come from flex stretch, NOT height:100% -- against an
   auto-height track that percentage is indefinite, resolves to auto, and
   quietly defeats the stretch it was meant to reinforce. */
.carousel-track { align-items: stretch; }
.carousel-track .quote-card blockquote {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carousel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-base);
  margin-block-start: var(--s-lg);
  flex-wrap: wrap;
}
.carousel-btns { display: flex; gap: var(--s-xs); }

.carousel-btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  background: var(--canvas);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out),
              background-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.carousel-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.carousel-btn:disabled { opacity: 0.4; cursor: default; }
.carousel-btn svg { width: 20px; height: 20px; }
/* The chevrons point along the reading direction, so they mirror in Arabic. */
[dir='rtl'] .carousel-btn svg { transform: scaleX(-1); }
[dir='rtl'] .carousel-btn--play svg { transform: none; }

/* The pause control is hidden from sight but NOT removed.
   The carousel auto-advances, and WCAG 2.2.2 requires a way to stop
   anything that moves by itself for more than five seconds. A mouse user
   stops it by hovering and a touch user by swiping, but a keyboard user has
   neither -- so the button stays in the DOM and appears the moment it is
   tabbed to. Hidden with clip-path, never with a physical offset: in an RTL
   document `left: -9999px` is 10,000px of real overflow. */
.carousel-btn--play {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* :focus as well as :focus-visible -- the element is 1x1 and clipped, so
   nothing can realistically click it; focus only ever arrives by keyboard,
   and older engines without :focus-visible would otherwise never reveal it. */
.carousel-btn--play:focus,
.carousel-btn--play:focus-visible {
  position: static;
  width: 48px;
  height: 48px;
  clip-path: none;
  overflow: visible;
  border: 1px solid var(--primary);
}

/* =========================================================================
   FTA news page (/news/). Card markup comes from server/news_fetch.py via
   nginx SSI, so class names here are a contract with that script.
   Logical properties only -- the same markup renders in /ar/.
   ========================================================================= */
.news-card { padding: 0; overflow: hidden; gap: 0; }
.news-card__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-strong);
}
.news-card__img--none {
  display: grid;
  place-items: center;
  background: var(--surface-dark);
  color: #8fb4f0;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.12em;
}
.news-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  padding: var(--s-lg);
  flex: 1;
}
.news-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card .post-meta { margin: 0; }
.news-stamp, .news-note { color: var(--muted); margin-block-start: var(--s-lg); }
.news-more { margin-block-start: var(--s-xl); }
.news-fallback { color: var(--body); }

.video-card { padding: 0; overflow: hidden; gap: 0; }
.video-card__frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--surface-dark);
  overflow: hidden;
}
.video-card__frame img,
.video-card__frame iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border: 0;
}
.video-card__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 64px;
  block-size: 44px;
  margin-block-start: -22px;
  margin-inline-start: -32px;
  border-radius: var(--r-md);
  background: rgba(7, 20, 38, 0.82);
  transition: background 0.18s ease;
}
/* Triangle points right in both directions: a play icon is not mirrored. */
.video-card__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -6px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #ffffff;
}
.video-card__frame:hover .video-card__play,
.video-card__frame:focus-visible .video-card__play { background: var(--primary); }
.video-card__len {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-end: 8px;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: rgba(7, 20, 38, 0.82);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  direction: ltr;
}
.video-card__title {
  padding: var(--s-base) var(--s-lg) var(--s-lg);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

/* Laptop widths (1181-1339px): the full nav fits but the header CTA does
   not, so it steps out -- the hero and every page body carry the same CTA. */
@media (min-width: 1181px) and (max-width: 1339px) {
  .header-actions .btn--primary { display: none; }
}

/* Phone/tablet header: logo at the start, language + menu together at the
   end (the toggle used to sit between them, mid-header). */
@media (max-width: 1180px) {
  .header-inner { gap: var(--s-xs); }
  .header-actions { margin-inline-start: auto; }
  .nav-toggle { order: 5; margin-inline-start: 0; }
}

/* `.nav a` (ink) outranks `.btn--primary`; the CTA inside the menu sheet
   must keep white text on indigo. */
.nav a.btn--primary,
.nav a.btn--primary:hover { color: var(--on-primary); }


/* =========================================================================
   Contact page, compact (24 Oct 2026). Form leads; details + small map sit
   beside it on desktop and below it on phones. Call / WhatsApp / Email are
   one tap away above everything, so a phone visitor never has to scroll to
   reach us.
   ========================================================================= */
.hero--compact { padding-block: clamp(36px, 5vw, 56px); }
.hero--compact h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); max-width: 32ch; }
.hero--compact .lede { margin-block-start: var(--s-sm); font-size: 1rem; max-width: 80ch; }

.contact-section { padding-block: clamp(24px, 4vw, 48px) clamp(48px, 6vw, 72px); }

.quick-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-block-end: clamp(var(--s-lg), 3vw, var(--s-xl));
}
.quick-contact .btn { min-height: 44px; padding: 10px 18px; font-size: 0.9375rem; }
.quick-contact .btn svg { width: 18px; height: 18px; }
.btn--wa { background: #1fa855; color: #fff; }
.btn--wa:hover { background: #178a45; color: #fff; }
@media (max-width: 560px) {
  .quick-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-contact .btn { padding: 10px 8px; font-size: 0.875rem; gap: 6px; }
  .quick-contact .btn .ltr { font-size: 0.8125rem; }
}

.contact-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(var(--s-lg), 4vw, 48px);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

.form-card { padding: clamp(20px, 3vw, 32px); }
.form-title { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; }
.form-sub { margin: 6px 0 var(--s-base); font-size: 0.9375rem; color: var(--body); }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-sm); }
@media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.contact-form-col .field { margin-bottom: var(--s-sm); gap: 4px; }
.contact-form-col .input,
.contact-form-col .select,
.contact-form-col .textarea { min-height: 46px; padding: 10px 14px; font-size: 1rem; }
.contact-form-col .textarea { min-height: 96px; }
.contact-form-col .field-error:empty { display: none; }
.contact-form-col .consent { margin-block: var(--s-sm) var(--s-base); }

.contact-info { display: grid; gap: var(--s-lg); align-content: start; }
.contact-info .detail-list { border: 1px solid var(--hairline); border-radius: var(--r-xl); padding-inline: var(--s-lg); background: var(--canvas); }
.contact-info .detail { grid-template-columns: 36px 1fr; gap: var(--s-sm); padding-block: 14px; }
.contact-info .detail:last-child { border-block-end: 0; }
.contact-info .detail .icon-plate { width: 36px; height: 36px; }
.contact-info .detail .icon-plate svg { width: 18px; height: 18px; }
.contact-info .detail dt { font-size: 0.75rem; }
.contact-info .detail dd { font-size: 0.9375rem; line-height: 1.5; }
.contact-info .detail dd a[href^="https://www.google"] { color: var(--primary); font-weight: 600; }
.hours-lines { display: grid; gap: 2px; }
.hours-lines strong { color: var(--ink); font-weight: 600; margin-inline-end: 6px; }
.map-frame--compact iframe { height: 240px; }
@media (min-width: 901px) {
  .contact-info { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-base)); }
}
.qc-short { display: none; }
@media (max-width: 560px) {
  .qc-num { display: none; }
  .qc-short { display: inline; }
  .hero--compact .lede { display: none; }
}
/* The quick-contact row already offers Call / WhatsApp at the top of this
   page; the floating bubbles would only sit on top of the form fields. */
body:has(.contact-section) .float-actions { display: none; }