/* =========================================================================
   AMIX Pro, components.css

   THE HEAD OF THIS FILE (everything above the generated marker) IS
   HAND-WRITTEN AND SURVIVES REBUILDS. It holds the site chrome and the shared
   primitives that every page uses.

   Values here are taken literally from the approved design exports in
   claude-design-project/, not approximated. Where a number looks oddly
   specific (14.5px, 16.5px, .34em) it is because the design says so.

   EVERYTHING BELOW THE MARKER IS GENERATED from _build/pages/*.css by
   _build/rebuild-css.sh. Do not edit it: the next rebuild will clobber it.
   ========================================================================= */

/* ---------------------------------------------------------------- layout */

/* WordPress inserts its default block gap between every top-level block, which
   put 19.2px of dead space between the sticky header and the hero, and again
   above the footer. The sections here set their own exact spacing, so the
   automatic gap is removed. Specificity beats core's `.wp-site-blocks > * + *`
   without needing !important. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > main.ax-main,
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }

.ax-main { position: relative; }

/* Default inner section. Individual sections override padding to the exact
   figures in the design, which vary section by section.

   box-sizing is content-box here, against the global border-box reset, because
   in the designs `max-width: 1180px` is the width of the CONTENT, with the 32px
   gutter added outside it. Under border-box every section came out 64px
   narrower than the approved layout. */
.ax-section {
  box-sizing: content-box;
  position: relative;
  max-width: var(--ax-container);
  margin: 0 auto;
  padding: 96px var(--ax-pad);
}
.ax-section--wide { max-width: var(--ax-container-wide); }
.ax-section--tight { padding-block: 56px; }

/* The flyer's divider: a 1px gold rule that fades to nothing at both ends. */
.ax-hairline { height: 1px; background: var(--ax-gold-rule); }

.ax-section-rule {
  box-sizing: content-box;
  max-width: var(--ax-container-wide);
  margin: 0 auto;
  padding-inline: var(--ax-pad);
}
.ax-section-rule > div {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 160, 23, .5) 50%, transparent 100%);
}

/* ----------------------------------------------------------- typography */

/* Two distinct eyebrows in the designs, not one. The hero uses wide-tracked
   silver Cinzel; section headers use tighter gold Inter. */
.ax-eyebrow {
  margin: 0;
  font-family: var(--ax-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ax-silver-400);
}
.ax-eyebrow--section {
  font-family: var(--ax-font-body);
  font-size: 12px;
  letter-spacing: .34em;
  color: var(--ax-gold-500);
}

.ax-h1, .ax-h2 {
  margin: 0;
  font-family: var(--ax-font-display);
  text-transform: uppercase;
  color: var(--ax-text);
}
.ax-h1 { font-size: var(--ax-h1); font-weight: 700; letter-spacing: .06em; line-height: 1.22; }
/* 1.65 is what the designs render, by inheritance from the body. It has to be
   stated explicitly because WordPress' global styles set a tighter heading
   leading (~1.28) that would otherwise win. Sections that want it tighter say
   so themselves. */
.ax-h2 { font-size: var(--ax-h2); font-weight: 600; letter-spacing: .08em; line-height: 1.65; }

/* Three separate h3 treatments in the designs. They are genuinely different
   roles, so they get separate classes rather than one compromise. */
.ax-h3 {
  margin: 0;
  font-family: var(--ax-font-display);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--ax-gold-400);
}
.ax-h3--plain {
  font-family: var(--ax-font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.65;
  text-transform: none;
  color: var(--ax-text);
}
.ax-h3--silver {
  font-size: 19px;
  letter-spacing: .09em;
  line-height: 1.65;
  background: var(--ax-silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ax-silver-300);
}

/* Emphasis comes from gold, not from a heavier weight (flyer convention). */
.ax-gold-text {
  background: linear-gradient(180deg, #FFE47E 0%, #D4A017 60%, #8A5E0A 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ax-gold-500);
}

.ax-lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ax-text-dim);
  text-wrap: pretty;
}

/* ------------------------------------------------ shared section header */

.ax-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 64px;
  text-align: center;
}
.ax-section-head--left { align-items: flex-start; text-align: left; margin-bottom: 0; }

/* The short gold rule that sits under every section heading. */
.ax-rule-120 {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23, .7), transparent);
}
.ax-section-head--left .ax-rule-120 {
  background: linear-gradient(90deg, rgba(212, 160, 23, .7), transparent);
}
.ax-rule-40 {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23, .7), transparent);
}

/* -------------------------------------------------------------- buttons */

.ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 34px;
  border: 0;
  border-radius: var(--ax-radius-pill);
  font-family: var(--ax-font-body);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  text-align: center;
  transition: box-shadow var(--ax-dur) var(--ax-ease),
              border-color var(--ax-dur) var(--ax-ease),
              color var(--ax-dur) var(--ax-ease);
}

.ax-btn--gold {
  background: var(--ax-gold-btn);
  color: var(--ax-black-900);
  box-shadow: inset 0 1px 0 rgba(255, 228, 126, .6);
}
.ax-btn--gold:hover,
.ax-btn--gold:focus-visible {
  color: var(--ax-black-900);
  box-shadow: inset 0 1px 0 rgba(255, 228, 126, .8), var(--ax-glow-gold-strong);
}

