/**
 * Asterion Bricks — Components
 *
 * Component-level styles, layered on top of tokens + utilities.
 * Loaded last in the cascade.
 *
 * Naming : `.av-<component>` base, `.av-<component>--<modifier>`,
 *          `.av-<component>__<element>`, `.av-<component>.is-<state>`.
 *
 * Reference : Design Handoff Specification, section 3.
 *
 * Index :
 *   1.  Buttons              .av-btn
 *   2.  Links                .av-link
 *   3.  Forms                .av-input / .av-label / .av-select / .av-textarea
 *   4.  Cards                .av-card and variants
 *   5.  Stat callout         .av-stat
 *   6.  Header & navigation  .av-header / .av-nav / .av-megamenu / .av-drawer
 *   7.  Footer               .av-footer
 *   8.  Hero                 .av-hero
 *   9.  Logo strip           .av-logo-strip
 *   10. Eyebrow / overline   .av-eyebrow
 *   11. Section titles       .av-section__title / .av-section__lead
 *   12. Conversion banner    .av-conversion-banner
 *   13. Reveal animation     [data-av-reveal]
 */


/* ============================================================================
   1. Buttons (Design Handoff section 3.1)
   ============================================================================ */

.av-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  height: 44px;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  border: var(--border-default) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-default) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default);
}

.av-btn:disabled,
.av-btn.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.av-btn.is-loading  { cursor: wait; }

.av-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-body-sm); }
.av-btn--md { height: 44px; padding: 0 var(--space-5); }
.av-btn--lg { height: 52px; padding: 0 1.75rem; font-size: var(--text-body-lg); }
.av-btn--xl { height: 60px; padding: 0 2.25rem; font-size: var(--text-h4); font-weight: var(--font-weight-bold); }

.av-btn--primary {
  background-color: var(--color-brand-gold);
  color: var(--color-brand-navy);
  border-color: var(--color-brand-gold);
}
.av-btn--primary:hover,
.av-btn--primary:focus-visible {
  background-color: var(--color-brand-gold-soft);
  border-color: var(--color-brand-gold-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow-gold);
}
.av-btn--primary:active { transform: translateY(0); filter: brightness(0.92); box-shadow: none; }

.av-btn--secondary {
  background-color: transparent;
  color: var(--color-brand-navy);
  border-color: var(--color-brand-navy);
}
.av-btn--secondary:hover,
.av-btn--secondary:focus-visible {
  background-color: var(--color-brand-navy);
  color: var(--color-text-on-dark);
}

.av-btn--ghost {
  background-color: transparent;
  color: var(--color-brand-navy);
  border-color: transparent;
}
.av-btn--ghost:hover,
.av-btn--ghost:focus-visible {
  background-color: var(--color-bg-subtle);
}

.av-btn--on-dark.av-btn--secondary {
  color: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark);
}
.av-btn--on-dark.av-btn--secondary:hover,
.av-btn--on-dark.av-btn--secondary:focus-visible {
  background-color: var(--color-text-on-dark);
  color: var(--color-brand-navy);
}
.av-btn--on-dark.av-btn--ghost { color: var(--color-text-on-dark); }
.av-btn--on-dark.av-btn--ghost:hover,
.av-btn--on-dark.av-btn--ghost:focus-visible {
  background-color: var(--color-bg-dark-elevated);
}

.av-btn--destructive {
  background-color: var(--color-alert-red);
  color: var(--color-text-on-dark);
  border-color: var(--color-alert-red);
}
.av-btn--destructive:hover,
.av-btn--destructive:focus-visible { filter: brightness(1.08); }


/* ============================================================================
   2. Links (Design Handoff section 3.2)
   ============================================================================ */

