@charset "UTF-8";
/* =============================================================================
   amaan-home.css — Homepage Premium Visual System + Motion Layer
   =============================================================================
   Loaded ONLY on the front page (see inc/classes/class-assets.php ->
   if ( is_front_page() ) { wp_enqueue_style( 'amaan_home_css' ); }).
   Registered with ['amaan_homepage_css'] as a dependency, so it always
   prints AFTER the shared 197 KB sheet.

   SCOPING CONTRACT — read before adding a rule
   --------------------------------------------
   Every selector starts with body.home. That is what keeps this file from
   leaking onto area / service / blog / about / contact pages, which all share
   amaan-homepage.css. body.home = specificity (0,2,1) and beats the shared
   sheet single-class rules (0,1,0) without a single !important.

   Hard bans in this file:
     - no :root {}              -> new tokens go on body.home
     - no bare .amaan-reveal, .container, or element selectors
     - no .amaan-services / .amaan-service-card
          (shared with template-services.php — see services-grid.php:14-18)
     - @keyframes names prefixed amaan-home- (keyframes are global)

   MOTION CONTRACT
   ---------------
   The .amaan-reveal IntersectionObserver in main.js:445-492 is the ONLY
   reveal observer. This file never re-implements it — it only styles the
   .is-visible class that observer already adds. Animate transform / opacity
   / filter / box-shadow only: never width, height, top, left or margin.

   Section map
     1. Tokens
     2. Hero — LCP image + video crossfade
     3. Services grid
     4. Areas
     5. Move Plan (new section)
     6. Process / journey restyle
     7. Proof gallery
     8. Final CTA
     9. Sticky mobile CTA
    10. Focus visibility
    11. Guide topbar (.amaan-topbar)
    12. prefers-reduced-motion
   ========================================================================== */


/* =============================================================================
   1. TOKENS — homepage-scoped only (never :root)
   ========================================================================== */
body.home {
  --home-royal:        #244A86;   /* Royal Blue — brand palette */
  --home-ivory:        #F6F2EB;   /* Ivory */
  --home-navy-deep:    #0E1F4D;   /* Deep Navy */
  --home-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --home-lift:         -6px;
  --home-card-radius:  18px;
  --home-ring:         0 0 0 3px rgba(240, 125, 0, 0.35);
}


/* =============================================================================
   2. HERO — LCP image, with the video as progressive enhancement
   =============================================================================
   The <img class="amaan-hero__bg-media"> is the LCP element and ships in the
   initial HTML. amaan-home.js may inject a <video class="amaan-hero__bg-video">
   on desktop; when it actually starts playing it adds .has-video to the card
   and the image cross-fades out. The image is never display:none — it stays as
   a paint-stable backdrop and as the fallback if the video errors.
   The .amaan-hero__bg-video rules live in amaan-homepage.css:2007-2018 and are
   deliberately NOT redefined here.
   ========================================================================== */
body.home .amaan-hero__bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  z-index: 0;
  /* Matches the video filter so the crossfade has no brightness jump. */
  filter: saturate(0.75) brightness(0.55);
  opacity: 1;
  transition: opacity 0.5s var(--home-ease);
}

body.home .amaan-hero__brand-card.has-video .amaan-hero__bg-media {
  opacity: 0;
}

/* Hero CTA — attention on hover/focus only. Never an infinite pulse. */
body.home .amaan-hero__btn {
  transition: transform 0.22s var(--home-ease), box-shadow 0.22s var(--home-ease);
}

@media (hover: hover) and (pointer: fine) {
  body.home .amaan-hero__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(240, 125, 0, 0.28);
  }
}

body.home .amaan-hero__btn:focus-visible {
  transform: translateY(-2px);
}


/* =============================================================================
   3. SERVICES GRID — protective card frames
   =============================================================================
   Namespace note: these are .amaan-home-service-card*, which is homepage-only.
   .amaan-service-card (no "home-") belongs to template-services.php and must
   never appear in this file.
   ========================================================================== */
/* Six service pages → 3 columns on desktop (3 + 3) instead of the base 4
   (which would leave a 4 + 2 orphan row). Tablet 2 / mobile 1 unchanged. */
