/* ==========================================================================
   CentFX Academy — design system
   Loaded last so it can sit on top of the vendored bundles (css1–7, Bootstrap).
   Every class is prefixed with `ac-` to avoid collisions with those bundles.
   Third-party embeds (terl3 iframes, Tawk.to) are never styled internally;
   only their surrounding containers are.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --ac-gold-50: #fff8e1;
  --ac-gold-100: #fdecb5;
  --ac-gold-200: #f8dc80;
  --ac-gold-400: #facf49;
  --ac-gold-500: #f2c230;
  --ac-gold-600: #d9a916;
  --ac-gold-700: #9a6f00;

  /* Dark surfaces (header, footer, hero) */
  --ac-ink-950: #0a0b0d;
  --ac-ink-900: #111317;
  --ac-ink-800: #1a1d23;
  --ac-ink-700: #262a31;
  --ac-on-dark: #f3f4f6;
  --ac-on-dark-muted: #a8aebb;
  --ac-on-dark-subtle: #7f8694;
  --ac-border-dark: rgba(255, 255, 255, 0.09);
  --ac-border-dark-strong: rgba(255, 255, 255, 0.18);

  /* Light surfaces (content) */
  --ac-bg: #f5f6f8;
  --ac-surface: #ffffff;
  --ac-surface-muted: #f9fafb;
  --ac-border: #e5e7eb;
  --ac-border-strong: #d1d5db;
  --ac-text: #111827;
  --ac-text-muted: #4b5563;
  --ac-text-subtle: #6b7280;

  /* Status */
  --ac-success: #15803d;
  --ac-success-bg: #ecfdf3;
  --ac-warning: #b45309;
  --ac-warning-bg: #fffbeb;
  --ac-danger: #b91c1c;
  --ac-danger-bg: #fef2f2;
  --ac-info: #1d4ed8;
  --ac-info-bg: #eff6ff;

  /* Interaction */
  --ac-focus: var(--ac-gold-700);
  --ac-disabled-opacity: 0.5;

  /* Typography */
  --ac-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ac-text-xs: 0.75rem;     /* 12 */
  --ac-text-sm: 0.875rem;    /* 14 */
  --ac-text-base: 1rem;      /* 16 */
  --ac-text-lg: 1.125rem;    /* 18 */
  --ac-text-xl: 1.25rem;     /* 20 */
  --ac-text-2xl: 1.5rem;     /* 24 */
  --ac-text-3xl: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  --ac-text-4xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --ac-leading-tight: 1.2;
  --ac-leading-snug: 1.4;
  --ac-leading-normal: 1.6;

  /* Spacing (4px scale) */
  --ac-space-1: 0.25rem;
  --ac-space-2: 0.5rem;
  --ac-space-3: 0.75rem;
  --ac-space-4: 1rem;
  --ac-space-5: 1.25rem;
  --ac-space-6: 1.5rem;
  --ac-space-8: 2rem;
  --ac-space-10: 2.5rem;
  --ac-space-12: 3rem;
  --ac-space-16: 4rem;
  --ac-space-20: 5rem;

  /* Shape & depth */
  --ac-radius-sm: 6px;
  --ac-radius-md: 10px;
  --ac-radius-lg: 14px;
  --ac-radius-pill: 999px;
  --ac-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --ac-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --ac-shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --ac-shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.35);
  --ac-ease: cubic-bezier(0.2, 0, 0, 1);
  --ac-duration: 160ms;

  /* Layout */
  --ac-container: 1240px;
  --ac-gutter: 1rem;
  --ac-header-h: 84px;
  --ac-ribbon-h: 40px;
}

@media (min-width: 768px) {
  :root { --ac-gutter: 1.5rem; }
}

@media (min-width: 1280px) {
  :root { --ac-header-h: 96px; }
}

/* ---------- Base ---------- */
html {
  scroll-padding-top: calc(var(--ac-header-h) + var(--ac-space-4));
}

body {
  font-family: var(--ac-font);
  font-size: var(--ac-text-base);
  line-height: var(--ac-leading-normal);
  color: var(--ac-text);
  background-color: var(--ac-bg);
  padding-top: var(--ac-header-h);
  font-feature-settings: "cv11", "ss01"; /* Inter: straight-sided 1, open digits */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.ac-no-scroll {
  overflow: hidden;
}

/* ── Scrollbar ── */
* { scrollbar-width: thin; scrollbar-color: var(--ac-gold-500) transparent; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--ac-gold-400) 0%, var(--ac-gold-600) 100%);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ac-gold-400); }
::-webkit-scrollbar-corner { background: transparent; }

::selection {
  background: var(--ac-gold-200);
  color: var(--ac-ink-950);
}

/* Balanced headings and fewer orphaned words in body copy */
.ac-main h1,
.ac-main h2,
.ac-main h3,
.ac-cta h2 { text-wrap: balance; }

.ac-main p,
.ac-footer p { text-wrap: pretty; }

/* The vendored bundle removes every focus outline (`:focus { outline: none !important }`).
   Restore a visible keyboard focus ring; !important is required to win over it. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ac-focus) !important;
  outline-offset: 2px;
}

.ac-header,
.ac-drawer,
.ac-ribbon,
.ac-hero,
.ac-cta,
.ac-footer,
.ac-social-rail,
.ac-back-top {
  --ac-focus: var(--ac-gold-400);
}

.ac-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ac-skip-link {
  position: fixed;
  top: var(--ac-space-3);
  left: var(--ac-space-3);
  z-index: 1200;
  padding: var(--ac-space-2) var(--ac-space-4);
  border-radius: var(--ac-radius-sm);
  background: var(--ac-gold-400);
  color: var(--ac-ink-950);
  font-weight: 600;
  transform: translateY(-200%);
}

.ac-skip-link:focus {
  transform: none;
  color: var(--ac-ink-950);
}

.ac-container {
  width: 100%;
  max-width: calc(var(--ac-container) + var(--ac-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--ac-gutter);
}

.ac-section {
  padding-block: var(--ac-space-12);
}

@media (min-width: 992px) {
  .ac-section { padding-block: var(--ac-space-16); }
}

.ac-section--tight-top { padding-top: var(--ac-space-8); }

.ac-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-space-2);
  margin: 0 0 var(--ac-space-3);
  font-size: var(--ac-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-gold-700);
}

.ac-eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.ac-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ac-space-4);
  margin-bottom: var(--ac-space-8);
}

.ac-section-head h2 {
  margin: 0;
  font-size: var(--ac-text-3xl);
  font-weight: 700;
  line-height: var(--ac-leading-tight);
  letter-spacing: -0.02em;
  color: var(--ac-text);
}

.ac-section-head p {
  margin: var(--ac-space-2) 0 0;
  max-width: 60ch;
  color: var(--ac-text-muted);
}

/* ---------- Buttons ---------- */
.ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ac-space-2);
  height: 44px;
  padding: 0 var(--ac-space-5);
  border: 1px solid transparent;
  border-radius: var(--ac-radius-md);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ac-duration) var(--ac-ease),
    border-color var(--ac-duration) var(--ac-ease),
    color var(--ac-duration) var(--ac-ease),
    box-shadow var(--ac-duration) var(--ac-ease),
    transform var(--ac-duration) var(--ac-ease);
}

.ac-btn:hover,
.ac-btn:focus { text-decoration: none; }

.ac-btn:active { transform: translateY(1px); }

.ac-btn i { font-size: 0.85em; }

/* Inline Lucide icons (see icons.php): stroke-based, inherit color and sit on the text baseline */
.ac-icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.125em;
}

.ac-btn[disabled],
.ac-btn[aria-disabled="true"] {
  opacity: var(--ac-disabled-opacity);
  pointer-events: none;
}

.ac-btn--primary {
  background: var(--ac-gold-400);
  border-color: var(--ac-gold-500);
  color: var(--ac-ink-950);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.ac-btn--primary:hover {
  background: var(--ac-gold-500);
  border-color: var(--ac-gold-600);
  color: var(--ac-ink-950);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px -2px rgba(250, 207, 73, 0.35);
}

.ac-btn--primary:active { background: var(--ac-gold-600); border-color: var(--ac-gold-600); }

/* Secondary on dark surfaces */
.ac-btn--ghost {
  background: transparent;
  border-color: var(--ac-border-dark-strong);
  color: var(--ac-on-dark);
}

.ac-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Secondary on light surfaces */
.ac-btn--outline {
  background: var(--ac-surface);
  border-color: var(--ac-border-strong);
  color: var(--ac-text);
  box-shadow: var(--ac-shadow-xs);
}

.ac-btn--outline:hover {
  background: var(--ac-surface-muted);
  border-color: var(--ac-text-subtle);
  color: var(--ac-text);
}

.ac-btn--sm { height: 38px; padding: 0 var(--ac-space-4); font-size: var(--ac-text-sm); border-radius: var(--ac-radius-sm); }
.ac-btn--lg { height: 52px; padding: 0 var(--ac-space-6); font-size: var(--ac-text-base); }
.ac-btn--block { display: flex; width: 100%; }

/* ---------- Badge ---------- */
.ac-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--ac-radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
}

.ac-badge--gold {
  background: var(--ac-gold-400);
  color: var(--ac-ink-950);
}

/* ---------- Language menu ---------- */
.ac-lang {
  position: relative;
  display: inline-flex;
}

.ac-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ac-border-dark-strong) !important;
  border-radius: var(--ac-radius-pill) !important;
  background: transparent;
  color: var(--ac-on-dark);
  font-family: inherit;
  font-size: var(--ac-text-sm);
  font-weight: 600;
  transition: background-color var(--ac-duration) var(--ac-ease), border-color var(--ac-duration) var(--ac-ease);
}

.ac-lang__toggle:hover,
.ac-lang.is-open .ac-lang__toggle {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.ac-lang__toggle .ac-icon:first-child { color: var(--ac-on-dark-muted); }
.ac-lang__current { letter-spacing: 0.04em; }
.ac-lang.is-open .ac-nav__chevron { transform: rotate(180deg); }

.ac-lang__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 10;
  width: 208px;
  padding: var(--ac-space-2);
  border: 1px solid var(--ac-border-dark);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-ink-900);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--ac-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 180ms var(--ac-ease), transform 180ms var(--ac-ease), visibility 0s linear 180ms;
}

.ac-lang.is-open .ac-lang__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 180ms var(--ac-ease), transform 180ms var(--ac-ease), visibility 0s;
}

.ac-lang__heading {
  margin: var(--ac-space-2) var(--ac-space-3) var(--ac-space-2);
  font-size: var(--ac-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-on-dark-subtle);
}

.ac-lang__item {
  display: flex;
  align-items: center;
  gap: var(--ac-space-3);
  padding: 9px var(--ac-space-3);
  border-radius: var(--ac-radius-md);
  color: var(--ac-on-dark);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color var(--ac-duration) var(--ac-ease);
}

.ac-lang__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
}

.ac-lang__item.is-active { color: var(--ac-gold-400); }
.ac-lang__name { flex: 1 1 auto; }
.ac-lang__check { color: var(--ac-gold-400); }

