/* ==========================================================================
   E-HUNTER AI - Layout and components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.eh-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1030;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all var(--speed) var(--ease);
}

.eh-header.is-scrolled {
  background: var(--header-scrolled-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--color-border);
  box-shadow: var(--header-shadow, 0 8px 30px rgba(0, 0, 0, 0.35));
}

.eh-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eh-logo img {
  /* The lockup is ~2:1, so it needs height to keep the wordmark readable. */
  height: 52px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  transition: transform var(--speed) var(--ease);
}

@media (max-width: 991.98px) {
  .eh-logo img { height: 44px; max-width: 168px; }
}

.eh-footer .eh-logo img { height: 58px; max-width: 220px; }

.eh-logo:hover img { transform: scale(1.06); }

.eh-logo-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.eh-nav .nav-link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-silver);
  padding: 8px 15px !important;
  position: relative;
  transition: color var(--speed) var(--ease);
}

.eh-nav .nav-link:hover,
.eh-nav .nav-link.active {
  color: var(--color-gold-ink);
}

/* Underline that grows from the centre. */
.eh-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: 2px;
  inset-inline-start: 15px;
  width: calc(100% - 30px);
  height: 2px;
  background: var(--gold-gradient);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform var(--speed) var(--ease);
}

.eh-nav .nav-link:hover::after,
.eh-nav .nav-link.active::after { transform: scaleX(1); }

.eh-nav .dropdown-menu {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 10px;
  margin-top: 12px;
  box-shadow: var(--shadow-card);
  min-width: 260px;
}

.eh-nav .dropdown-item {
  color: var(--color-silver);
  border-radius: var(--radius-button);
  padding: 10px 14px;
  font-size: 0.93rem;
  display: flex;
  align-items: center;
  gap: 11px;
  transition: all var(--speed) var(--ease);
}

.eh-nav .dropdown-item:hover,
.eh-nav .dropdown-item:focus {
  background: var(--gold-tint);
  color: var(--color-gold-ink);
}

.eh-nav .dropdown-item i { color: var(--color-gold-ink); font-size: 1rem; }

/* Header action buttons: language, theme, search */
.header-actions { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-button);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-silver);
  font-size: 1.05rem;
  transition: all var(--speed) var(--ease);
  cursor: pointer;
  padding: 0;
}

.icon-btn:hover {
  border-color: var(--color-gold-ink);
  color: var(--color-gold-ink);
  background: var(--gold-tint);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 15px;
  border-radius: var(--radius-button);
  border: 1px solid var(--color-border);
  color: var(--color-silver);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.86rem;
  background: transparent;
  transition: all var(--speed) var(--ease);
}

.lang-switch:hover {
  border-color: var(--color-gold-ink);
  color: var(--color-gold-ink);
  background: var(--gold-tint);
}

/* Mobile off-canvas */
.navbar-toggler {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 8px 11px;
  color: var(--color-gold-ink);
  background: transparent;
}

.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--gold-tint-strong); }

.offcanvas-eh {
  background: var(--color-surface);
  border-inline-start: 1px solid var(--color-border);
  width: min(340px, 84vw) !important;
}

.offcanvas-eh .offcanvas-header {
  border-bottom: 1px solid var(--color-border);
}

.offcanvas-eh .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}

[data-theme="light"] .offcanvas-eh .btn-close { filter: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* Fills a normal viewport without stretching on very tall windows. */
  min-height: min(100svh, 880px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-height) + 48px);
  padding-bottom: 88px;
  overflow: hidden;
  background: var(--color-black);
}

[data-theme="light"] .hero { background: var(--color-background); }

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.3;
  background-size: cover;
  background-position: center;
}

/* Banner images are editor-uploaded and can be busy or light, which leaves the
   heading unreadable. A scrim guarantees contrast whatever the image holds. */
.page-banner .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Lighter than it was (0.72/0.82/0.92): that buried the photograph.
     Still heaviest at the foot, where the breadcrumb sits on the busiest
     part of most frames. */
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 6, 0.42) 0%,
    rgba(5, 5, 6, 0.55) 55%,
    rgba(5, 5, 6, 0.78) 100%
  );
}

/* ---- the drift behind a page header ----

   A very slow scale and pan, so the header has life without competing with
   the headline over it.

   transform only: the browser can run this entirely on the compositor, so
   it costs no layout and no repaint however long it runs. Animating
   background-position or width instead would repaint the image every frame,
   which is the version of this that hurts.

   will-change is deliberately NOT set. It would promote a full-viewport
   layer on every page for a 44-second animation nobody is watching closely;
   the transform already gets its own layer while it runs. */
.banner-drift {
  animation: banner-drift 44s ease-in-out infinite alternate;
  /* Scaled up a little at rest, so panning never exposes an edge. */
  transform: scale(1.06);
  /* Well above the .hero-bg default of 0.3: at that level the photograph
     was barely readable. The files are darkened on disk and sit under the
     scrim below, so they carry this without hurting the headline. */
  opacity: 0.72;
}

@keyframes banner-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1.2%, 0); }
}

/* The pan mirrors with the language. translate3d takes physical pixels, so
   the same keyframe drifts left-to-right in both directions — which runs
   against the reading direction in Arabic. RTL gets its own, reversed. */
[dir="rtl"] .banner-drift { animation-name: banner-drift-rtl; }

@keyframes banner-drift-rtl {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(1.5%, -1.2%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .banner-drift { animation: none; }
}

/* Light mode needs the mirror of the dark scrim: the headline is near-black,
   so the image has to be lifted rather than darkened.

   Unlike the home hero, a banner's text is centred over the whole frame, so
   there is no clear half to leave alone - every line sits on the photograph.
   The veil therefore has to do real work, and it is heaviest at the foot where
   the subtitle and breadcrumb sit on the busiest part of most frames. Thinning
   it to show more of the image left both of those unreadable.

   The headline halo below is what buys back some of the image: with it the
   veil can sit lower than it otherwise would. */
[data-theme="light"] .page-banner .hero-bg::after {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(250, 251, 253, 0.38) 55%,
    rgba(244, 245, 248, 0.48) 100%
  );
}

/* The pad that lets the veil above stay thin.

   A flat veil has to be heavy enough for the worst pixel anywhere in the frame,
   which is what turned these banners to fog. This instead lays a soft light
   ellipse behind the text column only - centred where the copy is, faded out
   well before the edges. The text gets a dependable ground, and the rest of the
   photograph keeps its own contrast.

   It is painted on the container (which holds the copy) rather than the image,
   so it tracks the text rather than the frame. */
