/* All Seasons: layout and components in the Almanac material.
   Every colour and font comes from tokens.css. Two rule weights, square
   corners, no shadows, one pale printed sheet. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
  scrollbar-color: var(--color-rule-2) var(--color-paper);
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  caret-color: var(--color-accent);
  /* Pull single-word last lines back up beside their sentence. Browsers that
     ignore it keep the plain greedy break, so nothing depends on it. */
  text-wrap: pretty;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-display);
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-display);
  line-height: 1.02;
}

h2 {
  font-size: var(--text-section);
  line-height: 1.05;
}

h3 {
  font-size: var(--text-title);
  line-height: 1.2;
}

p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a {
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.18em;
}

a:not(.btn):not(.skip-link):hover {
  color: var(--color-accent);
  text-decoration-thickness: var(--rule-bar);
}

strong {
  color: var(--color-ink);
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
}

[hidden] {
  display: none !important;
}

/* Focus --------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--rule-bar) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-control);
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: var(--z-raised);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-control);
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

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

.container {
  width: min(100% - (2 * var(--gutter)), var(--container));
  max-width: var(--container);
  margin-inline: auto;
}

/* Bands own their gutters, so a painted sheet is inset on all four sides.
   (Impeccable's detector cannot resolve var() padding and warns; measured
   inset is 46px at 1440 and 20px at 390, from --section-pad and --gutter.) */
.section {
  padding: var(--section-pad) var(--gutter);
}

.section > .container {
  width: 100%;
}

.section-services {
  background-color: var(--color-paper-2);
  color: var(--color-ink-2);
}

.section-about {
  background-color: var(--color-paper);
  color: var(--color-ink-2);
}

.section-testimonials {
  background-color: var(--color-paper);
  color: var(--color-ink-2);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.section-contact {
  background-color: var(--color-sheet);
  color: var(--color-sheet-ink-2);
  border-top: var(--rule-bar) solid var(--color-sheet-rule-2);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
  gap: var(--space-md) var(--gap-columns);
  margin-bottom: var(--space-2xl);
}

.section-head .section-title {
  grid-column: 1;
}

.section-head .section-lede {
  grid-column: 2;
  margin-top: 0;
}

.section-head-center {
  display: block;
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.section-title {
  max-width: 28ch;
}

.section-lede {
  margin-top: var(--space-md);
  max-width: var(--measure);
  color: var(--color-muted);
  font-size: var(--text-lead);
  line-height: 1.5;
}

/* Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  background-color: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.header-inner {
  display: flex;
  min-height: var(--header-height);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-xl);
  padding-block: var(--space-sm);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--display-weight);
  letter-spacing: -0.015em;
  text-decoration: none;
}

.brand:hover {
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
}

.brand-mark {
  width: var(--space-sm);
  height: var(--space-sm);
  background-color: var(--color-accent);
}

.brand-name {
  /* Header and footer lockups keep the name on one line as the sub-label sits beside it. */
  white-space: nowrap;
}

.brand-sub {
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
}

.nav-list a {
  display: inline-block;
  padding-block: var(--space-xs);
  color: var(--color-muted);
  /* Load-bearing: this rule out-specifies .nav-phone (0,1,1 vs 0,1,0), so the
     phone link renders in the body face and muted ink. Removing it would
     change the header's rendering, so it stays until the specificity is
     fixed deliberately. */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-decoration: none;
}

.nav-list a:hover {
  color: var(--color-ink);
}

.nav-phone {
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-control);
  color: var(--color-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nav-phone:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--control-h);
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-control);
  background-color: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
}

