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

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

.ajb-about {
  --_about-bg: var(--about-bg, var(--_brown));
  --_about-heading: var(--about-heading, var(--_cream));
  --_about-body: var(
    --about-body,
    color-mix(in srgb, var(--_cream) 72%, transparent)
  );
  --_about-eyebrow: var(--about-eyebrow, var(--_gold));
  --_about-highlight: var(--about-highlight, #dcc7a1);
  --_about-accent: var(--about-accent, var(--_gold));

  --_carousel-bg: var(--carousel-bg, #2a201a);
  --_carousel-arrow: var(--carousel-arrow, var(--_cream));
  --_carousel-dot: var(
    --carousel-dot,
    color-mix(in srgb, var(--_cream) 28%, transparent)
  );
  --_carousel-dot-active: var(--carousel-dot-active, var(--_about-accent));

  --_button-bg: var(--about-button-bg, transparent);
  --_button-text: var(--about-button-text, var(--_cream));
  --_button-border: var(--about-button-border, var(--_about-accent));
  --_button-hover-bg: var(--about-button-hover-bg, var(--_about-accent));
  --_button-hover-text: var(--about-button-hover-text, var(--_brown));

  --_tag: var(--about-tag, var(--_about-accent));
  --_tag-divider: var(--about-tag-divider, var(--_about-accent));

  /* Content width on large screens, excluding the side padding. */
  --_max: var(--ajb-container-max, 88rem);
  --_pad-x: clamp(1.5rem, 4cqi, 4.5rem);
  --_radius: var(--ajb-card-radius, 1.25rem);
  --_slide-dur: 900ms;

  container-type: inline-size;
  position: relative;
  display: block;
  /* Full-bleed, as in FeaturedProjectsSection: 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));
  align-self: stretch;
  overflow: clip;
  box-sizing: border-box;
  background: var(--_about-bg);
  color: var(--_about-body);
  color-scheme: dark;
}

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

/* ---------- Layout ---------- */

/* Mobile and tablet: one column, carousel first. */
.ajb-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(2.75rem, 7cqi, 4.5rem);
  align-items: center;
  max-width: calc(var(--_max) + 2 * var(--_pad-x));
  margin-inline: auto;
  padding: clamp(4.5rem, 10cqi, 9rem) var(--_pad-x);
}

.ajb-about__content {
  max-width: 42rem;
}

/* Desktop: image ~47%, text ~53%. */
@container (min-width: 900px) {
  .ajb-about__inner {
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    column-gap: clamp(3.5rem, 6.5cqi, 7.5rem);
  }

  .ajb-about--image-right .ajb-about__inner {
    grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
  }

  .ajb-about--image-right .ajb-about__media {
    order: 2;
  }

  .ajb-about__content {
    max-width: 38rem;
  }
}

/* ---------- Typography ---------- */

.ajb-about__eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 clamp(1.25rem, 2cqi, 1.75rem);
  font-size: clamp(var(--_label-size), 0.9cqi, 0.75rem);
  font-weight: var(--_label-weight);
  letter-spacing: calc(var(--_label-tracking) * 1.4);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--_about-eyebrow);
}

.ajb-about__eyebrow::before {
  content: "";
  flex: none;
  width: clamp(1.75rem, 3.5cqi, 2.75rem);
  height: 1px;
  background: var(--_about-accent);
  transform-origin: left center;
  transition: transform 1000ms var(--_ease-in-out) 250ms;
}

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

