/* ==========================================================================
   Axis Living — theme.css
   Design language: the monogram is a coordinate axis (navy diagonal + gold
   right angle). The page inherits that: one continuous vertical gold rail
   at a fixed offset, with horizontal ticks where content registers against
   it. That rail is the only decorative element in the theme. Everything
   else is spacing, weight and rule.
   ========================================================================== */

:root {
  --ax-rail: clamp(1.25rem, 5vw, 3.5rem);
  --ax-gutter: clamp(1.25rem, 5vw, 3.5rem);
  --ax-max: 1180px;
  --ax-measure: 66ch;
  --ax-t: 180ms cubic-bezier(.2, .6, .3, 1);
  --ax-navy: #0D1B2A;
  --ax-navy-raised: #16263A;
  --ax-gold: #B89B5E;
  --ax-warm: #F7F5F2;
  --ax-charcoal: #2B2E34;
  --ax-slate: #AEB4BB;
  --ax-rule: #DCD8D1;

  /* Ink tokens. The brand gold and slate are correct for ticks, borders,
     buttons and text on navy, but both fail WCAG AA as small text on the
     warm-white ground (2.45:1 and 1.92:1). These are the same hues carried
     down to a legible value — used ONLY for small text on light. */
  --ax-gold-ink: #7A6432;   /* 5.22:1 on warm white */
  --ax-ink-muted: #656C75;  /* 4.88:1 on warm white */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-variant-numeric: proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   THE RAIL — one continuous vertical line, above all sections so it reads
   through the navy bands as well as the light ones. Never interactive.
   -------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--ax-rail);
  width: 1px;
  background: rgba(184, 155, 94, .38);
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 781px) {
  body::before { display: none; }
}

/* Registration tick: the horizontal stub that hangs a heading off the rail. */
.ax-tick {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--ax-gold);
  margin-bottom: var(--wp--preset--spacing--30);
}

.ax-tick--long { width: 56px; }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.wp-site-blocks { position: relative; z-index: 1; }

.ax-inner {
  width: 100%;
  max-width: var(--ax-max);
  margin-inline: auto;
  padding-inline: var(--ax-gutter);
}

.ax-measure { max-width: var(--ax-measure); }
.ax-measure-short { max-width: 46ch; }

.ax-section { padding-block: var(--wp--preset--spacing--60); }
.ax-section--major { padding-block: var(--wp--preset--spacing--70); }
.ax-section--tight { padding-block: var(--wp--preset--spacing--50); }

.ax-section + .ax-section { border-top: 1px solid var(--ax-rule); }
.ax-section--dark + .ax-section,
.ax-section + .ax-section--dark { border-top: 0; }

.ax-section--dark {
  background: var(--ax-navy);
  color: rgba(247, 245, 242, .82);
}

:is(h1, h2, h3) { text-wrap: balance; }

.ax-section--dark :is(h1, h2, h3, h4, h5, h6) { color: var(--ax-warm); }
.ax-section--dark a:not(.wp-element-button) { color: var(--ax-warm); }
.ax-section--dark a:not(.wp-element-button):hover { color: var(--ax-gold); }

/* Eyebrow: sentence case, gold, never tracked-out caps. */
.ax-eyebrow {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: var(--ax-gold-ink);
  margin: 0 0 var(--wp--preset--spacing--20);
  letter-spacing: 0;
}

.ax-section--dark .ax-eyebrow,
.ax-hero .ax-eyebrow { color: var(--ax-gold); }

.ax-lede {
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.5;
  max-width: var(--ax-measure);
  color: var(--ax-charcoal);
}

.ax-section--dark .ax-lede { color: rgba(247, 245, 242, .8); }

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.ax-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 245, 242, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--ax-rule);
}

.ax-header .ax-inner {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  min-height: 72px;
}

.ax-brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  color: var(--ax-navy);
  flex: 0 0 auto;
}

.ax-brand svg,
.ax-brand img { width: 26px; height: auto; display: block; }

.ax-brand-name {
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.0625rem;
  line-height: 1;
}

.ax-brand-name span {
  display: block;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ax-slate);
  margin-top: .2rem;
}

