/*
 * 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;
}

/*
 * SiteNavbar: the one shared navbar for every page.
 * Fonts and motion come from ./tokens.css, shared with the other Andjenie
 * components. Colours are set from Webflow props as --nav-* on the root;
 * sizes arrive as --_nav-h, --_logo-w, --_logo-w-sm, --_nav-max and
 * --_nav-pad. Breakpoints are container queries on the full-bleed root, so
 * in practice they track the viewport: desktop from 960px, phones below
 * 600px.
 */

.ajb-nav {
  --_n-bg: var(--nav-bg, #1a120e);
  --_n-text: var(--nav-text, #efe6d8);
  --_n-accent: var(--nav-accent, var(--_gold));
  --_n-divider: var(
    --nav-divider,
    color-mix(in srgb, var(--_n-accent) 32%, transparent)
  );
  /* Dark smoked glass: the espresso background at ~90% over a soft blur. */
  --_n-glass: var(--_nav-glass, 0.9);
  --_n-highlight: color-mix(in srgb, #f4e3c4 7%, transparent);
  --_n-hover: color-mix(in srgb, var(--_n-text) 35%, var(--_n-accent));
  --_n-dur: 500ms;
  /* Height steps down a little on tablets and phones. */
  --_h: var(--_nav-h, 84px);
  --_pad: var(--_nav-pad, 40px);
  --_lw: var(--_logo-w, 200px);

  container-type: inline-size;
  position: relative;
  display: block;
  /* Edge to edge: break out of any Webflow container; 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));
  box-sizing: border-box;
  background: color-mix(
    in srgb,
    var(--_n-bg) calc(var(--_n-glass) * 100%),
    transparent
  );
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
  /* A very faint warm highlight along the top edge. */
  box-shadow: inset 0 1px 0 var(--_n-highlight);
  color: var(--_n-text);
  color-scheme: dark;
  font-family: var(--_font-body);
  transition:
    box-shadow var(--_n-dur) var(--_ease),
    background-color var(--_n-dur) var(--_ease);
}

/* Without backdrop blur, the glass would show page detail through it, so
   the background stays nearly solid instead. */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .ajb-nav {
    background: color-mix(in srgb, var(--_n-bg) 97%, transparent);
  }
}

/* A warm, reflected gold edge on the smoked glass: a 1px hairline in the
   muted-gold divider colour (about 0.3 opacity at its brightest), lit in
   the centre and fading softly toward both sides... */
.ajb-nav::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--_n-divider) 35%, transparent) 15%,
    color-mix(in srgb, var(--_n-divider) 75%, transparent) 35%,
    var(--_n-divider) 50%,
    color-mix(in srgb, var(--_n-divider) 75%, transparent) 65%,
    color-mix(in srgb, var(--_n-divider) 35%, transparent) 85%,
    transparent
  );
  pointer-events: none;
}

/* ...with a very soft glow around its centre: a faint, wide ellipse of the
   accent, a few pixels tall, never a visible band or shadow. */
.ajb-nav::before {
  content: "";
  position: absolute;
  inset-inline: 10%;
  bottom: -3px;
  height: 7px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    color-mix(in srgb, var(--_n-accent) 14%, transparent),
    transparent 100%
  );
  pointer-events: none;
}

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

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

/* Sticky (prop): once the page has scrolled, a whisper of shadow lifts the
   glass off the content passing beneath it. */
.ajb-nav.is-scrolled {
  box-shadow:
    inset 0 1px 0 var(--_n-highlight),
    0 0.75rem 1.75rem -1.25rem rgb(0 0 0 / 0.45);
}

/* ---------- Bar ---------- */

.ajb-nav__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "logo menu end";
  align-items: center;
  column-gap: clamp(1.5rem, 3cqi, 3rem);
  max-width: calc(var(--_nav-max, 1280px) + 2 * var(--_pad));
  min-height: var(--_h);
  margin-inline: auto;
  padding-inline: var(--_pad);
}