[data-theme="light"] .page-banner > .container::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Bleed well past the copy so the fade is complete before the edges - a
     tighter box leaves the ellipse's own rim visible as a seam. */
  inset: -60% -34% -34%;
  background: radial-gradient(
    ellipse at center,
    rgba(246, 247, 250, 0.80) 0%,
    rgba(246, 247, 250, 0.72) 34%,
    rgba(246, 247, 250, 0.40) 56%,
    rgba(246, 247, 250, 0.12) 76%,
    rgba(246, 247, 250, 0) 100%
  );
  pointer-events: none;
}

/* The halo that replaces the missing veil. Several tight white shadows read as
   a soft outline rather than a glow, so the near-black banner text stays legible
   over a bright or busy photograph without the image being washed out to get
   there. */
[data-theme="light"] .page-banner .hero-title,
[data-theme="light"] .page-banner .hero-subtitle,
[data-theme="light"] .page-banner .breadcrumb-eh,
[data-theme="light"] .page-banner .eyebrow {
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.98),
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 22px rgba(255, 255, 255, 0.80),
    0 1px 3px rgba(255, 255, 255, 0.98);
}

/* The banner files are darkened on disk for a dark page. Two things were
   tried here and both were wrong in opposite directions: leaving them alone
   left a grey fog, and lifting the exposure blew them out to near-white,
   because the highlights were already at the top of the range.

   What the image actually needs is more of itself and less veil - a higher
   opacity under a thinner scrim - with contrast recovering the tonal range
   that darkening flattened. Brightness is left alone. */
[data-theme="light"] .page-banner .hero-bg,
[data-theme="light"] .banner-drift {
  opacity: 1;
  filter: contrast(1.08) saturate(1.06);
}

/* Keep the banner text above both the image and its scrim. */
.page-banner > .container {
  position: relative;
  z-index: 2;
}

/* The hero once carried two gold radial glows here. They were removed:
   a soft coloured wash bleeding from the top of a dark page is the stock
   signature of a generated design, and over a photograph it flattens the
   image into haze. The depth now comes from the photograph itself. */

.hero > .container { position: relative; z-index: 3; }

.hero-title {
  font-size: clamp(2.4rem, 5.6vw, 4.3rem);
  line-height: 1.08;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
}

/* Arabic glyphs carry taller ascenders and deeper descenders than Latin, so a
   1.08 line-height causes stacked lines to collide. */
[dir="rtl"] .hero-title {
  line-height: 1.42;
  letter-spacing: 0;
}

.hero-subtitle {
  /* This line carries the offer and is typed out one character at a time, so
     it has to hold the eye on its own rather than read as small print under
     the headline. Larger and heavier than a normal body line, and set in the
     heading face so it reads as part of the hero rather than as a caption. */
  font-family: var(--font-heading);
  font-size: clamp(1.14rem, 1.85vw, 1.42rem);
  line-height: 1.62;
  color: var(--color-white);
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 660px;
  margin-bottom: 36px;
}

/* max-width already aligns to the text start in both directions. */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 44px;
}

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
}

.hero-visual img {
  max-width: min(78%, 420px);
  height: auto;
  /* Layered glow instead of a box, so the mark melts into the background. */
  filter:
    drop-shadow(0 0 28px rgba(245, 169, 0, 0.30))
    drop-shadow(0 18px 50px rgba(0, 0, 0, 0.55));
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

/* ---- the hero panel that flips between slides ----

   Two faces on one card rotated about its Y axis. The script swaps the
   image on whichever face is about to come round, so any number of slides
   cycles through the same two elements — nothing is added to the DOM per
   slide, and there is no stack of hidden images to download up front.

   The float animation lives on the wrapper rather than the image here:
   the card owns the flip transform, and one element cannot carry both a
   transform animation and a transform transition without them fighting. */
.hero-flip {
  position: relative;
  /* Inside the 460px orbit rings, so the disc sits within them rather than
     over them and the whole panel reads as one object. */
  width: min(70%, 380px);
  aspect-ratio: 1;
  perspective: 1400px;
  animation: float 6s ease-in-out infinite;
}

.hero-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* Slow, and eased so it settles rather than stopping dead. */
  transition: transform 1s cubic-bezier(0.4, 0.05, 0.2, 1);
}

.hero-flip.is-turning .hero-flip-inner { transform: rotateY(180deg); }

/* The card is turned back to zero without animating once the swap is done,
   so the next turn always runs in the same direction. */
.hero-flip.is-resetting .hero-flip-inner { transition: none; transform: rotateY(0deg); }

.hero-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-face-back { transform: rotateY(180deg); }

/* A disc, cropped to fill it: the images are square, so object-fit keeps
   them from distorting if an editor uploads one that is not. A gold rim
   ties it to the orbit rings around it. */
.hero-face {
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(245, 169, 0, 0.35);
  /* The glow sits on the face rather than the image, so it follows the
     circle instead of the image's own square edge. */
  box-shadow:
    0 0 34px rgba(245, 169, 0, 0.22),
    0 18px 50px rgba(0, 0, 0, 0.55),
    inset 0 0 60px rgba(0, 0, 0, 0.35);
}

.hero-flip .hero-face img {
  width: 100%;
  height: 100%;
  max-width: none;
  /* contain, not cover: the file is already built to sit inside the disc
     with its whole frame clear of the rim. cover would crop it again and
     take the corners back off. */
  object-fit: contain;
  border-radius: 50%;
  /* Overrides .hero-visual img, whose float and drop-shadow would fight
     the flip and draw a square glow around a round face. */
  animation: none;
  filter: none;
}

/* A visitor who asked for less motion gets a still panel: the images still
   change, they simply cross-fade instead of turning. */
@media (prefers-reduced-motion: reduce) {
  .hero-flip { animation: none; }

  .hero-flip-inner {
    transition: opacity 0.5s ease;
  }

  .hero-flip.is-turning .hero-flip-inner { transform: none; opacity: 0.35; }
  .hero-flip.is-resetting .hero-flip-inner { transition: none; opacity: 1; }
}

/* ---- the motion around the hero disc ----

   Not a wire ring with dots, not a light sweeping the rim, not a scatter of
   drifting points: those are decoration, and they read as the stock "AI
   website" treatment.

   These arcs mean something. Each is a short segment of the rim that travels
   round it and fades, arriving from a different direction at a different
   speed — signals converging on one place, which is what the company says it
   does with a business's data.

   Each arc is a conic gradient masked down to the rim, so the light stays on
   the circle rather than washing over the photograph inside it. */
