/* site.css — Auto Evolution, North Logan UT. Components from brief.md v2
   (approved), built FROM tokens. No raw hex/size/font literal outside
   tokens.css; no !important (house-tech-spec §3, §12).

   Archetype editorial-stack (brief §5): every section opens on a running
   index rule; numerals are always the emphasis face; one column, one
   reading order, nothing overlaps; rules not boxes, no shadows; one dark
   band; 2px radius on four elements, square elsewhere. */

/* --- Layout primitives ---------------------------------------------------- */

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

.section {
  padding-block: var(--section-gap);
}

.measure {
  max-width: var(--layout-measure);
}

/* The bar is sticky, so an in-page anchor must clear it. */
section[id] {
  scroll-margin-block-start: var(--bar-height);
}

/* Type roles. Optical sizes per brief §2. Weight is set with font-weight,
   the optical size with font-variation-settings — never both axes in one
   declaration: fvs overrides the wght axis (house-tech-spec §8). */

h1 {
  font-size: var(--text-hero);
  font-weight: var(--font-weight-display);
  font-variation-settings: 'opsz' var(--opsz-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--font-weight-display);
  font-variation-settings: 'opsz' var(--opsz-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-block-end: var(--space-md);
}

h3 {
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  font-variation-settings: 'opsz' var(--opsz-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

body {
  font-weight: var(--font-weight-body);
  font-variation-settings: 'opsz' var(--opsz-body);
}

/* ref-011: italic serif inside a sans headline — h1, process h2, and once
   at full scale as the review pull-quote. */
h1 em,
h2 em {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-weight: var(--font-weight-body);
  font-variation-settings: normal;
  letter-spacing: var(--tracking-normal);
}

h1 em {
  color: var(--color-accent);
}

.section__lead,
.hero__lead {
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
  margin-block-end: var(--space-md);
}

/* --- The running index rule — the archetype's spine (brief §5.1, §8) ------- */

.rule {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
}

.rule__num {
  flex: 0 0 auto;
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--text-eyebrow);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
}

.rule__label {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  text-align: end;
}

/* Measuring rule; the label drops below rather than shorten it (§5.1). */
.rule__line {
  position: relative;
  flex: 1 1 var(--space-3xl);
  align-self: flex-start;
  margin-block-start: var(--space-2xs);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
  transform-origin: left center;
}

.rule__tick {
  position: absolute;
  inset-block-start: 0;
  width: var(--border-hairline);
  height: var(--rule-tick);
  background-color: var(--color-border);
  transform-origin: top center;
}

/* Same rhythm as the hero field's dimension rule — one system, not two. */
.rule__tick:nth-child(1) { inset-inline-start: 25%; }
.rule__tick:nth-child(2) { inset-inline-start: 50%; }
.rule__tick:nth-child(3) { inset-inline-start: 75%; }

/* On the band the hairline is the band's own, not the page's (brief §5.1). */
.rule--band .rule__num { color: var(--color-clay); }
.rule--band .rule__label { color: var(--color-band-ink-muted); }
.rule--band .rule__line { border-block-start-color: var(--color-band-line); }
.rule--band .rule__tick { background-color: var(--color-band-line); }

/* Header — 56px bar; wordmark left, tel: right at all widths, three anchors
   between them at >=48rem (brief §6 §I). Never a logo mark: none exists
   (dossier §4.5). Sticky: the phone is reachable at every scroll depth. */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  min-height: var(--bar-height);
  padding-block: 0;
  border-bottom: var(--border-hairline) var(--border-style) var(--color-border);
  background-color: var(--color-bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--bar-height);
}

.site-header__brand {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-body-strong);
  font-variation-settings: 'opsz' var(--opsz-h3);
  letter-spacing: var(--tracking-wordmark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__item {
  display: none;
}

.site-nav__link,
.site-header__tel {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.site-header__tel {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: var(--border-hairline);
  text-underline-offset: var(--space-3xs);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

/* One filled button, one underlined link. No pill buttons ship. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--layout-tap-min);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-hairline) var(--border-style) transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.btn--primary:hover {
  background-color: var(--color-ink);
}

.link-strong {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
  color: var(--color-accent);
  font-weight: var(--font-weight-body-strong);
  text-decoration: underline;
  text-decoration-thickness: var(--border-hairline);
  text-underline-offset: var(--space-3xs);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

/* §I hero (brief §5 v2). DOM order fixed at every width: rule, h1, field,
   lead, CTA, facts. Full-bleed below 64rem; above it the h1 moves into the
   left column so there is no void beside the field. */

.hero {
  position: relative;
  padding-block: var(--space-md) var(--section-gap);
  overflow: hidden;
}

/* The field's heat light spilled onto the page ground behind the headline —
   the layer measured in brief §4.2 G1-G5, worst case 6.60:1. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(120% 58% at 50% -8%, var(--color-atmos-warm) 0%, var(--color-bg) 68%);
  z-index: var(--z-base);
}

.hero__grid {
  position: relative;
  z-index: var(--z-base);
}

.hero__head {
  grid-area: head;
}

.hero__meta {
  grid-area: meta;
}

h1 {
  margin-block-end: var(--space-md);
}

.hero__lead {
  margin-block-start: var(--space-md);
}

.facts,
.hours {
  margin-block-start: var(--space-md);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.facts b,
.hours b {
  color: var(--color-ink);
}

/* The living-hero field. NO TEXT SITS OVER IT — a rule, not an observation
   (brief §4.2 G-D). All else inside is aria-hidden ornament. */

.field {
  position: relative;
  grid-area: field;
  margin-block-start: var(--space-md);
  margin-inline: calc(var(--layout-gutter) * -1);
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--radius-none);
  background-color: var(--color-field-bottom);
  background-image: linear-gradient(
    180deg,
    var(--color-field-top) 0%,
    var(--color-band) 52%,
    var(--color-field-bottom) 100%
  );
}

.field__media,
.field__img {
  display: block;
  width: 100%;
  height: 100%;
}

.field__img {
  object-fit: cover;
  object-position: 50% 45%;
}

.field__media {
  --dy: calc(var(--drift-sm) * -1);
  animation-duration: var(--orbit-subject);
}

/* The clay heat glow, over the image. Composited it reaches the field's
   lightest point, which brief §4.2 G-D records at roughly #724b4c. */
.field__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(58% 46% at 27% 14%, var(--color-field-glow) 0%, transparent 70%);
}

/* ref-001's drifting Source Serif italic numeral in clay. Ornament;
   10.02:1 on the field's darkest point. */
.field__numeral {
  position: absolute;
  inset-block-end: 8%;
  inset-inline-end: 7%;
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--field-numeral);
  line-height: var(--leading-tight);
  color: var(--color-clay);
  opacity: 0.55;
  --dx: calc(var(--drift-sm) * -1);
  --dy: var(--drift-md);
  animation-duration: var(--orbit-tick);
}

/* ref-001 satellite physics: slow, independent, non-synchronised loops. */
.field__sat {
  position: absolute;
  width: var(--ornament-dot);
  height: var(--ornament-dot);
  border-radius: var(--radius-pill);
  background-color: var(--color-field-ornament);
}

.field__sat--1 {
  inset-block-start: 16%;
  inset-inline-start: 13%;
  --dx: calc(var(--drift-md) * -1);
  --dy: var(--drift-sm);
  animation-duration: var(--orbit-sat-1);
}

.field__sat--2 {
  inset-block-start: 27%;
  inset-inline-end: 17%;
  width: var(--ornament-ring);
  height: var(--ornament-ring);
  background-color: transparent;
  border: var(--border-hairline) var(--border-style) var(--color-field-ornament);
  --dx: var(--drift-sm);
  --dy: calc(var(--drift-md) * -1);
  animation-duration: var(--orbit-sat-2);
}

.field__sat--3 {
  inset-block-end: 21%;
  inset-inline-start: 24%;
  --dx: var(--drift-md);
  --dy: var(--drift-md);
  animation-duration: var(--orbit-sat-3);
}

.field__mote {
  position: absolute;
  inset-block-start: 62%;
  inset-inline-start: 68%;
  width: var(--ornament-mote);
  height: var(--ornament-mote);
  border-radius: var(--radius-pill);
  background-color: var(--color-field-mote);
  --dx: calc(var(--drift-md) * -1);
  --dy: calc(var(--drift-md) * -1);
  animation-duration: var(--orbit-mote);
}

/* The dimension-tick rule — origin of the hairline system (brief §8).
   Fully drawn: the hero is never reveal-gated. */
.field__rule {
  position: absolute;
  inset-block-end: 15%;
  inset-inline-start: 12%;
  inset-inline-end: 42%;
  border-block-start: var(--border-hairline) var(--border-style) var(--color-field-ornament);
}

.field__tick {
  position: absolute;
  inset-block-start: 0;
  width: var(--border-hairline);
  height: var(--rule-tick);
  background-color: var(--color-field-ornament);
  inset-inline-start: 25%;
}

.field__tick:nth-child(2) { inset-inline-start: 50%; }
.field__tick:nth-child(3) { inset-inline-start: 75%; }

/* §II — ref-011's index list: numeral left, name and one line right. */

.index {
  margin-block-start: var(--space-xl);
  padding: 0;
  list-style: none;
}

.index__row {
  display: grid;
  grid-template-columns: var(--index-numeral-col) 1fr;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

.index__row:last-child {
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

/* Row I is marked, not merely first (brief §6 §II, C2 nudge 5). Two marks:
   a 2px aubergine rule and the larger name. The numeral stays the same
   size, so the emphasis reads as weight, not decoration. */
.index__row--lead {
  border-block-start: var(--border-thick) var(--border-style) var(--color-accent);
}

/* Sub-item marks: a parts list, not a second run of section rules —
   upright digits in the display face, muted ink (brief §5.2a). */
.index__num,
.step__num {
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink-muted);
}

.index__name {
  color: var(--color-ink);
}

.index__row--lead .index__name {
  font-size: var(--text-index-lead);
}

.index__desc {
  margin-block-start: var(--space-2xs);
  color: var(--color-ink-muted);
  max-width: var(--layout-measure);
}

/* §II closing strip, 5:1, no text over it. */

.strip {
  margin-block-start: var(--space-xl);
  overflow: hidden;
  aspect-ratio: 5 / 1;
  background-color: var(--color-band);
}

/* <picture> needs a height or object-fit: cover never engages. */
.strip picture,
.banner picture {
  height: 100%;
}

.strip__img,
.banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* §III — surface panel, 2px ink top rule. The credential is typographic or
   nothing: no badge, seal, shield or government logotype. */

.panel {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border-block-start: var(--border-thick) var(--border-style) var(--color-ink);
  border-radius: var(--radius-sm);
}

.panel__statement {
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  font-variation-settings: 'opsz' var(--opsz-h3);
  line-height: var(--leading-snug);
  color: var(--color-ink);
  margin-block-end: var(--space-sm);
}

.panel__note {
  color: var(--color-ink-muted);
  max-width: var(--layout-measure);
}

.panel__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* §IV — the aubergine band. The page's only dark zone, carrying no subject
   and no ambient motion (brief §6 §IV). */

.band {
  background-color: var(--color-band);
  background-image: radial-gradient(70% 90% at 84% 0%, var(--color-band-glow) 0%, var(--color-band-glow-out) 66%);
  color: var(--color-band-ink);
}

.band h2 {
  color: var(--color-band-ink);
}

.band h2 em {
  color: var(--color-clay);
}

/* ref-005's marker over one word. EXACTLY ONCE on the page. Brief
   §4.2 G12 v5: the word inverts to --color-band on solid clay, 8.63:1. */
.wash {
  background-color: var(--color-clay);
  color: var(--color-band);
  padding-inline: var(--space-3xs);
}

.band__lead {
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-band-ink-muted);
  margin-block-end: var(--space-xl);
}

.steps {
  display: grid;
  gap: var(--space-lg);
  padding: 0;
  list-style: none;
}

.step {
  padding-block-start: var(--space-md);
  border-block-start: var(--border-hairline) var(--border-style) var(--color-band-line);
}

.step__num {
  display: block;
  color: var(--color-band-ink-muted);
  margin-block-end: var(--space-2xs);
}

.step__name {
  color: var(--color-band-ink);
}

.step__line {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-small);
  color: var(--color-band-ink-muted);
  max-width: var(--layout-measure);
}