.av-link {
  color: var(--color-brand-navy);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
.av-link:hover {
  color: var(--color-brand-gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.av-link--on-dark { color: var(--color-text-on-dark); }
.av-link--on-dark:hover { color: var(--color-brand-gold); }

.av-link--with-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
}
.av-link--with-arrow::after {
  content: "→";
  transition: transform var(--duration-fast) var(--ease-default);
}
.av-link--with-arrow:hover::after { transform: translateX(4px); }


/* ============================================================================
   3. Forms — to be filled when conversion templates are built
   ============================================================================ */

.av-input, .av-textarea, .av-select {
  display: block;
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: var(--text-body-md);
  color: var(--color-text-primary);
  background-color: var(--color-bg-default);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) var(--ease-default);
}
.av-textarea { height: auto; min-height: 96px; resize: vertical; }
.av-input:focus,
.av-textarea:focus,
.av-select:focus {
  border-color: var(--color-info);
  border-width: var(--border-default);
  outline: none;
  padding: 9px 11px;  /* compensate for 1px extra border */
}
.av-input.is-error,
.av-textarea.is-error { border-color: var(--color-error); border-width: var(--border-default); }
.av-input.is-success { border-color: var(--color-success); border-width: var(--border-default); }
.av-input:disabled { background: var(--color-bg-subtle); color: var(--color-text-muted); }

.av-label {
  display: block;
  font-size: var(--text-body-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.av-label__required { color: var(--color-error); margin-left: var(--space-1); }

.av-helper {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}
.av-helper.is-error { color: var(--color-error); }


/* ============================================================================
   4. Cards (Design Handoff section 3.4)
   ============================================================================ */

.av-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    box-shadow var(--duration-default) var(--ease-default),
    transform var(--duration-default) var(--ease-default);
}
.av-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.av-card.is-on-dark {
  background-color: var(--color-bg-dark-elevated);
  color: var(--color-text-on-dark);
}

.av-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg-subtle);
  overflow: hidden;
}
.av-card__media img,
.av-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-default) var(--ease-default);
}
.av-card:hover .av-card__media img { transform: scale(1.04); }

.av-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-6);
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .av-card__body { padding: var(--space-8); }
}

.av-card__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-overline);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-text-muted);
}
.av-card.is-on-dark .av-card__eyebrow { color: var(--color-brand-gold); }

.av-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
}
.av-card.is-on-dark .av-card__title { color: var(--color-text-on-dark); }

.av-card__excerpt {
  font-size: var(--text-body-md);
  line-height: var(--leading-body-md);
  color: var(--color-text-secondary);
}
.av-card.is-on-dark .av-card__excerpt { color: var(--color-text-on-dark-muted); }

.av-card__cta { margin-top: auto; padding-top: var(--space-4); }

/* Variant : feature card (icon top instead of image) */
.av-card--feature .av-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-2);
  color: var(--color-brand-gold);
}

/* Variant : case study (image with overlay) */
.av-card--case-study .av-card__media { aspect-ratio: 16 / 9; }
.av-card--case-study .av-card__metric {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-display-md);
  color: var(--color-brand-gold);
}

/* Variant : quote (testimonial) */
.av-card--quote {
  background-color: var(--color-bg-subtle);
  padding: var(--space-8);
  gap: var(--space-4);
}
.av-card--quote::before {
  content: "“";
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-brand-gold);
  margin-bottom: -2.5rem;
}
.av-card--quote .av-card__quote {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-text-primary);
  font-style: italic;
}
.av-card--quote .av-card__attribution {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  font-style: normal;
}

/* Variant : blog */
.av-card--blog .av-card__media { aspect-ratio: 16 / 9; }


/* ============================================================================
   5. Stat callout (Design Handoff section 3.4 - stat callout component)
   ============================================================================ */

.av-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.av-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  line-height: var(--leading-display-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  letter-spacing: var(--tracking-tight);
}
.av-stat--gold .av-stat__value { color: var(--color-brand-gold); }
.av-stat--on-dark .av-stat__value { color: var(--color-text-on-dark); }
.av-stat--on-dark.av-stat--gold .av-stat__value { color: var(--color-brand-gold); }

.av-stat__label {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-text-muted);
}
.av-stat--on-dark .av-stat__label { color: var(--color-text-on-dark-muted); }

.av-stat__source {
  font-size: var(--text-overline);
  color: var(--color-text-muted);
}


/* ============================================================================
   6. Header & navigation (Design Handoff section 3.5)
   ============================================================================ */

