/* ==========================================================================
   AA SYSTEM — second-pass redesign layer
   Loaded after inbio-brand.css on every page that uses the InBio chrome.

   Three jobs:
     1. a spacing system that gives every page a safe inline gutter, fixing the
        edge collisions at their source instead of hiding the overflow;
     2. a typographic scale that is actually fluid on a phone;
     3. the components the redesign introduces.

   Naming: everything is .aa-*. Tokens are declared once, on :root.
   ========================================================================== */

/* --------------------------------------------------------- unit baseline --
   The InBio parent sets the document root to 62.5% (10px at a default browser
   setting), so a rem here is 10px, not 16px. Every rem length below is written
   at 1.6x its 16px-scale value so the rendered size matches the px figures in
   the comments — and still tracks the reader's own font-size preference, which
   a px literal would ignore.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* The page gutter. One value, used by every page-level container.
     max() folds in the iOS safe area on a notched phone in landscape, using
     the physical left/right insets because that is what the notch occupies
     regardless of text direction. */
  --aa-gutter: clamp(20px, 5vw, 40px);
  --aa-gutter-l: max(var(--aa-gutter), env(safe-area-inset-left, 0px));
  --aa-gutter-r: max(var(--aa-gutter), env(safe-area-inset-right, 0px));

  --aa-max: 1160px;            /* content column at full width */
  --aa-measure: 68ch;          /* comfortable line length for prose */
  --aa-measure-narrow: 34em;   /* article body */

  --aa-sec-y: clamp(44px, 7vw, 92px);
  --aa-gap: clamp(16px, 2.4vw, 28px);
  --aa-gap-sm: 12px;

  --aa-r-sm: 10px;
  --aa-r: 14px;
  --aa-r-lg: 20px;
  --aa-r-pill: 999px;

  --aa-shadow-1: 0 1px 2px rgba(8, 12, 20, .18);
  --aa-shadow-2: 0 10px 30px -12px rgba(8, 12, 20, .45);

  --aa-ease: cubic-bezier(.22, .61, .36, 1);
  --aa-dur: .28s;

  --aa-tap: 44px;              /* minimum touch target */

  /* Type scale. Every step is fluid from 320px upward: the preferred term
     mixes a rem floor with a vw component so a 320 and a 430 phone do not get
     the identical size, which is what the previous clamp() did. */
  --aa-h1: clamp(3.5rem, 3.006rem + 1.5238vw, 5.2rem); /* 36px at 390, 52px at 1440 */
  --aa-h1-page: clamp(2.56rem, 1.728rem + 2.6vw, 4.4rem);/* 25.6px → 44px */
  --aa-h2: clamp(2.2rem, 1.696rem + 1.56vw, 3.4rem); /* 22px → 34px */
  --aa-h3: clamp(1.8rem, 1.616rem + .56vw, 2.2rem);  /* 18px → 22px */
  --aa-body: clamp(1.6rem, 1.552rem + .16vw, 1.7rem);
  --aa-small: 1.4rem;
  --aa-lh-head: 1.16;
  --aa-lh-body: 1.65;

  --aa-surface: color-mix(in srgb, var(--color-heading) 4%, transparent);
  --aa-surface-2: color-mix(in srgb, var(--color-heading) 7%, transparent);
  --aa-line: color-mix(in srgb, var(--color-heading) 14%, transparent);
}