.ax-header-spacer { flex: 1 1 auto; }

.ax-header nav a { color: var(--ax-navy); }
.ax-header nav a:hover { color: var(--ax-gold); }

.ax-lang {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  font-size: var(--wp--preset--font-size--fine);
  color: var(--ax-slate);
}

.ax-lang a { text-decoration: none; color: var(--ax-slate); }
.ax-lang a:hover,
.ax-lang .current-lang { color: var(--ax-navy); font-weight: 600; }

/* --------------------------------------------------------------------------
   HERO — the monogram is enlarged and cropped at the right edge, used as
   architecture rather than as a logo. Static; no entrance animation.
   -------------------------------------------------------------------------- */
.ax-hero {
  position: relative;
  background: var(--ax-navy);
  color: var(--ax-warm);
  overflow: hidden;
  padding-block: clamp(4.5rem, 11vw, 9rem);
}

.ax-hero .ax-inner { position: relative; z-index: 2; }

.ax-hero-mark {
  position: absolute;
  right: -6%;
  bottom: -14%;
  width: min(52%, 640px);
  opacity: .085;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.ax-hero-mark svg { width: 100%; height: auto; display: block; }

.ax-hero h1 {
  font-size: var(--wp--preset--font-size--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ax-warm);
  max-width: 19ch;
  margin: 0 0 var(--wp--preset--spacing--30);
}

.ax-hero .ax-lede {
  color: rgba(247, 245, 242, .78);
  max-width: 52ch;
  margin-bottom: var(--wp--preset--spacing--40);
}

.ax-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.ax-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .95rem 1.6rem;
  border-radius: 2px;
  border: 1px solid var(--ax-gold);
  background: var(--ax-gold);
  color: var(--ax-navy);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--ax-t), color var(--ax-t), border-color var(--ax-t);
  cursor: pointer;
}

.ax-btn:hover { background: #C7AC71; border-color: #C7AC71; color: var(--ax-navy); }

.ax-btn--ghost {
  background: transparent;
  color: var(--ax-navy);
  border-color: currentColor;
}

.ax-btn--ghost:hover { background: var(--ax-navy); color: var(--ax-warm); border-color: var(--ax-navy); }

.ax-section--dark .ax-btn--ghost,
.ax-hero .ax-btn--ghost { color: rgba(247, 245, 242, .9); }

.ax-section--dark .ax-btn--ghost:hover,
.ax-hero .ax-btn--ghost:hover { background: var(--ax-warm); color: var(--ax-navy); border-color: var(--ax-warm); }

.ax-btn svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ax-gold);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   TRUST STRIP
   -------------------------------------------------------------------------- */
.ax-trust {
  background: var(--ax-navy-raised);
  color: rgba(247, 245, 242, .62);
  padding-block: var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--fine);
}

.ax-trust .ax-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  align-items: center;
}

.ax-trust-item { display: inline-flex; align-items: center; gap: .5rem; }
.ax-trust-item::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--ax-gold);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   GRIDS — no cards. Columns separate by rule and space only.
   -------------------------------------------------------------------------- */
.ax-grid {
  display: grid;
  gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  margin-top: var(--wp--preset--spacing--50);
}

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

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

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

.ax-item { border-top: 1px solid var(--ax-rule); padding-top: var(--wp--preset--spacing--30); min-height: 100%; }
.ax-section--dark .ax-item { border-top-color: rgba(247, 245, 242, .16); }

.ax-item h3 { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--h4); }
.ax-item p { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.6; }

.ax-item--accent { border-top-color: var(--ax-gold); border-top-width: 2px; }

/* Numbered steps — used ONLY where the content is genuinely a sequence. */
.ax-steps { counter-reset: ax-step; }