.av-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-bg-default);
  height: 60px;
  display: flex;
  align-items: center;
  transition: box-shadow var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default);
}
@media (min-width: 1024px) {
  .av-header { height: 72px; }
}
.av-header.is-scrolled { box-shadow: var(--shadow-sm); }

.av-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-6);
}

.av-header__logo {
  display: flex;
  align-items: center;
  height: 32px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-h4);
  color: var(--color-brand-navy);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  flex-shrink: 0;
}
.av-header__logo svg, .av-header__logo img { height: 32px; width: auto; }

.av-nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
  flex: 1;
  justify-content: center;
}
@media (min-width: 1024px) {
  .av-nav { display: flex; }
}

.av-nav__item { position: relative; }

.av-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 60px;
  padding: 0 var(--space-2);
  font-size: var(--text-body-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
.av-nav__link:hover,
.av-nav__link[aria-expanded="true"] { color: var(--color-brand-gold); }
.av-nav__link[aria-haspopup="true"]::after {
  content: "▾";
  font-size: 0.7em;
  margin-left: var(--space-1);
  transition: transform var(--duration-fast) var(--ease-default);
}
.av-nav__link[aria-expanded="true"]::after { transform: rotate(180deg); }

.av-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.av-lang-switch {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}
@media (min-width: 1024px) { .av-lang-switch { display: inline-flex; } }
.av-lang-switch__current {
  color: var(--color-brand-navy);
  font-weight: var(--font-weight-semibold);
}
.av-lang-switch__other { color: var(--color-text-muted); }
.av-lang-switch__other:hover { color: var(--color-brand-navy); }

.av-header__cta-mobile-only { display: none; }


/* --- Mega menu (desktop only) --- */

.av-megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background-color: var(--color-bg-default);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  display: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.av-megamenu.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.av-megamenu__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
.av-megamenu__col-title {
  font-size: var(--text-overline);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.av-megamenu__list { display: flex; flex-direction: column; gap: var(--space-2); }
.av-megamenu__link {
  font-size: var(--text-body-md);
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  padding-block: var(--space-1);
}
.av-megamenu__link:hover { color: var(--color-brand-gold); }


/* --- Drawer (mobile) --- */

.av-drawer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-brand-navy);
}
@media (min-width: 1024px) { .av-drawer-toggle { display: none; } }

.av-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-fixed);
  background-color: var(--color-brand-navy);
  color: var(--color-text-on-dark);
  padding: var(--space-6);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-default);
  visibility: hidden;
}
.av-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.av-drawer__close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--color-text-on-dark);
  cursor: pointer;
  font-size: 1.5rem;
}
.av-drawer__nav { margin-top: var(--space-12); }
.av-drawer__group { border-bottom: 1px solid var(--color-border-on-dark); }
.av-drawer__group-title {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  background: transparent;
  border: none;
  color: var(--color-text-on-dark);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.av-drawer__cta-area {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-on-dark);
}


/* ============================================================================
   7. Footer (Design Handoff section 3.5)
   ============================================================================ */

.av-footer {
  background-color: var(--color-brand-navy-deep);
  color: var(--color-text-on-dark);
  padding-block: var(--space-12);
}
@media (min-width: 1024px) {
  .av-footer { padding-block: var(--space-20); }
}

.av-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 768px) {
  .av-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .av-footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; gap: var(--space-8); }
}

.av-footer__col-title {
  font-size: var(--text-overline);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-brand-gold);
  margin-bottom: var(--space-4);
}

.av-footer__list { display: flex; flex-direction: column; gap: var(--space-3); }
.av-footer__list a {
  color: var(--color-text-on-dark-muted);
  font-size: var(--text-body-md);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
.av-footer__list a:hover { color: var(--color-text-on-dark); }

.av-footer__brand p {
  color: var(--color-text-on-dark-muted);
  font-size: var(--text-body-md);
  line-height: var(--leading-body-md);
}
.av-footer__brand .av-header__logo {
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-4);
}

