/* ==========================================================================
   AHR Tuning — style.css
   Art direction: matte charcoal, racing red, brushed silver. Dashboard /
   redline aesthetic. Asymmetric editorial layout, condensed display type.
   ========================================================================== */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --text-3xl: clamp(2.6rem, 1.2rem + 4.6vw, 5.25rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.625rem;
  --radius-xl: 1rem;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 660px;
  --content-default: 1040px;
  --content-wide: 1280px;

  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ---------- Dark (brand default) ---------- */
:root,
[data-theme='dark'] {
  --color-bg: #0b0b0c;
  --color-bg-deep: #060607;
  --color-surface: #121214;
  --color-surface-2: #17181a;
  --color-surface-3: #1e1f22;
  --color-border: #2a2c30;
  --color-border-soft: #202226;
  --color-text: #ecebe9;
  --color-text-muted: #a2a6ac;
  --color-text-faint: #878b92;
  --color-primary: #e5121f;         /* racing red — large text, fills */
  --color-primary-hover: #ff2a35;
  --color-primary-ink: #ff5a5f;     /* small red text on dark */
  --color-on-primary: #ffffff;
  --color-steel: #b9bec6;           /* brushed silver */
  --color-focus: #ff5a5f;
  --grid-line: rgba(255, 255, 255, 0.045);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* ---------- Light (industrial workshop) ---------- */
[data-theme='light'] {
  --color-bg: #e8e7e4;
  --color-bg-deep: #dcdbd7;
  --color-surface: #f3f2f0;
  --color-surface-2: #eceae7;
  --color-surface-3: #e1dfdb;
  --color-border: #c6c4bf;
  --color-border-soft: #d5d3ce;
  --color-text: #16171a;
  --color-text-muted: #55585d;
  --color-text-faint: #62656b;
  --color-primary: #b3060f;
  --color-primary-hover: #8c040c;
  --color-primary-ink: #a4050e;
  --color-on-primary: #ffffff;
  --color-steel: #4c5057;
  --color-focus: #b3060f;
  --grid-line: rgba(0, 0, 0, 0.055);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  --shadow-lg: 0 20px 44px rgba(20, 20, 22, 0.16);
  color-scheme: light;
}

/* ==========================  Primitives  ========================== */

.wrap {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 4vw, var(--space-16));
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary-ink);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.eyebrow::before {
  content: '';
  width: 34px;
  height: 2px;
  background: var(--color-primary);
  flex: none;
}

h1,
h2,
h3,
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

h2 {
  font-size: var(--text-2xl);
}
h3 {
  font-size: var(--text-xl);
  letter-spacing: 0.005em;
}

.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.rule {
  height: 1px;
  background: var(--color-border-soft);
  border: 0;
}

/* Buttons — solid, squared-off, motorsport switchgear */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.btn svg { flex: none; }
.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-steel); background: var(--color-surface-2); }
.btn--block { width: 100%; }

