/*
 * Shared design tokens for every Andjenie code component.
 *
 * Code components render in a shadow root, so Webflow's class styles don't
 * reach them, but custom properties and inherited values (font-family,
 * lang, dir) do. Each token resolves in this order:
 *   1. --ajb-*            component-specific override (a Webflow variable or
 *                         a custom property on a parent class)
 *   2. --font-display /   site-wide Webflow variables, if the site defines them
 *      --font-body
 *   3. safe fallback      body text inherits the page font; display text falls
 *                         back to a serif stack of locally installed fonts.
 * No font files are loaded here.
 */

.ajb-featured,
.ajb-property-card,
.ajb-about,
.ajb-footer,
.ajb-consult,
.ajb-project,
.ajb-ap,
.ajb-po,
.ajb-ev,
.ajb-nav {
  /* Palette. Site-wide overrides via --ajb-color-* Webflow variables. */
  --_brown: var(--ajb-color-brown, #1c1410);
  --_cream: var(--ajb-color-cream, #f4ede2);
  --_gold: var(--ajb-color-gold, #b99a68);
  --_gold-text: var(--ajb-color-gold-text, #8f7247);

  /* Semantic colours. FeaturedProjectsSection sets --featured-* and --card-*
     from its Webflow colour props on its own root; they inherit into its
     cards. The same properties can be set on any parent class in Webflow
     (e.g. around a standalone PropertyCard). Unset, they fall back to the
     palette above. */
  --_bg: var(--featured-bg, var(--_cream));
  --_heading: var(--featured-heading, var(--_brown));
  --_subtitle: var(--featured-subtitle, var(--ajb-color-muted, #75665a));
  --_eyebrow: var(--featured-eyebrow, var(--_gold-text));
  --_accent: var(--featured-accent, var(--_gold));
  --_divider: var(--featured-divider, var(--_accent));

  --_card-overlay: var(--card-overlay, #140e0b);
  --_card-title: var(--card-title, var(--_cream));
  --_card-location: var(
    --card-location,
    color-mix(in srgb, var(--_cream) 72%, transparent)
  );
  --_card-price: var(--card-price, var(--_accent));
  --_card-cta: var(--card-cta, var(--_cream));
  --_card-border: var(
    --card-border,
    color-mix(in srgb, var(--_cream) 14%, transparent)
  );
  --_card-shadow: var(--card-shadow, #251812);

  /* Type. --_font-body has no final fallback on purpose: when neither
     variable is set, `font-family: var(--_font-body)` is invalid at computed
     time and falls back to inherit, i.e. the Webflow page's body font. */
  /* Display serif: explicit variables first, then the site's own h2 font
     (detected by the section components as --_site-display), then an
     editorial stack that avoids Georgia/Times wherever a better serif is
     installed (Didot/Bodoni on Apple, Sitka on Windows, Noto on Android). */
  --_font-display: var(
    --ajb-font-display,
    var(
      --font-display,
      var(
        --_site-display,
        "Cormorant Garamond",
        "Cormorant",
        "Playfair Display",
        "Bodoni Moda",
        "Bodoni 72",
        Didot,
        "Sitka Heading",
        "Noto Serif Display",
        Georgia,
        serif
      )
    )
  );
  --_font-body: var(--ajb-font-body, var(--font-body));

  /* Eyebrows, locations and CTAs share one small-caps voice. */
  --_label-size: 0.6875rem;
  --_label-weight: 500;
  --_label-tracking: 0.2em;

  /* Motion: calm expo-out, never springy. */
  --_ease: cubic-bezier(0.22, 1, 0.36, 1);
  --_ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --_dur: 700ms;
  --_dur-slow: 800ms;

  font-family: var(--_font-body);
}

/* Arabic-script locales: letter-spacing breaks the joins between letters
   and there is no uppercase, so labels drop both. */
:is(
  .ajb-featured,
  .ajb-property-card,
  .ajb-about,
  .ajb-footer,
  .ajb-consult,
  .ajb-project,
  .ajb-ap,
  .ajb-po,
  .ajb-ev,
  .ajb-nav
):is(:lang(ar), :lang(fa), :lang(ur)) {
  --_label-tracking: 0;
}

:is(
    .ajb-featured,
    .ajb-property-card,
    .ajb-about,
    .ajb-footer,
    .ajb-consult,
    .ajb-project,
    .ajb-ap,
    .ajb-po,
    .ajb-ev,
    .ajb-nav
  ):is(:lang(ar), :lang(fa), :lang(ur))
  * {
  letter-spacing: 0;
}

/*
 * DeveloperMarqueeFooter
 * Fonts, palette and motion come from ./tokens.css, shared with the other
 * Andjenie components. Colours are set from Webflow props as --footer-* on
 * the footer root; anything left empty falls back to the defaults below.
 * Breakpoints are container queries on the full-bleed footer, so in
 * practice they track the viewport.
 */

.ajb-footer {
  --_footer-bg: var(--footer-bg, #17100c);
  --_footer-heading: var(--footer-heading, var(--_cream));
  --_footer-body: var(--footer-body, #b3a799);
  --_footer-accent: var(--footer-accent, var(--_gold));
  --_footer-divider: var(
    --footer-divider,
    color-mix(in srgb, var(--_footer-accent) 30%, transparent)
  );
  --_footer-skyline: var(--footer-skyline, var(--_footer-accent));

  --_max: var(--ajb-container-max, 88rem);
  --_pad-x: clamp(1.5rem, 4cqi, 4.5rem);
  /* Space either side of each separator: roomy enough that four brands
     never feel squeezed, and about four fit across a desktop screen. */
  --_brand-gap: clamp(2.5rem, 5.5cqi, 5.5rem);
  /* Logos: 36px on phones, ~45px on tablets, 56px on desktop. */
  --_logo-h: clamp(2.25rem, 1.5rem + 2.6cqi, 3.5rem);
  --_ease-cta: cubic-bezier(0.33, 1, 0.68, 1);

  container-type: inline-size;
  position: relative;
  isolation: isolate;
  display: block;
  /* Full-bleed, as in the other sections: the component refines
     --_bleed-left/right to exact offsets so there is never horizontal
     overflow. */
  width: auto;
  max-width: none;
  margin-left: var(--_bleed-left, calc(50% - 50vw));
  margin-right: var(--_bleed-right, calc(50% - 50vw));
  align-self: stretch;
  overflow: clip;
  box-sizing: border-box;
  /* Atmosphere: a barely-there warm glow behind the signature column and a
     slow deepening toward the bottom. Felt rather than seen. */
  background-color: var(--_footer-bg);
  background-image:
    radial-gradient(
      60% 55% at 22% 58%,
      color-mix(in srgb, var(--_footer-accent) 7%, transparent),
      transparent 70%
    ),
    radial-gradient(
      70% 40% at 50% 0%,
      color-mix(in srgb, var(--_footer-accent) 4%, transparent),
      transparent 75%
    ),
    linear-gradient(
      to bottom,
      transparent 35%,
      color-mix(in srgb, #000 22%, transparent)
    );
  color: var(--_footer-body);
  color-scheme: dark;
}

.ajb-footer *,
.ajb-footer *::before,
.ajb-footer *::after {
  box-sizing: border-box;
}

/* Zero-specificity resets, so component classes below always win. */
:where(.ajb-footer) :where(p, ul) {
  margin: 0;
}

:where(.ajb-footer) ul {
  padding: 0;
  list-style: none;
}

/* Small, tracked, muted-gold labels: the marquee label and column eyebrows. */
.ajb-footer__marquee-label,
.ajb-footer__eyebrow {
  font-size: var(--_label-size);
  font-weight: var(--_label-weight);
  letter-spacing: calc(var(--_label-tracking) * 1.4);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--_footer-accent);
}

/* ---------- Marquee ---------- */

.ajb-footer__marquee {
  position: relative;
  padding-block: clamp(3.25rem, 7.5cqi, 6rem);
}

/* Hairlines above and below the strip, fading out toward both edges. */
.ajb-footer__marquee::before,
.ajb-footer__marquee::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--_footer-divider) 20%,
    var(--_footer-divider) 80%,
    transparent
  );
}

.ajb-footer__marquee::before {
  top: 0;
}

.ajb-footer__marquee::after {
  bottom: 0;
  opacity: 0.6;
}

.ajb-footer__marquee-label {
  margin-bottom: clamp(2rem, 3.5cqi, 3rem);
  padding-inline: var(--_pad-x);
  font-size: 0.625rem;
  text-align: center;
  opacity: 0.8;
}

.ajb-footer__strip {
  /* The loop always runs left in every locale; brand names keep their own
     direction inside each item. */
  direction: ltr;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
}

.ajb-footer__track {
  display: flex;
  width: max-content;
}

/* Every copy moves left by exactly its own width, so the end of one loop
   lines up pixel for pixel with the start of the next. */
.ajb-footer__group {
  display: flex;
  flex: none;
  align-items: center;
  min-height: calc(var(--_logo-h) + 0.5rem);
  animation: ajb-footer-marquee var(--_marquee-dur, 60s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

@keyframes ajb-footer-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

.ajb-footer__strip[data-paused] .ajb-footer__group {
  animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
  .ajb-footer__strip[data-pause-on-hover]:hover .ajb-footer__group {
    animation-play-state: paused;
  }
}

/* The separator trails every item, including the last, so the seam between
   two copies has the same rhythm as the rest of the strip. */
.ajb-footer__brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--_brand-gap);
  padding-inline-end: var(--_brand-gap);
  /* Subtle rhythm: alternate brands sit a shade softer. Kept gentle so
     every logo stays easy to recognise. */
  --_o: 0.95;
}

.ajb-footer__brand:nth-child(even) {
  --_o: 0.8;
}

.ajb-footer--no-separators .ajb-footer__brand {
  padding-inline-end: calc(var(--_brand-gap) * 2);
}

.ajb-footer__brand-name,
.ajb-footer__logo {
  opacity: var(--_o);
  transition:
    opacity 600ms var(--_ease),
    color 600ms var(--_ease),
    transform 600ms var(--_ease);
}

.ajb-footer__brand-name {
  display: block;
  font-family: var(--_font-display);
  font-size: clamp(1.375rem, 0.75rem + 2cqi, 2.125rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--_footer-heading);
  unicode-bidi: plaintext;
  /* Tracking adds space after the last letter; pull it back so names sit
     centred between separators. */
  margin-inline-end: -0.28em;
}

/* Transparent logos sit straight on the strip: no box, border, background
   or radius, and never cropped or stretched. */
.ajb-footer__logo {
  display: block;
  width: auto;
  max-width: clamp(10rem, 6rem + 14cqi, 18rem);
  height: var(--_logo-h);
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0;
  background: none;
  user-select: none;
  -webkit-user-drag: none;
}

.ajb-footer__separator {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--_footer-accent) 65%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .ajb-footer__brand:hover .ajb-footer__brand-name,
  .ajb-footer__brand:hover .ajb-footer__logo {
    opacity: 1;
    transform: translate3d(0, -2px, 0);
  }

  .ajb-footer__brand:hover .ajb-footer__brand-name {
    color: var(--_footer-accent);
  }
}

@container (max-width: 599px) {
  .ajb-footer__brand-name {
    letter-spacing: 0.22em;
    margin-inline-end: -0.22em;
  }

  .ajb-footer__strip {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      #000 7%,
      #000 93%,
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent,
      #000 7%,
      #000 93%,
      transparent
    );
  }
}

/* ---------- Main footer ---------- */

.ajb-footer__body {
  max-width: calc(var(--_max) + 2 * var(--_pad-x));
  margin-inline: auto;
  padding-inline: var(--_pad-x);
}

/* Mobile: Explore, then Private Consultation, stacked compactly. */
.ajb-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-top: clamp(2.75rem, 6cqi, 4.25rem);
}

/* Tablet and up: two blocks meeting at a fine central rule, each hugging
   it, in a centred container, so the pair reads as one composition rather
   than two things pushed to the page edges. */
@container (min-width: 640px) {
  .ajb-footer__main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    max-width: 60rem;
    margin-inline: auto;
  }

  .ajb-footer__nav {
    justify-self: end;
    padding-inline-end: clamp(2.5rem, 6cqi, 5.5rem);
  }

  .ajb-footer__consultation {
    justify-self: stretch;
    padding-inline-start: clamp(2.5rem, 6cqi, 5.5rem);
    border-inline-start: 1px solid var(--_footer-divider);
  }
}

/* Eyebrows: a touch larger and more present than the marquee label, led
   by a short gold line. */
.ajb-footer__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: calc(var(--_label-tracking) * 1.5);
}

.ajb-footer__eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
}

/* Navigation: two short columns in the display serif, read top to bottom. */
.ajb-footer__nav-list {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: clamp(2.5rem, 5cqi, 4rem);
  row-gap: 0.25rem;
}

.ajb-footer__nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--_font-display);
  font-size: clamp(1.3125rem, 1.1rem + 0.5cqi, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: color-mix(in srgb, var(--_footer-heading) 88%, transparent);
  text-decoration: none;
  transition: color 500ms var(--_ease);
}