.hero-orbit {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(500px, 92%);
  aspect-ratio: 1;
  pointer-events: none;
  /* The rail the signals travel: continuous, and almost invisible. */
  border: 1px solid rgba(255, 214, 128, 0.05);
  border-radius: 50%;
}

.hero-orbit-2 { display: none; }

.hero-arc {
  position: absolute;
  inset: calc(var(--inset, 0px) * -1);
  border-radius: 50%;
  /* A short bright segment with a tail behind it. --len sets how much of
     the circle the signal occupies; --alpha how strongly it reads. */
  /* A long, mostly transparent tail rising to a soft head. The earlier
     version reached full gold across most of its length, which painted a
     solid block on the rim instead of light travelling along it. */
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 224, 160, calc(var(--alpha) * 0.02)) calc(var(--len) * 0.7),
    rgba(255, 232, 184, calc(var(--alpha) * 0.12)) calc(var(--len) * 0.93),
    rgba(255, 240, 205, var(--alpha)) calc(var(--len) * 0.99),
    transparent var(--len)
  );
  /* Cut the filled gradient down to a ring so only the rim lights up. */
  /* A soft-edged ring: the transparent-to-solid ramp is a pixel wide, so
     the arc has no hard inner or outer edge to read as a painted band. */
  -webkit-mask: radial-gradient(circle,
      transparent calc(50% - var(--weight, 1px) - 0.5px),
      #000 calc(50% - var(--weight, 1px) + 0.5px),
      #000 calc(50% - 0.5px), transparent 50%);
          mask: radial-gradient(circle,
      transparent calc(50% - var(--weight, 1px) - 0.5px),
      #000 calc(50% - var(--weight, 1px) + 0.5px),
      #000 calc(50% - 0.5px), transparent 50%);
  /* linear, not eased: the arc travels a full circle and repeats, so an
     ease would make it surge and stall each time it came round. Only the
     fade in and out is shaped, by the keyframe stops below. */
  animation: converge var(--speed, 14s) linear var(--delay, 0s) infinite;
}

/* Each signal travels to the same meeting point and fades as it lands, so
   the eye is carried round the rim and released rather than looped. */
@keyframes converge {
  0%   { transform: rotate(var(--from)); opacity: 0; }
  18%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: rotate(var(--to)); opacity: 0; }
}

/* A quiet mark where the signals arrive. */
.hero-orbit::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: rgba(255, 228, 168, 0.85);
  opacity: 0.4;
  box-shadow: 0 0 10px 1px rgba(255, 214, 128, 0.35);
}

/* conic-gradient with a mask is recent. Without it the arcs would fill the
   whole disc and sit over the photograph, so they are dropped entirely and
   the rim is left as a plain ring. */
@supports not ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) {
  .hero-arc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-arc { animation: none; opacity: 0.35; }
}

@media (max-width: 767.98px) {
  /* One signal at this size: two crowd a small disc. */
  .hero-arc:nth-child(n + 2) { display: none; }
}

.hero-scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--color-muted);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero-scroll i { animation: bounce 2s infinite; font-size: 1.15rem; color: var(--color-gold-ink); }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-9px); }
  60% { transform: translateY(-5px); }
}

/* --------------------------------------------------------------------------
   Page banner (interior pages)
   -------------------------------------------------------------------------- */

.page-banner {
  position: relative;
  padding: calc(var(--header-height) + 72px) 0 72px;
  background: var(--dark-gradient);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  text-align: center;
}

/* No glow over the page header. The gold radial that used to sit here was
   painting over the banner photograph and washing it out, and it is the
   same generated-design signature as the one removed from the hero. */

.page-banner > .container { position: relative; z-index: 2; }

.breadcrumb-eh {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  font-size: 0.9rem;
}

.breadcrumb-eh li { color: var(--color-muted); }
.breadcrumb-eh li + li::before { content: "\\"; margin-inline-end: 10px; color: var(--color-border); }
[dir="rtl"] .breadcrumb-eh li + li::before { content: "/"; }
.breadcrumb-eh a { color: var(--color-silver); }
.breadcrumb-eh a:hover { color: var(--color-gold-ink); }

/* --------------------------------------------------------------------------
   Statistics
   -------------------------------------------------------------------------- */

.stat-item { text-align: center; padding: 22px 12px; }

.stat-value {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  background: var(--gold-gradient-text, var(--gold-gradient));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  color: var(--color-muted);
  font-size: 0.92rem;
  margin-top: 10px;
  margin-bottom: 0;
}

.stat-icon { color: var(--color-gold-ink); font-size: 1.7rem; margin-bottom: 14px; opacity: 0.85; }

/* --------------------------------------------------------------------------
   Process timeline
   -------------------------------------------------------------------------- */

.process-step {
  position: relative;
  text-align: center;
  padding: 30px 18px;
}

.process-number {
  width: 76px;
  height: 76px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-gold-ink);
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-gold-ink);
  position: relative;
  z-index: 2;
  transition: all var(--speed) var(--ease);
}

.process-step:hover .process-number {
  background: var(--gold-gradient);
  color: var(--color-on-gold);
  box-shadow: var(--shadow-gold);
  transform: scale(1.08);
}

/* Dashed connector between steps on wide screens.

   The geometry is derived from the step itself rather than guessed at in
   percentages. Both were wrong before: the line sat at a fixed 68px while
   the circles centre on 120px, so it crossed them near the top instead of
   running through the middle; and a 12% inset started it outside the first
   circle and ran it past the last, so it read as a rule behind the row
   rather than as a link between the steps. */
.process-row {
  position: relative;
  /* Everything the connector needs to place itself, in one place.
     The offset is the step's own 30px padding plus the row gutter Bootstrap
     applies to each column (g-4 = 24px), which is what the old fixed 68px
     failed to account for. */
  --process-pad-top: 54px;   /* .process-step padding-top + g-4 gutter */
  --process-size: 76px;      /* .process-number diameter */
}

@media (min-width: 992px) {
  .process-row::before {
    content: "";
    position: absolute;
    /* Through the centre of the circles: the offset above plus a radius. */
    top: calc(var(--process-pad-top) + var(--process-size) / 2);
    /* Stop at the outer circles instead of running past them. Each step is
       one of four columns, so the first centre sits an eighth of the row in;
       the line then starts a radius further along so it meets the circle's
       edge rather than passing behind it. */
    inset-inline: calc(12.5% + var(--process-size) / 2);
    height: 2px;
    /* A logical gradient, so the dashes run right-to-left in Arabic. */
    background-image: linear-gradient(
      to inline-end, var(--color-gold) 50%, transparent 50%
    );
    background-size: 14px 2px;
    opacity: 0.35;
    z-index: 0;
  }

  /* Older engines ignore `to inline-end`; the dash pattern is symmetric,
     so a physical direction is a safe fallback. */
  @supports not (background-image: linear-gradient(to inline-end, red 50%, transparent 50%)) {
    .process-row::before {
      background-image: linear-gradient(90deg, var(--color-gold) 50%, transparent 50%);
    }
  }
}