/* ==========================  Header  ========================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-soft);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 72px;
}
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  margin-right: auto;
}
.logo .logo__full { width: auto; height: 54px; }
.logo .logo__compact { display: none; width: auto; height: 38px; }
@media (max-width: 559px) {
  .logo .logo__full { display: none; }
  .logo .logo__compact { display: block; }
}
.logo--footer .logo__full { height: 62px; }
/* Light theme: swap brushed chrome for darker gunmetal so the mark keeps contrast */
[data-theme='light'] .logo-metal { fill: url(#lgMetalDark); }
[data-theme='light'] .logo-arc { stroke: #454b53; fill: #454b53; }
[data-theme='light'] .logo-arc-cap { fill: #454b53; }
.logo__sub {
  display: none;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-3);
}
@media (min-width: 1100px) { .logo__sub { display: block; } }

.nav {
  display: none;
  gap: var(--space-2);
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-muted);
}
.nav a:hover { color: var(--color-text); }
@media (min-width: 860px) { .nav { display: flex; } }

.header__actions { display: flex; align-items: center; gap: var(--space-3); }
.header__call { display: none; }
@media (min-width: 620px) { .header__call { display: inline-flex; } }

.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  background: var(--color-surface);
}
.icon-btn:hover { border-color: var(--color-steel); }

/* ==========================  Hero — cinematic instrument cockpit  ========================== */

/* The hero is authored dark in both themes: a lit garage doesn't change with the sun. */
.hero,
[data-theme='light'] .hero {
  --color-bg: #0b0b0c;
  --color-text: #ecebe9;
  --color-text-muted: #a6aab0;
  --color-text-faint: #8b8f96;
  --color-border: #2a2c30;
  --color-surface-2: #17181a;
  --color-steel: #b9bec6;
  --color-primary: #e5121f;
  --color-primary-hover: #ff2a35;
  --color-primary-ink: #ff5a5f;
  --grid-line: rgba(255, 255, 255, 0.04);
  color-scheme: dark;
}

.hero {
  position: relative;
  overflow: hidden;
  color: var(--color-text);
  padding-block: clamp(var(--space-12), 6vw, var(--space-20)) clamp(var(--space-10), 6vw, var(--space-20));
  background:
    radial-gradient(90% 130% at 100% 32%, rgba(229, 18, 31, 0.16), transparent 56%),
    radial-gradient(70% 90% at 74% 100%, rgba(229, 18, 31, 0.07), transparent 62%),
    linear-gradient(180deg, #050506, #0b0b0c);
}
/* technical grid, faded like a dyno-cell wall */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 100% at 30% 0%, #000 25%, transparent 78%);
  pointer-events: none;
}
/* floor line with dyno tick marks */
.hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 48px) bottom / 100% 6px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14) 18%, rgba(229, 18, 31, 0.5) 50%, rgba(255, 255, 255, 0.14) 82%, transparent) bottom / 100% 1px no-repeat;
  pointer-events: none;
}

.hero__atmo { position: absolute; inset: 0; pointer-events: none; }
.hero__smoke {
  position: absolute;
  top: -14%;
  right: -12%;
  width: 72%;
  height: 128%;
  opacity: 0.15;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(68% 66% at 58% 46%, #000 25%, transparent 74%);
  mask-image: radial-gradient(68% 66% at 58% 46%, #000 25%, transparent 74%);
}
.hero__light {
  position: absolute;
  top: -22%;
  right: 0;
  width: 48%;
  height: 150%;
  background: radial-gradient(58% 52% at 100% 42%, rgba(255, 42, 53, 0.30), rgba(229, 18, 31, 0.10) 48%, transparent 74%);
  filter: blur(4px);
}
.hero__streak {
  position: absolute;
  height: 1px;
  left: 34%;
  right: -4%;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 95, 0.45) 55%, rgba(255, 255, 255, 0.18));
  transform: rotate(-4deg);
}
.hero__streak--1 { top: 26%; }
.hero__streak--2 { top: 64%; left: 48%; opacity: 0.55; transform: rotate(-2.5deg); }

.hero__inner {
  position: relative;
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  align-items: center;
}
.hero__text { position: relative; z-index: 2; }
@media (min-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); }
}

.hero h1 {
  font-size: var(--text-3xl);
  margin-block: var(--space-5) var(--space-6);
  max-width: 18ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--color-primary);
  display: block;
}
.hero__copy { max-width: 46ch; color: var(--color-text-muted); font-size: var(--text-lg); }
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}
.hero__meta strong { color: var(--color-text); font-weight: 600; }
.hero__meta { max-width: none; }

.strapline {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: clamp(0.14em, 1.2vw, 0.34em);
  text-transform: uppercase;
  color: var(--color-steel);
}

