/* =========================================================================
   Alpha Oak Partners — Main Stylesheet
   Design tokens → base → layout → components → pages
   ========================================================================= */

/* ── 1. Design Tokens ─────────────────────────────────────────────────────── */

:root {
  /* Primary palette */
  --c-primary-50:   #edf5f0;
  --c-primary-100:  #d0e8da;
  --c-primary-200:  #a2d1b5;
  --c-primary-300:  #6cb48d;
  --c-primary-400:  #3d9469;
  --c-primary-500:  #1f7550;
  --c-primary-600:  #115d3d;
  --c-primary-700:  #07472d;
  --c-primary-800:  #003b25;
  --c-primary-900:  #002a1a;
  --c-primary-950:  #001810;

  /* Accent gold */
  --c-accent:       #f0b471;
  --c-accent-warm:  #e0924a;
  --c-accent-light: #f9ddb9;

  /* Neutral */
  --c-ink:          #0f1a14;
  --c-slate:        #2a3830;
  --c-muted:        #6b7280;
  --c-border:       #e5e7eb;
  --c-bg:           #ffffff;
  --c-bg-soft:      #f9fafb;
  --c-footer:       #181717;

  /* Typography */
  --font-sans:   'Lora', Georgia, 'Times New Roman', serif;
  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-canela: Georgia, 'Times New Roman', serif;

  /* Type scale – balanced for readability and hierarchy */
  --text-xs:    0.8125rem;  /* 13px – labels, badges, legal */
  --text-sm:    0.9375rem;  /* 15px – nav, cards, secondary text */
  --text-base:  1.125rem;  /* 18px – body text */
  --text-lg:    1.25rem;
  --text-xl:    1.375rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Layout */
  --container-max:    1280px;
  --container-narrow: 896px;
  --container-px:     clamp(1.5rem, 5vw, 3rem);
  --header-h:         72px;

  /* Radius */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full: 9999px;

  /* Shadow */
  --shadow-card:   0 10px 40px -10px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 16px 48px -8px rgba(0,0,0,0.14);
  --shadow-header: 0 1px 16px 0 rgba(0,0,0,0.08);

  /* Transitions */
  --t-fast:   150ms ease;
  --t-base:   250ms ease;
  --t-slow:   400ms ease;

  /* Smooth 3D easing (sweet, fluid motion) */
  --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-smooth-3d: cubic-bezier(0.33, 1, 0.68, 1);

  /* Animation durations & easings */
  --anim-duration-fast:   0.4s;
  --anim-duration-base:  0.6s;
  --anim-duration-slow:  0.85s;
  --anim-duration-text:  0.75s;
  --anim-ease-out:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --anim-ease-out-strong: cubic-bezier(0.33, 1, 0.68, 1);
}

/* Canela: set --font-canela to 'Canela', Georgia, ... and add @font-face with assets/fonts/Canela-Regular.woff2 if self-hosting */

/* ── 2. Reset & Base ──────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .ao-hero__bg,
  .ao-hero__overlay { animation: none; }
  .ao-marquee__track { animation: none !important; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--c-primary-800); outline-offset: 3px; border-radius: var(--r-sm); }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ── Animations (scroll reveal) ───────────────────────────────────────────── */
@keyframes ao-fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ao-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ao-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ao-slide-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ao-slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Smooth, subtle animation for text/paragraphs — minimal movement, soft fade */
@keyframes ao-text-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Base reveal: default fade-up (smooth for most elements) */
.ao-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--anim-duration-base) var(--anim-ease-out),
              transform var(--anim-duration-base) var(--anim-ease-out-strong);
}
.ao-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}
.ao-reveal--fade-up {
  transform: translateY(24px);
  transition: opacity var(--anim-duration-base) var(--anim-ease-out),
              transform var(--anim-duration-base) var(--anim-ease-out-strong);
}
.ao-reveal--visible.ao-reveal--fade-up { opacity: 1; transform: translateY(0); }
.ao-reveal--fade-in {
  transition: opacity var(--anim-duration-slow) var(--anim-ease-out);
}
.ao-reveal--scale-in {
  transform: scale(0.98);
  transition: opacity var(--anim-duration-base) var(--anim-ease-out),
              transform var(--anim-duration-base) var(--anim-ease-out-strong);
}
.ao-reveal--visible.ao-reveal--scale-in { opacity: 1; transform: scale(1); }
.ao-reveal--slide-left {
  transform: translateX(-20px);
  transition: opacity var(--anim-duration-base) var(--anim-ease-out),
              transform var(--anim-duration-base) var(--anim-ease-out-strong);
}
.ao-reveal--visible.ao-reveal--slide-left { opacity: 1; transform: translateX(0); }
.ao-reveal--slide-right {
  transform: translateX(20px);
  transition: opacity var(--anim-duration-base) var(--anim-ease-out),
              transform var(--anim-duration-base) var(--anim-ease-out-strong);
}
.ao-reveal--visible.ao-reveal--slide-right { opacity: 1; transform: translateX(0); }
/* Text/paragraph: smooth, simple, minimal motion */
.ao-reveal--text {
  transform: translateY(10px);
  transition: opacity var(--anim-duration-text) var(--anim-ease-out),
              transform var(--anim-duration-text) var(--anim-ease-out);
}
.ao-reveal--visible.ao-reveal--text { opacity: 1; transform: translateY(0); }
.ao-reveal--delay-0 { transition-delay: 0s; }
.ao-reveal--delay-1 { transition-delay: 0.08s; }
.ao-reveal--delay-2 { transition-delay: 0.16s; }
.ao-reveal--delay-3 { transition-delay: 0.24s; }
.ao-reveal--delay-4 { transition-delay: 0.32s; }
.ao-reveal--delay-5 { transition-delay: 0.4s; }
.ao-reveal--delay-6 { transition-delay: 0.48s; }
.ao-reveal--delay-7 { transition-delay: 0.56s; }
.ao-reveal--delay-8 { transition-delay: 0.64s; }

/* ── 3. Typography ────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

/* Utility heading classes */
.ao-h1 {
  font-size: clamp(2.25rem, 5.5vw, 5.5rem);
  line-height: 0.93;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.ao-h2 {
  font-size: clamp(1.875rem, 3.5vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.ao-h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }

.ao-h1 em, .ao-h2 em, .ao-h3 em {
  font-style: italic;
  font-weight: 400;
}
.ao-h1 strong, .ao-h2 strong, .ao-h3 strong {
  font-style: normal;
  font-weight: 700;
}

p {
  max-width: 68ch;
  font-size: var(--text-base);
  line-height: 1.4;
  font-family: var(--font-sans);
}
p + p { margin-top: var(--sp-4); }

.ao-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  color: var(--c-slate);
  line-height: 1.4;
}

/* Section label */
.ao-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-primary-600);
  margin-bottom: var(--sp-4);
}
.ao-label--light { color: var(--c-accent); }
.ao-label--muted { color: var(--c-muted); }

/* Eyebrow (hero) */
.ao-eyebrow {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}

/* Badge */
.ao-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary-800);
  background: var(--c-accent-light);
  border: 1px solid var(--c-accent);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  margin-bottom: var(--sp-5);
}

/* Gold accent line */
.ao-gold-line {
  display: block;
  width: 4rem;
  height: 2.5px;
  background: var(--c-accent);
  border-radius: var(--r-full);
  margin-top: var(--sp-5);
}

/* ── 4. Layout ────────────────────────────────────────────────────────────── */

.ao-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}
.ao-container--narrow {
  max-width: var(--container-narrow);
}

.ao-section {
  padding-block: var(--sp-24);
}
.ao-section--sm { padding-block: var(--sp-16); }
.ao-section--lg { padding-block: clamp(var(--sp-20), 8vw, 8rem); }
.ao-section--tight-below { padding-bottom: var(--sp-8); }
.ao-section--tight-top { padding-top: var(--sp-8); }

.ao-section--light  { background: var(--c-bg-soft); }
.ao-section--green  { background: var(--c-primary-50); }
.ao-section--dark   { background: var(--c-primary-950); color: #fff; }
.ao-section--dark .ao-h2, .ao-section--dark .ao-h3 { color: #fff; }
.ao-section--dark p { color: rgba(255,255,255,0.75); }
.ao-section--dark .ao-label { color: var(--c-accent); }

.ao-text-center { text-align: center; }
.ao-text-center p, .ao-text-center .ao-h2 { margin-inline: auto; }
.ao-text-center .ao-gold-line { margin-inline: auto; }

.ao-section-header {
  margin-bottom: var(--sp-12);
  padding-inline: var(--sp-2);
}
.ao-section-header--center { text-align: center; }
.ao-section-header--center .ao-gold-line { margin-inline: auto; }

/* About the Firm — image left, content right */
.ao-about-with-image .ao-about__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  align-items: center;
}
.ao-about__media {
  order: -1;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  transition: box-shadow 0.7s var(--ease-smooth);
}
.ao-about__media:hover {
  box-shadow: var(--shadow-card-hover);
}
.ao-about__media:hover .ao-about__img {
  transform: scale(1.04);
}
.ao-about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-smooth);
}
.ao-about__content {
  max-width: var(--container-narrow);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .ao-about-with-image .ao-about__container {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--sp-12);
    align-items: stretch;
  }
  .ao-about__media {
    order: unset;
    aspect-ratio: auto;
    min-height: 0;
    height: 100%;
  }
  .ao-about__content {
    margin-inline: 0;
  }
}

/* Reusable image hover (same as about section — use on any image wrapper) */
.ao-img-hover {
  overflow: hidden;
  transition: box-shadow 0.7s var(--ease-smooth);
}
.ao-img-hover:hover {
  box-shadow: var(--shadow-card-hover);
}
.ao-img-hover:hover img {
  transform: scale(1.04);
}
.ao-img-hover img {
  display: block;
  transition: transform 0.7s var(--ease-smooth);
}

/* 2-col and 3-col grids */
.ao-grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
.ao-grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }

@media (min-width: 640px) {
  .ao-grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .ao-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ao-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── 5. Skip link ─────────────────────────────────────────────────────────── */

.ao-skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: 9999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-primary-800);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: top var(--t-fast);
}
.ao-skip-link:focus { top: 0; }