.ajb-footer__link-text {
  display: block;
  transition: transform 550ms var(--_ease);
}

/* Hover: a short gold line draws in at the reading start and the word
   steps aside to make room for it. */
a.ajb-footer__nav-link::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 0.875rem;
  height: 1px;
  background: var(--_footer-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 550ms var(--_ease);
}

a.ajb-footer__nav-link:dir(rtl)::before {
  transform-origin: right center;
}

/* Consultation */
.ajb-footer__consultation-text {
  max-width: 22rem;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--_footer-body);
}

.ajb-footer__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-width: min(100%, 17.5rem);
  min-height: 3.75rem;
  padding: 1.125rem 2rem 1.125rem 2.25rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--_footer-accent) 75%, transparent);
  border-radius: var(--ajb-button-radius, 999px);
  background: transparent;
  color: var(--_footer-heading);
  font-size: 0.8125rem;
  font-weight: var(--_label-weight);
  letter-spacing: calc(var(--_label-tracking) * 0.9);
  line-height: 1.3;
  text-align: start;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 550ms var(--_ease-cta),
    border-color 550ms var(--_ease-cta);
}

/* Hover: a soft gold fill sweeps in from the reading start. */
.ajb-footer__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--_footer-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms var(--_ease-cta);
}

.ajb-footer__cta:dir(rtl)::before {
  transform-origin: right center;
}