/* The steps come from the CMS, so the count is not guaranteed.

   The columns are col-lg-3, which is a fixed quarter each — they do not
   spread to fill the row. So with two or three steps the circles still sit
   at the first and second quarter marks, and the inset stays the same as
   for four. Scaling it by the count (25%, 16.667%) was wrong: it pulled the
   line inward, away from circles that had not moved.

   With five or more the row wraps to a second line, where one straight
   connector would float across the gap. There it is dropped rather than
   drawn wrong, and the same goes for a single step with nothing to join. */
@media (min-width: 992px) {
  .process-row:has(> :nth-child(5))::before { content: none; }
  .process-row:has(> :first-child:last-child)::before { content: none; }
}

/* --------------------------------------------------------------------------
   Service and project cards
   -------------------------------------------------------------------------- */

.service-card { display: flex; flex-direction: column; }
.service-card .card-text { flex-grow: 1; }

.project-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  height: 100%;
  transition: all var(--speed) var(--ease);
}

.project-card:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-6px);
}

.project-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface);
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.project-card:hover .project-thumb img { transform: scale(1.07); }

.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 6, 0.94) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity var(--speed) var(--ease);
}

.project-card:hover .project-overlay { opacity: 1; }

.project-body { padding: 22px; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.testimonial-card {
  background: var(--surface-gradient);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 32px;
  height: 100%;
  position: relative;
  transition: all var(--speed) var(--ease);
}

.testimonial-card:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}

.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  inset-inline-end: 24px;
  font-family: Georgia, serif;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--color-gold-ink);
  opacity: 0.16;
}

.testimonial-quote {
  font-size: 1rem;
  color: var(--color-silver);
  font-style: italic;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.testimonial-author { display: flex; align-items: center; gap: 14px; }

.testimonial-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-gold);
  flex-shrink: 0;
}

.avatar-fallback {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold-gradient);
  color: var(--color-on-gold);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.stars { color: var(--color-gold-ink); font-size: 0.88rem; letter-spacing: 2px; }

/* --------------------------------------------------------------------------
   Client marquee
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  position: relative;
  padding: 22px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: marquee 34s linear infinite;
  align-items: center;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee img {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.7);
  opacity: 0.55;
  transition: all var(--speed) var(--ease);
}

.marquee img:hover { filter: none; opacity: 1; }

[data-theme="light"] .marquee img { filter: grayscale(1); }

/* --------------------------------------------------------------------------
   Accordion (FAQ)
   -------------------------------------------------------------------------- */

.accordion-eh .accordion-item {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card) !important;
  margin-bottom: 14px;
  overflow: hidden;
}

.accordion-eh .accordion-button {
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  padding: 20px 24px;
  box-shadow: none;
}

.accordion-eh .accordion-button:not(.collapsed) {
  color: var(--color-gold-ink);
  background: var(--gold-tint);
}

.accordion-eh .accordion-button:focus { box-shadow: 0 0 0 3px var(--gold-tint-strong); }

.accordion-eh .accordion-button::after {
  filter: invert(72%) sepia(72%) saturate(1400%) hue-rotate(1deg) brightness(103%);
}

.accordion-eh .accordion-body {
  color: var(--color-muted);
  padding: 0 24px 22px;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.pricing-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 34px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--speed) var(--ease);
}

.pricing-card:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); }

.pricing-card.featured {
  border-color: var(--color-gold);
  background: var(--surface-gradient);
  box-shadow: var(--shadow-gold);
}

@media (min-width: 992px) {
  .pricing-card.featured { transform: scale(1.045); }
  .pricing-card.featured:hover { transform: scale(1.045) translateY(-6px); }
}

.pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold-gradient);
  color: var(--color-on-gold);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pricing-amount {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}

.pricing-period { color: var(--color-muted); font-size: 0.95rem; }

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 26px 0;
  flex-grow: 1;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  color: var(--color-silver);
  font-size: 0.94rem;
  border-bottom: 1px solid var(--color-border-soft);
}

.pricing-features li:last-child { border-bottom: none; }
.pricing-features i { color: var(--color-gold-ink); margin-top: 4px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */

.team-card {
  text-align: center;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  transition: all var(--speed) var(--ease);
  height: 100%;
}

.team-card:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); transform: translateY(-6px); }

.team-photo {
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  background: var(--color-surface);
}

.team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.team-card:hover .team-photo img { transform: scale(1.06); }

.team-social {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(to top, rgba(5, 5, 6, 0.94), transparent);
  transform: translateY(100%);
  transition: transform var(--speed) var(--ease);
}

.team-card:hover .team-social { transform: translateY(0); }

.team-social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-tint-strong);
  border: 1px solid var(--gold-outline);
  color: var(--color-gold-ink);
  transition: all var(--speed) var(--ease);
}

.team-social a:hover { background: var(--color-gold); color: var(--color-on-gold); }

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.post-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all var(--speed) var(--ease);
}

.post-card:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); transform: translateY(-6px); }

.post-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.post-card:hover .post-thumb img { transform: scale(1.06); }

.post-body { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--color-muted);
  font-size: 0.83rem;
  margin-bottom: 14px;
}

.post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.post-meta i { color: var(--color-gold-ink); }

.post-content {
  color: var(--color-silver);
  font-size: 1.04rem;
  line-height: 1.85;
}

.post-content h2, .post-content h3, .post-content h4 { margin: 34px 0 16px; }
.post-content p { margin-bottom: 20px; }
.post-content img { max-width: 100%; height: auto; border-radius: var(--radius-card); margin: 24px 0; }
.post-content ul, .post-content ol { margin-bottom: 20px; padding-inline-start: 24px; }
.post-content li { margin-bottom: 9px; }

.post-content blockquote {
  border-inline-start: 3px solid var(--color-gold);
  background: var(--color-surface);
  padding: 20px 24px;
  margin: 26px 0;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  font-style: italic;
  color: var(--color-white);
}

[dir="rtl"] .post-content blockquote { border-radius: var(--radius-card) 0 0 var(--radius-card); }

.post-content a { text-decoration: underline; text-underline-offset: 3px; }