.ax-btn--ghost {
  background: transparent;
  border: 1px solid rgba(212, 160, 23, .65);
  color: var(--ax-gold-500);
}
.ax-btn--ghost:hover,
.ax-btn--ghost:focus-visible {
  border-color: var(--ax-gold-400);
  color: var(--ax-gold-400);
  box-shadow: 0 0 18px rgba(212, 160, 23, .2);
}

/* A plain gold text action, used beside the primary button in the CTA band. */
.ax-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ax-gold-500);
}
.ax-btn-text:hover { color: var(--ax-gold-400); }

/* The header pill is a size down from the page buttons. */
.ax-header-cta { height: 44px; padding: 0 26px; font-size: 14px; }

/* --------------------------------------------------------- icon circles */

.ax-icon-circle {
  display: inline-grid;
  place-items: center;
  inline-size: var(--ax-ic-size, 64px);
  block-size: var(--ax-ic-size, 64px);
  border-radius: 50%;
  color: var(--ax-gold-500);
  background:
    linear-gradient(var(--ax-black-900), var(--ax-black-900)) padding-box,
    var(--ax-gold-grad) border-box;
  border: 1.5px solid transparent;
  transition: box-shadow var(--ax-dur) var(--ax-ease);
}

/* ----------------------------------------------------------------- cards */

.ax-card {
  background: var(--ax-black-800);
  border: 1px solid var(--ax-black-600);
  border-radius: var(--ax-radius-md);
  padding: 34px 30px;
  transition: border-color var(--ax-dur) var(--ax-ease),
              box-shadow var(--ax-dur) var(--ax-ease);
}
.ax-card:hover {
  border-color: rgba(212, 160, 23, .5);
  box-shadow: var(--ax-shadow-card);
}
.ax-card:hover .ax-icon-circle { box-shadow: var(--ax-glow-gold); }

/* ---------------------------------------------------------------- header */

/* Sticky goes on the OUTER template-part wrapper. Applying it to .ax-header
   does nothing, because that element's parent is only header-height tall
   (playbook gotcha 6.5). */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 40;
}

.ax-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: var(--ax-header-h);
  background: rgba(13, 13, 13, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.ax-header-bar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--ax-container-wide);
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--ax-pad);
  box-sizing: border-box;
}

.ax-logo { display: flex; align-items: center; }
.ax-logo img { height: 52px; width: auto; display: block; }

.ax-nav { display: flex; align-items: center; gap: 36px; }

.ax-navlink {
  color: var(--ax-text-dim);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 12px 0;
  white-space: nowrap;
}
.ax-navlink:hover { color: var(--ax-gold-400); }
.ax-navlink.is-active { color: var(--ax-text); }

.ax-header .ax-hairline {
  background: linear-gradient(90deg, transparent 0%, rgba(212, 160, 23, .55) 50%, transparent 100%);
}

.ax-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--ax-black-600);
  border-radius: 10px;
  color: var(--ax-gold-500);
  cursor: pointer;
}
.ax-hamburger:hover { border-color: rgba(212, 160, 23, .55); }

/* ---------------------------------------------------------------- drawer */

.ax-drawer {
  position: fixed;
  inset: var(--ax-header-h) 0 0 0;
  z-index: 39;
  display: flex;
  flex-direction: column;
  padding: 16px 24px 32px;
  overflow-y: auto;
  background: rgba(13, 13, 13, .98);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
/* Explicit closed-state guard. Without it the display:flex above wins over the
   UA [hidden] rule and the drawer is permanently open (gotcha G1). */
.ax-drawer[hidden] { display: none; }

html.ax-drawer-open { overflow: hidden; }

.ax-drawer-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 4px 8px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ax-text-dim);
  border-bottom: 1px solid var(--ax-black-700);
}
.ax-drawer-link:hover { color: var(--ax-gold-400); }
.ax-drawer-link.is-active { color: var(--ax-text); }
.ax-drawer-cta { margin-top: 28px; height: 52px; font-size: 15.5px; }

/* ---------------------------------------------------------------- footer */

.ax-footer {
  padding: 64px var(--ax-pad) 40px;
  background: #0A0A0A;
}
.ax-footer-inner {
  max-width: var(--ax-container-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ax-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}

.ax-footer-brand { display: flex; flex-direction: column; gap: 16px; max-width: 340px; }
.ax-footer-brand .ax-logo img { height: 64px; align-self: flex-start; }
.ax-footer-blurb { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ax-text-dim); }

.ax-footer-col { display: flex; flex-direction: column; gap: 12px; }
.ax-footer-h {
  margin: 0 0 4px;
  font-family: var(--ax-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ax-gold-500);
}
.ax-footer-col a { color: var(--ax-text-dim); font-size: 14px; padding: 2px 0; }
.ax-footer-col a:hover { color: var(--ax-gold-400); }
.ax-footer-col--contact a { color: var(--ax-text); }
.ax-footer-col span { color: var(--ax-text-dim); font-size: 14px; }

.ax-footer-social { display: flex; gap: 12px; }
.ax-footer-social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ax-black-600);
  border-radius: 50%;
  color: var(--ax-gold-500);
}
.ax-footer-social a:hover { border-color: rgba(212, 160, 23, .55); color: var(--ax-gold-400); }