.ac-lang__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border-radius: var(--ac-radius-sm);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ac-on-dark-muted);
}

.ac-lang__item.is-active .ac-lang__badge,
.ac-lang-seg__item.is-active .ac-lang__badge {
  background: rgba(250, 207, 73, 0.16);
  box-shadow: inset 0 0 0 1px rgba(250, 207, 73, 0.35);
  color: var(--ac-gold-400);
}

/* Segmented variant used in the mobile drawer */
.ac-lang-seg {
  display: grid;
  gap: 6px;
}

.ac-lang-seg__item {
  display: flex;
  align-items: center;
  gap: var(--ac-space-3);
  min-height: 44px;
  padding: 0 var(--ac-space-3);
  border: 1px solid var(--ac-border-dark);
  border-radius: var(--ac-radius-md);
  color: var(--ac-on-dark);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.ac-lang-seg__item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; text-decoration: none; }

.ac-lang-seg__item.is-active {
  border-color: rgba(250, 207, 73, 0.4);
  background: rgba(250, 207, 73, 0.1);
  color: var(--ac-gold-400);
}

.ac-drawer__label {
  margin: 0;
  font-size: var(--ac-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-on-dark-subtle);
}

/* ---------- Header ----------
   At the top of the page it is a full-width bar flush with the screen edges.
   Once scrolled it condenses into a floating pill inset from the edges. The
   <header> itself keeps a constant height so the terl3 embed keeps offsetting
   its postMessage scroll correctly. */
.ac-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--ac-header-h);
  background: var(--ac-ink-950);
  border-bottom: 1px solid var(--ac-border-dark);
  pointer-events: none; /* re-enabled on the island, so the page edges stay clickable */
  transition: background-color 380ms var(--ac-ease), border-color 380ms var(--ac-ease);
}

/* Scrolled: the bar background falls away and the pill carries the chrome */
.ac-header.is-scrolled {
  background: transparent;
  border-bottom-color: transparent;
}

.ac-header__bar {
  display: flex;
  align-items: center;
  height: 100%;
}

.ac-island {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-6);
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: none;
  pointer-events: auto;
  transition:
    height 420ms var(--ac-ease),
    padding 420ms var(--ac-ease),
    border-radius 420ms var(--ac-ease),
    border-color 380ms var(--ac-ease),
    background-color 380ms var(--ac-ease),
    box-shadow 380ms var(--ac-ease);
}

.ac-header.is-scrolled .ac-island {
  height: 58px;
  padding: 0 var(--ac-space-3) 0 var(--ac-space-5);
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--ac-radius-pill);
  background: rgba(14, 15, 19, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px -18px rgba(0, 0, 0, 0.9);
}

/* Gold rim light, only once the pill is floating */
.ac-island::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(250, 207, 73, 0.5), transparent);
  opacity: 0;
  transition: opacity 380ms var(--ac-ease);
  pointer-events: none;
}

.ac-header.is-scrolled .ac-island::before { opacity: 1; }

@media (min-width: 1280px) {
  .ac-header.is-scrolled .ac-island { height: 64px; padding-right: var(--ac-space-4); }
}

.ac-brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--ac-space-3);
  text-decoration: none;
}

.ac-brand:hover { text-decoration: none; }

/* Wordmark sits at roughly 40% of the bar height, the usual proportion for a
   wide logo, and stays visually subordinate to the Login button beside it. */
.ac-brand img {
  display: block;
  width: auto;
  height: 25px;
}

@media (min-width: 1280px) {
  .ac-brand img { height: 27px; }
}

.ac-brand__label {
  padding-left: var(--ac-space-3);
  border-left: 1px solid var(--ac-border-dark-strong);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-on-dark-muted);
}

.ac-nav {
  display: none;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.ac-nav__list {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Spotlight that glides between nav items; JS sets its position and width */
.ac-nav__spot {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 0;
  height: 38px;
  margin-top: -19px;
  border-radius: var(--ac-radius-pill);
  background: rgba(250, 207, 73, 0.14);
  box-shadow: inset 0 0 0 1px rgba(250, 207, 73, 0.24);
  opacity: 0;
  transform: translateX(var(--ac-spot-x, 0));
  transition: transform 380ms cubic-bezier(0.34, 1.2, 0.36, 1), width 380ms cubic-bezier(0.34, 1.2, 0.36, 1),
    opacity 220ms var(--ac-ease);
  pointer-events: none;
}

.ac-nav__spot.is-on { opacity: 1; }

.ac-nav__item { z-index: 1; }

.ac-nav__item { position: relative; }

.ac-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--ac-radius-pill);
  font-family: inherit;
  font-size: var(--ac-text-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--ac-on-dark-muted);
  text-decoration: none;
  transition: color var(--ac-duration) var(--ac-ease), background-color var(--ac-duration) var(--ac-ease);
}

.ac-nav__link:hover,
.ac-nav__item--menu.is-open > .ac-nav__link {
  color: #fff;
  text-decoration: none;
}

.ac-nav__dot {
  width: 6px;
  height: 6px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--ac-gold-400);
  box-shadow: 0 0 0 3px rgba(250, 207, 73, 0.18);
}

.ac-nav__link.is-active { color: var(--ac-gold-400); }

.ac-nav__chevron {
  font-size: 10px;
  transition: transform var(--ac-duration) var(--ac-ease);
}

.ac-nav__item--menu.is-open .ac-nav__chevron { transform: rotate(180deg); }

/* News dropdown */
.ac-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  display: none;
  width: 380px;
  padding-top: 14px; /* hover bridge between trigger and panel */
  transform: translateX(-50%);
}

.ac-nav__item--menu.is-open > .ac-dropdown { display: block; }

.ac-dropdown__panel {
  padding: var(--ac-space-2);
  border: 1px solid var(--ac-border-dark);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-ink-900);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--ac-shadow-lg);
}

.ac-dropdown__item {
  display: flex;
  gap: var(--ac-space-3);
  padding: var(--ac-space-3);
  border-radius: var(--ac-radius-md);
  text-decoration: none;
  transition: background-color var(--ac-duration) var(--ac-ease);
}

.ac-dropdown__item:hover {
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

.ac-dropdown__item strong {
  display: block;
  margin-bottom: 2px;
  font-size: var(--ac-text-sm);
  font-weight: 600;
  color: var(--ac-on-dark);
}

.ac-dropdown__item span:last-child {
  display: block;
  font-size: 0.8125rem;
  line-height: var(--ac-leading-snug);
  color: var(--ac-on-dark-muted);
}

.ac-dropdown__item.is-active strong { color: var(--ac-gold-400); }

.ac-icon-tile {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ac-radius-md);
  background: rgba(250, 207, 73, 0.1);
  box-shadow: inset 0 0 0 1px rgba(250, 207, 73, 0.18);
  color: var(--ac-gold-400);
  font-size: 15px;
  line-height: 1;
}

/* Light-surface variant (page header, cards) */
.ac-page-head .ac-icon-tile,
.ac-card .ac-icon-tile {
  background: linear-gradient(180deg, #fffdf5, var(--ac-gold-50));
  box-shadow: inset 0 0 0 1px var(--ac-gold-100), var(--ac-shadow-xs);
  color: var(--ac-gold-700);
}

.ac-header__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--ac-space-2);
}

/* Hairline separating navigation from the account controls */
@media (min-width: 1280px) {
  .ac-header__actions::before {
    content: "";
    width: 1px;
    height: 24px;
    margin-right: var(--ac-space-3);
    background: rgba(255, 255, 255, 0.12);
  }
}

.ac-header__actions .ac-lang,
.ac-header__actions .ac-btn { display: none; }

.ac-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ac-border-dark-strong) !important;
  border-radius: var(--ac-radius-md) !important;
  background: transparent;
  color: var(--ac-on-dark);
  font-size: 18px;
}

.ac-header__toggle:hover { background: rgba(255, 255, 255, 0.06); }

@media (min-width: 576px) {
  .ac-header__actions .ac-lang,
  .ac-header__actions .ac-btn { display: inline-flex; }
}

@media (min-width: 1280px) {
  .ac-nav { display: flex; }
  .ac-header__toggle { display: none; }
}

/* The wordmark already reads "CentFX"; the label only appears in the drawer,
   where there is room for it */
.ac-island .ac-brand__label { display: none; }

/* Slightly tighter links at the narrowest desktop width, so the groups keep
   a comfortable gap either side of the navigation */
@media (min-width: 1280px) and (max-width: 1365.98px) {
  .ac-nav__link { padding: 0 10px; }
}

@media (max-width: 380px) {
  .ac-brand__label { display: none; }
}

/* ---------- Mobile drawer ---------- */
.ac-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
  background: rgba(0, 0, 0, 0);
  transition: background-color 220ms var(--ac-ease), visibility 0s linear 220ms;
}

.ac-drawer.is-open {
  visibility: visible;
  background: rgba(0, 0, 0, 0.6);
  transition: background-color 220ms var(--ac-ease), visibility 0s;
}

.ac-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(380px, 100%);
  background: var(--ac-ink-950);
  border-left: 1px solid var(--ac-border-dark);
  transform: translateX(100%);
  transition: transform 260ms var(--ac-ease);
}

.ac-drawer.is-open .ac-drawer__panel { transform: none; }

.ac-drawer__head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: var(--ac-header-h);
  padding: 0 var(--ac-gutter);
  border-bottom: 1px solid var(--ac-border-dark);
}

.ac-drawer__body {
  flex: 1 1 auto;
  padding: var(--ac-space-4) var(--ac-space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ac-drawer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ac-drawer__link {
  display: flex;
  align-items: center;
  gap: var(--ac-space-3);
  width: 100%;
  min-height: 48px;
  padding: 0 var(--ac-space-3);
  border-radius: var(--ac-radius-md);
  font-family: inherit;
  font-size: var(--ac-text-base);
  font-weight: 500;
  text-align: left;
  color: var(--ac-on-dark);
  text-decoration: none;
}

.ac-drawer__link:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-decoration: none;
}

.ac-drawer__link > .ac-icon {
  width: 20px;
  text-align: center;
  color: var(--ac-on-dark-subtle);
}

.ac-drawer__link.is-active {
  background: rgba(250, 207, 73, 0.1);
  color: var(--ac-gold-400);
}

.ac-drawer__link.is-active > .ac-icon { color: var(--ac-gold-400); }

.ac-drawer__link .ac-nav__chevron { margin-left: auto; }

.ac-drawer__link[aria-expanded="true"] .ac-nav__chevron { transform: rotate(180deg); }

.ac-drawer__sub {
  display: none;
  margin: 2px 0 var(--ac-space-2) 22px;
  padding: 0 0 0 var(--ac-space-3);
  border-left: 1px solid var(--ac-border-dark);
  list-style: none;
}

.ac-drawer__sub.is-open { display: block; }

.ac-drawer__sub .ac-drawer__link {
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--ac-on-dark-muted);
}

