/* Custom styling for the public site. Sits on top of Vuexy core.css. */

.hero-section {
  padding: 5rem 0 4rem;
}
.hero-section .hero-badge {
  display: inline-block;
  margin-bottom: 1rem;
}
.section-py {
  padding: 4rem 0;
}
.footer-link {
  color: var(--bs-secondary-color);
  text-decoration: none;
}
.footer-link:hover {
  color: var(--bs-primary);
}
.service-card {
  height: 100%;
  transition: box-shadow .2s ease, transform .2s ease;
  border: 1px solid var(--bs-border-color);
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08);
}
.service-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  background: rgba(var(--aa-accent-rgb), .12);
  color: var(--bs-primary);
  font-size: 1.5rem;
}
.pricing-card.featured {
  border: 2px solid var(--bs-primary);
}
.pricing-price {
  font-size: 2rem;
  font-weight: 700;
}
.brief-field + .brief-field {
  margin-top: 1.25rem;
}
.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--aa-accent);
  color: var(--aa-accent-contrast);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Dark mode palette override (near-black, built around #09090b).
 * Overrides Vuexy's default dark surface variables. Loaded after core.css so
 * these win by source order. Cards/dropdowns/modals derive from --bs-paper-bg,
 * so the hierarchy cascades automatically.
 * ------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  /* Base page background — darkest layer */
  --bs-body-bg: #09090b;
  --bs-body-bg-rgb: 9, 9, 11;

  /* Elevated surfaces: cards, dropdowns, modals, navbar, footer */
  --bs-paper-bg: #161619;
  --bs-paper-bg-rgb: 22, 22, 25;
  --bs-card-bg: #161619;

  /* Sidebar / vertical menu — sits between body and cards */
  --bs-menu-bg: #0f0f12;

  /* Subtle recessed panels (bg-body-tertiary), table hover/striped */
  --bs-tertiary-bg: #1c1c20;
  --bs-tertiary-bg-rgb: 28, 28, 32;

  /* Secondary surfaces */
  --bs-secondary-bg: #232327;
  --bs-secondary-bg-rgb: 35, 35, 39;

  /* Borders — subtle but visible on the darker background */
  --bs-border-color: #2a2a30;

  /* Text and contrast adjustments */
  --bs-body-color: #f1f1f3;
  --bs-body-color-rgb: 241, 241, 243;
  --bs-secondary-color: #c3c3c9;
  --bs-secondary-color-rgb: 195, 195, 201;
  --bs-heading-color: #ffffff;
  --bs-heading-color-rgb: 255, 255, 255;
}

/* ---------------------------------------------------------------------------
 * Brand primary colour in DARK mode only.
 * Day mode keeps Vuexy purple (#7367f0); night mode uses brand lime #d8f831.
 * Lime is a light colour, so foreground on solid primary is near-black.
 * ------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --bs-primary: #d8f831;
  --bs-primary-rgb: 216, 248, 49;
  /* Re-resolve the accent tokens against THIS scope's primary. Without this,
     --aa-accent stays fixed to :root's (light) primary and nested dark scopes
     — e.g. the hero forced to dark over its video — keep the light accent. */
  --aa-accent: var(--bs-primary);
  --aa-accent-rgb: var(--bs-primary-rgb);
  --aa-ink: var(--aa-accent);
  --aa-ink-rgb: var(--aa-accent-rgb);
  --bs-primary-contrast: #09090b;        /* text on solid primary + accent fill */
  --bs-primary-bg-subtle: #2c3308;
  --bs-primary-border-subtle: #59661a;
  --bs-primary-text-emphasis: #e4fa6a;

  /* Links derive from primary in Vuexy's dark theme */
  --bs-link-color: #d8f831;
  --bs-link-color-rgb: 216, 248, 49;
  --bs-link-hover-color: #c7e42d;
  --bs-link-hover-color-rgb: 199, 228, 45;
}

/* Solid primary buttons in dark mode — premium monochromatic Vercel/Linear style */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: rgba(255, 255, 255, 0.04);
  --bs-btn-border-color: rgba(255, 255, 255, 0.15);
  --bs-btn-hover-color: #09090b;
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #ffffff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  --bs-btn-active-color: #09090b;
  --bs-btn-active-bg: #e4e4e7;
  --bs-btn-active-border-color: #e4e4e7;
  --bs-btn-disabled-color: rgba(255, 255, 255, 0.35);
  --bs-btn-disabled-bg: rgba(255, 255, 255, 0.02);
  --bs-btn-disabled-border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --bs-btn-box-shadow-rgb: 0, 0, 0; /* Override primary lime shadow */
}


/* Outline primary buttons */
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #d8f831;
  --bs-btn-border-color: #d8f831;
  --bs-btn-hover-color: #09090b;
  --bs-btn-hover-bg: #d8f831;
  --bs-btn-hover-border-color: #d8f831;
  --bs-btn-focus-shadow-rgb: 216, 248, 49;
  --bs-btn-active-color: #09090b;
  --bs-btn-active-bg: #d8f831;
  --bs-btn-active-border-color: #d8f831;
  --bs-btn-disabled-color: #d8f831;
  --bs-btn-disabled-border-color: #d8f831;
}

/* Checkboxes / radios: dark tick/dot on the lime fill (was white) */
[data-bs-theme="dark"] .form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='17' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M3.41667 7L6.33333 9.91667L12.1667 4.08333' stroke='%2309090b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] .form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1.6' fill='%2309090b' /%3e%3c/svg%3e");
}

/* Public CTA blocks that pair .bg-primary with light text stay readable */
[data-bs-theme="dark"] .bg-primary,
[data-bs-theme="dark"] .bg-primary .text-white,
[data-bs-theme="dark"] .bg-primary.text-white {
  color: #09090b !important;
}

/* Active pagination / nav-pills sit on lime in dark — use dark text */
[data-bs-theme="dark"] .pagination .page-item.active .page-link,
[data-bs-theme="dark"] .nav-pills .nav-link.active {
  --bs-pagination-active-color: #09090b;
  --bs-nav-pills-link-active-color: #09090b;
  color: #09090b;
}

/* Frontend sticky navbar (Vuexy-style: floats, then blurs/solidifies on scroll).
   Scoped to .aa-sticky-nav so the admin/customer panel navbars are untouched. */
/* Frosted-glass header — ALWAYS a distinct floating bar (elevated tone +
   blur + saturate + hairline border + soft shadow), not just when scrolled,
   so it clearly separates from the page in both light and dark modes. */
nav.layout-navbar.aa-sticky-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(17, 17, 20, 0.07);
  box-shadow: 0 2px 12px rgba(17, 17, 20, 0.04);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
[data-bs-theme="dark"] nav.layout-navbar.aa-sticky-nav {
  /* A touch lighter than the #09090b page → reads as elevated glass */
  background-color: rgba(28, 28, 33, 0.60);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
/* Inner navbar stays transparent so the frosted OUTER bar shows through
   (overrides Vuexy's front-page.css which fills it with a solid paper bg). */
nav.layout-navbar.aa-sticky-nav .landing-navbar,
nav.layout-navbar.aa-sticky-nav.navbar-active .landing-navbar {
  background-color: transparent !important;
  box-shadow: none !important;
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease, margin .25s ease;
}
/* Scrolled: a touch more solid + deeper floating shadow for depth */
nav.layout-navbar.aa-sticky-nav.navbar-active {
  background-color: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 8px 30px rgba(17, 17, 20, 0.09) !important;
}
[data-bs-theme="dark"] nav.layout-navbar.aa-sticky-nav.navbar-active {
  background-color: rgba(22, 22, 26, 0.80) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}
nav.layout-navbar.aa-sticky-nav.navbar-active .landing-navbar {
  margin-block-start: .5rem;
}

/* Vertical menu scrolling. We force native overflow so the menu always
   scrolls, but Vuexy also attaches PerfectScrollbar — running both leaves two
   scrollbars: the native one steals 4px of width (the visible "shift"/kayma)
   while PerfectScrollbar draws its own rail on top. Fix: keep ONE native
   scrollbar, reserve its gutter so nothing shifts, hide the duplicate PS rail,
   and tint it a muted grey instead of the heavy brand colour. */
#layout-menu .menu-inner {
  overflow-y: auto !important;
  scrollbar-gutter: stable;                 /* reserve the track -> no content shift */
  scrollbar-width: thin;                    /* Firefox */
  scrollbar-color: rgba(var(--bs-body-color-rgb), .22) transparent;
}
#layout-menu .menu-inner::-webkit-scrollbar { width: 6px; }
#layout-menu .menu-inner::-webkit-scrollbar-track { background: transparent; }
#layout-menu .menu-inner::-webkit-scrollbar-thumb {
  background: rgba(var(--bs-body-color-rgb), .18);
  border-radius: 999px;
}
#layout-menu .menu-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--bs-body-color-rgb), .32);
}
/* Silence PerfectScrollbar's duplicate rails — native handles the scroll now. */
#layout-menu .ps__rail-x,
#layout-menu .ps__rail-y { display: none !important; }

/* Theme-specific logo visibility */
[data-bs-theme="light"] .logo-dark {
  display: none !important;
}
[data-bs-theme="dark"] .logo-light {
  display: none !important;
}

/* =====================================================================
   Shared Premium Style System (from landing.css)
   ===================================================================== */
/* Brand accent tokens available site-wide (theme-adaptive: purple / lime).
   Defined on :root so every page using aa-* classes works, with or without a
   .aa-landing wrapper. */
:root {
  --aa-accent: var(--bs-primary);
  --aa-accent-rgb: var(--bs-primary-rgb);
  /* Accent-as-text (links, icons, underlines). brand_color_style() overrides
     this per mode; without a brand colour set it just follows the fill, which
     is the original single-colour behaviour. */
  --aa-ink: var(--aa-accent);
  --aa-ink-rgb: var(--aa-accent-rgb);
  /* Readable text ON the accent fill. Must be a var reference, not a literal:
     this :root block sits AFTER [data-bs-theme="dark"] in this file and has the
     same specificity, so a literal here would win there too and paint white
     text on the lime fill. Referencing --bs-primary-contrast lets each scope
     re-resolve it (dark sets #09090b); brand_color_style() overrides both. */
  --aa-accent-contrast: var(--bs-primary-contrast, #fff);
}
/* Prevent horizontal overflow on EVERY page (not just .aa-landing). Decorative
   .aa-glow blobs bleed past the viewport edge on hero sections; clipping only
   <body> left <html> able to grow, which made iOS Safari zoom the whole page
   (and therefore the header + drawer) out on those pages. Clip <html> too.
   overflow-x:clip (not hidden) keeps position:sticky on the navbar working. */
html { overflow-x: clip; }
html, body { max-width: 100%; }
.aa-landing { overflow-x: clip; }

/* Section rhythm */
/* Vertical rhythm.
   One scale drives every public page. Sections separate by (bottom + next top),
   so the numbers below are chosen for the gap they create, not in isolation:
     desktop  6.25rem + 5rem    = 180px between stacked blocks
     tablet   5rem    + 4rem    = 144px
     small    4rem    + 2.75rem = 108px
     phone    3.5rem  + 2.25rem =  92px
   Only the second number changes per step: the base padding also sets the page's
   own top and bottom margins, which do not need to grow just because the blocks
   inside want more air. */
.aa-section { padding: 6.25rem 0; position: relative; }
.aa-section.pt-0 { padding-top: 5rem !important; }
/* A section sitting directly under another one only needs the shorter top
   padding — otherwise two full paddings stack and that pair drifts out of
   rhythm with the rest of the page (it read as 200px against 160px everywhere
   else). This makes the spacing correct by default, so a missing .pt-0 in the
   markup can no longer break the flow. A section after a different element
   (the ticker band, the hero) keeps its full padding, which is what separates
   those from the content around them. */
.aa-section + .aa-section { padding-top: 5rem; }

@media (max-width: 991.98px) {
  .aa-section { padding: 5rem 0; }
  .aa-section.pt-0,
  .aa-section + .aa-section { padding-top: 4rem; }
  .aa-section.pt-0 { padding-top: 4rem !important; }
}
@media (max-width: 767.98px) {
  .aa-section { padding: 4rem 0; }
  .aa-section.pt-0,
  .aa-section + .aa-section { padding-top: 2.75rem; }
  .aa-section.pt-0 { padding-top: 2.75rem !important; }
}

.aa-eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem .85rem;
  border-radius: 50rem;
  color: var(--aa-ink);
  background: rgba(var(--aa-accent-rgb), .12);
  border: 1px solid rgba(var(--aa-accent-rgb), .25);
  margin-bottom: 1rem;
}
.aa-section-title { font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.aa-muted { color: var(--bs-secondary-color); }
/* WCAG AA: the stock light-theme secondary grey (#acaab1) is too faint on white
   (~2.3:1). Darken muted/secondary text on the public site for legible contrast. */
[data-bs-theme="light"] body.aa-landing { --bs-secondary-color: #5a5d69; }

/* Glow blobs (soft, blurred radial brand-coloured lights) */
.aa-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .30;
  z-index: 0;
  pointer-events: none;
}
[data-bs-theme="dark"] .aa-glow { opacity: .15; }
.aa-glow--accent { background: rgba(var(--aa-accent-rgb), .35); }
.aa-glow--violet { background: rgba(45, 212, 191, .22); } /* teal — replaced Vuexy purple to stay on-brand */
.aa-glow--cyan   { background: rgba(3, 195, 236, .20); }

/* Glow buttons */
.btn.aa-btn-glow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn.aa-btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(var(--aa-accent-rgb), 0.25);
}
[data-bs-theme="dark"] .btn.aa-btn-glow:hover {
  box-shadow: 0 6px 20px rgba(var(--aa-accent-rgb), 0.3);
}
/* Primary CTAs pop in the brand colour so they clearly outrank the secondary
   outline buttons (fixes the inverted button hierarchy in dark mode). */
[data-bs-theme="dark"] .btn-primary.aa-btn-glow {
  --bs-btn-color: var(--aa-accent-contrast); --bs-btn-bg: var(--aa-accent); --bs-btn-border-color: var(--aa-accent);
  --bs-btn-hover-color: var(--aa-accent-contrast); --bs-btn-hover-bg: var(--aa-accent); --bs-btn-hover-border-color: var(--aa-accent);
  --bs-btn-active-color: var(--aa-accent-contrast); --bs-btn-active-bg: var(--aa-accent); --bs-btn-active-border-color: var(--aa-accent);
  --bs-btn-box-shadow-rgb: var(--aa-accent-rgb);
}