.ajb-footer__cta-arrow {
  flex: none;
  width: 1.25rem;
  height: 0.625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  transition: transform 550ms var(--_ease-cta);
}

.ajb-footer__cta-arrow:dir(rtl) {
  scale: -1 1;
}

a.ajb-footer__nav-link:focus-visible,
a.ajb-footer__legal-link:focus-visible,
.ajb-footer__cta:focus-visible {
  outline: 1px solid var(--_footer-accent);
  outline-offset: 4px;
}

a.ajb-footer__nav-link:focus-visible {
  color: var(--_footer-accent);
}

a.ajb-footer__cta:focus-visible {
  border-color: var(--_footer-accent);
  color: var(--_footer-bg);
}

a.ajb-footer__cta:focus-visible::before {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  a.ajb-footer__nav-link:hover,
  a.ajb-footer__legal-link:hover {
    color: var(--_footer-accent);
  }

  a.ajb-footer__nav-link:hover::before {
    transform: scaleX(1);
  }

  a.ajb-footer__nav-link:hover .ajb-footer__link-text {
    transform: translate3d(1.375rem, 0, 0);
  }

  a.ajb-footer__nav-link:dir(rtl):hover .ajb-footer__link-text {
    transform: translate3d(-1.375rem, 0, 0);
  }

  a.ajb-footer__cta:hover {
    border-color: var(--_footer-accent);
    color: var(--_footer-bg);
  }

  a.ajb-footer__cta:hover::before {
    transform: scaleX(1);
  }

  a.ajb-footer__cta:hover .ajb-footer__cta-arrow {
    transform: translate3d(5px, 0, 0);
  }

  a.ajb-footer__cta:dir(rtl):hover .ajb-footer__cta-arrow {
    transform: translate3d(-5px, 0, 0);
  }
}