.ac-drawer__foot {
  display: grid;
  flex-shrink: 0;
  gap: var(--ac-space-3);
  /* Bottom space keeps the controls clear of the Tawk.to chat bubble (fixed, bottom-right, third-party) */
  padding: var(--ac-space-4) var(--ac-gutter) calc(88px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ac-border-dark);
}

.ac-drawer__foot label {
  margin: 0;
  font-size: var(--ac-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-on-dark-subtle);
}

@media (min-width: 1280px) {
  .ac-drawer { display: none; }
}

/* ---------- Announcement ribbon (marquee) ---------- */
.ac-ribbon {
  position: relative;
  height: var(--ac-ribbon-h);
  overflow: hidden;
  background: var(--ac-ink-800);
  border-bottom: 1px solid var(--ac-border-dark);
  color: var(--ac-on-dark-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.ac-ribbon__track {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-space-4);
  height: 100%;
  padding-left: 100%;
  animation: ac-marquee 45s linear infinite;
}

.ac-ribbon:hover .ac-ribbon__track { animation-play-state: paused; }

.ac-ribbon__label { font-weight: 600; color: var(--ac-gold-400); }
.ac-ribbon__track a { color: var(--ac-gold-400); text-decoration: underline; text-underline-offset: 2px; }
.ac-ribbon__track a:hover { color: #fff; }
.ac-ribbon__sep { color: var(--ac-on-dark-subtle); }

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

/* ---------- Page header (content pages) ---------- */
.ac-page-head {
  --ac-overlap: var(--ac-space-6);
  background:
    radial-gradient(50% 140% at 100% 0%, rgba(250, 207, 73, 0.09), transparent 70%),
    var(--ac-surface);
  border-bottom: 1px solid var(--ac-border);
  padding-block: var(--ac-space-6) calc(var(--ac-space-8) + var(--ac-overlap));
}

@media (min-width: 992px) {
  .ac-page-head {
    --ac-overlap: var(--ac-space-10);
    padding-block: var(--ac-space-8) calc(var(--ac-space-10) + var(--ac-overlap));
  }
}

/* The content section right after a page header lifts into it, so the card reads as part of the page */
.ac-page-head + .ac-section {
  position: relative;
  margin-top: calc(var(--ac-overlap, var(--ac-space-6)) * -1);
  padding-top: 0;
}

@media (min-width: 992px) {
  .ac-page-head + .ac-section { margin-top: calc(var(--ac-space-10) * -1); }
}

.ac-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ac-space-2);
  margin: 0 0 var(--ac-space-4);
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--ac-text-subtle);
}

.ac-breadcrumb li + li::before {
  content: "/";
  margin-right: var(--ac-space-2);
  color: var(--ac-border-strong);
}

.ac-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ac-text-muted);
  text-decoration: none;
}

.ac-breadcrumb a .ac-icon { opacity: 0.8; }

.ac-breadcrumb a:hover {
  color: var(--ac-text);
  text-decoration: underline;
}

.ac-breadcrumb [aria-current="page"] { color: var(--ac-text); font-weight: 500; }

.ac-page-head__row {
  display: flex;
  align-items: center;
  gap: var(--ac-space-5);
}

.ac-page-head .ac-icon-tile {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--ac-radius-lg);
  font-size: 20px;
}

.ac-page-head__title {
  margin: 0;
  font-size: var(--ac-text-3xl);
  font-weight: 700;
  line-height: var(--ac-leading-tight);
  letter-spacing: -0.02em;
  color: var(--ac-text);
}

.ac-page-head__lead {
  max-width: 62ch;
  margin: 6px 0 0;
  font-size: var(--ac-text-base);
  color: var(--ac-text-muted);
}

@media (max-width: 575.98px) {
  .ac-page-head .ac-icon-tile { display: none; }
}

/* ---------- Embed shell (wraps third-party iframes; never styles their internals) ---------- */
.ac-embed {
  position: relative;
  min-height: 500px;
  background: var(--ac-surface);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -12px rgba(16, 24, 40, 0.14);
}

/* Purely visual: rounds the iframe corners to match the card and removes the inline-element gap.
   Width/height are left entirely to the embed script and iframeResizer. */
.ac-embed iframe {
  display: block;
  border-radius: calc(var(--ac-radius-lg) - 1px);
}

/* Loading state (skeleton + shimmer) lives in the decorative layer below and is
   shown only until the embed script has inserted its iframe. */

.ac-embed__notice {
  margin: 0;
  padding: var(--ac-space-12) var(--ac-space-6);
  text-align: center;
  color: var(--ac-text-muted);
}

/* ---------- Cards ---------- */
.ac-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ac-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 992px) {
  /* 3 columns keeps the 9 sections in a balanced 3×3 grid */
  .ac-card-grid { grid-template-columns: repeat(3, 1fr); gap: var(--ac-space-5); }
}

/* Editorial card: thick ink rule, hard offset shadow, paper texture and a
   springy lift on hover. */
.ac-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--ac-space-6);
  background:
    radial-gradient(rgba(17, 24, 39, 0.055) 1px, transparent 1px) 0 0 / 14px 14px,
    var(--ac-surface);
  border: 2px solid var(--ac-ink-950);
  border-radius: var(--ac-radius-lg);
  box-shadow: 6px 6px 0 var(--ac-ink-950);
  color: var(--ac-text);
  text-decoration: none;
  transition: box-shadow 260ms cubic-bezier(0.34, 1.4, 0.5, 1),
    transform 260ms cubic-bezier(0.34, 1.4, 0.5, 1),
    border-color var(--ac-duration) var(--ac-ease);
}

.ac-bento__cell:hover .ac-card {
  color: var(--ac-text);
  text-decoration: none;
  transform: translate(-5px, -5px) rotate(-0.7deg);
  box-shadow: 13px 13px 0 var(--ac-gold-400);
}

/* Pressed: the card sinks onto its shadow */
.ac-bento__cell:active .ac-card {
  transform: translate(3px, 3px) rotate(0deg);
  box-shadow: 2px 2px 0 var(--ac-ink-950);
  transition-duration: 90ms;
}

a.ac-card:focus-visible {
  box-shadow: 13px 13px 0 var(--ac-gold-400);
}

/* Stamped index chip, taped to the corner */
.ac-card__index {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 26px;
  padding: 0 8px;
  border: 2px solid var(--ac-ink-950);
  border-radius: 999px 999px 999px 4px;
  background: var(--ac-gold-400);
  box-shadow: 3px 3px 0 var(--ac-ink-950);
  color: var(--ac-ink-950);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  transform: rotate(3deg);
  transition: transform 260ms cubic-bezier(0.34, 1.4, 0.5, 1);
}

.ac-bento__cell:hover .ac-card .ac-card__index { transform: rotate(-4deg) scale(1.06); }

/* The tile is only the 3D stage; the two faces carry the visual style */
.ac-card .ac-icon-tile {
  width: 46px;
  height: 46px;
  margin-bottom: var(--ac-space-5);
  font-size: 18px;
  background: none;
  border: 0;
  box-shadow: none;
  perspective: 620px;
  overflow: visible;
}

.ac-flip__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(0.3, 1.25, 0.4, 1);
}

.ac-flip__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ac-ink-950);
  border-radius: var(--ac-radius-md);
  box-shadow: 3px 3px 0 var(--ac-ink-950);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ac-flip__face--front {
  background: linear-gradient(180deg, #fffdf5, var(--ac-gold-50));
  color: var(--ac-gold-700);
}

.ac-flip__face--back {
  background: var(--ac-gold-400);
  color: var(--ac-ink-950);
  transform: rotateY(180deg);
}

/* Flip on hover, and keep the hard shadow reading as it turns */
.ac-bento__cell:hover .ac-flip__inner { transform: rotateY(180deg); }
.ac-bento__cell:hover .ac-flip__face { box-shadow: 4px 4px 0 var(--ac-ink-950); }

/* Feature tile flips to gold-on-dark instead */
.ac-card--feature .ac-flip__face {
  border-color: var(--ac-gold-400);
  box-shadow: 3px 3px 0 var(--ac-gold-600);
}

.ac-card--feature .ac-flip__face--front {
  background: rgba(250, 207, 73, 0.12);
  color: var(--ac-gold-400);
}

.ac-bento__cell:hover .ac-card--feature .ac-flip__face { box-shadow: 4px 4px 0 var(--ac-gold-600); }

.ac-card__title {
  display: flex;
  align-items: center;
  gap: var(--ac-space-2);
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: var(--ac-leading-snug);
  letter-spacing: -0.01em;
  color: var(--ac-text);
}

.ac-card__text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ac-text-muted);
}

/* Category kicker above the title */
.ac-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-gold-700);
}

.ac-card__kicker::before {
  content: "";
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* Footer row: descriptor on the left, action on the right */
.ac-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-3);
  margin-top: var(--ac-space-5);
  padding-top: var(--ac-space-4);
  border-top: 2px dashed rgba(17, 24, 39, 0.16);
}

.ac-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1.5px solid rgba(17, 24, 39, 0.24);
  border-radius: var(--ac-radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ac-text-muted);
  white-space: nowrap;
}

/* CTA reads as a small stamped button */
.ac-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-space-2);
  padding: 7px 14px;
  border: 2px solid var(--ac-ink-950);
  border-radius: var(--ac-radius-pill);
  background: var(--ac-surface);
  box-shadow: 3px 3px 0 var(--ac-ink-950);
  font-size: var(--ac-text-sm);
  font-weight: 700;
  color: var(--ac-ink-950);
  transition: background-color var(--ac-duration) var(--ac-ease),
    box-shadow 220ms var(--ac-ease), transform 220ms var(--ac-ease);
}

.ac-bento__cell:hover .ac-card .ac-card__cta {
  background: var(--ac-gold-400);
  box-shadow: 4px 4px 0 var(--ac-ink-950);
  transform: translate(-1px, -1px);
}

.ac-card__cta .ac-icon { transition: transform var(--ac-duration) var(--ac-ease); }
.ac-bento__cell:hover .ac-card .ac-card__cta .ac-icon { transform: translateX(3px); }

/* ---------- Home: hero ---------- */
.ac-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(250, 207, 73, 0.12), transparent 70%),
    var(--ac-ink-950);
  color: var(--ac-on-dark);
  padding-block: var(--ac-space-12);
}

@media (min-width: 992px) {
  .ac-hero { padding-block: var(--ac-space-20); }
}

.ac-hero__grid {
  display: grid;
  align-items: center;
  gap: var(--ac-space-10);
}

@media (min-width: 992px) {
  .ac-hero__grid { grid-template-columns: 5fr 6fr; gap: var(--ac-space-12); }
}

.ac-hero .ac-eyebrow { color: var(--ac-gold-400); }

.ac-hero__title {
  margin: 0 0 var(--ac-space-5);
  font-size: var(--ac-text-4xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}

.ac-hero__title span { color: var(--ac-gold-400); }

.ac-hero__lead {
  max-width: 52ch;
  margin: 0 0 var(--ac-space-8);
  font-size: var(--ac-text-lg);
  color: var(--ac-on-dark-muted);
}

.ac-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-3);
}