/* Glassmorphic/Premium Cards */
.aa-card {
  position: relative;
  height: 100%;
  background: var(--bs-paper-bg, var(--bs-body-bg));
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  padding: 1.75rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  z-index: 1;
}
.aa-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--aa-accent-rgb), .25);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(var(--aa-accent-rgb), 0.05);
}
a.aa-card, a.aa-card:hover { text-decoration: none; color: inherit; }

.aa-card-static {
  position: relative;
  background: var(--bs-paper-bg, var(--bs-body-bg));
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  padding: 1.75rem;
  z-index: 1;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.aa-card-static:hover {
  border-color: rgba(var(--aa-accent-rgb), 0.3);
}

.aa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: .85rem;
  font-size: 1.6rem;
  color: var(--aa-ink);
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  margin-bottom: 1.1rem;
  /* colour is in here so a glyph that flips on hover cross-fades with its
     background instead of snapping ahead of it — otherwise the icon spends the
     transition invisible against the old surface. */
  transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}
.aa-card:hover .aa-icon {
  transform: scale(1.04);
  background: rgba(var(--aa-accent-rgb), 0.08);
  border-color: rgba(var(--aa-accent-rgb), 0.2);
}
/* Smaller icon tile (sector challenge cards) */
.aa-icon--sm { width: 44px; height: 44px; font-size: 1.25rem; border-radius: .7rem; margin-bottom: 0; }
.aa-card h5 { font-weight: 700; margin-bottom: .35rem; }

/* Custom bullet/check style */
.aa-card .aa-check { color: var(--aa-ink); }

/* Small brand-tinted category tag (help centre search results etc.) */
.aa-tag {
  display: inline-flex; align-items: center;
  padding: .18rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; line-height: 1;
  color: var(--aa-ink);
  background: rgba(var(--aa-accent-rgb), .12);
  border: 1px solid rgba(var(--aa-accent-rgb), .22);
}
/* Knowledge-base article links: subtle lime shift + nudge on hover */
.aa-kb-link { transition: color .18s ease, transform .18s ease; }
.aa-kb-link:hover { color: var(--aa-ink); transform: translateX(2px); }

/* =====================================================================
   Service page — optional, admin-toggleable sections
   ===================================================================== */
/* Trust bar (thin strip under the hero) */
.aa-trustbar { border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); background: var(--bs-paper-bg, rgba(255,255,255,.02)); }
.aa-trustbar-list { list-style: none; margin: 0; padding: .9rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; }
.aa-trustbar-list li { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--bs-heading-color); font-weight: 500; }
.aa-trustbar-list i { color: var(--aa-ink); font-size: 1.1rem; }

/* Results / proof band */
.aa-stats-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.25rem; text-align: center;
  border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 2rem 1.5rem; background: var(--bs-paper-bg, rgba(255,255,255,.02)); }
.aa-stat-num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1; color: var(--aa-ink); }
.aa-stat-label { margin-top: .5rem; font-size: .9rem; color: var(--bs-secondary-color); }

/* Who it's for / Good to know */
.aa-fit-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: .6rem; font-size: 1.15rem; }
.aa-fit-ic--yes { color: var(--aa-ink); background: rgba(var(--aa-accent-rgb), .12); }
.aa-fit-ic--no { color: var(--bs-secondary-color); background: rgba(var(--bs-body-color-rgb), .06); }
.aa-fit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.aa-fit-list li { display: flex; align-items: flex-start; gap: .6rem; color: var(--bs-heading-color); }
.aa-fit-list i { color: var(--aa-ink); font-size: 1.05rem; margin-top: .15rem; flex-shrink: 0; }
.aa-fit-list--muted li { color: var(--bs-secondary-color); }
.aa-fit-list--muted i { color: var(--bs-secondary-color); }

/* Timeline (horizontal on desktop, stacked on mobile) */
.aa-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; position: relative; }
.aa-timeline-step { position: relative; padding-top: 1.5rem; }
.aa-timeline-step::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: linear-gradient(to right, rgba(var(--aa-accent-rgb), .4), rgba(var(--aa-accent-rgb), .1)); }
.aa-timeline-step:last-child::before { background: rgba(var(--aa-accent-rgb), .25); }
.aa-timeline-dot { position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--aa-ink); box-shadow: 0 0 0 4px rgba(var(--aa-ink-rgb), .15); }
.aa-timeline-phase { font-weight: 700; color: var(--bs-heading-color); margin-bottom: .3rem; }
@media (max-width: 767.98px) {
  .aa-timeline { grid-template-columns: 1fr; gap: 0; padding-left: 1.25rem; }
  .aa-timeline-step { padding: 0 0 1.5rem 1.25rem; }
  .aa-timeline-step::before { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; background: rgba(var(--aa-accent-rgb), .25); }
  .aa-timeline-dot { top: 4px; }
}

/* Tools & platforms — pill chips */
.aa-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.aa-tool { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px;
  border: 1px solid var(--bs-border-color); background: var(--bs-paper-bg, rgba(255,255,255,.02));
  color: var(--bs-heading-color); font-size: .9rem; font-weight: 500; transition: border-color .18s ease, transform .18s ease; }
.aa-tool:hover { border-color: rgba(var(--aa-accent-rgb), .45); transform: translateY(-2px); }
.aa-tool i { color: var(--aa-ink); font-size: 1.1rem; }

/* =====================================================================
   Portfolio — cards + project hero
   ===================================================================== */
.aa-portfolio-card { padding: 0 !important; overflow: hidden; }
.aa-portfolio-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bs-tertiary-bg); }
.aa-portfolio-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.aa-portfolio-card:hover .aa-portfolio-media img { transform: scale(1.06); }
.aa-portfolio-body { padding: 1.25rem 1.35rem 1.4rem; }
.aa-portfolio-client { font-family: 'Space Grotesk', sans-serif; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--aa-ink); font-weight: 600; }
/* Project detail hero image */
.aa-portfolio-hero-img { border-radius: 1rem; overflow: hidden; border: 1px solid var(--bs-border-color); box-shadow: 0 24px 60px -30px rgba(0,0,0,.6); }
.aa-portfolio-hero-img img { width: 100%; height: auto; display: block; }
/* Badge used statically (in the detail header) */
.aa-blog-badge.position-static { position: static; }

/* Portfolio gallery — horizontal, swipeable filmstrip (no vertical stacking) */
.aa-gallery-wrap { position: relative; }
.aa-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--bs-border-color);
  background: var(--bs-paper-bg, rgba(21,21,25,.92)); color: var(--bs-heading-color);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer;
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.55); backdrop-filter: blur(4px);
  transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.aa-gallery-arrow:hover { border-color: rgba(var(--aa-accent-rgb), .55); color: var(--aa-ink); }
.aa-gallery-arrow:disabled { opacity: .3; pointer-events: none; }
.aa-gallery-prev { left: -.5rem; }
.aa-gallery-next { right: -.5rem; }
@media (max-width: 767.98px) {
  .aa-gallery-arrow { width: 38px; height: 38px; font-size: 1.2rem; }
  .aa-gallery-prev { left: .35rem; } .aa-gallery-next { right: .35rem; }
}
.aa-gallery {
  display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: .25rem .25rem 1rem; margin: 0 -.25rem;
  scrollbar-width: thin; scrollbar-color: rgba(var(--bs-body-color-rgb), .25) transparent;
}
.aa-gallery::-webkit-scrollbar { height: 8px; }
.aa-gallery::-webkit-scrollbar-thumb { background: rgba(var(--bs-body-color-rgb), .22); border-radius: 999px; }
/* Mouse drag-to-scroll affordance (desktop) */
.aa-gallery { cursor: grab; }
.aa-gallery.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.aa-gallery.is-dragging img { pointer-events: none; }
.aa-gallery-item img { -webkit-user-drag: none; user-select: none; }
.aa-gallery-item {
  flex: 0 0 auto; scroll-snap-align: center; width: min(78%, 620px);
  aspect-ratio: 16 / 10; border-radius: 1rem; overflow: hidden; position: relative;
  padding: 0; border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg);
  cursor: zoom-in; box-shadow: 0 24px 60px -32px rgba(0,0,0,.55);
}
.aa-gallery--single .aa-gallery-item { width: 100%; scroll-snap-align: start; }
.aa-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.aa-gallery-item:hover img { transform: scale(1.04); }
.aa-gallery-zoom {
  position: absolute; top: .7rem; right: .7rem; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: 1.1rem; opacity: 0; transition: opacity .2s ease;
}
.aa-gallery-item:hover .aa-gallery-zoom { opacity: 1; }
@media (max-width: 767.98px) {
  .aa-gallery { gap: .75rem; scroll-padding: 0 .25rem; }
  .aa-gallery-item { width: 86%; }
}

/* Lightbox for the gallery (prev/next, keyboard, swipe) */
.aa-lb {
  position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.92); padding: 2rem;
}
.aa-lb.is-open { display: flex; }
.aa-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .75rem; max-width: 94vw; }
.aa-lb-fig img { max-width: 94vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: .5rem; box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.aa-lb-cap { color: rgba(255,255,255,.82); font-size: .9rem; text-align: center; margin: 0; }
.aa-lb-close, .aa-lb-nav {
  position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: background .18s ease;
}
.aa-lb-close:hover, .aa-lb-nav:hover { background: rgba(255,255,255,.24); }
.aa-lb-close { top: 1rem; right: 1.15rem; width: 44px; height: 44px; border-radius: 50%; font-size: 1.7rem; }
.aa-lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; font-size: 2rem; }
.aa-lb-prev { left: 1rem; } .aa-lb-next { right: 1rem; }
@media (max-width: 575.98px) {
  .aa-lb { padding: 1rem; }
  .aa-lb-nav { width: 42px; height: 42px; font-size: 1.6rem; } .aa-lb-prev { left: .4rem; } .aa-lb-next { right: .4rem; }
}

/* Service card with image banner (premium) --------------------------------- */
.aa-service-card { padding: 0; overflow: hidden; }
/* No lime on hover — a lime border tints the clipped rounded corners as green
   slivers. Keep a clean neutral border + soft dark shadow only. */
.aa-service-card:hover {
  border-color: var(--bs-border-color) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45) !important;
}
.aa-service-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bs-tertiary-bg);
  /* Own compositing layer keeps the rounded clip stable while the image
     scales, preventing the flickering 1px seam at the bottom edge. */
  transform: translateZ(0);
}
.aa-service-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* Base scale >1 keeps the image edges just outside the clip, so no dark
     hairline appears at the image/body boundary on hover. */
  transform: scale(1.02);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.aa-service-card:hover .aa-service-media img { transform: scale(1.08); }
