/*
  AXIS — Component layer
  UI_OVERHAUL_PLAN.md §3.2 (components), §3.3 (micro-interactions),
  §3.4 (grid), §3.5 (a11y/perf).

  THE THREE LAWS (lint these, don't just believe them):
  1. border-radius is 0 or 50% — nothing else, anywhere in this file.
  2. box-shadow only ever uses the plate tokens (hard offset, no blur).
  3. gradient only ever uses --gradient-square-face or --gradient-core-sphere.
  Every interactive element gets a 3px signal-green focus-visible ring,
  2px offset. Every clickable gets cursor:pointer and a 44px min target.
  All motion is wrapped so prefers-reduced-motion collapses it to a
  200ms opacity fade or nothing.
*/

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
  /* hidden, not clip: clip's original justification (preserving a sticky
     scroll-beacon indicator) no longer applies -- that beacon was removed.
     hidden is the more broadly reliable choice for containing the 40px
     pre-reveal offset without triggering repaint edge cases on
     scroll-driven fixed-position transforms (nav auto-hide) in mobile/
     device-emulated viewports. */
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
/* The nav is fixed; main must clear it or the hero's first line hides behind it.
   Above 479px the "Start a project" plate button (~65px tall) makes the nav
   taller than its 5rem floor, so the offset has to grow to match. */
:root { --ax-nav-h: 5rem; }
@media (min-width: 480px) {
  :root { --ax-nav-h: 6.25rem; }
}
#ax-main { padding-top: var(--ax-nav-h); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea {
  font: inherit;
  color: inherit;
  border-radius: var(--radius-square); /* Binary Radius Law: kill native UA rounding (Safari/iOS) */
  -webkit-appearance: none;
  appearance: none;
}
button { background: none; border: none; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* Universal focus law */
:focus-visible {
  outline: 3px solid var(--green-signal);
  outline-offset: 2px;
}

/* Clickables get a hand cursor + a real target, everywhere */
a, button, [role="button"], summary, label[for] {
  cursor: pointer;
}
a, button, [role="button"], input, select, textarea {
  min-height: 44px;
}

.ax-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: 1000;
  background: var(--structure);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-data);
  text-transform: uppercase;
  letter-spacing: var(--tracking-data);
}
.ax-skip-link:focus {
  top: var(--space-2);
}

/* ============ Type ============ */
.ax-display-1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-display-1);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.ax-display-2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-display-2);
  line-height: 1.02;
}
.ax-heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-heading);
  line-height: 1.1;
}
.ax-prose {
  font-family: var(--font-body);
  font-weight: 300;
  max-width: 65ch;
  color: var(--text);
}
.ax-mono {
  font-family: var(--font-data);
  font-size: var(--text-data);
  line-height: var(--line-data);
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
}

/* Width-axis animation channel target (see axis.js .ax-wdth) */
.ax-wdth {
  font-variation-settings: 'wdth' 75;
}

/* Native scroll-linked width axis. axis.js rAF-polls only where this is unsupported. */
@supports (animation-timeline: view()) {
  @keyframes ax-wdth-expand {
    from { font-variation-settings: 'wdth' var(--wdth-min, 75); }
    to   { font-variation-settings: 'wdth' var(--wdth-max, 115); }
  }
  .ax-wdth {
    animation: ax-wdth-expand linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ax-wdth { animation: none; font-variation-settings: 'wdth' 100; }
}

/* ============ Section rhythm ============ */
.ax-section {
  padding-block: var(--space-8);
}
@media (max-width: 767px) {
  .ax-section { padding-block: var(--space-6); }
}
.ax-section--compact { padding-block: var(--space-5); }
@media (max-width: 767px) {
  .ax-section--compact { padding-block: var(--space-4); }
}

/* ============ Buttons ============ */
/* The Core: a true sphere. aspect-ratio keeps radius:50% a circle, never an
   ellipse — an ellipse is not the logo's sphere. Size via --ax-core-size. */
.ax-btn-core {
  --ax-core-size: 9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ax-core-size);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--gradient-core-sphere);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.15;
  padding: var(--space-2);
  text-align: center;
  text-wrap: balance;
  position: relative;
  transition: transform var(--motion-micro-duration) var(--motion-micro-easing);
}
.ax-btn-core--sm { --ax-core-size: 4rem; font-size: 0.75rem; }
.ax-btn-core--lg { --ax-core-size: 12rem; font-size: 1.05rem; }
.ax-btn-core::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: var(--plate-1);
  opacity: 0;
  transition: opacity var(--motion-micro-duration) var(--motion-micro-easing);
  z-index: -1;
}
.ax-btn-core:hover,
.ax-btn-core:focus-visible {
  transform: translate(-4px, -4px);
}
.ax-btn-core:hover::before,
.ax-btn-core:focus-visible::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ax-btn-core:hover, .ax-btn-core:focus-visible { transform: none; }
}

