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

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

.ajb-consult {
  --_c-bg: var(--consult-bg, #17100c);
  --_c-surface: var(--consult-surface, #211812);
  --_c-heading: var(--consult-heading, var(--_cream));
  --_c-body: var(--consult-body, #b3a799);
  --_c-accent: var(--consult-accent, var(--_gold));
  --_c-button-text: var(--consult-button-text, var(--_brown));
  --_c-divider: var(
    --consult-divider,
    color-mix(in srgb, var(--_c-accent) 26%, transparent)
  );
  --_c-hairline: color-mix(in srgb, var(--_c-heading) 10%, transparent);
  --_c-overlay: var(--consult-overlay, #140d09);
  /* Alternate sections sit a shade lighter, between background and surface. */
  --_c-band: color-mix(in srgb, var(--_c-bg) 55%, var(--_c-surface));

  --_max: var(--ajb-container-max, 76rem);
  --_pad-x: clamp(1.5rem, 4cqi, 4.5rem);
  --_section-y: clamp(4rem, 8cqi, 6.5rem);
  --_radius: var(--ajb-card-radius, 1.25rem);

  container-type: inline-size;
  position: relative;
  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;
  background: var(--_c-bg);
  color: var(--_c-body);
  color-scheme: dark;
}

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

/* Zero-specificity resets, so component classes below always win. */
:where(.ajb-consult) :where(h1, h2, h3, p, ul, ol, figure, blockquote) {
  margin: 0;
}

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

.ajb-consult__section {
  position: relative;
  padding-block: var(--_section-y);
}

/* Sections are focus targets for in-page links; no ring on the section. */
.ajb-consult__section:focus {
  outline: none;
}

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

/* ---------- Shared type ---------- */

.ajb-consult__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  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(--_c-accent);
}

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

.ajb-consult__heading {
  margin-top: 1.25rem;
  font-family: var(--_font-display);
  font-size: clamp(2rem, 1.3rem + 2.4cqi, 3.125rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.08;
  color: var(--_c-heading);
  text-wrap: balance;
}

.ajb-consult__eyebrow + .ajb-consult__heading {
  margin-top: 1.25rem;
}

.ajb-consult__intro > :first-child {
  margin-top: 0;
}

.ajb-consult__lead {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: clamp(1rem, 0.95rem + 0.2cqi, 1.0625rem);
  line-height: 1.75;
  color: var(--_c-body);
  text-wrap: pretty;
}

.ajb-consult__intro--center {
  text-align: center;
}

.ajb-consult__intro--center .ajb-consult__eyebrow {
  justify-content: center;
}

.ajb-consult__intro--center .ajb-consult__eyebrow::after {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
}

.ajb-consult__intro--center .ajb-consult__heading,
.ajb-consult__intro--center .ajb-consult__lead {
  margin-inline: auto;
}

.ajb-consult__intro--center .ajb-consult__heading {
  max-width: 20em;
}

/* ---------- Buttons ---------- */

.ajb-consult__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1rem;
}

.ajb-consult__actions--center {
  justify-content: center;
}

.ajb-consult__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  min-height: 3.5rem;
  padding: 1rem 1.875rem;
  border: 1px solid transparent;
  border-radius: var(--ajb-button-radius, 999px);
  font: inherit;
  font-size: 0.75rem;
  font-weight: var(--_label-weight);
  letter-spacing: calc(var(--_label-tracking) * 0.9);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 550ms var(--_ease),
    border-color 550ms var(--_ease),
    color 550ms var(--_ease);
}

.ajb-consult__arrow {
  flex: none;
  width: 1.125rem;
  height: 0.5625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  transition: transform 550ms var(--_ease);
}

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

/* Primary: the one solid gold action on the page. */
.ajb-consult__button--primary {
  border-color: var(--_c-accent);
  background: var(--_c-accent);
  color: var(--_c-button-text);
}

/* Secondary: thin gold outline. */
.ajb-consult__button--secondary {
  border-color: color-mix(in srgb, var(--_c-accent) 55%, transparent);
  background: transparent;
  color: var(--_c-heading);
}

/* Text: an understated link with a hairline that draws in on hover. */
.ajb-consult__button--text {
  min-height: 2.75rem;
  padding-inline: 0;
  color: var(--_c-accent);
}

.ajb-consult__button--text::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.625rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 550ms var(--_ease);
}

.ajb-consult__button--text:dir(rtl)::after {
  transform-origin: right center;
}

.ajb-consult__button:focus-visible {
  outline: 1px solid var(--_c-accent);
  outline-offset: 4px;
}

.ajb-consult__button:disabled {
  cursor: progress;
  opacity: 0.75;
}

@media (hover: hover) and (pointer: fine) {
  :is(a, button).ajb-consult__button--primary:not(:disabled):hover {
    border-color: color-mix(in srgb, var(--_c-accent) 82%, var(--_c-heading));
    background: color-mix(in srgb, var(--_c-accent) 82%, var(--_c-heading));
  }

  a.ajb-consult__button--secondary:hover {
    border-color: var(--_c-accent);
    background: color-mix(in srgb, var(--_c-accent) 12%, transparent);
  }

  a.ajb-consult__button--text:hover::after {
    transform: scaleX(1);
  }

  :is(a, button).ajb-consult__button:not(:disabled):hover .ajb-consult__arrow {
    transform: translate3d(4px, 0, 0);
  }

  :is(a, button).ajb-consult__button:not(:disabled):dir(rtl):hover
    .ajb-consult__arrow {
    transform: translate3d(-4px, 0, 0);
  }
}

@container (max-width: 599px) {
  .ajb-consult__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ajb-consult__button--primary,
  .ajb-consult__button--secondary {
    width: 100%;
    padding-inline: 1.25rem;
    letter-spacing: calc(var(--_label-tracking) * 0.7);
  }

  .ajb-consult__button--text {
    align-self: center;
  }
}

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

.ajb-consult__skyline-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 1;
  color: var(--_c-accent);
}