.ac-hero__media {
  margin: 0;
  padding: 6px;
  border: 1px solid var(--ac-border-dark-strong);
  border-radius: calc(var(--ac-radius-lg) + 6px);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: var(--ac-shadow-lg);
}

.ac-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ac-radius-lg);
}

@media (max-width: 575.98px) {
  .ac-hero__actions .ac-btn { flex: 1 1 100%; }
}

/* ---------- Home: awards carousel (Owl) ---------- */
.ac-awards {
  border-top: 1px solid var(--ac-border);
}

.ac-award {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius-lg);
  background: var(--ac-ink-950);
  box-shadow: var(--ac-shadow-sm);
  transition: border-color var(--ac-duration) var(--ac-ease), box-shadow var(--ac-duration) var(--ac-ease);
}

.ac-award:hover {
  border-color: var(--ac-gold-200);
  box-shadow: 0 12px 28px -12px rgba(16, 24, 40, 0.25);
}

.ac-award img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ac-awards .owl-theme .owl-dots { margin-top: var(--ac-space-6) !important; }

.ac-awards .owl-theme .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  margin: 4px;
  background: var(--ac-border-strong);
  transition: width var(--ac-duration) var(--ac-ease), background-color var(--ac-duration) var(--ac-ease);
}

.ac-awards .owl-theme .owl-dots .owl-dot.active span,
.ac-awards .owl-theme .owl-dots .owl-dot:hover span {
  width: 22px;
  background: var(--ac-gold-500);
}

/* ---------- Footer CTA ---------- */
/* Clip sideways only, so objects standing on the panel's top edge can rise
   and float without their heads being cut off by the band's top edge. */
.ac-cta-band {
  --ac-band-pb: var(--ac-space-12);
  position: relative;
  z-index: 1;
  padding-block: var(--ac-space-10) var(--ac-band-pb);
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
}

/* ---------- Grabber robot ----------
   Lives in a stage anchored to the footer's top edge, which clips it, so the
   robot rises out of the footer as the pointer approaches:
   waiting  – only the top of the head shows, with an occasional peek
   stalking – head up, leaning toward the pointer
   excited  – torso up too, bobbing, head swaying
   Proximity is measured in script, so nothing here takes pointer events. */
#grabber-root { display: contents; }

.grab-stage {
  position: absolute;
  right: 16px;
  bottom: 0;
  z-index: 2;
  width: 240px; /* robot is 200px; the extra room on the left is for the waving hand */
  height: 250px;
  overflow: hidden;
  pointer-events: none;
}

.grabber {
  --look: 0;
  position: absolute;
  left: 40px;
  bottom: 0;
  width: 200px;
  height: 200px;
  transform: translateY(165px);
  transition: transform 0.45s cubic-bezier(0.55, 0, 0.75, 0.3);
}

.grabber--stalking { transform: translateY(92px); }
.grabber--excited { transform: translateY(8px); }

/* Rising overshoots slightly, like it popped up; sinking eases in */
.grabber--stalking,
.grabber--excited { transition: transform 0.6s cubic-bezier(0.34, 1.5, 0.64, 1); }

.grabber__rig {
  position: absolute;
  inset: 0;
  animation: grabber-lurk 5s ease-in-out infinite;
}

.grabber--stalking .grabber__rig { animation: none; }
.grabber--excited .grabber__rig { animation: grabber-bob 1.3s ease-in-out infinite; }

/* Body images carry transparent margins, so offsets are set so the visible
   torso ends at the container's bottom edge and the neck ring is centred. */
.grabber__body {
  position: absolute;
  top: 68px;
  left: 0;
  width: 200px;
  height: auto;
  transform: rotate(calc(var(--look) * 2deg));
  transform-origin: 50% 100%;
  transition: transform 0.4s var(--ac-ease);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

/* Hand — the robot's right hand, so it sits on the viewer's left. It is
   behind the body so its wrist joint emerges from the left shoulder pad.
   Tucked away while waiting; once the pointer is near it pops up
   and waves hi, pivoting on the wrist joint. */
.grabber__hand {
  position: absolute;
  top: 14px;
  left: -42px;
  width: 114px;
  transform-origin: 58px 96px;
  transform: translate(16px, 60px) rotate(40deg) scale(0.5);
  opacity: 0;
  transition: transform 0.3s ease-in, opacity 0.2s ease-in;
}

.grabber--stalking .grabber__hand,
.grabber--excited .grabber__hand {
  transform: rotate(-20deg);
  opacity: 1;
  transition: transform 0.55s cubic-bezier(0.34, 1.6, 0.64, 1) 0.15s, opacity 0.2s ease-out 0.15s;
}

.grabber__hand-img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 58px 96px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
}

/* A friendly wave with a pause, faster and continuous once excited */
.grabber--stalking .grabber__hand-img { animation: grabber-wave 1.8s ease-in-out 0.5s infinite; }
.grabber--excited .grabber__hand-img { animation: grabber-wave-fast 0.7s ease-in-out infinite; }

@keyframes grabber-wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(12deg); }
  24% { transform: rotate(-6deg); }
  36% { transform: rotate(12deg); }
  48% { transform: rotate(-4deg); }
}

@keyframes grabber-wave-fast {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(12deg); }
}

/* Head floats just above the neck ring and turns toward the pointer */
.grabber__head {
  position: absolute;
  top: -14px;
  left: 25px;
  width: 150px;
  transform: translateX(calc(var(--look) * 7px)) rotate(calc(var(--look) * 9deg));
  transform-origin: 50% 85%;
  transition: transform 0.35s var(--ac-ease);
}

.grabber__face {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
  transform-origin: 50% 85%;
}

.grabber--excited .grabber__face { animation: grabber-sway 1.3s ease-in-out infinite; }

@keyframes grabber-lurk {
  0%, 70%, 100% { transform: translateY(0); }
  78% { transform: translateY(-14px); }
  84% { transform: translateY(-10px); }
  90% { transform: translateY(0); }
}

@keyframes grabber-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes grabber-sway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(-4deg); }
  75% { transform: translateY(-4px) rotate(4deg); }
}

/* Only shown on devices that support hover (no-op on touch) */
@media not all and (hover: hover) and (pointer: fine) {
  #grabber-root { display: none; }
}

@media (max-width: 991.98px) {
  #grabber-root { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .grabber,
  .grabber__rig,
  .grabber__body,
  .grabber__head,
  .grabber__face,
  .grabber__hand,
  .grabber__hand-img { animation: none !important; transition: none !important; }
}

@media (min-width: 992px) {
  .ac-cta-band { --ac-band-pb: var(--ac-space-16); padding-top: var(--ac-space-16); }
}

.ac-cta {
  position: relative;
  display: grid;
  align-items: center;
  gap: var(--ac-space-6);
  overflow: hidden;
  padding: var(--ac-space-8) var(--ac-space-6);
  border-radius: calc(var(--ac-radius-lg) + 6px);
  background:
    radial-gradient(70% 120% at 100% 50%, rgba(250, 207, 73, 0.14), transparent 70%),
    var(--ac-ink-900);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 48px -24px rgba(0, 0, 0, 0.45);
  color: var(--ac-on-dark);
}

@media (min-width: 768px) {
  .ac-cta { grid-template-columns: 1fr auto; padding: var(--ac-space-10) var(--ac-space-12); }
}

.ac-cta h2 {
  margin: 0 0 var(--ac-space-3);
  font-size: var(--ac-text-3xl);
  font-weight: 700;
  line-height: var(--ac-leading-tight);
  letter-spacing: -0.02em;
  color: #fff;
}

.ac-cta p {
  max-width: 54ch;
  margin: 0 0 var(--ac-space-6);
  color: var(--ac-on-dark-muted);
}

.ac-cta__img {
  display: none;
  width: 280px;
  height: auto;
}

@media (min-width: 768px) {
  .ac-cta__img { display: block; }
}

@media (min-width: 1200px) {
  .ac-cta__img { width: 340px; margin-block: calc(var(--ac-space-6) * -1); }
}

@media (max-width: 575.98px) {
  .ac-cta .ac-btn { width: 100%; }
}

/* ---------- Footer ---------- */
.ac-footer {
  background: var(--ac-ink-950);
  color: var(--ac-on-dark-muted);
  font-size: var(--ac-text-sm);
}

.ac-footer a {
  color: var(--ac-on-dark-muted);
  text-decoration: none;
  transition: color var(--ac-duration) var(--ac-ease);
}

.ac-footer a:hover { color: #fff; text-decoration: none; }

.ac-footer__top {
  display: grid;
  gap: var(--ac-space-8);
  padding-block: var(--ac-space-12) var(--ac-space-8);
}

@media (min-width: 992px) {
  .ac-footer__top {
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--ac-space-12);
    padding-block: var(--ac-space-16) var(--ac-space-12);
  }
}

.ac-footer__brand img {
  display: block;
  width: auto;
  height: 36px;
  margin-bottom: var(--ac-space-4);
}

.ac-footer__brand p {
  max-width: 46ch;
  margin: 0 0 var(--ac-space-5);
  line-height: var(--ac-leading-normal);
}

.ac-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ac-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ac-border-dark-strong);
  border-radius: var(--ac-radius-md);
  font-size: 16px;
  color: var(--ac-on-dark);
}

.ac-social a:hover {
  border-color: var(--ac-gold-400);
  background: rgba(250, 207, 73, 0.1);
  color: var(--ac-gold-400);
}

.ac-footer__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 var(--ac-space-4);
  padding: 0;
  font-size: var(--ac-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ac-on-dark);
}

.ac-footer__heading .ac-icon { display: none; }

.ac-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ac-footer__links li + li { margin-top: var(--ac-space-3); }

/* Below lg the link columns become an accordion, driven by the existing xtbAccordion plugin */
@media (max-width: 991.98px) {
  .ac-footer__col { border-top: 1px solid var(--ac-border-dark); }
  .ac-footer__top { gap: 0; }
  .ac-footer__brand { padding-bottom: var(--ac-space-8); }

  .ac-footer__heading {
    min-height: 52px;
    margin: 0;
    cursor: pointer;
  }

  .ac-footer__heading .ac-icon {
    display: inline-block;
    font-size: 11px;
    color: var(--ac-on-dark-subtle);
    transition: transform var(--ac-duration) var(--ac-ease);
  }

  .ac-footer__heading.active .ac-icon { transform: rotate(180deg); }

  .ac-footer__links { display: none; padding-bottom: var(--ac-space-5); }
  .ac-footer__links a { display: inline-block; padding-block: 2px; }
}

@media (min-width: 992px) {
  /* Always visible on desktop, even if the accordion left an inline display:none behind */
  .ac-footer__links { display: block !important; height: auto !important; }
}

.ac-footer__legal {
  padding-block: var(--ac-space-8);
  border-top: 1px solid var(--ac-border-dark);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ac-on-dark-subtle);
}