.ax-step { border-top: 1px solid var(--ax-rule); padding-top: var(--wp--preset--spacing--30); }
.ax-step::before {
  counter-increment: ax-step;
  content: counter(ax-step);
  display: block;
  font-size: var(--wp--preset--font-size--fine);
  font-weight: 700;
  color: var(--ax-gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: .75rem;
}

/* --------------------------------------------------------------------------
   PROPERTY CARDS
   -------------------------------------------------------------------------- */
.ax-property { display: block; text-decoration: none; color: inherit; }

.ax-property-media {
  aspect-ratio: 4 / 3;
  background: var(--ax-navy-raised);
  overflow: hidden;
  margin-bottom: var(--wp--preset--spacing--20);
  position: relative;
}

.ax-property-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(.2, .6, .3, 1);
}

.ax-property:hover .ax-property-media img { transform: scale(1.03); }

.ax-property h3 { font-size: var(--wp--preset--font-size--h4); margin: 0 0 .25rem; }

.ax-property-meta {
  font-size: var(--wp--preset--font-size--fine);
  color: var(--ax-ink-muted);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* Placeholder state while real photography is pending. */
.ax-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(247, 245, 242, .55);
  font-size: var(--wp--preset--font-size--fine);
  background:
    repeating-linear-gradient(135deg, rgba(247,245,242,.04) 0 10px, transparent 10px 20px),
    var(--ax-navy-raised);
}

/* --------------------------------------------------------------------------
   KNOWLEDGE BASE — regulatory posts read as dated records, not blog cards.
   -------------------------------------------------------------------------- */
.ax-record { border-bottom: 1px solid var(--ax-rule); padding-block: var(--wp--preset--spacing--30); }

.ax-record:first-child { border-top: 1px solid var(--ax-rule); }

.ax-record a { text-decoration: none; }
.ax-record a:hover { color: var(--ax-gold); }

.ax-record h3 { font-size: var(--wp--preset--font-size--h4); margin: 0 0 .4rem; }

.ax-record-meta {
  font-size: var(--wp--preset--font-size--fine);
  color: var(--ax-ink-muted);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 0 0 .5rem;
}