/* ── 6. Header ────────────────────────────────────────────────────────────── */

.ao-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  border-bottom: 1px solid transparent;
}

/* Transparent state (over hero) */
.ao-header--transparent {
  background: transparent;
}

/* Scrolled state — green background so logo looks good */
.ao-header--scrolled {
  background: var(--c-primary-800);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px -4px rgba(0,0,0,0.2);
  border-bottom-color: transparent;
}

.ao-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* Logo */
.ao-logo__link { display: flex; align-items: center; flex-shrink: 0; }
.ao-logo__img  { height: 40px; width: auto; }

.ao-header--transparent .ao-logo__img { filter: brightness(0) invert(1); }
.ao-header--scrolled    .ao-logo__img { filter: none; }

/* Nav */
.ao-nav {
  display: none;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
  flex: 1;
  justify-content: center;
}

@media (min-width: 1024px) {
  .ao-nav { display: flex; }
}

.ao-nav__item { position: relative; }

.ao-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--r-md);
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}

.ao-header--transparent .ao-nav__link { color: rgba(255,255,255,0.9); }
.ao-header--scrolled    .ao-nav__link { color: rgba(255,255,255,0.9); }

.ao-nav__link:hover { color: var(--c-primary-800); background: var(--c-primary-50); }
.ao-header--transparent .ao-nav__link:hover { color: #fff; background: rgba(255,255,255,0.12); }
.ao-header--scrolled    .ao-nav__link:hover { color: #fff; background: rgba(255,255,255,0.12); }

.ao-nav__link--services .ao-nav__chevron {
  width: 1em;
  height: 1em;
  transition: transform var(--t-fast);
}
.ao-nav__item--open .ao-nav__chevron { transform: rotate(180deg); }

/* CTA button in header */
.ao-header__cta {
  margin-left: auto;
  display: none;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .ao-header__cta { display: inline-flex; margin-left: auto; align-self: center; }
  .ao-header__cta-mob { display: none !important; }
}

/* Mobile CTA: visible only below desktop breakpoint */
.ao-header__cta-mob {
  display: none;
  margin-left: auto;
  margin-right: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  background: var(--c-accent);
  border-radius: var(--r-md);
  transition: background var(--t-fast), color var(--t-fast);
}
.ao-header__cta-mob:hover { color: var(--c-ink); background: var(--c-accent-light); }
.ao-header__cta-mob:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
@media (max-width: 1023px) {
  .ao-header__cta-mob { display: inline-flex; align-items: center; }
}

/* Scrolled header: outline CTA so it stands out on green */
.ao-header--scrolled .ao-header__cta {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.4);
}
.ao-header--scrolled .ao-header__cta:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6);
}

/* Breadcrumb (Yoast SEO) */
.ao-breadcrumb {
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-2) 0;
  font-size: var(--text-sm);
}
.ao-breadcrumb__inner {
  margin: 0;
  color: var(--c-muted);
}
.ao-breadcrumb__inner a {
  color: var(--c-slate);
  text-decoration: none;
  transition: color var(--t-fast);
}
.ao-breadcrumb__inner a:hover {
  color: var(--c-primary-700);
}
.ao-breadcrumb .breadcrumb_last {
  color: var(--c-ink);
  font-weight: 500;
}

/* Inner pages with full-bleed hero: breadcrumb blends with hero (no white line) */
.page-template-template-about-php .ao-breadcrumb,
.page-template-template-why-saudi-arabia-php .ao-breadcrumb {
  background: var(--c-primary-800);
  border-bottom-color: rgba(255,255,255,0.08);
}
.page-template-template-about-php .ao-breadcrumb__inner,
.page-template-template-why-saudi-arabia-php .ao-breadcrumb__inner {
  color: rgba(255,255,255,0.85);
}
.page-template-template-about-php .ao-breadcrumb__inner a,
.page-template-template-why-saudi-arabia-php .ao-breadcrumb__inner a {
  color: rgba(255,255,255,0.9);
}
.page-template-template-about-php .ao-breadcrumb__inner a:hover,
.page-template-template-why-saudi-arabia-php .ao-breadcrumb__inner a:hover {
  color: #fff;
}
.page-template-template-about-php .ao-breadcrumb .breadcrumb_last,
.page-template-template-why-saudi-arabia-php .ao-breadcrumb .breadcrumb_last {
  color: #fff;
}

/* ── 7. Mega Menu ─────────────────────────────────────────────────────────── */

/* Keyframes: dropdown card reveal */
@keyframes ao-megamenu-inner-in {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Keyframes: category buttons stagger */
@keyframes ao-megamenu-cat-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Keyframes: right panel links stagger */
@keyframes ao-megamenu-link-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mega menu: transparent full-width backdrop for click-outside detection */
.ao-megamenu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-smooth), visibility 0.35s;
  /* no background on the wrapper — the card below provides it */
}

.ao-megamenu--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* The actual dropdown card — centered, fixed width */
.ao-megamenu__inner {
  display: grid;
  grid-template-columns: 260px 340px;
  grid-template-rows: auto auto;
  width: 600px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.22);
  border: 1px solid var(--c-border);
  border-top: none;
  position: relative;
  transform-origin: top center;
  opacity: 0;
  transform: translateY(-16px) scale(0.97);
  transition: box-shadow 0.4s var(--ease-smooth);
}

.ao-megamenu--open .ao-megamenu__inner {
  animation: ao-megamenu-inner-in 0.45s var(--anim-ease-out-strong) forwards;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.28);
}

/* Left column — categories (vertical nav, all items visible) */
.ao-megamenu__cats {
  counter-reset: megamenu-cat;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--sp-3) var(--sp-2);
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--c-primary-900) 0%, var(--c-primary-800) 50%, var(--c-primary-900) 100%);
  position: relative;
  scroll-behavior: smooth;
  grid-column: 1;
  grid-row: 1;
}
.ao-megamenu__cats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--c-accent) 20%, var(--c-accent-warm) 80%, transparent);
  opacity: 0.15;
  pointer-events: none;
}

.ao-megamenu__cat-btn {
  counter-increment: megamenu-cat;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  background: none;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  position: relative;
  opacity: 0;
  transition: color 0.25s var(--ease-smooth), background 0.25s var(--ease-smooth),
              transform 0.2s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}

/* Staggered reveal when mega menu opens */
.ao-megamenu--open .ao-megamenu__cat-btn {
  animation: ao-megamenu-cat-in 0.4s var(--anim-ease-out) forwards;
}
.ao-megamenu--open .ao-megamenu__cat-btn:nth-child(1)  { animation-delay: 0.06s; }
.ao-megamenu--open .ao-megamenu__cat-btn:nth-child(2)  { animation-delay: 0.09s; }
.ao-megamenu--open .ao-megamenu__cat-btn:nth-child(3)  { animation-delay: 0.12s; }
.ao-megamenu--open .ao-megamenu__cat-btn:nth-child(4)  { animation-delay: 0.15s; }
.ao-megamenu--open .ao-megamenu__cat-btn:nth-child(5)  { animation-delay: 0.18s; }
.ao-megamenu--open .ao-megamenu__cat-btn:nth-child(6)  { animation-delay: 0.21s; }
.ao-megamenu--open .ao-megamenu__cat-btn:nth-child(7)  { animation-delay: 0.24s; }
.ao-megamenu--open .ao-megamenu__cat-btn:nth-child(8)  { animation-delay: 0.27s; }
.ao-megamenu--open .ao-megamenu__cat-btn:nth-child(9)  { animation-delay: 0.30s; }
.ao-megamenu__cat-btn::before {
  content: counter(megamenu-cat);
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--r-sm);
  transition: color 0.25s var(--ease-smooth), background 0.25s var(--ease-smooth);
}
.ao-megamenu__cat-btn:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.06);
}
.ao-megamenu__cat-btn:hover::before {
  color: var(--c-accent-light);
  background: rgba(240, 180, 113, 0.2);
}
.ao-megamenu__cat-btn--active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ao-megamenu__cat-btn--active::before {
  color: var(--c-primary-900);
  background: var(--c-accent);
  box-shadow: 0 0 0 1px rgba(240, 180, 113, 0.4);
}
.ao-megamenu__cat-btn--active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  min-height: 24px;
  background: linear-gradient(180deg, var(--c-accent), var(--c-accent-warm));
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  box-shadow: 0 0 12px rgba(240, 180, 113, 0.5);
}

/* Right column — all panels stacked in same grid cell (CSS grid native stacking) */
.ao-megamenu__links {
  /* All panels sit in column 2, row 1 — they stack on top of each other */
  grid-column: 2;
  grid-row: 1;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg);
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(14px);
  transition: opacity 0.28s var(--anim-ease-out), visibility 0.28s,
              transform 0.35s var(--anim-ease-out-strong);
}

.ao-megamenu__links--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

/* Staggered link reveal when a panel becomes active */
.ao-megamenu__links--active .ao-megamenu__link {
  opacity: 0;
  animation: ao-megamenu-link-in 0.35s var(--anim-ease-out) forwards;
}
.ao-megamenu__links--active .ao-megamenu__link-grid .ao-megamenu__link:nth-child(1)  { animation-delay: 0.04s; }
.ao-megamenu__links--active .ao-megamenu__link-grid .ao-megamenu__link:nth-child(2)  { animation-delay: 0.07s; }
.ao-megamenu__links--active .ao-megamenu__link-grid .ao-megamenu__link:nth-child(3)  { animation-delay: 0.10s; }
.ao-megamenu__links--active .ao-megamenu__link-grid .ao-megamenu__link:nth-child(4)  { animation-delay: 0.13s; }
.ao-megamenu__links--active .ao-megamenu__link-grid .ao-megamenu__link:nth-child(5)  { animation-delay: 0.16s; }
.ao-megamenu__links--active .ao-megamenu__link-grid .ao-megamenu__link:nth-child(6)  { animation-delay: 0.19s; }
.ao-megamenu__links--active .ao-megamenu__link-grid .ao-megamenu__link:nth-child(7)  { animation-delay: 0.22s; }
.ao-megamenu__links--active .ao-megamenu__link-grid .ao-megamenu__link:nth-child(8)  { animation-delay: 0.25s; }
.ao-megamenu__links--active .ao-megamenu__link-grid .ao-megamenu__link:nth-child(9)  { animation-delay: 0.28s; }
.ao-megamenu__links--active .ao-megamenu__link-grid .ao-megamenu__link:nth-child(10) { animation-delay: 0.31s; }