.nav-toggle-label {
  /* Real type rule: the label text is swapped by JS (Menu/Close) and must not wrap. */
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nav-toggle-glyph,
.nav-toggle-glyph::before,
.nav-toggle-glyph::after {
  display: block;
  width: var(--space-md);
  height: var(--rule-bar);
  background-color: var(--color-accent);
}

.nav-toggle-glyph {
  position: relative;
}

.nav-toggle-glyph::before,
.nav-toggle-glyph::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-glyph::before {
  top: calc(var(--space-xs) * -1);
}

.nav-toggle-glyph::after {
  top: var(--space-xs);
}

/* Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--hero-pad-top) var(--hero-pad-bottom);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-2xl) var(--gap-columns);
  min-height: min(calc(100svh - var(--header-height)), 43rem);
}

.hero-copy {
  min-width: 0;
}

/* Right rail: the airflow study sits above the printed slip, both aligned to
   the same right edge. The figure keeps its own space, so nothing shifts. */
.hero-rail {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-lg);
}

/* A quiet margin drawing in the ink of the page, just above the slip. */
.hero-figure {
  width: 100%;
  max-width: 22rem;
  height: auto;
  align-self: flex-end;
  color: var(--color-rule-2);
  opacity: 0.75;
  pointer-events: none;
}

.hero-title {
  max-width: 13ch;
}

.hero-lede {
  max-width: 46ch;
  margin-top: var(--space-lg);
  color: var(--color-muted);
  font-size: var(--text-lead);
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.hero-note {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  max-width: 40ch;
  color: var(--color-subtle);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* The hero's printed slip: a paper step and one firm rule, no frame. */
.hero-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-top: var(--rule-bar) solid var(--color-accent);
  background-color: var(--color-paper-2);
  color: var(--color-ink-2);
}

.panel-title {
  font-size: var(--text-xl);
}

.panel-copy {
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1.55;
}

.contact-list {
  display: grid;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.contact-row {
  display: grid;
  grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
}

.contact-row dt {
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--label-size);
}

.contact-row dd {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.placeholder-flag {
  color: var(--color-subtle);
  font-family: var(--font-outlier);
  font-size: var(--label-size);
  line-height: 1.65;
}

/* Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding-inline: var(--space-lg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--display-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

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

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

.btn-primary:active {
  background-color: var(--color-accent-2);
  border-color: var(--color-accent-2);
}

.btn-ghost {
  border-color: var(--color-rule-2);
  background-color: transparent;
  color: var(--color-ink);
}

.btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-ghost:active {
  border-color: var(--color-accent-2);
  color: var(--color-accent-2);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Service register ---------------------------------------------------- */

.service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--rule-bar) solid var(--color-rule-2);
}

.service-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xs) var(--gap-columns);
  padding-block: var(--space-lg);
}

.service-card + .service-card {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.service-title {
  font-size: var(--text-xl);
  line-height: 1.15;
}

.service-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-md);
}

.service-icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  /* Optical centre of the 32px mark on the title's 25px/1.15 first line. */
  margin-top: -0.1rem;
  color: var(--color-muted);
}

.service-card:hover .service-title,
.service-card:hover .service-icon,
.service-card:focus-within .service-title,
.service-card:focus-within .service-icon {
  color: var(--color-accent);
}

.service-copy {
  max-width: 56ch;
  color: var(--color-muted);
  font-size: var(--text-md);
}

/* About --------------------------------------------------------------- */

.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  grid-template-areas:
    "copy principles"
    "plate principles";
  gap: var(--space-2xl) var(--gap-columns);
  align-items: start;
}

.about-copy {
  grid-area: copy;
}

/* The seasonal plate: a printed diagram under one firm rule, measured to the
   copy so the rule, the drawing and the text share one column edge. */
.about-plate {
  grid-area: plate;
  justify-self: start;
  align-self: end;
  width: 100%;
  max-width: var(--measure);
  padding-top: var(--space-md);
  border-top: var(--rule-bar) solid var(--color-rule-2);
}

.about-plate-svg {
  width: 100%;
  height: auto;
  color: var(--color-subtle);
}

.about-plate-svg text {
  fill: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

.about-plate-caption {
  margin-top: var(--space-sm);
  max-width: 44ch;
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--label-size);
  line-height: 1.55;
}

.about-copy p {
  max-width: var(--measure);
  margin-top: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1.65;
}

.about-copy .section-title {
  margin-bottom: var(--space-lg);
}