.ax-stamp {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--wp--preset--font-size--fine);
  font-variant-numeric: tabular-nums;
  color: var(--ax-charcoal);
  background: var(--wp--preset--color--gold-wash, #F0E9DA);
  border-left: 2px solid var(--ax-gold);
  padding: .5rem .75rem;
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.ax-form { max-width: 560px; }

.ax-field { margin-bottom: var(--wp--preset--spacing--30); }

.ax-field label {
  display: block;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  margin-bottom: .4rem;
  color: var(--ax-navy);
}

.ax-section--dark .ax-field label { color: var(--ax-warm); }

.ax-field :is(input, select, textarea) {
  width: 100%;
  font: inherit;
  font-size: var(--wp--preset--font-size--small);
  color: var(--ax-charcoal);
  background: #fff;
  border: 1px solid var(--ax-rule);
  border-radius: 2px;
  min-height: 48px;
  padding: .75rem .85rem;
  transition: border-color var(--ax-t);
}

.ax-field :is(input, select, textarea):focus {
  border-color: var(--ax-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(184, 155, 94, .18);
}

.ax-field textarea { min-height: 120px; resize: vertical; }

.ax-consent {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: var(--wp--preset--font-size--fine);
  color: var(--ax-ink-muted);
  line-height: 1.5;
}

.ax-section--dark .ax-consent { color: rgba(247, 245, 242, .62); }

.ax-consent input { width: auto; margin-top: .2rem; flex: 0 0 auto; }

.ax-form-note {
  font-size: var(--wp--preset--font-size--fine);
  color: var(--ax-ink-muted);
  margin-top: var(--wp--preset--spacing--20);
}

.ax-section--dark .ax-form-note { color: rgba(247, 245, 242, .62); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.ax-footer {
  background: var(--ax-navy);
  color: rgba(247, 245, 242, .68);
  padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--small);
}

.ax-footer :is(h2, h3, h4) {
  color: var(--ax-warm);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  margin: 0 0 var(--wp--preset--spacing--20);
}

.ax-footer a { color: rgba(247, 245, 242, .68); text-decoration: none; }
.ax-footer a:hover { color: var(--ax-gold); }

.ax-footer ul { list-style: none; margin: 0; padding: 0; }
.ax-footer li { margin-bottom: .5rem; }

.ax-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
}

@media (max-width: 900px) { .ax-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ax-footer-grid { grid-template-columns: 1fr; } }

.ax-footer-legal {
  margin-top: var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid rgba(247, 245, 242, .14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  justify-content: space-between;
  font-size: var(--wp--preset--font-size--fine);
  color: rgba(247, 245, 242, .5);
}

.ax-footer-legal p { margin: 0; }

/* --------------------------------------------------------------------------
   EDITORIAL
   -------------------------------------------------------------------------- */
.ax-prose { max-width: var(--ax-measure); }
.ax-prose :is(h2, h3) { margin-top: var(--wp--preset--spacing--50); }
.ax-prose h2 + p, .ax-prose h3 + p { margin-top: var(--wp--preset--spacing--20); }
.ax-prose table { width: 100%; border-collapse: collapse; }
.ax-prose :is(th, td) { border-bottom: 1px solid var(--ax-rule); padding: .65rem .5rem; text-align: left; }
.ax-prose th { font-weight: 700; color: var(--ax-navy); }

.ax-skip {
  position: absolute;
  left: -9999px;
}

.ax-skip:focus {
  left: var(--ax-gutter);
  top: .5rem;
  z-index: 100;
  background: var(--ax-navy);
  color: var(--ax-warm);
  padding: .6rem 1rem;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   v1.1 — additions
   ========================================================================== */

/* --------------------------------------------------------------------------
   DISTRICT QUALIFIER — sits in the hero. Deliberately NOT an income estimate:
   at this portfolio size a number would be a guess. It answers the question
   owners are actually asking right now, which is whether they are allowed to
   let at all. That answer is free to give and impossible for competitors to
   fake.
   -------------------------------------------------------------------------- */
.ax-qualifier {
  margin-top: var(--wp--preset--spacing--50);
  border-top: 1px solid rgba(184, 155, 94, .45);
  padding-top: var(--wp--preset--spacing--30);
  max-width: 620px;
}

.ax-qualifier-label {
  display: block;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: var(--ax-gold);
  margin-bottom: .6rem;
}

.ax-qualifier-row {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  align-items: stretch;
}

.ax-qualifier select {
  flex: 1 1 220px;
  font: inherit;
  font-size: var(--wp--preset--font-size--small);
  color: var(--ax-warm);
  background: rgba(247, 245, 242, .07);
  border: 1px solid rgba(247, 245, 242, .28);
  border-radius: 2px;
  min-height: 48px;
  padding: .85rem .9rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #B89B5E 50%), linear-gradient(135deg, #B89B5E 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.ax-qualifier select option { color: var(--ax-charcoal); background: #fff; }

.ax-qualifier select:focus {
  border-color: var(--ax-gold);
  outline: none;
}

.ax-qualifier-answer {
  margin-top: var(--wp--preset--spacing--30);
  border-left: 2px solid var(--ax-gold);
  padding: .85rem 1rem;
  background: rgba(184, 155, 94, .1);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
  color: rgba(247, 245, 242, .92);
}

.ax-qualifier-answer[hidden] { display: none; }

.ax-qualifier-answer strong { color: var(--ax-warm); }

.ax-qualifier-answer .ax-qualifier-status {
  display: block;
  font-weight: 700;
  color: var(--ax-gold);
  margin-bottom: .3rem;
}

.ax-qualifier-answer a { color: var(--ax-warm); }

.ax-qualifier-note {
  font-size: var(--wp--preset--font-size--fine);
  color: rgba(247, 245, 242, .5);
  margin: .7rem 0 0;
}

/* --------------------------------------------------------------------------
   AUDIENCE TABS — four owner types, one section. Pure CSS, no JS.
   -------------------------------------------------------------------------- */
.ax-tabs { margin-top: var(--wp--preset--spacing--50); }

.ax-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.ax-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--ax-rule);
}

.ax-tablist label {
  padding: .8rem 1.1rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: var(--ax-slate);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--ax-t), border-color var(--ax-t);
  user-select: none;
}

.ax-tablist label:first-of-type { padding-left: 0; }
.ax-tablist label:hover { color: var(--ax-navy); }

.ax-tabpanel { display: none; padding-top: var(--wp--preset--spacing--40); }

#ax-tab-1:checked ~ .ax-tablist label[for="ax-tab-1"],
#ax-tab-2:checked ~ .ax-tablist label[for="ax-tab-2"],
#ax-tab-3:checked ~ .ax-tablist label[for="ax-tab-3"],
#ax-tab-4:checked ~ .ax-tablist label[for="ax-tab-4"] {
  color: var(--ax-navy);
  border-bottom-color: var(--ax-gold);
}