.ao-megamenu__links-title {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-warm);
  margin: 0 0 var(--sp-2) 0;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
}
.ao-megamenu__links--active .ao-megamenu__links-title {
  opacity: 0;
  animation: ao-megamenu-link-in 0.3s var(--anim-ease-out) 0.02s forwards;
}

.ao-megamenu__link-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.ao-megamenu__link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  color: var(--c-slate);
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.ao-megamenu__link:hover {
  color: var(--c-primary-800);
  background: var(--c-primary-50);
  border-left-color: var(--c-primary-300);
}

/* Bottom bar — spans both columns */
.ao-megamenu__footer {
  grid-column: 1 / -1;
  grid-row: 2;
  border-top: 1px solid var(--c-border);
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--c-bg-soft);
}
.ao-megamenu__footer p {
  font-size: var(--text-sm);
  color: var(--c-muted);
  margin: 0;
}
.ao-megamenu__footer a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-primary-800);
  white-space: nowrap;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-md);
  transition: color var(--t-fast), background var(--t-fast);
}
.ao-megamenu__footer a:hover {
  color: var(--c-accent-warm);
  background: rgba(255,255,255,0.8);
}

@media (prefers-reduced-motion: reduce) {
  .ao-megamenu { transition-duration: 0.12s; }
  .ao-megamenu__inner {
    animation: none !important;
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
  }
  .ao-megamenu__cat-btn {
    animation: none !important;
    opacity: 1 !important;
  }
  .ao-megamenu__links {
    transition-duration: 0.12s;
    transform: none;
  }
  .ao-megamenu__links--active .ao-megamenu__links-title,
  .ao-megamenu__links--active .ao-megamenu__link {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* ── 8. Mobile menu ───────────────────────────────────────────────────────── */

.ao-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  margin-left: auto;
  cursor: pointer;
  padding: 0;
}

@media (min-width: 1024px) {
  .ao-hamburger { display: none; }
}

.ao-hamburger__line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: var(--r-full);
  transition: transform var(--t-base), opacity var(--t-base), background var(--t-base);
}
.ao-header--transparent .ao-hamburger__line { background: #fff; }
.ao-header--scrolled    .ao-hamburger__line { background: #fff; }

.ao-hamburger[aria-expanded="true"] .ao-hamburger__line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.ao-hamburger[aria-expanded="true"] .ao-hamburger__line:nth-child(2) { opacity: 0; }
.ao-hamburger[aria-expanded="true"] .ao-hamburger__line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.ao-mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--c-bg);
  overflow-y: auto;
  z-index: 998;
  padding: var(--sp-6) var(--container-px) var(--sp-8);
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
}
.ao-mobile-menu--open { display: flex; }

.ao-mobile-menu__link {
  display: block;
  padding: var(--sp-4) var(--sp-2);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--c-slate);
  border-bottom: 1px solid var(--c-border);
}
.ao-mobile-menu__link:hover { color: var(--c-primary-800); }

.ao-mobile-menu__services-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-4) var(--sp-2);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--c-slate);
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
}
.ao-mobile-menu__services-toggle svg {
  transition: transform var(--t-fast);
}
.ao-mobile-menu__services-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.ao-mobile-menu__sub {
  display: none;
  padding: var(--sp-2) 0 var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--c-border);
}
.ao-mobile-menu__sub--open { display: block; }

.ao-mobile-menu__sub-link {
  display: block;
  padding: var(--sp-2) 0;
  font-size: var(--text-sm);
  color: var(--c-slate);
}
.ao-mobile-menu__sub-link:hover { color: var(--c-primary-800); }

.ao-mobile-menu__cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: auto;
  padding-top: var(--sp-6);
}

/* ── 9. Buttons ───────────────────────────────────────────────────────────── */

.ao-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--r-md);
  transition: background 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), transform 0.4s var(--ease-smooth-3d);
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  transform: translateZ(0) rotateX(0deg) rotateY(0deg);
}
.ao-btn:hover {
  transform: translateY(-2px) rotateX(-2deg) rotateY(0deg);
}
.ao-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.ao-btn:active {
  transform: translateY(1px) rotateX(0deg) rotateY(0deg);
}

.ao-btn--primary {
  background: var(--c-primary-800);
  color: #fff;
}
.ao-btn--primary:hover {
  background: var(--c-primary-700);
  box-shadow: 0 4px 16px -4px rgba(0,59,37,0.35);
}

.ao-btn--accent {
  background: var(--c-accent);
  color: var(--c-ink);
}
.ao-btn--accent:hover {
  background: var(--c-accent-warm);
}

.ao-btn--primary-light {
  background: #fff;
  color: var(--c-primary-800);
}
.ao-btn--primary-light:hover {
  background: var(--c-accent-light);
}

.ao-btn--outline {
  background: transparent;
  color: var(--c-primary-800);
  box-shadow: inset 0 0 0 1.5px var(--c-primary-800);
}
.ao-btn--outline:hover {
  background: var(--c-primary-50);
}

.ao-btn--outline-light {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.4);
}
.ao-btn--outline-light:hover {
  background: rgba(255,255,255,0.1);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.6);
}

.ao-btn--sm {
  padding: 0.5rem 1.25rem;
  font-size: var(--text-xs);
}

.ao-hero-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* ── 10. Hero (Home) ──────────────────────────────────────────────────────── */

.ao-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding-block: var(--sp-12);
  overflow: hidden;
  color: #fff;
}

.ao-hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    var(--c-primary-950) 0%,
    var(--c-primary-900) 40%,
    var(--c-primary-800) 100%
  );
  z-index: 0;
}

@keyframes ao-hero-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Continuous smooth Ken Burns effect: slow zoom + subtle drift (respects prefers-reduced-motion) */
@keyframes ao-hero-bg-float {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.06) translate(-1%, -0.5%); }
  100% { transform: scale(1) translate(0, 0); }
}

/* When a featured image is set, the bg div gets an inline style */
.ao-hero__bg.has-image {
  background-size: cover;
  background-position: center;
  transform-origin: center center;
  animation: ao-hero-bg-in 1.2s var(--anim-ease-out) forwards,
             ao-hero-bg-float 35s ease-in-out 1.5s infinite;
}

.ao-hero__bg:not(.has-image) {
  animation: ao-hero-bg-in 1.2s var(--anim-ease-out) forwards;
}

.ao-hero__overlay {
  position: absolute;
  inset: 0;
  animation: ao-hero-bg-in 1s var(--anim-ease-out) 0.15s both;
  background: linear-gradient(
    to bottom,
    rgba(0,24,16,0.6) 0%,
    rgba(0,24,16,0.75) 50%,
    rgba(0,24,16,0.88) 100%
  );
  
}

.ao-hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: left;
  /* Smooth 3D tilt (mouse-follow via JS sets --hero-tx, --hero-ty). No will-change to avoid blurry text. */
  transform: rotateX(var(--hero-ty, 0deg)) rotateY(var(--hero-tx, 0deg));
  transition: transform 0.6s var(--ease-smooth-3d);
}
.is-front-page .ao-hero {
  perspective: 1400px;
}
.is-front-page .ao-hero .ao-container {
  transform-style: preserve-3d;
}

/* Hero content: keep 3D tilt when reveal classes apply (override base .ao-reveal transform) */
.ao-hero__content.ao-reveal,
.ao-hero__content.ao-reveal--visible {
  transform: rotateX(var(--hero-ty, 0deg)) rotateY(var(--hero-tx, 0deg));
}

/* Hero entrance: stagger children when scroll-reveal runs (respects prefers-reduced-motion via JS) */
.ao-hero__content.ao-reveal .ao-eyebrow,
.ao-hero__content.ao-reveal .ao-hero__title span,
.ao-hero__content.ao-reveal .ao-hero__sub,
.ao-hero__content.ao-reveal .ao-hero-btns {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease-smooth), transform 0.55s var(--ease-smooth-3d);
}
.ao-hero__content.ao-reveal--visible .ao-eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}
.ao-hero__content.ao-reveal--visible .ao-hero__title span:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}
.ao-hero__content.ao-reveal--visible .ao-hero__title span:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
.ao-hero__content.ao-reveal--visible .ao-hero__title span:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.28s;
}
.ao-hero__content.ao-reveal--visible .ao-hero__sub {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.38s;
}
.ao-hero__content.ao-reveal--visible .ao-hero-btns {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.48s;
}

.ao-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 0.93;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #fff;
  margin-bottom: var(--sp-6);
}
.ao-hero__title span { display: block; }

.ao-hero__sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.75);
  max-width: 52ch;
  margin-bottom: 0;
}

/* Home hero: left-align buttons with text */
.ao-hero .ao-hero-btns {
  justify-content: flex-start;
}

.ao-hero__link-below {
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
}
.ao-hero__link-below a {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.ao-hero__link-below a:hover { color: #fff; }

.ao-hero__cities {
  position: relative;
  z-index: 2;
  margin-top: var(--sp-10);
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  text-align: left;
}

.ao-hero__scroll-cue {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(255,255,255,0.7);
  transition: color var(--t-fast), transform var(--t-fast);
}
.ao-hero__scroll-cue:hover { color: #fff; transform: translateX(-50%) translateY(4px); }
.ao-hero__scroll-cue:focus-visible { outline: 2px solid rgba(255,255,255,0.8); outline-offset: 4px; border-radius: var(--r-full); }
.ao-hero__scroll-cue-icon {
  width: 24px;
  height: 24px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-bottom: -8px;
}

@media (prefers-reduced-motion: reduce) {
  .ao-hero__scroll-cue:hover { transform: translateX(-50%); }
}

/* Page hero (inner pages) */
.ao-page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--sp-16));
  padding-bottom: var(--sp-16);
  background: var(--c-primary-950);
  color: #fff;
}

.ao-page-hero--has-image {
  min-height: 320px;
  display: flex;
  align-items: center;
}

.ao-page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ao-page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 59, 37, 0.75) 0%, rgba(0, 59, 37, 0.9) 100%);
}