/* --color-black inverts to white in light mode, which would leave a code
   block indistinguishable from the page it sits on. A code block needs to
   read as a distinct panel in both themes, so it takes the surface token and
   a light-mode tint of its own below. */
.post-content pre {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 20px;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}

.post-content th, .post-content td {
  border: 1px solid var(--color-border);
  padding: 12px 14px;
}

.post-content th { background: var(--color-surface); color: var(--color-white); }

/* Sidebar */
.sidebar-widget {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 24px;
  margin-bottom: 24px;
}

.sidebar-title {
  font-size: 1.06rem;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.sidebar-title::after {
  content: "";
  position: absolute;
  bottom: -1px;
  inset-inline-start: 0;
  width: 44px;
  height: 2px;
  background: var(--gold-gradient);
}

.sidebar-list { list-style: none; padding: 0; margin: 0; }

.sidebar-list li + li { border-top: 1px solid var(--color-border-soft); }

.sidebar-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  color: var(--color-silver);
  font-size: 0.94rem;
}

.sidebar-list a:hover { color: var(--color-gold-ink); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

.tag-chip {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-silver);
  font-size: 0.82rem;
  transition: all var(--speed) var(--ease);
}

.tag-chip:hover {
  border-color: var(--color-gold-ink);
  color: var(--color-gold-ink);
  background: var(--gold-tint);
}

/* --------------------------------------------------------------------------
   Careers
   -------------------------------------------------------------------------- */

.job-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 26px;
  transition: all var(--speed) var(--ease);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.job-card:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
  transform: translateX(6px);
}

[dir="rtl"] .job-card:hover { transform: translateX(-6px); }

.job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* --------------------------------------------------------------------------
   Filter tabs
   -------------------------------------------------------------------------- */

/* One row, always. The labels are short enough to fit, but the categories
   come from the CMS: if an editor adds a tenth or writes a long one, the
   row scrolls sideways rather than silently becoming two. */
.filter-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 44px;
  overflow-x: auto;
  scrollbar-width: none;          /* the row rarely overflows; a bar would
                                     sit under it looking broken */
  padding-bottom: 2px;
}

.filter-tabs::-webkit-scrollbar { display: none; }

/* Tabs keep their own width instead of being squeezed to fit. */
.filter-tabs > .filter-tab {
  flex: 0 0 auto;
  white-space: nowrap;
}

.filter-tab {
  padding: 9px 21px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-silver);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--speed) var(--ease);
  cursor: pointer;
}

.filter-tab:hover { border-color: var(--color-gold-ink); color: var(--color-gold-ink); }

.filter-tab.active {
  background: var(--gold-gradient);
  border-color: transparent;
  color: var(--color-on-gold);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  border-radius: 24px;
  padding: clamp(40px, 6vw, 72px);
  background: var(--surface-gradient);
  border: 1px solid var(--color-border);
  overflow: hidden;
  text-align: center;
}

/* The call-to-action band had a gold radial glow here too; removed with the
   others. The band already reads as its own block through its background
   and border. */

.cta-band > * { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.eh-footer {
  background: var(--color-black);
  border-top: 1px solid var(--color-border);
  padding-top: 76px;
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .eh-footer { background: var(--color-surface); }

.eh-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.footer-title {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 20px;
}

.footer-links { list-style: none; padding: 0; margin: 0; }

.footer-links li { margin-bottom: 11px; }

.footer-links a {
  color: var(--color-muted);
  font-size: 0.93rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--speed) var(--ease);
}

.footer-links a:hover { color: var(--color-gold-ink); padding-inline-start: 5px; }

.footer-contact-item {
  display: flex;
  gap: 13px;
  margin-bottom: 16px;
  color: var(--color-muted);
  font-size: 0.93rem;
}

.footer-contact-item i { color: var(--color-gold-ink); font-size: 1.05rem; margin-top: 3px; flex-shrink: 0; }

.social-links { display: flex; gap: 10px; flex-wrap: wrap; }

.social-links a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-button);
  border: 1px solid var(--color-border);
  color: var(--color-silver);
  transition: all var(--speed) var(--ease);
}

.social-links a:hover {
  background: var(--gold-gradient);
  border-color: transparent;
  color: var(--color-on-gold);
  transform: translateY(-3px);
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  margin-top: 56px;
  padding: 24px 0;
  color: var(--color-muted);
  font-size: 0.88rem;
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 26px;
  inset-inline-end: 26px;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-button);
  background: var(--gold-gradient);
  color: var(--color-on-gold);
  border: none;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all var(--speed) var(--ease);
  z-index: 1020;
  box-shadow: var(--shadow-gold);
}

.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { box-shadow: var(--shadow-gold-strong); transform: translateY(-3px); }

/* WhatsApp float */
.whatsapp-float {
  position: fixed;
  bottom: 26px;
  inset-inline-start: 26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  z-index: 1020;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.36);
  transition: transform var(--speed) var(--ease);
}

.whatsapp-float:hover { transform: scale(1.1); color: #fff; }

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact-info-card {
  display: flex;
  gap: 18px;
  padding: 24px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  transition: all var(--speed) var(--ease);
  height: 100%;
}

.contact-info-card:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); }

.contact-info-icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--gold-tint);
  border: 1px solid var(--gold-outline);
  color: var(--color-gold-ink);
  font-size: 1.35rem;
  flex-shrink: 0;
}

.map-wrapper {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  filter: grayscale(1) invert(0.9) contrast(0.85);
  transition: filter var(--speed) var(--ease);
}

.map-wrapper:hover { filter: none; }
[data-theme="light"] .map-wrapper { filter: none; }
.map-wrapper iframe { width: 100%; height: 380px; border: 0; display: block; }

/* --------------------------------------------------------------------------
   Pagination and alerts
   -------------------------------------------------------------------------- */

.pagination-eh { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 48px; }

.pagination-eh a,
.pagination-eh span {
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-radius: var(--radius-button);
  border: 1px solid var(--color-border);
  color: var(--color-silver);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  transition: all var(--speed) var(--ease);
}

.pagination-eh a:hover { border-color: var(--color-gold-ink); color: var(--color-gold-ink); }

.pagination-eh .current {
  background: var(--gold-gradient);
  border-color: transparent;
  color: var(--color-on-gold);
  font-weight: 700;
}