.ax-footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 160, 23, .35) 50%, transparent 100%);
}

.ax-footer-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.ax-footer-base span { font-size: 12.5px; letter-spacing: .04em; color: #6E6A60; }
.ax-footer-descriptor {
  font-family: var(--ax-font-display);
  font-size: 12px !important;
  letter-spacing: .3em;
  text-transform: uppercase;
}

/* ------------------------------------------------------- floating call */

/* Mobile only. Desktop already has the number in the header CTA and footer. */
.ax-tapcall { display: none; }

/* ----------------------------------------------------------------- forms */

.ax-field { display: flex; flex-direction: column; gap: 8px; }
.ax-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ax-silver-400);
}
.ax-input,
.ax-select,
.ax-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 16px;
  background: var(--ax-black-900);
  border: 1px solid var(--ax-black-600);
  border-radius: var(--ax-radius-md);
  color: var(--ax-text);
  font-family: var(--ax-font-body);
  font-size: 15px;
  transition: border-color var(--ax-dur) var(--ax-ease), box-shadow var(--ax-dur) var(--ax-ease);
}
.ax-select { padding-inline: 12px; }
.ax-textarea { min-height: 132px; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.ax-input::placeholder, .ax-textarea::placeholder { color: var(--ax-text-mute); }
.ax-input:focus, .ax-select:focus, .ax-textarea:focus {
  outline: none;
  border-color: rgba(212, 160, 23, .65);
  box-shadow: 0 0 0 3px rgba(212, 160, 23, .15);
}

/* The honeypot. Hidden from people, reachable by bots. Not display:none, since
   some bots skip those. */
.ax-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Sending state: scrim the whole form so it cannot be double submitted. */
[data-ax-form] { position: relative; }
[data-ax-form].is-sending { pointer-events: none; }
[data-ax-form].is-sending::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 2;
  border-radius: var(--ax-radius-md);
  background: rgba(13, 13, 13, .6);
}
[data-ax-form].is-sending::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid rgba(212, 160, 23, .25);
  border-top-color: var(--ax-gold-500);
  border-radius: 50%;
  animation: ax-spin .7s linear infinite;
}
@keyframes ax-spin { to { transform: rotate(360deg); } }

.ax-form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 48px 32px;
  background: var(--ax-black-800);
  border: 1px solid rgba(123, 196, 127, .35);
  border-radius: var(--ax-radius-lg);
}
.ax-form-success[hidden] { display: none; }
.ax-form-success svg { color: var(--ax-success); }

.ax-form-error {
  padding: 12px 14px;
  border: 1px solid rgba(229, 72, 77, .4);
  border-radius: var(--ax-radius-sm);
  background: rgba(229, 72, 77, .08);
  color: #F3B6B8;
  font-size: 14px;
}
.ax-form-error[hidden] { display: none; }

/* ------------------------------------------------------------------ FAQ */

/* Each question is its own card in the designs, not a row in a bordered list. */
.ax-faq { display: flex; flex-direction: column; gap: 14px; }

.ax-faq-item {
  background: var(--ax-black-800);
  border: 1px solid var(--ax-black-600);
  border-radius: var(--ax-radius-md);
  overflow: hidden;
  transition: border-color var(--ax-dur) var(--ax-ease);
}
.ax-faq-item:hover,
.ax-faq-item.is-open { border-color: rgba(212, 160, 23, .5); }

.ax-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 28px;
  background: none;
  border: 0;
  color: var(--ax-text);
  font-family: var(--ax-font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
}
.ax-faq-q:hover { color: var(--ax-gold-400); }

/* A plus that rotates into a cross, which is what the designs draw. */
.ax-faq-plus {
  flex: none;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  color: var(--ax-gold-500);
  transition: transform var(--ax-dur) var(--ax-ease);
}
.ax-faq-item.is-open .ax-faq-plus { transform: rotate(45deg); }

.ax-faq-a {
  padding: 0 28px 24px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ax-text-dim);
  text-wrap: pretty;
}
.ax-faq-a[hidden] { display: none; }
.ax-faq-a p { margin: 0; }

/* --------------------------------------------------------------- reveal */

.ax-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms var(--ax-ease), transform 400ms var(--ax-ease);
}
.ax-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ax-reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- breakpoints */

/* 1119: desktop nav collapses to the hamburger drawer (design value). */
@media (max-width: 1119px) {
  .ax-navlink { display: none; }
  .ax-hamburger { display: inline-flex; }
  .ax-nav { gap: 16px; }
  .ax-section { padding-block: 72px; }
  .ax-section-head { margin-bottom: 48px; }
}

/* 659: single column stacks, tighter chrome, floating call button appears. */
@media (max-width: 659px) {
  .ax-header-bar { padding-inline: 14px; }
  .ax-logo img { height: 36px; }
  .ax-nav { gap: 12px; }
  .ax-header-cta { height: 38px; padding: 0 14px; font-size: 12px; }

  .ax-section { padding-block: 56px; }
  .ax-section-head { margin-bottom: 36px; }
  /* No .ax-h2 override here on purpose. The designs hold section headings at 34px
     at every width, and 34px does fit a 390px viewport. Decided 2026-07-28. */

  .ax-footer-top { gap: 32px; }
  .ax-footer-brand { max-width: none; }
  .ax-footer-base { justify-content: flex-start; }

  .ax-tapcall {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 35;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ax-gold-btn);
    color: var(--ax-black-900);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 228, 126, .6);
  }
  .ax-tapcall:hover { color: var(--ax-black-900); }
}