.ao-page-hero--has-image .ao-container {
  position: relative;
  z-index: 1;
}

.ao-page-hero__inner {
  max-width: 720px;
  padding-bottom: var(--sp-2);
}
/* More space between eyebrow and title in page hero */
.ao-page-hero .ao-eyebrow {
  margin-bottom: var(--sp-5);
}

.ao-page-hero__icon-wrap {
  margin-bottom: var(--sp-5);
}
.ao-page-hero__icon {
  width: 56px;
  height: 56px;
  color: var(--c-accent);
  opacity: 0.95;
}
.ao-page-hero--has-icon .ao-page-hero__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.ao-page-hero--has-icon .ao-page-hero__icon {
  width: 40px;
  height: 40px;
}

.ao-page-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, 4.5rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0;
  margin-top: 0;
}
.ao-page-hero__title em { font-style: italic; font-weight: 400; color: rgba(255,255,255,0.85); }

.ao-page-hero__sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.7);
  max-width: 60ch;
}

/* Page hero: align buttons left with title/sub (inner pages) */
.ao-page-hero .ao-hero-btns {
  justify-content: flex-start;
}

.ao-page-hero__scroll-cue {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(255,255,255,0.7);
  transition: color var(--t-fast), transform var(--t-fast);
}
.ao-page-hero__scroll-cue:hover { color: #fff; transform: translateX(-50%) translateY(4px); }
.ao-page-hero__scroll-cue:focus-visible { outline: 2px solid rgba(255,255,255,0.8); outline-offset: 4px; border-radius: var(--r-full); }
.ao-page-hero__scroll-cue-icon {
  width: 24px;
  height: 24px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-bottom: -8px;
}
@media (prefers-reduced-motion: reduce) {
  .ao-page-hero__scroll-cue:hover { transform: translateX(-50%); }
}

/* Single post hero: no scroll cue/buttons — give title more breathing room */
.single .ao-page-hero {
  padding-bottom: var(--sp-20);
}

/* ── 11. Marquee ──────────────────────────────────────────────────────────── */

.ao-marquee {
  background: var(--c-primary-800);
  overflow: hidden;
  padding-block: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ao-marquee__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: ao-marquee 72s linear infinite;
}

/* Pause marquee on hover so the user can focus on an item */
.ao-marquee:hover .ao-marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ao-marquee__track { animation: none; }
}

.ao-marquee__track span {
  padding-inline: var(--sp-5);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  transition: transform 0.2s ease, color 0.2s ease;
  display: inline-block;
}

/* Slightly enlarge and highlight the item under the cursor */
.ao-marquee__track span:not(.ao-marquee__dot):hover {
  transform: scale(1.12);
  color: rgba(255,255,255,0.95);
}

.ao-marquee__track span.ao-marquee__dot {
  color: var(--c-accent);
  padding-inline: 0;
}

@keyframes ao-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mid-page CTA (between What We Do and Image Quote) */
.ao-mid-cta {
  background: var(--c-primary-800);
  padding-block: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ao-mid-cta .ao-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}
.ao-mid-cta__text {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: rgba(255,255,255,0.9);
}
.ao-mid-cta .ao-btn { flex-shrink: 0; }

@media (max-width: 480px) {
  .ao-mid-cta .ao-container { flex-direction: column; }
}

/* ── 12. Stats ────────────────────────────────────────────────────────────── */

.ao-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8) var(--sp-6);
}
@media (min-width: 768px) {
  .ao-stats { grid-template-columns: repeat(4, 1fr); }
}

.ao-stat {
  transition: transform 0.5s var(--ease-smooth-3d);
}
.ao-stat:hover {
  transform: translateY(-4px);
}
.ao-stat__value {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 3.5vw, 3.5rem);
  font-weight: 600;
  color: var(--c-primary-800);
  line-height: 1;
  margin-bottom: var(--sp-2);
  max-width: 22ch;
  text-align: justify;
  text-justify: inter-character;
  letter-spacing: 0.08em;
}
.ao-stat__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: var(--sp-1);
}
.ao-stat__desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--c-muted);
  max-width: 22ch;
  line-height: 1.5;
}

/* ── 13. Service Cards ────────────────────────────────────────────────────── */

.ao-cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }

@media (min-width: 640px) { .ao-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ao-cards { grid-template-columns: repeat(3, 1fr); } }

.ao-cards {
  perspective: 1200px;
}
.ao-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.4s var(--ease-smooth), transform 0.5s var(--ease-smooth-3d), border-color 0.3s var(--ease-smooth);
  overflow: hidden;
  transform-style: preserve-3d;
  transform: translateY(0) rotateX(0deg) rotateY(0deg);
}
.ao-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--c-primary-200);
  transform: translateY(-6px) rotateX(2deg) rotateY(2deg);
}

.ao-card__media { aspect-ratio: 16/9; overflow: hidden; }
.ao-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.ao-card:hover .ao-card__media img { transform: scale(1.04); }

/* Service cards with image: contain image and add clear spacing below it */
.ao-card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
  flex-shrink: 0;
}
.ao-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
.ao-card:hover .ao-card__image img { transform: scale(1.04); }

.ao-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-8) var(--sp-8);
}
.ao-card--has-image .ao-card__body { padding-top: var(--sp-8); }
.ao-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
  flex-shrink: 0;
}
.ao-card__icon .ao-card__icon-svg {
  width: 28px;
  height: 28px;
  color: inherit;
}
.ao-card__icon--primary {
  background: var(--c-primary-100);
  color: var(--c-primary-700);
}
.ao-card__icon--accent {
  background: var(--c-accent-light);
  color: var(--c-accent-warm);
}
.ao-card__icon--blue {
  background: #dbeafe;
  color: #1d4ed8;
}
.ao-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: var(--sp-3);
}
.ao-card__desc {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--c-slate);
  line-height: 1.65;
  margin-bottom: var(--sp-5);
}
.ao-card__link {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-primary-800);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: gap var(--t-fast);
}
.ao-card:hover .ao-card__link { gap: var(--sp-3); }

/* ── 14. Process Steps ────────────────────────────────────────────────────── */

.ao-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  counter-reset: steps;
}
@media (min-width: 768px) {
  .ao-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ao-steps { grid-template-columns: repeat(3, 1fr); }
}

.ao-step {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
}

/* Single badge per step: icon (when provided) or number */
.ao-step__badge {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ao-step__badge--icon {
  background: var(--c-accent);
  color: #fff;
}
.ao-step__badge--icon .ao-step__icon-svg {
  width: 26px;
  height: 26px;
  color: currentColor;
}
.ao-step__badge--num {
  background: var(--c-primary-700);
  color: #fff;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
}
.ao-step__num-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-primary-600);
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-1);
}

.ao-step__title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}
.ao-step__desc {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--c-slate);
  line-height: 1.6;
}
.ao-step__meta {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--c-primary-600);
  background: var(--c-primary-50);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
}

/* Approach section (How we work) — 2×2 grid, single icon per card; distinct bg to separate from page */
.ao-section--approach {
  background: var(--c-bg-soft);
}
.ao-section--approach .ao-section-intro--approach {
  margin-bottom: var(--sp-12);
  max-width: var(--container-narrow);
}
.ao-section--approach .ao-steps {
  gap: var(--sp-8);
}
@media (min-width: 1024px) {
  .ao-section--approach .ao-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-10);
  }
}
.ao-section--approach .ao-step {
  padding: var(--sp-7);
  border-radius: var(--r-xl);
  background: var(--c-bg);
  border: none;
  border-left: 4px solid var(--c-primary-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--t-base), background var(--t-base), border-left-color var(--t-base);
}
.ao-section--approach .ao-step:hover {
  border-left-color: var(--c-primary-400);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.1);
  background: var(--c-bg-soft);
}
.ao-section--approach .ao-step__badge {
  width: 56px;
  height: 56px;
}
.ao-section--approach .ao-step__badge--icon .ao-step__icon-svg {
  width: 28px;
  height: 28px;
}
.ao-section--approach .ao-step__num-label {
  color: var(--c-primary-600);
}
.ao-section--approach .ao-step__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.ao-section--approach .ao-step__desc {
  margin-bottom: var(--sp-2);
  line-height: 1.65;
}

/* ── 15. Trust Items ──────────────────────────────────────────────────────── */

.ao-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}
@media (min-width: 1024px) {
  .ao-trust-grid { grid-template-columns: repeat(4, 1fr); }
}

.ao-trust-grid {
  perspective: 1200px;
}
.ao-trust-item {
  padding: var(--sp-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: transform 0.5s var(--ease-smooth-3d), box-shadow 0.4s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
  transform: translateZ(0) rotateX(0deg) rotateY(0deg);
}
.ao-trust-item:hover {
  transform: translateY(-4px) translateZ(8px) rotateX(1deg) rotateY(1deg);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.08);
}
.ao-trust-item__icon {
  width: 48px;
  height: 48px;
  background: var(--c-primary-50);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary-800);
}
.ao-trust-item__icon svg {
  width: 24px;
  height: 24px;
}
.ao-trust-item__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}
.ao-trust-item__desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--c-muted);
  line-height: 1.6;
}

/* ── 16. Testimonial ──────────────────────────────────────────────────────── */

.ao-testimonial {
  position: relative;
  padding-block: var(--sp-12);
  padding-inline: var(--container-px);
  text-align: center;
}
.ao-testimonial__quote {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-style: italic;
  line-height: 1.5;
  color: #fff;
  max-width: 760px;
  margin: 0 auto var(--sp-8);
}
.ao-testimonial__quote::before { content: '\201C'; margin-right: 2px; color: var(--c-accent); }
.ao-testimonial__quote::after  { content: '\201D'; margin-left:  2px; color: var(--c-accent); }
.ao-testimonial__author {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.08em;
  margin-inline: auto;
  text-align: center;
}
.ao-testimonial__author strong { color: rgba(255,255,255,0.9); }

/* ── 17. Team Cards ───────────────────────────────────────────────────────── */

.ao-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
@media (min-width: 768px) {
  .ao-team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Our People section: distinct background and spacing */
.ao-section--people {
  background: linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-bg) 25%, var(--c-bg) 100%);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
}
.ao-section--people .ao-section-header {
  margin-bottom: var(--sp-10);
}
.ao-team-grid--people {
  gap: var(--sp-10);
  max-width: 1100px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .ao-team-grid--people { gap: var(--sp-12); }
}