.alert-eh {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-white);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.alert-eh.alert-success { border-color: rgba(72, 199, 116, 0.45); background: rgba(72, 199, 116, 0.08); }
.alert-eh.alert-danger { border-color: rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.08); }
.alert-eh i { font-size: 1.2rem; }
.alert-eh.alert-success i { color: #48c774; }
.alert-eh.alert-danger i { color: #ff6b6b; }

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.empty-state { text-align: center; padding: 72px 20px; }

.empty-state i {
  font-size: 3.4rem;
  color: var(--color-border);
  margin-bottom: 20px;
  display: block;
}

/* --------------------------------------------------------------------------
   RTL adjustments
   -------------------------------------------------------------------------- */

/* Redefine the font tokens themselves rather than listing selectors. Every
   component already resolves --font-heading / --font-body, so this reaches
   filters, tags, badges, inputs and anything added later, instead of leaving
   them on a Latin face that has no Arabic glyphs. */
:root[dir="rtl"],
[dir="rtl"] {
  --font-heading: "Cairo", "Tajawal", "Segoe UI", sans-serif;
  --font-body: "Cairo", "Tajawal", "Segoe UI", sans-serif;
}

[dir="rtl"] body {
  font-family: var(--font-body);
}

/* Arabic has no upper and lower case, so text-transform does nothing, and the
   wide tracking that makes a Latin all-caps label legible only pulls Arabic
   letterforms away from the joins that make a word readable. Both are set for
   the Latin design and have to be undone rather than inherited.

   The pill's own padding is rebalanced too: the uppercase tracking added a
   trailing space on the Latin label that Arabic does not have. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .badge-gold,
[dir="rtl"] .badge-outline,
[dir="rtl"] .sidebar-label,
[dir="rtl"] .topics-label,
[dir="rtl"] .stat-label,
[dir="rtl"] .hero-scroll {
  text-transform: none;
  letter-spacing: 0;
}

/* Arabic sits lower on the line and its ascenders and descenders run further,
   so the Latin line-height leaves the headline feeling cramped. */
[dir="rtl"] .eyebrow {
  padding: 7px 18px;
  line-height: 1.9;
}

/* Arabic is a connected script: tracking pulls the letterforms apart. */
[dir="rtl"],
[dir="rtl"] * {
  letter-spacing: 0 !important;
}

/* Latin runs inside Arabic pages keep their own face so brand names, code and
   version numbers do not render in a mismatched font. */
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] kbd,
[dir="rtl"] samp,
[dir="rtl"] .ltr-text {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  direction: ltr;
  unicode-bidi: embed;
}

/* Arabic headings need more leading than the tight Latin defaults. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  line-height: 1.45;
}

/* Directional icons need mirroring, brand marks do not.

   inline-block matters: transform does not apply to a non-replaced inline
   box, and <i> is inline by default. Without it the browser still reports
   the scaleX in the computed style — so the rule looks applied — while the
   glyph is painted unmirrored, which is exactly how these arrows ended up
   sitting on the left of Arabic text but still pointing right. */
[dir="rtl"] .icon-flip {
  display: inline-block;
  transform: scaleX(-1);
}

[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }

@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  :root { --header-height: 68px; }

  .hero { min-height: auto; padding-top: calc(var(--header-height) + 60px); }
  .hero-visual { margin-top: 48px; }
  .hero-scroll { display: none; }

  .eh-nav .nav-link { padding: 12px 0 !important; font-size: 1rem; }
  .eh-nav .nav-link::after { display: none; }
  .eh-nav .dropdown-menu { border: none; background: transparent; padding-inline-start: 14px; box-shadow: none; }
}

@media (max-width: 575.98px) {
  .eh-card, .testimonial-card, .pricing-card { padding: 22px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .back-to-top, .whatsapp-float { bottom: 18px; }
  .whatsapp-float { inset-inline-start: 18px; }
  .back-to-top { inset-inline-end: 18px; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .eh-header, .eh-footer, .back-to-top, .whatsapp-float, .hero-scroll { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   Light mode corrections

   Light mode is not a value swap of the dark theme. These are the places
   where the dark design depends on something a light page cannot provide:
   a glow that only reads against black, a scrim that darkens, a logo whose
   wordmark is white. Each rule below fixes one of those.
   ========================================================================== */

/* The scrolled header casts a black shadow in dark mode; on white that reads
   as dirt. */
[data-theme="light"] {
  --header-shadow: 0 6px 24px rgba(16, 17, 20, 0.07);
}

/* The header is transparent until the page scrolls, so at the top of a page
   that opens on a photograph the nav sits straight on the image. In dark mode
   that is safe - the links are white and every banner is dark. In light mode
   the links are near-black over a bright photograph, which is where the nav
   was disappearing.

   A short gradient under the header only, fading out by its own height, gives
   the links a ground without putting a visible bar across the top of the
   image. It is skipped once .is-scrolled paints a real background. */
[data-theme="light"] .eh-header:not(.is-scrolled)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--header-height) + 26px);
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(246, 247, 250, 0.92) 0%,
    rgba(246, 247, 250, 0.72) 55%,
    rgba(246, 247, 250, 0) 100%
  );
}

/* ---- Logo ---- */
[data-theme="light"] .eh-logo img {
  /* The lockup pairs a near-white wordmark with a gold emblem, so on a white
     header the wordmark disappears while the gold is already fine.

     Dimming the image with brightness() darkens the wordmark but drags the
     gold to brown with it - a filter cannot tell the two halves apart by
     lightness alone. invert() can: it flips the near-white wordmark to near
     black, which is exactly what is wanted, and it also flips every hue, which
     is not. hue-rotate(180deg) puts the hues back, so the gold returns to gold
     while the wordmark stays dark.

     The result keeps the brand colour at full strength instead of trading it
     away for a readable wordmark. */
  filter: invert(1) hue-rotate(180deg);
}

/* The footer is white in light mode too (--color-surface), so its logo needs
   the same treatment. It is also .eh-logo, so the rule above already covers
   it - the earlier exception here assumed a dark footer ground and left the
   wordmark white-on-white. */

/* The wordmark set in text has the same problem: --silver-gradient is already
   inverted for light mode in theme.css, so this only needs the gold half. */
[data-theme="light"] .eh-logo-text .text-gradient-gold {
  background: var(--gold-gradient-text);
}

/* ---- Hero ----

   The home hero, unlike a page banner, has no scrim: .page-banner .hero-bg
   ::after does not apply here. On a dark page it does not need one - the
   image is dark, the text is white. In light mode there is nothing holding
   the near-black headline off the photograph, which is why this was first
   set to opacity 0.16: crushing the image was the only thing keeping the
   text readable, and it left the hero looking like an empty grey panel.

   The fix is to protect only the half the text occupies and leave the rest of
   the photograph alone.

   Earlier attempts dimmed the image and stacked a full-width veil under the
   side one. Those multiply, and the photograph ended up contributing barely
   a quarter of the pixel even at the end meant to be clear - which is what
   made the hero look washed out.

   So the image is left exactly as dark mode has it: no opacity change, no
   filter. The only light-mode difference is one gradient that covers the
   half the text sits on and clears completely before the image side. */