.ajb-about__heading {
  margin: 0 0 clamp(1.75rem, 3cqi, 2.5rem);
  font-family: var(--_font-display);
  font-size: clamp(2.5rem, 4.4cqi, 4.25rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
  color: var(--_about-heading);
  text-wrap: balance;
}

/* Pull-quote with a gold rule at the reading start. */
.ajb-about__highlight {
  position: relative;
  margin: 0 0 clamp(1.75rem, 3cqi, 2.5rem);
  padding-inline-start: clamp(1.25rem, 2cqi, 1.75rem);
  font-family: var(--_font-display);
  font-size: clamp(1.375rem, 2cqi, 1.875rem);
  font-weight: 400;
  line-height: 1.34;
  color: var(--_about-highlight);
  text-wrap: pretty;
}

.ajb-about__highlight::before {
  content: "";
  position: absolute;
  inset-block: 0.3em;
  inset-inline-start: 0;
  width: 1px;
  background: var(--_about-accent);
  transform-origin: center top;
  transition: transform 1000ms var(--_ease-in-out) 350ms;
}

.ajb-about__intro,
.ajb-about__body {
  margin: 0 0 1.25rem;
  text-wrap: pretty;
}

.ajb-about__intro {
  font-size: clamp(1.0625rem, 1.25cqi, 1.1875rem);
  font-weight: 400;
  line-height: 1.7;
  color: color-mix(in srgb, var(--_about-body) 70%, var(--_about-heading));
}

.ajb-about__body {
  font-size: clamp(1rem, 1.05cqi, 1.0625rem);
  font-weight: 300;
  line-height: 1.8;
}

/* ---------- Credibility line ---------- */

/* One understated gold line: small tracked capitals separated by fine dots,
   with a hairline underneath. Every tag gets a leading dot; the list is
   pulled back by one separator's width and the wrapper clips it, so the dot
   at the start of each line (including wrapped lines) is hidden and only
   the ones between items show. */
.ajb-about__tags {
  --_sep-space: clamp(0.875rem, 1.5cqi, 1.25rem);
  --_sep-size: 3px;

  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: clamp(2rem, 3.5cqi, 2.75rem) 0 0;
  padding-bottom: 1.125rem;
  overflow: clip;
}

/* Hairline underneath, drawn from the reading start on reveal. */
.ajb-about__tags::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--_tag-divider) 55%, transparent),
    color-mix(in srgb, var(--_tag-divider) 10%, transparent)
  );
  transform-origin: left center;
  transition: transform 700ms var(--_ease-in-out) 450ms;
}

.ajb-about__tags:dir(rtl)::after {
  background: linear-gradient(
    to left,
    color-mix(in srgb, var(--_tag-divider) 55%, transparent),
    color-mix(in srgb, var(--_tag-divider) 10%, transparent)
  );
  transform-origin: right center;
}

.ajb-about__tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 0;
  margin: 0;
  margin-inline-start: calc((var(--_sep-space) * 2 + var(--_sep-size)) * -1);
  padding: 0;
  list-style: none;
}

.ajb-about__tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--_label-size);
  font-weight: var(--_label-weight);
  letter-spacing: var(--_label-tracking);
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--_tag);
  transition:
    opacity 600ms var(--_ease) calc(var(--_t, 0) * 90ms),
    transform 600ms var(--_ease) calc(var(--_t, 0) * 90ms);
}

.ajb-about__tag::before {
  content: "";
  flex: none;
  width: var(--_sep-size);
  height: var(--_sep-size);
  margin-inline: var(--_sep-space);
  border-radius: 50%;
  background: var(--_tag-divider);
  opacity: 0.75;
  /* Separators settle in just after the text. */
  transition: opacity 500ms var(--_ease) calc(var(--_t, 0) * 90ms + 250ms);
}

/* Narrow phones: slightly tighter so the line breaks into two rows rather
   than one item per row. */
@container (max-width: 599px) {
  .ajb-about__tags {
    --_sep-space: 0.75rem;
  }

  .ajb-about__tag {
    font-size: 0.625rem;
    letter-spacing: calc(var(--_label-tracking) * 0.8);
  }
}

/* Reveal: hidden only after JS confirms the line is below the fold. */
.ajb-about__tags[data-reveal="pending"] .ajb-about__tag {
  opacity: 0;
  transform: translate3d(0, 0.5rem, 0);
}

.ajb-about__tags[data-reveal="pending"] .ajb-about__tag::before {
  opacity: 0;
}

.ajb-about__tags[data-reveal="pending"]::after {
  transform: scaleX(0);
}

/* ---------- Button ---------- */