.ajb-skyline__towers {
  opacity: 0.7;
}

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

.ajb-consult__hero {
  padding-block: clamp(4.5rem, 10cqi, 8rem) clamp(2.5rem, 5cqi, 3.5rem);
  /* A quiet warm glow behind the headline and a deeper floor. */
  background:
    radial-gradient(
      55% 70% at 78% 30%,
      color-mix(in srgb, var(--_c-accent) 9%, transparent),
      transparent 70%
    ),
    radial-gradient(
      45% 60% at 8% 0%,
      color-mix(in srgb, var(--_c-accent) 5%, transparent),
      transparent 70%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, #000 18%, var(--_c-bg)),
      var(--_c-bg)
    );
}

.ajb-consult__hero-top {
  position: relative;
}

.ajb-consult__hero-content {
  position: relative;
  max-width: 44rem;
}

.ajb-consult__hero-heading {
  margin-top: 1.5rem;
  font-family: var(--_font-display);
  font-size: clamp(2.75rem, 1.5rem + 4.4cqi, 5.125rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.02;
  color: var(--_c-heading);
  text-wrap: balance;
}

.ajb-consult__hero-text {
  max-width: 36rem;
  margin-top: clamp(1.5rem, 2.5cqi, 2rem);
  font-size: clamp(1.0625rem, 1rem + 0.25cqi, 1.1875rem);
  line-height: 1.7;
  color: var(--_c-body);
  text-wrap: pretty;
}

.ajb-consult__hero .ajb-consult__actions {
  margin-top: clamp(2.25rem, 4cqi, 3rem);
}

/* Detailed line-art skyline with Burj Khalifa as its anchor (see
   HeroSkyline.tsx). Strength of the glow and star, and the desktop width,
   come from Webflow props as --_hs-glow, --_hs-star and --_hs-width on the
   hero. It stands on the highlights' hairline to the right of the
   headline; below 1100px it sits centred beneath the hero text. */
.ajb-consult__hero-skyline {
  --_hs-fill: var(--_c-bg);
  position: relative;
  isolation: isolate;
  width: min(100%, 40rem);
  margin: 2.75rem auto 0;
  color: var(--_c-accent);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 92%,
    transparent
  );
}

/* A soft gold mist rising behind the rooftops. */
.ajb-consult__hero-skyline::before {
  content: "";
  position: absolute;
  inset: 5% -10% -4%;
  z-index: -1;
  background: radial-gradient(
    55% 65% at 60% 85%,
    color-mix(in srgb, var(--_c-accent) 20%, transparent),
    transparent 72%
  );
  opacity: var(--_hs-glow, 0.6);
}

@container (min-width: 1100px) {
  .ajb-consult__hero-top {
    padding-bottom: clamp(3rem, 5cqi, 4rem);
  }

  /* Leave the skyline its own column so it never meets the text. */
  .ajb-consult__hero-content {
    max-width: min(44rem, calc(100% - var(--_hs-width, 46%) - 2%));
  }

  .ajb-consult__hero-skyline {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: min(var(--_hs-width, 46%), 46rem);
    margin: 0;
  }
}