@container (max-width: 639px) {
  .ajb-footer__cta {
    width: 100%;
    padding-inline: 1.5rem;
  }
}

/* ---------- Skyline ---------- */

/* Sits directly on the legal row's divider, as if on the horizon. Wide
   screens show the whole drawing; narrow ones keep it at a readable size
   and let the outer towers run off both edges, so Burj Khalifa stays
   centred and recognisable. */
.ajb-footer__skyline {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4.5cqi, 3.25rem);
  overflow: hidden;
  color: var(--_footer-skyline);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 14%,
    #000 86%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 14%,
    #000 86%,
    transparent
  );
}

.ajb-footer__skyline-art {
  display: block;
  flex: none;
  width: clamp(28rem, 100%, 58rem);
  height: auto;
  aspect-ratio: 5 / 1;
  opacity: var(--_skyline-opacity, 0.2);
  /* Draws outward from Burj Khalifa once, then stays still. */
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 1600ms var(--_ease-in-out),
    opacity 1200ms var(--_ease);
}

.ajb-skyline__towers {
  opacity: 0.7;
}

.ajb-footer__skyline[data-reveal="pending"] .ajb-footer__skyline-art {
  clip-path: inset(0 50% 0 50%);
  opacity: 0;
}

/* ---------- Legal row ---------- */