/* .hero-bg is painted at opacity 0.3 over the hero's own background. In dark
   mode that ground is black, so 30% of a night photograph still reads as a
   photograph. In light mode the ground is #f4f5f8, and the same 30% lifts the
   image to a pale grey - measured at ~180 luminance against dark mode's ~10 in
   the very region the scrim deliberately leaves clear. The image side of the
   hero was therefore washed out no matter how the scrim was tuned, because the
   fog was underneath it rather than in it.

   Raising the opacity restores the photograph's weight on the clear side; the
   scrim above still protects the half the text occupies. */
[data-theme="light"] .hero:not(.page-banner) .hero-bg {
  opacity: 0.82;
}

[data-theme="light"] .hero:not(.page-banner) .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* In dark mode the photograph runs the full width at an even strength and
     the white text simply sits on it. Light mode should read the same way, so
     the veil no longer erases the text half into a flat white block that ends
     mid-frame: it is a gentle wash across the whole image, leaning slightly
     heavier where the copy sits and never reaching opacity anywhere.

     The headline carries a halo of its own (below), which is what lets the
     wash stay this light. */
  background: linear-gradient(
    to var(--hero-scrim-to, right),
    rgba(244, 245, 248, 0.62) 0%,
    rgba(244, 245, 248, 0.54) 40%,
    rgba(244, 245, 248, 0.38) 62%,
    rgba(244, 245, 248, 0.26) 100%
  );
}

/* Below the lg breakpoint the columns stack and the text sits over the whole
   frame, so a side gradient protects nothing. Veil the full width instead. */
@media (max-width: 991.98px) {
  /* The stacked layout puts text over the whole frame, so the side gradient
     protects nothing and the veil has to be full width. Kept as light as the
     halo below allows, so the photograph still reads on a phone. */
  [data-theme="light"] .hero:not(.page-banner) .hero-bg::after {
    background: rgba(244, 245, 248, 0.72);
  }
  [data-theme="light"] .hero:not(.page-banner) .hero-bg {
    opacity: 0.85;
  }
}

/* The home hero's text now sits on a thinner veil for the same reason as the
   banner's, so it takes the same halo. Scoped to the hero: everywhere else the
   ground is a flat surface and needs nothing. */
[data-theme="light"] .hero:not(.page-banner) .hero-title,
[data-theme="light"] .hero:not(.page-banner) .hero-subtitle,
[data-theme="light"] .hero:not(.page-banner) .stat-value,
[data-theme="light"] .hero:not(.page-banner) .stat-label,
[data-theme="light"] .hero:not(.page-banner) .hero-scroll {
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.98),
    0 0 9px rgba(255, 255, 255, 0.96),
    0 0 18px rgba(255, 255, 255, 0.90),
    0 0 34px rgba(255, 255, 255, 0.70);
}

/* A text-shadow is painted *behind* the glyphs, so on background-clipped text -
   where the glyphs themselves are transparent - the white halo shows straight
   through and erases the fill. The gold half of the headline is exactly that,
   so it must not inherit the halo from the rule above. It keeps its contrast
   from the flat dark ink instead. */
[data-theme="light"] .hero:not(.page-banner) .hero-title .text-gradient-gold,
[data-theme="light"] .hero:not(.page-banner) .stat-value,
[data-theme="light"] .page-banner .hero-title .text-gradient-gold {
  text-shadow: none;
}

/* What the halo cannot do for clipped text, a filter can.

   text-shadow paints behind the glyphs, so on background-clipped text it shows
   through the transparent letterforms and erases the fill - which is why it is
   switched off above. drop-shadow works on the element after it is rendered,
   so it traces the painted gold rather than sitting behind it. That gives the
   gold half of the headline the same separation from the photograph the black
   half gets from its halo, without touching the fill.

   The span must stay a plain inline box: inline-block makes the whole phrase
   an unbreakable unit, which re-wraps the headline. A filter applies to an
   inline element's fragments as they are, so no display change is needed. */
[data-theme="light"] .hero:not(.page-banner) .hero-title .text-gradient-gold,
[data-theme="light"] .page-banner .hero-title .text-gradient-gold {
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.6));
}

/* The hero headline is the one place gold text sits over a photograph rather
   than a flat surface. Even under the scrim, a dark region of the image can
   pull the standard ink to ~4.4:1, so the hero takes one step darker. Scoped
   to the hero: everywhere else the ground is flat and the lighter gold is
   correct. */