.ajb-hs {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* The taller desktop drawing replaces the compact one from 1100px. */
.ajb-hs--desktop {
  display: none;
}

@container (min-width: 1100px) {
  .ajb-hs--desktop {
    display: block;
  }

  .ajb-hs--compact {
    display: none;
  }
}

/* Buildings are filled with the page background so nearer towers cover
   the ones behind; their outlines vary in strength by depth. */
.ajb-hs__layer :is(path, ellipse):not([fill]) {
  fill: var(--_hs-fill);
}

.ajb-hs__far {
  stroke-opacity: 0.26;
}

.ajb-hs__mid {
  stroke-opacity: 0.55;
}

.ajb-hs__details {
  stroke-opacity: 0.2;
  stroke-width: 0.75;
}

.ajb-hs__burj {
  stroke-opacity: 0.95;
}

.ajb-hs__wings {
  stroke-opacity: 0.4;
}

.ajb-hs__water {
  stroke-opacity: 0.32;
}

.ajb-hs__light {
  opacity: var(--_hs-glow, 0.6);
}

.ajb-hs__star,
.ajb-hs__halo {
  transform-box: fill-box;
  transform-origin: center;
}

.ajb-hs__halo {
  opacity: var(--_hs-star, 0.8);
}

.ajb-hs__sparkle {
  opacity: calc(0.5 + var(--_hs-star, 0.8) * 0.5);
}

.ajb-hs__core {
  fill: var(--_c-heading);
  opacity: var(--_hs-star, 0.8);
}

/* Phones: the distant layer and fine detail step back so the drawing stays
   clean at a small size. */
@container (max-width: 599px) {
  .ajb-hs__far,
  .ajb-hs__details {
    display: none;
  }
}

.ajb-consult__highlights {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding-top: clamp(1.75rem, 3cqi, 2.25rem);
  border-top: 1px solid var(--_c-divider);
}

@container (min-width: 768px) {
  .ajb-consult__highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .ajb-consult__highlight {
    padding-inline: clamp(1.5rem, 3cqi, 2.5rem);
  }

  .ajb-consult__highlight:first-child {
    padding-inline-start: 0;
  }

  .ajb-consult__highlight + .ajb-consult__highlight {
    border-inline-start: 1px solid var(--_c-hairline);
  }
}

.ajb-consult__highlight {
  display: flex;
  gap: 1rem;
}

.ajb-consult__highlight .ajb-consult__ornament {
  margin-top: 0.3rem;
}

/* A small outlined diamond: the page's quiet bullet. */
.ajb-consult__ornament {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-top: 0.4rem;
  border: 1px solid var(--_c-accent);
  rotate: 45deg;
  transition: background-color 500ms var(--_ease);
}

.ajb-consult__highlight-title {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: calc(var(--_label-tracking) * 0.6);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--_c-heading);
}

.ajb-consult__highlight-text {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--_c-body);
}

/* ---------- Section photos ---------- */

.ajb-consult__section--backdrop {
  isolation: isolate;
}

.ajb-consult__section--backdrop > .ajb-consult__container {
  z-index: 1;
}

/* The photo is muted and warmed by a filter, then layered under: a warm
   tint (strength per section), a soft vignette, a faint gold glow, and
   fades at top and bottom into the page background so sections join
   seamlessly. */
.ajb-consult__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ajb-consult__backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--_backdrop-position, center);
  /* Muted, warmed and slightly soft-focus, so the photo reads as
     atmosphere rather than detail. The scale hides the blurred edges. */
  filter: saturate(0.55) sepia(0.3) brightness(0.72) contrast(0.95) blur(2px);
  transform: scale(1.04);
}

.ajb-consult__backdrop::before,
.ajb-consult__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ajb-consult__backdrop::before {
  background: var(--_c-overlay);
  opacity: var(--_overlay, 0.82);
}

.ajb-consult__backdrop::after {
  background:
    /* Deepest behind the headings and intro text at the top. */
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--_c-overlay) 60%, transparent),
      color-mix(in srgb, var(--_c-overlay) 35%, transparent) 50%,
      transparent 85%
    ),
    radial-gradient(
      60% 50% at 50% 55%,
      color-mix(in srgb, var(--_c-accent) 7%, transparent),
      transparent 70%
    ),
    radial-gradient(
      120% 90% at 50% 50%,
      transparent 45%,
      color-mix(in srgb, var(--_c-overlay) 75%, transparent) 100%
    ),
    linear-gradient(
      to bottom,
      var(--_c-bg),
      transparent 22%,
      transparent 78%,
      var(--_c-bg)
    );
}

/* ---------- Why book ---------- */

.ajb-consult__split-intro {
  display: grid;
  gap: 0;
}