body.white-version {
  --aa-surface: color-mix(in srgb, #0b1524 3%, transparent);
  --aa-surface-2: color-mix(in srgb, #0b1524 6%, transparent);
  --aa-line: color-mix(in srgb, #0b1524 13%, transparent);
  --aa-shadow-2: 0 10px 30px -14px rgba(16, 24, 40, .25);
}

/* Arabic sets its own face and a slightly larger line height, because the
   script needs the vertical room for its marks. */
[dir="rtl"] body,
[dir="rtl"] .aa-system {
  font-family: 'IBM Plex Sans Arabic', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
[dir="rtl"] { --aa-lh-head: 1.32; --aa-lh-body: 1.85; }

/* ------------------------------------------------------- font fallbacks -- */
/*
 * Every layout shift left on the English pages came from the web fonts
 * arriving: measured with the woff2 requests blocked, CLS was 0.0000 on the
 * same pages that scored 0.05-0.10 with them. Poppins and Montserrat are both
 * wider than the sans-serif the browser shows first, so headings re-wrapped
 * and pushed the page down mid-read.
 *
 * These two faces are the same local Arial/Helvetica the fallback would have
 * used anyway, scaled so a line occupies the space the real font will need.
 * Numbers are derived, not guessed: size-adjust is the ratio of the average
 * lowercase advance to Arial's at the same weight, and the ascent, descent
 * and line-gap overrides are the font's own OS/2 typo metrics divided by
 * that ratio. The bands matter: Arial steps to bold at 600 while Poppins
 * and Montserrat keep climbing, so one ratio for every weight left the
 * semibold filter chips 6%% too wide and the row re-wrapped on font load.
 */
@font-face {
  font-family: 'Poppins Fallback';
  font-weight: 100 450;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 114.26%;
  ascent-override: 91.89%;
  descent-override: 30.63%;
  line-gap-override: 8.75%;
}
@font-face {
  font-family: 'Poppins Fallback';
  font-weight: 451 550;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 116.02%;
  ascent-override: 90.50%;
  descent-override: 30.17%;
  line-gap-override: 8.62%;
}
@font-face {
  font-family: 'Poppins Fallback';
  font-weight: 551 650;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold');
  size-adjust: 107.60%;
  ascent-override: 97.59%;
  descent-override: 32.53%;
  line-gap-override: 9.29%;
}
@font-face {
  font-family: 'Poppins Fallback';
  font-weight: 651 900;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold');
  size-adjust: 109.85%;
  ascent-override: 95.58%;
  descent-override: 31.86%;
  line-gap-override: 9.10%;
}
@font-face {
  font-family: 'Montserrat Fallback';
  font-weight: 100 450;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 116.13%;
  ascent-override: 83.36%;
  descent-override: 21.61%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Montserrat Fallback';
  font-weight: 451 550;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 117.93%;
  ascent-override: 82.08%;
  descent-override: 21.28%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Montserrat Fallback';
  font-weight: 551 650;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold');
  size-adjust: 109.30%;
  ascent-override: 88.56%;
  descent-override: 22.96%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: 'Montserrat Fallback';
  font-weight: 651 900;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold');
  size-adjust: 111.32%;
  ascent-override: 86.96%;
  descent-override: 22.55%;
  line-gap-override: 0.00%;
}

/* The InBio stacks are 'Poppins, sans-serif' and 'Montserrat, sans-serif';
   these repeat them with the matched fallback in between. */
:root {
  --aa-ff-body: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --aa-ff-head: 'Montserrat', 'Montserrat Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
body, input, select, textarea, button,
p, li, dd, dt, blockquote, figcaption, span, a, label, td, th { font-family: var(--aa-ff-body); }
h1, h2, h3, h4, h5, h6,
.section-title .title, .rainbow-title .title, .rn-service .content .title { font-family: var(--aa-ff-head); }

/* ================================================= hero, split layout ==
   The homepage hero sits in the left column of the original two-column
   Elementor section; the portrait is the Elementor image widget in the right
   column, so nothing here renders an image. Everything is capped to a measure
   that keeps the H1 on two lines at common desktop widths instead of four.
   ------------------------------------------------------------------------ */
/* The base .aa-hero is the two-column block the previous redesign used, with
   its own portrait in the second column. In the restored layout the portrait is
   the Elementor image widget beside it, so this variant is a single column that
   fills the text column it sits in. */
.aa-hero.aa-hero--split {
  display: block;
  max-width: 73rem;   /* 730px: two lines of the headline at its desktop size */
  padding-block: clamp(20px, 3vw, 40px) clamp(12px, 2vw, 20px);
}
.aa-hero.aa-hero--split .aa-kicker { margin-bottom: .7em; }
.aa-hero.aa-hero--split .aa-hero__h1 {
  font-size: var(--aa-h1) !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em;
  margin: 0 0 .42em;
  /* The English headline's longest token, "IT & Systems Specialist", is wider
     than the hero column at desktop size, so four lines is the natural
     minimum rather than a wrapping artefact. Balancing gives them an even rag
     instead of two short lines followed by a long one. */
  text-wrap: balance;
  hyphens: none;
}
[dir="rtl"] .aa-hero.aa-hero--split .aa-hero__h1 { letter-spacing: 0; line-height: 1.28 !important; }
.aa-hero.aa-hero--split .aa-hero__lede {
  font-size: clamp(1.7rem, 1.62rem + .28vw, 1.9rem);
  line-height: 1.65;
  max-width: 54ch;
  margin: 0 0 1.3em;
  color: var(--color-body);
}
/* The earlier redesign declares .aa-hero__proof further down as a stacked
   card list for its own hero. Everything here is scoped to the split variant
   so the two heroes can coexist without fighting over the same class names. */
.aa-hero--split .aa-hero__proof {
  list-style: none; margin: 0 0 1.7em; padding: 0;
  display: flex; flex-wrap: wrap; gap: 9px 10px;
}
.aa-hero--split .aa-hero__proof li {
  font-size: 1.4rem; font-weight: 600; line-height: 1.2;
  color: var(--color-heading);
  padding: 9px 15px; margin: 0;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-r-pill);
  background: var(--aa-surface);
  width: auto; max-width: none; box-shadow: none;
}
.aa-hero--split .aa-hero__proof li::before,
.aa-hero--split .aa-hero__proof li::marker { content: none; display: none; }
.aa-hero--split .aa-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 1.3em; }
.aa-hero--split .aa-hero__status {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 1.45rem; line-height: 1.55; color: var(--color-body);
  margin: 0; max-width: 46ch; padding: 0; border: 0; background: none;
}
.aa-hero--split .aa-hero__status .aa-dot { margin-top: .5em; flex: 0 0 auto; }
@media (max-width: 767px) {
  /* The first phone screen has to carry the identity, the value and the
     primary action. Tightening the rhythm keeps all three above the fold
     without shrinking any of the type below its readable size. */
  .aa-hero.aa-hero--split { max-width: none; padding-block: 14px 8px; }
  .aa-hero.aa-hero--split .aa-kicker { margin-bottom: .5em; font-size: 1.2rem; }
  .aa-hero.aa-hero--split .aa-hero__h1 { margin-bottom: .3em; line-height: 1.14 !important; }
  .aa-hero.aa-hero--split .aa-hero__lede { margin-bottom: .8em; }
  .aa-hero--split .aa-type { margin-bottom: .9em; min-height: 1.6em; }
  .aa-hero--split .aa-hero__proof { margin-bottom: 1em; gap: 7px 8px; }
  .aa-hero--split .aa-hero__proof li { padding: 7px 12px; font-size: 1.3rem; }
  .aa-hero--split .aa-hero__actions { margin-bottom: .8em; }
}
/* Below 360px the English headline needs six lines at the phone size above,
   which pushes the primary action off the first screen. A step down keeps the
   whole opening — identity, value, action — visible on a small handset. */
@media (max-width: 359px) {
  .aa-hero.aa-hero--split .aa-hero__h1 { font-size: 3.05rem !important; }
  .aa-hero--split .aa-hero__proof li { padding: 6px 11px; font-size: 1.25rem; }
}

/* The hero portrait: the theme wraps it in 30px of padding inside a column
   that is now narrower, which left the photograph at about 300px. It fills the
   column instead, and keeps its aspect so nothing shifts while it loads. */
#iam .rn-about-area .image-area { padding: 0; }
#iam .rn-about-area .thumbnail,
#iam .rn-about-area .thumbnail img { width: 100%; height: auto; display: block; }
#iam .rn-about-area .thumbnail img { border-radius: var(--aa-r-lg); }
/* Below the desktop breakpoint the two columns stack, so the portrait would
   otherwise run the full content width. */
@media (max-width: 1199px) {
  #iam .rn-about-area .thumbnail img { max-width: 420px; margin-inline: auto; }
}

/* The typing line sits directly under the hero and must not move the page as
   phrases change, so the row keeps a fixed height. */
.aa-type {
  font-size: clamp(1.6rem, 1.53rem + .22vw, 1.8rem);
  font-weight: 600;
  color: var(--aa-accent);
  min-height: 1.9em;
  margin: 0 0 1.4em;
}
.aa-type__caret { display: inline-block; width: 2px; height: 1.05em; margin-inline-start: 3px;
  background: currentColor; vertical-align: -.14em; animation: aa-caret 1s steps(1) infinite; }
@keyframes aa-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .aa-type__caret { animation: none; } }

/* The project grid uses the same hierarchy as the homepage carousel: the demand
   action is Try Live Demo, the case study is the follow-up. */
.aa-card__actions .aa-btn--demo {
  background: var(--aa-accent);
  border-color: var(--aa-accent);
  color: #0b1220;
  order: -1;
}
body.white-version .aa-card__actions .aa-btn--demo { color: #fff; }
.aa-card__actions .aa-btn--demo:hover,
.aa-card__actions .aa-btn--demo:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
.aa-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================ showcase card actions ==
   Two actions on every card, with Try Live Demo as the primary one: it is the
   thing a visitor can act on immediately, and the case study is the follow-up.
   Both are real buttons at a comfortable target size, never hover-only.
   -------------------------------------------------------------------------- */
.aa-sc__actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; margin-top: 14px;
}
.aa-sc__cta--demo {
  background: var(--aa-accent);
  border-color: var(--aa-accent);
  color: #0b1220;
  min-height: 40px;
  order: -1;                 /* the primary action leads the row */
}
body.white-version .aa-sc__cta--demo { color: #fff; }
.aa-sc__cta--demo:hover,
.aa-sc__cta--demo:focus-visible {
  opacity: 1;
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.aa-sc__actions .aa-sc__cta:not(.aa-sc__cta--demo) {
  min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--aa-line);
  border-radius: 999px;
  color: var(--color-heading);
}
.aa-sc__actions .aa-sc__cta:not(.aa-sc__cta--demo):hover { border-color: var(--aa-accent); color: var(--aa-accent); }
@media (max-width: 420px) {
  .aa-sc__actions { flex-direction: column; align-items: stretch; }
  .aa-sc__actions .aa-sc__cta { justify-content: center; }
}

/* ======================================================= header icons ==
   The theme renders its icons as <i class="feather-*"> glyph holders, styled
   with an icon font's metrics: font-size 23px and line-height 57px inside a
   20px box. Dropping an inline SVG into that inherits the leading, and the
   hamburger rendered 20px below its own box — outside the circular button.
   Zero line-height and a block-level SVG take text metrics out of it.
   -------------------------------------------------------------------------- */
i[class*="feather-"],
i.aa-ico {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0 !important;
  font-size: 0 !important;
  width: auto; height: auto;
}
i[class*="feather-"] > svg,
i.aa-ico > svg {
  display: block;
  width: 22px; height: 22px;
  vertical-align: middle;
  flex: 0 0 auto;
}
/* The drawer close control and the footer mark are smaller. */
.popup-mobile-menu .close-button i[class*="feather-"] > svg { width: 20px; height: 20px; }
.aa-foot__li i[class*="feather-"] > svg { width: 18px; height: 18px; }

/* ============================================== motion system ==========
   Three tiers, one vocabulary. Everything animates opacity and transform
   only — never a layout property — so nothing reflows and nothing shifts.

     1. section   the block fades and rises as it arrives          (inbio-brand.js)
     2. stagger   its children follow one after another            (this file)
     3. accent    headings, dividers and media get a small motion of their own

   Every hidden state is nested under html.aa-anim, which only exists once the
   script has run, so with JavaScript blocked the page renders fully visible.
   The inline axis is used for horizontal offsets, so Arabic moves from the
   right without a single direction-specific rule.
   -------------------------------------------------------------------------- */
:root {
  --aa-in-dur: .62s;
  --aa-in-ease: cubic-bezier(.22, .68, .36, 1);
  --aa-in-rise: 18px;
  --aa-in-shift: 14px;
  --aa-stagger: 70ms;
}

/* ---- tier 2: staggered children --------------------------------------
   The offset is carried in two custom properties rather than written into
   each variant's own `transform`. A variant selector is necessarily more
   specific than the shown state (`.aa-postgrid` adds a class the reset has
   no way to match), so a variant that declared `transform` outright won the
   cascade in BOTH directions: the cards faded in correctly and then stayed
   14px to the inline-start and 9px low, for good. With the distance held in
   variables there is exactly one `transform` declaration and exactly one
   reset, and they cannot out-specify each other. */
html.aa-anim [data-aa-stagger] > * {
  --aa-in-x: 0px;
  --aa-in-y: var(--aa-in-rise);
  opacity: 0;
  transform: translate3d(var(--aa-in-x), var(--aa-in-y), 0);
  transition:
    opacity var(--aa-in-dur) var(--aa-in-ease),
    transform var(--aa-in-dur) var(--aa-in-ease);
  transition-delay: calc(var(--aa-i, 0) * var(--aa-stagger));
  will-change: opacity, transform;
}
html.aa-anim [data-aa-stagger-in] > * {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* A row of cards reads better arriving along the reading direction; a column
   of list items reads better rising. The inline offset flips itself in RTL. */
html.aa-anim [data-aa-stagger].aa-grid > *,
html.aa-anim [data-aa-stagger].aa-postgrid > *,
html.aa-anim [data-aa-stagger].aa-svc > *,
html.aa-anim [data-aa-stagger].aa-pill__grid > * {
  --aa-in-x: calc(var(--aa-in-shift) * -1);
  --aa-in-y: calc(var(--aa-in-rise) * .5);
}
html[dir="rtl"].aa-anim [data-aa-stagger].aa-grid > *,
html[dir="rtl"].aa-anim [data-aa-stagger].aa-postgrid > *,
html[dir="rtl"].aa-anim [data-aa-stagger].aa-svc > *,
html[dir="rtl"].aa-anim [data-aa-stagger].aa-pill__grid > * {
  --aa-in-x: var(--aa-in-shift);
}
/* small pills carry less distance than a card */
html.aa-anim [data-aa-stagger].aa-tools__list > *,
html.aa-anim [data-aa-stagger].aa-cs-chips > *,
html.aa-anim [data-aa-stagger].aa-cs-tags > *,
html.aa-anim [data-aa-stagger].aa-hero__proof > * {
  --aa-in-y: 10px;
  --aa-stagger: 45ms;
}
/* a body-copy list should barely move — it is read, not admired */
html.aa-anim [data-aa-stagger].aa-cs-list > *,
html.aa-anim [data-aa-stagger].aa-role__list > *,
html.aa-anim [data-aa-stagger].aa-takeaway__list > * {
  --aa-in-y: 8px;
  --aa-stagger: 40ms;
  --aa-in-dur: .5s;
}

/* ---- tier 3: section heading accent ---------------------------------- */
/* A hairline that draws itself under a section heading as the block arrives.
   scaleX only, on a pseudo-element, so it cannot affect layout. */
html.aa-anim [data-aa-reveal] .aa-sec__h2::after,
html.aa-anim [data-aa-reveal] .aa-phead__h1::after {
  content: "";
  display: block;
  inline-size: 46px;
  block-size: 2px;
  margin-block-start: .5em;
  background: var(--aa-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--aa-in-ease) .12s;
}
html[dir="rtl"].aa-anim [data-aa-reveal] .aa-sec__h2::after,
html[dir="rtl"].aa-anim [data-aa-reveal] .aa-phead__h1::after { transform-origin: right center; }
html.aa-anim [data-aa-reveal].is-in .aa-sec__h2::after,
html.aa-anim [data-aa-reveal].is-in .aa-phead__h1::after { transform: scaleX(1); }

/* ---- tier 3: media ---------------------------------------------------- */
/* The card image settles from a slight scale as its card arrives. The wrapper
   already clips, so this cannot spill or widen anything. */
html.aa-anim [data-aa-stagger] .aa-card__img,
html.aa-anim [data-aa-stagger] .aa-sc__img {
  transform: scale(1.045);
  transition: transform 1.1s var(--aa-in-ease);
}
html.aa-anim [data-aa-stagger-in] .aa-card__img,
html.aa-anim [data-aa-stagger-in] .aa-sc__img { transform: scale(1); }

/* ---- interaction: cards, buttons, links ------------------------------ */
.aa-card__in, .aa-post, .aa-feature, .aa-sc__card {
  transition:
    transform var(--aa-dur) var(--aa-ease),
    border-color var(--aa-dur) var(--aa-ease),
    box-shadow var(--aa-dur) var(--aa-ease);
}
.aa-card__in:hover, .aa-post:hover, .aa-sc__card:hover,
.aa-card:focus-within .aa-card__in, .aa-post:focus-within, .aa-sc__item:focus-within .aa-sc__card {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--aa-accent) 42%, var(--aa-line));
  box-shadow: var(--aa-shadow-2);
}
.aa-card__media, .aa-sc__media, .aa-feature__media { overflow: hidden; }
.aa-card__in:hover .aa-card__img,
.aa-card:focus-within .aa-card__img,
.aa-sc__card:hover .aa-sc__img { transform: scale(1.05); }
.aa-card__img, .aa-sc__img { transition: transform .75s var(--aa-in-ease); }

.aa-btn, .aa-sc__cta, .aa-btn-solid {
  transition:
    transform var(--aa-dur) var(--aa-ease),
    background-color var(--aa-dur) var(--aa-ease),
    border-color var(--aa-dur) var(--aa-ease),
    color var(--aa-dur) var(--aa-ease);
}
.aa-btn:active, .aa-sc__cta:active { transform: translateY(1px); }
.aa-btn:focus-visible, .aa-sc__cta:focus-visible,
.aa-card__t a:focus-visible, .aa-post h3 a:focus-visible {
  outline: 2px solid var(--aa-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- the whole system stands down for reduced motion ------------------ */
@media (prefers-reduced-motion: reduce) {
  html.aa-anim [data-aa-stagger] > *,
  html.aa-anim [data-aa-stagger-in] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.aa-anim [data-aa-reveal] .aa-sec__h2::after,
  html.aa-anim [data-aa-reveal] .aa-phead__h1::after { transform: scaleX(1); transition: none; }
  html.aa-anim [data-aa-stagger] .aa-card__img,
  html.aa-anim [data-aa-stagger] .aa-sc__img { transform: none; transition: none; }
  .aa-card__in, .aa-post, .aa-feature, .aa-sc__card,
  .aa-btn, .aa-sc__cta, .aa-btn-solid { transition: none; }
  .aa-card__in:hover, .aa-post:hover, .aa-sc__card:hover { transform: none; }
  .aa-card__in:hover .aa-card__img, .aa-sc__card:hover .aa-sc__img { transform: none; }
}

/* =================================================== header spacing ==
   The theme lays the right-hand controls out in a flex row with no gap, and
   leaves the spacing to per-element margins. That gave 10px between the
   Contact button, the language switcher and the menu icon in English and
   nothing at all in Arabic at desktop width, so the button read as attached
   to the icon. One gap on the row, in logical units, spaces every control the
   same way in both directions — no negative margins, no direction-specific
   rules, and it holds however many controls the row happens to carry.
   -------------------------------------------------------------------------- */
.rn-header .header-right,
.rn-header .header-center {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 20px);
}
/* the per-element margins the gap replaces */
.rn-header .header-right > *,
.rn-header .header-center > *,
.rn-header .aa-mlang,
.rn-header .aa-hdr__btn,
.rn-header .hamberger-menu,
.rn-header .header-btn,
.rn-header .rn-btn { margin-inline: 0 !important; }
/* The theme sets a 16px start margin on the menu button itself, which stacked
   on top of the row gap and made the spacing uneven — 12px on one side of the
   Contact button and 34px on the other. The row gap is the single source. */
.rn-header .header-right > .hamberger-menu,
.rn-header .header-center > .hamberger-menu { margin: 0 !important; }
/* the nav keeps its own breathing room from the controls beside it */
.rn-header .mainmenu-nav { margin-inline-end: clamp(8px, 1vw, 16px); }
/*
 * The appearance control is a nav item, not a child of .header-right, so the
 * row gap above cannot reach it and at desktop widths it abutted the Contact
 * button. It gets its own logical end margin — the theme's was a physical
 * `margin-left`, which put the space on the wrong side in Arabic.
 */
.rn-header .aa-hdr { margin-inline: 14px 0 !important; }
.rn-header .aa-hdr-item { margin-inline-end: clamp(18px, 1.6vw, 26px) !important; }

/* The menu button and the appearance toggle: one touch target each, centred
   on the same line as the language switcher and the logo beside them. */
.hamberger-menu,
.aa-hdr__btn {
  width: 48px !important; height: 48px !important;
  min-width: 48px; min-height: 48px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  padding: 0; flex: 0 0 auto;
}
.hamberger-menu:focus-visible,
.aa-hdr__btn:focus-visible {
  outline: 2px solid var(--aa-accent);
  outline-offset: 3px;
}

/* ==================================================== navigation scale ==
   The theme set the desktop menu at 13px uppercase and the drawer at 14px,
   which read as small next to the display type. One scale for both, with the
   letter-spacing uppercase needs to stay legible.
   ------------------------------------------------------------------------ */
.rn-header .mainmenu > li > a,
.mainmenu-nav ul.primary-menu > li > a,
.primary-menu > li > a {
  font-size: 1.55rem !important;
  letter-spacing: .02em;
  font-weight: 500;
}
.rn-header .mainmenu > li { margin-inline: 0; }
.rn-header .mainmenu > li > a { padding-inline: 14px; }
.popup-mobile-menu .primary-menu > li > a {
  font-size: 1.7rem !important;
  min-height: var(--aa-tap);
  display: flex; align-items: center; justify-content: center;
}
[dir="rtl"] .rn-header .mainmenu > li > a,
[dir="rtl"] .popup-mobile-menu .primary-menu > li > a { letter-spacing: 0; }

/* ========================================================= work page ==== */
.aa-worksec { margin-block: 0 var(--aa-sec-y); scroll-margin-top: 90px; }
.aa-svc__n, .aa-flow__n {
  font-size: 1.2rem; font-weight: 700; letter-spacing: .12em;
  color: var(--aa-accent); margin: 0 0 .6em; display: block;
}
/* How I deliver is a connected line, not another grid of cards: the three
   sections of the Work page should not all read as the same component. Each
   step is a node on a rule that runs behind them, so the eye follows the
   sequence instead of scanning a matrix. */
.aa-flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(20px, 2.4vw, 30px) var(--aa-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  position: relative;
}
.aa-flow__step {
  position: relative;
  padding: 0;
  min-width: 0;
  padding-block-start: 26px;
}
/* the rule the nodes sit on */
.aa-flow__step::before {
  content: "";
  position: absolute;
  inset-block-start: 7px;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: var(--aa-line);
}
.aa-flow__step::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 0;
  inline-size: 9px; block-size: 9px;
  border-radius: 50%;
  background: var(--aa-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aa-accent) 22%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .aa-flow__step::after { transition: transform var(--aa-dur) var(--aa-ease); }
  .aa-flow__step:hover::after { transform: scale(1.35); }
}
.aa-flow__k { font-size: 1.7rem !important; line-height: 1.25 !important; margin: 0 0 .35em; color: var(--color-heading); }
.aa-flow__n { margin-bottom: .35em; }
.aa-flow__v { font-size: 1.45rem; line-height: 1.6; color: var(--color-body); margin: 0; }

/* ================================================================= layout ==
   THE GUTTER FIX.

   The edge collisions came from per-element inline padding authored in the
   Elementor editor: Solutions containers carried 0px, case-study containers
   Elementor's 10px default, legacy sections 10px plus a column padding. There
   was no floor anywhere, so at 320px the text sat on the glass.

   The fix is applied once, to the two wrappers every page section uses:
   the outer element's inline padding is zeroed and the gutter is put on the
   inner wrapper, which is also where the max-width lives. One rule, one
   value, every page — and no overflow is hidden to achieve it.
   ------------------------------------------------------------------------ */

/* Flex containers (current Elementor).
   The gutter goes on the OUTER container, because a full-width container has
   no .e-con-inner at all — only a boxed one does. Putting it on the inner
   wrapper left every full-width section without a gutter, which is how a
   case-study heading ended up against the glass at 375px. */
main .e-con.e-parent {
  padding-inline-start: var(--aa-gutter-l) !important;
  padding-inline-end: var(--aa-gutter-r) !important;
  box-sizing: border-box;
}
main .e-con.e-parent > .e-con-inner {
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  width: 100%;
  max-width: var(--aa-max);
  margin-inline: auto;
  box-sizing: border-box;
}
/* A nested container must not add the gutter a second time. */
main .e-con.e-child { padding-inline-start: 0; padding-inline-end: 0; }

/* legacy sections */
main .elementor-top-section > .elementor-container {
  padding-inline-start: var(--aa-gutter-l);
  padding-inline-end: var(--aa-gutter-r);
  max-width: calc(var(--aa-max) + var(--aa-gutter-l) + var(--aa-gutter-r));
  margin-inline: auto;
  box-sizing: border-box;
}
main .elementor-top-section > .elementor-container > .elementor-column > .elementor-element-populated {
  padding-inline: 0;
}
/* Bootstrap's negative row margin, wherever it lands inside our content. */
main .elementor-widget-container .row { margin-inline: 0; }
main .elementor-widget-container .row > [class*="col-"] { padding-inline: 0; }

/* Nothing inside the content column may be wider than it. */
main img, main video, main iframe, main table, main pre { max-width: 100%; }
main .elementor-widget-container > * { min-width: 0; }
.aa-grid > *, .aa-lane__items > *, .aa-svc > *, .aa-sol > * { min-width: 0; }

/* Long technical strings wrap instead of pushing the column open. */
.aa-prose p, .aa-prose li, .aa-card__d, .aa-journal__body p, .aa-journal__body li,
.aa-lane__items p, .aa-svc__item li { overflow-wrap: anywhere; }

/* The masks the parent theme applies are no longer doing any work: with the
   gutter system above, nothing overflows at any tested width. Turning them
   off keeps a future regression visible instead of silently clipped. */
html { overflow-x: visible; }
body { overflow-x: visible; }
[dir="rtl"] html, [dir="rtl"] body,
[dir="rtl"] #main-wrapper, [dir="rtl"] main.main-page-wrapper { overflow-x: visible; }
/* the one legitimate exception: scroll is locked while the drawer is open */
body.aa-menu-open { overflow: hidden; touch-action: none; }

/* ============================================================== the header ==
   The theme swaps the header to position:fixed on scroll, which took it out of
   flow and pulled the whole page up by its height — a 0.18 layout shift on
   every page at every width. Sticky positioning gives the same behaviour while
   the element keeps its space, so the shift is zero. */
/* A sticky element creates a stacking context whatever its z-index, so with
   `z-index: auto` the header painted in document order — underneath every
   section that follows it. The appearance panel is inside the header, which
   meant the hero portrait on Home and the page heading everywhere else sat on
   top of it and swallowed the clicks: Light/Dark and the accent swatches could
   not be used at all on desktop. One explicit layer for the header fixes the
   panel, the open drawer and the sticky bar together. Content sits at 0-10,
   the skip link stays above everything at 10000. */
.rn-header {
  position: relative;
  z-index: 90;
}

/* A signed-in editor gets WordPress's fixed admin bar above everything. The
   sticky header pinned to top:0 slid underneath it. WordPress uses 32px above
   782px and 46px below, and below 600px the bar stops being fixed, so the
   header returns to 0 there. Anonymous visitors never match these selectors. */
body.admin-bar .rn-header.header--sticky,
body.admin-bar .rn-header.header--sticky.sticky,
body.admin-bar .rn-header.header--sticky.rainbow-sticky { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar .rn-header.header--sticky,
  body.admin-bar .rn-header.header--sticky.sticky,
  body.admin-bar .rn-header.header--sticky.rainbow-sticky { top: 46px !important; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .rn-header.header--sticky,
  body.admin-bar .rn-header.header--sticky.sticky,
  body.admin-bar .rn-header.header--sticky.rainbow-sticky { top: 0 !important; }
}

.rn-header.header--sticky,
.rn-header.header--sticky.sticky,
.rn-header.header--sticky.rainbow-sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
  inset-inline: auto !important;
  width: auto !important;
  /* The theme plays a slide-down keyframe that animates `top` from above the
     viewport. On a sticky element that is a visible jump of the whole header
     on every scroll, and it was the single largest layout shift on the site. */
  animation: none !important;
}
/* …and it shrinks the logo by 10% at the same moment, which resized the header
   while the page was being read. */
.sticky .header-wrapper .logo img { max-width: 100% !important; }
#rainbow-sticky-placeholder { display: none !important; }

/* ========================================================== typography ==== */
.aa-hero__h1, .aa-phead__h1, main h1.elementor-heading-title, .aa-journal h1 {
  font-size: var(--aa-h1-page) !important;
  line-height: var(--aa-lh-head) !important;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 .5em;
}
.aa-hero__h1 { font-size: var(--aa-h1) !important; }
[dir="rtl"] .aa-hero__h1, [dir="rtl"] .aa-phead__h1 { letter-spacing: 0; }

.aa-sec__h2, main h2.elementor-heading-title, .aa-cs-h2,
.section-title .title, .rainbow-title .title {
  font-size: var(--aa-h2) !important;
  line-height: 1.24 !important;
  letter-spacing: -.015em;
  text-wrap: balance;
}
[dir="rtl"] .aa-sec__h2, [dir="rtl"] main h2.elementor-heading-title { letter-spacing: 0; }

/* Card headings inside a case study sit under an h2, so they are h3 elements.
   They keep the compact card scale rather than the page-level h3 size. */
.aa-cs-card h3 {
  font-size: 2rem !important;
  line-height: 1.35 !important;
  font-weight: 700;
  margin: 0 0 2rem;
}

.aa-sec__lede, .aa-phead__lede, .aa-hero__lede {
  font-size: clamp(1.7rem, 1.6rem + .35vw, 2rem);
  line-height: var(--aa-lh-body);
  max-width: var(--aa-measure);
  color: var(--color-body);
}
.aa-kicker {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aa-accent);
  margin: 0 0 .75em;
}
[dir="rtl"] .aa-kicker { letter-spacing: 0; text-transform: none; font-size: 1.4rem; }

.aa-prose p { font-size: var(--aa-body); line-height: var(--aa-lh-body); max-width: var(--aa-measure); }
.aa-prose p + p { margin-top: 1.1em; }

/* =============================================================== buttons == */
/* The theme stretches a bare <button> to the width of its container. An
   .aa-btn is the same control whether it is written as <a> or <button> — the
   blog search submit and the article Copy link both took a whole row — so it
   sizes to its own label either way. */
button.aa-btn { width: auto; }

.aa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--aa-tap);
  padding: 10px 20px;
  border-radius: var(--aa-r-sm);
  border: 1px solid transparent;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--aa-dur) var(--aa-ease), border-color var(--aa-dur) var(--aa-ease), transform var(--aa-dur) var(--aa-ease);
}
.aa-btn--primary { background: var(--color-primary); color: #fff !important; }
.aa-btn--primary:hover { filter: brightness(1.08); }
.aa-btn--ghost { background: transparent; color: var(--color-heading) !important; border-color: var(--aa-line); }
.aa-btn--ghost:hover { border-color: var(--aa-accent); background: var(--aa-surface); }
.aa-btn--demo { background: var(--aa-surface-2); color: var(--color-heading) !important; border-color: var(--aa-line); }
.aa-btn--demo:hover { border-color: var(--aa-accent); }
.aa-btn--sm { min-height: var(--aa-tap); padding: 8px 14px; font-size: 1.4rem; }
.aa-btn:active { transform: translateY(1px); }

.aa-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--aa-tap);
  font-weight: 600;
  color: var(--aa-accent);
  text-decoration: none;
}
.aa-link:hover { text-decoration: underline; text-underline-offset: 4px; }
[dir="rtl"] .aa-link span[aria-hidden] { transform: scaleX(-1); }
.aa-ext { font-size: .85em; opacity: .8; margin-inline-start: 2px; }