.ax-btn-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border-radius: var(--radius-square);
  border: 2px solid var(--structure);
  background: transparent;
  color: var(--structure);
  font-family: var(--font-body);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.ax-btn-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--structure);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-micro-duration) var(--motion-micro-easing);
  z-index: -1;
}
.ax-btn-plate:hover,
.ax-btn-plate:focus-visible {
  color: #fff;
}
.ax-btn-plate:hover::before,
.ax-btn-plate:focus-visible::before {
  transform: scaleX(1);
}
[data-theme="dark"] .ax-btn-plate { border-color: var(--text); color: var(--text); }
[data-theme="dark"] .ax-btn-plate::before { background: var(--accent); }
[data-theme="dark"] .ax-btn-plate:hover { color: var(--navy-950); }

.ax-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-data);
  font-size: var(--text-data);
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
  color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  transition: background-size var(--motion-micro-duration) var(--motion-micro-easing);
  padding-bottom: 2px;
  min-height: 0;
}
.ax-link:hover,
.ax-link:focus-visible {
  background-size: 100% 2px;
}
.ax-link[target="_blank"]::after { content: "\2197"; }

/* ============ Module card ============ */
.ax-module {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-square);
  padding: var(--space-3);
  box-shadow: var(--plate-1);
  transition: transform var(--motion-micro-duration) var(--motion-micro-easing),
              box-shadow var(--motion-micro-duration) var(--motion-micro-easing);
}
.ax-module:hover,
.ax-module:focus-visible {
  transform: translate(-4px, -4px);
  box-shadow: var(--plate-2);
}
@media (prefers-reduced-motion: reduce) {
  .ax-module:hover, .ax-module:focus-visible { transform: none; }
}
.ax-module__index {
  font-family: var(--font-data);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.ax-module__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  margin-bottom: var(--space-1);
}
.ax-module__summary {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* ============ Quadrant grid ============ */
.ax-quadrant {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-3);
}
.ax-quadrant--dom1 > :first-child { grid-column: 1; grid-row: 1; }
.ax-quadrant--dom1 { grid-template-columns: 2fr 1fr; }
.ax-quadrant--dom2 { grid-template-columns: 1fr 2fr; }
.ax-quadrant--dom3 { grid-template-rows: 2fr 1fr; }
.ax-quadrant--dom4 { grid-template-rows: 1fr 2fr; }
@media (max-width: 1079px) {
  .ax-quadrant {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
}

/* ============ Form fields ============ */
.ax-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.ax-field label {
  font-family: var(--font-data);
  font-size: var(--text-data);
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ax-field input,
.ax-field select,
.ax-field textarea {
  border: none;
  border-bottom: 2px solid var(--border);
  border-radius: var(--radius-square);
  background: transparent;
  padding: var(--space-1) 0;
  transition: border-color var(--motion-micro-duration) var(--motion-micro-easing),
              border-width var(--motion-micro-duration) var(--motion-micro-easing);
}
.ax-field input:focus,
.ax-field select:focus,
.ax-field textarea:focus {
  border-bottom-width: 3px;
  border-bottom-color: var(--green-core);
  outline: none;
}
[data-theme="dark"] .ax-field input:focus,
[data-theme="dark"] .ax-field select:focus,
[data-theme="dark"] .ax-field textarea:focus {
  border-bottom-color: var(--green-signal);
}
.ax-field--error input,
.ax-field--error select,
.ax-field--error textarea {
  border-bottom-color: var(--danger);
}
.ax-field__message {
  font-family: var(--font-data);
  font-size: var(--text-data);
  color: var(--danger);
  display: flex;
  align-items: center;
  gap: 0.4em;
}

/* ============ Stat ============ */
.ax-stat { display: block; }
.ax-stat__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-display-2);
  color: var(--structure);
  line-height: 1;
}
[data-theme="dark"] .ax-stat__num { color: var(--text); }
.ax-stat__label {
  font-family: var(--font-data);
  font-size: var(--text-data);
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* ============ Region chip ============ */
.ax-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-square);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-data);
  font-size: var(--text-data);
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
  min-height: 0;
}
.ax-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  flex: none;
}
.ax-chip.is-active { border-color: var(--accent); }
/* Neighbouring-country capitals shown alongside Axon's own office chips —
   dimmed to match the map's context-pin treatment, not an office. */
.ax-chip--context { opacity: 0.6; }