.band__foot {
  margin-block-start: var(--space-xl);
  font-size: var(--text-small);
  color: var(--color-band-ink-muted);
  max-width: var(--layout-measure);
}

.band__foot b {
  color: var(--color-clay);
}

/* Band-safe ring: --color-focus is 1.36:1 here and fails 1.4.11; clay is
   6.99:1 at the radial's lightest (brief §4 N3/N4). */
.band :focus-visible {
  outline-color: var(--color-focus-on-band);
  outline-offset: var(--space-3xs);
}

/* §V — one review, one card, no shadow. The emphasis face carries a whole
   block once, at full scale (ref-011, brief §6 §V). */

.review {
  margin: 0;
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border-inline-start: var(--border-thick) var(--border-style) var(--color-accent);
  border-radius: var(--radius-sm);
}

.review__quote {
  margin: 0;
}

.review__quote p {
  font-family: var(--font-emphasis);
  font-style: italic;
  font-size: var(--text-quote);
  font-weight: var(--font-weight-body);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-accent);
  text-wrap: pretty;
}

.review__attr {
  margin-block-start: var(--space-md);
  font-size: var(--text-eyebrow);
  font-weight: var(--font-weight-body-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.review__note {
  margin-block-start: var(--space-md);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* §VI — 3:1 banner, text below it and never over it. The only place §8's
   landscape motif is used, because here the horizon is the subject. */

.banner {
  margin-block: var(--space-lg);
  overflow: hidden;
  aspect-ratio: 3 / 1;
  background-color: var(--color-band);
}

.section--area p {
  color: var(--color-ink-muted);
}

.section--area p + p {
  margin-block-start: var(--space-sm);
}

/* §VII — native disclosure, works with JS off. Marker replaced by a 1px
   accent tick that rotates over --duration-base. */

.faq__item {
  border-block-start: var(--border-hairline) var(--border-style) var(--color-border);
}

.faq__item:last-child {
  border-block-end: var(--border-hairline) var(--border-style) var(--color-border);
}

.faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__text {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-display);
  font-variation-settings: 'opsz' var(--opsz-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.faq__marker {
  flex: 0 0 auto;
  width: var(--rule-tick);
  height: var(--rule-tick);
  border-inline-end: var(--border-hairline) var(--border-style) var(--color-accent);
  border-block-end: var(--border-hairline) var(--border-style) var(--color-accent);
  transform: rotate(45deg);
  transition: transform var(--duration-base) var(--ease-out);
}

.faq__item[open] .faq__marker {
  transform: rotate(-135deg);
}

.faq__a {
  padding-block-end: var(--space-md);
  color: var(--color-ink-muted);
}

/* §VIII — fields take a 1px --color-ink-muted border, not --color-border,
   which at 1.28:1 fails 1.4.11 as a control boundary. */

.form {
  display: grid;
  gap: var(--space-md);
  max-width: var(--layout-measure);
  margin-block-start: var(--space-lg);
}

.field-row {
  display: grid;
  gap: var(--space-3xs);
}

.field__label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-body-strong);
  color: var(--color-ink);
}

.field__control {
  width: 100%;
  min-height: var(--layout-tap-min);
  padding: var(--space-2xs) var(--space-xs);
  background-color: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-hairline) var(--border-style) var(--color-ink-muted);
  border-radius: var(--radius-sm);
}

textarea.field__control {
  min-height: var(--space-3xl);
  resize: vertical;
}

.field__hint {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* Honeypot: in the DOM for bots, unreachable for humans and AT. */
.form__trap {
  position: absolute;
  /* @allow-literal: off-canvas parking position, not a design value */
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__submit {
  margin-block-start: var(--space-2xs);
}

.form__status {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.form__status[data-state='error'] {
  color: var(--color-ink);
  font-weight: var(--font-weight-body-strong);
}

.form__aside {
  margin-block-start: var(--space-md);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

/* Footer — page ground, 2px ink top rule, so the page never reads as two
   dark zones. NAP only: no hours, no year, no social row. */

.site-footer {
  padding-block: var(--space-xl);
  border-top: var(--border-thick) var(--border-style) var(--color-ink);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.site-footer a {
  color: var(--color-accent);
  text-underline-offset: var(--space-3xs);
}

.site-footer__nap {
  font-style: normal;
  color: var(--color-ink);
  line-height: var(--leading-body);
}

.site-footer__nap a {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-tap-min);
}

.site-footer__services,
.site-footer__legal {
  margin-block-start: var(--space-sm);
}

.section--thanks {
  padding-block: var(--space-3xl);
}

/* Reveals (brief §8): the section rule draws left to right, its labels fade
   in at 50% of that, the block beneath fades up. All gated behind
   [data-reveal-ready], which main.js sets only when motion is allowed — so
   under reduced motion and with JS off everything resolves to its final
   state and nothing hides behind a reveal that never fires. */

[data-reveal-ready] .rule[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

[data-reveal-ready] .rule[data-reveal] .rule__line {
  transform: scaleX(0);
  transition: transform var(--duration-slow) var(--ease-out);
}

[data-reveal-ready] .rule[data-reveal][data-revealed] .rule__line {
  transform: scaleX(1);
}

[data-reveal-ready] .rule[data-reveal] .rule__num,
[data-reveal-ready] .rule[data-reveal] .rule__label {
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out) calc(var(--duration-slow) / 2);
}

[data-reveal-ready] .rule[data-reveal][data-revealed] .rule__num,
[data-reveal-ready] .rule[data-reveal][data-revealed] .rule__label {
  opacity: 1;
}

/* Signature move: ticks extend one at a time, --tick-stagger apart, as the
   rule finishes drawing (brief §8). */
[data-reveal-ready] .rule[data-reveal] .rule__tick {
  transform: scaleY(0);
  transition: transform var(--duration-base) var(--ease-out);
}

[data-reveal-ready] .rule[data-reveal][data-revealed] .rule__tick {
  transform: scaleY(1);
  transition-delay: calc(var(--duration-slow) + var(--tick-stagger) * var(--tick-i, 0));
}

.rule__tick:nth-child(2) { --tick-i: 1; }
.rule__tick:nth-child(3) { --tick-i: 2; }

/* Six ambient loops, hero field only. One oscillation, six vectors, six
   periods — independent and non-synchronised, each returning to its rest
   position so stopping it leaves the composed frame (brief §8). */

.field__media,
.field__numeral,
.field__sat,
.field__mote {
  animation-name: drift;
  animation-timing-function: var(--ease-in-out);
  animation-iteration-count: infinite;
}

@keyframes drift {
  0%, 100% { transform: translate(var(--dx, 0), var(--dy, 0)); }
  50%      { transform: translate(calc(var(--dx, 0) * -1), calc(var(--dy, 0) * -1)); }
}

/* Breakpoints — three states and no others (brief §5). */

@media (min-width: 48em) {
  .site-nav__item {
    display: block;
  }

  .index__row {
    gap: var(--space-lg);
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }

  .panel {
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
    padding: var(--space-xl);
  }

  .review {
    padding: var(--space-xl);
  }
}

/* brief §5.4 v2 */
@media (min-width: 64em) {
  h1 {
    font-size: var(--text-hero-split);
  }

  .hero__grid {
    display: grid;
    grid-template-areas: 'head field' 'meta field';
    grid-template-columns: var(--hero-columns-lg);
    grid-template-rows: auto 1fr;
    gap: var(--space-lg) var(--space-2xl);
    align-items: start;
  }

  .field {
    align-self: start;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-sm);
  }

  .panel {
    grid-template-columns: 1fr auto;
  }

  .panel__media {
    width: var(--panel-media-col);
  }
}

/* Reduced motion (brief §8). Duration tokens collapse in base.css and
   tokens.css; the six loops stop here, at the same specificity as the rules
   that started them, so no !important is needed (spec §12). The still frame
   keeps image, atmosphere, glow, subject and palette. */

@media (prefers-reduced-motion: reduce) {
  .field__media,
  .field__numeral,
  .field__sat,
  .field__mote {
    animation-name: none;
  }
}

.nap-tel { white-space: nowrap; }