.ac-footer__legal p { max-width: 110ch; margin: 0 0 var(--ac-space-4); }
.ac-footer__legal p:last-child { margin-bottom: 0; }
.ac-footer__legal strong { color: var(--ac-on-dark-muted); font-weight: 600; }

.ac-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-3);
  padding-block: var(--ac-space-6);
  border-top: 1px solid var(--ac-border-dark);
  font-size: 0.8125rem;
  color: var(--ac-on-dark-subtle);
}

.ac-footer__bottom strong { color: var(--ac-on-dark-muted); font-weight: 600; }

/* ---------- Floating social rail (wide screens only, where it cannot overlap content) ---------- */
.ac-social-rail {
  position: fixed;
  top: 50%;
  left: var(--ac-space-4);
  z-index: 900;
  display: none;
  transform: translateY(-50%);
}

.ac-social-rail .ac-social {
  flex-direction: column;
  padding: var(--ac-space-2);
  border: 1px solid var(--ac-border-dark);
  border-radius: var(--ac-radius-lg);
  background: rgba(17, 19, 23, 0.9);
  box-shadow: var(--ac-shadow-md);
}

.ac-social-rail .ac-social a {
  width: 36px;
  height: 36px;
  border-color: transparent;
  color: var(--ac-gold-400);
}

.ac-social-rail .ac-social a:hover { border-color: var(--ac-gold-400); }

@media (min-width: 1440px) {
  .ac-social-rail { display: block; }
}

/* ---------- Back to top (#myBtn keeps its original id/JS; id selector outranks legacy rules) ---------- */
#myBtn.ac-back-top {
  display: none; /* shown by scrollFunction() in footer.php */
  position: fixed;
  bottom: var(--ac-space-6);
  left: var(--ac-space-6);
  z-index: 950;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ac-border-dark-strong);
  border-radius: 50%;
  background: var(--ac-ink-900);
  box-shadow: var(--ac-shadow-md);
  color: var(--ac-gold-400);
  font-size: 16px;
  line-height: 42px;
  text-align: center;
  transition: background-color var(--ac-duration) var(--ac-ease), color var(--ac-duration) var(--ac-ease);
}

#myBtn.ac-back-top:hover {
  border: 1px solid var(--ac-gold-400);
  background: var(--ac-gold-400);
  color: var(--ac-ink-950);
}

@media (max-width: 575.98px) {
  #myBtn.ac-back-top { bottom: var(--ac-space-4); left: var(--ac-space-4); }
}

/* ==========================================================================
   Decorative layer & motion
   All decoration is non-interactive (pointer-events: none, aria-hidden in the
   markup) and sits behind content. Nothing here wraps or overlays an embed
   iframe: no transforms, filters or masks are applied to .ac-embed ancestors.
   ========================================================================== */

/* ---------- Scroll reveal ----------
   Only active when JS has added .ac-js to <html> (and never with reduced
   motion), so content is always visible if scripting is unavailable. */
.ac-js [data-ac-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms var(--ac-ease), transform 520ms var(--ac-ease);
  will-change: opacity, transform;
}

.ac-js [data-ac-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Gentle stagger for grids and groups */
.ac-js [data-ac-reveal-group] > * { transition-delay: 0ms; }
.ac-js [data-ac-reveal-group] > :nth-child(2) [data-ac-reveal],
.ac-js [data-ac-reveal-group] > :nth-child(2) { transition-delay: 60ms; }
.ac-js [data-ac-reveal-group] > :nth-child(3) { transition-delay: 120ms; }
.ac-js [data-ac-reveal-group] > :nth-child(4) { transition-delay: 40ms; }
.ac-js [data-ac-reveal-group] > :nth-child(5) { transition-delay: 100ms; }
.ac-js [data-ac-reveal-group] > :nth-child(6) { transition-delay: 160ms; }
.ac-js [data-ac-reveal-group] > :nth-child(7) { transition-delay: 80ms; }
.ac-js [data-ac-reveal-group] > :nth-child(8) { transition-delay: 140ms; }
.ac-js [data-ac-reveal-group] > :nth-child(9) { transition-delay: 200ms; }

/* ---------- Shared decoration primitives ---------- */
.ac-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ac-deco > * { position: absolute; }

/* Soft blurred light source */
.ac-deco__glow {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 207, 73, 0.22), transparent 70%);
  filter: blur(6px);
}

/* Fine grid, fading out as it descends */
.ac-deco__grid {
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
}

/* Dotted grid for light surfaces */
.ac-deco__dots {
  inset: 0;
  background-image: radial-gradient(rgba(154, 111, 0, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 100% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(70% 100% at 100% 0%, #000, transparent 70%);
}

.ac-deco svg { display: block; overflow: visible; }

/* Slow drift for abstract shapes */
@keyframes ac-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -14px, 0) rotate(3deg); }
}

@keyframes ac-pulse-soft {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.06); }
}

/* Chart line draws itself once, then the marker keeps a slow pulse */
@keyframes ac-draw {
  to { stroke-dashoffset: 0; }
}

/* Parallax field of market symbols; drawn to canvas, purely decorative */
.ac-glyphs {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Hero decoration ---------- */
.ac-hero__deco .ac-deco__glow--a {
  top: -140px;
  right: -60px;
  width: 460px;
  height: 460px;
}

.ac-hero__deco .ac-deco__glow--b {
  bottom: -200px;
  left: -120px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(250, 207, 73, 0.1), transparent 70%);
}

.ac-hero__shape {
  opacity: 0.5;
  animation: ac-float 14s ease-in-out infinite;
}

.ac-hero__shape--hex {
  top: 18%;
  left: 4%;
  width: 96px;
  animation-duration: 18s;
}

.ac-hero__shape--ring {
  bottom: 14%;
  left: 46%;
  width: 60px;
  animation-delay: -6s;
  animation-duration: 16s;
}

.ac-hero__chart {
  right: 2%;
  bottom: 8%;
  width: 240px;
  opacity: 0.6;
}

.ac-hero__chart path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: ac-draw 2.4s var(--ac-ease) 0.4s forwards;
}

.ac-hero__chart circle { animation: ac-pulse-soft 3.2s ease-in-out 2.6s infinite; }

.ac-hero > .ac-container { position: relative; z-index: 1; }

@media (max-width: 991.98px) {
  /* `.ac-deco` prefix keeps these above the `.ac-deco svg` base rule */
  .ac-deco .ac-hero__chart,
  .ac-deco .ac-hero__shape--ring { display: none; }
  .ac-deco .ac-hero__shape--hex { top: auto; bottom: 6%; left: -20px; width: 72px; opacity: 0.35; }
}

/* Hero media gets a soft gold halo and lifts slightly on hover */
.ac-hero__media {
  position: relative;
  transition: transform 400ms var(--ac-ease), box-shadow 400ms var(--ac-ease);
}

.ac-hero__media::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 40%, rgba(250, 207, 73, 0.18), transparent 70%);
  pointer-events: none;
}

.ac-hero__media:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.7);
}

/* ---------- Page header decoration ---------- */
.ac-page-head {
  position: relative;
  overflow: hidden;
}

.ac-page-head > .ac-container { position: relative; z-index: 1; }

.ac-page-head .ac-deco__dots { opacity: 0.6; }

.ac-page-head__arc {
  top: -120px;
  right: -80px;
  width: 320px;
  opacity: 0.5;
}

.ac-page-head__arc circle { transform-origin: center; }

/* The section icon breathes once on load, then settles */
.ac-page-head .ac-icon-tile .ac-icon {
  animation: ac-tile-in 600ms var(--ac-ease) both;
}

@keyframes ac-tile-in {
  from { opacity: 0; transform: translateY(6px) scale(0.85); }
  to { opacity: 1; transform: none; }
}

/* ---------- Section transitions ---------- */
/* Soft light wash at the top of light sections that follow a dark one */
.ac-section--wash {
  position: relative;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(250, 207, 73, 0.07), transparent 60%),
    linear-gradient(180deg, #fff 0%, transparent 42%);
}

.ac-section--wash > .ac-container { position: relative; z-index: 1; }

/* ---------- Card micro-interactions ---------- */
.ac-card { overflow: hidden; }

/* Light sweep that follows the card on hover */
.ac-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 0%, rgba(250, 207, 73, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 260ms var(--ac-ease);
  pointer-events: none;
}

.ac-bento__cell:hover .ac-card::after { opacity: 1; }

/* Content sits above the card's decorative layers. Listed explicitly so that
   absolutely positioned children (media, index chip) keep their own layout. */
.ac-card > .ac-icon-tile,
.ac-card > .ac-card__kicker,
.ac-card > .ac-card__title,
.ac-card > .ac-card__text,
.ac-card > .ac-card__foot { position: relative; z-index: 1; }

.ac-card .ac-icon-tile {
  transition: transform 260ms var(--ac-ease);
}

.ac-bento__cell:hover .ac-card .ac-icon-tile { transform: translateY(-3px); }

/* Oversized ghost icon in the card corner: hidden at rest, strokes draw in one
   after another on hover. Sits behind the content and never intercepts clicks. */
.ac-card__media {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 0;
  line-height: 0;
  color: var(--ac-gold-600);
  opacity: 0;
  transform: rotate(-8deg) scale(0.96);
  transform-origin: top right;
  transition: opacity 320ms var(--ac-ease), transform 420ms var(--ac-ease);
  pointer-events: none;
}

.ac-bento__cell:hover .ac-card .ac-card__media {
  opacity: 0.16;
  transform: rotate(0deg) scale(1);
  animation: ac-media-settle 700ms cubic-bezier(0.25, 1.3, 0.4, 1);
}

@keyframes ac-media-settle {
  0% { transform: rotate(-8deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}

.ac-card__media .ac-icon > * {
  opacity: 0;
  transform-origin: 50% 50%;
}

.ac-bento__cell:hover .ac-card .ac-card__media .ac-icon > * {
  animation: ac-stroke-in 360ms var(--ac-ease) forwards;
}

.ac-bento__cell:hover .ac-card .ac-card__media .ac-icon > :nth-child(2) { animation-delay: 70ms; }
.ac-bento__cell:hover .ac-card .ac-card__media .ac-icon > :nth-child(3) { animation-delay: 140ms; }
.ac-bento__cell:hover .ac-card .ac-card__media .ac-icon > :nth-child(4) { animation-delay: 190ms; }
.ac-bento__cell:hover .ac-card .ac-card__media .ac-icon > :nth-child(5) { animation-delay: 230ms; }
.ac-bento__cell:hover .ac-card .ac-card__media .ac-icon > :nth-child(n + 6) { animation-delay: 270ms; }

@keyframes ac-stroke-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

/* Dropdown items reveal an arrow on hover */
.ac-dropdown__item { position: relative; padding-right: var(--ac-space-8); }

.ac-dropdown__arrow {
  position: absolute;
  top: 50%;
  right: var(--ac-space-3);
  margin-top: -8px;
  color: var(--ac-gold-400);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 220ms var(--ac-ease), transform 220ms var(--ac-ease);
}

.ac-dropdown__item:hover .ac-dropdown__arrow,
.ac-dropdown__item:focus-visible .ac-dropdown__arrow {
  opacity: 1;
  transform: none;
}

/* Room for future illustration images inside the tiles */
.ac-icon-tile img {
  display: block;
  width: 70%;
  height: 70%;
  object-fit: contain;
}

/* ---------- Button sheen ---------- */
.ac-btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ac-btn--primary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  z-index: -1;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  transition: left 650ms var(--ac-ease);
}

.ac-btn--primary:hover::before { left: 120%; }

/* ---------- Navigation micro-interactions ---------- */
.ac-nav__link {
  position: relative;
}


/* Dropdown entrance */
.ac-dropdown {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 180ms var(--ac-ease), transform 180ms var(--ac-ease), visibility 0s linear 180ms;
}

.ac-nav__item--menu.is-open > .ac-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  transition: opacity 180ms var(--ac-ease), transform 180ms var(--ac-ease), visibility 0s;
}