#ax-tab-1:checked ~ .ax-tabpanels #ax-panel-1,
#ax-tab-2:checked ~ .ax-tabpanels #ax-panel-2,
#ax-tab-3:checked ~ .ax-tabpanels #ax-panel-3,
#ax-tab-4:checked ~ .ax-tabpanels #ax-panel-4 { display: block; }

.ax-tabs input[type="radio"]:focus-visible ~ .ax-tablist label[for] { outline: none; }
#ax-tab-1:focus-visible ~ .ax-tablist label[for="ax-tab-1"],
#ax-tab-2:focus-visible ~ .ax-tablist label[for="ax-tab-2"],
#ax-tab-3:focus-visible ~ .ax-tablist label[for="ax-tab-3"],
#ax-tab-4:focus-visible ~ .ax-tablist label[for="ax-tab-4"] {
  outline: 2px solid var(--ax-gold);
  outline-offset: 2px;
}

.ax-tabpanel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--50);
  align-items: start;
}

@media (max-width: 782px) { .ax-tabpanel-grid { grid-template-columns: 1fr; } }

.ax-checklist { list-style: none; margin: 0 0 var(--wp--preset--spacing--30); padding: 0; }

.ax-checklist li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .55rem;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.55;
}

.ax-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 1px;
  background: var(--ax-gold);
}

/* --------------------------------------------------------------------------
   DISTRICT TABLE — the hub page. Status is a word, not a colour, so it is
   readable to everyone and survives a black-and-white print.
   -------------------------------------------------------------------------- */
.ax-districts { width: 100%; border-collapse: collapse; margin-top: var(--wp--preset--spacing--40); }

.ax-districts :is(th, td) {
  border-bottom: 1px solid var(--ax-rule);
  padding: .7rem .5rem;
  text-align: left;
  font-size: var(--wp--preset--font-size--small);
  vertical-align: top;
}