/* Shine sweep on hover. */
.aa-service-media::before {
  content: ''; position: absolute; top: 0; left: -75%; width: 55%; height: 100%; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skewX(-18deg); transition: left .75s ease; pointer-events: none;
}
.aa-service-card:hover .aa-service-media::before { left: 130%; }
/* Icon chip resting in the image's lower-left (sits above the gradient). */
.aa-service-icon {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 3; margin: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
/* This chip sits directly on the service image — there is no scrim behind it —
   so the hover surface must stay OPAQUE. A translucent tint let the artwork
   through and the glyph's contrast became whatever the image happened to be
   (invisible on the dark demo art). Solid near-black + white glyph reads over
   any uploaded image; the lime stays on the border. */
.aa-service-card:hover .aa-service-icon {
  transform: scale(1.05);
  background: rgba(9, 9, 11, .82);
  border-color: rgba(var(--aa-accent-rgb), .55);
  color: #fff;
}
.aa-service-body { padding: 1.5rem 1.5rem 1.6rem; }
.aa-service-body h5 { font-weight: 700; margin-bottom: .4rem; }

/* Multi-step brief wizard ---------------------------------------------------- */
.aa-wizard-nav { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; padding: 0; margin: 0 0 1.5rem; }
.aa-wizard-nav li { display: inline-flex; align-items: center; gap: .55rem; color: var(--bs-secondary-color); font-size: .92rem; font-weight: 500; }
.aa-wizard--js .aa-wizard-nav li { cursor: pointer; }
.aa-wizard-dot {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg);
  font-size: .85rem; font-weight: 600;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.aa-wizard-nav li.is-active { color: var(--bs-heading-color); }
.aa-wizard-nav li.is-active .aa-wizard-dot,
.aa-wizard-nav li.is-done .aa-wizard-dot { background: var(--aa-accent); border-color: var(--aa-accent); color: var(--aa-accent-contrast); }
.aa-wizard-nav li.is-done .aa-wizard-dot { font-size: 0; }
.aa-wizard-nav li.is-done .aa-wizard-dot::after { content: '✓'; font-size: .9rem; }
@media (max-width: 575.98px) { .aa-wizard-label { display: none; } }
.aa-wizard-actions { display: flex; align-items: center; gap: .75rem; margin-top: 1.75rem; }

/* Progressive enhancement: step behaviour only when JS marks the form. */
.aa-wizard--js .aa-wizard-step { display: none; }
.aa-wizard--js .aa-wizard-step.is-active { display: block; animation: aa-wizard-fade .3s ease; }
@keyframes aa-wizard-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.aa-wizard--js [data-wizard-submit] { display: none; }
.aa-wizard--js.is-first [data-wizard-prev] { visibility: hidden; }
.aa-wizard--js.is-last [data-wizard-next] { display: none; }
.aa-wizard--js.is-last [data-wizard-submit] { display: inline-flex; }
/* No-JS: hide stepper + step buttons, whole thing stays one long form. */
.aa-wizard:not(.aa-wizard--js) .aa-wizard-nav,
.aa-wizard:not(.aa-wizard--js) [data-wizard-prev],
.aa-wizard:not(.aa-wizard--js) [data-wizard-next] { display: none; }
@media (prefers-reduced-motion: reduce) { .aa-wizard--js .aa-wizard-step.is-active { animation: none; } }

/* Contact: premium framed map */
.aa-map {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  line-height: 0;
}
.aa-map iframe {
  display: block; width: 100%; height: 440px; border: 0;
  filter: grayscale(.35) contrast(1.03);
  transition: filter .45s ease;
}
.aa-map:hover iframe { filter: none; }
@media (max-width: 991.98px) { .aa-map iframe { height: 380px; } }
@media (max-width: 575.98px) { .aa-map iframe { height: 300px; } }
@media (prefers-reduced-motion: reduce) { .aa-map iframe { transition: none; } }

/* Service detail: framed hero image */
.aa-service-hero-img {
  position: relative; border-radius: 1rem; overflow: hidden;
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}
.aa-service-hero-img img {
  width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

/* Service detail: client-logo marquee (per-service, toggleable) */
.aa-clients {
  overflow: hidden; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.aa-clients-track { display: flex; width: max-content; animation: aa-marquee 34s linear infinite; }
.aa-clients-group { display: flex; align-items: center; }
.aa-client { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 2.4rem; opacity: .8; transition: opacity .25s ease; }
.aa-client span { color: var(--bs-secondary-color); font-size: 1.05rem; }
.aa-client img { max-height: 40px; max-width: 150px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .25s ease, opacity .25s ease; }
.aa-client:hover { opacity: 1; }
.aa-client:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .aa-clients-track { animation: none; } }

/* Step number badge */
.aa-step-num {
  position: relative;
  z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-weight: 700;
  color: var(--aa-ink);
  background: var(--bs-body-bg);
  border: 1.5px solid var(--aa-accent);
  margin-bottom: 1rem;
}

/* Featured card glow ring */
.aa-price { font-weight: 800; letter-spacing: -.02em; }
.aa-card.aa-featured {
  border-color: rgba(var(--aa-accent-rgb), .45);
  box-shadow: 0 0 0 1px rgba(var(--aa-accent-rgb), .2), 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* Customized Premium Form Controls */
.form-control, .form-select {
  border-color: var(--bs-border-color);
  background-color: var(--bs-paper-bg, #fff);
  color: var(--bs-body-color);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Roomier gutters on the index card grids (Services, Industries, Portfolio,
   Packages). The wider gap also narrows the cards a touch — the intent. Scoped
   to a marker class so other .row.g-4 grids keep their spacing; mobile stays
   tight via the small-screen rule elsewhere. */
@media (min-width: 768px) {
  .aa-card-grid.row { --bs-gutter-x: 2.25rem; --bs-gutter-y: 2.25rem; }
}
@media (min-width: 1200px) {
  .aa-card-grid.row { --bs-gutter-x: 2.75rem; --bs-gutter-y: 2.75rem; }
}

/* Breadcrumb links (service/sector/portfolio/blog detail pages). Bootstrap's
   .text-secondary resolves to ~#808390 here → only 3.77:1 on white, under AA.
   Use the body colour (~5.5:1) and the ink on hover. */
.aa-landing .breadcrumb-item a {
  color: var(--bs-body-color) !important;   /* beats Bootstrap's .text-secondary utility (!important) */
  text-decoration: none;
  transition: color .15s ease;
}
.aa-landing .breadcrumb-item a:hover { color: var(--aa-ink) !important; }

/* Focus ring uses the brand ink (olive in light, lime in dark) instead of the
   old hard-coded Vuexy purple, and keeps the paper background so a dark-mode
   input never flashes white on focus. One rule now covers both themes. */
.form-control:focus, .form-select:focus {
  border-color: rgba(var(--aa-ink-rgb), 0.5) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--aa-ink-rgb), 0.18) !important;
  background-color: var(--bs-paper-bg, #fff);
  color: var(--bs-body-color);
}

/* =====================================================================
   FAQ Accordion - Modern Stripe/Linear style
   ===================================================================== */
.aa-faq .accordion-item {
  border: 1px solid var(--bs-border-color);
  border-left: 3px solid transparent;
  border-radius: .75rem !important;
  margin-bottom: .75rem;
  overflow: hidden;
  background: transparent;
  transition: border-color 0.22s ease, background-color 0.22s ease, border-left-color 0.22s ease;
}

.aa-faq .accordion-item:hover {
  border-color: rgba(var(--aa-accent-rgb), 0.25);
}

[data-bs-theme="dark"] .aa-faq .accordion-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.015);
}

/* Active/Open FAQ item styling */
.aa-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-left-color: var(--aa-ink) !important;
  border-color: rgba(var(--aa-accent-rgb), 0.3);
  background-color: rgba(var(--aa-accent-rgb), 0.03) !important;
}

[data-bs-theme="dark"] .aa-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Accordion button styling */
.aa-faq .accordion-button {
  font-weight: 600;
  font-size: 1rem;
  padding: 1.25rem 1.5rem;
  color: var(--bs-heading-color);
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  transition: color 0.22s ease;
}

.aa-faq .accordion-button:hover {
  color: var(--aa-ink);
}

.aa-faq .accordion-button:not(.collapsed) {
  color: var(--bs-heading-color) !important;
}

[data-bs-theme="dark"] .aa-faq .accordion-button:not(.collapsed) {
  color: #ffffff !important;
}

/* Accordion arrow/chevron styling */
.aa-faq .accordion-button::after {
  background: var(--bs-secondary-color) !important;
  transition: transform 0.22s ease-in-out, background-color 0.22s ease;
}

.aa-faq .accordion-button:hover::after {
  background: var(--aa-ink) !important;
}

.aa-faq .accordion-button:not(.collapsed)::after {
  background: var(--bs-heading-color) !important;
}

[data-bs-theme="dark"] .aa-faq .accordion-button:not(.collapsed)::after {
  background: #ffffff !important;
}

/* Accordion body text styling */
.aa-faq .accordion-body {
  padding: 0 1.5rem 1.25rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Sequential process steps cards */
.aa-step-card {
  position: relative;
  height: 100%;
  background: var(--bs-paper-bg, var(--bs-body-bg));
  border: 1px solid var(--bs-border-color);
  border-top: 2px solid var(--aa-accent) !important;
  border-radius: 1rem;
  padding: 1.6rem 1.5rem 1.5rem 1.5rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  z-index: 1;
}

.aa-step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--aa-accent-rgb), .3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(var(--aa-accent-rgb), 0.05);
}

.aa-step-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--aa-accent-contrast);
  background: var(--aa-accent);
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(var(--aa-accent-rgb), 0.25);
}

[data-bs-theme="dark"] .aa-step-card-num {
  box-shadow: 0 2px 10px rgba(var(--aa-accent-rgb), 0.15);
}

/* =====================================================================
   Premium Footer Styling & Contrast Bug Fixes
   ===================================================================== */
/* Reset Vuexy's hardcoded white variables on landing-footer */
.landing-footer {
  background-color: var(--bs-tertiary-bg) !important;
  border-top: 1px solid var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

.landing-footer .text-heading,
.landing-footer h5,
.landing-footer h6 {
  color: var(--bs-heading-color) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.landing-footer p {
  color: var(--bs-secondary-color) !important;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Footer links style & animations */
.landing-footer .footer-link {
  color: var(--bs-secondary-color) !important;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.8;
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  text-decoration: none;
}

.landing-footer .footer-link:hover {
  color: var(--bs-primary) !important;
  opacity: 1 !important;
  transform: translateX(4px);
}

/* Bottom copyright bar separator */
.landing-footer .border-top {
  border-top-color: var(--bs-border-color) !important;
}

.landing-footer .text-body-secondary {
  color: var(--bs-secondary-color) !important;
}

/* Day/Night specific background refinements */
[data-bs-theme="dark"] .landing-footer {
  background-color: #0c0c0e !important; /* Elegant near-black */
}
[data-bs-theme="light"] .landing-footer {
  background-color: #f8f9fa !important; /* Elegant off-white */
}

/* Sparkle SVG Icon Gradient Stops */
.aa-sparkle-stop-1 { stop-color: var(--aa-accent, #7367f0); }
.aa-sparkle-stop-2 { stop-color: #03c3ec; }

[data-bs-theme="dark"] .aa-sparkle-stop-1 { stop-color: #d8f831; }
[data-bs-theme="dark"] .aa-sparkle-stop-2 { stop-color: #7367f0; }

.aa-sparkle-icon {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-footer h5:hover .aa-sparkle-icon {
  transform: rotate(90deg) scale(1.15);
}

/* Status Indicator pulsing dot */
.aa-status-dot {
  --dot: 40, 199, 111;                 /* rgb triplet, drives colour + pulse */
  width: 8px; height: 8px; flex: 0 0 auto;
  background-color: rgb(var(--dot));
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px rgba(var(--dot), 0.6);
  animation: aa-pulse 2s infinite;
}
/* State colours (green/amber/red/blue/grey). The pulse reads --dot, so it
   follows whichever state without a separate keyframe each. */
.aa-status-dot--operational { --dot: 40, 199, 111; }
.aa-status-dot--degraded    { --dot: 255, 159, 67; }
.aa-status-dot--down        { --dot: 234, 84, 85; }
.aa-status-dot--maintenance { --dot: 0, 186, 214; }
.aa-status-dot--info        { --dot: 140, 145, 160; animation: none; }

@keyframes aa-pulse {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--dot), 0.7); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 5px rgba(var(--dot), 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(var(--dot), 0); }
}
@media (prefers-reduced-motion: reduce) { .aa-status-dot { animation: none; } }

/* Footer badge as a button (when the popup is enabled) */
.aa-status-badge--btn {
  display: inline-flex; align-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--bs-secondary-color);
  transition: color .18s ease;
}
.aa-status-badge--btn:hover { color: var(--bs-heading-color); }

/* =====================================================================
   System-status popup — modern status-page look. Theme-aware via tokens;
   each row/banner carries an .aa-status--<state> class that sets --state
   (an rgb triplet) so tints and text colour follow the state automatically.
   ===================================================================== */
.aa-status--operational { --state: 40, 199, 111; }
.aa-status--degraded    { --state: 255, 159, 67; }
.aa-status--down        { --state: 234, 84, 85; }
.aa-status--maintenance { --state: 0, 186, 214; }
.aa-status--info        { --state: 140, 145, 160; }

.aa-status-modal {
  position: relative;
  border: 1px solid var(--bs-border-color);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
}
.aa-status-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  opacity: .55; transition: opacity .15s ease;
}
.aa-status-close:hover { opacity: 1; }

/* Header band tinted by the overall state */
.aa-status-banner {
  display: flex; align-items: center; gap: .85rem;
  padding: 1.4rem 1.5rem;
  background:
    linear-gradient(180deg, rgba(var(--state), .12), rgba(var(--state), .02)),
    var(--bs-modal-bg, var(--bs-body-bg));
  border-bottom: 1px solid var(--bs-border-color);
}
.aa-status-banner .aa-status-dot { width: 11px; height: 11px; }
.aa-status-title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 1.1rem; letter-spacing: -.01em; color: var(--bs-heading-color); line-height: 1.15;
}
.aa-status-sub { font-size: .78rem; color: var(--bs-secondary-color); }

.aa-status-list { display: flex; flex-direction: column; gap: .4rem; padding-top: 1.1rem; }
.aa-status-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem .9rem;
  border-radius: .8rem;
  background: rgba(var(--bs-body-color-rgb), .025);
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.aa-status-row:hover {
  background: rgba(var(--state), .07);
  border-color: rgba(var(--state), .28);
  transform: translateX(2px);
}
.aa-status-name { font-weight: 600; color: var(--bs-heading-color); font-size: .94rem; }
.aa-status-name a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.aa-status-name a:hover { color: rgb(var(--state)); }
.aa-status-name a i { font-size: .8em; opacity: .55; }
.aa-status-value {
  margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: .9rem; color: rgb(var(--state));
  padding: .15rem .6rem; border-radius: 2rem;
  background: rgba(var(--state), .12);
}

/* Footer: a subtle "Live" pulse + last-updated time */
.aa-status-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: .76rem; color: var(--bs-secondary-color);
}
.aa-status-live { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: rgb(40, 199, 111); }
.aa-status-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: rgb(40, 199, 111);
  box-shadow: 0 0 0 0 rgba(40, 199, 111, .6); animation: aa-pulse 2s infinite; --dot: 40, 199, 111;
}
@media (prefers-reduced-motion: reduce) { .aa-status-live-dot { animation: none; } }




/* Mobile nav drawer: keep it rendered off-screen when closed so it slides in
   smoothly (Bootstrap's .collapse would otherwise display:none and kill the
   animation). Frontend navbar only (.landing-nav-menu). */
@media (max-width: 991.98px) {
  .landing-nav-menu.collapse:not(.show) { display: block !important; }
  .landing-nav-menu { z-index: 1090; }
  .landing-menu-overlay { z-index: 1085; }
}

/* CRITICAL: backdrop-filter/filter on an ancestor makes position:fixed children
   anchor to that ancestor instead of the viewport. On mobile the nav contains the
   fixed off-canvas drawer, so disable backdrop-filter below the lg breakpoint —
   otherwise the drawer mis-positions (sticks to the navbar / won't open at top).
   Because the blur is gone on mobile, give the header a SOLID opaque background
   at all times (not just when scrolled) so it stays readable and identical on
   every page — otherwise the homepage hero glow bleeds through the transparent
   header while plainer pages look fine. */
@media (max-width: 991.98px) {
  /* Blur is off on mobile (drawer fix), so use a slightly ELEVATED solid tone
     (paper-bg is lighter than the body) + a soft shadow so the header still
     reads as a distinct floating bar rather than blending into the page. */
  nav.layout-navbar.aa-sticky-nav,
  nav.layout-navbar.aa-sticky-nav.navbar-active {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--bs-paper-bg) !important;
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28) !important;
  }
  /* DEFINITIVE fix — lock the mobile header to a FIXED height in EVERY scroll
     state and on EVERY page. The base bar carries a 16px top margin that the
     scrolled ".navbar-active" state changes, so a page viewed at the top vs one
     you've scrolled ended up a different height. Fixed height + zeroed
     margin/padding removes every source of variance. */
  nav.layout-navbar.aa-sticky-nav .landing-navbar,
  nav.layout-navbar.aa-sticky-nav.navbar-active .landing-navbar {
    background-color: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: 62px !important;
    min-height: 62px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center;
  }
  nav.layout-navbar.aa-sticky-nav > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* The pseudo-element Vuexy adds on scroll must not change the bar either. */
  nav.layout-navbar.aa-sticky-nav::before,
  nav.layout-navbar.aa-sticky-nav.navbar-active::before { display: none !important; }
  nav.layout-navbar.aa-sticky-nav.navbar-active::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* =====================================================================
   Footer social buttons + Floating action buttons (contact FAB, scroll-top)
   ===================================================================== */
.aa-social-btn { transition: transform .2s ease, border-color .2s ease, color .2s ease; }
.aa-social-btn:hover { transform: translateY(-2px); color: var(--aa-ink); border-color: rgba(var(--aa-accent-rgb), .6); }

/* Floating contact FAB (bottom-right) */
.aa-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1035; display: flex; flex-direction: column; align-items: flex-end; transition: opacity .2s ease, visibility .2s ease; }
/* Hide the floating contact button while the mobile drawer is open — it sits
   bottom-right and was overlapping (and swallowing clicks on) the drawer's
   right-hand controls, e.g. the "Auto" theme button. */