@container (min-width: 900px) {
  .ajb-consult__split-intro {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 6cqi, 6rem);
    align-items: end;
  }

  .ajb-consult__split-intro > .ajb-consult__lead {
    margin-top: 0;
  }
}

.ajb-consult__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: clamp(2.75rem, 5.5cqi, 4rem);
}

@container (min-width: 720px) {
  .ajb-consult__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.8cqi, 1.5rem);
  }

  /* In a row, the text settles at a shared baseline near the bottom. */
  .ajb-consult__card {
    min-height: clamp(15rem, 22cqi, 17rem);
  }
}

/* Frosted espresso panels over the photo: a fine warm border with a lit
   top edge, deep soft shadow, and a gold rule that lengthens on hover as
   a faint glow rises from the top corner. */
.ajb-consult__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.75rem, 3cqi, 2.5rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--_c-heading) 9%, transparent);
  border-radius: var(--_radius);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--_c-surface) 82%, transparent),
    color-mix(in srgb, var(--_c-bg) 72%, transparent)
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--_c-heading) 7%, transparent),
    0 2rem 4rem -2.5rem rgb(0 0 0 / 0.75);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  transition:
    transform 700ms var(--_ease),
    border-color 700ms var(--_ease),
    box-shadow 700ms var(--_ease);
}

.ajb-consult__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    80% 60% at 0% 0%,
    color-mix(in srgb, var(--_c-accent) 12%, transparent),
    transparent 70%
  );
  opacity: 0.35;
  transition: opacity 700ms var(--_ease);
}

.ajb-consult__card-title {
  font-family: var(--_font-display);
  font-size: clamp(1.625rem, 1.35rem + 0.8cqi, 2.0625rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.12;
  color: var(--_c-heading);
}

.ajb-consult__card-rule {
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-block: 1.25rem 1.125rem;
  background: linear-gradient(
    to right,
    var(--_c-accent),
    color-mix(in srgb, var(--_c-accent) 0%, transparent)
  );
  transform: scaleX(0.55);
  transform-origin: left center;
  transition: transform 700ms var(--_ease);
}

.ajb-consult__card-rule:dir(rtl) {
  transform-origin: right center;
  background: linear-gradient(
    to left,
    var(--_c-accent),
    color-mix(in srgb, var(--_c-accent) 0%, transparent)
  );
}

.ajb-consult__card-text {
  margin-top: auto;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: color-mix(in srgb, var(--_c-body) 92%, var(--_c-heading));
}

@media (hover: hover) and (pointer: fine) {
  .ajb-consult__card:hover {
    transform: translate3d(0, -3px, 0);
    border-color: color-mix(in srgb, var(--_c-accent) 34%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--_c-accent) 22%, transparent),
      0 2.5rem 5rem -2.5rem rgb(0 0 0 / 0.85);
  }

  .ajb-consult__card:hover::before {
    opacity: 1;
  }

  .ajb-consult__card:hover .ajb-consult__card-rule {
    transform: scaleX(1);
  }
}

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

.ajb-consult__process {
  background: var(--_c-band);
}

.ajb-consult__steps {
  --_marker: 3.5rem;
  position: relative;
  display: grid;
  gap: 2.25rem;
  margin-top: clamp(2.75rem, 5cqi, 3.75rem);
}

/* The thread joining the steps; drawn in when the section appears. */
.ajb-consult__steps::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--_marker) / 2);
  top: calc(var(--_marker) / 2);
  bottom: calc(var(--_marker) / 2);
  width: 1px;
  background: var(--_c-divider);
  transform-origin: top center;
  transition: transform 1400ms var(--_ease-in-out) 200ms;
}

.ajb-consult__step {
  position: relative;
  min-height: var(--_marker);
  padding-inline-start: calc(var(--_marker) + 1.25rem);
}

.ajb-consult__step-marker {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--_marker);
  height: var(--_marker);
  border: 1px solid color-mix(in srgb, var(--_c-accent) 60%, transparent);
  border-radius: 50%;
  background: var(--_c-band);
  font-family: var(--_font-display);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--_c-accent);
}

.ajb-consult__step-title {
  padding-top: 0.75rem;
  font-family: var(--_font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.5cqi, 1.625rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--_c-heading);
}

.ajb-consult__step-text {
  max-width: 22rem;
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--_c-body);
}