/* Focus is visible everywhere, on every control, in both themes. */
.aa-system a:focus-visible, main a:focus-visible, main button:focus-visible,
main input:focus-visible, main textarea:focus-visible, main select:focus-visible,
.aa-chip:focus-visible, .aa-btn:focus-visible, footer a:focus-visible, header a:focus-visible,
header button:focus-visible, [data-aa-menu-open]:focus-visible {
  outline: 3px solid var(--aa-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The skip link: off-screen until focused, then unmistakable. */
.aa-skip {
  position: absolute;
  inset-inline-start: 8px;
  top: -100px;
  z-index: 10000;
  padding: 12px 20px;
  min-height: var(--aa-tap);
  display: inline-flex;
  align-items: center;
  background: var(--color-primary);
  color: #fff !important;
  border-radius: var(--aa-r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s var(--aa-ease);
}
.aa-skip:focus,
.aa-skip:focus-visible {
  top: 8px;
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--color-primary);
}

/* Visually hidden, still read aloud. */
.aa-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ================================================================== hero == */
.aa-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(28px, 5vw, 64px) clamp(20px, 3vw, 36px);
}
@media (min-width: 880px) {
  .aa-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.aa-hero__text { min-width: 0; }
.aa-hero__lede { margin: 0 0 1em; max-width: 46ch; }
.aa-hero__role {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-heading);
  margin: 0 0 1.5em;
}
.aa-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.aa-hero__status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 1.4rem; color: var(--color-body);
  padding: 8px 14px; border: 1px solid var(--aa-line); border-radius: var(--aa-r-pill);
  background: var(--aa-surface);
  margin: 0;
}
.aa-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3BBF8A; flex: 0 0 auto;
  box-shadow: 0 0 0 3px color-mix(in srgb, #3BBF8A 22%, transparent);
}