@media (min-width: 992px) {
  body.home .amaan-home-services__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.home .amaan-home-service-card {
  border-radius: var(--home-card-radius);
  transition:
    transform    0.26s var(--home-ease),
    box-shadow   0.26s var(--home-ease),
    border-color 0.26s var(--home-ease);
}

/* Warm accent rail that grows along the top edge of the card on hover. */
body.home .amaan-home-service-card::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(to left, var(--color-orange), var(--home-royal));
  transform: scaleX(0);
  transform-origin: right center;   /* RTL: grow from the right */
  transition: transform 0.34s var(--home-ease);
  border-radius: var(--home-card-radius) var(--home-card-radius) 0 0;
  pointer-events: none;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  body.home .amaan-home-service-card:hover {
    transform: translateY(var(--home-lift));
    box-shadow: 0 18px 40px rgba(14, 31, 77, 0.16);
    border-color: rgba(240, 125, 0, 0.35);
  }
  body.home .amaan-home-service-card:hover::after { transform: scaleX(1); }
  body.home .amaan-home-service-card:hover .amaan-home-service-card__image {
    transform: scale(1.05);
  }
}

body.home .amaan-home-service-card:focus-visible {
  transform: translateY(var(--home-lift));
  box-shadow: 0 18px 40px rgba(14, 31, 77, 0.16);
}
body.home .amaan-home-service-card:focus-visible::after { transform: scaleX(1); }

body.home .amaan-home-service-card__media { overflow: hidden; }

body.home .amaan-home-service-card__image {
  transition: transform 0.5s var(--home-ease);
  will-change: transform;
}


/* =============================================================================
   4. AREAS — gentle hover highlight, no keyword-wall feel
   ========================================================================== */
body.home .amaan-area-pill {
  transition:
    transform        0.2s var(--home-ease),
    background-color 0.2s var(--home-ease),
    border-color     0.2s var(--home-ease),
    color            0.2s var(--home-ease);
}

@media (hover: hover) and (pointer: fine) {
  body.home .amaan-area-pill:hover {
    transform: translateY(-2px);
    border-color: rgba(240, 125, 0, 0.45);
  }
}

body.home .amaan-areas__region-card {
  transition: transform 0.26s var(--home-ease), box-shadow 0.26s var(--home-ease);
}

@media (hover: hover) and (pointer: fine) {
  body.home .amaan-areas__region-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(14, 31, 77, 0.12);
  }
}


/* =============================================================================
   5. MOVE PLAN — new section (.amaan-home-plan)
   =============================================================================
   Layered ivory/white band that sits between the process timeline and the FAQ.
   A subtle route-line texture echoes the "clear route" idea without imagery.
   ========================================================================== */
body.home .amaan-home-plan {
  position: relative;
  padding-block: var(--section-py);
  background: linear-gradient(180deg, var(--home-ivory) 0%, #FFFFFF 100%);
  overflow: hidden;
  isolation: isolate;
}

/* Decorative movement-route lines — pure CSS, no image request. */
body.home .amaan-home-plan::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -24deg,
      transparent 0 38px,
      rgba(36, 74, 134, 0.05) 38px 39px
    );
  z-index: 0;
  pointer-events: none;
}

body.home .amaan-home-plan__wrap { position: relative; z-index: 1; }

body.home .amaan-home-plan__head {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(28px, 4vw, 44px);
}

body.home .amaan-home-plan__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--color-orange);
  background: rgba(240, 125, 0, 0.10);
  border: 1px solid rgba(240, 125, 0, 0.22);
  border-radius: var(--radius-chip);
  padding: 6px 16px;
  margin-bottom: 14px;
}

body.home .amaan-home-plan__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--home-navy-deep);
  margin-bottom: 12px;
}

body.home .amaan-home-plan__desc {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--color-text-body);
  margin: 0;
}

/* ── Checklist grid ── */
body.home .amaan-home-plan__list {
  list-style: none;              /* main.css:1-6 resets margin/padding globally */
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 576px) {
  body.home .amaan-home-plan__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  body.home .amaan-home-plan__list { grid-template-columns: repeat(3, 1fr); }
  /* 7 items across 3 columns: let the last one sit in the middle for balance. */
  body.home .amaan-home-plan__item:last-child { grid-column: 2 / 3; }
}

body.home .amaan-home-plan__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--home-card-radius);
  padding: clamp(16px, 2.4vw, 20px);
  box-shadow: 0 2px 12px rgba(27, 47, 110, 0.05);
  transition: transform 0.26s var(--home-ease), box-shadow 0.26s var(--home-ease);
}

