/* Dimensional artwork is reserved for explanatory cards. Photos, metrics,
   navigation controls, and comparison tables keep their existing hierarchy. */
:root { --art-ease: cubic-bezier(.32, .72, 0, 1); }

/* Service, partner, and city feature cards. The core preserves reading order. */
.ax .ax-fg-item { padding: 5px; border: 0; border-radius: 28px; background: #eae6de; box-shadow: 0 16px 44px -28px rgb(79 62 39 / 15%); }
.ax-fg-core { display: flex; flex-direction: column; gap: 15px; padding: 24px; height: 100%; border-radius: 23px; background: #fffefa; box-shadow: inset 0 1px 1px #fff; }
.ax-fg.ax-light .ax-fg-core { background: #f7f4ed; }
.ax-fg-core > .ax-artwork { --art-size: 96px; margin: -4px 0 2px; }
.ax .ax-fg-core h3 { padding-bottom: 0 !important; line-height: 1.25; }
.ax-partner-page .ax-fg-item { padding: 5px; }
.ax-partner-page .ax-fg-item:nth-child(2) .ax-fg-core { background: #263c32; box-shadow: inset 0 1px 1px rgb(255 255 255 / 14%); }
.ax-partner-page .ax-fg-item:nth-child(2) :is(.ax-fg-text, p, li) { color: #d9e3d9; }

/* Process steps: nested faces, small labels and a dedicated artwork row. */
.ax .ax-step { padding: 5px; gap: 0; border-radius: 28px; background: #e9e4db; box-shadow: 0 16px 44px -28px rgb(79 62 39 / 15%); }
.ax-step-core { display: flex; flex-direction: column; gap: 18px; height: 100%; padding: 24px; border-radius: 23px; background: #fffdf8; box-shadow: inset 0 1px 1px #fff; }
.ax-step--orange .ax-step-core { background: radial-gradient(ellipse at 100% 0, #f6dcac, transparent 80%), #fff3df; }
.ax .ax-step--dark { background: #d8e1d8; }
.ax-step--dark .ax-step-core { background: radial-gradient(ellipse at 100% 0, #375345, transparent 80%), #243e33; box-shadow: inset 0 1px 1px rgb(255 255 255 / 16%); }
.ax-step-artline { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 98px; }
.ax-step-artline .ax-step-label { font-size: 10px; line-height: 1.6; }
.ax-step-artline > .ax-artwork { --art-size: 88px; }
.ax-step--dark .ax-step-label { color: #d8e6c9; }
.ax .ax-step h3 { padding-bottom: 0 !important; line-height: 1.2; }
.ax-contact-page .ax-step, .ax-partner-page .ax-step { padding: 5px; }
.ax-step-core > p { margin-top: auto; }

/* Included plan benefits already have a mark slot; give it a sculptural face. */
.ax .ax-pi-card { padding: 5px; border-radius: 28px; background: #e9e4db; }
.ax-pi-card::after { display: none; }
.ax .ax-pi-face { border-radius: 23px; background: #fffdf8; box-shadow: inset 0 1px 1px #fff; gap: 16px; }
.ax-pi-card--orange .ax-pi-face { background: radial-gradient(ellipse at 100% 0, #f5deb7, transparent 70%), #fff4e2; }
.ax .ax-pi-card--dark { background: #d8e1d8; }
.ax-pi-card--dark .ax-pi-face { background: #263e33; box-shadow: inset 0 1px 1px rgb(255 255 255 / 16%); }
.ax .ax-pi-face h3 { padding-bottom: 0 !important; }
.ax-pi-mark .ax-artwork { width: 112px; height: auto; }

/* Pricing symbols sit with the tier, keeping the actual price unobstructed. */
.ax-plan-artline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ax-plan-artline > .ax-artwork { --art-size: 70px; }
.ax-plan--pop .ax-plan-artline { margin-top: 24px; }
.ax-plan--pop .ax-plan-artline > .ax-artwork { --art-size: 108px; }
.ax .ax-plan h3 { padding-bottom: 0 !important; }

/* Audits use larger illustrations beside their headings; the audit copy stays full width. */
.aud-card { border-radius: 28px; padding: 5px; background: #e9e4db; }
.aud-card .aud-card-in { border-radius: 23px; box-shadow: inset 0 1px 1px rgb(255 255 255 / 50%); }
.aud-card .aud-card-ico { width: 96px; height: 92px; border-radius: 0; background: transparent; }
.aud-card-ico > .ax-artwork { --art-size: 96px; }
.aud-card:nth-child(8n+2) .aud-card-in { background: radial-gradient(ellipse at 0 0, #f7dfb5, transparent 75%), #fff3de; }
.aud-card:nth-child(8n+7) .aud-card-in { background: #263e33; }
.ax-sd-panel-top .ax-sd-process-art { --art-size: 150px; }
.about-step-content { display: flow-root; }
.about-step-art { float: right; width: 96px; margin: 0 0 12px 20px; }
.ar-why-glyph .ax-artwork { width: 112px; height: auto; }
.ax-id-growth-item .ax-id-growth-art { width: 120px; margin-bottom: 24px; }

/* Tool illustrations occupy their own row, never overlaying copy or links. */
.tk-art { margin-bottom: 14px; }
.tk-art > .ax-artwork { --art-size: 112px; }
.tk-card--soon .tk-art > .ax-artwork { --art-size: 96px; }

/* Replace the existing benefit-icon slots on the comparison guides. */
.dimensional-icon:is(.vs-feature-icon, .vs-aba-adv-icon, .vs-maf-adv-icon) { width: 96px; height: 90px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: inherit; }
.dimensional-icon > .ax-artwork { --art-size: 96px; }
.vs-aba-adv-card p, .vs-maf-adv-card p { color: #d6d2ca; }

/* Only transform the small SVG. No continuous movement, layout animation, or JS. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.ax-fg-core, .ax-step-core, .ax-pi-face, .aud-card-in, .ar-why-row, .tk-card, .vs-feature-card, .vs-aba-adv-card, .vs-maf-adv-card) .ax-artwork { transition: transform .75s var(--art-ease); }
  :is(.ax-fg-core, .ax-step-core, .ax-pi-face, .aud-card-in, .ar-why-row, a.tk-card, .vs-feature-card, .vs-aba-adv-card, .vs-maf-adv-card):hover .ax-artwork { transform: translateY(-4px) rotate(-3deg); }
}
@media (max-width: 767px) {
  .ax-fg-core, .ax-step-core { padding: 22px; }
  .ax-fg-core > .ax-artwork { --art-size: 84px; }
  .ax-sd-panel-top .ax-sd-process-art { --art-size: 112px; }
  .aud-card .aud-card-ico { width: 76px; height: 74px; }
  .aud-card-ico > .ax-artwork { --art-size: 76px; }
  .aud-card:nth-child(8n+7) .aud-card-in { background: var(--ax-warm); }
  .aud-card:nth-child(6n+3) .aud-card-in { background: #263e33; }
  .about-step-art { width: 76px; margin-left: 14px; }
  .about-step-content > .about-step-label { display: flex; align-items: center; min-height: 70px; }
  .about-step-content > p { clear: both; }
}
@media (max-width: 480px) {
  .ax-id-growth-item .ax-id-growth-art { grid-row: 1 / 3; width: 90px; margin: 0; }
}
@media (max-width: 640px) {
  .ax-plan--pop .ax-plan-artline { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ax-artwork { transition: none !important; animation: none !important; transform: none !important; }
}