/* ---------- Logo ---------- */

.ajb-nav__logo {
  grid-area: logo;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 2.75rem;
  color: inherit;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity var(--_n-dur) var(--_ease);
}

.ajb-nav__logo-img {
  display: block;
  width: var(--_lw);
  max-width: 100%;
  height: auto;
  max-height: calc(var(--_h) - 1.75rem);
  object-fit: contain;
  object-position: left center;
}

.ajb-nav__logo-img:dir(rtl) {
  object-position: right center;
}

/* Text fallback when no logo image is set: the name in the display serif,
   finely tracked, with a short gold rule. */
.ajb-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--_font-display);
  font-size: clamp(1rem, 0.85rem + 0.5cqi, 1.1875rem);
  font-weight: 400;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--_n-text);
}

.ajb-nav__brand::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1px;
  background: var(--_n-accent);
}

@media (hover: hover) and (pointer: fine) {
  .ajb-nav__logo:hover {
    opacity: 0.85;
  }
}

/* ---------- Links ---------- */

.ajb-nav__menu {
  grid-area: menu;
}

.ajb-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3.2cqi, 3rem);
}

.ajb-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: color-mix(in srgb, var(--_n-text) 86%, transparent);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--_n-dur) var(--_ease);
}

/* A fine gold hairline that grows from the centre outward. */
.ajb-nav__link-text {
  position: relative;
  /* Tracking adds space after the last letter; pull it back so the
     underline centres on the word. */
  margin-inline-end: -0.18em;
}

.ajb-nav__link-text::after {
  content: "";
  position: absolute;
  inset-inline: 0 0.18em;
  bottom: -0.5rem;
  height: 1px;
  background: var(--_n-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--_n-dur) var(--_ease);
}

.ajb-nav__link[aria-current="page"] {
  color: var(--_n-text);
}

.ajb-nav__link[aria-current="page"] .ajb-nav__link-text::after {
  transform: scaleX(0.6);
  opacity: 0.8;
}

@media (hover: hover) and (pointer: fine) {
  .ajb-nav__link:hover {
    color: var(--_n-hover);
  }

  .ajb-nav__link:hover .ajb-nav__link-text::after {
    transform: scaleX(1);
    opacity: 1;
  }
}

.ajb-nav__link:focus-visible,
.ajb-nav__logo:focus-visible,
.ajb-nav__toggle:focus-visible {
  outline: 1px solid var(--_n-accent);
  outline-offset: 4px;
}

/* ---------- End: language and menu button ---------- */