[data-theme="light"] .hero:not(.page-banner) .hero-title .text-gradient-gold,
[data-theme="light"] .hero:not(.page-banner) .hero-title .text-gold,
[data-theme="light"] .hero:not(.page-banner) .stat-value {
  /* Measured against the brightest sky the headline crosses, the previous
     ramp bottomed out at 4.03:1 - under the AA floor, and about a quarter of
     the 15.8:1 the black half of the same headline gets, which is exactly why
     the gold line read as washed out beside it. This ramp holds ~5.6:1 at its
     lightest stop while staying recognisably gold rather than brown. */
  --gold-gradient-text: linear-gradient(135deg, #7d5000 0%, #6b4300 55%, #573700 100%);
  color: #6b4300;
}

/* The stat figures are painted by a gradient clipped to the glyphs, and
   -webkit-text-fill-color: transparent beats `color` - so the darker ink set
   above never reached them and they stayed a pale wash over the hero photo.
   Dropping the clip lets the flat colour paint, which is what the figures
   need at this weight against a light ground. */
[data-theme="light"] .hero:not(.page-banner) .stat-value {
  background: none;
  -webkit-text-fill-color: #8f5b00;
  color: #8f5b00;
}

/* The labels under them carry the same problem as the banner subtitle: the
   muted grey was tuned for a flat surface, not for a scrim over a photo. */
[data-theme="light"] .hero:not(.page-banner) .hero-subtitle {
  /* Black, not the muted grey: this line sits on a photograph and is the one
     sentence the visitor is meant to finish reading. It carries no plate, so
     the ink and the halo below are what hold it off the image. */
  color: #000000;
  font-weight: 700;
  /* The smallest line in the hero and the only one without a plate, so it
     takes a tighter, denser halo than the shared one above: more passes close
     to the glyphs is what closes the gaps between words on a busy frame. */
  text-shadow:
    0 0 3px rgba(255, 255, 255, 1),
    0 0 6px rgba(255, 255, 255, 1),
    0 0 12px rgba(255, 255, 255, 0.96),
    0 0 22px rgba(255, 255, 255, 0.86),
    0 0 40px rgba(255, 255, 255, 0.62);
}

[data-theme="light"] .hero:not(.page-banner) .stat-label {
  color: #3a3d44;
}

/* The text column is the first one in the row, so it sits at the inline
   start: on the right in Arabic, on the left in English. The heavy end of
   the scrim has to follow it, and a gradient's `to <side>` names the end it
   travels *toward* - so the direction is the opposite side to the text.
   `to right` therefore makes the left edge heaviest, which is the LTR case. */
:root { --hero-scrim-to: right; }
[dir="rtl"] { --hero-scrim-to: left; }

/* Banner text sits on a scrim over a photograph rather than on a flat
   surface, so the muted greys tuned for a solid background lose their footing
   wherever the image runs bright. The subtitle and breadcrumb take a darker
   step here only - on the rest of the page the flat ground makes the standard
   greys correct. */
[data-theme="light"] .page-banner .hero-subtitle {
  color: #2b2e35;
}

/* The breadcrumb is the smallest text in the banner and sits on the last line,
   furthest from the middle of the pad, so it needs a step more than the
   subtitle rather than the same. */
[data-theme="light"] .page-banner .breadcrumb-eh li,
[data-theme="light"] .page-banner .breadcrumb-eh a {
  color: #202329;
  font-weight: 500;
}

[data-theme="light"] .page-banner .breadcrumb-eh li + li::before {
  color: #6b7079;
}

/* The brand mark is drawn with white bars beside the gold arrow and is meant
   to melt into a dark background. On a light page the white half disappears
   and only the arrow and the outer ring survive. The mark is an <img>, so its
   internals are out of reach - it needs a ground rather than a recolour.

   .hero-visual is the wrapper the mark is centred in, so the panel is painted
   there, sized to the mark and rounded like the emblem's own frame. */
[data-theme="light"] .hero-visual img {
  filter: drop-shadow(0 10px 26px rgba(16, 17, 20, 0.18));
}

[data-theme="light"] .hero-visual:has(> img[src*="logo-icon"])::before {
  content: "";
  position: absolute;
  width: min(78%, 420px);
  aspect-ratio: 1;
  border-radius: 22%;
  background: radial-gradient(circle at 50% 45%, #1d1f24 0%, #0e0f12 100%);
  box-shadow: 0 18px 50px rgba(16, 17, 20, 0.22);
}

/* :has() is well supported now, but where it is not the mark would be back to
   white-on-white. A plain dark ring on the wrapper is a safe fallback. */
@supports not selector(:has(img)) {
  [data-theme="light"] .hero-visual img {
    background: #14151a;
    border-radius: 22%;
  }
}

[data-theme="light"] .hero-face {
  border-color: var(--gold-outline);
  box-shadow:
    0 0 24px rgba(154, 98, 0, 0.14),
    0 18px 44px rgba(16, 17, 20, 0.18);
}

/* ---- Cards and edges ----
   A 1px #d6d9e0 hairline between two whites is technically present and
   practically invisible. Light mode leans on a soft shadow to separate a
   card from the page, the way the dark theme leans on a lighter surface. */
[data-theme="light"] .eh-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .cta-band {
  box-shadow: 0 1px 2px rgba(16, 17, 20, 0.04), 0 8px 24px rgba(16, 17, 20, 0.06);
}

[data-theme="light"] .eh-card:hover {
  box-shadow: 0 2px 4px rgba(16, 17, 20, 0.05), 0 16px 36px rgba(154, 98, 0, 0.16);
}

/* Long-form extras: in light mode --color-surface-2 is pure white, so a code
   block or table header set from it would vanish into the page. Both take a
   faint grey panel instead, which is how they separate on a light ground. */
[data-theme="light"] .post-content pre,
[data-theme="light"] .post-content th {
  background: #eef0f4;
}

[data-theme="light"] .post-content blockquote {
  background: #f7f8fa;
}

/* ---- Grid pattern ----
   A gold grid at 4.5% alpha vanishes on a light ground. */
[data-theme="light"] .grid-pattern {
  background-image:
    linear-gradient(rgba(16, 17, 20, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 17, 20, 0.045) 1px, transparent 1px);
}

/* The noise overlay is a white-on-dark texture; on a light page it reads as
   grime rather than grain. */
[data-theme="light"] .noise-overlay::after { opacity: 0.015; }

/* Small text on the gold tint sits at ~4.5:1 with the standard ink, which is
   the floor rather than a comfortable read at this size. Badges, pills and
   chips take the darker step. */
[data-theme="light"] .badge-gold,
[data-theme="light"] .eyebrow {
  color: var(--color-gold-ink-hover);
}

/* The pill itself, not just its text.

   At --gold-tint (9% alpha) over a light page the fill and the hairline are
   both so close to the background that the pill reads as a smudge rather than
   as a deliberate label. A denser tint and a real border give it an edge, and
   the letter-spacing that makes the uppercase label legible needs a touch more
   room at this weight. */
[data-theme="light"] .eyebrow {
  background: rgba(154, 98, 0, 0.14);
  border-color: rgba(154, 98, 0, 0.45);
  font-weight: 700;
}

/* Over a photograph the pill has no dependable ground, so the translucent
   fill lands on whatever the image happens to be. These two eyebrows - the
   home hero's and a page banner's - take an opaque backing instead, which is
   the only thing that holds a small uppercase label at this size. */
[data-theme="light"] .hero:not(.page-banner) .eyebrow,
[data-theme="light"] .page-banner .eyebrow {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(154, 98, 0, 0.5);
  box-shadow: 0 2px 10px rgba(16, 17, 20, 0.10);
}

/* The halo above is for text sitting directly on the image; inside a pill it
   only fogs the fill it is already sitting on. */
[data-theme="light"] .page-banner .eyebrow {
  text-shadow: none;
}

/* The card and contact icons are a glyph in gold ink on the same gold tint,
   which composites to 4.18:1 - under the 4.5 floor, and visibly washed out at
   the weight these icons are drawn. They take the darker ink and a slightly
   stronger tint, which brings the pair to ~5.9:1 without changing the shape
   of the component. */
[data-theme="light"] .card-icon,
[data-theme="light"] .contact-info-icon {
  background: var(--gold-tint-strong);
  color: var(--color-gold-ink-hover);
}