/* =========================================================================
   PAGE SECTIONS - generated from _build/pages/
   Everything below this marker is written by _build/rebuild-css.sh.
   Do not hand edit: your changes will be lost on the next rebuild.
   ========================================================================= */

/* --- home.css --- */
/* ==========================================================================
   HOME

   Every number here is taken from claude-design-project/AMIX Pro Home.dc.html.
   Section paddings genuinely differ per section in the design (56 / 72+96 /
   96 / 96 / 24+110 / 88), so they are set individually rather than smoothed
   into one rhythm.

   This file also defines the shared grid, card, step, quote and CTA-band
   primitives that the other pages reuse, because home.css is first in the
   cascade order set by _build/rebuild-css.sh.
   ========================================================================== */

/* ------------------------------------------------------------------ hero */

.ax-home-hero {
  position: relative;
  overflow: hidden;
  padding: 140px var(--ax-pad) 120px;
  text-align: center;
}

.ax-home-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* No max-width on the headline: the 880px container is what wraps it, and a
   character limit here forced "EXPERT SOLUTIONS." onto two lines. */
.ax-home-hero-lead { max-width: 620px; }

.ax-home-hero-row { display: flex; gap: 18px; margin-top: 10px; }

.ax-home-hero-meta {
  margin: 4px 0 0;
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--ax-text-dim);
}
.ax-home-hero-meta span { margin: 0 10px; color: var(--ax-gold-600); }
.ax-home-hero-meta a { color: var(--ax-text-dim); }
.ax-home-hero-meta a:hover { color: var(--ax-gold-400); }

/* The brand's gold arc, bleeding off the top right. Decorative only. */
.ax-arc { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ax-arc svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ax-arc-glow {
  position: absolute;
  top: 60px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 160, 23, .10) 0%, transparent 65%);
}

/* --------------------------------------------------------- shared grids */

.ax-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ax-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ax-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

/* ---------------------------------------------------------- trust strip */

.ax-home-trust { padding-block: 56px; }

.ax-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ax-trust-item { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ax-trust-item svg { flex: none; color: var(--ax-gold-500); }
.ax-trust-item span { font-size: 14.5px; letter-spacing: .02em; color: var(--ax-text); }

/* -------------------------------------------------------------- services */

.ax-home-services { padding: 72px var(--ax-pad) 96px; }
.ax-svc-grid { gap: 24px; }

.ax-svc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 36px 28px;
}
.ax-svc-card p { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.65; color: var(--ax-text-dim); text-wrap: pretty; }

/* min-height reproduces the design's 45px link box (its text sits at the top),
   and incidentally gives the link a comfortable tap target. */
.ax-card-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 45px;
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ax-gold-500);
}
.ax-card-link svg { margin-top: 3px; }
.ax-card-link svg { transition: transform var(--ax-dur) var(--ax-ease); }
.ax-card-link:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------------ steps */

.ax-steps-grid { gap: 40px; }

.ax-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.ax-step-num {
  font-family: var(--ax-font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #FFE47E 0%, #D4A017 60%, #8A5E0A 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ax-gold-500);
}
.ax-step p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ax-text-dim); text-wrap: pretty; }

/* ------------------------------------------------------------------- why */

/* Two columns in the design: the heading block sits left, the benefit list
   right at double width. Not a three-across grid. */
.ax-why-cols {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 72px;
  align-items: start;
}
/* This one heading tightens its leading in the design; the others do not. */
.ax-home-why .ax-h2 { line-height: 1.35; }

.ax-why-list { display: flex; flex-direction: column; gap: 44px; }

.ax-benefit { display: flex; flex-direction: column; gap: 8px; }
.ax-benefit p {
  margin: 0;
  max-width: 560px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ax-text-dim);
  text-wrap: pretty;
}

/* ---------------------------------------------------------- testimonials */

.ax-home-quotes { padding: 24px var(--ax-pad) 110px; }

.ax-quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 34px 30px;
}
.ax-quote-mark {
  font-family: var(--ax-font-display);
  font-size: 44px;
  line-height: .6;
  color: var(--ax-gold-500);
  margin-top: 10px;
}
.ax-quote blockquote { margin: 0; }
.ax-quote blockquote p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  font-style: italic;
  color: var(--ax-text);
  text-wrap: pretty;
}
.ax-quote-name {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ax-text-dim);
}

/* -------------------------------------------------------------- CTA band */

/* Full bleed, with its own hairlines and a soft gold glow behind. */
.ax-ctaband {
  position: relative;
  padding: 88px var(--ax-pad);
  text-align: center;
}
.ax-ctaband-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 160, 23, .6) 50%, transparent 100%);
}
.ax-ctaband-line--top { top: 0; }
.ax-ctaband-line--bottom { bottom: 0; }
.ax-ctaband-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(212, 160, 23, .06), transparent 70%);
}
.ax-ctaband-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.ax-ctaband-h { font-size: var(--ax-h2-cta); font-weight: 700; letter-spacing: .1em; }
.ax-ctaband-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }

/* ----------------------------------------------------------- breakpoints */

@media (max-width: 1119px) {
  .ax-grid-4, .ax-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ax-home-hero { padding-block: 100px 88px; }
  .ax-home-services { padding-block: 56px 72px; }
  .ax-home-quotes { padding-block: 24px 80px; }

  .ax-why-cols { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ax-ctaband { padding-block: 72px; }
}

@media (max-width: 659px) {
  .ax-grid-4, .ax-grid-3, .ax-grid-2, .ax-trust-grid { grid-template-columns: minmax(0, 1fr); }

  .ax-home-hero { padding-block: 72px; }
  .ax-home-hero-row { flex-direction: column; align-self: stretch; }
  .ax-home-hero-row .ax-btn { width: 100%; }
  .ax-home-hero-meta { line-height: 2.1; }
  .ax-home-hero-meta span { margin: 0 6px; }

  .ax-trust-item { justify-content: flex-start; }
  .ax-steps-grid { gap: 32px; }
  .ax-step-num { font-size: 40px; }
  .ax-why-list { gap: 32px; }

  .ax-ctaband { padding-block: 64px; }
  .ax-ctaband-row { flex-direction: column; align-self: stretch; width: 100%; gap: 12px; }
  .ax-ctaband-row .ax-btn { width: 100%; }
}

/* --- individual-taxes.css --- */
/* ==========================================================================
   INDIVIDUAL TAXES
   Also defines the shared inner-page hero (.ax-phero), the narrow section
   widths, the centred text block and the checklist, all reused by Business
   Taxes, About, Contact and Insights.
   ========================================================================== */

/* ------------------------------------------- shared inner-page hero */

.ax-phero {
  position: relative;
  overflow: hidden;
  padding: 88px var(--ax-pad) 76px;
  text-align: center;
}
.ax-phero-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
/* Inner-page headlines run a looser line than the homepage hero. */
.ax-phero .ax-h1 { line-height: 1.3; }
.ax-phero-lead { max-width: 640px; }

/* --------------------------------------- shared narrow section widths */

.ax-narrow-880 { max-width: 880px; padding-block: 88px; text-align: center; }
.ax-narrow-820 { max-width: 820px; padding: 88px var(--ax-pad) 110px; }

.ax-section-head--48 { margin-bottom: 48px; }

/* A centred eyebrow + heading + rule + paragraph + button stack. */
.ax-centered-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.ax-block-copy {
  margin: 0;
  max-width: 600px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ax-text-dim);
  text-wrap: pretty;
}

/* ------------------------------------------------ audience cards */

.ax-ind-aud { padding: 80px var(--ax-pad) 96px; }

.ax-aud-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 32px 28px;
}
.ax-aud-card .ax-h3 { font-size: 16px; letter-spacing: .07em; }
.ax-aud-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ax-text-dim); text-wrap: pretty; }

/* -------------------------------------------------- what's included */

.ax-inc-cols {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: center;
}
.ax-inc-lead { font-size: 15.5px; }

.ax-inc-panel {
  background: var(--ax-black-800);
  border: 1px solid var(--ax-black-600);
  border-radius: var(--ax-radius-md);
  padding: 40px 44px;
}

.ax-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ax-check-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ax-text);
}
.ax-check-item svg { flex: none; margin-top: 1px; color: var(--ax-gold-500); }

/* -------------------------------------------------------- breakpoints */

@media (max-width: 1119px) {
  .ax-phero { padding-block: 72px 60px; }
  .ax-ind-aud { padding-block: 64px 72px; }
  .ax-inc-cols { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ax-narrow-880 { padding-block: 72px; }
  .ax-narrow-820 { padding-block: 72px 88px; }
}

@media (max-width: 659px) {
  .ax-phero { padding-block: 56px 48px; }
  .ax-phero-inner .ax-btn { width: 100%; }
  .ax-check-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ax-inc-panel { padding: 28px 22px; }
  .ax-centered-block .ax-btn { width: 100%; }
  .ax-faq-q { padding: 18px 20px; }
  .ax-faq-a { padding: 0 20px 20px; }
}

/* --- business-taxes.css --- */
/* ==========================================================================
   BUSINESS TAXES
   ========================================================================== */

.ax-biz-hero { padding-bottom: 64px; }

/* --------------------------------------------------------------- pills */

.ax-biz-types { max-width: var(--ax-container); padding: 0 var(--ax-pad) 72px; }

.ax-pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ax-pill {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  border: 1px solid var(--ax-black-600);
  border-radius: var(--ax-radius-pill);
  background: var(--ax-black-800);
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--ax-text-dim);
}

/* ------------------------------------------- alternating service blocks */

.ax-biz-svc { max-width: 1080px; padding-block: 88px; }
.ax-bizsvc-list { display: flex; flex-direction: column; gap: 64px; }

.ax-bizsvc {
  display: flex;
  align-items: center;
  gap: 52px;
}
.ax-bizsvc--flip { flex-direction: row-reverse; }
.ax-bizsvc--flip .ax-bizsvc-body { text-align: right; }
.ax-bizsvc--flip .ax-bizsvc-rule { margin-left: auto; }
.ax-bizsvc--flip .ax-bizsvc-body p { margin-left: auto; }