.av-footer__newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.av-footer__bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-on-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--color-text-on-dark-muted);
}
.av-footer__bottom-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.av-footer__bottom-links a {
  color: var(--color-text-on-dark-muted);
  text-decoration: none;
}
.av-footer__bottom-links a:hover { color: var(--color-text-on-dark); }


/* ============================================================================
   8. Hero (home + page heroes)
   ============================================================================ */

.av-hero {
  position: relative;
  background-color: var(--color-brand-navy);
  color: var(--color-text-on-dark);
  overflow: hidden;
  isolation: isolate;
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-20);
}
@media (min-width: 1024px) { .av-hero { min-height: 85vh; padding-block: var(--space-32); } }

.av-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.av-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 20, 39, 0.55), rgba(11, 31, 58, 0.85));
}
.av-hero__media video,
.av-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.av-hero__inner {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.av-hero__eyebrow {
  font-size: var(--text-overline);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-brand-gold);
}

.av-hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, var(--text-display-xl));
  line-height: var(--leading-display-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-dark);
  margin: 0;
  max-width: 18ch;
}

.av-hero__sub {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-text-on-dark-muted);
  max-width: 60ch;
  margin: 0;
}

.av-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}


/* ============================================================================
   9. Logo strip (trust bar)
   ============================================================================ */

.av-logo-strip {
  background-color: var(--color-bg-subtle);
  padding-block: var(--space-10);
}
.av-logo-strip__intro {
  text-align: center;
  font-size: var(--text-overline);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.av-logo-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}
.av-logo-strip__logo {
  height: 40px;
  width: 120px;
  background-color: var(--color-bg-elevated);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}
.av-logo-strip__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  text-align: center;
}
@media (min-width: 768px) {
  .av-logo-strip__metrics { grid-template-columns: repeat(4, 1fr); }
}
.av-logo-strip__metric {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}


/* ============================================================================
   10. Eyebrow / overline
   ============================================================================ */

.av-eyebrow {
  display: inline-block;
  font-size: var(--text-overline);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--color-text-muted);
}
.av-eyebrow--gold { color: var(--color-brand-gold); }


/* ============================================================================
   11. Section title + lead
   ============================================================================ */

.av-section__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-h1), 4vw, var(--text-display-md));
  line-height: var(--leading-display-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
  max-width: 24ch;
}
.av-section--dark .av-section__title { color: var(--color-text-on-dark); }

.av-section__lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin: 0;
}
.av-section--dark .av-section__lead { color: var(--color-text-on-dark-muted); }

.av-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
  max-width: 720px;
}

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

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


/* ============================================================================
   12. Conversion banner (3 CTAs side-by-side, dark)
   ============================================================================ */

.av-conversion-banner {
  background-color: var(--color-brand-navy);
  color: var(--color-text-on-dark);
  padding-block: var(--space-20);
}
.av-conversion-banner__head {
  text-align: center;
  margin-bottom: var(--space-12);
}
.av-conversion-banner__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-h1), 5vw, var(--text-display-lg));
  line-height: var(--leading-display-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-dark);
  margin: 0 auto var(--space-4) auto;
  max-width: 20ch;
}
.av-conversion-banner__lead {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark-muted);
  max-width: 56ch;
  margin: 0 auto;
}
.av-conversion-banner__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) { .av-conversion-banner__grid { grid-template-columns: repeat(3, 1fr); } }

.av-conversion-banner__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background-color: var(--color-bg-dark-elevated);
  border: 1px solid var(--color-border-on-dark);
  border-radius: var(--radius-md);
}
.av-conversion-banner__card-title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-on-dark);
}
.av-conversion-banner__card-desc {
  font-size: var(--text-body-md);
  color: var(--color-text-on-dark-muted);
  flex: 1;
}


/* ============================================================================
   13. Reveal animation (scroll-triggered, JS-driven via main.js)
   ============================================================================ */

[data-av-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-deliberate) var(--ease-default),
    transform var(--duration-deliberate) var(--ease-default);
}
[data-av-reveal].is-revealed,
.no-js [data-av-reveal] {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-av-reveal] { opacity: 1; transform: none; transition: none; }
}