.ao-team-card {
  display: flex;
  gap: var(--sp-6);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-card);
}
/* Slight background variation to separate the two partner sections */
.ao-team-card:nth-child(1) { background: var(--c-bg-soft); }
.ao-team-card:nth-child(2) { background: var(--c-primary-50); }
@media (max-width: 639px) {
  .ao-team-card { flex-direction: column; }
}

/* People section cards: accent border, stronger elevation, refined layout */
.ao-team-grid--people .ao-team-card {
  border-left: 4px solid var(--c-accent-warm);
  padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-10);
  box-shadow: 0 4px 24px -4px rgba(7, 71, 45, 0.08), 0 12px 48px -12px rgba(0, 0, 0, 0.06);
  align-items: flex-start;
}
.ao-team-grid--people .ao-team-card:nth-child(1) {
  background: var(--c-bg);
  border-left-color: var(--c-primary-500);
}
.ao-team-grid--people .ao-team-card:nth-child(2) {
  background: var(--c-bg);
  border-left-color: var(--c-accent-warm);
}
@media (max-width: 639px) {
  .ao-team-grid--people .ao-team-card {
    padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
  }
}

/* About page: founder cards without photo */
.ao-team-card--no-photo .ao-team-card__body {
  flex: 1;
  min-width: 0;
}

.ao-team-card__photo {
  flex-shrink: 0;
  width: 120px;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow 0.7s var(--ease-smooth);
}
.ao-team-card__photo:hover {
  box-shadow: var(--shadow-card-hover);
}
.ao-team-card__photo:hover img {
  transform: scale(1.04);
}
.ao-team-card__photo img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-smooth);
}

/* Human icon avatar (circular, no photo) */
.ao-team-card__photo--icon {
  width: 100px;
  height: 100px;
  border-radius: var(--r-full);
  background: linear-gradient(145deg, var(--c-primary-100) 0%, var(--c-primary-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary-600);
  transition: transform 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth), color 0.3s var(--ease-smooth);
}
.ao-team-card__photo--icon:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px -4px rgba(7, 71, 45, 0.2);
  color: var(--c-primary-700);
}
.ao-team-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.ao-team-card__icon-svg {
  width: 48px;
  height: 48px;
}

.ao-team-card__name {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.ao-team-card__role {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-primary-600);
  margin-bottom: var(--sp-4);
  letter-spacing: 0.04em;
}
.ao-team-card__bio {
  font-size: var(--text-base);
  color: var(--c-slate);
  line-height: 1.65;
  margin-bottom: var(--sp-4);
}

/* People section: slightly larger type and tighter role/bio hierarchy */
.ao-team-grid--people .ao-team-card__name {
  font-size: var(--text-3xl);
  margin-bottom: var(--sp-2);
}
.ao-team-grid--people .ao-team-card__role {
  font-size: var(--text-base);
  margin-bottom: var(--sp-4);
  color: var(--c-primary-600);
}
.ao-team-grid--people .ao-team-card__bio {
  font-size: var(--text-base);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
}

/* Tags */
.ao-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.ao-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-primary-700);
  background: var(--c-primary-50);
  border: 1px solid var(--c-primary-200);
  padding: 2px var(--sp-3);
  border-radius: var(--r-full);
  letter-spacing: 0.04em;
}
/* People section tags: slightly refined */
.ao-team-grid--people .ao-tag {
  padding: var(--sp-1) var(--sp-4);
  font-size: 0.8125rem;
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--c-primary-200);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ── 18. Image Divider Quote ──────────────────────────────────────────────── */

.ao-image-quote {
  position: relative;
  padding-block: var(--sp-24);
  padding-inline: var(--container-px);
  background: var(--c-primary-950);
  text-align: center;
  overflow: hidden;
}
.ao-image-quote__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
}
.ao-image-quote blockquote {
  position: relative;
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  font-style: italic;
  color: #fff;
  max-width: 680px;
  margin-inline: auto;
  line-height: 1.35;
}

/* ── 19. Offices ──────────────────────────────────────────────────────────── */

.ao-offices {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 768px) {
  .ao-offices { grid-template-columns: repeat(3, 1fr); }
}

.ao-office-card {
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  font-style: normal;
  transition: border-color var(--t-slow),
              box-shadow var(--t-slow),
              transform var(--t-slow) var(--ease-smooth);
}
.ao-office-card:hover {
  border-color: var(--c-primary-200);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}
.ao-office-card__flag { font-size: 2rem; margin-bottom: var(--sp-3); }
.ao-office-card__city {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.ao-office-card__country {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.ao-office-card__address {
  font-size: var(--text-base);
  color: var(--c-slate);
  line-height: 1.6;
  margin-bottom: var(--sp-3);
}
.ao-office-card__address--link {
  color: var(--c-slate);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--sp-2);
  transition: color var(--t-fast);
}
.ao-office-card__address--link:hover { color: var(--c-primary-700); }
.ao-office-card__address--link:focus-visible {
  outline: 2px solid var(--c-primary-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.ao-office-card__directions {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-primary-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
  transition: color var(--t-fast);
}
.ao-office-card__directions:hover { color: var(--c-accent-warm); }
.ao-office-card__directions:focus-visible {
  outline: 2px solid var(--c-primary-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.ao-office-card__phone {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-primary-800);
  text-decoration: none;
  transition: color var(--t-fast);
}
.ao-office-card__phone:hover { color: var(--c-accent-warm); }
.ao-office-card__phone:focus-visible {
  outline: 2px solid var(--c-primary-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Slower scroll-reveal for office cards (address section) */
.ao-guidance-offices .ao-office-card.ao-reveal,
.ao-guidance-offices .ao-office-card.ao-reveal--fade-up {
  transition: opacity 1.1s var(--anim-ease-out),
              transform 1.1s var(--anim-ease-out-strong);
}

/* ── 20. CTA Section ──────────────────────────────────────────────────────── */

.ao-cta-section {
  padding-block: var(--sp-24);
}
.ao-cta-section .ao-h2 { color: #fff; }
.ao-cta-section__sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.82);
  max-width: 54ch;
  margin: var(--sp-5) auto 0;
}
/* CTA section: center buttons (hero and page-hero keep left-aligned) */
.ao-cta-section .ao-hero-btns {
  justify-content: center;
}

/* ── 20b. Responsive — Home & all screen sizes ─────────────────────────────── */

/* Prevent horizontal overflow on viewport */
html { overflow-x: hidden; }
.ao-main { overflow-x: hidden; }

/* Small phones (portrait) */
@media (max-width: 479px) {
  .ao-section { padding-block: var(--sp-12); }
  .ao-section--sm { padding-block: var(--sp-10); }
  .ao-section--lg { padding-block: var(--sp-16); }
  .ao-section-header { margin-bottom: var(--sp-8); }
  .ao-hero {
    min-height: min(90vh, 640px);
    padding-block: var(--sp-8);
  }
  .ao-hero__title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    margin-bottom: var(--sp-4);
  }
  .ao-hero__sub { font-size: var(--text-base); }
  .ao-hero-btns {
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
  }
  .ao-hero-btns .ao-btn {
    width: 100%;
    justify-content: center;
  }
  .ao-hero__cities {
    margin-top: var(--sp-6);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
  }
  .ao-marquee__track span {
    font-size: 0.7rem;
    padding-inline: var(--sp-3);
  }
  .ao-image-quote {
    padding-block: var(--sp-12);
    padding-inline: var(--sp-4);
  }
  .ao-image-quote blockquote {
    font-size: clamp(1.125rem, 5vw, 1.5rem);
  }
  .ao-cta-section { padding-block: var(--sp-16); }
  .ao-cta-section .ao-hero-btns {
    flex-direction: column;
    gap: var(--sp-3);
  }
  .ao-cta-section .ao-hero-btns .ao-btn {
    width: 100%;
    justify-content: center;
  }
  .ao-cta-section__sub { font-size: var(--text-base); margin-top: var(--sp-4); }
  .ao-trust-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .ao-stats { gap: var(--sp-5) var(--sp-4); }
  .ao-stat__value { font-size: clamp(1.75rem, 6vw, 2.25rem); }
  .ao-stat__desc { max-width: none; }
  .ao-card__body { padding: var(--sp-6); }
  .ao-testimonial { padding-block: var(--sp-8); padding-inline: var(--sp-4); }
  .ao-testimonial__quote { font-size: 1.125rem; margin-bottom: var(--sp-5); }
  .ao-section--people { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
  .ao-section--approach .ao-step { padding: var(--sp-5); }
  .ao-guidance-offices { margin-top: var(--sp-8); padding-top: var(--sp-8); }
}

/* Phones (landscape) and large phones */
@media (min-width: 480px) and (max-width: 767px) {
  .ao-section { padding-block: var(--sp-16); }
  .ao-section--sm { padding-block: var(--sp-12); }
  .ao-section-header { margin-bottom: var(--sp-10); }
  .ao-hero {
    min-height: min(88vh, 680px);
    padding-block: var(--sp-10);
  }
  .ao-hero__title {
    font-size: clamp(2rem, 7vw, 3rem);
    margin-bottom: var(--sp-5);
  }
  .ao-hero-btns {
    flex-wrap: wrap;
    gap: var(--sp-4);
  }
  .ao-hero-btns .ao-btn { min-width: 140px; }
  .ao-image-quote { padding-block: var(--sp-16); }
  .ao-image-quote blockquote { font-size: clamp(1.25rem, 3vw, 1.75rem); }
  .ao-cta-section { padding-block: var(--sp-20); }
  .ao-cta-section .ao-hero-btns .ao-btn { min-width: 180px; }
  .ao-trust-grid { gap: var(--sp-5); }
  .ao-card__body { padding: var(--sp-6) var(--sp-8); }
  .ao-testimonial__quote { font-size: clamp(1.125rem, 2.5vw, 1.5rem); }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  .ao-section { padding-block: var(--sp-20); }
  .ao-section--sm { padding-block: var(--sp-12); }
  .ao-hero {
    min-height: 82vh;
    padding-block: var(--sp-12);
  }
  .ao-hero__title { font-size: clamp(2.5rem, 5vw, 4rem); }
  .ao-image-quote blockquote { font-size: clamp(1.5rem, 3vw, 2.25rem); }
  .ao-cta-section { padding-block: var(--sp-24); }
  .ao-grid-2--guidance { gap: var(--sp-10); }
}

/* Ensure container padding never causes overflow on very narrow viewports */
@media (max-width: 360px) {
  :root { --container-px: 1rem; }
  .ao-hero__title { font-size: 1.5rem; }
}

/* Touch-friendly: ensure buttons and links have min tap target on mobile */
@media (max-width: 767px) {
  .ao-btn { min-height: 48px; padding: 0.875rem 1.5rem; }
  .ao-nav__link { padding: var(--sp-3) var(--sp-4); }
  .ao-mobile-menu__link { padding: var(--sp-4) var(--sp-3); min-height: 48px; display: flex; align-items: center; }
}

/* ── 21. FAQ Accordion ────────────────────────────────────────────────────── */

.ao-accordion { border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }

.ao-accordion__item { border-bottom: 1px solid var(--c-border); }
.ao-accordion__item:last-child { border-bottom: none; }

.ao-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--c-ink);
  text-align: left;
  background: var(--c-bg);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.ao-accordion__trigger:hover {
  background: var(--c-primary-50);
  color: var(--c-primary-800);
}
.ao-accordion__trigger[aria-expanded="true"] {
  background: var(--c-primary-50);
  color: var(--c-primary-800);
}

.ao-accordion__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--c-primary-100);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background var(--t-fast), transform var(--t-fast);
}
.ao-accordion__icon::before,
.ao-accordion__icon::after {
  content: '';
  position: absolute;
  background: var(--c-primary-800);
  border-radius: var(--r-full);
}
.ao-accordion__icon::before { width: 10px; height: 2px; }
.ao-accordion__icon::after  { width: 2px; height: 10px; transition: transform var(--t-fast); }

.ao-accordion__trigger[aria-expanded="true"] .ao-accordion__icon {
  background: var(--c-accent-light);
  transform: rotate(45deg);
}

.ao-accordion__panel { background: var(--c-bg-soft); }
.ao-accordion__content {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  font-size: var(--text-base);
  color: var(--c-slate);
  line-height: 1.7;
}
.ao-accordion__content p { max-width: none; }
.ao-accordion__content a {
  color: var(--c-primary-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ao-accordion__content a:hover {
  color: var(--c-primary-800);
  text-decoration-thickness: 2px;
}

/* FAQ section header with icon */
#faq-content { scroll-margin-top: var(--header-h, 72px); }
.ao-faq-section-header {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.ao-faq-section-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--c-primary-50);
  border: 1.5px solid var(--c-primary-200);
  color: var(--c-primary-700);
}
.ao-faq-hero-icon {
  width: 32px;
  height: 32px;
}
.ao-faq-section-header .ao-label {
  margin-bottom: 0;
}

/* FAQ category tabs */
.ao-faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}
.ao-faq-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-slate);
  background: var(--c-bg);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--t-fast);
}
.ao-faq-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-primary-600);
  transition: color var(--t-fast);
}
.ao-faq-tab-icon {
  width: 18px;
  height: 18px;
}
.ao-faq-tab:hover .ao-faq-tab__icon,
.ao-faq-tab--active .ao-faq-tab__icon {
  color: rgba(255, 255, 255, 0.9);
}
.ao-faq-tab:hover,
.ao-faq-tab--active {
  background: var(--c-primary-800);
  color: #fff;
  border-color: var(--c-primary-800);
}