.ajb-about__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1rem;
  margin-top: clamp(2.25rem, 4cqi, 3rem);
}

.ajb-about__button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  min-height: 3.5rem;
  padding: 1rem 1.875rem;
  overflow: hidden;
  border: 1px solid var(--_button-border);
  border-radius: var(--ajb-button-radius, 999px);
  background: var(--_button-bg);
  color: var(--_button-text);
  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;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 600ms var(--_ease),
    border-color 600ms var(--_ease);
}

/* Two buttons: a touch less padding and tracking so the pair fits the
   38rem text column in one row on desktop. */
.ajb-about__cta--pair {
  gap: 0.75rem;
}

.ajb-about__cta--pair .ajb-about__button {
  padding-inline: 1.5rem;
  letter-spacing: calc(var(--_label-tracking) * 0.8);
}

/* Secondary CTA: the same shape, one step quieter. A softer gold hairline
   and warm off-white text at rest; on hover only a faint gold wash sweeps
   in, the border firms up and the text brightens, so the primary button
   stays the strongest action. Derived from the accent and palette, so it
   follows the section's colour props. */
.ajb-about__button--secondary {
  --_button-bg: transparent;
  --_button-border: color-mix(in srgb, var(--_about-accent) 42%, transparent);
  --_button-text: color-mix(in srgb, var(--_about-accent) 35%, var(--_cream));
  --_button-hover-bg: color-mix(in srgb, var(--_about-accent) 14%, transparent);
  --_button-hover-text: var(--_cream);
}

/* Hover fill sweeps in from the reading start. */
.ajb-about__button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--_button-hover-bg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--_ease);
}

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

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

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

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

@media (hover: hover) and (pointer: fine) {
  a.ajb-about__button:hover {
    color: var(--_button-hover-text);
  }

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

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

  a.ajb-about__button--secondary:hover {
    border-color: var(--_about-accent);
  }
}

a.ajb-about__button:focus-visible {
  color: var(--_button-hover-text);
}

a.ajb-about__button--secondary:focus-visible {
  border-color: var(--_about-accent);
}

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

/* Mobile: the buttons stack at full width, primary first. */
@container (max-width: 599px) {
  .ajb-about__cta {
    flex-direction: column;
    align-items: stretch;
  }

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

/* ---------- Carousel ---------- */

.ajb-carousel {
  position: relative;
}

.ajb-carousel__viewport {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--_radius);
  background: var(--_carousel-bg);
  /* Keeps rounded corners clipped while slides transform (Safari). */
  isolation: isolate;
  transform: translateZ(0);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

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

@container (min-width: 600px) {
  .ajb-carousel__viewport {
    aspect-ratio: 3 / 2;
  }
}

@container (min-width: 900px) {
  .ajb-carousel__viewport {
    aspect-ratio: 4 / 5;
  }
}

.ajb-carousel__placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      120% 80% at 70% 20%,
      color-mix(in srgb, var(--_about-accent) 16%, transparent),
      transparent 60%
    ),
    var(--_carousel-bg);
}

/* Slides are stacked. The incoming one fades in over the outgoing one while
   both drift a few percent in the direction of travel; the image settles
   from a slight zoom. The outgoing slide stays opaque underneath until the
   fade has finished, so the background never shows through mid-transition. */
.ajb-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate3d(calc(var(--_dir) * 3%), 0, 0);
  transition:
    opacity var(--_slide-dur) var(--_ease),
    transform 1100ms var(--_ease);
}

.ajb-carousel__slide.is-active {
  z-index: 2;
  opacity: 1;
  transform: none;
}

.ajb-carousel__slide.is-leaving {
  z-index: 1;
  opacity: 0;
  transform: translate3d(calc(var(--_dir) * -3%), 0, 0);
  transition:
    opacity 0s linear var(--_slide-dur),
    transform 1100ms var(--_ease);
}

.ajb-carousel__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 40%;
  transform: scale(1.06);
  transition: transform 1600ms var(--_ease);
  pointer-events: none;
}