.aa-hero__visual { min-width: 0; display: grid; gap: 16px; }
.aa-hero__portrait { display: block; }
/* A fixed aspect box: the portrait cannot move the page as it decodes. */
.aa-hero__portrait img {
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 640 / 688;
  height: auto;
  object-fit: cover;
  border-radius: var(--aa-r-lg);
  border: 1px solid var(--aa-line);
  background: var(--aa-surface);
  margin-inline: auto;
}
.aa-hero__proof {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.aa-hero__proof li {
  display: grid; gap: 2px;
  padding: 12px 16px;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-r);
  background: var(--aa-surface);
}
.aa-hero__proof b { font-size: 1.5rem; color: var(--color-heading); }
.aa-hero__proof span { font-size: 1.3rem; color: var(--color-body); }
@media (min-width: 600px) and (max-width: 879px) {
  .aa-hero__proof { grid-template-columns: repeat(3, 1fr); }
}

/* ======================================================== product map ===== */
.aa-map { display: grid; gap: clamp(24px, 3.5vw, 40px); }
.aa-lane__head { margin-bottom: 14px; }
.aa-lane__title {
  font-size: var(--aa-h3);
  margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.aa-lane__title::before {
  content: ""; width: 22px; height: 2px; flex: 0 0 auto;
  background: var(--aa-accent); border-radius: 2px;
}
.aa-lane__note { font-size: 1.4rem; color: var(--color-body); margin: 4px 0 0; }
.aa-lane__items, .aa-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--aa-gap);
}
/* auto-fill, not auto-fit: a lane holding one product keeps a card-sized
   column instead of stretching one card across the whole page. */