body.aa-drawer-open .aa-fab { opacity: 0; visibility: hidden; pointer-events: none; }
.aa-fab-toggle {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--aa-accent); color: var(--aa-accent-contrast);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem;
  box-shadow: 0 10px 26px -6px rgba(var(--aa-accent-rgb), .7); transition: transform .2s ease, box-shadow .2s ease;
}
[data-bs-theme="dark"] .aa-fab-toggle { color: #09090b; }
.aa-fab-toggle:hover { transform: scale(1.06); }
.aa-fab-toggle .aa-fab-icon-close { display: none; }
.aa-fab.open .aa-fab-toggle .aa-fab-icon-open { display: none; }
.aa-fab.open .aa-fab-toggle .aa-fab-icon-close { display: inline-flex; }
.aa-fab-menu {
  display: flex; flex-direction: column; gap: .6rem; margin-bottom: .75rem;
  opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.aa-fab.open .aa-fab-menu { opacity: 1; transform: none; pointer-events: auto; }
.aa-fab-item {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  background: var(--bs-paper-bg, #fff); color: var(--bs-heading-color);
  border: 1px solid var(--bs-border-color); border-radius: 50rem;
  padding: .55rem 1rem .55rem .6rem; font-weight: 600; font-size: .9rem;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.35); white-space: nowrap; transition: transform .15s ease;
}
.aa-fab-item:hover { transform: translateX(-3px); }
.aa-fab-item i { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.15rem; }
.aa-fab-wa i { background: #25D366; }
.aa-fab-call i { background: var(--aa-accent); color: var(--aa-accent-contrast); }
/* Teal — the brand's secondary accent, so email reads as distinct from the
   WhatsApp green and the lime call button. */
.aa-fab-mail i { background: #2dd4bf; color: #09090b; }

/* Back to top (bottom-left) */
.aa-scrolltop {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 1035;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--bs-border-color); background: var(--bs-paper-bg, #fff); color: var(--bs-heading-color);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.aa-scrolltop.show { opacity: 1; visibility: visible; transform: none; }
.aa-scrolltop:hover { color: var(--aa-ink); border-color: rgba(var(--aa-accent-rgb), .6); transform: translateY(-2px); }

/* Scroll-progress ring: the accent arc fills as the page is read. Uses --aa-ink
   (not the fill) so the thin arc reads on both the light and dark button face —
   a bright lime line on a white button would barely show. */
.aa-scrolltop-ring {
  position: absolute; inset: -1px;            /* sit over the 1px border */
  width: calc(100% + 2px); height: calc(100% + 2px);
  transform: rotate(-90deg);                  /* start the arc at 12 o'clock */
  pointer-events: none;                        /* never eat the click */
}
.aa-scrolltop-ring circle {
  fill: none; stroke-width: 2;   /* cx/cy/r come from the SVG attributes */
}
.aa-scrolltop-track { stroke: rgba(var(--bs-body-color-rgb), .12); }
.aa-scrolltop-prog {
  stroke: var(--aa-ink);
  stroke-linecap: round;
  stroke-dasharray: 131.95;                    /* 2·π·21 — the full circumference */
  stroke-dashoffset: 131.95;                   /* start empty; JS drives this down */
  filter: drop-shadow(0 0 4px rgba(var(--aa-accent-rgb), .55));
  transition: stroke-dashoffset .1s linear;
}
@media (prefers-reduced-motion: reduce) { .aa-scrolltop-prog { transition: none; } }

@media (max-width: 575.98px) {
  .aa-fab { right: 1rem; bottom: 1rem; }
  .aa-scrolltop { left: 1rem; bottom: 1rem; width: 42px; height: 42px; }
}

/* Smooth in-page scrolling (hero scroll cue, anchor links) */
html { scroll-behavior: smooth; }

/* Breathing room above the sidebar logo in the panels */
#layout-menu .app-brand.demo { padding-top: 1.25rem; padding-bottom: .35rem; }

/* PWA install button — appears only when the browser offers app install */
.aa-pwa-install {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 1034;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .5rem 1.1rem;
  border: 0;
  border-radius: 2rem;
  font-weight: 600;
  font-size: .875rem;
  color: var(--aa-accent-contrast);
  background: var(--aa-accent);
  box-shadow: 0 .5rem 1.25rem rgba(var(--aa-accent-rgb), .45);
  animation: aa-pwa-in .3s ease;
}
.aa-pwa-install:hover { filter: brightness(1.05); }
.aa-pwa-install[hidden] { display: none; }
@keyframes aa-pwa-in { from { opacity: 0; transform: translate(-50%, .5rem); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 575.98px) {
  .aa-pwa-install { bottom: 5.25rem; }
}

/* Testimonial cards */
.aa-testimonial-card { transition: transform .2s ease, box-shadow .2s ease; }
.aa-testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08); }
.aa-testimonial-card .blockquote p { line-height: 1.6; }

/* ---- Accessibility (WCAG 2.1 AA) ---- */
/* Skip-to-content link: hidden until focused */
.aa-skip-link {
  position: fixed;
  top: -60px;
  left: 1rem;
  z-index: 2000;
  padding: .6rem 1.1rem;
  border-radius: .5rem;
  background: var(--aa-accent);
  color: var(--aa-accent-contrast);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s ease;
}
.aa-skip-link:focus {
  top: 1rem;
  /* Keep the readable dark-on-lime from the base rule — the old #fff put white
     text on the lime skip link (~1.2:1), unreadable on the one control keyboard
     users rely on. */
  color: var(--aa-accent-contrast);
  outline: 3px solid rgba(var(--aa-accent-rgb), .5);
}
#main-content:focus { outline: none; }

/* Visible keyboard focus everywhere (mouse clicks stay clean via :focus-visible) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(var(--bs-primary-rgb), .5);
  outline-offset: 2px;
  border-radius: 4px;
}
/* The pill theme switcher needs the ring hugging its rounded shape */
.aa-theme-seg button:focus-visible { outline-offset: 0; border-radius: 999px; }

/* Respect users who prefer reduced 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-logos-track { animation: none !important; }
  .aa-scroll-cue i { animation: none !important; }
}

/* =====================================================================
   REDESIGN — modern dark-first look (grid bg, display font, cohesion)
   Reference-inspired: near-black canvas, lime accent, subtle grid,
   gentle scroll animations. English/UK content preserved.
   ===================================================================== */

/* Modern display typeface for headings */
.aa-landing h1, .aa-landing h2, .aa-landing h3,
.aa-landing .aa-hero-title, .aa-landing .aa-section-title,
.aa-display { font-family: 'Space Grotesk', 'Public Sans', system-ui, sans-serif; }

/* Subtle fixed grid backdrop that fades toward the edges */
body.aa-landing { position: relative; }
body.aa-landing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(135% 105% at 50% -5%, #000 55%, transparent 95%);
  mask-image: radial-gradient(135% 105% at 50% -5%, #000 55%, transparent 95%);
}
[data-bs-theme="light"] body.aa-landing::before {
  background-image:
    linear-gradient(to right, rgba(17,17,20,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,20,.09) 1px, transparent 1px);
}
/* Keep page content above the grid */
body.aa-landing > nav,
body.aa-landing > main,
body.aa-landing > footer,
body.aa-landing > .container { position: relative; z-index: 1; }

/* Reveal-on-scroll — progressive enhancement: only hides when JS is active
   (html.aa-js), so no-JS users always see content. */
.aa-js .aa-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.aa-js .aa-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .aa-js .aa-reveal { opacity: 1 !important; transform: none !important; } }

/* Pill badge (reusable across pages) */
.aa-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem 1rem; border-radius: 2rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bs-heading-color);
  background: rgba(var(--bs-body-color-rgb), .04);
  border: 1px solid var(--bs-border-color);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.aa-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aa-accent); box-shadow: 0 0 8px var(--aa-accent); animation: aa-pulse 2s ease-in-out infinite; }
@keyframes aa-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .aa-pill-dot { animation: none; } }

/* Sparkle-star section eyebrow (reference "✦ OUR LATEST SERVICES ✦" style) */
.aa-eyebrow-star {
  display: inline-flex; align-items: center; gap: .65rem;
  color: var(--bs-heading-color);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
}
.aa-star { width: 1.1em; height: 1.1em; color: var(--aa-ink); flex: 0 0 auto; animation: aa-twinkle 3s ease-in-out infinite; }
.aa-star--alt { animation-delay: .8s; }
@keyframes aa-twinkle {
  0%, 100% { transform: scale(.9) rotate(0deg); opacity: .8; }
  50%      { transform: scale(1.25) rotate(45deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .aa-star { animation: none; } }

/* Decorative animated sparkle burst accent (subtle, for section corners) */
.aa-burst { position: absolute; width: 54px; height: 54px; color: var(--aa-ink); opacity: .9; pointer-events: none; animation: aa-twinkle 4s ease-in-out infinite; }

/* About-page personal profile card (reference style) */
.aa-profile-card {
  position: relative;
  text-align: center;
  padding: 2.25rem 1.75rem;
  border-radius: 1.25rem;
  background: var(--bs-paper-bg, #161619);
  border: 1px solid var(--bs-border-color);
  overflow: hidden;
}
.aa-profile-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(var(--aa-accent-rgb), .12), transparent 60%);
}
.aa-profile-photo {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  margin: 0 auto 1.1rem; object-fit: cover;
  border: 3px solid rgba(var(--aa-accent-rgb), .5);
  box-shadow: 0 0 0 6px rgba(var(--aa-accent-rgb), .08), 0 10px 30px rgba(0,0,0,.35);
}
.aa-profile-photo--ph { display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--aa-accent-rgb), .12); color: var(--aa-ink); font-size: 3rem; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.aa-profile-name { position: relative; font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-heading-color); margin-bottom: .25rem; }
.aa-profile-title { position: relative; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: 1.1rem; }
.aa-profile-socials { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.1rem; }
.aa-profile-socials a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bs-heading-color);
  background: rgba(var(--bs-body-color-rgb), .05);
  border: 1px solid var(--bs-border-color);
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.aa-profile-socials a:hover { transform: translateY(-3px); color: var(--aa-accent-contrast); background: var(--aa-accent); border-color: var(--aa-accent); }
.aa-profile-tagline { position: relative; font-weight: 600; color: var(--bs-heading-color); margin-bottom: 0; }

/* =====================================================================
   Footer redesign (reference-inspired: columns, newsletter, contact rows)
   ===================================================================== */
.aa-footer { position: relative; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); }
.aa-footer-heading {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--bs-heading-color);
  font-size: 1.05rem; margin-bottom: 1.1rem; position: relative;
  padding-bottom: .6rem;
}
/* Short accent rule anchoring each footer column. Uses the ink, not the fill:
   the lime fill only reaches ~1.2:1 against a white footer, so the bar would
   all but vanish in light mode. Ink is lime in dark and olive in light. */
.aa-footer-heading::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 28px; height: 2px; border-radius: 2px;
  background: var(--aa-ink);
}
/* Newsletter */
.aa-subscribe-label { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .6rem; font-weight: 600; }
.aa-subscribe-group { display: flex; max-width: 22rem; border-radius: .75rem; overflow: hidden; border: 1px solid var(--bs-border-color); background: var(--bs-paper-bg, rgba(255,255,255,.03)); }
.aa-subscribe-input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--bs-body-color); padding: .7rem .9rem; font-size: .9rem; }
.aa-subscribe-input:focus { outline: none; }
.aa-subscribe-input::placeholder { color: var(--bs-secondary-color); }
.aa-subscribe-btn {
  flex: 0 0 auto; width: 52px; border: 0; cursor: pointer;
  background: var(--aa-accent); color: var(--aa-accent-contrast);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
  transition: filter .2s ease, transform .2s ease;
}
.aa-subscribe-btn:hover { filter: brightness(1.08); }
.aa-subscribe-btn:active { transform: scale(.96); }
.aa-subscribe-group:focus-within { border-color: rgba(var(--aa-accent-rgb), .5); }

/* Circular social icons */
.aa-footer-social {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bs-heading-color);
  background: rgba(var(--bs-body-color-rgb), .05);
  border: 1px solid var(--bs-border-color);
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.aa-footer-social:hover { transform: translateY(-3px); color: var(--aa-accent-contrast); background: var(--aa-accent); border-color: var(--aa-accent); }

/* Contact rows with icons */
.aa-footer-contact li { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .85rem; }
.aa-footer-contact-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; margin-top: -2px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--aa-ink); background: rgba(var(--aa-accent-rgb), .1);
  border: 1px solid rgba(var(--aa-accent-rgb), .2);
}
.aa-footer-contact a.footer-link, .aa-footer-contact span { line-height: 1.4; }

/* Bottom bar */
.aa-footer-bottom { border-top: 1px solid var(--bs-border-color); }

/* =====================================================================
   Mobile navigation drawer — app-like redesign
   (theme toggle + auth live here on mobile; toolbar hidden < lg)
   ===================================================================== */
.aa-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  /* Match the main sticky navbar (63px, content centred) so the drawer's ✕
     lines up exactly with the ☰ hamburger it replaces. Right inset ≈ the
     navbar's (30px) puts the ✕ directly under the hamburger. */
  min-height: 63px;
  padding: 0 1.9rem 0 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.aa-drawer-brand { display: inline-flex; align-items: center; line-height: 0; }
.aa-drawer-brand img { max-height: 30px; width: auto; object-fit: contain; }
.aa-drawer-close {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bs-border-color);
  background: transparent; color: var(--bs-heading-color);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
  transition: background .18s ease, border-color .18s ease;
}
.aa-drawer-close:hover { background: rgba(var(--bs-body-color-rgb), .06); border-color: rgba(var(--aa-accent-rgb), .4); }

/* All drawer content shares the same left edge (1rem) — labels + nav items */
.aa-drawer-foot { padding: .8rem 1rem 1rem; border-top: 1px solid var(--bs-border-color); }

/* Theme segmented control — compact, iOS-style pill track with an elevated
   selected segment (neutral pill + accent-tinted icon). */