.ax-bizsvc-icon { flex: none; display: grid; place-items: center; }

.ax-bizsvc-body h3 { font-size: 22px; letter-spacing: .08em; }
.ax-bizsvc-body p {
  margin: 0;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ax-text-dim);
  text-wrap: pretty;
}

.ax-bizsvc-rule {
  width: 72px;
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(90deg, rgba(212, 160, 23, .75) 0%, transparent 100%);
}
.ax-bizsvc--flip .ax-bizsvc-rule { background: linear-gradient(270deg, rgba(212, 160, 23, .75) 0%, transparent 100%); }

/* -------------------------------------------------- start your business */

.ax-biz-start { padding: 24px var(--ax-pad) 96px; }

.ax-startcard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 56px 48px;
  text-align: center;
  background: var(--ax-black-800);
  border: 1px solid var(--ax-black-600);
  border-radius: var(--ax-radius-md);
}
.ax-startcard-h { font-size: 28px; letter-spacing: .09em; }

/* -------------------------------------------------------- breakpoints */

@media (max-width: 1119px) {
  .ax-biz-svc { padding-block: 64px; }
  .ax-bizsvc-list { gap: 48px; }
  .ax-biz-start { padding-block: 24px 72px; }
}

@media (max-width: 659px) {
  /* The designs collapse the alternating rows to a single left-aligned column
     at this width. Below it the row layout stops reading as intentional. */
  .ax-bizsvc,
  .ax-bizsvc--flip { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ax-bizsvc--flip .ax-bizsvc-body { text-align: left; }
  .ax-bizsvc--flip .ax-bizsvc-rule,
  .ax-bizsvc-rule { margin-left: 0; margin-right: auto; background: linear-gradient(90deg, rgba(212, 160, 23, .75) 0%, transparent 100%); }
  .ax-bizsvc--flip .ax-bizsvc-body p { margin-left: 0; }
  .ax-bizsvc-body h3 { font-size: 19px; }

  .ax-startcard { padding: 32px 22px; }
  .ax-startcard .ax-btn { width: 100%; }
}

/* --- about.css --- */
/* ==========================================================================
   ABOUT
   ========================================================================== */

.ax-ab-hero { padding: 96px var(--ax-pad) 80px; }

/* -------------------------------------------------------- founder story */

.ax-ab-story { max-width: 1120px; padding-block: 96px; }

.ax-story-cols {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 72px;
  align-items: center;
}

/* The portrait sits inside a gold hairline frame offset 14px outside it. */
.ax-portrait-wrap { position: relative; width: 380px; }
.ax-portrait-frame {
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(212, 160, 23, .45);
  border-radius: var(--ax-radius-md);
  pointer-events: none;
}
.ax-portrait {
  width: 380px;
  height: 460px;
  border-radius: var(--ax-radius-md);
  overflow: hidden;
  border: 1px solid var(--ax-black-600);
  background: var(--ax-black-800);
}
.ax-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No headshot supplied yet: show the brand mark rather than an empty box. */
.ax-portrait-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  opacity: .22;
}
.ax-portrait-empty img { width: 96px; height: 96px; object-fit: contain; }

.ax-story-body { display: flex; flex-direction: column; gap: 14px; }
.ax-story-h2 {
  font-size: 26px;
  letter-spacing: .09em;
  background: var(--ax-silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ax-silver-300);
}
.ax-story-text {
  margin-top: 6px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ax-text-dim);
  text-wrap: pretty;
}

/* --------------------------------------------------------- stats strip */

.ax-ab-stats { padding-block: 64px; }
.ax-stats-grid { gap: 32px; }

/* No card chrome here. The design sets these on the page background, with the
   icon in a gold ring instead of a box. Decided 2026-07-28. */
.ax-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.ax-stat .ax-icon-circle { --ax-ic-size: 54px; }
.ax-stat svg { color: var(--ax-gold-500); }
.ax-stat-num {
  font-family: var(--ax-font-display);
  font-size: 30px;
  font-weight: 700;
  /* The body's 1.65 leading would add ~20px of dead space under the number and
     push the whole item taller than the design. The number is a single line. */
  line-height: 1;
  letter-spacing: .04em;
  background: linear-gradient(180deg, #FFE47E 0%, #D4A017 60%, #8A5E0A 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ax-gold-500);
}
.ax-stat-label { font-size: 14px; line-height: 1.5; color: var(--ax-text-dim); }

/* -------------------------------------------------------------- values */

.ax-ab-values { padding-block: 96px; }
.ax-values-grid { gap: 48px; }

.ax-value { text-align: center; display: flex; flex-direction: column; gap: 10px; }
/* The rule has a fixed 40px width, so in a column flex container it would sit
   hard left. text-align cannot centre it, only auto margins can. */
.ax-value .ax-rule-40 { margin-inline: auto; }
/* Silver, not gold. Same treatment as the founder-story heading above and the
   Home "Why AMIX Pro" benefits, which is the house style for this kind of
   secondary heading. Decided 2026-07-28. */
.ax-value h3 {
  font-size: 20px;
  letter-spacing: .1em;
  background: var(--ax-silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ax-silver-300);
}
.ax-value p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ax-text-dim); text-wrap: pretty; }