/* FAQ "Still have questions?" CTA icon */
.ao-faq-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-full);
  background: var(--c-primary-100);
  color: var(--c-primary-700);
}
.ao-faq-cta-icon__svg { width: 28px; height: 28px; }

/* ── 22. Contact Form ─────────────────────────────────────────────────────── */

/* Scroll target: leave room for fixed header when linking from hero */
#contact-form { scroll-margin-top: var(--header-h, 72px); }

.ao-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
}
@media (min-width: 1024px) {
  .ao-contact-grid { grid-template-columns: 2fr 1.2fr; }
}

.ao-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
@media (min-width: 640px) {
  .ao-form-row--2col { grid-template-columns: repeat(2, 1fr); }
}

.ao-form-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.ao-form-field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.ao-form-field input,
.ao-form-field select,
.ao-form-field textarea {
  padding: 0.75rem var(--sp-4);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: var(--text-base);
  color: var(--c-ink);
  background: var(--c-bg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ao-form-field input:focus,
.ao-form-field select:focus,
.ao-form-field textarea:focus {
  outline: none;
  border-color: var(--c-primary-600);
  box-shadow: 0 0 0 3px rgba(0,59,37,0.08);
}
.ao-form-field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.ao-form-field--honeypot { display: none !important; }

.ao-form__submit { margin-top: var(--sp-6); }

.ao-form-notice {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  display: none;
  margin-top: var(--sp-5);
}
.ao-form-notice--success {
  background: var(--c-primary-50);
  color: var(--c-primary-700);
  border: 1px solid var(--c-primary-200);
}
.ao-form-notice--error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.ao-form-notice--visible { display: block; }

/* ── 23. Insight / Blog ───────────────────────────────────────────────────── */

.ao-posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
@media (min-width: 640px) {
  .ao-posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ao-posts-grid { grid-template-columns: repeat(3, 1fr); }
}

.ao-post-card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.ao-post-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.ao-post-card a img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.ao-post-card:hover a img { transform: scale(1.03); }
.ao-post-card__body { padding: var(--sp-5) var(--sp-6) var(--sp-7); }
.ao-post-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--sp-3);
  line-height: 1.3;
}
.ao-post-card__title a { color: var(--c-ink); }
.ao-post-card__title a:hover { color: var(--c-primary-800); }
.ao-post-card__excerpt {
  font-size: var(--text-base);
  color: var(--c-slate);
  margin-bottom: var(--sp-4);
}

/* ── 24. Comparison Table ─────────────────────────────────────────────────── */

.ao-comparison {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.ao-comparison th {
  background: var(--c-primary-800);
  color: #fff;
  padding: var(--sp-4) var(--sp-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
}
.ao-comparison td {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--text-base);
  color: var(--c-slate);
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.ao-comparison tr:nth-child(even) td { background: var(--c-bg-soft); }
.ao-comparison tr:last-child td { border-bottom: none; }
.ao-comparison td:first-child { font-weight: 600; color: var(--c-ink); }

/* ── 25. Content prose (for page content, single post) ───────────────────── */

.ao-prose h2, .ao-prose h3, .ao-prose h4 {
  font-family: var(--font-serif);
  color: var(--c-ink);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}
.ao-prose h2 { font-size: var(--text-3xl); }
.ao-prose h3 { font-size: var(--text-xl); }
.ao-prose h4 { font-size: var(--text-lg); font-family: var(--font-sans); font-weight: 700; }
.ao-prose p  { font-family: var(--font-sans); font-size: var(--text-base); color: var(--c-slate); line-height: 1.4; margin-bottom: var(--sp-4); }
.ao-prose ul, .ao-prose ol {
  list-style: disc;
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.ao-prose ol  { list-style: decimal; }
.ao-prose li  { font-family: var(--font-sans); color: var(--c-slate); font-size: var(--text-base); line-height: 1.4; margin-bottom: var(--sp-2); }
.ao-prose blockquote {
  border-left: 4px solid var(--c-accent);
  padding: var(--sp-4) var(--sp-6);
  background: var(--c-primary-50);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: var(--sp-6) 0;
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--c-primary-900);
}
.ao-prose a { color: var(--c-primary-700); text-decoration: underline; text-decoration-color: var(--c-accent); }
.ao-prose a:hover { color: var(--c-primary-800); }

/* ── 26. Footer ───────────────────────────────────────────────────────────── */

.ao-footer {
  background: var(--c-footer, #181717);
  color: #b4bac4;
  padding-top: var(--sp-24);
  padding-bottom: 0;
}

.ao-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-12);
}
@media (min-width: 640px) {
  .ao-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }
}
@media (min-width: 1024px) {
  .ao-footer__grid { grid-template-columns: 2fr 1.2fr 1.2fr 1.4fr; gap: var(--sp-8); }
}

/* Col 1 */
.ao-footer__logo-col .ao-logo__img { filter: brightness(0) invert(1); height: 38px; }
.ao-footer__tagline {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-style: normal;
  color: #94a3b8;
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-3);
  letter-spacing: 0.06em;
}
.ao-footer__desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-style: normal;
  line-height: 1.6;
  margin-bottom: var(--sp-5);
  max-width: 36ch;
  color: #b4bac4;
}

/* Social */
.ao-footer__social {
  display: flex;
  gap: var(--sp-2);
}
.ao-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: var(--r-full);
  color: #b4bac4;
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.ao-footer__social a:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background-color: rgba(240, 180, 113, 0.08);
}
.ao-footer__social a:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.ao-footer__social svg { width: 18px; height: 18px; }