/* ============ Spec table ============ */
.ax-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-data);
  font-size: var(--text-data);
}
.ax-spec-table th,
.ax-spec-table td {
  text-align: left;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border);
}
.ax-spec-table th {
  text-transform: uppercase;
  letter-spacing: var(--tracking-data);
  color: var(--text-muted);
}
.ax-spec-table tbody tr:hover {
  background: var(--navy-100);
}
[data-theme="dark"] .ax-spec-table tbody tr:hover {
  background: var(--plate);
}

/* ============ Data block ============ */
.ax-data {
  font-family: var(--font-data);
  font-size: var(--text-data);
  line-height: var(--line-data);
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-square);
  padding: var(--space-2);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-2);
  row-gap: 0.4em;
}
.ax-data dt { color: var(--text-muted); }
.ax-data dd { margin: 0; color: var(--text); }

/* ============ Converge reveal ============ */
/* Content is visible by default. Only when JS is alive (.ax-js) do we hide it
   for the entry animation — otherwise a script failure would leave the page
   permanently blank. Every hidden state below is scoped to .ax-js for that reason. */
.ax-reveal {
  transition: opacity var(--motion-converge-duration) var(--motion-converge-easing),
              transform var(--motion-converge-duration) var(--motion-converge-easing);
}
.ax-js .ax-reveal { opacity: 0; }
.ax-js .ax-reveal--tl { transform: translate(-40px, -40px); }
.ax-js .ax-reveal--tr { transform: translate(40px, -40px); }
.ax-js .ax-reveal--bl { transform: translate(-40px, 40px); }
.ax-js .ax-reveal--br { transform: translate(40px, 40px); }
.ax-js .ax-reveal.is-in {
  opacity: 1;
  transform: translate(0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .ax-js .ax-reveal {
    transform: none;
    transition-duration: var(--motion-reduced-duration);
  }
}

/* ============ Vertical display text ============ */
.ax-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-heading);
  letter-spacing: 0.02em;
}

/* ============ Nav — The Crosshair ============ */
.ax-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 900;
  min-height: var(--ax-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transform: translateY(0);
  transition: transform var(--motion-micro-duration) var(--motion-micro-easing);
}
.ax-nav.ax-nav--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .ax-nav { transition: none; }
}
.ax-nav__logo img { height: 36px; width: auto; }
.ax-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.ax-nav__link {
  position: relative;
  font-family: var(--font-body);
  font-weight: 500;
  padding-block: var(--space-1);
}
.ax-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  transform: translateX(-50%) scale(0);
  transition: transform var(--motion-micro-duration) var(--motion-micro-easing);
}
.ax-nav__link.is-active::after { transform: translateX(-50%) scale(1); }
.ax-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
@media (max-width: 1079px) {
  .ax-nav__links { display: none; }
}

.ax-theme-toggle,
.ax-burger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-square);
  background: var(--surface);
}
.ax-theme-toggle svg,
.ax-burger svg { width: 20px; height: 20px; }
.ax-theme-toggle .ax-theme-toggle__moon { display: none; }
[data-theme="dark"] .ax-theme-toggle .ax-theme-toggle__sun { display: none; }
[data-theme="dark"] .ax-theme-toggle .ax-theme-toggle__moon { display: block; }
@media (min-width: 1080px) {
  .ax-burger { display: none; }
}