@media (hover: hover) and (pointer: fine) {
  body.home .amaan-home-plan__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(14, 31, 77, 0.12);
  }
}

/* Check tick — settles in after its card reveals.
   Uses --plan-index, NOT --reveal-delay: main.js:473 overwrites
   --reveal-delay on every .amaan-reveal element, which would clobber
   any inline cadence written in PHP. */
body.home .amaan-home-plan__tick {
  position: absolute;
  inset-inline-end: 14px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.12);
  color: #1EAD55;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transform: scale(0.6);
  opacity: 0;
  transition:
    transform 0.35s var(--home-ease),
    opacity   0.35s var(--home-ease);
}

body.home .amaan-home-plan__item.is-visible .amaan-home-plan__tick {
  transform: scale(1);
  opacity: 1;
  transition-delay: calc(var(--plan-index, 0) * 0.08s + 0.18s);
}

body.home .amaan-home-plan__icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--home-royal);
  background: var(--color-light-bg);
  border: 1px solid rgba(36, 74, 134, 0.12);
}

body.home .amaan-home-plan__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-inline-end: 26px;   /* clears the tick */
}

body.home .amaan-home-plan__item-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  line-height: var(--lh-heading);
}

body.home .amaan-home-plan__item-desc {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* ── Footer actions ── */
body.home .amaan-home-plan__foot {
  margin-top: clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

@media (min-width: 768px) {
  body.home .amaan-home-plan__foot {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
}

body.home .amaan-home-plan__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--radius-btn);
  background: var(--color-whatsapp);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  line-height: var(--lh-btn);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.28);
  transition:
    transform        0.22s var(--home-ease),
    box-shadow       0.22s var(--home-ease),
    background-color 0.22s var(--home-ease);
}

body.home .amaan-home-plan__cta i { font-size: 20px; }

@media (hover: hover) and (pointer: fine) {
  body.home .amaan-home-plan__cta:hover {
    background: var(--color-whatsapp-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(37, 211, 102, 0.34);
    color: #FFFFFF;
  }
}

body.home .amaan-home-plan__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--home-royal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--home-ease), border-color 0.2s var(--home-ease);
}

body.home .amaan-home-plan__link i {
  font-size: 11px;
  transition: transform 0.2s var(--home-ease);
}

@media (hover: hover) and (pointer: fine) {
  body.home .amaan-home-plan__link:hover {
    color: var(--color-orange);
    border-bottom-color: currentColor;
  }
  /* RTL: "forward" points left */
  body.home .amaan-home-plan__link:hover i { transform: translateX(-3px); }
}


/* =============================================================================
   6. PROCESS / JOURNEY — restyle only, markup untouched
   =============================================================================
   The 6 steps in how-it-works.php stay exactly as they are. What changes:
   the connector line draws itself in, and each number circle settles.
   ========================================================================== */

/* Connector draw-in. The unwrapped rule in amaan-homepage.css:4029-4045 is the
   static fallback; only the ANIMATED state is gated behind :has() support, so
   browsers without :has() simply keep the solid line. */
@supports selector(:has(*)) {
  @media (min-width: 992px) {
    body.home .amaan-process__row::before {
      transform: scaleX(0);
      transform-origin: right center;   /* RTL: draw right -> left */
      transition: transform 0.8s var(--home-ease);
    }
    body.home .amaan-process__row:has(.amaan-process__step.is-visible)::before {
      transform: scaleX(1);
    }
  }
}

/* Number circle settle — keyed off the reveal class main.js already sets. */
body.home .amaan-process__step .amaan-process__number {
  transform: scale(0.82);
  opacity: 0;
  transition:
    transform        0.42s var(--home-ease),
    opacity          0.42s var(--home-ease),
    background-color 0.22s ease,
    box-shadow       0.42s var(--home-ease);
}

body.home .amaan-process__step.is-visible .amaan-process__number {
  transform: scale(1);
  opacity: 1;
  transition-delay: 0.12s;
}

/* Deepen the existing hover lift and add a warm accent edge. */
@media (hover: hover) and (pointer: fine) {
  body.home .amaan-process__step-body:hover {
    border-color: rgba(240, 125, 0, 0.30);
    box-shadow: 0 14px 34px rgba(14, 31, 77, 0.13);
  }
  body.home .amaan-process__step:hover .amaan-process__number {
    background-color: var(--color-orange);
  }
}