@container (min-width: 768px) {
  .ajb-consult__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3cqi, 3rem);
  }

  .ajb-consult__steps::before {
    inset-inline: calc(100% / 6);
    top: calc(var(--_marker) / 2);
    bottom: auto;
    width: auto;
    height: 1px;
    transform-origin: left center;
  }

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

  .ajb-consult__step {
    padding-inline-start: 0;
    padding-top: calc(var(--_marker) + 1.25rem);
    text-align: center;
  }

  .ajb-consult__step-marker {
    inset-inline-start: 50%;
    translate: -50% 0;
  }

  .ajb-consult__step-marker:dir(rtl) {
    translate: 50% 0;
  }

  .ajb-consult__step-title {
    padding-top: 0;
  }

  .ajb-consult__step-text {
    margin-inline: auto;
  }
}

.ajb-consult__process[data-reveal="pending"] .ajb-consult__steps::before {
  transform: scaleY(0);
}

@container (min-width: 768px) {
  .ajb-consult__process[data-reveal="pending"] .ajb-consult__steps::before {
    transform: scaleX(0);
  }
}

/* ---------- What's included ---------- */

.ajb-consult__includes-grid {
  display: grid;
  gap: clamp(2rem, 4cqi, 3rem);
}

@container (min-width: 900px) {
  .ajb-consult__includes-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(3rem, 7cqi, 7rem);
    align-items: center;
  }
}

/* The format note reads as a small aside, hung from a gold rule. */
.ajb-consult__note {
  max-width: 28rem;
  margin-top: 2rem;
  padding-inline-start: 1.25rem;
  border-inline-start: 1px solid
    color-mix(in srgb, var(--_c-accent) 60%, transparent);
  font-family: var(--_font-display);
  font-size: 1.1875rem;
  font-style: italic;
  line-height: 1.5;
  color: color-mix(in srgb, var(--_c-heading) 82%, transparent);
}

/* The items as a ledger in the display serif, set in a softly lit panel:
   one generous row each, divided by hairlines that fade at both ends. */
.ajb-consult__include-list {
  position: relative;
  padding: clamp(0.5rem, 1.5cqi, 1rem) clamp(1.25rem, 3cqi, 2.5rem);
  border: 1px solid var(--_c-hairline);
  border-radius: var(--_radius);
  background:
    radial-gradient(
      70% 60% at 100% 0%,
      color-mix(in srgb, var(--_c-accent) 7%, transparent),
      transparent 70%
    ),
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--_c-surface) 85%, transparent),
      color-mix(in srgb, var(--_c-surface) 35%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--_c-heading) 6%, transparent),
    0 2rem 4rem -3rem rgb(0 0 0 / 0.7);
}

.ajb-consult__include {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  padding-block: clamp(1.125rem, 2cqi, 1.5rem);
}

.ajb-consult__include + .ajb-consult__include::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--_c-hairline) 12%,
    var(--_c-hairline) 88%,
    transparent
  );
}

.ajb-consult__include .ajb-consult__ornament {
  margin-top: 0.6rem;
}

.ajb-consult__include-text {
  font-family: var(--_font-display);
  font-size: clamp(1.1875rem, 1.05rem + 0.4cqi, 1.375rem);
  line-height: 1.35;
  color: color-mix(in srgb, var(--_c-heading) 92%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .ajb-consult__include:hover .ajb-consult__ornament {
    background: var(--_c-accent);
  }
}

/* ---------- Request panel ---------- */

/* Links to #request land a little above the section, clear of a fixed or
   sticky navbar. Override site-wide with an --ajb-anchor-offset variable if
   the navbar height differs. */
.ajb-consult__request {
  scroll-margin-top: var(--ajb-anchor-offset, 80px);
}

@container (min-width: 768px) {
  .ajb-consult__request {
    scroll-margin-top: var(--ajb-anchor-offset, 96px);
  }
}

@container (min-width: 1100px) {
  .ajb-consult__request {
    scroll-margin-top: var(--ajb-anchor-offset, 110px);
  }
}

/* The page's conversion block: a lit panel with a fine gold edge. */
/* The conversion block: a frosted, softly lit panel over the night photo,
   with a fine warm border, a lit top edge and an inner glow. */
.ajb-consult__panel {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5cqi, 3.5rem);
  padding: clamp(1.75rem, 4.5cqi, 4rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--_c-accent) 28%, transparent);
  border-radius: calc(var(--_radius) * 1.25);
  background:
    radial-gradient(
      60% 55% at 0% 0%,
      color-mix(in srgb, var(--_c-accent) 11%, transparent),
      transparent 70%
    ),
    radial-gradient(
      50% 50% at 100% 100%,
      color-mix(in srgb, var(--_c-accent) 5%, transparent),
      transparent 70%
    ),
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--_c-surface) 88%, transparent),
      color-mix(in srgb, var(--_c-bg) 82%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--_c-heading) 8%, transparent),
    inset 0 0 6rem color-mix(in srgb, var(--_c-accent) 4%, transparent),
    0 3rem 6rem -3.5rem rgb(0 0 0 / 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
}