/* Tachometer figure */
.gauge {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: min(100%, 460px);
  margin-inline: auto;
}
@media (min-width: 960px) {
  .gauge { width: min(100%, 560px); justify-self: end; margin-inline: 0; }
}
@media (min-width: 1180px) {
  /* disciplined overlap: the dial slides under the copy column */
  .gauge { margin-left: -72px; margin-right: -8px; }
}
.tach {
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 34px 60px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 70px rgba(229, 18, 31, 0.10));
}
.gauge__caption {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.gauge__caption span { color: var(--color-primary-ink); white-space: nowrap; }
#tach-readout { font-variant-numeric: tabular-nums; }

/* ==========================  Trust strip  ========================== */

.strip {
  border-block: 1px solid var(--color-border-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 92%, var(--color-primary) 0%), var(--color-surface));
  background-color: var(--color-surface);
  position: relative;
}
.strip::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
}
.strip ul {
  list-style: none;
  display: grid;
  gap: 0;
}
.strip li {
  max-width: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.strip li:last-child { border-bottom: 0; }
.strip .k {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary-ink);
  letter-spacing: 0.1em;
}
.strip .v {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (min-width: 780px) {
  .strip ul { grid-template-columns: repeat(3, 1fr); }
  .strip li {
    border-bottom: 0;
    border-left: 1px solid var(--color-border-soft);
    padding: var(--space-6) var(--space-6);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .strip li:first-child { border-left: 0; padding-left: 0; }
}

/* ==========================  Sections  ========================== */

section { scroll-margin-top: 5rem; }

.section {
  padding-block: clamp(var(--space-16), 9vw, var(--space-32));
}
.section--tight { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.section--surface { background: var(--color-surface); border-block: 1px solid var(--color-border-soft); }

.section__head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}
@media (min-width: 900px) {
  .section__head {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: var(--space-12);
  }
  .section__head--offset { padding-left: clamp(0px, 8vw, 140px); }
}

/* --- Services: asymmetric narrative rows --- */

.svc {
  display: grid;
  gap: var(--space-6);
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
  border-top: 1px solid var(--color-border-soft);
}
.svc:last-of-type { border-bottom: 1px solid var(--color-border-soft); }
.svc__index {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  letter-spacing: 0.14em;
}
.svc h3 { margin-bottom: var(--space-4); }
.svc h3 span { color: var(--color-primary); }
.svc p { color: var(--color-text-muted); }
.svc__list {
  list-style: none;
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-2);
}
.svc__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.svc__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 2px;
  background: var(--color-primary);
}
.svc__aside {
  align-self: start;
  padding: var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}
.svc__aside dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-faint);
}
.svc__aside dd {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  color: var(--color-text);
}
.svc__aside dd:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
  .svc {
    grid-template-columns: 88px minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(var(--space-6), 4vw, var(--space-12));
    align-items: start;
  }
  /* stagger every other row for editorial rhythm */
  .svc--shift { padding-left: clamp(0px, 5vw, 96px); }
  .svc--wide { grid-template-columns: 88px minmax(0, 1fr); }
  .svc--wide .svc__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
}

/* --- Process --- */

.process {
  display: grid;
  gap: var(--space-8);
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: var(--space-6);
  border-top: 2px solid var(--color-border);
  transition: border-color 240ms ease;
}
.step::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--color-border);
  transition: background-color 240ms ease;
}
.step--live { border-top-color: var(--color-primary); }
.step--live::before { background: var(--color-primary); }
.step:hover { border-top-color: var(--color-steel); }
.step:hover::before { background: var(--color-steel); }
.step--live:hover { border-top-color: var(--color-primary); }
.step--live:hover::before { background: var(--color-primary); }
.step__n {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-steel);
  display: block;
  margin-bottom: var(--space-3);
}
.step h3 { margin-bottom: var(--space-3); font-size: var(--text-lg); }
.step p { color: var(--color-text-muted); font-size: var(--text-sm); }
@media (min-width: 820px) {
  .process { grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }
  .step:nth-child(2) { margin-top: var(--space-10); }
  .step:nth-child(3) { margin-top: var(--space-20); }
}

/* --- Vehicles --- */

.fleet {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 700px) {
  .fleet {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
    gap: var(--space-5);
    align-items: start;
  }
  /* asymmetric 2 x 2: large / small, then small / large, staggered */
  .fleet__item:nth-child(2n) { margin-top: var(--space-10); }
}
.fleet__item {
  position: relative;
  overflow: hidden;
  padding: var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background-image: var(--sheen);
  transition: border-color 240ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fleet__item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fleet__item:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); transform: translateY(-3px); }