.aa-lane__items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
/* Cap the map at three tracks so a one-product lane reads as a card, not a
   banner, and a two-product lane does not leave half the row empty. */
@media (min-width: 980px) { .aa-lane__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.aa-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.aa-map--compact .aa-lane__items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

.aa-card { min-width: 0; }
.aa-card__in {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-r);
  background: var(--aa-surface);
  overflow: hidden;
  transition: border-color var(--aa-dur) var(--aa-ease), transform var(--aa-dur) var(--aa-ease), box-shadow var(--aa-dur) var(--aa-ease);
}
.aa-card__in:hover { border-color: var(--aa-accent); transform: translateY(-2px); box-shadow: var(--aa-shadow-2); }
.aa-card__media { display: block; aspect-ratio: 16 / 9; background: var(--aa-surface-2); }
.aa-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aa-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.aa-card__meta { margin: 0; }
.aa-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 1.2rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-heading);
  padding: 4px 10px; border-radius: var(--aa-r-pill);
  background: color-mix(in srgb, #3BBF8A 14%, transparent);
  border: 1px solid color-mix(in srgb, #3BBF8A 32%, transparent);
}
[dir="rtl"] .aa-badge { letter-spacing: 0; text-transform: none; }
.aa-card__t { font-size: var(--aa-h3); margin: 0; line-height: 1.3; }
.aa-card__t a { color: var(--color-heading); text-decoration: none; }
.aa-card__t a:hover { color: var(--aa-accent); }
.aa-card__d { font-size: 1.5rem; line-height: 1.6; color: var(--color-body); margin: 0; flex: 1; }
.aa-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }

/* ============================================================ filters ===== */
.aa-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--aa-gap); }
.aa-chip {
  /* the theme styles bare <button> as a full-width block */
  flex: 0 0 auto;
  width: auto;
  min-height: var(--aa-tap);
  padding: 8px 16px;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-r-pill);
  background: transparent;
  color: var(--color-body);
  font-size: 1.4rem; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--aa-dur) var(--aa-ease), background var(--aa-dur) var(--aa-ease), color var(--aa-dur) var(--aa-ease);
}
.aa-chip:hover { border-color: var(--aa-accent); color: var(--color-heading); }
.aa-chip.is-on { background: var(--aa-accent); border-color: var(--aa-accent); color: #0b1220; }
body.white-version .aa-chip.is-on { color: #fff; }
.aa-grid__note { font-size: 1.3rem; color: var(--color-body); margin-top: var(--aa-gap); }
.aa-grid__empty { font-size: 1.5rem; color: var(--color-body); }

/* ============================================== generic section components = */
.aa-sechead { margin-bottom: var(--aa-gap); }
.aa-sechead .aa-sec__lede { margin-top: .5em; }

.aa-goals__list, .aa-svc, .aa-sol, .aa-prin__list, .aa-eng__list, .aa-paths, .aa-concepts {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--aa-gap);
}
.aa-goals__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.aa-svc { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.aa-sol { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.aa-prin__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.aa-eng__list, .aa-paths { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.aa-concepts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.aa-goal, .aa-svc__item, .aa-sol__item, .aa-prin__list li, .aa-eng__list li, .aa-path, .aa-concept {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-r);
  background: var(--aa-surface);
  min-width: 0;
}
.aa-goal h3, .aa-svc__item h2, .aa-sol__item h2, .aa-prin__list h3, .aa-eng__list h3, .aa-path h2, .aa-concept h3 {
  font-size: var(--aa-h3) !important;
  line-height: 1.3 !important;
  margin: 0 0 .5em;
}
.aa-goal p, .aa-svc__item p, .aa-sol__item p, .aa-prin__list p, .aa-eng__list p, .aa-path p, .aa-concept p {
  font-size: 1.5rem; line-height: 1.6; color: var(--color-body); margin: 0 0 1em;
}
.aa-svc__item ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aa-svc__item li {
  font-size: 1.4rem; color: var(--color-body);
  padding-inline-start: 18px; position: relative;
}
.aa-svc__item li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--aa-accent);
}
.aa-sol__n { font-size: 3.2rem; font-weight: 800; color: var(--aa-line); margin: 0 0 .1em; line-height: 1; }
.aa-sol__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.aa-pill {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 6px 14px; border-radius: var(--aa-r-pill);
  border: 1px solid var(--aa-line); background: var(--aa-surface-2);
  font-size: 1.3rem; font-weight: 600; color: var(--color-heading); text-decoration: none;
}
.aa-pill:hover { border-color: var(--aa-accent); color: var(--aa-accent); }
.aa-concept { opacity: .82; }
.aa-concept h3 { color: var(--color-body); }

/* steps */
.aa-steps__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--aa-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: none;
}
.aa-steps__list li { position: relative; padding-top: 14px; border-top: 2px solid var(--aa-line); min-width: 0; }
.aa-steps__n { font-size: 1.2rem; font-weight: 700; letter-spacing: .1em; color: var(--aa-accent); }
.aa-steps__list h3 { font-size: 1.7rem !important; margin: 6px 0 6px; line-height: 1.3 !important; }
.aa-steps__list p { font-size: 1.4rem; color: var(--color-body); margin: 0; line-height: 1.55; }

/* role list */
.aa-role__line { font-weight: 600; color: var(--color-heading); margin: 0 0 1em; }
.aa-role__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.aa-role__list li {
  font-size: 1.5rem; color: var(--color-body);
  padding-inline-start: 18px; position: relative;
}
.aa-role__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--aa-accent);
}

/* closing CTA band */
.aa-cta {
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-r-lg);
  background: linear-gradient(135deg, var(--aa-surface-2), var(--aa-surface));
}
.aa-cta h2 { font-size: var(--aa-h2) !important; margin: 0 0 .4em; line-height: 1.2 !important; }
.aa-cta p { font-size: 1.6rem; color: var(--color-body); max-width: 56ch; margin: 0 0 1.4em; }
.aa-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* Appended to the_content, so it lands outside the Elementor container and
   has to carry the page gutter itself. */
.aa-note {
  margin: 2em auto 0;
  padding: 1.5em var(--aa-gutter-r) 0 var(--aa-gutter-l);
  max-width: calc(var(--aa-max) + var(--aa-gutter-l) + var(--aa-gutter-r));
  border-top: 1px solid var(--aa-line);
  box-sizing: border-box;
}
.aa-note h2 { font-size: var(--aa-h3) !important; }
.aa-note p { font-size: 1.4rem; color: var(--color-body); line-height: 1.7; }

/* insights */
.aa-insights__list {
  list-style: none; margin: 0 0 var(--aa-gap); padding: 0;
  display: grid; gap: var(--aa-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.aa-ins { min-width: 0; padding-top: 14px; border-top: 2px solid var(--aa-line); }
.aa-ins__meta { display: flex; gap: 8px; font-size: 1.2rem; color: var(--color-body); margin: 0 0 .5em; }
.aa-ins h3 { font-size: 1.7rem !important; line-height: 1.35 !important; margin: 0 0 .4em; }
.aa-ins h3 a { color: var(--color-heading); text-decoration: none; }
.aa-ins h3 a:hover { color: var(--aa-accent); }
.aa-ins__x { font-size: 1.4rem; color: var(--color-body); line-height: 1.55; margin: 0; }

/* contact paths */
.aa-path h2 { font-size: var(--aa-h3) !important; }
.aa-path--project { border-color: color-mix(in srgb, var(--aa-accent) 40%, var(--aa-line)); }

/* =================================================================== blog = */
.aa-journal {
  max-width: calc(var(--aa-max) + var(--aa-gutter-l) + var(--aa-gutter-r));
  margin-inline: auto;
  padding-inline: var(--aa-gutter-l) var(--aa-gutter-r);
  padding-block: clamp(28px, 5vw, 56px) clamp(48px, 7vw, 88px);
  color: var(--color-body);
}
.aa-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 1.3rem; margin: 0 0 clamp(20px, 3vw, 32px); padding: 0;
  list-style: none;
}
.aa-crumbs li { display: flex; align-items: center; gap: 6px; }
.aa-crumbs li + li::before { content: "/"; opacity: .5; }
.aa-crumbs a { color: var(--color-body); text-decoration: none; min-height: 0; }
.aa-crumbs a:hover { color: var(--aa-accent); text-decoration: underline; }
.aa-crumbs [aria-current] { color: var(--color-heading); }

.aa-blog__head { max-width: var(--aa-measure); margin-bottom: clamp(28px, 4vw, 44px); }
.aa-blog__tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: var(--aa-gap); }
.aa-blog__search { display: flex; gap: 8px; flex: 1 1 240px; min-width: 0; }
.aa-blog__search input {
  flex: 1 1 auto; min-width: 0; min-height: var(--aa-tap);
  padding: 10px 14px; border-radius: var(--aa-r-sm);
  border: 1px solid var(--aa-line); background: transparent; color: var(--color-heading);
}
.aa-blog__search > button { flex: 0 0 auto; white-space: nowrap; }
/* TranslatePress adds a hidden language field to the Arabic form. */
.aa-blog__search input[type="hidden"] { flex: 0 0 0; }
.aa-topics { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 var(--aa-gap); padding: 0; }
.aa-topics a {
  display: inline-flex; align-items: center; min-height: var(--aa-tap);
  padding: 8px 14px; border-radius: var(--aa-r-pill);
  border: 1px solid var(--aa-line); font-size: 1.3rem; font-weight: 600;
  color: var(--color-body); text-decoration: none;
}
.aa-topics a:hover, .aa-topics a[aria-current] { border-color: var(--aa-accent); color: var(--aa-accent); }