.ac-dropdown__item .ac-icon-tile {
  transition: transform 220ms var(--ac-ease);
}

.ac-dropdown__item:hover .ac-icon-tile { transform: scale(1.08); }

/* Drawer items slide in with a short stagger */
.ac-drawer.is-open .ac-drawer__list > li {
  animation: ac-drawer-in 380ms var(--ac-ease) both;
}

.ac-drawer.is-open .ac-drawer__list > li:nth-child(1) { animation-delay: 40ms; }
.ac-drawer.is-open .ac-drawer__list > li:nth-child(2) { animation-delay: 75ms; }
.ac-drawer.is-open .ac-drawer__list > li:nth-child(3) { animation-delay: 110ms; }
.ac-drawer.is-open .ac-drawer__list > li:nth-child(4) { animation-delay: 145ms; }
.ac-drawer.is-open .ac-drawer__list > li:nth-child(5) { animation-delay: 180ms; }
.ac-drawer.is-open .ac-drawer__list > li:nth-child(6) { animation-delay: 215ms; }
.ac-drawer.is-open .ac-drawer__list > li:nth-child(7) { animation-delay: 250ms; }
.ac-drawer.is-open .ac-drawer__list > li:nth-child(8) { animation-delay: 285ms; }

@keyframes ac-drawer-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

/* Header scrolled state is handled by the island rules above */

/* ---------- Embed loading presentation ----------
   A candlestick chart that builds column by column while the embedded app
   loads. It is a sibling of the embed script, never wraps the iframe, and
   disappears the moment the iframe is inserted. */
.ac-embed__loader {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Gone as soon as the embed has rendered (class is a fallback for browsers
   without :has support) */
.ac-embed:has(iframe) .ac-embed__loader,
.ac-embed.is-loaded .ac-embed__loader {
  display: none;
}

.ac-candles {
  display: flex;
  align-items: flex-end;
  height: 84px;
  gap: 5px;
}

.ac-candle {
  position: relative;
  width: 7px;
  height: 110%;
  animation: ac-candle-fade 2.6s infinite ease-in-out;
  filter: drop-shadow(0 0 3px rgba(250, 207, 73, 0.55));
}

/* Body of the candle */
.ac-candle::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  bottom: var(--b);
  height: var(--h);
  min-height: 2px;
  border-radius: 1px;
  background: var(--ac-gold-400);
  box-shadow: inset 0 0 0 1px var(--ac-gold-600);
}

/* Wick */
.ac-candle::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  bottom: var(--wb);
  height: var(--wh);
  background: var(--ac-gold-600);
  transform: translateX(-50%);
}

.ac-candle:nth-child(1)  { --b: 7.10%;  --h: 18.93%; --wb: 0%;      --wh: 31.95%; animation-delay: 0s; }
.ac-candle:nth-child(2)  { --b: 26.04%; --h: 2.37%;  --wb: 19.41%;  --wh: 14.91%; animation-delay: .065s; }
.ac-candle:nth-child(3)  { --b: 28.64%; --h: 4.50%;  --wb: 16.92%;  --wh: 21.66%; animation-delay: .13s; }
.ac-candle:nth-child(4)  { --b: 31.42%; --h: 3.43%;  --wb: 19.76%;  --wh: 27.93%; animation-delay: .195s; }
.ac-candle:nth-child(5)  { --b: 31.42%; --h: 15.44%; --wb: 27.43%;  --wh: 28.07%; animation-delay: .26s; }
.ac-candle:nth-child(6)  { --b: 46.54%; --h: 0.28%;  --wb: 43.43%;  --wh: 24.38%; animation-delay: .325s; }
.ac-candle:nth-child(7)  { --b: 35.86%; --h: 8.70%;  --wb: 29.70%;  --wh: 24.50%; animation-delay: .39s; }
.ac-candle:nth-child(8)  { --b: 11.67%; --h: 24.19%; --wb: 5.33%;   --wh: 31.83%; animation-delay: .455s; }
.ac-candle:nth-child(9)  { --b: 11.83%; --h: 15.10%; --wb: 7.93%;   --wh: 24.97%; animation-delay: .52s; }
.ac-candle:nth-child(10) { --b: 27.81%; --h: 12.04%; --wb: 27.69%;  --wh: 28.17%; animation-delay: .585s; }
.ac-candle:nth-child(11) { --b: 39.85%; --h: 28.25%; --wb: 39.53%;  --wh: 28.58%; animation-delay: .65s; }
.ac-candle:nth-child(12) { --b: 70.80%; --h: 6.27%;  --wb: 60.96%;  --wh: 24.84%; animation-delay: .715s; }
.ac-candle:nth-child(13) { --b: 75.80%; --h: 2.71%;  --wb: 68.38%;  --wh: 31.62%; animation-delay: .78s; }
.ac-candle:nth-child(14) { --b: 67.23%; --h: 8.71%;  --wb: 64.80%;  --wh: 24.97%; animation-delay: .845s; }
.ac-candle:nth-child(15) { --b: 67.81%; --h: 7.85%;  --wb: 57.54%;  --wh: 27.55%; animation-delay: .91s; }
.ac-candle:nth-child(16) { --b: 70.08%; --h: 6.14%;  --wb: 55.68%;  --wh: 21.83%; animation-delay: .975s; }
.ac-candle:nth-child(17) { --b: 66.39%; --h: 3.69%;  --wb: 58.11%;  --wh: 26.11%; animation-delay: 1.04s; }
.ac-candle:nth-child(18) { --b: 64.80%; --h: 9.78%;  --wb: 45.47%;  --wh: 29.61%; animation-delay: 1.105s; }

@keyframes ac-candle-fade {
  0%   { opacity: 0; transform: scaleY(0); }
  10%  { opacity: 1; transform: scaleY(1.5); }
  50%  { opacity: 1; transform: scaleY(1.35); }
  70%  { opacity: 0; transform: scaleY(1.5); }
  100% { opacity: 0; transform: scaleY(0); }
}

/* ---------- Awards ---------- */
.ac-award img { transition: transform 500ms var(--ac-ease); }
.ac-award:hover img { transform: scale(1.03); }

/* ---------- CTA decoration ---------- */
.ac-cta { isolation: isolate; }

/* `:not(.ac-deco)` so the decoration keeps its absolute positioning and never takes a grid slot */
.ac-cta > *:not(.ac-deco) { position: relative; z-index: 1; }

.ac-cta__deco .ac-deco__glow--c {
  top: -120px;
  right: 8%;
  width: 320px;
  height: 320px;
  animation: ac-pulse-soft 9s ease-in-out infinite;
}

.ac-cta__rings {
  right: -60px;
  bottom: -90px;
  width: 280px;
  opacity: 0.35;
}

/* ---------- Footer top edge ---------- */
.ac-footer {
  position: relative;
}

/* Footer content sits above the symbol field. The floating social rail is
   excluded: it is position:fixed and must stay that way. */
.ac-footer > .ac-container { position: relative; z-index: 1; }

.ac-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250, 207, 73, 0.3), transparent);
}

/* ---------- Social + back to top micro-interactions ---------- */
.ac-social a {
  transition: transform var(--ac-duration) var(--ac-ease), border-color var(--ac-duration) var(--ac-ease),
    background-color var(--ac-duration) var(--ac-ease), color var(--ac-duration) var(--ac-ease);
}

.ac-social a:hover { transform: translateY(-2px); }

#myBtn.ac-back-top:hover { transform: translateY(-2px); }

/* ==========================================================================
   3D & pointer interactions
   Enabled by JS only for fine pointers with motion allowed (html.ac-tilt-on).
   Never applied to .ac-embed or any ancestor of an embed iframe.
   ========================================================================== */

.ac-card-grid,
.ac-awards .owl-stage,
.ac-hero__grid {
  perspective: 1100px;
}

.ac-tilt-on [data-ac-tilt] {
  transform: perspective(1100px) rotateX(var(--ac-rx, 0deg)) rotateY(var(--ac-ry, 0deg));
  transition: transform 420ms var(--ac-ease), box-shadow 420ms var(--ac-ease), border-color 260ms var(--ac-ease);
}

/* While the pointer is inside, follow it quickly; on leave, ease back slowly */
.ac-tilt-on [data-ac-tilt].is-tilting {
  transition: transform 90ms linear, box-shadow 260ms var(--ac-ease), border-color 260ms var(--ac-ease);
}

.ac-tilt-on .ac-hero__media:hover {
  transform: perspective(1100px) rotateX(var(--ac-rx, 0deg)) rotateY(var(--ac-ry, 0deg)) translateY(-6px);
}

.ac-tilt-on .ac-award:hover {
  transform: perspective(1100px) rotateX(var(--ac-rx, 0deg)) rotateY(var(--ac-ry, 0deg)) translateY(-4px);
  box-shadow: 0 20px 44px -18px rgba(16, 24, 40, 0.35);
}

/* Light that follows the cursor across a card */
.ac-card::after {
  background: radial-gradient(
    260px circle at var(--ac-mx, 50%) var(--ac-my, 0%),
    rgba(250, 207, 73, 0.2),
    rgba(250, 207, 73, 0.06) 40%,
    transparent 68%
  );
}

/* Glare sweeping across the hero image and award cards */
.ac-hero__media::after,
.ac-award::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--ac-mx, 50%) var(--ac-my, 50%),
    rgba(255, 255, 255, 0.16),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 320ms var(--ac-ease);
  pointer-events: none;
}

.ac-award { position: relative; }

.ac-hero__media:hover::after,
.ac-award:hover::after { opacity: 1; }

/* Ghost icon: strokes draw themselves in, then the shape settles */
.ac-card__media .ac-icon > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 1;
}

.ac-bento__cell:hover .ac-card .ac-card__media .ac-icon > * {
  animation: ac-draw-stroke 820ms var(--ac-ease) forwards, ac-ink-pulse 900ms var(--ac-ease) 620ms;
}