/* -------------------------------------------------------- service area */

.ax-ab-area { padding: 0 var(--ax-pad) 110px; }

.ax-area-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 36px 44px;
  background: var(--ax-black-800);
  border: 1px solid var(--ax-black-600);
  border-radius: var(--ax-radius-md);
  text-align: center;
  font-size: 15.5px;
  color: var(--ax-text-dim);
}
.ax-area-line svg { flex: none; color: var(--ax-gold-500); }

/* --------------------------------------------------------- breakpoints */

@media (max-width: 1119px) {
  .ax-ab-hero { padding-block: 72px 60px; }
  .ax-ab-story { padding-block: 72px; }
  .ax-story-cols { grid-template-columns: minmax(0, 1fr); gap: 44px; justify-items: center; }
  .ax-story-body { text-align: center; align-items: center; }
  .ax-ab-values { padding-block: 72px; }
  .ax-values-grid { gap: 40px; }
  .ax-ab-area { padding-bottom: 80px; }
}

@media (max-width: 659px) {
  .ax-portrait-wrap,
  .ax-portrait { width: 100%; max-width: 340px; }
  .ax-portrait { height: 400px; }
  .ax-area-line { flex-direction: column; padding: 28px 22px; }
}

/* --- contact.css --- */
/* ==========================================================================
   CONTACT
   ========================================================================== */

.ax-ct-hero { padding-bottom: 64px; }

.ax-ct-main { padding: 16px var(--ax-pad) 96px; }

.ax-contact-cols {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 32px;
  align-items: start;
}

/* ---------------------------------------------------------------- form */

.ax-contact-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 44px 44px 40px;
  background: var(--ax-black-800);
  border: 1px solid var(--ax-black-600);
  border-radius: var(--ax-radius-md);
}
.ax-contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ax-contact-form .ax-btn { width: 100%; }
.ax-contact-privacy {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ax-text-mute);
}

.ax-contact-formcol .ax-form-success h3 { margin: 0; }
.ax-contact-formcol .ax-form-success p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ax-text-dim); }

/* -------------------------------------------------------- contact card */

.ax-contact-card {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 36px 34px;
  background: var(--ax-black-800);
  border: 1px solid var(--ax-black-600);
  border-radius: var(--ax-radius-md);
}

.ax-cc-item { display: flex; gap: 16px; }
.ax-cc-item > svg { flex: none; margin-top: 3px; color: var(--ax-gold-500); }
.ax-cc-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ax-cc-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ax-silver-400);
}
.ax-cc-value { font-size: 15.5px; color: var(--ax-text); word-break: break-word; }
a.ax-cc-value:hover { color: var(--ax-gold-400); }

/* The phone number is the loudest thing on the card in the design: big Cinzel
   in the gold gradient, not body text. */
.ax-cc-value--phone {
  font-family: var(--ax-font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .04em;
  background: linear-gradient(180deg, #FFE47E 0%, #D4A017 60%, #8A5E0A 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ax-gold-500);
}
.ax-cc-sub { font-size: 13.5px; line-height: 1.6; color: var(--ax-text-dim); }

.ax-cc-promise {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--ax-black-600);
  font-size: 14px;
  color: var(--ax-text-dim);
}
.ax-cc-promise svg { flex: none; color: var(--ax-success); }

/* ------------------------------------------------------ what happens next */

.ax-ct-steps { max-width: 1080px; padding: 88px var(--ax-pad) 100px; }
.ax-ctsteps-grid { gap: 48px; }

/* ------------------------------------------------------------- outro band */

.ax-ct-outro { position: relative; padding: 56px var(--ax-pad); text-align: center; }
.ax-ct-outro-text {
  margin: 0;
  font-family: var(--ax-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ax-text);
}
.ax-ct-outro-text span { margin-left: .5em; }

/* --------------------------------------------------------- breakpoints */

@media (max-width: 1119px) {
  .ax-ct-hero { padding-block: 72px 48px; }
  .ax-contact-cols { grid-template-columns: minmax(0, 1fr); }
  .ax-ct-steps { padding-block: 72px 80px; }
  .ax-ctsteps-grid { gap: 40px; }
}

@media (max-width: 659px) {
  .ax-contact-form { padding: 26px 22px 24px; }
  .ax-contact-form-row { grid-template-columns: minmax(0, 1fr); }
  .ax-contact-card { padding: 26px 22px; }
  .ax-cc-value--phone { font-size: 24px; }
  .ax-ct-outro-text { font-size: 16px; }
}

/* --- insights.css --- */
/* ==========================================================================
   INSIGHTS index. The article card is shared with the "related" row on a
   single article, so it lives here rather than in article.css.
   ========================================================================== */

.ax-insights-page .ax-phero { padding-bottom: 64px; }

.ax-ins-section { max-width: var(--ax-container-wide); padding: 64px var(--ax-pad) 110px; }
.ax-ins-grid { gap: 24px; align-items: stretch; }

/* Padding-top is 0 in the design: a gold accent bar sits flush at the card top. */
.ax-ins-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  box-sizing: border-box;
  padding: 0 30px 30px;
  overflow: hidden;
}
.ax-ins-card::before {
  content: "";
  display: block;
  height: 2px;
  margin: 0 -30px 28px;
  background: var(--ax-gold-grad);
  opacity: .5;
  transition: opacity var(--ax-dur) var(--ax-ease);
}
.ax-ins-card:hover::before { opacity: 1; }
.ax-ins-card:hover .ax-ins-title { color: var(--ax-gold-400); }