.aa-theme-seg {
  display: flex; gap: .15rem; padding: .2rem;
  border-radius: 999px;
  background: rgba(var(--bs-body-color-rgb), .06);
  border: 1px solid var(--bs-border-color);
}
.aa-theme-seg button {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .42rem .3rem; border: 0; background: transparent; border-radius: 999px;
  -webkit-appearance: none; appearance: none;   /* native buttons suppress bg-color otherwise */
  color: var(--bs-secondary-color); font-size: .78rem; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.aa-theme-seg button i { font-size: 1rem; }
.aa-theme-seg button:hover { color: var(--bs-heading-color); }
.aa-theme-seg button.active {
  background: rgba(var(--bs-body-color-rgb), .14);
  color: var(--bs-heading-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16), inset 0 0 0 1px rgba(var(--bs-body-color-rgb), .1);
}
.aa-theme-seg button.active i { color: var(--aa-ink); }

@media (max-width: 991.98px) {
  nav.layout-navbar .navbar.landing-navbar .landing-nav-menu {
    display: flex;
    flex-direction: column;
    /* Override Bootstrap .navbar-collapse's align-items:center so every
       child (MENU label, nav list, footer) stretches full width and its
       content left-aligns to the same edge. */
    align-items: stretch;
    inline-size: 86%;
    max-inline-size: 340px;
    padding: 0;
    background: var(--bs-body-bg);
    /* Open from the RIGHT (hamburger lives on the right). Neutralise Vuexy's
       inset-inline-start:-100% and drive the panel from the right edge. */
    inset-inline-start: auto;
    inset-inline-end: -100%;
    border-right: 0;
    border-left: 1px solid var(--bs-border-color);
    box-shadow: -8px 0 40px rgba(0, 0, 0, .45);
  }
  nav.layout-navbar .navbar.landing-navbar .landing-nav-menu.show {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  /* Nav list must fill width too (Bootstrap .navbar-nav can shrink). */
  nav.layout-navbar .navbar.landing-navbar .aa-drawer-nav { align-self: stretch; width: 100%; }
  .aa-drawer-nav { flex: 1 1 auto; padding: .4rem !important; margin: 0 !important; overflow-y: auto; }
  .aa-drawer-nav .nav-item { margin: 0; }
  /* High-specificity selectors so these WIN over Vuexy front-page.css
     (nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link), which
     would otherwise force a cramped 0.5rem padding. Uniform 48px touch rows. */
  nav.layout-navbar .navbar.landing-navbar .aa-drawer-nav .nav-link {
    display: flex; align-items: center; gap: .85rem;
    min-height: 48px; margin: 0;
    padding: .65rem .75rem; border-radius: .65rem;
    color: var(--bs-body-color); font-size: 1rem; font-weight: 500;
    transition: background .18s ease, color .18s ease;
  }
  nav.layout-navbar .navbar.landing-navbar .aa-drawer-nav .nav-link:hover { background: rgba(var(--bs-body-color-rgb), .05); color: var(--bs-heading-color); }
  nav.layout-navbar .navbar.landing-navbar .aa-drawer-nav .nav-link.active { background: rgba(var(--aa-accent-rgb), .12); color: var(--aa-ink); }
  .aa-drawer-nav-ic { font-size: 1.25rem; width: 1.5rem; text-align: center; opacity: .9; }
}

/* =====================================================================
   Consistent header→content spacing on every page (uniform top gap
   below the sticky nav, regardless of each page's section classes)
   ===================================================================== */
#main-content > section:first-of-type,
#main-content > .aa-landing > section:first-of-type { padding-top: 8rem; }
@media (max-width: 768px) {
  #main-content > section:first-of-type,
  #main-content > .aa-landing > section:first-of-type { padding-top: 5rem; }
}

/* Desktop theme toggle button */
.aa-theme-toggle { border: 0; }
.aa-theme-toggle:hover [data-aa-theme-icon] { color: var(--aa-ink) !important; }

/* Mobile drawer polish */
.aa-drawer-menu-label { padding: .9rem 1rem .35rem; }
.aa-drawer-nav-arrow { margin-left: auto; color: var(--bs-secondary-color); opacity: .45; font-size: 1rem; }
.aa-drawer-nav .nav-link.active .aa-drawer-nav-arrow { color: var(--aa-ink); opacity: 1; }
.aa-drawer-socials { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--bs-border-color); }

/* =====================================================================
   Mobile compactness — tighter spacing & typography on phones (≤576px)
   ===================================================================== */
@media (max-width: 575.98px) {
  /* Sections: less vertical padding than tablet, but still part of the same
     rhythm — the adjacent-section rule needs its phone value here too, or the
     tablet value would apply against this smaller base and the gaps would
     drift. Phone gap: 3.5rem + 2.25rem = 92px. Phones stay tighter than the
     desktop scale on purpose: air that reads as calm on a wide screen just
     becomes extra scrolling on a small one. */
  .aa-section { padding: 3.5rem 0; }
  .aa-section.pt-0,
  .aa-section + .aa-section { padding-top: 2.25rem; }
  .aa-section.pt-0 { padding-top: 2.25rem !important; }
  #main-content > section:first-of-type,
  #main-content > .aa-landing > section:first-of-type { padding-top: 3.75rem; }

  /* Section headings smaller + tighter */
  .aa-section-title { font-size: 1.55rem; }
  .aa-section .text-center.mb-5 { margin-bottom: 1.75rem !important; }

  /* Hero: compact */
  .aa-hero--v2 { padding: 1.75rem 0 1.5rem; }
  .aa-hero--v2 .aa-hero-title { font-size: 1.95rem; line-height: 1.12; letter-spacing: -.02em; max-width: 22ch; margin-bottom: .8rem; }
  .aa-hero--v2 .aa-hero-lead { font-size: .95rem; }
  .aa-hero--v2 .d-flex.gap-3 { gap: .6rem !important; margin-top: 1.25rem !important; }
  .aa-pill { font-size: .62rem; padding: .35rem .8rem; letter-spacing: .1em; }

  /* Hero cards: compact */
  .aa-hero-cards { margin-top: 1.5rem !important; }
  .aa-hero-cards.row { --bs-gutter-y: .6rem; }
  .aa-hero-card { padding: .8rem .9rem; gap: .75rem; border-radius: .8rem; }
  .aa-hero-card-icon { width: 40px; height: 40px; font-size: 1.2rem; border-radius: .6rem; }
  .aa-hero-card-title { font-size: .95rem; }
  .aa-hero-card-sub { font-size: .75rem; }

  /* Content / service cards: compact */
  .aa-card { padding: 1.2rem; border-radius: .85rem; }
  .aa-card h5 { font-size: 1.05rem; }
  .aa-icon { width: 42px; height: 42px; font-size: 1.3rem; }

  /* Tighten card grid gutters */
  section .row.g-4, section .row.g-4.g-lg-5 { --bs-gutter-y: .85rem; }

  /* Buttons a touch smaller */
  .aa-hero--v2 .btn-lg, .aa-section .btn-lg { padding: .55rem 1.15rem; font-size: .9rem; }

  /* Testimonials + steps a bit tighter */
  .aa-testimonial-card .card-body { padding: 1.15rem; }
}

/* Newsletter — sweet inline confirmation */
.aa-subscribe-success {
  display: flex; align-items: center; gap: .7rem;
  max-width: 22rem; padding: .7rem .85rem; border-radius: .75rem;
  background: rgba(var(--aa-accent-rgb), .1);
  border: 1px solid rgba(var(--aa-accent-rgb), .3);
  animation: aa-sub-in .35s cubic-bezier(.2,.7,.2,1);
}
.aa-subscribe-check {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--aa-accent); color: var(--aa-accent-contrast); font-size: 1.15rem;
  animation: aa-sub-pop .4s .1s cubic-bezier(.2,1.3,.4,1) both;
}
.aa-subscribe-success-title { font-weight: 600; color: var(--bs-heading-color); line-height: 1.2; }
.aa-subscribe-error { color: var(--bs-danger); max-width: 22rem; }
.aa-subscribe-btn:disabled { opacity: .55; cursor: default; }
@keyframes aa-sub-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes aa-sub-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aa-subscribe-success, .aa-subscribe-check { animation: none; } }

/* =====================================================================
   Media hover animations (reusable) + how-it-works step images
   ===================================================================== */
/* Cool image hover: gentle zoom + diagonal shine sweep */
.aa-media-hover { position: relative; overflow: hidden; }
.aa-media-hover img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.aa-media-hover:hover img { transform: scale(1.08); }
.aa-media-hover::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg); transition: left .7s ease; pointer-events: none; z-index: 2;
}
.aa-media-hover:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
  .aa-media-hover img { transition: none; }
  .aa-media-hover:hover img { transform: none; }
  .aa-media-hover::after { display: none; }
}

/* How-it-works step image */
.aa-step-media {
  position: relative; width: 100%; max-width: 240px; aspect-ratio: 22 / 15;
  border-radius: .9rem; overflow: hidden; margin-bottom: 1.1rem;
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.aa-step-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aa-step-num-badge {
  position: absolute; top: .55rem; left: .55rem; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
  background: var(--aa-accent); color: var(--aa-accent-contrast);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* =====================================================================
   Desktop floating "island" header — narrower, frosted, sleek pill that
   floats over the hero. Mobile keeps its solid full-width bar (≤991.98px).
   ===================================================================== */
@media (min-width: 992px) {
  /* Outer nav goes transparent in EVERY state — the dark-mode ".navbar-active"
     rule has higher specificity, so match it explicitly or the scrolled state
     re-adds a dark band behind the floating pill. */
  nav.layout-navbar.aa-sticky-nav,
  nav.layout-navbar.aa-sticky-nav.navbar-active,
  [data-bs-theme="dark"] nav.layout-navbar.aa-sticky-nav,
  [data-bs-theme="dark"] nav.layout-navbar.aa-sticky-nav.navbar-active {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  /* Vuexy's scroll pseudo-element also draws a band — remove it. */
  nav.layout-navbar.aa-sticky-nav::before,
  nav.layout-navbar.aa-sticky-nav.navbar-active::before { display: none !important; }
  /* The pill is a floating island, so it may be wider than the page's content
     container — it needs ~1110px to keep all 8 nav items on one line, which
     Bootstrap's 960/1140px container caps would not allow. */
  nav.layout-navbar.aa-sticky-nav > .container {
    padding-top: .8rem;
    max-width: 1360px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Inner navbar becomes the frosted floating pill — narrower + thinner */
  nav.layout-navbar.aa-sticky-nav .landing-navbar,
  nav.layout-navbar.aa-sticky-nav.navbar-active .landing-navbar {
    max-width: 1280px;
    margin: 0 auto !important;
    padding: .3rem .5rem .3rem 1.4rem !important;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(17, 17, 20, 0.08) !important;
    box-shadow: 0 10px 34px rgba(17, 17, 20, 0.10) !important;
    transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  [data-bs-theme="dark"] nav.layout-navbar.aa-sticky-nav .landing-navbar,
  [data-bs-theme="dark"] nav.layout-navbar.aa-sticky-nav.navbar-active .landing-navbar {
    background-color: rgba(24, 24, 28, 0.60) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5) !important;
  }
  /* Compact nav links inside the thin pill */
  nav.layout-navbar.aa-sticky-nav .landing-navbar .navbar-nav .nav-link { padding-top: .45rem; padding-bottom: .45rem; }
}

/* Small desktops / tablets (992–1199px): the viewport can't give the pill the
   ~1110px that full-size links need, and the links no longer wrap (nowrap
   above). Tighten them here so the bar stays one line instead of overflowing. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link {
    padding-left: .32rem;
    padding-right: .32rem;
    font-size: .875rem;
  }
  nav.layout-navbar.aa-sticky-nav .landing-navbar,
  nav.layout-navbar.aa-sticky-nav.navbar-active .landing-navbar {
    padding-left: .9rem !important;
  }
  nav.layout-navbar.aa-sticky-nav .landing-navbar .app-brand-link img { max-height: 24px; }
  /* Underline insets follow the tighter padding */
  nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link::after { left: .32rem; right: .32rem; }
}

/* Hero + trust strip together fill one full viewport on every device. The
   hero content is vertically centred; the trust strip sits at the bottom. */
.aa-hero-vh {
  display: flex;
  flex-direction: column;
  min-height: 100svh;                  /* mobile-safe full height (below the solid bar) */
}
.aa-hero-vh > .aa-hero--v2 {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
.aa-hero-vh > .aa-hero--v2 > .container { width: 100%; }
@media (max-width: 991.98px) {
  /* Fill the space under the in-flow solid header bar (~62px). */
  .aa-hero-vh { min-height: calc(100svh - 62px); }
}

/* Homepage hero rises up BEHIND the floating pill header so the video/
   background fills to the very top (no dark band behind the header).
   Desktop only — mobile keeps the solid bar with the hero below it. */
@media (min-width: 992px) {
  #main-content > .aa-landing > .aa-hero-vh {
    margin-top: -64px;                 /* pull the whole hero screen up under the pill */
    min-height: 100vh;                 /* fill the viewport exactly, header overlapping */
  }
  #main-content > .aa-landing > .aa-hero-vh > .aa-hero--v2 {
    padding-top: calc(1.75rem + 64px); /* keep centred content clear of the header */
    padding-bottom: 1.75rem;
  }
}

/* Smooth in-page scrolling (e.g. the hero "Explore" cue), motion-safe. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Trust strip — frosted glass that blends into the hero video sitting above it,
   with lime icon chips and a slow lime hairline. Light touch, premium. */
.aa-trust-strip {
  position: relative;
  background: rgba(12, 12, 15, .5);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
[data-bs-theme="light"] .aa-trust-strip {
  background: rgba(255, 255, 255, .6);
  border-top-color: rgba(0, 0, 0, .06);
  border-bottom-color: rgba(0, 0, 0, .06);
}
/* Animated lime hairline sweeping across the top edge. */
.aa-trust-strip::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 8%, rgba(var(--aa-accent-rgb), .7) 50%, transparent 92%);
  background-size: 200% 100%;
  animation: aa-trust-line 7s linear infinite;
}
@keyframes aa-trust-line { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.aa-trust-item {
  display: inline-flex; align-items: center; gap: .55rem;
  transition: transform .25s ease;
}
.aa-trust-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--aa-accent-rgb), .12);
  border: 1px solid rgba(var(--aa-accent-rgb), .18);
  color: var(--aa-ink); font-size: 1.05rem;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.aa-trust-item:hover { transform: translateY(-2px); }
.aa-trust-item:hover .aa-trust-ico {
  background: rgba(var(--aa-accent-rgb), .2);
  border-color: rgba(var(--aa-accent-rgb), .4);
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) { .aa-trust-strip::before { animation: none; } }
@media (max-width: 575.98px) {
  .aa-trust-item { gap: .45rem; }
  .aa-trust-ico { width: 30px; height: 30px; font-size: .95rem; }
}

/* Taller, airier footer */
.aa-footer > .container.py-6 { padding-top: 5rem; padding-bottom: 3.5rem; }
.aa-footer-bottom > .container.py-3 { padding-top: 1.15rem; padding-bottom: 1.15rem; }
@media (max-width: 575.98px) {
  .aa-footer > .container.py-6 { padding-top: 3rem; padding-bottom: 2.25rem; }
}

/* =====================================================================
   Modern footer — more space, gradient top accent, glow, big wordmark
   ===================================================================== */
.aa-footer { position: relative; overflow: hidden; }
.aa-footer > .container.py-6 { padding-top: 6.5rem !important; padding-bottom: 3rem !important; }
@media (max-width: 575.98px) { .aa-footer > .container.py-6 { padding-top: 3.5rem !important; padding-bottom: 2rem !important; } }