.ajb-carousel__slide.is-active .ajb-carousel__image {
  transform: scale(1);
}

/* Faint inset hairline, as on the property cards. */
.ajb-carousel__frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid color-mix(in srgb, var(--_cream) 8%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

/* ---------- Carousel controls ---------- */

.ajb-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1rem, 2cqi, 1.5rem);
}

.ajb-carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Hairline indicators with a 44px-tall hit area. */
.ajb-carousel__dot {
  position: relative;
  width: 1.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width 600ms var(--_ease);
}

.ajb-carousel__dot::before,
.ajb-carousel__progress {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
}

.ajb-carousel__dot::before {
  background: var(--_carousel-dot);
  transition: background-color 400ms var(--_ease);
}

.ajb-carousel__dot:hover::before {
  background: color-mix(
    in srgb,
    var(--_carousel-dot) 50%,
    var(--_carousel-dot-active)
  );
}

.ajb-carousel__dot.is-active {
  width: 3.5rem;
}

.ajb-carousel__dot:focus-visible {
  outline: 1px solid var(--_about-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The active indicator's fill doubles as the autoplay timer: when it
   finishes, the carousel advances. Pausing pauses the animation itself. */
.ajb-carousel__progress {
  display: block;
  background: var(--_carousel-dot-active);
  transform-origin: left center;
}

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

.ajb-carousel__progress--hidden {
  visibility: hidden;
}

.is-running .ajb-carousel__progress,
.is-paused .ajb-carousel__progress {
  animation: ajb-carousel-progress var(--_delay) linear both;
}

.is-paused .ajb-carousel__progress {
  animation-play-state: paused;
}

@keyframes ajb-carousel-progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.ajb-carousel__buttons {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-inline-start: auto;
}

.ajb-carousel__button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--_carousel-arrow) 28%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--_carousel-arrow);
  cursor: pointer;
  transition:
    border-color 500ms var(--_ease),
    background-color 500ms var(--_ease);
}

.ajb-carousel__button svg {
  width: 1rem;
  height: 0.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  overflow: visible;
  transition: transform 500ms var(--_ease);
}

.ajb-carousel__button--toggle svg {
  width: 0.875rem;
  height: 0.875rem;
  stroke-width: 1.25;
}

.ajb-carousel__button svg .is-filled {
  fill: currentColor;
  stroke: none;
}

.ajb-carousel__button--prev svg {
  scale: -1 1;
}

.ajb-carousel__button--next svg:dir(rtl) {
  scale: -1 1;
}

.ajb-carousel__button--prev svg:dir(rtl) {
  scale: 1 1;
}

.ajb-carousel__button:focus-visible {
  outline: 1px solid var(--_about-accent);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .ajb-carousel__button:hover {
    border-color: var(--_about-accent);
    background: color-mix(in srgb, var(--_about-accent) 12%, transparent);
  }

  .ajb-carousel__button--next:hover svg {
    transform: translate3d(3px, 0, 0);
  }

  .ajb-carousel__button--prev:hover svg {
    transform: translate3d(-3px, 0, 0);
  }
}

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

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

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

.ajb-about[data-reveal="pending"] .ajb-about__eyebrow::before {
  transform: scaleX(0);
}

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

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

@media (prefers-reduced-motion: reduce) {
  .ajb-carousel__slide,
  .ajb-carousel__slide.is-leaving {
    transform: none;
    transition: opacity 300ms linear;
  }

  .ajb-carousel__image,
  .ajb-carousel__slide.is-active .ajb-carousel__image {
    transform: none;
    transition: none;
  }

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

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

  .ajb-about__tag {
    transition: opacity 300ms linear calc(var(--_t, 0) * 60ms);
  }

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

  .ajb-about__tags::after,
  .ajb-about__tag::before,
  .ajb-about__eyebrow::before,
  .ajb-about__highlight::before,
  .ajb-about__button::before,
  .ajb-about__button-arrow,
  .ajb-carousel__button svg,
  .ajb-carousel__dot {
    transition-duration: 0ms;
    transition-delay: 0ms;
  }
}