.ajb-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-block: 0.75rem clamp(1rem, 2cqi, 1.5rem);
  border-top: 1px solid var(--_footer-divider);
}

/* Without the skyline, keep breathing room above the divider. */
.ajb-footer__main + .ajb-footer__legal {
  margin-top: clamp(2.75rem, 6cqi, 4.25rem);
}

.ajb-footer__copyright {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: color-mix(in srgb, var(--_footer-body) 80%, transparent);
}

.ajb-footer__legal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
}

.ajb-footer__legal-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--_footer-body) 80%, transparent);
  text-decoration: none;
  transition: color 500ms var(--_ease);
}

/* Mobile: copyright first, links beneath, compact. */
@container (max-width: 639px) {
  .ajb-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 1rem;
  }

  .ajb-footer__legal-list {
    gap: 0 1.5rem;
  }
}

/* ---------- Reveal ---------- */

.ajb-footer__reveal {
  transition:
    opacity 700ms var(--_ease) calc(var(--_i, 0) * 90ms),
    transform 700ms var(--_ease) calc(var(--_i, 0) * 90ms);
}

.ajb-footer__main[data-reveal="pending"] .ajb-footer__reveal {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  /* No movement at all: the brands settle into one centred, wrapping line
     and the duplicate copies are dropped. */
  .ajb-footer__strip {
    -webkit-mask-image: none;
    mask-image: none;
    padding-inline: var(--_pad-x);
  }

  .ajb-footer__track {
    width: auto;
    justify-content: center;
  }

  .ajb-footer__group {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem calc(var(--_brand-gap) * 1.5);
    animation: none;
    will-change: auto;
  }

  .ajb-footer__group[aria-hidden="true"] {
    display: none;
  }

  /* Dots would dangle at the end of each wrapped line, so spacing alone
     separates the brands here. */
  .ajb-footer .ajb-footer__brand {
    padding-inline-end: 0;
  }

  .ajb-footer__separator {
    display: none;
  }

  .ajb-footer__brand-name,
  .ajb-footer__logo,
  .ajb-footer__nav-link,
  .ajb-footer__link-text,
  a.ajb-footer__nav-link::before,
  .ajb-footer__cta::before,
  .ajb-footer__cta-arrow {
    transition-duration: 0ms;
  }

  .ajb-footer__brand:hover .ajb-footer__brand-name,
  .ajb-footer__brand:hover .ajb-footer__logo,
  a.ajb-footer__nav-link:hover .ajb-footer__link-text {
    transform: none;
  }

  /* Links only change colour; the text stays put, so no line either. */
  a.ajb-footer__nav-link:hover::before {
    transform: scaleX(0);
  }

  /* The skyline simply appears. */
  .ajb-footer__skyline-art {
    transition: none;
  }

  .ajb-footer__skyline[data-reveal="pending"] .ajb-footer__skyline-art {
    clip-path: none;
    opacity: var(--_skyline-opacity, 0.2);
  }

  .ajb-footer__reveal {
    transition: opacity 400ms linear;
  }

  .ajb-footer__main[data-reveal="pending"] .ajb-footer__reveal {
    transform: none;
  }
}