/* Gradient hairline accent along the very top */
.aa-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(var(--aa-accent-rgb), .55), transparent);
}
/* Soft lime glow near the top-centre */
.aa-footer::after {
  content: ""; position: absolute; top: -130px; left: 50%; transform: translateX(-50%);
  width: 640px; height: 320px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--aa-accent-rgb), .10), transparent 70%);
  filter: blur(18px);
}
.aa-footer .container { position: relative; z-index: 1; }

/* Modern footer-link hover: colour + gentle slide */
.aa-footer .footer-link { display: inline-block; transition: color .2s ease, transform .2s ease; }
.aa-footer .footer-link:hover { color: var(--aa-ink); transform: translateX(3px); }

/* Oversized faded brand wordmark (fades into the bottom edge) */
.aa-footer-brandmark {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  text-align: center; letter-spacing: .02em; line-height: .82;
  font-size: clamp(3rem, 15vw, 12rem);
  color: rgba(17, 17, 20, .055);
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 35%, transparent 92%);
  white-space: nowrap; overflow: hidden; user-select: none; pointer-events: none;
  margin: 1rem 0 -.6rem; padding: 0 1rem;
}
[data-bs-theme="dark"] .aa-footer-brandmark { color: rgba(255, 255, 255, .05); }

/* Compact pill CTA in the header toolbar */
.aa-nav-cta { display: inline-flex; align-items: center; font-weight: 600; }
.aa-nav-cta i { line-height: 1; }

/* =====================================================================
   Desktop nav-link hover: lime underline that grows from the centre.
   Active page keeps it filled. Desktop only (min-width:992px) so it never
   touches the mobile drawer, which reuses the same .nav-link class.
   ===================================================================== */
@media (min-width: 992px) {
  /* Keep multi-word labels ("Packages & Pricing") on one line — with 8 nav
     items they otherwise wrap and make the pill two rows tall. There is room:
     the links total ~660px inside a ~730px bar. */
  nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link { position: relative; white-space: nowrap; }
  nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: .6rem; right: .6rem; bottom: .34rem;
    height: 2px; border-radius: 2px;
    background: var(--aa-ink);
    transform: scaleX(0); transform-origin: center;
    transition: transform .28s cubic-bezier(.2, .7, .2, 1);
  }
  nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link:hover::after,
  nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link.active::after,
  nav.layout-navbar .navbar.landing-navbar .navbar-nav .active > .nav-link::after {
    transform: scaleX(1);
  }
  @media (prefers-reduced-motion: reduce) {
    nav.layout-navbar .navbar.landing-navbar .navbar-nav .nav-link::after { transition: none; }
  }
}

/* =====================================================================
   Modern CTA — glassmorphism: frosted translucent card over colour orbs
   ===================================================================== */
/* No overflow:hidden here: the orbs are positioned so their soft, blurred glow
   fades to nothing before it reaches the section edge, so there is no hard clip
   line to hide — and they keep their full brightness. */
.aa-cta-section { position: relative; }
/* Colour orbs sit BEHIND the glass so they blur through it */
.aa-cta-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; opacity: .85; }
.aa-cta-orb--1 { width: 340px; height: 340px; top: 12%; left: 20%; background: radial-gradient(circle, rgba(var(--aa-accent-rgb), .65), transparent 68%); animation: aa-cta-float 9s ease-in-out infinite; }
.aa-cta-orb--2 { width: 340px; height: 340px; bottom: 12%; right: 18%; background: radial-gradient(circle, rgba(115, 103, 240, .65), transparent 68%); animation: aa-cta-float 11s ease-in-out infinite reverse; }
@keyframes aa-cta-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(26px, -18px); } }
@media (prefers-reduced-motion: reduce) { .aa-cta-orb { animation: none; } }

.aa-cta--v2 {
  position: relative; z-index: 1;
  border-radius: 2rem; padding: 5rem 1.5rem; text-align: center;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .10);
}
[data-bs-theme="light"] .aa-cta--v2 {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 24px 60px rgba(17, 17, 20, .10), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* The CTA declares its own dark scope so the lime buttons get a dark stage in
   light mode (lime reads 16:1 on near-black but only 1.2:1 on white). The
   light rule above still matches through the light <html> ancestor, so the
   surface has to be restated for the element itself — otherwise the text goes
   white on a white glass. Kept translucent so the orbs still glow through.
   Must stay AFTER that rule: same specificity, source order decides. */
.aa-cta--v2[data-bs-theme="dark"] {
  background: rgba(20, 20, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.aa-cta--v2 .aa-cta-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.aa-cta-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: .75rem; color: var(--bs-heading-color); }
.aa-cta-lead { color: var(--bs-secondary-color); font-size: 1.05rem; max-width: 620px; margin: 0 auto; }
@media (max-width: 575.98px) { .aa-cta--v2 { padding: 3rem 1.25rem; border-radius: 1.5rem; } }

/* ===========================================================================
   BLOG — index cards, category filter, article + table of contents
   ======================================================================== */
.aa-blog-cats { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.aa-blog-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.1rem; border-radius: 2rem;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  color: var(--bs-body-color);
  background: var(--bs-paper-bg, rgba(255,255,255,.02));
  border: 1px solid var(--bs-border-color);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.aa-blog-chip:hover { border-color: rgba(var(--aa-accent-rgb), .5); color: var(--bs-heading-color); }
.aa-blog-chip.is-active { background: var(--aa-accent); border-color: var(--aa-accent); color: var(--aa-accent-contrast); }
.aa-blog-chip-count { font-size: .72rem; opacity: .7; }
.aa-blog-chip.is-active .aa-blog-chip-count { opacity: .85; }

.aa-blog-card { padding: 0; overflow: hidden; }
.aa-blog-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bs-tertiary-bg); transform: translateZ(0); }
.aa-blog-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform .6s cubic-bezier(.2,.7,.2,1); backface-visibility: hidden; }
.aa-blog-card:hover .aa-blog-media img { transform: scale(1.08); }
.aa-blog-badge {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  padding: .3rem .7rem; border-radius: 2rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-decoration: none;
  color: var(--aa-accent-contrast); background: var(--aa-accent);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.aa-blog-body { padding: 1.25rem 1.35rem 1.4rem; }
.aa-blog-meta { font-size: .8rem; color: var(--bs-secondary-color); }

.aa-blog-cover { border-radius: 1.1rem; overflow: hidden; border: 1px solid var(--bs-border-color); max-width: 1000px; margin-left: auto; margin-right: auto; }
.aa-blog-cover img { width: 100%; height: auto; display: block; max-height: 460px; object-fit: cover; }

/* Table of contents */
.aa-toc { position: sticky; top: 92px; border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1.1rem 1.25rem; background: var(--bs-paper-bg, rgba(255,255,255,.02)); }
.aa-toc-title { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-heading-color); margin-bottom: .6rem; }
.aa-toc ul { list-style: none; padding: 0; margin: 0; }
.aa-toc li { margin: 0; }
.aa-toc a { display: block; padding: .3rem 0; font-size: .88rem; color: var(--bs-secondary-color); text-decoration: none; border-left: 2px solid transparent; padding-left: .7rem; transition: color .2s ease, border-color .2s ease; }
.aa-toc a:hover, .aa-toc a.is-active { color: var(--aa-ink); border-left-color: var(--aa-ink); }
.aa-toc-l3 a { padding-left: 1.5rem; font-size: .84rem; }
@media (max-width: 991.98px) { .aa-toc { position: static; margin-bottom: 1.5rem; } }

/* Article prose typography */
.aa-article { font-size: 1.06rem; line-height: 1.75; color: var(--bs-body-color); max-width: 760px; }

/* Case-study body: a bordered panel so the reading column has a home instead
   of floating in the middle of a wide section. The eyebrow sits full-width at
   the top; the prose inside keeps its comfortable ~72ch measure. */
.aa-case-story {
  max-width: 960px;
  padding: 2.75rem 3.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 1.25rem;
  background: var(--bs-paper-bg, rgba(255,255,255,.02));
}
.aa-case-story .aa-article { max-width: none; }
@media (max-width: 767.98px) {
  .aa-case-story { padding: 1.75rem 1.35rem; }
}
.aa-article > *:first-child { margin-top: 0; }
.aa-article h2 { font-family: 'Space Grotesk','Public Sans',sans-serif; font-weight: 700; font-size: 1.7rem; line-height: 1.2; color: var(--bs-heading-color); margin: 2.4rem 0 1rem; scroll-margin-top: 96px; }
.aa-article h3 { font-family: 'Space Grotesk','Public Sans',sans-serif; font-weight: 700; font-size: 1.32rem; color: var(--bs-heading-color); margin: 1.8rem 0 .75rem; scroll-margin-top: 96px; }
.aa-article p { margin: 0 0 1.2rem; }
.aa-article a { color: var(--aa-ink); text-decoration: underline; text-underline-offset: 3px; }
.aa-article ul, .aa-article ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.aa-article li { margin-bottom: .5rem; }
.aa-article img { max-width: 100%; height: auto; border-radius: .9rem; margin: 1.5rem 0; border: 1px solid var(--bs-border-color); }
.aa-article blockquote { margin: 1.6rem 0; padding: .6rem 1.2rem; border-left: 3px solid var(--aa-accent); color: var(--bs-heading-color); font-size: 1.12rem; }
.aa-article code { background: var(--bs-tertiary-bg); padding: .15em .4em; border-radius: .3rem; font-size: .9em; }
.aa-article pre { background: var(--bs-tertiary-bg); padding: 1rem 1.2rem; border-radius: .7rem; overflow-x: auto; margin: 1.4rem 0; }
.aa-article pre code { background: none; padding: 0; }
.aa-article hr { border: 0; border-top: 1px solid var(--bs-border-color); margin: 2rem 0; }

/* Blog article — reading progress, author box, prev/next, copy state */
.aa-read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1080; background: transparent; pointer-events: none; }
.aa-read-progress #aa-read-bar { display: block; height: 100%; width: 0; background: var(--aa-ink); box-shadow: 0 0 10px rgba(var(--aa-ink-rgb), .6); transition: width .1s linear; }

.aa-author-box { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.4rem 1.5rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-paper-bg, rgba(255,255,255,.02)); }
.aa-author-avatar { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.aa-author-initial { display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--aa-accent-rgb), .15); color: var(--aa-ink); font-weight: 700; font-size: 1.5rem; }
.aa-author-name { font-family: 'Space Grotesk','Public Sans',sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--bs-heading-color); }
.aa-author-role { font-size: .9rem; color: var(--bs-secondary-color); }

.aa-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.aa-post-nav-link { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.2rem; border: 1px solid var(--bs-border-color); border-radius: .9rem; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.aa-post-nav-link:hover { border-color: rgba(var(--aa-accent-rgb), .5); transform: translateY(-2px); }
.aa-post-nav-next { text-align: right; align-items: flex-end; }
.aa-post-nav-dir { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--aa-ink); font-weight: 600; }
.aa-post-nav-title { font-weight: 600; color: var(--bs-heading-color); line-height: 1.3; }
@media (max-width: 575.98px) { .aa-post-nav { grid-template-columns: 1fr; } .aa-post-nav-next { text-align: left; align-items: flex-start; } }

.aa-copy-link.is-copied { color: var(--aa-accent-contrast); background: var(--aa-accent); border-color: var(--aa-accent); }

/* Blog article — key takeaways, FAQ, inline newsletter, image lightbox */
.aa-takeaways { border: 1px solid rgba(var(--aa-accent-rgb), .35); border-left: 4px solid var(--aa-accent); border-radius: .9rem; background: rgba(var(--aa-accent-rgb), .05); padding: 1.1rem 1.4rem; margin-bottom: 1.75rem; }
.aa-takeaways-title { font-family: 'Space Grotesk','Public Sans',sans-serif; font-weight: 700; color: var(--bs-heading-color); margin-bottom: .5rem; }
.aa-takeaways ul { margin: 0; padding-left: 1.2rem; }
.aa-takeaways li { margin-bottom: .4rem; color: var(--bs-body-color); }
.aa-takeaways li:last-child { margin-bottom: 0; }

.aa-faq-heading { font-family: 'Space Grotesk','Public Sans',sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--bs-heading-color); margin-bottom: 1rem; }
.aa-faq-acc .accordion-item { background: var(--bs-paper-bg, transparent); border: 1px solid var(--bs-border-color); border-radius: .8rem !important; margin-bottom: .6rem; overflow: hidden; }
.aa-faq-acc .accordion-button { background: transparent; color: var(--bs-heading-color); font-weight: 600; box-shadow: none; }
.aa-faq-acc .accordion-button:not(.collapsed) { color: var(--aa-ink); background: rgba(var(--aa-accent-rgb), .05); }
.aa-faq-acc .accordion-button:focus { box-shadow: none; border-color: transparent; }
.aa-faq-acc .accordion-body { color: var(--bs-body-color); }

.aa-newsletter-block { border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-paper-bg, rgba(255,255,255,.02)); padding: 1.5rem 1.6rem; }
.aa-newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.aa-newsletter-copy { flex: 1 1 300px; }
.aa-subscribe--inline { flex: 0 0 auto; min-width: 280px; }
.aa-subscribe--inline .aa-subscribe-group { display: flex; }

/* Image lightbox */
.aa-article img { cursor: zoom-in; }
.aa-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(0,0,0,.88); opacity: 0; visibility: hidden; transition: opacity .25s ease; cursor: zoom-out; }
.aa-lightbox.is-open { opacity: 1; visibility: visible; }
.aa-lightbox img { max-width: 100%; max-height: 100%; border-radius: .6rem; box-shadow: 0 20px 60px rgba(0,0,0,.6); transform: scale(.96); transition: transform .25s ease; }
.aa-lightbox.is-open img { transform: scale(1); }
.aa-lightbox-close { position: absolute; top: 1.1rem; right: 1.3rem; color: #fff; font-size: 2rem; line-height: 1; background: none; border: 0; cursor: pointer; opacity: .8; }
.aa-lightbox-close:hover { opacity: 1; }

/* Design polish (homepage review) */
.aa-star-on { color: var(--aa-ink); }               /* rating stars on-brand (was warning orange) */
.aa-hero-card-title { min-height: 2.4em; display: flex; align-items: center; }  /* even card heights when a title wraps */
@media (max-width: 991.98px) { .aa-hero-card-title { min-height: 0; } }

/* Wider content + floating nav on large screens (both use .container, so they
   widen together and stay aligned). Was 1440; opened up to use big screens. */
@media (min-width: 1400px) {
  body.aa-landing .container { max-width: 1600px; }
}

/* Homepage FAQ — "still have a question?" contact block (fills the left column) */
.aa-faq-contact-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); margin-bottom: .85rem; }
.aa-faq-contact-list { display: flex; flex-direction: column; gap: .6rem; max-width: 420px; }
.aa-faq-contact-item { display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem; border: 1px solid var(--bs-border-color); border-radius: .8rem; text-decoration: none; background: var(--bs-paper-bg, rgba(255,255,255,.02)); transition: border-color .2s ease, transform .2s ease; }
.aa-faq-contact-item:hover { border-color: rgba(var(--aa-accent-rgb), .5); transform: translateX(3px); }
.aa-faq-contact-item .aa-faq-contact-arrow, .aa-faq-contact-item > .ms-auto { color: var(--bs-secondary-color); }
.aa-faq-contact-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--aa-accent-rgb), .12); color: var(--aa-ink); font-size: 1.2rem; }
.aa-faq-contact-t { display: block; font-weight: 600; color: var(--bs-heading-color); line-height: 1.2; }
.aa-faq-contact-s { display: block; font-size: .8rem; color: var(--bs-secondary-color); }
.aa-faq-contact-all { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-size: .88rem; font-weight: 600; color: var(--aa-ink); text-decoration: none; }
.aa-faq-contact-all:hover { text-decoration: underline; }