.fleet__item:hover::after { transform: scaleX(1); }
.fleet__item svg { width: 100%; max-width: 210px; height: auto; color: var(--color-steel); margin-bottom: var(--space-5); transition: color 240ms ease; }
.fleet__item:hover svg { color: var(--color-text); }
.fleet__item--lg { padding: clamp(var(--space-5), 3vw, var(--space-8)); }
.fleet__item--lg svg { max-width: 300px; }
.fleet__item h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.fleet__item p { font-size: var(--text-sm); color: var(--color-text-muted); }


/* --- Benefits + dyno --- */

.outcomes {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
@media (min-width: 960px) {
  .outcomes { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.dyno {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-deep);
}
[data-theme='light'] .dyno { background: var(--color-surface); }
.dyno svg { width: 100%; height: auto; }
.dyno figcaption {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.5;
}
.dyno__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-2); }
.dyno__legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.dyno__legend i { width: 18px; height: 2px; display: inline-block; }
.js-anim .dyno-curve { stroke-dasharray: 640; stroke-dashoffset: 640; }
.js-anim .dyno-curve.is-in { animation: draw 1.5s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js-anim .dyno-curve { stroke-dashoffset: 0; animation: none; }
}

.outcome-list { list-style: none; display: grid; gap: var(--space-6); }
.outcome-list li { max-width: 52ch; border-left: 0; }
.outcome-list h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.outcome-list p { font-size: var(--text-sm); color: var(--color-text-muted); }
.outcome-list .num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary-ink);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: var(--space-2);
}

/* ==========================  Contact  ========================== */

.contact {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
}
@media (min-width: 960px) {
  .contact { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.contact__aside dl { margin-top: var(--space-8); display: grid; gap: var(--space-6); }
.contact__aside dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-1);
}
.contact__aside dd { font-size: var(--text-base); }
.contact__aside dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
}
.contact__aside dd a:hover { color: var(--color-primary-ink); }

.form {
  padding: clamp(var(--space-5), 3vw, var(--space-10));
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.field { margin-bottom: var(--space-5); }
.field label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.field .opt { color: var(--color-text-faint); font-weight: 400; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--color-steel); }
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] { border-color: var(--color-primary); }
.field .err {
  display: block;
  min-height: 1.2em;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-primary-ink);
  font-weight: 600;
}
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-4); }
.form__status {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-3);
}
.form__status[hidden] { display: none; }
.form__status a { color: var(--color-primary-ink); font-weight: 700; }

/* ==========================  Footer  ========================== */

.footer {
  background: var(--color-bg-deep);
  border-top: 1px solid var(--color-border);
  padding-block: clamp(var(--space-12), 6vw, var(--space-20)) var(--space-10);
}
.footer__top { display: grid; gap: var(--space-10); }
@media (min-width: 860px) {
  .footer__top { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.9fr)); gap: var(--space-12); }
}
.footer h2 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.footer ul { list-style: none; display: grid; }
.footer ul li { display: flex; align-items: center; min-height: 44px; }
.footer a { color: var(--color-text-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.footer a:hover { color: var(--color-text); }
.footer__phone {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.03em;
  color: var(--color-text);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--space-2);
}
.footer__social { font-size: var(--text-sm); color: var(--color-text-muted); }
.footer__legal {
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
  display: grid;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.footer__legal p { max-width: 88ch; }
@media (min-width: 860px) {
  .footer__legal { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: end; }
  .footer__legal .credit { text-align: right; }
}
.footer__legal .credit a { color: var(--color-text-muted); text-decoration: underline; }
.footer__phone { min-height: 44px; }

/* ==========================  Scroll reveal  ========================== */

.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js-anim [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==========================  Mobile action bar  ========================== */

.actionbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-border);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.actionbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--color-surface);
  color: var(--color-text);
}
.actionbar a.is-primary { background: var(--color-primary); color: var(--color-on-primary); }
@media (min-width: 860px) { .actionbar { display: none; } }
@media (max-width: 859px) { body { padding-bottom: 60px; } }