.ax-ins-tag {
  align-self: flex-start;
  padding: 5px 12px;
  border: 1px solid rgba(212, 160, 23, .45);
  border-radius: var(--ax-radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ax-gold-500);
}

.ax-ins-title {
  margin: 0;
  font-family: var(--ax-font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ax-text);
  transition: color var(--ax-dur) var(--ax-ease);
}

.ax-ins-sum {
  margin: 0;
  flex: 1;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ax-text-dim);
  text-wrap: pretty;
}

.ax-ins-meta {
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ax-text-mute);
}
.ax-ins-meta span { margin: 0 4px; }

.ax-ins-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 48px 0;
  text-align: center;
  color: var(--ax-text-dim);
}

@media (max-width: 1119px) {
  .ax-ins-section { padding-block: 48px 80px; }
}

/* A card with a featured image drops the gold accent bar and uses the photo. */
.ax-ins-card.has-thumb::before { display: none; }
.ax-ins-thumb {
  display: block;
  margin: 0 -30px 22px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ax-black-700);
}
.ax-ins-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- article.css --- */
/* ==========================================================================
   INSIGHTS ARTICLE
   Long-form is the one deliberate exception to the site type scale: 17px body
   at 1.8 line height, because a 3000 word tax explainer at 15px is punishing.
   ========================================================================== */

.ax-article {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) var(--ax-pad) 0;
}

/* ---------------------------------------------------------------- head */

.ax-article-head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }

.ax-article-back {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ax-text-dim);
}
.ax-article-back:hover { color: var(--ax-gold-400); }

.ax-article-h1 { font-size: clamp(28px, 3.4vw, 46px); text-transform: none; letter-spacing: .02em; }

.ax-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 18px 0;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--ax-black-600);
  border-bottom: 1px solid var(--ax-black-600);
  font-size: 13.5px;
  color: var(--ax-text-mute);
}
/* The byline carries the credential, which is the E-E-A-T signal on YMYL
   content. It gets the gold, not the dates. */
.ax-article-by { color: var(--ax-gold-500); font-weight: 500; }

/* ---------------------------------------------------------------- body */

.ax-article-body { padding: clamp(28px, 3.5vw, 44px) 0; font-size: 17px; line-height: 1.8; color: var(--ax-text-dim); }
.ax-article-body > *:first-child { margin-top: 0; }
.ax-article-body p { margin: 0 0 1.4em; }
.ax-article-body strong { color: var(--ax-text); font-weight: 600; }

.ax-article-body h2 {
  margin: 2em 0 .7em;
  font-family: var(--ax-font-display);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ax-text);
}
.ax-article-body h3 {
  margin: 1.8em 0 .6em;
  font-family: var(--ax-font-display);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 600;
  color: var(--ax-gold-500);
}

.ax-article-body ul,
.ax-article-body ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.ax-article-body li { margin-bottom: .5em; }
.ax-article-body li::marker { color: var(--ax-gold-500); }

.ax-article-body a { text-decoration: underline; text-underline-offset: 3px; }

.ax-article-body blockquote {
  margin: 1.8em 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--ax-gold-600);
  font-family: var(--ax-font-display);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ax-text);
}
.ax-article-body blockquote p:last-child { margin-bottom: 0; }

.ax-article-body img { border-radius: var(--ax-radius-md); }

.ax-article-body hr {
  margin: 2.4em 0;
  border: 0;
  height: 1px;
  background: var(--ax-gold-rule);
}

/* -------------------------------------------------------- in-article CTA */

.ax-article-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 8px 0 0;
  padding: clamp(24px, 3vw, 34px);
  background: var(--ax-black-800);
  border: 1px solid var(--ax-black-600);
  border-left: 2px solid var(--ax-gold-500);
  border-radius: var(--ax-radius-md);
}
.ax-article-cta h3 { margin: 0; color: var(--ax-gold-500); }
.ax-article-cta p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ax-text-dim); }

/* ------------------------------------------------------------- related */

.ax-article-related { padding-top: clamp(48px, 6vw, 80px); }
.ax-article-related > h2 { margin: 0 0 32px; text-align: center; }

@media (max-width: 659px) {
  .ax-article-body { font-size: 16px; }
  .ax-article-cta .ax-btn { width: 100%; }
}

/* ------------------------------------------------------- featured image */

.ax-article-hero { margin: clamp(24px, 3vw, 36px) 0 0; }
.ax-article-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ax-radius-md);
  border: 1px solid var(--ax-black-600);
}

/* --- 404.css --- */
/* ==========================================================================
   404
   ========================================================================== */

.ax-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 140px) var(--ax-pad);
  text-align: center;
}
.ax-404 img { width: 96px; height: auto; opacity: .9; }
.ax-404 p { margin: 0; color: var(--ax-text-dim); }
.ax-404-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 659px) {
  .ax-404-row { flex-direction: column; align-self: stretch; width: 100%; }
  .ax-404-row .ax-btn { width: 100%; }
}