.principle-list {
  grid-area: principles;
  display: grid;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--rule-bar) solid var(--color-rule-2);
}

.principle + .principle {
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.principle-title {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--display-weight);
  letter-spacing: 0;
}

.principle p {
  margin-top: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* Testimonials -------------------------------------------------------- */

.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-columns);
}

.quote-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: var(--rule-bar) solid var(--color-rule-2);
}

.quote-label {
  color: var(--color-accent);
  font-family: var(--font-outlier);
  font-size: var(--label-size);
}

.quote {
  border: 0;
  padding: 0;
}

.quote p {
  color: var(--color-muted);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: 1.5;
}

.quote-attr {
  margin-top: auto;
  padding-top: var(--space-xs);
  color: var(--color-subtle);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}

/* Contact: the printed slip on pale slate ------------------------------ */

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--space-2xl) var(--gap-columns);
  align-items: start;
}

.section-contact .section-title {
  color: var(--color-sheet-ink);
}

.section-contact .section-lede {
  color: var(--color-sheet-muted);
}

.section-contact :focus-visible {
  outline-color: var(--color-sheet-focus);
}

.contact-copy .section-title {
  margin-bottom: var(--space-md);
}

.contact-card {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--rule-bar) solid var(--color-sheet-ink);
}

.contact-card-title {
  color: var(--color-sheet-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--display-weight);
  letter-spacing: 0;
}

.contact-direct {
  display: grid;
  gap: var(--space-sm);
  margin-block: var(--space-md);
}

.contact-direct li {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
  overflow-wrap: anywhere;
}

.contact-key {
  color: var(--color-sheet-muted);
  font-family: var(--font-outlier);
  font-size: var(--label-size);
}

.contact-direct a {
  color: var(--color-sheet-ink);
  text-decoration-color: var(--color-sheet-accent);
}

.contact-direct a:hover {
  color: var(--color-sheet-accent);
}

.contact-card .placeholder-flag {
  color: var(--color-sheet-muted);
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--gap-columns);
}

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

.field-wide,
.form-status {
  grid-column: 1 / -1;
}

.field label {
  color: var(--color-sheet-ink-2);
  font-family: var(--font-outlier);
  font-size: var(--label-size);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-sheet-rule-2);
  border-radius: var(--radius-control);
  background-color: var(--color-sheet-field);
  color: var(--color-sheet-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

/* The one native arrow the printed slip cannot keep: a drawn chevron. */
.field select {
  appearance: none;
  padding-right: var(--space-2xl);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) center,
    calc(100% - 1.1rem) center;
  background-repeat: no-repeat;
  background-size: 0.3rem 0.3rem;
  cursor: pointer;
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--color-sheet-ink-2);
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--color-sheet-error);
  border-width: var(--rule-bar);
}