/* Offices in footer */
.ao-footer__offices {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.ao-footer__office {
  padding-left: 0;
  font-style: normal;
}
.ao-footer__office strong {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}
.ao-footer__office address {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: #b4bac4;
}
.ao-footer__office a { color: #b4bac4; transition: color var(--t-fast); }
.ao-footer__office a:hover { color: var(--c-accent); }

/* Nav columns */
.ao-footer__nav-heading {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e2e8f0;
  margin-bottom: var(--sp-3);
}
.ao-footer__nav-sub {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.ao-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.ao-footer__links a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-style: normal;
  color: #b4bac4;
  transition: color var(--t-fast);
  line-height: 1.45;
}
.ao-footer__links a:hover { color: #fff; }
.ao-footer__links a:focus-visible {
  color: #fff;
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Get in touch col */
.ao-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-style: normal;
  color: #b4bac4;
}
.ao-footer__contact-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--c-accent);
}
.ao-footer__contact-item a { color: #b4bac4; transition: color var(--t-fast); }
.ao-footer__contact-item a:hover { color: #fff; }
.ao-footer__contact-cta { margin-top: var(--sp-4); }
.ao-footer .ao-btn--primary-light {
  background: #fff;
  color: var(--c-ink);
  border-color: #fff;
}
.ao-footer .ao-btn--primary-light:hover {
  background: var(--c-accent-light);
  color: var(--c-ink);
  border-color: var(--c-accent-light);
}

/* Bottom bar */
.ao-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-block: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.ao-footer__copy {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-style: normal;
  color: #94a3b8;
  line-height: 1.5;
}
.ao-footer__legal { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.ao-footer__legal a {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-style: normal;
  color: #94a3b8;
  transition: color var(--t-fast);
}
.ao-footer__legal a:hover { color: #fff; }
.ao-footer__legal a:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* ── 27. Page spacing (account for fixed header) ──────────────────────────── */

.ao-main { padding-top: var(--header-h); }
.is-front-page .ao-main { padding-top: 0; }
/* Inner pages with .ao-page-hero already include header offset; avoid double padding */
.ao-main:has(> .ao-page-hero) { padding-top: 0; }

/* ── 28. Utility ──────────────────────────────────────────────────────────── */

/* Spacing utilities (design tokens) */
.ao-mt-8  { margin-top: var(--sp-8); }
.ao-mt-12 { margin-top: var(--sp-12); }
.ao-mb-8  { margin-bottom: var(--sp-8); }
.ao-mb-0  { margin-bottom: 0; }
.ao-mt-4  { margin-top: var(--sp-4); }
.ao-mt-5  { margin-top: var(--sp-5); }
.ao-mt-6  { margin-top: var(--sp-6); }
.ao-mb-3  { margin-bottom: var(--sp-3); }
.ao-mb-5  { margin-bottom: var(--sp-5); }
.ao-mb-6  { margin-bottom: var(--sp-6); }
.ao-mb-4  { margin-bottom: var(--sp-4); }
.ao-ml-4  { margin-left: var(--sp-4); }

/* Small muted note text (replaces inline font-size/color) */
.ao-note { font-size: var(--text-sm); color: var(--c-muted); margin-top: var(--sp-4); }

/* Section / block spacing (for consistent paddings instead of inline styles) */
.ao-block-spacing { padding: var(--sp-16) 0; }
.ao-block-spacing--sm { padding: var(--sp-8) 0; }
.ao-stack { display: flex; flex-direction: column; gap: var(--sp-8); }
.ao-stack--sm { gap: var(--sp-4); }
.ao-flex-center { display: flex; align-items: center; }
.ao-btn--full { width: 100%; justify-content: center; }

/* Contact form success box (replaces inline styles) */
.ao-form-success {
  display: none;
  padding: var(--sp-10) var(--sp-8);
  background: var(--c-primary-50);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-primary-200);
}
.ao-form-success.ao-form-success--visible { display: block; }
.ao-form-success .ao-h2 { font-size: var(--text-2xl); margin-bottom: var(--sp-4); color: var(--c-primary-800); }
.ao-form-success p { color: var(--c-slate); font-size: var(--text-base); line-height: 1.4; margin: 0; }
.ao-form-success .ao-mt-5 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.ao-form-success .ao-mt-5 .ao-ml-4 { margin-left: 0; }

/* Office hours (small muted text under address) */
.ao-office-hours {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--c-muted);
}

/* Direct contact box (contact page sidebar) */
.ao-contact-direct-box {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  background: var(--c-primary-50);
  border-radius: var(--r-lg);
}
.ao-contact-direct-box .ao-label { margin-bottom: var(--sp-2); }
.ao-contact-direct-box p.ao-mb-0 { margin-bottom: 0; }

/* Post card date label spacing */
.ao-post-card__date { margin-bottom: var(--sp-2); }

/* No-results / empty state */
.ao-no-results-box { padding: var(--sp-16) 0; text-align: center; }
.ao-no-results-box .ao-lead { margin: 0 auto var(--sp-8); }

/* Prose no bottom margin (e.g. last paragraph before link) */
.ao-prose-last-no-margin p:last-child { margin-bottom: 0; }

/* Table wrapper for horizontal scroll */
.ao-table-wrap { overflow-x: auto; }

/* Article meta divider (single post back link) */
.ao-article-footer {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-border);
}

/* Featured image in single post */
.ao-single-featured {
  margin-bottom: var(--sp-10);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Single post: comfortable prose reading width and placement */
.single .ao-prose {
  max-width: 65ch;
}
.single .ao-prose:first-child {
  margin-top: 0;
}

.ao-no-results { font-size: var(--text-lg); color: var(--c-muted); padding: var(--sp-16) 0; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Sectors section: image left, content right */
.ao-sectors-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  align-items: stretch;
}
.ao-sectors-row__image {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-bg-soft);
  transition: box-shadow 0.7s var(--ease-smooth);
  min-height: 0;
}
.ao-sectors-row__image:hover {
  box-shadow: var(--shadow-card-hover);
}
.ao-sectors-row__image:hover img {
  transform: scale(1.04);
}
.ao-sectors-row__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.7s var(--ease-smooth);
}
.ao-sectors-row__content--full {
  max-width: var(--container-narrow);
}
/* When no image: single column so content uses full width (no empty right column) */
.ao-sectors-row--content-only {
  max-width: var(--container-max);
}
.ao-sectors-row--content-only .ao-sectors-row__content--full {
  max-width: none;
}
/* Two-column list when content-only so the section uses horizontal space */
.ao-sectors-row--content-only .ao-highlight-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
@media (min-width: 768px) {
  .ao-sectors-row {
    grid-template-columns: minmax(360px, 0.85fr) 1fr;
    gap: var(--sp-12);
  }
  /* Stretch image to full height of content column */
  .ao-sectors-row__image {
    display: flex;
  }
  .ao-sectors-row__image img {
    height: 100%;
    min-height: 100%;
    object-position: center;
  }
  .ao-sectors-row__content--full {
    max-width: none;
  }
  .ao-sectors-row--content-only {
    grid-template-columns: 1fr;
  }
  .ao-sectors-row--content-only .ao-highlight-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3) var(--sp-8);
  }
}

/* Highlight list (used in service pages) */
.ao-highlight-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
}
.ao-highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-base);
  color: var(--c-slate);
  line-height: 1.6;
}
.ao-highlight-list li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23003b25'%3E%3Cpath fill-rule='evenodd' d='M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z' clip-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Info box */
.ao-info-box {
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-accent-light);
  border: 1px solid var(--c-accent);
  border-left: 4px solid var(--c-accent-warm);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  color: var(--c-ink);
  line-height: 1.65;
  margin: var(--sp-6) 0;
}
.ao-info-box strong { color: var(--c-primary-800); }

/* Decision guide cards: distinct backgrounds for separation */
.ao-card--subsidiary {
  background: var(--c-primary-50);
  border-color: var(--c-primary-200);
}
.ao-card--branch {
  background: var(--c-bg);
  border-color: var(--c-primary-200);
  box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.06);
}

/* Inline link */
.ao-link {
  color: var(--c-primary-800);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  transition: color var(--t-fast);
}
.ao-link:hover { color: var(--c-accent-warm); }

/* Section intro text (max 70ch) */
.ao-section-intro {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  color: var(--c-slate);
  line-height: 1.7;
  max-width: 70ch;
  margin-bottom: var(--sp-10);
}


/* ── Guidance visual (Expert Guidance section) ───────────────────────────── */
.ao-grid-2--guidance {
  align-items: stretch;
}
.ao-guidance-visual {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ao-guidance-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ao-guidance-content--full {
  grid-column: 1 / -1;
  max-width: 68ch;
}
.ao-guidance-content .ao-btn {
  margin-top: auto;
}
.ao-section--guidance .ao-section-intro { margin-bottom: var(--sp-6); }
.ao-guidance-photo {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  flex: 1;
  min-height: 0;
  transition: box-shadow 0.7s var(--ease-smooth);
}
.ao-guidance-photo:hover {
  box-shadow: var(--shadow-card-hover);
}
.ao-guidance-photo:hover img {
  transform: scale(1.04);
}
.ao-guidance-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.7s var(--ease-smooth);
}
.ao-guidance-offices {
  margin-top: var(--sp-12);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--c-border);
}
.ao-guidance-offices .ao-label { margin-bottom: var(--sp-5); }
.ao-offices--horizontal { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) {
  .ao-offices--horizontal { grid-template-columns: 1fr; }
}
.ao-btn:focus-visible {
  outline: 2px solid var(--c-primary-500);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   28. COMPREHENSIVE HOVER ANIMATIONS
   Every content block and element gets a subtle, purposeful hover response.
   All transitions automatically suppressed under prefers-reduced-motion via
   the global reset at the top of the file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section header: gentle lift + gold line widens + deepens ── */
.ao-section-header {
  transition: transform 0.45s var(--ease-smooth);
}
.ao-section-header:hover {
  transform: translateY(-3px);
}
.ao-gold-line {
  transition: width 0.4s var(--ease-smooth), background-color 0.3s var(--ease-smooth);
}
.ao-section-header:hover .ao-gold-line {
  width: 6rem;
  background-color: var(--c-accent-warm);
}

/* ── Label (eyebrow text above headings): colour intensifies ── */
.ao-label {
  transition: color 0.25s var(--ease-smooth), letter-spacing 0.35s var(--ease-smooth);
}
.ao-label:hover {
  color: var(--c-primary-700);
  letter-spacing: 0.27em;
}

/* ── Hero eyebrow: warm accent glow + slight spacing ── */
.ao-eyebrow {
  transition: color 0.25s var(--ease-smooth), letter-spacing 0.35s var(--ease-smooth);
}
.ao-eyebrow:hover {
  color: var(--c-accent-warm);
  letter-spacing: 0.28em;
}

/* ── Section intro paragraph: rises slightly + colour deepens ── */
.ao-section-intro {
  transition: color 0.35s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}
.ao-section-intro:hover {
  color: var(--c-ink);
  transform: translateY(-2px);
}

/* ── Prose blockquote: slides right + accent border warms ── */
.ao-prose blockquote {
  transition: border-left-color 0.35s var(--ease-smooth),
              background 0.35s var(--ease-smooth),
              transform 0.45s var(--ease-smooth);
}
.ao-prose blockquote:hover {
  border-left-color: var(--c-accent-warm);
  background: rgba(240, 180, 113, 0.14);
  transform: translateX(6px);
}

/* ── Team card: lift + shadow + border highlight ── */
.ao-team-card {
  transition: box-shadow 0.45s var(--ease-smooth),
              transform 0.5s var(--ease-smooth-3d),
              border-color 0.35s var(--ease-smooth);
}
.ao-team-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-5px);
  border-color: var(--c-primary-200);
}
.ao-team-card:hover .ao-team-card__photo img {
  transform: scale(1.05);
}
.ao-team-card--icon:hover .ao-team-card__photo--icon {
  transform: scale(1.05);
}