.ajb-nav__end {
  grid-area: end;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Webflow's locale switcher sits here (a slot). Its own styles are set in
   the Designer; the text colour, font and size below are inherited, so a
   plain switcher already matches the navbar. */
.ajb-nav__language {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline-start: clamp(1rem, 2cqi, 1.5rem);
  color: color-mix(in srgb, var(--_n-text) 86%, transparent);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color var(--_n-dur) var(--_ease);
}

/* A short, low-contrast divider before the language switcher. */
.ajb-nav__language::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 1px;
  height: 1.125rem;
  translate: 0 -50%;
  background: color-mix(in srgb, var(--_n-text) 14%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .ajb-nav__language:hover {
    color: var(--_n-hover);
  }
}

/* Two fine lines that fold into a cross. Hidden on desktop. */
.ajb-nav__toggle {
  position: relative;
  display: none;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-end: -0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--_n-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ajb-nav__toggle-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.375rem;
  height: 1px;
  margin-left: -0.6875rem;
  background: currentColor;
  transition:
    transform var(--_n-dur) var(--_ease),
    width var(--_n-dur) var(--_ease),
    background-color var(--_n-dur) var(--_ease);
}

.ajb-nav__toggle-line:first-child {
  transform: translateY(-4px);
}

/* The lower line is shorter and gold: a small editorial detail. */
.ajb-nav__toggle-line:last-child {
  width: 0.875rem;
  background: var(--_n-accent);
  transform: translate(0.25rem, 4px);
}

.is-open .ajb-nav__toggle-line:first-child {
  transform: rotate(45deg);
}

.is-open .ajb-nav__toggle-line:last-child {
  width: 1.375rem;
  transform: rotate(-45deg);
}

/* ---------- Tablet and phone ---------- */

@container (max-width: 959px) {
  /* Set on the bar: a container query can't restyle its own container. */
  .ajb-nav__bar {
    --_h: min(var(--_nav-h, 84px), 76px);
    --_lw: min(
      var(--_logo-w, 200px),
      calc((var(--_logo-w, 200px) + var(--_logo-w-sm, 148px)) / 2)
    );
  }

  .ajb-nav__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: var(--_h) auto;
    grid-template-areas:
      "logo end"
      "menu menu";
    column-gap: 1rem;
    min-height: 0;
  }

  .ajb-nav__toggle {
    display: block;
  }

  /* The menu folds open below the bar, pushing the page down rather than
     covering it, so it works the same with or without Sticky. Closed, it
     is hidden from assistive tech and the tab order. */
  .ajb-nav__menu {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    margin-inline: calc(var(--_pad) * -1);
    transition:
      grid-template-rows var(--_n-dur) var(--_ease),
      visibility 0s linear var(--_n-dur);
  }

  .is-open .ajb-nav__menu {
    grid-template-rows: 1fr;
    visibility: visible;
    transition:
      grid-template-rows var(--_n-dur) var(--_ease),
      visibility 0s;
  }

  .ajb-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    overflow: hidden;
    padding-inline: var(--_pad);
  }

  .is-open .ajb-nav__list {
    border-top: 1px solid var(--_n-divider);
    padding-bottom: 1rem;
  }

  .ajb-nav__item {
    opacity: 0;
    transform: translate3d(0, -0.375rem, 0);
    transition:
      opacity 400ms var(--_ease),
      transform 400ms var(--_ease);
  }

  .is-open .ajb-nav__item {
    opacity: 1;
    transform: none;
    transition-delay: calc(120ms + var(--_i, 0) * 60ms);
  }

  .ajb-nav__item + .ajb-nav__item {
    border-top: 1px solid color-mix(in srgb, var(--_n-text) 8%, transparent);
  }

  .ajb-nav__link {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 3.5rem;
    font-size: 0.8125rem;
  }

  /* A small gold arrow-line at the end of each row instead of the
     underline. */
  .ajb-nav__link::after {
    content: "";
    width: 1rem;
    height: 1px;
    background: color-mix(in srgb, var(--_n-accent) 70%, transparent);
    transition: width var(--_n-dur) var(--_ease);
  }

  .ajb-nav__link-text::after {
    display: none;
  }

  .ajb-nav__link[aria-current="page"]::after {
    width: 1.75rem;
    background: var(--_n-accent);
  }

  .ajb-nav__language {
    padding-inline-start: 1rem;
  }
}

@container (max-width: 599px) {
  .ajb-nav__bar {
    --_h: min(var(--_nav-h, 84px), 70px);
    --_pad: min(var(--_nav-pad, 40px), 20px);
    --_lw: var(--_logo-w-sm, 148px);
  }

  .ajb-nav__brand {
    letter-spacing: 0.2em;
  }

  .ajb-nav__brand::before {
    display: none;
  }

  .ajb-nav__language {
    padding-inline-start: 0.875rem;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .ajb-nav,
  .ajb-nav__logo,
  .ajb-nav__link,
  .ajb-nav__link::after,
  .ajb-nav__link-text::after,
  .ajb-nav__language,
  .ajb-nav__toggle-line,
  .ajb-nav__menu,
  .is-open .ajb-nav__menu,
  .ajb-nav__item,
  .is-open .ajb-nav__item {
    transition-duration: 0ms;
    transition-delay: 0ms;
  }

  .ajb-nav__item {
    transform: none;
  }
}