/* --- Blog lead magnet (free guide download) -------------------------------
   Sits at the end of an article. Uses the accent as a tinted surface rather
   than a solid fill so the body text keeps normal contrast in both themes. */
.aa-guide-cta {
  border: 1px solid var(--bs-border-color);
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgba(var(--aa-accent-rgb), .10), rgba(var(--aa-accent-rgb), .03)),
    var(--bs-paper-bg);
  padding: 1.75rem;
}
.aa-guide-inner { display: flex; gap: 1.25rem; align-items: flex-start; }
.aa-guide-icon {
  flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: .9rem;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--aa-accent); color: var(--aa-accent-contrast);
}
.aa-guide-body { flex: 1 1 auto; min-width: 0; }
.aa-guide-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--aa-ink); margin-bottom: .35rem;
}
.aa-guide-title { font-family: 'Space Grotesk','Public Sans',sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--bs-heading-color); margin: 0 0 .5rem; }
.aa-guide-desc { color: var(--bs-body-color); margin-bottom: 1rem; }
.aa-guide-fields { display: flex; flex-wrap: wrap; gap: .6rem; }
.aa-guide-fields .form-control { flex: 1 1 190px; min-width: 0; }
.aa-guide-fields .btn { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .aa-guide-cta { padding: 1.25rem; }
  .aa-guide-inner { flex-direction: column; gap: .9rem; }
  .aa-guide-fields .form-control, .aa-guide-fields .btn { flex: 1 1 100%; }
}

/* --- Blog step-by-step (HowTo) block ------------------------------------- */
.aa-howto {
  border: 1px solid var(--bs-border-color);
  border-radius: 1.25rem;
  background: var(--bs-paper-bg);
  padding: 1.75rem;
}
.aa-howto-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.aa-howto-title { font-family: 'Space Grotesk','Public Sans',sans-serif; font-weight: 700; font-size: 1.45rem; color: var(--bs-heading-color); margin: 0; }
.aa-howto-time { font-size: .85rem; font-weight: 600; color: var(--aa-ink); white-space: nowrap; }
.aa-howto-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.aa-howto-step { display: flex; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--bs-border-color); }
.aa-howto-step:first-child { border-top: 0; padding-top: 0; }
.aa-howto-num {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
  background: var(--aa-accent); color: var(--aa-accent-contrast);
}
.aa-howto-body { flex: 1 1 auto; min-width: 0; }
.aa-howto-step-title { font-size: 1.05rem; font-weight: 700; color: var(--bs-heading-color); margin: .15rem 0 .35rem; }
.aa-howto-text { color: var(--bs-body-color); margin: 0; }
@media (max-width: 575.98px) { .aa-howto { padding: 1.25rem; } }

/* --- Cookie consent sheet -------------------------------------------------
   A floating card rather than a full-width bar, styled entirely from theme
   tokens so it reads correctly in both light and dark mode (the old version
   hard-coded a dark slate background + white text, which clashed in light). */
.aa-cc {
  position: fixed; z-index: 1080;
  left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  width: min(640px, calc(100vw - 2rem));
}
.aa-cc-card {
  background: var(--bs-paper-bg, #fff);
  border: 1px solid var(--bs-border-color);
  border-radius: 1.25rem;
  padding: 1.35rem 1.4rem;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .08);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: aa-cc-in .38s cubic-bezier(.22, .8, .3, 1) both;
}
[data-bs-theme="dark"] .aa-cc-card {
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04);
}
@keyframes aa-cc-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aa-cc-card { animation: none; } }

.aa-cc-head { display: flex; gap: .9rem; align-items: flex-start; }
.aa-cc-icon {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: .8rem;
  display: grid; place-items: center; font-size: 1.25rem;
  background: var(--aa-accent); color: var(--aa-accent-contrast);
}
.aa-cc-copy { min-width: 0; }
.aa-cc-title {
  font-family: 'Space Grotesk', 'Public Sans', sans-serif;
  font-weight: 700; font-size: 1.05rem; line-height: 1.3;
  color: var(--bs-heading-color); margin: .15rem 0 .3rem;
}
.aa-cc-text { font-size: .875rem; line-height: 1.55; color: var(--bs-body-color); margin: 0; }
.aa-cc-text a { color: var(--aa-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Preferences panel */
.aa-cc-prefs {
  margin-top: 1rem; padding-top: .35rem;
  border-top: 1px solid var(--bs-border-color);
  display: flex; flex-direction: column; gap: .15rem;
}
.aa-cc-pref {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--bs-border-color);
}
.aa-cc-prefs .aa-cc-pref:last-of-type { border-bottom: 0; }
.aa-cc-pref-copy { display: flex; flex-direction: column; min-width: 0; }
.aa-cc-pref-name { font-weight: 600; font-size: .9rem; color: var(--bs-heading-color); }
.aa-cc-pref-desc { font-size: .8rem; color: var(--bs-secondary-color); }
.aa-cc-switch { flex: 0 0 auto; margin: 0; padding: 0; min-height: 0; }
.aa-cc-switch .form-check-input { margin: 0; cursor: pointer; }
.aa-cc-switch .form-check-input:disabled { cursor: default; opacity: .55; }

/* Actions */
.aa-cc-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-top: 1.1rem;
}
.aa-cc-btns { display: flex; gap: .5rem; margin-left: auto; }
.aa-cc-btns .btn { padding-inline: 1.1rem; }
.aa-cc-link {
  background: none; border: 0; padding: 0;
  font-size: .85rem; font-weight: 600; color: var(--bs-secondary-color);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.aa-cc-link:hover { color: var(--bs-heading-color); }

@media (max-width: 575.98px) {
  .aa-cc { left: .75rem; right: .75rem; bottom: .75rem; width: auto; transform: none; }
  .aa-cc-card { padding: 1.15rem 1.15rem 1.25rem; border-radius: 1.1rem; }
  .aa-cc-actions { flex-direction: column-reverse; align-items: stretch; }
  .aa-cc-btns { margin-left: 0; }
  .aa-cc-btns .btn { flex: 1 1 0; }
  .aa-cc-link { align-self: center; margin-top: .25rem; }
  /* The sheet sits over the corner buttons on small screens — get them out of the way. */
  body.aa-cc-open .aa-fab,
  body.aa-cc-open .aa-scrolltop { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
}

/* "Reject all" must read as a true peer of "Accept all": the default outline
   grey fell to 3.77:1 on the card in light mode — below AA, and the ICO expects
   refusing consent to be as easy and prominent as giving it. */
.aa-cc-btns .btn-outline-secondary {
  color: var(--bs-heading-color);
  border-color: var(--bs-border-color);
  background: transparent;
}
.aa-cc-btns .btn-outline-secondary:hover,
.aa-cc-btns .btn-outline-secondary:focus-visible {
  color: var(--bs-heading-color);
  border-color: var(--bs-heading-color);
  background: rgba(var(--aa-ink-rgb), .07);
}

/* --- Sticky summary sidebar (desktop only) --------------------------------
   Keeps the package/order summary in view while the visitor works down a long
   form, instead of leaving a tall empty column beside it.

   The wrapper matters: a Bootstrap .row is flex, so the column is stretched to
   the full row height and `position: sticky` on the column itself would never
   engage. The sticky element has to be an inner wrapper.

   max-height + overflow guard the case where the sidebar is taller than the
   viewport (short laptop screens): it scrolls internally instead of having its
   bottom permanently cut off. When the content fits, no scrollbar appears. */
@media (min-width: 992px) {
  .aa-sticky-side {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) transparent;
  }
  .aa-sticky-side::-webkit-scrollbar { width: 6px; }
  .aa-sticky-side::-webkit-scrollbar-track { background: transparent; }
  .aa-sticky-side::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 3px; }
}

/* --- Case-study client quote --------------------------------------------- */
.aa-case-quote {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 2.25rem 1.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgba(var(--aa-accent-rgb), .07), transparent 60%),
    var(--bs-paper-bg);
  text-align: center;
}
.aa-case-quote-mark {
  display: inline-flex; margin-bottom: .5rem;
  font-size: 1.75rem; color: var(--aa-ink); opacity: .85;
}
.aa-case-quote blockquote {
  font-family: 'Space Grotesk', 'Public Sans', sans-serif;
  font-size: 1.2rem; line-height: 1.55; font-weight: 500;
  color: var(--bs-heading-color);
}
.aa-case-quote-by { font-size: .875rem; color: var(--bs-secondary-color); }
@media (max-width: 575.98px) { .aa-case-quote { padding: 1.5rem 1.25rem; } .aa-case-quote blockquote { font-size: 1.05rem; } }

/* Admin-written long-form text rendered by rich_text() (headings, lists,
   bold, links). Keeps the generated tags in step with the surrounding
   card/accordion spacing instead of inheriting browser defaults. */
.aa-rich > *:last-child { margin-bottom: 0; }
.aa-rich p { margin-bottom: 1rem; }
.aa-rich h3, .aa-rich h4, .aa-rich h5, .aa-rich h6 {
  color: var(--bs-heading-color);
  font-weight: 600;
  margin: 1.75rem 0 .75rem;
}
.aa-rich h3 { font-size: 1.25rem; }
.aa-rich h4 { font-size: 1.1rem; }
.aa-rich h5, .aa-rich h6 { font-size: 1rem; }
.aa-rich > h3:first-child, .aa-rich > h4:first-child { margin-top: 0; }
.aa-rich ul, .aa-rich ol { margin: 0 0 1rem; padding-left: 1.35rem; }
.aa-rich li { margin-bottom: .4rem; }
.aa-rich li:last-child { margin-bottom: 0; }
.aa-rich strong { color: var(--bs-heading-color); font-weight: 600; }
.aa-rich a { color: var(--aa-accent-link, var(--bs-link-color)); text-decoration: underline; text-underline-offset: 2px; }
.aa-rich code {
  background: rgba(var(--bs-body-color-rgb), .08);
  border-radius: .25rem;
  padding: .1em .35em;
  font-size: .9em;
}
/* Inside cards the block should sit flush with the card padding. */
.aa-rich--tight p:last-child, .aa-rich--tight ul:last-child, .aa-rich--tight ol:last-child { margin-bottom: 0; }

/* =======================================================================
   Search: the shared field (.aa-search), the header overlay (.aa-so)
   and the results page. One set of styles for every search on the site.
   ==================================================================== */

/* --- Shared inline field: FAQ, help centre, results page -------------- */
.aa-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 620px;
  width: 100%;
  background: var(--bs-body-bg);
  border: 1px solid rgba(var(--bs-body-color-rgb), .18);
  border-radius: 999px;
  padding: .35rem .35rem .35rem 1rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.aa-search:focus-within {
  border-color: rgba(var(--aa-accent-rgb), .75);
  box-shadow: 0 0 0 4px rgba(var(--aa-accent-rgb), .14);
}
.aa-search-icon { display: flex; color: var(--bs-secondary-color); font-size: 1.15rem; }
.aa-search:focus-within .aa-search-icon { color: var(--aa-ink); }
.aa-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--bs-body-color);
  padding: .55rem .25rem;
  font-size: 1rem;
}
.aa-search-input:focus { outline: none; }
.aa-search-input::placeholder { color: var(--bs-secondary-color); opacity: .8; }
/* Chrome draws its own clear cross on type=search; ours matches the theme. */
.aa-search-input::-webkit-search-decoration,
.aa-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.aa-search-clear {
  flex: 0 0 auto;
  border: 0;
  background: rgba(var(--bs-body-color-rgb), .08);
  color: var(--bs-body-color);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease;
}
.aa-search-clear:hover { background: rgba(var(--bs-body-color-rgb), .16); }
.aa-search-go {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: var(--aa-accent);
  color: var(--aa-accent-contrast);
  font-weight: 600;
  padding: .5rem 1.25rem;
  cursor: pointer;
  transition: filter .15s ease;
}
.aa-search-go:hover { filter: brightness(1.06); }

/* --- Drawer entry point (mobile) --------------------------------------
   Sized and rounded like the nav rows below it so the drawer reads as one
   list, but with a tinted icon tile and a two-line label so it is obviously
   an action rather than a disabled text field. */
.aa-drawer-search {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: calc(100% - .8rem);
  min-height: 56px;
  margin: .5rem .4rem 1rem;
  padding: .55rem .75rem;
  border: 1px solid rgba(var(--bs-body-color-rgb), .12);
  border-radius: .65rem;
  background: rgba(var(--bs-body-color-rgb), .04);
  color: var(--bs-body-color);
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.aa-drawer-search:hover,
.aa-drawer-search:active {
  background: rgba(var(--aa-accent-rgb), .10);
  border-color: rgba(var(--aa-accent-rgb), .35);
}
.aa-drawer-search-ic {
  flex: 0 0 auto;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: .55rem;
  background: rgba(var(--aa-accent-rgb), .14);
  /* ink, not accent: lime text on a pale lime tile is unreadable in light mode */
  color: var(--aa-ink);
  font-size: 1.2rem;
}
.aa-drawer-search-text { display: flex; flex-direction: column; min-width: 0; }
.aa-drawer-search-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bs-heading-color);
  line-height: 1.25;
}
.aa-drawer-search-sub {
  font-size: .8rem;
  color: var(--bs-secondary-color);
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aa-drawer-search-arrow {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--bs-secondary-color);
  opacity: .45;
  font-size: 1rem;
}
.aa-drawer-search:active .aa-drawer-search-arrow { color: var(--aa-ink); opacity: 1; }