body.home .amaan-process__step-body:focus-within {
  transform: translateY(-5px);
  border-color: rgba(240, 125, 0, 0.30);
}


/* =============================================================================
   7. PROOF GALLERY — image-only motion
   =============================================================================
   Scale the <img> ONLY. Never touch .amaan-proof-gallery__link or __overlay:
   those carry the Fancybox binding (data-fancybox, proof-gallery.php:95).
   ========================================================================== */
body.home .amaan-proof-gallery__img {
  transition: transform 0.45s var(--home-ease);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  body.home .amaan-proof-gallery__item:hover .amaan-proof-gallery__img {
    transform: scale(1.04);
  }
}


/* =============================================================================
   8. FINAL CTA — calm close
   ========================================================================== */
body.home .amaan-final-cta__btn {
  transition: transform 0.22s var(--home-ease), box-shadow 0.22s var(--home-ease);
}

@media (hover: hover) and (pointer: fine) {
  body.home .amaan-final-cta__btn:hover { transform: translateY(-2px); }
}


/* =============================================================================
   9. STICKY MOBILE CTA — keep it clear of the final CTA
   =============================================================================
   OWNERSHIP BOUNDARY — two independent observers, two different classes:
     - functions.php:360-391 owns .is-hero-visible        (display:none over hero)
     - amaan-home.js         owns .amaan-sticky-cta--hidden (fade over final CTA)
   Neither writes the class of the other, so the bar is hidden while EITHER is
   set. Do not merge them onto one class: last-writer-wins would un-hide the bar.
   ========================================================================== */
@media (max-width: 767.98px) {

  /* Layer 1 — CSS-only safety net. Guarantees a clear resting area under the
     final CTA buttons even if JS never runs. Mirrors the area-page approach. */
  body.home .amaan-final-cta {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* Layer 2 — JS enhancement. opacity/visibility only: the bar stays
     position:fixed so this can never cause layout shift. visibility is
     delayed by the fade duration so the transition is never cut short,
     and it removes the two links from the Tab order once hidden. */
  body.home .amaan-sticky-cta {
    transition: opacity 0.2s var(--home-ease), visibility 0s linear 0s;
  }

  body.home .amaan-sticky-cta--hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s var(--home-ease), visibility 0s linear 0.2s;
  }
}


/* =============================================================================
   10. FOCUS VISIBILITY — keyboard users must always see where they are
   ========================================================================== */
body.home .amaan-home-plan__cta:focus-visible,
body.home .amaan-home-plan__link:focus-visible,
body.home .amaan-home-service-card:focus-visible,
body.home .amaan-area-pill:focus-visible,
body.home .amaan-hero__btn:focus-visible,
body.home .amaan-final-cta__btn:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 3px;
  box-shadow: var(--home-ring);
}


/* =============================================================================
   11. GUIDE TOPBAR — "من دليل نقل الأثاث" (.amaan-topbar)
   =============================================================================
   Markup: template-parts/header/guide-topbar.php, included by header.php on the
   front page only, as the first child of #content.

   NOT FIXED, NOT STICKY.
   The bar is position:static and lives in normal document flow, as the first
   child of #content, directly under the header. It scrolls away with the page
   and never consumes viewport height while scrolling. Never give it
   position:fixed/sticky, and never move it inside .site-header.

   NAMING: .amaan-topbar (no hyphen) is THIS component. The phone / WhatsApp
   strip is .amaan-top-bar (hyphenated) and is a separate, also-static bar.

   GEOMETRY:
     .amaan-top-bar is static and in flow, and .site-header is position:sticky
     directly beneath it, so #content starts exactly at the header's bottom
     edge. Nothing slides under the header, so this bar needs no compensating
     padding. (Before the header/contact-bar separation the stack was fixed and
     .site-content reserved 16-20px too little; that is why an overlap padding
     used to live here.)

     To keep the hero CTA above the fold, the hero top padding is trimmed by
     --topbar-hero-pad while the bar exists (inside @supports :has()). Without
     :has() support the hero keeps its original padding: still correct, just
     ~40px lower.

   No JS. No images. No animation beyond colour/border transitions.
   ========================================================================== */