/* Fine gold line along the top edge. */
.ajb-consult__panel::before {
  content: "";
  position: absolute;
  inset-inline: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--_c-accent) 75%, transparent),
    transparent
  );
}

@container (min-width: 1000px) {
  .ajb-consult__panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 5cqi, 5rem);
  }

  .ajb-consult__panel-intro {
    display: flex;
    flex-direction: column;
  }

  .ajb-consult__direct {
    margin-top: auto;
  }
}

.ajb-consult__direct {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--_c-hairline);
}

.ajb-consult__direct-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Small round portrait with a fine gold ring. */
.ajb-consult__avatar {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid color-mix(in srgb, var(--_c-accent) 60%, transparent);
  border-radius: 50%;
  padding: 3px;
  object-fit: cover;
  background: var(--_c-surface);
}

.ajb-consult__direct-heading {
  font-family: var(--_font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--_c-heading);
}

.ajb-consult__direct-text {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--_c-body);
}

.ajb-consult__direct-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.25rem;
}

.ajb-consult__direct .ajb-consult__button--secondary {
  min-height: 3rem;
  padding-block: 0.75rem;
}

/* Stacked layouts: heading, then the form, then the direct-contact option,
   so the form comes first after the intro. */
@container (max-width: 999px) {
  .ajb-consult__panel-intro {
    display: contents;
  }

  .ajb-consult__panel-form {
    order: 1;
  }

  .ajb-consult__direct {
    order: 2;
    margin-top: 0;
  }
}

@container (max-width: 599px) {
  .ajb-consult__direct-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Form */
.ajb-consult__panel-form {
  container-type: inline-size;
  min-width: 0;
}

.ajb-consult__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.125rem 1rem;
}

@container (min-width: 520px) {
  .ajb-consult__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ajb-consult__field--wide {
    grid-column: 1 / -1;
  }
}

.ajb-consult__field {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.ajb-consult__label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: calc(var(--_label-tracking) * 0.75);
  line-height: 1.4;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--_c-heading) 72%, transparent);
}

.ajb-consult__input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid color-mix(in srgb, var(--_c-heading) 15%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, #000 30%, var(--_c-bg));
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.25);
  color: var(--_c-heading);
  /* 16px keeps iOS from zooming into fields. */
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  outline: none;
  transition:
    border-color 400ms var(--_ease),
    box-shadow 400ms var(--_ease),
    background-color 400ms var(--_ease);
}

.ajb-consult__input::placeholder {
  color: color-mix(in srgb, var(--_c-body) 60%, transparent);
  opacity: 1;
}

.ajb-consult__input:hover {
  border-color: color-mix(in srgb, var(--_c-heading) 24%, transparent);
}

.ajb-consult__input:focus-visible,
.ajb-consult__input:focus {
  border-color: var(--_c-accent);
  background: color-mix(in srgb, #000 36%, var(--_c-bg));
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.25),
    0 0 0 3px color-mix(in srgb, var(--_c-accent) 16%, transparent);
}

.ajb-consult__textarea {
  min-height: 8rem;
  resize: vertical;
}

.ajb-consult__select {
  position: relative;
}

.ajb-consult__select select {
  padding-inline-end: 2.75rem;
  appearance: none;
  cursor: pointer;
}

/* An unchosen select reads as a placeholder. */
.ajb-consult__select select:has(option[value=""]:checked) {
  color: color-mix(in srgb, var(--_c-body) 60%, transparent);
}

.ajb-consult__select option {
  background: var(--_c-surface);
  color: var(--_c-heading);
}

.ajb-consult__select svg {
  position: absolute;
  inset-inline-end: 1.125rem;
  top: 50%;
  width: 0.75rem;
  height: 0.5rem;
  translate: 0 -50%;
  fill: none;
  stroke: var(--_c-accent);
  stroke-width: 1.25;
  pointer-events: none;
}

.ajb-consult__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ajb-consult__submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}

.ajb-consult__submit {
  min-height: 3.75rem;
  padding-inline: 2.25rem;
}

.ajb-consult__privacy {
  flex: 1 1 14rem;
  max-width: 22rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--_c-body) 85%, transparent);
}

@container (max-width: 519px) {
  .ajb-consult__submit {
    width: 100%;
    padding-inline: 1.25rem;
    letter-spacing: calc(var(--_label-tracking) * 0.7);
  }
}