.field-error {
  color: var(--color-sheet-error);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.field-error::before {
  content: "! ";
  font-family: var(--font-outlier);
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.form-hint {
  max-width: 34ch;
  color: var(--color-sheet-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.form-status {
  color: var(--color-sheet-success);
  font-size: var(--text-sm);
}

.form-status a {
  color: var(--color-sheet-accent);
  overflow-wrap: anywhere;
}

/* Footer mast --------------------------------------------------------- */

.site-footer {
  background-color: var(--color-paper);
  color: var(--color-ink-2);
  border-top: var(--rule-bar) solid var(--color-rule-2);
}

.footer-cta {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--space-lg) var(--gap-columns);
  padding-block: var(--section-pad-s);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.footer-title {
  max-width: 18ch;
}

.footer-lede {
  max-width: 46ch;
  color: var(--color-muted);
  font-size: var(--text-md);
}

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.footer-base {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding-block: var(--space-xl);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-display);
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
}

.footer-nav a {
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--color-ink);
}

.footer-legal {
  width: 100%;
  max-width: 70ch;
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-subtle);
  font-size: var(--text-sm);
}

/* Responsive ---------------------------------------------------------- */

@media (max-width: 60rem) {
  .hero-inner,
  .about-inner,
  .contact-inner,
  .footer-cta {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-xl);
  }

  .hero-inner {
    min-height: 0;
  }

  .hero-title {
    max-width: 16ch;
  }

  .section-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .section-head .section-lede {
    grid-column: 1;
  }

  .section-head .section-lede {
    margin-top: var(--space-sm);
  }

  .contact-inner {
    gap: var(--space-2xl);
  }

  .contact-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .quote-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-inner {
    gap: var(--space-2xl);
    grid-template-areas:
      "copy"
      "plate"
      "principles";
  }

  .about-plate {
    align-self: start;
  }

  /* The hero stacks to one column here: the drawing has no margin to live in
     and would sit behind the headline or the CTA. The printed plate in the
     about section carries the artwork at these widths instead. */
  .hero-figure {
    display: none;
  }

  html.has-js .nav-toggle {
    display: inline-flex;
  }

  html.has-js .site-nav {
    display: none;
    flex-basis: 100%;
  }

  html.has-js .site-header[data-nav-open="true"] .site-nav {
    display: block;
    padding-top: var(--space-sm);
    border-top: var(--rule-hair) solid var(--color-rule);
  }

  html.has-js .site-header[data-nav-open="true"] .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2xs);
  }

  html.has-js .site-header[data-nav-open="true"] .nav-list a {
    padding-block: var(--space-sm);
  }

  html.has-js .site-header[data-nav-open="true"] .nav-cta {
    margin-top: var(--space-xs);
  }

  html.has-js .site-header[data-nav-open="true"] .nav-phone {
    display: block;
    text-align: center;
  }
}

@media (max-width: 40rem) {
  .hero-actions .btn,
  .footer-actions .btn {
    flex: 1 1 100%;
  }

  .hero-note {
    max-width: none;
  }

  .contact-row,
  .contact-direct li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xs);
  }

  .service-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    padding-block: var(--space-lg);
  }
}

/* Short desktop windows: the slip rises to meet the drawing, which would be
   cut in half. A margin figure is worth less than a clean edge. */
@media (min-width: 60.01rem) and (max-height: 42rem) {
  .hero-figure {
    display: none;
  }
}

/* Motion: state changes only ------------------------------------------ */

/* Scroll reveals: the hidden state exists only when scripting is present, so
   the no-JS page is always fully readable. Opacity and transform only. */
html.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

html.has-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-long) var(--ease-out),
    transform var(--dur-long) var(--ease-out);
}

html.has-js .service-card.is-revealed:nth-child(2),
html.has-js .quote-slot.is-revealed:nth-child(2) {
  transition-delay: 70ms;
}

html.has-js .service-card.is-revealed:nth-child(3),
html.has-js .quote-slot.is-revealed:nth-child(3) {
  transition-delay: 140ms;
}

html.has-js .service-card.is-revealed:nth-child(4) {
  transition-delay: 210ms;
}

html.has-js .service-card.is-revealed:nth-child(5) {
  transition-delay: 280ms;
}

html.has-js .service-card.is-revealed:nth-child(6) {
  transition-delay: 350ms;
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes airflow-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-14px, 8px, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  html.has-js .hero-copy {
    animation: hero-enter 560ms var(--ease-out) both;
  }

  /* The rail arrives just after the copy, so the hero reads as one page
     rather than two panels appearing at once. */
  html.has-js .hero-rail {
    animation: hero-enter 560ms var(--ease-out) 80ms both;
  }

  html.has-js .hero-figure {
    animation: airflow-drift 34s var(--ease-in-out) infinite alternate;
  }

  a,
  .btn,
  .nav-list a,
  .nav-phone,
  .contact-row dd a,
  .contact-direct a,
  .field input,
  .field select,
  .field textarea {
    transition:
      color var(--dur-short) var(--ease-out),
      border-color var(--dur-short) var(--ease-out),
      background-color var(--dur-short) var(--ease-out),
      text-decoration-color var(--dur-short) var(--ease-out);
  }

  .skip-link {
    transition: transform var(--dur-short) var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Final state, immediately: no reveal offset, no entrance, no drift. */
  html.has-js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}