/* ── Team card name: subtle colour shift on card hover ── */
.ao-team-card__name {
  transition: color 0.3s var(--ease-smooth);
}
.ao-team-card:hover .ao-team-card__name {
  color: var(--c-primary-700);
}

/* ── Testimonial: whole block lifts ── */
.ao-testimonial {
  transition: transform 0.5s var(--ease-smooth-3d);
}
.ao-testimonial:hover {
  transform: translateY(-4px);
}
/* Quote text: brightens ── */
.ao-testimonial__quote {
  transition: color 0.35s var(--ease-smooth), transform 0.45s var(--ease-smooth);
  display: block;
}
.ao-testimonial__quote:hover {
  color: #fff;
  transform: scale(1.012);
}
/* Author credit: rises ── */
.ao-testimonial__author {
  transition: color 0.3s var(--ease-smooth), transform 0.4s var(--ease-smooth);
  display: block;
}
.ao-testimonial__author:hover {
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

/* ── Image-quote blockquote: gentle scale + text brightens ── */
.ao-image-quote blockquote {
  transition: transform 0.5s var(--ease-smooth-3d), color 0.35s var(--ease-smooth);
}
.ao-image-quote blockquote:hover {
  transform: scale(1.015);
  color: rgba(255, 255, 255, 1);
}

/* ── Highlight list items: slide right + text accents ── */
.ao-highlight-list li {
  transition: color 0.3s var(--ease-smooth), transform 0.35s var(--ease-smooth);
}
.ao-highlight-list li:hover {
  color: var(--c-primary-800);
  transform: translateX(8px);
}

/* ── Tags: warm background + tiny lift ── */
.ao-tag {
  transition: background 0.25s var(--ease-smooth),
              color 0.25s var(--ease-smooth),
              border-color 0.25s var(--ease-smooth),
              transform 0.3s var(--ease-smooth-3d);
}
.ao-tag:hover {
  background: var(--c-primary-100);
  color: var(--c-primary-800);
  border-color: var(--c-primary-400);
  transform: translateY(-2px);
}

/* ── Process step badge: scale + tilt on step hover ── */
.ao-step__badge {
  transition: background 0.35s var(--ease-smooth), transform 0.4s var(--ease-smooth-3d);
}
.ao-step:hover .ao-step__badge--icon {
  background: var(--c-accent-warm);
  transform: scale(1.08) rotate(-3deg);
}
.ao-step:hover .ao-step__badge--num {
  background: var(--c-primary-600);
  transform: scale(1.08) rotate(-3deg);
}

/* ── Service card icon: spin + scale on card hover ── */
.ao-card__icon {
  transition: transform 0.45s var(--ease-smooth-3d), background 0.35s var(--ease-smooth);
}
.ao-card:hover .ao-card__icon {
  transform: scale(1.12) rotate(-6deg);
}

/* ── Trust item icon: brightens + spins on item hover ── */
.ao-trust-item__icon {
  transition: background 0.35s var(--ease-smooth),
              color 0.35s var(--ease-smooth),
              transform 0.45s var(--ease-smooth-3d);
}
.ao-trust-item:hover .ao-trust-item__icon {
  background: var(--c-primary-100);
  color: var(--c-primary-600);
  transform: scale(1.12) rotate(-6deg);
}

/* ── Stat value: shifts to a brighter green on stat hover ── */
.ao-stat__value {
  transition: color 0.35s var(--ease-smooth);
}
.ao-stat:hover .ao-stat__value {
  color: var(--c-primary-600);
}
.ao-stat__label {
  transition: color 0.3s var(--ease-smooth);
}
.ao-stat:hover .ao-stat__label {
  color: var(--c-primary-700);
}

/* ── Approach step meta badge: warm tint on step hover ── */
.ao-step__meta {
  transition: background 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth);
}
.ao-step:hover .ao-step__meta {
  background: var(--c-primary-100);
  color: var(--c-primary-800);
}

/* ── Office card flag: bounces on card hover ── */
.ao-office-card__flag {
  transition: transform 0.4s var(--ease-smooth-3d);
  display: inline-block;
}
.ao-office-card:hover .ao-office-card__flag {
  transform: scale(1.25) rotate(-6deg);
}

/* ── Office card city name: colour shift on card hover ── */
.ao-office-card__city {
  transition: color 0.3s var(--ease-smooth);
}
.ao-office-card:hover .ao-office-card__city {
  color: var(--c-primary-700);
}

/* ── CTA section heading: subtle scale on hover ── */
.ao-cta-section .ao-h2 {
  transition: transform 0.45s var(--ease-smooth-3d);
  display: inline-block;
}
.ao-cta-section .ao-h2:hover {
  transform: scale(1.015);
}
.ao-cta-section__sub {
  transition: color 0.35s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}
.ao-cta-section__sub:hover {
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

/* ── Guidance content section intro: same lift as global intro ── */
.ao-guidance-content .ao-section-intro {
  transition: color 0.35s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}
.ao-guidance-content .ao-section-intro:hover {
  color: var(--c-ink);
  transform: translateY(-2px);
}

/* ── Hero cities line: subtle glow on hover ── */
.ao-hero__cities {
  transition: color 0.3s var(--ease-smooth), letter-spacing 0.4s var(--ease-smooth);
}
.ao-hero__cities:hover {
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.28em;
}

/* ── Hero subtitle: slight lift ── */
.ao-hero__sub {
  transition: color 0.3s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}
.ao-hero__sub:hover {
  color: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
}

/* ── Guidance offices label: matches global label hover ── */
.ao-guidance-offices .ao-label {
  transition: color 0.25s var(--ease-smooth), letter-spacing 0.35s var(--ease-smooth);
}
.ao-guidance-offices .ao-label:hover {
  color: var(--c-primary-700);
  letter-spacing: 0.27em;
}

/* ── About content btn link text arrow: inherits .ao-btn hover; prose link: slide ── */
.ao-about__content .ao-link {
  transition: color 0.25s var(--ease-smooth), text-decoration-color 0.25s var(--ease-smooth),
              transform 0.35s var(--ease-smooth);
  display: inline-block;
}
.ao-about__content .ao-link:hover {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOVER ANIMATIONS — INNER PAGES & GLOBAL CONTENT
   Same hover treatment as homepage for every page and every content piece.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page hero (inner pages): match home hero feel ── */
.ao-page-hero .ao-eyebrow {
  transition: color 0.25s var(--ease-smooth), letter-spacing 0.35s var(--ease-smooth);
}
.ao-page-hero .ao-eyebrow:hover {
  color: var(--c-accent-warm);
  letter-spacing: 0.28em;
}
.ao-page-hero__title {
  transition: color 0.35s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}
.ao-page-hero__title:hover {
  color: rgba(255, 255, 255, 0.98);
  transform: translateY(-2px);
}
.ao-page-hero__sub {
  transition: color 0.3s var(--ease-smooth), transform 0.4s var(--ease-smooth);
}
.ao-page-hero__sub:hover {
  color: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
}

/* ── Section headings (all pages): subtle lift ── */
.ao-h2, .ao-h3 {
  transition: color 0.3s var(--ease-smooth), transform 0.45s var(--ease-smooth-3d);
}
.ao-section .ao-h2:hover,
.ao-section .ao-h3:hover {
  color: var(--c-primary-800);
  transform: translateY(-2px);
}
.ao-section--dark .ao-h2:hover,
.ao-section--dark .ao-h3:hover {
  color: rgba(255, 255, 255, 0.95);
}

/* ── Prose paragraphs: subtle colour deepen on hover ── */
.ao-prose p {
  transition: color 0.35s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}
.ao-prose p:hover {
  color: var(--c-ink);
  transform: translateY(-1px);
}

/* ── Prose headings (h2, h3 inside content) ── */
.ao-prose h2, .ao-prose h3, .ao-prose h4 {
  transition: color 0.3s var(--ease-smooth), transform 0.35s var(--ease-smooth);
}
.ao-prose h2:hover, .ao-prose h3:hover, .ao-prose h4:hover {
  color: var(--c-primary-800);
  transform: translateX(4px);
}

/* ── Lead paragraph (all pages) ── */
.ao-lead {
  transition: color 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth);
}
.ao-lead:hover {
  color: var(--c-ink);
  transform: translateY(-2px);
}

/* ── Section container: very subtle lift so whole block responds ── */
.ao-section > .ao-container {
  transition: transform 0.5s var(--ease-smooth-3d);
}
.ao-section > .ao-container:hover {
  transform: translateY(-2px);
}

/* ── Sectors row content (service pages, WSA, etc.) ── */
.ao-sectors-row__content {
  transition: transform 0.45s var(--ease-smooth-3d), box-shadow 0.4s var(--ease-smooth);
}
.ao-sectors-row__content:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* ── FAQ page: section header and CTA ── */
.ao-faq-section-header {
  transition: transform 0.4s var(--ease-smooth), color 0.3s var(--ease-smooth);
}
.ao-faq-section-header:hover {
  transform: translateY(-2px);
  color: var(--c-primary-800);
}
.ao-faq-cta-icon {
  transition: transform 0.45s var(--ease-smooth-3d);
}
.ao-faq-cta-icon:hover {
  transform: scale(1.08) rotate(-3deg);
}

/* ── Contact grid columns ── */
.ao-contact-grid > div {
  transition: transform 0.4s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}
.ao-contact-grid > div:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* ── Form block (contact page) ── */
.ao-form {
  transition: box-shadow 0.4s var(--ease-smooth);
}
.ao-form:hover {
  box-shadow: var(--shadow-card);
}

/* ── Note / helper text ── */
.ao-note {
  transition: color 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
}
.ao-note:hover {
  color: var(--c-slate);
  border-color: var(--c-primary-300);
}