.ajb-consult__error {
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid color-mix(in srgb, #c9846d 45%, transparent);
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: color-mix(in srgb, #e2a48f 85%, var(--_c-heading));
}

.ajb-consult__success {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  min-height: 22rem;
  padding: 2rem 1rem;
  text-align: center;
}

.ajb-consult__success-mark {
  width: 3.5rem;
  height: 3.5rem;
  fill: none;
  stroke: var(--_c-accent);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ajb-consult__success-heading {
  font-family: var(--_font-display);
  font-size: clamp(1.75rem, 1.4rem + 1cqi, 2.25rem);
  line-height: 1.15;
  color: var(--_c-heading);
}

.ajb-consult__success-text {
  max-width: 26rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--_c-body);
}

/* ---------- Personal note ---------- */

.ajb-consult__trust {
  background: var(--_c-band);
}

.ajb-consult__trust-grid {
  display: grid;
  gap: clamp(2rem, 5cqi, 3rem);
}

.ajb-consult__quote {
  max-width: 50rem;
  margin-inline: auto;
  text-align: center;
}

.ajb-consult__quote .ajb-consult__eyebrow {
  justify-content: center;
}

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

.ajb-consult__quote-text {
  margin-top: 1.75rem;
  font-family: var(--_font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.5cqi, 2.375rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--_c-heading);
  text-wrap: pretty;
}

.ajb-consult__signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  margin-top: 2rem;
}

.ajb-consult__signature-name {
  font-family: var(--_font-display);
  font-size: 1.25rem;
  color: var(--_c-heading);
}

.ajb-consult__signature-role {
  font-size: var(--_label-size);
  font-weight: var(--_label-weight);
  letter-spacing: calc(var(--_label-tracking) * 1.2);
  text-transform: uppercase;
  color: var(--_c-accent);
}

/* With a portrait: an arched frame beside a left-aligned note. */
.ajb-consult__portrait {
  width: min(100%, 20rem);
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--_c-divider);
  border-radius: 999px 999px var(--_radius) var(--_radius);
  background: var(--_c-surface);
}

.ajb-consult__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@container (min-width: 800px) {
  .ajb-consult__trust--portrait .ajb-consult__trust-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6cqi, 6rem);
    align-items: center;
  }

  .ajb-consult__trust--portrait .ajb-consult__quote {
    margin-inline: 0;
    text-align: start;
  }

  .ajb-consult__trust--portrait .ajb-consult__quote .ajb-consult__eyebrow {
    justify-content: flex-start;
  }

  .ajb-consult__trust--portrait
    .ajb-consult__quote
    .ajb-consult__eyebrow::after {
    content: none;
  }

  .ajb-consult__trust--portrait .ajb-consult__signature {
    align-items: flex-start;
  }
}

/* ---------- FAQ ---------- */

.ajb-consult__faq-grid {
  display: grid;
  gap: clamp(2rem, 4cqi, 2.75rem);
}

@container (min-width: 900px) {
  .ajb-consult__faq-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6cqi, 6rem);
    align-items: start;
  }
}

.ajb-consult__faq-item {
  border-top: 1px solid var(--_c-hairline);
}

.ajb-consult__faq-item:last-child {
  border-bottom: 1px solid var(--_c-hairline);
}

.ajb-consult__faq-heading {
  font: inherit;
}

.ajb-consult__faq-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  min-height: 4.25rem;
  padding: 1.25rem 0;
  border: 0;
  background: none;
  color: var(--_c-heading);
  font-family: var(--_font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.45cqi, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 450ms var(--_ease);
}

.ajb-consult__faq-button:focus-visible {
  outline: 1px solid var(--_c-accent);
  outline-offset: 4px;
}

/* A fine plus that folds into a minus. */
.ajb-consult__faq-icon {
  position: relative;
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
}

.ajb-consult__faq-icon::before,
.ajb-consult__faq-icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--_c-accent);
  transition: transform 500ms var(--_ease);
}

.ajb-consult__faq-icon::after {
  transform: rotate(90deg);
}

.is-open .ajb-consult__faq-icon::after {
  transform: rotate(0deg);
}

.ajb-consult__faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 500ms var(--_ease);
}

.is-open > .ajb-consult__faq-panel {
  grid-template-rows: 1fr;
}

.ajb-consult__faq-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.ajb-consult__faq-answer {
  max-width: 40rem;
  padding-bottom: 1.5rem;
  font-size: 0.9875rem;
  line-height: 1.75;
  color: var(--_c-body);
  opacity: 0;
  transition: opacity 400ms var(--_ease);
}