body.home {
  --topbar-h:        44px;   /* row height; also the link tap-target height   */
  --topbar-hero-pad: 20px;   /* trimmed hero padding-top when the bar exists  */
}

@media (min-width: 768px) {
  body.home {
    --topbar-hero-pad: 20px;   /* was 28: tablet portrait has >280px of spare fold */
  }
}

/* >=992px is pointer-driven, so the row can be slimmer than the 44px touch
   target used below it. Hero pad is set so the H1/CTA land within ~1px of where
   they sat BEFORE the bar existed (bar 37 + pad 16 = 53 vs the 52px = 72 - 20
   that the hero padding used to leave visible below the header). */
@media (min-width: 992px) {
  body.home {
    --topbar-h:        36px;
    --topbar-hero-pad: 16px;
  }
}

body.home .amaan-topbar {
  position: static;                 /* explicit: NEVER fixed / sticky */
  background: var(--home-ivory);
  border-bottom: 1px solid rgba(36, 74, 134, 0.14);
  font-family: var(--font-body);
}

body.home .amaan-topbar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--topbar-h);
}

/* ── Label (fixed at the start; only the article track scrolls) ── */
body.home .amaan-topbar__label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

body.home .amaan-topbar__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--home-navy-deep);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* Warm accent dot — decorative; the label text carries the meaning. */
body.home .amaan-topbar__eyebrow::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-orange);
}

body.home .amaan-topbar__intro {
  display: none;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-body);
}

@media (min-width: 1200px) {
  body.home .amaan-topbar__intro { display: inline; }
}

/* Hairline between the label and the article pills (desktop only). */
@media (min-width: 992px) {
  body.home .amaan-topbar__label::after {
    content: '';
    flex: none;
    width: 1px;
    height: 18px;
    margin-inline-start: 4px;
    background: rgba(36, 74, 134, 0.18);
  }
}

/* ── Article track ──
   <992px: a single horizontal touch-scroll row (no JS, no wrapping).
   >=992px: all articles fit on one row and truncate with an ellipsis. */
body.home .amaan-topbar__track {
  list-style: none;                 /* main.css resets margin/padding globally */
  margin: 0;
  padding: 0 6px;
  padding-inline-end: 28px;         /* clears the edge fade at the scroll end  */
  flex: 1 1 auto;
  min-width: 0;                     /* lets the flex child shrink and scroll   */
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Soft fade on the overflow edge = "there is more this way". */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px);
          mask-image: linear-gradient(to right, transparent 0, #000 22px);
}

body.home .amaan-topbar__track::-webkit-scrollbar { display: none; }

body.home .amaan-topbar__item {
  flex: 0 0 auto;
  min-width: 0;
  max-width: min(78vw, 300px);
}