@keyframes ac-draw-stroke {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* Once drawn, the strokes thicken briefly, like ink settling into paper */
@keyframes ac-ink-pulse {
  0% { stroke-width: 1.25; }
  35% { stroke-width: 2.1; }
  100% { stroke-width: 1.25; }
}

/* ==========================================================================
   Home: split hero, wordmark strip, bento grid
   ========================================================================== */

/* ---------- Hero: asymmetric split ---------- */
.ac-hero--split .ac-hero__grid {
  gap: var(--ac-space-12);
}

@media (min-width: 992px) {
  .ac-hero--split .ac-hero__grid {
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
  }
}

.ac-hero__title .ac-hero__line {
  display: block;
}

/* Gold gradient with a slow sheen crossing the accent line */
.ac-hero__line--accent {
  background: linear-gradient(100deg, var(--ac-gold-400) 0%, #fff3c4 38%, var(--ac-gold-500) 58%, var(--ac-gold-400) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ac-gold-400);
  animation: ac-sheen 9s ease-in-out infinite;
}

@keyframes ac-sheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Stage holds the poster, the panels stacked behind it and the floating chips */
.ac-hero__stage {
  position: relative;
  perspective: 1200px;
}

.ac-hero__layer {
  position: absolute;
  inset: 8% 6% 12% 6%;
  border-radius: calc(var(--ac-radius-lg) + 10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  pointer-events: none;
}

.ac-hero__layer--back {
  transform: translate3d(0, -26px, 0) rotate(-4deg) scale(0.97);
  opacity: 0.5;
}

.ac-hero__layer--mid {
  transform: translate3d(0, -13px, 0) rotate(-2deg) scale(0.99);
  opacity: 0.75;
}

/* ---------- Wordmark strip ---------- */
.ac-wordstrip {
  position: relative;
  overflow: hidden;
  padding-block: var(--ac-space-6);
  background: var(--ac-ink-950);
  border-top: 1px solid var(--ac-border-dark);
  border-bottom: 1px solid var(--ac-border-dark);
}

.ac-wordstrip__track {
  display: flex;
  align-items: center;
  gap: var(--ac-space-6);
  width: max-content;
  animation: ac-marquee-x 48s linear infinite;
}

.ac-wordstrip__word {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(250, 207, 73, 0.42);
  white-space: nowrap;
}

.ac-wordstrip__dot {
  font-size: 1.25rem;
  color: rgba(250, 207, 73, 0.55);
}

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

/* ---------- Bento grid ---------- */
.ac-bento {
  display: grid;
  grid-template-columns: 1fr;
  /* Wide enough that the offset shadows never touch the neighbouring tile */
  gap: var(--ac-space-6);
  /* Top margin leaves room for the object leaning over the first tile.
     It collapses with the section head's margin, so it sets the whole gap. */
  margin: var(--ac-space-16) 0 0;
  padding: 0;
  list-style: none;
  perspective: 1100px;
}

.ac-bento__cell { display: flex; }
.ac-bento__cell > .ac-card { width: 100%; }

@media (min-width: 640px) {
  .ac-bento { grid-template-columns: repeat(2, 1fr); }
  .ac-bento__cell--feature { grid-column: span 2; }
}

@media (min-width: 992px) {
  .ac-bento { grid-template-columns: repeat(3, 1fr); gap: var(--ac-space-8); }
}

@media (min-width: 1200px) {
  /* 4 columns; the feature tile takes a 2×2 block and the other eight fill the rest */
  .ac-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(186px, auto);
  }

  .ac-bento__cell--feature {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Feature tile: dark, so the grid has a clear anchor */
.ac-card--feature {
  justify-content: flex-end;
  background:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 16px 16px,
    radial-gradient(90% 120% at 100% 0%, rgba(250, 207, 73, 0.16), transparent 60%),
    linear-gradient(180deg, var(--ac-ink-800), var(--ac-ink-950));
  border-color: var(--ac-gold-400);
  color: var(--ac-on-dark);
  box-shadow: 6px 6px 0 var(--ac-gold-400);
}

.ac-bento__cell:hover .ac-card--feature,
a.ac-card--feature:focus-visible { box-shadow: 13px 13px 0 var(--ac-gold-400); }

.ac-bento__cell:active .ac-card--feature { box-shadow: 2px 2px 0 var(--ac-gold-400); }

.ac-card--feature .ac-card__index {
  border-color: var(--ac-gold-400);
  box-shadow: 3px 3px 0 var(--ac-gold-600);
}

.ac-card--feature .ac-card__kicker { color: var(--ac-gold-400); }

.ac-card--feature .ac-card__foot { border-top-color: rgba(250, 207, 73, 0.3); }

.ac-card--feature .ac-card__tag {
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--ac-on-dark-muted);
}

.ac-card--feature .ac-card__cta {
  border-color: var(--ac-gold-400);
  background: transparent;
  box-shadow: 3px 3px 0 var(--ac-gold-600);
  color: var(--ac-gold-400);
}

.ac-bento__cell:hover .ac-card--feature .ac-card__cta {
  background: var(--ac-gold-400);
  box-shadow: 4px 4px 0 var(--ac-gold-600);
  color: var(--ac-ink-950);
}

.ac-card--feature .ac-card__title {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  color: #fff;
}

.ac-card--feature .ac-card__text {
  flex: 0 1 auto;
  max-width: 44ch;
  font-size: var(--ac-text-base);
  color: var(--ac-on-dark-muted);
}

/* Feature tile: larger stage, pinned to the top of the card */
.ac-card--feature .ac-icon-tile {
  width: 56px;
  height: 56px;
  margin-bottom: auto;
  background: none;
  box-shadow: none;
}

/* Below 1200 the tile has no artwork and little spare height, so the copy
   should flow from the top like every other card rather than being pushed
   to the bottom with the icon jammed against it. */
@media (max-width: 1199.98px) {
  .ac-card--feature { justify-content: flex-start; }

  .ac-card--feature .ac-icon-tile {
    width: 46px;
    height: 46px;
    margin-bottom: var(--ac-space-5);
  }

  .ac-card--feature .ac-card__title,
  .ac-card--feature .ac-card__text { max-width: none; }
}

/* ---------- Feature tile scene ----------
   Fills the tile's open space so the card reads as a composition rather than
   text pinned to the bottom. Decorative and non-interactive. */
/* Shown only where the tile is a tall 2×2 block with genuine empty space.
   Below that the tile is short and wide, and the art would crowd the copy. */
.ac-card__scene {
  display: none;
  position: absolute;
  top: 3%;
  right: -5%;
  z-index: 0;
  width: 56%;
  max-width: 330px;
  color: var(--ac-gold-400);
  pointer-events: none;
}

@media (min-width: 1200px) {
  .ac-card__scene { display: block; }
}

.ac-card__scene img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.45));
  transform: rotate(-3deg);
  animation: ac-scene-float 7s ease-in-out infinite;
  transition: transform 420ms var(--ac-ease);
}

/* Warm light behind the object so it sits in the card rather than on it */
.ac-card__scene-halo {
  position: absolute;
  inset: 8% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 207, 73, 0.3), transparent 72%);
  filter: blur(14px);
  animation: ac-pulse-soft 7s ease-in-out infinite;
}

@keyframes ac-scene-float {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-1.5deg) translateY(-10px); }
}

/* Leans in slightly when the tile is hovered */
.ac-bento__cell:hover .ac-card__scene img {
  animation-play-state: paused;
  transform: rotate(0deg) translateY(-6px) scale(1.04);
}

/* ---------- Feature tile chart line ----------
   Fills the open band between the icon and the copy. Drawn faintly so it
   reads as texture, and it redraws itself on a slow loop. */
.ac-card__spark {
  display: none;
  position: absolute;
  top: 34%;
  left: var(--ac-space-6);
  z-index: 0;
  width: 46%;
  max-width: 260px;
  color: var(--ac-gold-400);
  opacity: 0.22;
  pointer-events: none;
}

@media (min-width: 1200px) {
  .ac-card__spark { display: block; }
}

/* Narrower where the tile is tighter, so it stays clear of the image */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .ac-card__spark { width: 40%; top: 38%; }
}

.ac-card__spark svg { display: block; width: 100%; height: auto; }

.ac-spark__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ac-spark-draw 9s var(--ac-ease) infinite;
}

/* Draw, hold, then fade back so the loop never snaps */
@keyframes ac-spark-draw {
  0% { stroke-dashoffset: 1; opacity: 0; }
  8% { opacity: 1; }
  45% { stroke-dashoffset: 0; opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

.ac-spark__dot {
  animation: ac-spark-blink 9s ease-in-out infinite;
  opacity: 0;
}

.ac-spark__dot--b { animation-delay: 1.4s; }
.ac-spark__dot--c { animation-delay: 2.8s; }

@keyframes ac-spark-blink {
  0%, 12% { opacity: 0; transform: scale(0.6); }
  22% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.8); }
}

.ac-spark__dot { transform-box: fill-box; transform-origin: center; }

/* The line brightens a little when the tile is hovered */
.ac-bento__cell:hover .ac-card__spark { opacity: 0.34; }
.ac-card__spark { transition: opacity 320ms var(--ac-ease); }

/* Keep the copy clear of the artwork */
@media (min-width: 992px) {
  .ac-card--feature .ac-card__title,
  .ac-card--feature .ac-card__text { max-width: 54%; }
  .ac-card--feature .ac-card__foot { max-width: 62%; }
}

/* Below 1200 the tile is wide and short, so size the scene by height to keep
   it whole instead of cropping it against the card edges. */

.ac-bento__cell:hover .ac-card--feature { border-color: rgba(250, 207, 73, 0.45); }

@media (min-width: 1200px) {
  .ac-card--feature { padding: var(--ac-space-8); }
}

/* ==========================================================================
   Peek illustrations
   Small objects that rest on, lean against or peek from behind an edge. They
   are always siblings of the content (never inside a card or an embed), sit
   below it in the stacking order so the edge clips them, and never take
   pointer events — so they cannot cover a control or an iframe.
   ========================================================================== */
.ac-peek {
  position: absolute;
  z-index: 0;
  display: block;
  width: var(--ac-peek-size, 88px);
  pointer-events: none;
  user-select: none;
}

.ac-peek__art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(16, 24, 40, 0.18));
  transform: rotate(var(--ac-peek-tilt, -6deg));
  animation: ac-peek-idle 6s ease-in-out infinite;
  transform-origin: 50% 90%;
}

/* Contact shadow so the object reads as resting on the edge */
.ac-peek::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -6px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(16, 24, 40, 0.3), transparent);
}

@keyframes ac-peek-idle {
  0%, 100% { transform: rotate(var(--ac-peek-tilt, -6deg)) translateY(0); }
  50% { transform: rotate(calc(var(--ac-peek-tilt, -6deg) + 1.5deg)) translateY(-5px); }
}

/* Sizes */
.ac-peek--sm { --ac-peek-size: 62px; }
.ac-peek--lg { --ac-peek-size: 116px; }

/* Placements. Each sits just outside its anchor so the neighbouring card or
   section edge overlaps its lower half. */
.ac-peek--above-left {
  left: clamp(16px, 5vw, 64px);
  bottom: -14px;
  --ac-peek-tilt: -7deg;
}