.aa-feature {
  display: grid; gap: clamp(18px, 3vw, 32px);
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--aa-line); border-radius: var(--aa-r-lg);
  background: var(--aa-surface);
  margin-bottom: clamp(24px, 4vw, 40px);
}
@media (min-width: 760px) { .aa-feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } }
.aa-feature__media img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--aa-r); display: block; }
.aa-feature h2 { font-size: var(--aa-h2) !important; line-height: 1.2 !important; margin: .3em 0 .4em; }
.aa-feature h2 a { color: var(--color-heading); text-decoration: none; }
.aa-feature h2 a:hover { color: var(--aa-accent); }
.aa-feature p { font-size: 1.6rem; color: var(--color-body); line-height: 1.6; }

.aa-postgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--aa-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.aa-post {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--aa-line); border-radius: var(--aa-r); background: var(--aa-surface);
}
.aa-post__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 1.2rem; color: var(--color-body); margin: 0; }
.aa-post__topic { color: var(--aa-accent); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* The separator and the reading time are one item, so a wrapping meta line
   never leaves a lone "·" hanging at the end of a row. */
.aa-post__sep { margin-inline-end: 8px; }
[dir="rtl"] .aa-post__topic { letter-spacing: 0; text-transform: none; }
.aa-post h3 { font-size: var(--aa-h3) !important; line-height: 1.3 !important; margin: 0; }
.aa-post h3 a { color: var(--color-heading); text-decoration: none; }
.aa-post h3 a:hover { color: var(--aa-accent); }
.aa-post p { font-size: 1.5rem; color: var(--color-body); line-height: 1.6; margin: 0; flex: 1; }

/* article */
.aa-article { max-width: 100%; }
.aa-article__head { max-width: var(--aa-measure); }
.aa-article__meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 1.3rem; color: var(--color-body);
  margin: 1.2em 0 0;
}
.aa-article__cover {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1200 / 630; object-fit: cover;
  border-radius: var(--aa-r-lg); margin: clamp(22px, 3vw, 34px) 0;
  background: var(--aa-surface);
}
.aa-journal__body {
  max-width: var(--aa-measure-narrow);
  font-size: clamp(1.7rem, 1.6rem + .25vw, 1.9rem);
  line-height: 1.8;
  color: var(--color-body);
}
/* The article sets its own reading size on the wrapper, but `body, p, li` in
   inbio-brand.css re-declares every paragraph at the page body size, so the
   text a visitor actually reads never got it. Inheriting hands the paragraphs
   back to the wrapper in both languages. */
.aa-journal__body p,
.aa-journal__body li { font-size: inherit; }
.aa-journal__body h2 { font-size: var(--aa-h2) !important; line-height: 1.25 !important; margin: 1.8em 0 .5em; color: var(--color-heading); }
.aa-journal__body h3 { font-size: var(--aa-h3) !important; margin: 1.5em 0 .4em; color: var(--color-heading); }
.aa-journal__body p { margin: 0 0 1.15em; }
.aa-journal__body ul, .aa-journal__body ol { margin: 0 0 1.3em; padding-inline-start: 1.3em; }
.aa-journal__body li { margin-bottom: .5em; }
.aa-journal__body a { color: var(--aa-accent); text-decoration: underline; text-underline-offset: 3px; }
.aa-journal__body pre { max-width: 100%; overflow: auto; direction: ltr; text-align: left; padding: 16px; border-radius: var(--aa-r-sm); background: var(--aa-surface-2); }
.aa-journal__body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.aa-journal__body img { border-radius: var(--aa-r); height: auto; }
.aa-journal__body figure { margin: 1.6em 0; }
.aa-journal__body figcaption { font-size: 1.3rem; color: var(--color-body); opacity: .85; margin-top: .6em; }

.aa-takeaway {
  max-width: var(--aa-measure-narrow);
  margin: 2em 0;
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid color-mix(in srgb, var(--aa-accent) 34%, var(--aa-line));
  border-radius: var(--aa-r);
  background: color-mix(in srgb, var(--aa-accent) 8%, transparent);
}
.aa-takeaway h2 { font-size: var(--aa-h3) !important; margin: 0 0 .5em !important; }
.aa-takeaway p { font-size: 1.6rem; margin: 0; line-height: 1.65; }
.aa-takeaway__list { margin: 0; padding-inline-start: 1.4em; display: grid; gap: .55em; }
.aa-takeaway__list li { font-size: 1.6rem; line-height: 1.6; color: var(--color-body); }
.aa-takeaway__list li::marker { color: var(--aa-accent); font-weight: 700; }

.aa-relprod {
  max-width: var(--aa-measure-narrow);
  margin: 2em 0;
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--aa-line); border-radius: var(--aa-r); background: var(--aa-surface);
}
.aa-relprod p.aa-kicker { margin-bottom: .4em; }
.aa-relprod h2 { font-size: var(--aa-h3) !important; margin: 0 0 .4em !important; }
.aa-relprod__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 1em 0 0; }

.aa-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2em 0; }
.aa-share__lbl { font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-body); }
[dir="rtl"] .aa-share__lbl { letter-spacing: 0; text-transform: none; }
.aa-share__status { font-size: 1.3rem; color: var(--aa-accent); min-height: 1em; }

.aa-author {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  max-width: var(--aa-measure-narrow);
  margin: 2.5em 0;
  padding: clamp(18px, 2.6vw, 26px);
  border-top: 2px solid var(--aa-line);
}
.aa-author h2 { font-size: var(--aa-h3) !important; margin: 0 0 .4em !important; flex-basis: 100%; }
.aa-author p { font-size: 1.5rem; margin: 0 0 .8em; flex-basis: 100%; }

.aa-artnav {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  margin: 2em 0; padding-top: 1.5em; border-top: 1px solid var(--aa-line);
}
.aa-artnav a { font-size: 1.4rem; }

/* =============================================================== footer === */
/* A short label — Arabic "نبذة" is four glyphs — left these 34px wide, under
   the 44px target, on every Arabic page. The minimum applies to both axes. */
.aa-foot__nav a, .aa-foot__lang a {
  min-height: var(--aa-tap);
  min-width: var(--aa-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 6px;
}
.aa-hdr .primary-menu > li > a,
.primary-menu.nav-pills > li > a { min-width: var(--aa-tap); text-align: center; }

/* ============================================== case-study page tightening = */
.aa-case-demo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--aa-line); border-radius: var(--aa-r-lg);
  background: var(--aa-surface);
}
.aa-case-demo h2 { margin: 0; font-size: var(--aa-h3) !important; }

/* ============================================================== motion ==== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .aa-card__in:hover { transform: none; }
}

/* ============================================ contrast repairs (measured) = */
/* The footer language pill used the identity blue on a dark panel (2.6:1). */
.aa-foot__lang a[aria-current="true"] { background: var(--aa-accent-soft); color: var(--aa-accent); }
/* Kicker text on light needed the deeper tone to clear 4.5:1 on white. */
body.white-version .aa-kicker { color: var(--aa-accent); }