.ax-districts th { font-weight: 700; color: var(--ax-navy); white-space: nowrap; }
.ax-districts td:first-child { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ax-status {
  display: inline-block;
  font-size: var(--wp--preset--font-size--fine);
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 2px;
  white-space: nowrap;
}

.ax-status--open    { background: var(--wp--preset--color--gold-wash, #F0E9DA); color: #6B5726; border-left: 2px solid var(--ax-gold); }
.ax-status--limited { background: #EFEFEC; color: var(--ax-charcoal); border-left: 2px solid var(--ax-slate); }
.ax-status--closed  { background: #E8E4DE; color: var(--ax-navy); border-left: 2px solid var(--ax-navy); }
.ax-status--unknown { background: transparent; color: var(--ax-slate); border-left: 2px solid var(--ax-rule); }

/* --------------------------------------------------------------------------
   ALTERNATIVE PATH — the midterm / conversion offer. Deliberately understated:
   it is a fallback, not a headline product.
   -------------------------------------------------------------------------- */
.ax-alt {
  border: 1px solid var(--ax-rule);
  border-left: 2px solid var(--ax-gold);
  padding: var(--wp--preset--spacing--40);
  background: #fff;
}

.ax-alt h3 { margin-top: 0; }
.ax-alt p:last-child { margin-bottom: 0; }

/* ==========================================================================
   v1.2 — horizontal scroll containment and the responsive pass
   ========================================================================== */

/* Wide content scrolls inside its own box so the page body never moves
   sideways. Wrap any table, code block or diagram in <div class="ax-scroll-x">. */
.ax-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.ax-scroll-x > table { min-width: 34rem; }

.ax-prose table { display: block; overflow-x: auto; max-width: 100%; }
.ax-prose table > * { min-width: 30rem; }

img, svg, video { max-width: 100%; }

/* --------------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ax-header nav,
  .ax-lang { display: none; }
}

@media (max-width: 900px) {
  /* At this width the header CTA competes with the wordmark and loses to it.
     The hero CTA is one scroll away and the footer repeats it. */
  .ax-header .ax-btn { display: none; }
  .ax-header .ax-inner { min-height: 64px; }
}

/* --------------------------------------------------------------------------
   PHONE
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .ax-cta-row { flex-direction: column; align-items: stretch; }
  .ax-cta-row .ax-btn { width: 100%; }

  .ax-qualifier { margin-top: var(--wp--preset--spacing--40); }
  .ax-qualifier-row { flex-direction: column; }
  .ax-qualifier select,
  .ax-qualifier .ax-btn { width: 100%; }

  /* Four tabs wrap to two rows and read as eight items. Scroll them instead. */
  .ax-tablist {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ax-tablist::-webkit-scrollbar { display: none; }
  .ax-tablist label { white-space: nowrap; }

  .ax-districts { min-width: 34rem; }

  .ax-alt { padding: var(--wp--preset--spacing--30); }

  .ax-footer-legal { flex-direction: column; gap: var(--wp--preset--spacing--20); }
}

/* Touch devices of any width: no hover lift, larger hit areas. */
@media (hover: none) {
  .ax-property:hover .ax-property-media img { transform: none; }
}

/* ==========================================================================
   v1.3 — owner statement
   ==========================================================================
   This is the one place a white surface with a border is correct rather than
   decorative: the component depicts a document, so it should look like a
   sheet of paper. It is not the card style returning by the back door — no
   shadow, no radius, no hover lift.
   -------------------------------------------------------------------------- */

.ax-statement {
  margin: var(--wp--preset--spacing--50) 0 0;
  background: #fff;
  border: 1px solid var(--ax-rule);
}

.ax-statement-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--20);
  padding: var(--wp--preset--spacing--30);
  border-bottom: 1px solid var(--ax-rule);
}

.ax-statement-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--wp--preset--font-size--fine);
  font-weight: 700;
  color: var(--ax-gold-ink);
  border: 1px solid var(--ax-gold);
  padding: .25rem .6rem;
}

.ax-statement-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ax-gold);
  flex: 0 0 auto;
}

.ax-statement-period {
  font-size: var(--wp--preset--font-size--fine);
  color: var(--ax-ink-muted);
  font-variant-numeric: tabular-nums;
}

.ax-statement-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--small);
}

.ax-statement-table :is(th, td) {
  padding: .7rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--ax-rule);
  white-space: nowrap;
}

.ax-statement-table thead th {
  font-size: var(--wp--preset--font-size--fine);
  font-weight: 700;
  color: var(--ax-navy);
  vertical-align: bottom;
}

.ax-statement-table .ax-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ax-statement-table .ax-num--strong { font-weight: 700; color: var(--ax-navy); }

.ax-statement-table tfoot :is(th, td) {
  border-bottom: 0;
  border-top: 2px solid var(--ax-navy);
  font-weight: 700;
  color: var(--ax-navy);
}

.ax-statement-notes {
  padding: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--ax-rule);
  background: var(--wp--preset--color--gold-wash, #F0E9DA);
}

.ax-statement-notes p {
  margin: 0 0 .6rem;
  font-size: var(--wp--preset--font-size--fine);
  line-height: 1.6;
  color: var(--ax-charcoal);
}

.ax-statement-notes p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .ax-statement-head { padding: var(--wp--preset--spacing--20); }
  .ax-statement-notes { padding: var(--wp--preset--spacing--20); }
}

/* Stat figures. Large, tabular, no animation — these are facts, not a counter. */
.ax-stat {
  font-size: var(--wp--preset--font-size--h2);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ax-navy);
  font-variant-numeric: tabular-nums;
  margin: 0 0 .5rem;
}

.ax-section--dark .ax-stat { color: var(--ax-warm); }

.ax-item .ax-stat + p { font-size: var(--wp--preset--font-size--small); color: var(--ax-ink-muted); }