@media (min-width: 992px) {
  body.home .amaan-topbar__track {
    overflow: hidden;
    padding-inline-end: 6px;
    gap: 10px;
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* Short teaser labels: pills size to their content instead of stretching to
     equal thirds. They only shrink (with an ellipsis) if the row is too tight. */
  body.home .amaan-topbar__item {
    flex: 0 1 auto;
    max-width: 260px;
  }
}

/* The anchor is the full-height hit area (44px on touch widths, 36px >=992px);
   the pill is the visual. */
body.home .amaan-topbar__link {
  display: flex;
  align-items: center;
  min-height: var(--topbar-h);
  max-width: 100%;
  text-decoration: none;
  color: inherit;
}

body.home .amaan-topbar__title {
  display: block;
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  height: 32px;
  line-height: 30px;
  padding-inline-start: 27px;       /* room for the dot + its soft ring */
  padding-inline-end: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  background: #FFFFFF;
  border: 1px solid rgba(27, 47, 110, 0.14);
  border-radius: 999px;
  transition:
    border-color     0.2s ease,
    background-color 0.2s ease,
    color            0.2s ease,
    box-shadow       0.2s ease;
}

body.home .amaan-topbar__title::before {
  content: '';
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(240, 125, 0, 0.16);   /* subtle accent halo */
  transform: translateY(-50%);
}

@media (hover: hover) and (pointer: fine) {
  body.home .amaan-topbar__link:hover .amaan-topbar__title {
    border-color: rgba(240, 125, 0, 0.60);
    background: #FFF8F0;
    color: var(--home-navy-deep);
    box-shadow: 0 4px 12px rgba(14, 31, 77, 0.10);
  }
}

/* Focus ring on the pill (the visible element). It fits inside the 42-44px
   hit area and the track's 6px inline padding, so nothing is clipped. */
body.home .amaan-topbar__link:focus-visible { outline: none; }

body.home .amaan-topbar__link:focus-visible .amaan-topbar__title {
  outline: 3px solid var(--color-orange);
  outline-offset: 2px;
  border-color: rgba(240, 125, 0, 0.60);
  background: #FFF8F0;
  color: var(--home-navy-deep);
}

/* ── Desktop: compact pills (teaser labels are short now) ──
   Pill 28px inside a 36px link leaves 4px above/below, so the focus ring is
   thinned to 2px + 1px offset (= 3px) to stay inside the track without clipping. */
@media (min-width: 992px) {
  body.home .amaan-topbar__title {
    height: 28px;
    line-height: 26px;
  }
  body.home .amaan-topbar__link:focus-visible .amaan-topbar__title {
    outline-width: 2px;
    outline-offset: 1px;
  }
}

/* ── 992-1199px: the container is only 970px, so trim pill padding/gap just
   enough that all five teaser labels fit whole instead of each losing its
   last letter to an ellipsis (measured: natural width 745px, ~715px free). ── */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body.home .amaan-topbar__track { gap: 8px; }
  body.home .amaan-topbar__title {
    padding-inline-start: 24px;
    padding-inline-end: 12px;
  }
  body.home .amaan-topbar__title::before { inset-inline-start: 10px; }
}

/* ── Hero WITHOUT the bar (no guide posts) ──
   The header no longer overhangs #content by 16-20px, so the hero starts that
   much lower than it used to. Trim its top padding by the same amount so the
   H1/CTA stay where they were. (Original paddings: 72 / 40 / 40 / 65px.) ── */
@media (min-width: 992px) {
  body.home .amaan-hero { padding-top: 52px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  body.home .amaan-hero { padding-top: 24px; }
}
@media (min-width: 480px) and (max-width: 767.98px) {
  body.home .amaan-hero { padding-top: 20px; }
}
@media (max-width: 479.98px) {
  body.home .amaan-hero { padding-top: 45px; }
}

/* ── Hero WITH the bar: absorb the bar's in-flow height so the CTA stays above the fold ──
   (More specific than the fallback above, so it wins whenever the bar exists.) ── */
@supports selector(:has(*)) {
  body.home .site-content:has(> .amaan-topbar) .amaan-hero {
    padding-top: var(--topbar-hero-pad);
  }
}


/* =============================================================================
   12. prefers-reduced-motion
   =============================================================================
   amaan-homepage.css:132-141 already neutralises .amaan-reveal itself, but
   none of the NEW animated properties above are covered by it. Everything this
   file animates is listed here and forced to its final, resting state.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  body.home .amaan-hero__bg-media,
  body.home .amaan-hero__btn,
  body.home .amaan-home-service-card,
  body.home .amaan-home-service-card::after,
  body.home .amaan-home-service-card__image,
  body.home .amaan-area-pill,
  body.home .amaan-areas__region-card,
  body.home .amaan-home-plan__item,
  body.home .amaan-home-plan__tick,
  body.home .amaan-home-plan__cta,
  body.home .amaan-home-plan__link,
  body.home .amaan-home-plan__link i,
  body.home .amaan-process__row::before,
  body.home .amaan-process__step .amaan-process__number,
  body.home .amaan-process__step-body,
  body.home .amaan-proof-gallery__img,
  body.home .amaan-final-cta__btn,
  body.home .amaan-sticky-cta,
  body.home .amaan-topbar__title {
    transition: none !important;
    animation: none !important;
  }

  /* Anything that starts hidden or offset must resolve to its visible state. */
  body.home .amaan-home-plan__tick,
  body.home .amaan-process__step .amaan-process__number {
    transform: none !important;
    opacity: 1 !important;
  }

  body.home .amaan-process__row::before,
  body.home .amaan-home-service-card::after {
    transform: scaleX(1) !important;
  }

  body.home .amaan-hero__bg-media { opacity: 1; }
  body.home .amaan-hero__brand-card.has-video .amaan-hero__bg-media { opacity: 0; }
}