/* --- Overlay ---------------------------------------------------------- */
body.aa-so-open { overflow: hidden; }
.aa-so { position: fixed; inset: 0; z-index: 1080; }
.aa-so-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s ease;
}
.aa-so.is-open .aa-so-backdrop { opacity: 1; }
.aa-so-panel {
  position: relative;
  width: min(680px, calc(100% - 2rem));
  margin: min(12vh, 6rem) auto 0;
  background: var(--bs-body-bg);
  border: 1px solid rgba(var(--bs-body-color-rgb), .14);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  overflow: hidden;
  transform: translateY(-10px) scale(.985);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 40rem);
}
.aa-so.is-open .aa-so-panel { transform: none; opacity: 1; }

.aa-so-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(var(--bs-body-color-rgb), .12);
}
.aa-so-icon { display: flex; color: var(--aa-ink); font-size: 1.25rem; }
.aa-so-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--bs-body-color);
  font-size: 1.05rem;
  padding: .35rem 0;
}
.aa-so-input:focus { outline: none; }
.aa-so-input::-webkit-search-decoration,
.aa-so-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.aa-so-clear {
  border: 0; background: rgba(var(--bs-body-color-rgb), .08);
  color: var(--bs-body-color);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
}
.aa-so-close {
  border: 1px solid rgba(var(--bs-body-color-rgb), .18);
  background: transparent;
  color: var(--bs-secondary-color);
  border-radius: 7px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .3rem .55rem;
  cursor: pointer;
}
.aa-so-close:hover { color: var(--bs-body-color); border-color: rgba(var(--bs-body-color-rgb), .35); }

.aa-so-body { overflow-y: auto; overscroll-behavior: contain; padding: .5rem 0; flex: 1 1 auto; }
.aa-so-hint { color: var(--bs-secondary-color); font-size: .92rem; text-align: center; margin: 1.75rem 1rem; }
.aa-so-group + .aa-so-group { border-top: 1px solid rgba(var(--bs-body-color-rgb), .08); margin-top: .35rem; padding-top: .35rem; }
.aa-so-group-head {
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem .3rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.aa-so-hit {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 .75rem;
  padding: .6rem 1rem;
  text-decoration: none;
  color: inherit;
}
.aa-so-hit-title { font-weight: 600; color: var(--bs-heading-color); }
.aa-so-hit-text {
  grid-column: 1 / -1;
  color: var(--bs-secondary-color);
  font-size: .85rem;
  margin-top: .15rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aa-so-hit-go { color: var(--aa-ink); opacity: 0; transition: opacity .15s ease; }
.aa-so-hit:hover, .aa-so-hit.is-active { background: rgba(var(--aa-accent-rgb), .10); }
.aa-so-hit:hover .aa-so-hit-go, .aa-so-hit.is-active .aa-so-hit-go { opacity: 1; }
.aa-so-all {
  display: block;
  margin: .5rem 1rem .25rem;
  padding: .6rem;
  text-align: center;
  border-radius: 10px;
  background: rgba(var(--bs-body-color-rgb), .06);
  color: var(--bs-body-color);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
}
.aa-so-all:hover, .aa-so-all.is-active { background: rgba(var(--aa-accent-rgb), .16); color: var(--bs-heading-color); }

.aa-so-foot {
  display: flex; flex-wrap: wrap; gap: 1rem;
  padding: .6rem 1rem;
  border-top: 1px solid rgba(var(--bs-body-color-rgb), .12);
  color: var(--bs-secondary-color);
  font-size: .75rem;
}
.aa-so-foot kbd {
  background: rgba(var(--bs-body-color-rgb), .10);
  border-radius: 4px;
  padding: .05rem .3rem;
  margin-right: .15rem;
  font-size: .72rem;
  color: inherit;
}
@media (max-width: 575.98px) {
  .aa-so-panel { margin-top: 0; width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; }
  .aa-so-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aa-so-backdrop, .aa-so-panel { transition: none; }
}

/* --- Results page ------------------------------------------------------ */
.aa-search-group-title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: .85rem;
}
.aa-search-group-count {
  margin-left: auto;
  background: rgba(var(--bs-body-color-rgb), .09);
  border-radius: 999px;
  padding: .05rem .5rem;
  font-size: .72rem;
}
.aa-search-list { display: flex; flex-direction: column; }
.aa-search-hit {
  display: block;
  padding: .7rem 0;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid rgba(var(--bs-body-color-rgb), .08);
}
.aa-search-hit:first-child { border-top: 0; padding-top: 0; }
.aa-search-hit-title { display: block; font-weight: 600; color: var(--bs-heading-color); }
.aa-search-hit:hover .aa-search-hit-title { color: var(--aa-ink); }
.aa-search-hit-text { display: block; color: var(--bs-secondary-color); font-size: .87rem; margin-top: .15rem; }

/* "Proposal Required" pricing tag: a quiet outline badge instead of Bootstrap's
   off-palette info-blue. Neutral (adds no colour), distinct from the filled
   billing pill next to it, and reads as informational rather than a highlight. */
.aa-badge-quote {
  background: transparent;
  border: 1px solid rgba(var(--bs-body-color-rgb), .25);
  color: var(--bs-secondary-color);
  font-weight: 500;
}

/* =======================================================================
   Homepage stats band — lifts the flat "13 / UK / From £149 / Rolling"
   row with a soft top glow, refined labels, and gradient dividers between
   the figures so it reads as a designed band rather than a plain box.
   ==================================================================== */
.aa-stats-band {
  /* Explicit grid so the four figures always share the width evenly — the
     wide ones ("From £149", "Rolling") never get squeezed or clipped. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 2.5rem 1rem;
  background:
    radial-gradient(130% 160% at 50% -10%, rgba(var(--aa-accent-rgb), .07), transparent 55%),
    var(--bs-paper-bg, var(--bs-body-bg));
}
.aa-stats-band .aa-stat {
  position: relative;
  padding: .5rem .75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .55rem;
  min-width: 0;
}
@media (max-width: 991.98px) {
  .aa-stats-band { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
}
/* Number colour + glow are set in landing.css (loaded after this file) so the
   theme-aware solid ink beats the gradient rule that also lives there. */
/* Label: uppercase, tracked, a touch brighter than plain muted — reads as a
   deliberate caption under each figure. */
.aa-stats-band .aa-stat-label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  line-height: 1.35;
}
/* Thin gradient dividers between the figures (desktop only — on the 2-col
   mobile grid they would land in the wrong places). */
@media (min-width: 992px) {
  .aa-stats-band .aa-stat + .aa-stat::before {
    content: "";
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(var(--bs-body-color-rgb), .18), transparent);
  }
}
/* On mobile the 2×2 grid gets a little vertical breathing room between rows. */
@media (max-width: 991.98px) {
  .aa-stats-band .aa-stat { padding: 1rem .5rem; }
}

/* Uploaded brand logos sit inline with icon-font glyphs: match their optical
   size and keep their own colours (no currentColor tinting on real logos). */
.aa-brand-svg {
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  vertical-align: -0.15em;
  display: inline-block;
}
.aa-logo .aa-brand-svg,
.aa-tool .aa-brand-svg { width: 1.35em; height: 1.35em; }

/* --- Breathing room, part 2: inside the blocks -----------------------------
   Section padding alone does not make a page feel calm; the header-to-content
   step and the space between stacked cards matter just as much. These lift the
   two most repeated relationships across every public page. */

/* Section intro (eyebrow + title + lead) to the content beneath it. Bootstrap's
   mb-5 is 3rem; on a full-width block that reads tight next to 100px section
   padding, so nudge it up on desktop only (mobile stays compact). */
@media (min-width: 992px) {
  .aa-landing .aa-section > .container > .text-center.mb-5,
  .aa-landing .aa-section > .container > .d-flex.mb-5 { margin-bottom: 3.75rem !important; }
}

/* Stacked cards: give rows a taller gap than columns so a wrapped grid does not
   look like a solid slab. Columns keep their existing width relationship. */
@media (min-width: 768px) {
  .aa-landing .row.g-4 { --bs-gutter-y: 2rem; }
  /* Scoped with .aa-landing as well, otherwise the rule above (one class more
     specific) wins and the index grids silently keep the smaller row gap. */
  .aa-landing .aa-card-grid.row { --bs-gutter-y: 2.75rem; }
}
@media (min-width: 1200px) {
  .aa-landing .aa-card-grid.row { --bs-gutter-y: 3.25rem; }
}

/* Cards themselves: a touch more inner padding on wide screens so the border
   is not hugging the text. Small screens keep 1.75rem (space is precious). */
@media (min-width: 992px) {
  .aa-landing .aa-card,
  .aa-landing .aa-card-static { padding: 2.15rem; }
  /* Media cards put their padding on the inner body, so leave those alone. */
  .aa-landing .aa-card.aa-portfolio-card,
  .aa-landing .aa-card.aa-blog-card { padding: 0; }
}

/* --- Packages page: service groups need block-level separation -------------
   The whole page is one <section>, so the page rhythm above cannot help here:
   seven service groups were stacking with Vuexy's small utility margins (20px
   before a heading, 16px after), which read as one dense slab. These give each
   group the presence of a section without splitting the markup. */
.aa-pkg-group { margin: 4.5rem 0 2rem; }
.aa-pkg-group--first { margin-top: 1rem; }   /* the intro block already spaces it */
.aa-pkg-faq { margin-top: 5.5rem; }

@media (max-width: 991.98px) {
  .aa-pkg-group { margin: 3.5rem 0 1.5rem; }
  .aa-pkg-faq   { margin-top: 4rem; }
}
@media (max-width: 575.98px) {
  .aa-pkg-group { margin: 2.75rem 0 1.25rem; }
  .aa-pkg-faq   { margin-top: 3rem; }
}

/* --- Card grid tiers -------------------------------------------------------
   Every grid of cards belongs to exactly one of these, so spacing stops being
   whatever Bootstrap gutter the page happened to use. Before this, comparable
   grids were sitting at 1rem, 2rem or 3.25rem depending on the file.

   .aa-card-grid          feature/listing cards (services, industries, work,
                          packages, guides) — the page's headline content.
   .aa-card-grid--dense   compact supporting cards inside a detail page
                          (deliverables, benefits, process steps, help tiles).
                          Deliberately tighter: these are short, numerous and
                          read as a list, so feature-grid air would scatter them.
   Mobile keeps both tight — the small-screen rule further down still applies. */
@media (min-width: 768px) {
  .aa-landing .aa-card-grid--dense.row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
}
@media (min-width: 1200px) {
  .aa-landing .aa-card-grid--dense.row { --bs-gutter-x: 1.75rem; --bs-gutter-y: 1.75rem; }
}

/* Packages page: each service group carries a summary line and a link to the
   full service page. The border now sits under the whole heading block (title +
   summary) rather than hugging the title, so the group reads as one unit. */
.aa-pkg-group { border-bottom: 1px solid var(--bs-border-color); padding-bottom: 1.1rem; }
.aa-pkg-group-link { color: var(--aa-ink); text-decoration: none; }
.aa-pkg-group-link:hover { color: var(--aa-ink); text-decoration: underline; }

/* --- Step flow: animated connectors between "How it works" cards -----------
   The four step cards read as separate boxes; a travelling chevron in the
   gutter turns them into a sequence you follow left to right. Drawn on the
   column (not the card) so it sits in the gap rather than on top of content,
   and only where the cards are actually side by side. */
/* AOS leaves a translate() on each animated column, which turns the column
   into a stacking context. Without an explicit order the *next* column (later
   in the DOM) would paint over the previous column's chevron — the z-index on
   the ::after is trapped inside its own column and cannot win. Descending
   z-index, left to right, keeps each arrow above the card it points toward
   (works for the sideways desktop arrows and the downward tablet ones alike). */
.aa-steps > [class*="col-"] { position: relative; }
.aa-steps > [class*="col-"]:nth-child(1) { z-index: 6; }
.aa-steps > [class*="col-"]:nth-child(2) { z-index: 5; }
.aa-steps > [class*="col-"]:nth-child(3) { z-index: 4; }
.aa-steps > [class*="col-"]:nth-child(4) { z-index: 3; }
.aa-steps > [class*="col-"]:nth-child(5) { z-index: 2; }

@media (min-width: 992px) {
  .aa-steps > [class*="col-"]:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    /* Sit in the centre of the gutter. translate(50%) already handles the
       half-width shift, so the anchor is the column's padding edge (right: 0),
       not the gutter's far side — otherwise the chevron lands on the next card. */
    right: 0;
    transform: translate(50%, -50%);
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 2;
    /* Always clearly visible; the motion below is a glide, not a fade — a
       pulsing opacity read as flicker (each staggered arrow froze at a
       different brightness in a still frame). */
    opacity: .85;
    background-color: var(--aa-accent);
    -webkit-mask: var(--aa-step-chevron) center / contain no-repeat;
            mask: var(--aa-step-chevron) center / contain no-repeat;
    animation: aa-step-flow 2.4s ease-in-out infinite;
  }
  /* Stagger so the pulse reads as 1 -> 2 -> 3 -> 4 rather than four blinks. */
  .aa-steps > [class*="col-"]:nth-child(2)::after { animation-delay: .35s; }
  .aa-steps > [class*="col-"]:nth-child(3)::after { animation-delay: .7s; }
  .aa-steps > [class*="col-"]:nth-child(4)::after { animation-delay: 1.05s; }
}

/* Double chevron drawn as a mask, so it takes the accent colour in either
   theme. Two strokes read as movement even while still; a single one looked
   like a stray bracket at this size. */
:root {
  --aa-step-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 6l6 6-6 6'/%3E%3Cpath d='M14 6l6 6-6 6' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes aa-step-flow {
  0%, 100% { transform: translate(50%, -50%) translateX(-3px); }
  50%      { transform: translate(50%, -50%) translateX(3px); }
}

/* Light theme: the lime chevrons wash out on the near-white background, so the
   arrows switch to a dark ink there (they keep the accent in dark theme). This
   one rule covers both the sideways desktop arrows and the downward tablet
   ones, since it targets the same ::after regardless of breakpoint. */
[data-bs-theme="light"] .aa-steps > [class*="col-"]:not(:last-child)::after {
  background-color: #23262e;
}

/* Stacked layout (tablet/phone): the arrow would point into empty space, so
   it turns downward between the rows instead. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .aa-steps > [class*="col-"] { position: relative; }
  .aa-steps > [class*="col-"]:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(var(--bs-gutter-y, 1.5rem) * -0.5);
    transform: translate(-50%, 50%) rotate(90deg);
    width: 18px; height: 18px;
    pointer-events: none;
    background-color: rgba(var(--aa-accent-rgb), .8);
    -webkit-mask: var(--aa-step-chevron) center / contain no-repeat;
            mask: var(--aa-step-chevron) center / contain no-repeat;
  }
  /* Only between rows of two, not beside the left card. */
  .aa-steps > [class*="col-"]:nth-child(odd)::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aa-steps > [class*="col-"]::after { animation: none; opacity: .5; }
}