/* ==========================================================================
   Aasta Health: custom enhancements (accessibility + UX)
   Loaded last so it can layer on top of theme/Elementor styles.
   ========================================================================== */

/* --- Accessibility: visible keyboard focus ------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #A266AB;
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Accessibility: respect reduced-motion preference -------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Mobile sticky tap-to-call bar --------------------------------------- */
.aasta-callbar { display: none; }
@media (max-width: 767px) {
  .aasta-callbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    padding: 15px 16px calc(15px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(90deg, #A266AB 0%, #FB5FAB 100%);
    color: #fff;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.2px;
    text-decoration: none;
    box-shadow: 0 -4px 22px rgba(15, 23, 42, 0.20);
  }
  .aasta-callbar:hover, .aasta-callbar:focus { color: #fff; }
  .aasta-callbar svg { width: 20px; height: 20px; flex: none; }
  /* keep page content clear of the fixed bar */
  body { padding-bottom: 66px !important; }
}

/* Hero video: instant poster paint, video fades in when loaded */
.aasta-hero__video-container { position: relative; }
.aasta-hero__video-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 0.6s ease;
}
.aasta-hero__video-poster.is-hidden { opacity: 0; pointer-events: none; }
.aasta-hero__video { position: relative; z-index: 0; }

/* --- Homepage hero polish (deeper design pass) --------------------------- */
/* Bigger H1 for the emotional hook to actually land: target ONLY the main H3, not H6 eyebrow or location cards */
.home .aasta-hero__text h1.elementor-heading-title,
.home .aasta-hero__text h3.elementor-heading-title {
  font-size: clamp(32px, 5vw, 52px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}
@media (max-width: 767px) {
  .home .aasta-hero__text h1.elementor-heading-title,
.home .aasta-hero__text h3.elementor-heading-title {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }
}

/* Available 24/7 badge next to the hero phone */
.aasta-hero__phone-badge {
  font-size: 13px;
  font-weight: 600;
  color: #16A34A;
  margin-left: 4px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .aasta-hero__phone-badge { display: block; margin-left: 24px; margin-top: 2px; }
}

/* Location strip: keep it readable on mobile, push below-fold priority */
@media (max-width: 767px) {
  .aasta-hero .elementor-element-5f647102 {
    margin-top: 24px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(162, 102, 171, 0.15);
  }
}

/* CTA button contrast bump: outline on light background versions */
.aasta-cta .elementor-button:not(:hover) {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) inset, 0 6px 20px rgba(162, 102, 171, 0.25);
}
.aasta-cta .elementor-button:hover {
  box-shadow: 0 12px 32px rgba(162, 102, 171, 0.4);
}

/* Values card polish: subtle top-border accent so cards feel structured */
.aasta-principle-card {
  border-top: 3px solid #A266AB !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.aasta-principle-card:hover {
  border-top-color: #ED1A30 !important;
}

/* Mobile: single-column stack for values cards, tighter spacing */
@media (max-width: 767px) {
  .aasta-principle-card { padding: 24px 20px !important; margin-bottom: 12px; }
}

/* Global mobile-friendly typography scale */
@media (max-width: 767px) {
  .aasta-page-hero__title { font-size: 30px !important; line-height: 1.2 !important; }
  h2.elementor-heading-title { font-size: 26px !important; line-height: 1.25 !important; }
}

/* Reviews carousel: ensure last card doesn't cut off on medium screens */
@media (max-width: 1024px) {
  .aasta-reviews__track { padding-right: 24px; scroll-padding-right: 24px; }
}

/* ============================================================
   Mobile hardening pass (v2): cohesion + safety net
   ============================================================ */

/* Kill horizontal overflow globally: safety net for any rogue widths */
html, body { max-width: 100vw; overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; }

/* iOS Safari zoom-on-focus fix: form inputs must be >=16px */
@media (max-width: 767px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* Standardize mobile tap targets: 44px minimum */
@media (max-width: 767px) {
  .aasta-nav__link,
  .aasta-mobile-menu__link,
  .aasta-footer-link,
  .elementor-button,
  button, a[role="button"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Reviews carousel: proper mobile swipe scroll */
@media (max-width: 767px) {
  .aasta-reviews__track {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 0 16px 8px;
    gap: 12px !important;
  }
  .aasta-reviews__track > * {
    scroll-snap-align: start;
    flex: 0 0 85%;
  }
}

/* Mobile menu: tap feedback */
.aasta-mobile-menu__link:active {
  background: rgba(162, 102, 171, 0.08) !important;
  transform: scale(0.98);
}

/* Consistent focus rings on interactive elements (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #A266AB !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Smoother button hover-active states */
.elementor-button, .aasta-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
.elementor-button:active, .aasta-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Consistent scroll-margin so anchor links don't hide under sticky nav */
[id] { scroll-margin-top: 96px; }

/* Prevent orphan words on mobile headlines (H1/H2) */
@media (max-width: 767px) {
  h1, h2, .aasta-page-hero__title, .aasta-hero__text h1, .aasta-hero__text h3 {
    text-wrap: balance;
    word-break: break-word;
    hyphens: none;
  }
}

/* Consistent CTA section on mobile (dark gradient CTAs across pages) */
@media (max-width: 767px) {
  .aasta-cta { padding: 48px 24px !important; }
  .aasta-cta h2 { font-size: 26px !important; line-height: 1.2 !important; }
  .aasta-cta p { font-size: 15px !important; }
  .aasta-cta .elementor-button { width: auto !important; min-width: 200px; }
}

/* Body base line-height for readable paragraphs */
p { line-height: 1.65; }

/* Mobile: no headline lines wider than 20 chars */
@media (max-width: 480px) {
  .aasta-page-hero__title, .aasta-hero__text h1, .aasta-hero__text h3 { max-width: 20ch; }
}

/* Ensure sticky call bar never covers a form submit or CTA */
@media (max-width: 767px) {
  form { margin-bottom: 24px; }
}

/* Ensure link hovers on mobile don't stick (touch devices) */
@media (hover: none) {
  a:hover, button:hover { transform: none !important; }
}

/* ============================================================
   SECTION RHYTHM: read as one document, not a stack of boxes
   ------------------------------------------------------------
   Every section shipped with identical padding (80px 40px) and
   hard white/cream alternation, so pages read as five equal
   blocks. Two moves fix it: weight the vertical air by how much
   each section matters, and melt the tinted sections into their
   white neighbours so no hard seam remains.
   ============================================================ */

/* 1. Weighted vertical rhythm. The emotional core breathes most,
      dense list content sits tightest. */
.aasta-what,
.aasta-mission     { padding-top: 112px !important; padding-bottom: 112px !important; }
.aasta-qualifies   { padding-top: 96px  !important; padding-bottom: 96px  !important; }
.aasta-hservices,
.aasta-hiw,
.aasta-why         { padding-top: 84px  !important; padding-bottom: 84px  !important; }
.aasta-locations   { padding-top: 96px  !important; padding-bottom: 96px  !important; }
.aasta-faq         { padding-top: 72px  !important; padding-bottom: 88px  !important; }

/* 2. Melt the seams. Tinted sections fade to white at both edges
      instead of hard-banding against the section above and below. */
.aasta-hservices,
.aasta-hiw,
.aasta-why {
  background: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #F9F7F4 7%,
    #F9F7F4 93%,
    #FFFFFF 100%
  ) !important;
}

/* 3. Vary the header-to-content gap. 56px on every section is a
      metronome; letting it move keeps the eye interested. */
.aasta-hservices__header { margin-bottom: 64px !important; }
.aasta-hiw__header       { margin-bottom: 52px !important; }
.aasta-why__header       { margin-bottom: 60px !important; }
.aasta-faq__header       { margin-bottom: 40px !important; }
.aasta-locations__header { margin-bottom: 56px !important; }

/* 4. Break the "same centred column, five times" repetition by
      letting content widths differ with the content type. */
.aasta-hservices__grid { max-width: 1140px !important; }
.aasta-hiw__steps      { max-width: 960px  !important; }
.aasta-faq__inner      { max-width: 720px  !important; }

/* Mobile: same rhythm, compressed. Keeps the weighting without
   burning screen height on a small device. */
@media (max-width: 767px) {
  .aasta-what,
  .aasta-mission     { padding-top: 68px !important; padding-bottom: 68px !important; }
  .aasta-qualifies   { padding-top: 60px !important; padding-bottom: 60px !important; }
  .aasta-hservices,
  .aasta-hiw,
  .aasta-why         { padding-top: 52px !important; padding-bottom: 52px !important; }
  .aasta-locations   { padding-top: 60px !important; padding-bottom: 60px !important; }
  .aasta-faq         { padding-top: 48px !important; padding-bottom: 56px !important; }

  .aasta-hservices__header { margin-bottom: 36px !important; }
  .aasta-hiw__header       { margin-bottom: 32px !important; }
  .aasta-why__header       { margin-bottom: 34px !important; }
  .aasta-faq__header       { margin-bottom: 28px !important; }
  .aasta-locations__header { margin-bottom: 32px !important; }
}

/* ============================================================
   Mobile design polish: flat-spot fixes
   ============================================================ */

/* Stats card: clean 2x2 grid on mobile so it stops looking left-hugged */
@media (max-width: 767px) {
  .aasta-stats__float {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 8px !important;
    padding: 24px 16px !important;
    align-items: stretch !important;
    justify-content: initial !important;
  }
  .aasta-stat {
    flex: unset !important;
    width: 100% !important;
    padding: 8px 4px !important;
    text-align: center;
  }
  /* Kill all dividers on mobile: grid gaps are the separator now */
  .aasta-stat::after { display: none !important; }
  .aasta-stat { border: none !important; padding-bottom: 8px !important; }
  /* Row separator only between top row and bottom row */
  .aasta-stat:nth-child(1),
  .aasta-stat:nth-child(2) {
    border-bottom: 1px solid rgba(162,102,171,0.12) !important;
    padding-bottom: 16px !important;
  }
  .aasta-stat__label { white-space: normal !important; font-size: 12px !important; }
  .aasta-stat__number { font-size: 28px !important; }
}

/* Mobile refinements (frontend-design pass): the audience skews 40-60 on a phone.
   1) The hero phone is a primary CTA but was only 25px tall with no padding.
      Give it a proper 44px tap target so a panicked one-thumb tap lands. */
@media (max-width: 767px) {
  .aasta-hero__phone {
    padding: 11px 4px !important;
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* Trim vertical air between sections on mobile so it doesn't feel empty */
@media (max-width: 767px) {
  .aasta-cta,
  .aasta-services,
  .aasta-principles,
  .aasta-reviews { padding-top: 48px !important; padding-bottom: 48px !important; }
  section, .e-con-boxed { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Values H2 was wrapping ugly on mobile: tighten it */
@media (max-width: 767px) {
  .aasta-principles h2.elementor-heading-title { font-size: 26px !important; padding: 0 8px; }
}

/* Hamburger to X: pivot from the center and use a plain ease. The old
   overshoot easing (cubic-bezier with negative/over-1 control points) made
   the two bars bounce past each other, which read as a glitch on a 2px line. */
.aasta-hamburger span {
  transform-origin: center !important;
  transition: transform 0.28s ease, opacity 0.2s ease !important;
}

/* Mobile menu links: cascade in when menu opens */
.aasta-mobile-menu .aasta-mobile-menu__link {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.aasta-mobile-menu.is-open .aasta-mobile-menu__link {
  opacity: 1;
  transform: translateY(0);
}
.aasta-mobile-menu.is-open .aasta-mobile-menu__link:nth-child(1) { transition-delay: 0.15s; }
.aasta-mobile-menu.is-open .aasta-mobile-menu__link:nth-child(2) { transition-delay: 0.20s; }
.aasta-mobile-menu.is-open .aasta-mobile-menu__link:nth-child(3) { transition-delay: 0.25s; }
.aasta-mobile-menu.is-open .aasta-mobile-menu__link:nth-child(4) { transition-delay: 0.30s; }
.aasta-mobile-menu.is-open .aasta-mobile-menu__link:nth-child(5) { transition-delay: 0.35s; }
.aasta-mobile-menu.is-open .aasta-mobile-menu__link:nth-child(6) { transition-delay: 0.40s; }
.aasta-mobile-menu.is-open .aasta-mobile-menu__link:nth-child(7) { transition-delay: 0.45s; }
.aasta-mobile-menu.is-open .aasta-mobile-menu__link:nth-child(8) { transition-delay: 0.50s; }
.aasta-mobile-menu.is-open .aasta-mobile-menu__link:nth-child(9) { transition-delay: 0.55s; }

/* Footer bottom bar: everything on ONE line: copyright | privacy · terms | made by */
.elementor-element-62473a05 > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px 32px !important;
  width: 100% !important;
}
.elementor-element-62473a05 .elementor-element-7aa2537f {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.elementor-element-7aa2537f .elementor-widget-container > p {
  display: inline !important;
  margin: 0 !important;
}
/* Made by kliq.la: subtle pill, Aasta brand accent on the link */
.aasta-madeby {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 0 20px !important;
  padding: 6px 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;
  font-family: 'Nunito Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-decoration: none !important;
  white-space: nowrap;
  vertical-align: middle;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
.aasta-madeby b {
  font-weight: 700 !important;
  color: #ED4B7A !important;
  transition: color 0.2s ease !important;
}
.aasta-madeby:hover {
  background: rgba(162, 102, 171, 0.12) !important;
  border-color: rgba(162, 102, 171, 0.35) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}
.aasta-madeby:hover b { color: #FB5FAB !important; }
.elementor-element-7d6d524a { flex: 0 0 auto !important; }
.elementor-element-7d6d524a > .elementor-widget-container > div {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
  margin: 0 !important;
}
@media (max-width: 640px) {
  .elementor-element-62473a05 > .e-con-inner {
    justify-content: center !important;
    text-align: center;
  }
  .aasta-madeby { display: block !important; margin: 8px 0 0 0 !important; }
}

/* ============================================================
   Mobile fixes (2026-08-21): footer whitespace + softer nav
   ============================================================ */

/* Footer whitespace bug: the mobile tap-to-call bar is position:fixed, so the
   body carried a 66px bottom padding to keep content clear of it. But that
   padding showed the PINK body background as a strip below the dark footer.
   Move the clearance INTO the dark footer container so the space is dark, and
   the fixed call bar sits over dark, not a pink gap. */
@media (max-width: 767px) {
  body { padding-bottom: 0 !important; }
  .e-con.e-parent:has(.aasta-footer-link) {
    padding-bottom: 72px !important;
  }
}

/* ============================================================
   LEFT-ALIGN: headings + body text read left, not centered
   ------------------------------------------------------------
   Broad override first, then re-center the elements that earn it
   (CTA banners, footer, stats, service cards, mobile menu).
   ============================================================ */

/* 1. Default everything to left (high specificity to beat inline Elementor) */
h1, h2, h3, h4, h5,
p,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-heading,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
body h1, body h2, body h3, body h4, body h5,
body p,
body .elementor-heading-title {
  text-align: left !important;
}

/* Beat the @media(max-width:767px) inline center rules */
@media (max-width: 767px) {
  h1, h2, h3, h4, h5,
  p,
  .elementor-widget-heading .elementor-heading-title,
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p,
  body .elementor-heading-title {
    text-align: left !important;
  }
}

/* 2. Subpage hero: left-align content block */
.aasta-page-hero__content,
.aasta-page-hero__title,
.aasta-page-hero__subtitle,
.aasta-page-hero__eyebrow {
  text-align: left !important;
}

/* 3. Homepage hero: left-align (beat .aasta-hero__text h1 center) */
.aasta-hero__text,
.aasta-hero__text h1,
.aasta-hero__text h2,
.aasta-hero__text h3,
.aasta-hero__text h6,
.aasta-hero__text p,
.aasta-hero__text .elementor-widget-text-editor,
.aasta-hero__text .elementor-heading-title,
.aasta-hero__text .elementor-widget-heading .elementor-heading-title {
  text-align: left !important;
}
@media (max-width: 767px) {
  .aasta-hero__text h1,
  .aasta-hero__text h2,
  .aasta-hero__text h3,
  .aasta-hero__text h6,
  .aasta-hero__text p,
  .aasta-hero__text .elementor-heading-title {
    text-align: left !important;
  }
}

/* 4. Section eyebrows ("About Us", "Our Services") stay centered */
.aasta-hservices__eyebrow,
.aasta-hiw__eyebrow,
.aasta-what__eyebrow,
.aasta-qualifies__eyebrow,
.aasta-why__eyebrow,
.aasta-mission__eyebrow,
.aasta-locations__eyebrow,
.aasta-faq__eyebrow,
.aasta-faq-section__header,
.aasta-contact__form-eyebrow,
.aasta-contact__loc-eyebrow,
.aasta-why-call__eyebrow {
  text-align: center !important;
}

/* 5. Section header titles + subtitles stay centered (they introduce a grid) */
.aasta-hservices__title,
.aasta-hservices__subtitle,
.aasta-hiw__title,
.aasta-hiw__subtitle,
.aasta-why__title,
.aasta-why__subtitle,
.aasta-locations__title,
.aasta-locations__subtitle,
.aasta-faq-section__heading,
.aasta-faq-section__subheading,
.aasta-why-call__title,
.aasta-why-call__subtitle {
  text-align: center !important;
}

/* 6. Service cards on homepage: centered (icon + title + desc) */
.aasta-service-card,
.aasta-service-card h3,
.aasta-service-card p,
.aasta-service-card .elementor-widget-text-editor,
.aasta-service-card .elementor-heading-title {
  text-align: center !important;
}

/* 7. Subpage service/feature cards: centered */
.aasta-hservice-card,
.aasta-hservice-card__title,
.aasta-hservice-card__body,
.aasta-why-card,
.aasta-why-card__title,
.aasta-why-card__body,
.aasta-why-call__card,
.aasta-why-call__card-title,
.aasta-why-call__card-body,
.aasta-location-card,
.aasta-contact__loc-card {
  text-align: center !important;
}

/* 8. Principle cards on homepage: centered */
.aasta-principle-card,
.aasta-principle-card h3,
.aasta-principle-card h2,
.aasta-principle-card p,
.aasta-principle-card .elementor-heading-title {
  text-align: center !important;
}

/* 9. HIW steps: centered */
.aasta-hiw__step,
.aasta-hiw__step-title,
.aasta-hiw__step-body,
.aasta-hiw__step-number {
  text-align: center !important;
}

/* 10. CTA sections: centered */
.aasta-cta h2,
.aasta-cta p,
.aasta-cta .elementor-widget-text-editor,
.aasta-cta .elementor-widget-text-editor p,
.aasta-cta .elementor-heading-title,
.aasta-cta .elementor-widget-heading .elementor-heading-title {
  text-align: center !important;
}

/* 11. Footer: centered */
.e-con.e-parent:has(.aasta-footer-link) h6,
.e-con.e-parent:has(.aasta-footer-link) p,
.e-con.e-parent:has(.aasta-footer-link) .elementor-heading-title,
.e-con.e-parent:has(.aasta-footer-link) .elementor-widget-heading .elementor-heading-title {
  text-align: center !important;
}

/* 12. Stats row: centered */
.aasta-stat,
.aasta-stat__label,
.aasta-stat__number {
  text-align: center !important;
}

/* 13. Reviews section: centered header */
.aasta-reviews__title {
  text-align: center !important;
}

/* 14. Mobile menu: stays centered */
.aasta-mobile-menu,
.aasta-mobile-menu__link {
  text-align: center !important;
}

/* 15. Insurance/coverage strip on homepage: centered */
.elementor-element-6fc122d2,
.elementor-element-6fc122d2 h6,
.elementor-element-6fc122d2 p {
  text-align: center !important;
}

/* 16. FAQ answers: left-align (they are prose) */
.aasta-faq__answer,
.aasta-faq__answer p {
  text-align: left !important;
}

/* 17. Contact form: left-align labels, fields stay natural */
.aasta-contact__form-title,
.aasta-contact__form-sub,
.aasta-contact__form-note {
  text-align: left !important;
}

/* 18. Re-center on mobile (beat the mobile left-align overrides above) */
@media (max-width: 767px) {
  .aasta-cta h2,
  .aasta-cta p,
  .aasta-cta .elementor-heading-title,
  .aasta-cta .elementor-widget-heading .elementor-heading-title { text-align: center !important; }

  .aasta-service-card h3,
  .aasta-service-card p,
  .aasta-service-card .elementor-heading-title { text-align: center !important; }

  .aasta-hservice-card__title,
  .aasta-hservice-card__body,
  .aasta-why-card__title,
  .aasta-why-card__body,
  .aasta-why-call__card-title,
  .aasta-why-call__card-body,
  .aasta-hiw__step-title,
  .aasta-hiw__step-body,
  .aasta-location-card,
  .aasta-contact__loc-card { text-align: center !important; }

  .aasta-hservices__title,
  .aasta-hservices__subtitle,
  .aasta-hiw__title,
  .aasta-hiw__subtitle,
  .aasta-why__title,
  .aasta-why__subtitle,
  .aasta-locations__title,
  .aasta-locations__subtitle,
  .aasta-faq-section__heading,
  .aasta-faq-section__subheading,
  .aasta-why-call__title,
  .aasta-why-call__subtitle { text-align: center !important; }

  .aasta-hservices__eyebrow,
  .aasta-hiw__eyebrow,
  .aasta-what__eyebrow,
  .aasta-qualifies__eyebrow,
  .aasta-why__eyebrow,
  .aasta-mission__eyebrow,
  .aasta-locations__eyebrow,
  .aasta-faq__eyebrow,
  .aasta-contact__form-eyebrow,
  .aasta-contact__loc-eyebrow,
  .aasta-why-call__eyebrow { text-align: center !important; }

  .aasta-principle-card h3,
  .aasta-principle-card h2,
  .aasta-principle-card p,
  .aasta-principle-card .elementor-heading-title { text-align: center !important; }

  .e-con.e-parent:has(.aasta-footer-link) h6,
  .e-con.e-parent:has(.aasta-footer-link) p,
  .e-con.e-parent:has(.aasta-footer-link) .elementor-heading-title { text-align: center !important; }

  .aasta-stat, .aasta-stat__label, .aasta-stat__number { text-align: center !important; }
  .aasta-reviews__title { text-align: center !important; }
  .aasta-mobile-menu, .aasta-mobile-menu__link { text-align: center !important; }
}

/* Softer, frosted nav on mobile: the solid white bar read as harsh/bright,
   especially scrolling over content. Translucent white + blur reads calmer
   and more premium, with a hair-line divider for definition. */
@media (max-width: 767px) {
  /* Elementor sets background-color on the container itself, so match its
     specificity with two classes and override the color property directly. */
  .aasta-nav.e-con,
  .aasta-nav.e-parent {
    background-color: rgba(255, 255, 255, 0.80) !important;
    background-image: none !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(162, 102, 171, 0.10);
  }
}