/* ============ Full-screen quadrant menu ============ */
.ax-menu {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: var(--navy-950);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--motion-converge-duration) var(--motion-converge-easing);
}
.ax-menu[data-open="true"] {
  visibility: visible;
  opacity: 1;
}
.ax-menu__quad {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4);
  gap: var(--space-2);
  transition: transform var(--motion-converge-duration) var(--motion-converge-easing),
              opacity var(--motion-converge-duration) var(--motion-converge-easing);
  opacity: 0;
}
.ax-menu__quad:nth-child(1) { transform: translate(-60px, -60px); }
.ax-menu__quad:nth-child(2) { transform: translate(60px, -60px); }
.ax-menu__quad:nth-child(3) { transform: translate(-60px, 60px); }
.ax-menu__quad:nth-child(4) { transform: translate(60px, 60px); }
.ax-menu[data-open="true"] .ax-menu__quad {
  transform: translate(0, 0);
  opacity: 1;
}
.ax-menu[data-open="true"] .ax-menu__quad:nth-child(1) { transition-delay: 0ms; }
.ax-menu[data-open="true"] .ax-menu__quad:nth-child(2) { transition-delay: 60ms; }
.ax-menu[data-open="true"] .ax-menu__quad:nth-child(3) { transition-delay: 120ms; }
.ax-menu[data-open="true"] .ax-menu__quad:nth-child(4) { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  .ax-menu, .ax-menu__quad {
    transition-duration: var(--motion-reduced-duration);
    transition-delay: 0ms !important;
    transform: none !important;
  }
}
.ax-menu__link {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-heading);
}
.ax-menu__link--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0; /* hide any text fallback */
}
.ax-menu__link--logo img {
  display: block;
  filter: brightness(0) invert(1); /* white logo on navy background */
}
.ax-menu__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2; /* sit above the transformed quads, which otherwise swallow the click */
  width: 44px;
  height: 44px;
  color: #fff;
  border: 1px solid var(--steel-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============ Footer quadrant ============ */
.ax-footer {
  width: 100%;
  max-width: 100%;
  margin: 0;
  background: var(--structure);
  color: #fff;
  padding-block: var(--space-6);
}
.ax-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}
.ax-footer__grid h3 {
  font-family: var(--font-data);
  font-size: var(--text-data);
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
  color: var(--steel-300);
  margin-bottom: var(--space-2);
}
.ax-footer__grid a { display: block; padding-block: 4px; }
.ax-footer__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ax-footer__bottom {
  max-width: 1440px;
  margin: var(--space-5) auto 0;
  padding-inline: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--navy-700);
  font-family: var(--font-data);
  font-size: var(--text-data);
  color: var(--steel-300);
}
@media (max-width: 1079px) {
  .ax-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .ax-footer__grid { grid-template-columns: 1fr; }
  /* Priority reflow: Contact > Links > Regions > Identity, via `order`
     (no duplicated HTML). Stacks in that order when collapsed to 1 column. */
  .ax-footer__identity { order: 4; }
  .ax-footer__links    { order: 2; }
  .ax-footer__regions  { order: 3; }
  .ax-footer__contact  { order: 1; }
}

/* ============ Responsive overlay ============
   Progressive enhancement. Desktop (≥1080px) is the verified baseline; the
   rules below only ever *add* mobile/tablet/wide behaviour. Page-shell changes
   use viewport queries; component-level reflow (Chain) uses @container — see
   _Chain.cshtml. Breakpoints follow UI_OVERHAUL_PLAN.md: 480 / 768 / 1080 / 1440,
   with a >1600 wide tier. Palette, logo geometry and keyframes are untouched. */

/* Small phones: drop the secondary nav CTA so logo + theme-toggle + burger
   never crowd at 320px. The green Core CTA survives in the hero and the
   burger menu, so the primary action is never hidden. */
@media (max-width: 479px) {
  .ax-nav__cta { display: none; }
}

/* Constrain the variable-font width-axis sweep on phones so the headline
   can't overrun the viewport. Desktop/tablet keep the full 75→115 range;
   this only lowers the cap (token consumed by the @keyframes block). */
@media (max-width: 767px) {
  :root { --wdth-min: 70; --wdth-max: 110; }
}

/* Wide (>1600px): expand the shell + section rhythm. Geometry, radius law
   and palette are deliberately unchanged. */
@media (min-width: 1600px) {
  .ax-container,
  .ax-footer__grid,
  .ax-footer__bottom { max-width: 1760px; }
  .ax-section { padding-block: var(--space-9); }
}

/* ============ Utility layout ============ */
.ax-container { max-width: 1440px; margin-inline: auto; padding-inline: var(--space-3); }
.ax-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============ Service detail pages (UI_OVERHAUL_PLAN.md §4.2) ============
   Content-first: hero shrinks to index + title + promise so real content
   shows in the first viewport. The Chain strip (persistent one-click phase
   nav) moves from page-open to between "How it runs" and the CTA -- still
   there, just no longer the first thing painted. Was duplicated as an
   inline <style> block in all nine Views/Services/*.cshtml; centralized
   here per governance §6 (one place to edit, not nine). */
.svc-page .ax-section { padding-block: var(--space-4); }

/* .svc-page prefix on every override below: it must outweigh the two-class
   ".svc-page .ax-section" rule above on specificity, not just source order. */
.svc-page .svc-hero { padding-block: var(--space-1); }
.svc-hero__num {
  font-family: var(--font-data);
  color: var(--accent);
  margin-right: var(--space-2);
}

.svc-media { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.svc-media__image {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--plate);
}
.svc-media__text { align-self: center; }
@media (min-width: 1024px) {
  .svc-media { grid-template-columns: 1fr 1fr; align-items: center; }
  /* Image is first in the DOM (so mobile stacks image-then-text); order
     flips it to the right column on desktop without touching markup. */
  .svc-media__image { order: 2; }
  .svc-media__text { order: 1; }
}

.svc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }

.svc-page .svc-chain-wrap { padding-block: var(--space-2); text-align: center; }
.svc-neighbors { margin-top: var(--space-2); }

.svc-page .svc-cta { padding-top: var(--space-2); }