/* Sits on the section's bottom edge; the card that overlaps this section
   covers its lower part, so it reads as leaning out from behind the card. */
.ac-peek--above-right {
  right: clamp(24px, 7vw, 120px);
  bottom: 4px;
  --ac-peek-tilt: 6deg;
}

/* Leans over a card's top edge: about two thirds visible, the rest tucked
   behind the card. Sits to the right, clear of the section intro text. */
.ac-peek--card-top {
  --ac-peek-size: 84px;
  --ac-peek-tilt: 8deg;
  top: calc(var(--ac-peek-size) * -0.66);
  right: 34px;
}

/* Stands on the panel's top edge, so most of the object reads against the
   page rather than disappearing behind the panel's side. */
.ac-peek--band-left {
  --ac-peek-size: 104px;
  --ac-peek-tilt: -5deg;
  left: clamp(20px, 5vw, 72px);
  top: calc(var(--ac-peek-size) * -0.6);
}

/* The pet hovers fully clear of the panel's top edge, drifting up and down
   above its shadow, rather than being half-hidden behind the panel. */
.ac-peek--band-left.ac-peek--pet {
  --ac-peek-size: 84px;
  top: calc(var(--ac-peek-size) * -1 - 14px);
}

.ac-peek--band-left.ac-peek--pet .ac-peek__art {
  animation: ac-pet-float 3.2s ease-in-out infinite;
}

.ac-peek--band-left.ac-peek--pet::after {
  bottom: -12px;
  animation: ac-pet-float-shadow 3.2s ease-in-out infinite;
}

@keyframes ac-pet-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes ac-pet-float-shadow {
  0%, 100% { opacity: 0.6; transform: scaleX(1); }
  50% { opacity: 0.3; transform: scaleX(0.78); }
}

/* Stands on the panel's top-right edge: the pot's base rests on the edge */
.ac-peek--band-right {
  --ac-peek-size: 74px;
  right: clamp(20px, 6vw, 96px);
  top: calc(var(--ac-peek-size) * -0.62);
}

.ac-peek--band-right.ac-peek--plant {
  --ac-peek-size: 124px;
  --ac-peek-tilt: 0deg;
  right: clamp(28px, 7vw, 120px);
  top: calc(var(--ac-peek-size) * -0.92);
}

/* The pot stays put; only the leaves sway, pivoting where the stem meets the soil */
.ac-peek--plant .ac-peek__art { animation: none; }
.ac-peek--plant::after { left: 24%; right: 24%; bottom: -2px; }

.ac-plant__leaves {
  transform-box: view-box;
  transform-origin: 50% 64%;
  animation: ac-plant-sway 5s ease-in-out infinite;
}

@keyframes ac-plant-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* Anchors for the placements above */
.ac-bento__cell--feature { position: relative; }
.ac-cta-band__inner { position: relative; }

/* The mascot follows the pointer with its eyes, a few pixels at most */
.ac-peek__eyes {
  transform: translate(calc(var(--ac-gaze-x, 0) * 2.5px), calc(var(--ac-gaze-y, 0) * 1.8px));
  transition: transform 220ms var(--ac-ease);
}

/* ---------- Pixel pet ----------
   Bobs above its shadow, its fringe ripples between two states, and its
   pupils dart before settling on the pointer. */
.ac-peek--pet .ac-peek__art {
  --ac-peek-tilt: 0deg;
  animation: none; /* the body carries its own bob */
  filter: drop-shadow(0 4px 6px rgba(16, 24, 40, 0.22));
  overflow: visible;
}

.ac-pet__body {
  animation: ac-pet-bob 0.9s steps(1, end) infinite;
  transform-origin: 50% 100%;
}

@keyframes ac-pet-bob {
  0%, 49% { transform: translateY(0.5px); }
  50%, 100% { transform: translateY(-0.5px); }
}

/* Only one fringe state is visible at a time, which makes it ripple */
.ac-pet__fringe--a { animation: ac-pet-fringe-a 0.9s steps(1, end) infinite; }
.ac-pet__fringe--b { animation: ac-pet-fringe-b 0.9s steps(1, end) infinite; }

@keyframes ac-pet-fringe-a {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes ac-pet-fringe-b {
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

/* Pupils dart left and right; the pointer gaze is layered on top */
.ac-peek--pet .ac-peek__eyes {
  animation: ac-pet-look 4.5s steps(1, end) infinite;
  transform: translate(calc(var(--ac-gaze-x, 0) * 0.5px), calc(var(--ac-gaze-y, 0) * 0.35px));
}

@keyframes ac-pet-look {
  0%, 39% { translate: 0 0; }
  40%, 69% { translate: 0.8px 0; }
  70%, 100% { translate: -0.6px 0; }
}

/* Contact shadow keeps time with the bob */
.ac-peek--pet::after {
  left: 18%;
  right: 18%;
  bottom: -4px;
  height: 8px;
  animation: ac-pet-shadow 0.9s steps(1, end) infinite;
}

@keyframes ac-pet-shadow {
  0%, 49% { opacity: 0.55; transform: scaleX(1); }
  50%, 100% { opacity: 0.3; transform: scaleX(0.88); }
}

/* Small screens: keep the composition clean */
@media (max-width: 991.98px) {
  .ac-peek { --ac-peek-size: 64px; }
  .ac-peek--lg { --ac-peek-size: 80px; }
  .ac-peek--card-top { --ac-peek-size: 68px; }
  .ac-peek--band-left { --ac-peek-size: 84px; }
  .ac-peek--band-left.ac-peek--pet { --ac-peek-size: 68px; }
  .ac-peek--band-right.ac-peek--plant { --ac-peek-size: 96px; }

  /* Page-header objects would land behind the description text here */
  .ac-peek--above-right { display: none; }
}

@media (max-width: 767.98px) {
  .ac-peek { display: none; }
}

/* ---------- Aurora: very slow colour drift behind dark sections ---------- */
.ac-deco__aurora {
  inset: -25%;
  background:
    radial-gradient(260px 220px at 22% 32%, rgba(250, 207, 73, 0.14), transparent 62%),
    radial-gradient(220px 200px at 76% 22%, rgba(217, 169, 22, 0.12), transparent 64%),
    radial-gradient(300px 260px at 58% 78%, rgba(250, 207, 73, 0.08), transparent 66%);
  filter: blur(18px);
  animation: ac-aurora 26s ease-in-out infinite alternate;
}

/* Fixed-size blooms stay subtle on narrow screens instead of flooding the section */
@media (max-width: 991.98px) {
  .ac-deco .ac-deco__aurora { opacity: 0.5; }
}

@keyframes ac-aurora {
  0% { transform: translate3d(-3%, -2%, 0) scale(1); }
  50% { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.03); }
}

/* ---------- Primary button: depth and a soft halo ---------- */
.ac-btn--primary {
  background: linear-gradient(180deg, #fddc7a, var(--ac-gold-400) 45%, var(--ac-gold-500));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(154, 111, 0, 0.25),
    0 2px 4px rgba(16, 24, 40, 0.16);
}

.ac-btn--primary:hover {
  background: linear-gradient(180deg, #fee08a, var(--ac-gold-400) 45%, var(--ac-gold-500));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(154, 111, 0, 0.3),
    0 8px 20px -6px rgba(250, 207, 73, 0.55),
    0 2px 6px rgba(16, 24, 40, 0.18);
  transform: translateY(-1px);
}

.ac-btn--primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(154, 111, 0, 0.35);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ac-ribbon__track {
    animation: none;
    padding-left: var(--ac-gutter);
  }

  .ac-ribbon { overflow-x: auto; }

  .ac-btn,
  .ac-card,
  .ac-drawer,
  .ac-drawer__panel,
  .ac-nav__chevron,
  .ac-card__cta .ac-icon { transition: none; }

  .ac-bento__cell:hover .ac-card { transform: none; }

  /* Decoration stays, motion stops */
  .ac-hero__shape,
  .ac-hero__chart path,
  .ac-hero__chart circle,
  .ac-cta__deco .ac-deco__glow--c,
  .ac-drawer.is-open .ac-drawer__list > li,
  .ac-page-head .ac-icon-tile .ac-icon,
  .ac-embed:not(:has(iframe))::after {
    animation: none;
  }

  .ac-hero__chart path { stroke-dashoffset: 0; }

  .ac-js [data-ac-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* 3D tilt is never enabled under reduced motion (JS checks too) */
  [data-ac-tilt],
  [data-ac-tilt]:hover { transform: none !important; }

  .ac-deco__aurora,
  .ac-hero__media::after,
  .ac-award::after,
  .ac-hero__line--accent,
  .ac-wordstrip__track { animation: none; }

  .ac-nav__spot { transition: none; }

  /* Peeks stay in place, without the idle float or gaze */
  .ac-peek__art { animation: none; }
  .ac-peek__eyes { transform: none; transition: none; }

  /* Candles hold their final shape instead of building up */
  .ac-candle { animation: none; opacity: 1; transform: none; }

  /* Feature scene stays visible, but nothing moves */
  .ac-card__scene img,
  .ac-card__scene-halo { animation: none; }

  /* Chart line stays drawn instead of looping */
  .ac-spark__line { animation: none; stroke-dashoffset: 0; }
  .ac-spark__dot { animation: none; opacity: 1; }
  .ac-card__scene img,
  .ac-bento__cell:hover .ac-card__scene img { transform: rotate(-3deg); transition: none; }

  /* The pet holds a single pose: one fringe state, no bob, no darting eyes */
  .ac-pet__body,
  .ac-pet__fringe--a,
  .ac-peek--pet .ac-peek__eyes,
  .ac-peek--pet::after,
  .ac-plant__leaves { animation: none; }
  .ac-peek--band-left.ac-peek--pet .ac-peek__art,
  .ac-peek--band-left.ac-peek--pet::after { animation: none; }
  .ac-pet__fringe--b { display: none; }

  /* Icon tile shows its front face only, with no flip */
  .ac-flip__inner,
  .ac-bento__cell:hover .ac-flip__inner { transform: none; transition: none; }
  .ac-flip__face--back { display: none; }
  .ac-bento__cell:hover .ac-card .ac-card__media { animation: none; }

  /* Card ghost icon and dropdown arrow: shown, but not animated */
  .ac-bento__cell:hover .ac-card .ac-card__media .ac-icon > * { animation: none; stroke-dashoffset: 0; }
  .ac-card__media .ac-icon > * { opacity: 1; }
  .ac-card__media { transform: none; }
  .ac-bento__cell:hover .ac-card .ac-card__media { transform: none; }

  .ac-card__media,
  .ac-dropdown__arrow,
  .ac-hero__media,
  .ac-award img,
  .ac-social a,
  .ac-btn--primary::before,
  .ac-card .ac-icon-tile,
  .ac-dropdown__item .ac-icon-tile { transition: none; }

  .ac-hero__media:hover,
  .ac-award:hover img,
  .ac-social a:hover,
  #myBtn.ac-back-top:hover,
  .ac-bento__cell:hover .ac-card .ac-icon-tile { transform: none; }
}