.is-open .ajb-consult__faq-answer {
  opacity: 1;
  transition-delay: 100ms;
}

@media (hover: hover) and (pointer: fine) {
  .ajb-consult__faq-button:hover {
    color: var(--_c-accent);
  }
}

/* ---------- Final CTA ---------- */

.ajb-consult__final {
  padding-block: clamp(4.5rem, 9cqi, 7rem) clamp(6.5rem, 15cqi, 11rem);
  border-top: 1px solid var(--_c-hairline);
  background: radial-gradient(
    60% 70% at 50% 40%,
    color-mix(in srgb, var(--_c-accent) 9%, transparent),
    transparent 70%
  );
  text-align: center;
}

.ajb-consult__final .ajb-consult__heading {
  font-size: clamp(2.25rem, 1.4rem + 3cqi, 3.875rem);
  max-width: 16em;
}

.ajb-consult__final .ajb-consult__actions {
  margin-top: clamp(2rem, 3.5cqi, 2.75rem);
}

.ajb-consult__final-skyline {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  opacity: 0.16;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 20%,
    #000 80%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 20%,
    #000 80%,
    transparent
  );
}

.ajb-consult__final-skyline .ajb-consult__skyline-art {
  flex: none;
  width: clamp(30rem, 100%, 64rem);
  clip-path: inset(0);
  transition: clip-path 1600ms var(--_ease-in-out) 200ms;
}

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

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

.ajb-consult__reveal {
  transition:
    opacity 1000ms var(--_ease) calc(var(--_i, 0) * 100ms),
    transform 1000ms var(--_ease) calc(var(--_i, 0) * 100ms);
}

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

/* The hero is on screen at load, so it rises in by itself. */
@keyframes ajb-consult-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ajb-consult__hero .ajb-consult__reveal {
  animation: ajb-consult-rise 900ms var(--_ease) both;
  animation-delay: calc(100ms + var(--_i, 0) * 90ms);
}

/* The hero skyline assembles in layers, each over 700ms: the distant
   towers, the landmarks and Burj Khalifa rising slightly, then the water
   and light, and finally the star, which then breathes very slowly. */
@keyframes ajb-hs-fade {
  from {
    opacity: 0;
  }
}

@keyframes ajb-hs-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
}

@keyframes ajb-hs-star-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes ajb-hs-pulse {
  50% {
    opacity: calc(var(--_hs-star, 0.8) * 0.6);
    transform: scale(0.86);
  }
}

.ajb-hs__far {
  animation: ajb-hs-fade 700ms var(--_ease) 300ms both;
}

.ajb-hs__mid {
  animation: ajb-hs-rise 700ms var(--_ease) 450ms both;
}

.ajb-hs__burj {
  animation: ajb-hs-rise 700ms var(--_ease) 600ms both;
}

.ajb-hs__details,
.ajb-hs__water,
.ajb-hs__light {
  animation: ajb-hs-fade 700ms var(--_ease) 800ms both;
}

.ajb-hs__star {
  animation: ajb-hs-star-in 700ms var(--_ease) 1050ms both;
}

.ajb-hs__halo {
  animation: ajb-hs-pulse 6s ease-in-out 1800ms infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .ajb-consult__reveal {
    transition: opacity 400ms linear;
  }

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

  .ajb-consult__hero .ajb-consult__reveal,
  .ajb-hs__far,
  .ajb-hs__mid,
  .ajb-hs__burj,
  .ajb-hs__details,
  .ajb-hs__water,
  .ajb-hs__light,
  .ajb-hs__star,
  .ajb-hs__halo {
    animation: none;
  }

  .ajb-consult__card,
  .ajb-consult__card::before,
  .ajb-consult__card-rule,
  .ajb-consult__ornament {
    transition-duration: 0ms;
  }

  .ajb-consult__card:hover {
    transform: none;
  }

  .ajb-consult__steps::before,
  .ajb-consult__final-skyline .ajb-consult__skyline-art {
    transition: none;
  }

  .ajb-consult__process[data-reveal="pending"] .ajb-consult__steps::before {
    transform: none;
  }

  .ajb-consult__final[data-reveal="pending"] .ajb-consult__skyline-art {
    clip-path: none;
  }

  .ajb-consult__arrow,
  .ajb-consult__button--text::after,
  .ajb-consult__faq-icon::before,
  .ajb-consult__faq-icon::after,
  .ajb-consult__faq-panel,
  .ajb-consult__faq-answer {
    transition-duration: 0ms;
    transition-delay: 0ms;
  }

  :is(a, button).ajb-consult__button:hover .ajb-consult__arrow {
    transform: none;
  }
}