/* ================================================ print (CV-style output) = */
@media print {
  header, footer, .aa-share, .aa-artnav, .aa-filters, .aa-totop { display: none !important; }
  .aa-journal, main .e-con.e-parent > .e-con-inner { padding-inline: 0 !important; }
  body { background: #fff; color: #000; }
}

/* homepage capability strip */
.aa-caps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--aa-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.aa-caps li { min-width: 0; padding-top: 14px; border-top: 2px solid var(--aa-line); }
.aa-caps h3 { font-size: 1.7rem !important; line-height: 1.3 !important; margin: 0 0 .4em; }
.aa-caps p { font-size: 1.5rem; color: var(--color-body); line-height: 1.55; margin: 0; }
.aa-caps__more { margin-top: var(--aa-gap); }
.aa-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--aa-gap); }
.aa-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--aa-tap); min-height: var(--aa-tap); padding: 0 12px;
  border: 1px solid var(--aa-line); border-radius: var(--aa-r-sm);
  color: var(--color-body); text-decoration: none; font-size: 1.4rem;
}
.aa-pagination .page-numbers.current { background: var(--aa-accent); border-color: var(--aa-accent); color: #0b1220; }
body.white-version .aa-pagination .page-numbers.current { color: #fff; }
.aa-related { margin-top: 2.5em; }

/* ============================ the appearance popover stays in the viewport ==
   The panel is 244px wide and hangs from a 44px button at the end of the menu.
   In Arabic that button sits near the left edge, and the panel was anchored to
   open further left still — 98px past the edge at 1280px, which made the page
   scroll sideways. It opens inward instead, and is clamped so it can never be
   wider than the space available. The parent theme's overflow mask had been
   hiding this; the mask is gone, so the cause is fixed. */
.aa-pop {
  max-width: min(244px, calc(100vw - 2 * var(--aa-gutter)));
}
[dir="rtl"] .aa-pop {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* ------------------------------------------------- appearance in the drawer
   The header copy of this control sits in `.mainmenu-nav`, which the theme
   hides below 1200px — so on a phone or tablet there was no way to reach
   dark/light or the accent at all. The drawer now carries the same markup,
   shown inline: a floating popover inside an off-canvas panel has nothing to
   float over, and would be clipped by the panel's own scrolling. */
.popup-mobile-menu .aa-hdr__wrap--inline {
  display: block;
  width: 100%;
  margin-block: 4px 8px;
}
.popup-mobile-menu .aa-hdr__wrap--inline .aa-hdr__btn {
  /* the panel is already open; a toggle for it would be a control that does
     nothing, so it is removed from the page rather than merely hidden */
  display: none !important;
}
.popup-mobile-menu .aa-hdr__wrap--inline .aa-pop {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  min-width: 0;
  width: 100%;
  padding: 14px;
  box-shadow: none;
  background: color-mix(in srgb, var(--color-darker) 70%, transparent);
}
body.white-version .popup-mobile-menu .aa-hdr__wrap--inline .aa-pop {
  background: color-mix(in srgb, #fff 70%, transparent);
}
.popup-mobile-menu .aa-hdr__wrap--inline .aa-seg button,
.popup-mobile-menu .aa-hdr__wrap--inline .aa-reset {
  min-height: var(--aa-tap);
}
.popup-mobile-menu .aa-hdr__wrap--inline .aa-swatch {
  width: var(--aa-tap);
  height: var(--aa-tap);
}

/* ============================================ About: one line of work =====
   Replaces the two-sides pill panel. A single rule runs down the section and
   each stage hangs off it, so the three read as consecutive parts of one role
   rather than three separate offerings. The rule is drawn on the list, not on
   the items, so it cannot break between them.
   ------------------------------------------------------------------------- */
.aa-spine { max-width: var(--aa-max); margin-inline: auto; }
.aa-spine__head { max-width: 62ch; margin-bottom: clamp(26px, 3.4vw, 44px); }
.aa-spine__lede {
  font-size: clamp(1.6rem, 1.55rem + .2vw, 1.75rem);
  line-height: 1.65;
  color: var(--color-body);
  margin: .6em 0 0;
}

.aa-spine__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
}
/* the spine itself */
.aa-spine__list::before {
  content: "";
  position: absolute;
  inset-block: 14px 14px;
  inset-inline-start: 21px;
  inline-size: 2px;
  background: linear-gradient(180deg,
    var(--aa-accent),
    color-mix(in srgb, var(--aa-accent) 22%, transparent));
  border-radius: 2px;
}

.aa-spine__stage {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 26px);
  align-items: start;
}
.aa-spine__node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--aa-surface);
  border: 2px solid color-mix(in srgb, var(--aa-accent) 35%, transparent);
  color: var(--aa-accent);
  font-family: var(--aa-ff-head);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: border-color .3s var(--aa-ease), background .3s var(--aa-ease),
              color .3s var(--aa-ease), transform .3s var(--aa-ease);
}
.aa-spine__stage.is-open .aa-spine__node {
  background: var(--aa-accent);
  border-color: var(--aa-accent);
  color: #fff;
  transform: scale(1.06);
}

.aa-spine__body { min-width: 0; padding-block-start: 2px; }
.aa-spine__label {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aa-accent);
  margin: 0 0 .35em;
}
[dir="rtl"] .aa-spine__label { letter-spacing: 0; }
.aa-spine__t {
  font-size: var(--aa-h3);
  line-height: 1.3;
  margin: 0 0 .4em;
  color: var(--color-heading);
  text-wrap: balance;
}
.aa-spine__d {
  font-size: 1.55rem;
  line-height: 1.68;
  color: var(--color-body);
  max-width: 60ch;
  margin: 0;
}
.aa-spine__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 1em 0 0;
  padding: 0;
}
.aa-spine__items li {
  font-size: 1.3rem;
  line-height: 1.3;
  padding: 8px 13px;
  border: 1px solid var(--aa-line);
  border-radius: var(--aa-r-pill);
  background: var(--aa-surface);
  color: var(--color-body);
}

/* Selection: the chosen stage brings its detail forward. Only applied once the
   script has marked the section, so with JavaScript blocked all three stages
   render fully open and nothing is dimmed. */
html.aa-anim .aa-spine[data-aa-ready] .aa-spine__stage { cursor: pointer; }
html.aa-anim .aa-spine[data-aa-ready] .aa-spine__stage .aa-spine__d,
html.aa-anim .aa-spine[data-aa-ready] .aa-spine__stage .aa-spine__items {
  opacity: .5;
  transition: opacity .3s var(--aa-ease);
}
html.aa-anim .aa-spine[data-aa-ready] .aa-spine__stage.is-open .aa-spine__d,
html.aa-anim .aa-spine[data-aa-ready] .aa-spine__stage.is-open .aa-spine__items { opacity: 1; }
.aa-spine[data-aa-ready] .aa-spine__stage:focus-visible {
  outline: 3px solid var(--aa-accent);
  outline-offset: 6px;
  border-radius: 10px;
}

.aa-spine__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding-block-start: clamp(18px, 2vw, 26px);
  border-block-start: 1px solid var(--aa-line);
  font-size: 1.5rem;
  color: var(--color-body);
}
.aa-spine__cta {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--aa-tap);
  font-weight: 600;
  color: var(--aa-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.aa-spine__cta:hover, .aa-spine__cta:focus-visible { border-bottom-color: currentColor; }
[dir="rtl"] .aa-spine__cta svg { transform: scaleX(-1); }

@media (max-width: 560px) {
  .aa-spine__stage { grid-template-columns: 36px minmax(0, 1fr); }
  .aa-spine__node { inline-size: 36px; block-size: 36px; font-size: 1.2rem; }
  .aa-spine__list::before { inset-inline-start: 17px; }
  .aa-spine__cta { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aa-spine__node { transition: none; }
  .aa-spine__stage.is-open .aa-spine__node { transform: none; }
  html.aa-anim .aa-spine[data-aa-ready] .aa-spine__stage .aa-spine__d,
  html.aa-anim .aa-spine[data-aa-ready] .aa-spine__stage .aa-spine__items {
    opacity: 1;
    transition: none;
  }
}