/* Hallmark · genre: editorial · macrostructure: Narrative Workflow · theme: Sport
 * tone: utilitarian · audience: paikalliset autoilijat + hintavertailijat · use: varaa huoltoaika
 * nav: N6 Masthead (issue-line above wordmark, wordmark 2xl, double rule)
 * hero: H2 Split Diptych (7/5, right = annotated proof photograph, hairline divider)
 * head: S2 Hanging · features: process band (5 stations, ruled, no prose)
 *       + F3 Tabular spec sheet (3-col, rule every row, tabular nums)
 * cta: C4 Sticky bottom bar (always, <60rem) · footer: Ft4 Dense colophon (mono, log-style)
 * motion: 2 primitives — CTA lift, accordion. Scroll reveal removed with the step section.
 * enrichment: real supplied photography (hero proof + paired work shots) + Tier-A CSS hazard rule
 * anchor hue: warm 32 (logo oxblood #6C0C00) · marker: azure #00A8F0 · accent < 3% of viewport
 * contrast: pass (40–41) · nav: N6 · footer: Ft4 · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * icons: pass (30) · mobile: pass (34, 49, 50–57)
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 */

/* ---------------------------------------------------------------- reset */

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  /* Finnish compounds are long — let display type break inside a word rather
     than push the page sideways. */
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

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

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--space-md);
  top: -4rem;
  z-index: var(--z-sticky);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}
.skip:focus-visible { top: var(--space-md); }

/* Fill slot — a value the workshop still has to supply. Deliberately empty,
   never invented. */
.fill {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--color-muted);
  text-decoration: underline dotted var(--color-rule-2);
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ N6 masthead */

.mast {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--gutter-x) 0;
  text-align: center;
}

.mast__line {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.mast__line .fill { text-transform: none; letter-spacing: 0; }
.mast__dot { padding-inline: var(--space-2xs); color: var(--color-rule-2); }

.mast__name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 9vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  min-width: 0;
}

/* A brand name may wrap between its words but must never break inside one —
   "AUTOKORJAAM / O" reads as a bug, so the global display rule is overridden
   here and the size is held small enough that the long word always fits. */
.mast__word {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* The supplied logo is a JPG on a solid azure field — framed as a deliberate
   brand chip rather than pretending it has a transparent background. */
.mast__logo {
  flex: none;
  width: clamp(3rem, 9vw, 4.25rem);
  height: clamp(3rem, 9vw, 4.25rem);
  object-fit: cover;
  border: var(--rule-hair) solid var(--color-rule-2);
}

.mast__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Row gap matches the hit-area expansion below so targets never overlap when
     the link row wraps to two lines. */
  gap: var(--space-md) var(--space-lg);
  margin-block-start: var(--space-xs);
}

.mast__link {
  position: relative;
  white-space: nowrap;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-muted);
  padding-block: var(--space-2xs);
  border-block-end: var(--rule-hair) solid transparent;
}

/* Expands the touch target to 44 px without shifting the underline off the
   text. Visual size stays put; only the hit box grows. */
.mast__link::before {
  content: "";
  position: absolute;
  inset-block: -8px;
  inset-inline: -6px;
}
@media (hover: hover) {
  .mast__link:hover { color: var(--color-ink); border-block-end-color: var(--color-accent); }
}

.mast__rule {
  border: 0;
  border-block-start: var(--rule-hair) solid var(--color-rule);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  height: 4px;
  margin: var(--space-md) 0 0;
}

/* ------------------------------------------------------------- H2 hero */

.hero {
  display: grid;
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--gutter-x) var(--space-3xl);
}

.hero__title {
  font-size: var(--text-display);
  line-height: 1.08;
  max-width: 14ch;
}

.hero__body {
  margin-block-start: var(--space-lg);
  max-width: 44ch;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-ink-2);
}

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

/* The proof. A real photo of a real fault — the page's whole argument in one
   frame, so it gets a hairline and a caption, not a re-drawn frame. */
.hero__proof { margin: 0; }

/* The source frame is natively 4:3 — matching it means the fault circle is
   never cropped out of view. */
.hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--rule-hair) solid var(--color-rule-2);
}

.hero__cap {
  margin-block-start: var(--space-sm);
  padding-inline-start: var(--space-sm);
  border-inline-start: var(--rule-thick) solid var(--color-marker);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 46ch;
}

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-3xl);
    align-items: start;
    padding-block: var(--space-3xl) var(--space-4xl);
  }
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--space-lg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
@media (hover: hover) {
  .btn--primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: var(--color-accent-ink); transform: translateY(-1.5px); }
}
.btn--primary:active { transform: translateY(0); background: var(--color-ink-2); border-color: var(--color-ink-2); color: var(--color-paper); }

.btn--quiet {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule-2);
}
@media (hover: hover) {
  .btn--quiet:hover { border-color: var(--color-ink); transform: translateY(-1.5px); }
}
.btn--quiet:active { transform: translateY(0); background: var(--color-paper-2); }

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

/* --------------------------------------------------------- sections + S2 */

.section { padding-inline: var(--gutter-x); }

/* Rhythm is deliberately uneven — sections are not all padded the same. */
.section--flow  { padding-block: var(--space-2xl) var(--space-2xl); }
.section--price { padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-paper-2); }
.section--faq   { padding-block: var(--space-2xl) var(--space-3xl); }
.section--book  { padding-block: var(--space-2xl) var(--space-4xl); }

/* S2 · Hanging head — one column, always. Never a tag-left / heading-right grid. */
.head { max-width: var(--measure); margin-block-end: var(--space-xl); }

.head__title {
  font-size: var(--text-2xl);
  line-height: 1.06;
}

.head__sub {
  margin-block-start: var(--space-md);
  max-width: 52ch;
  color: var(--color-muted);
  line-height: 1.6;
}

@media (min-width: 60rem) {
  .head__title { font-size: var(--text-3xl); }
  .head { margin-block-end: var(--space-2xl); }
}

/* --------------------------------------------------- process band (5 stations)

   The five stages were a full section of paragraphs; they restated the hero and
   explained the obvious, so they are compressed to one band. Vertical list on
   phones, five ruled columns from 48rem up. */

.flow {
  display: grid;
  border-block-start: var(--rule-thick) solid var(--color-ink);
  border-block-end: var(--rule-thick) solid var(--color-ink);
}

.flow__step {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-md);
}
.flow__step + .flow__step {
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.flow__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.flow__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  min-width: 0;
}

.flow__note {
  margin-block-start: var(--space-md);
  max-width: 52ch;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

@media (min-width: 48rem) {
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .flow__step {
    display: block;
    padding: var(--space-lg) var(--space-md);
  }
  .flow__step + .flow__step {
    border-block-start: 0;
    border-inline-start: var(--rule-hair) solid var(--color-rule);
  }
  .flow__step:first-child { padding-inline-start: 0; }
  .flow__step:last-child { padding-inline-end: 0; }
  .flow__name {
    display: block;
    margin-block-start: var(--space-xs);
    font-size: var(--text-lg);
  }
}

/* Work photographs, paired under the price sheet — evidence of the job, not
   decoration, so each keeps its own caption. */
.work-shots {
  display: grid;
  gap: var(--space-lg);
  margin-block-start: var(--space-2xl);
}

.work-shots figure { margin: 0; }

.work-shots img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: var(--rule-hair) solid var(--color-rule-2);
}

.work-shots figcaption {
  margin-block-start: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 44ch;
}

@media (min-width: 48rem) {
  .work-shots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); }
}

/* ------------------------------------------------------ F3 spec sheet */

.table-wrap { overflow-x: auto; }

.spec {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.spec th,
.spec td {
  text-align: start;
  padding-block: var(--space-md);
  padding-inline-end: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
  vertical-align: baseline;
}

.spec thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-block-end-color: var(--color-ink);
  padding-block: var(--space-xs);
}

.spec tbody th {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
}

.spec td { color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
.spec__price-col,
.spec__price { text-align: end; padding-inline-end: 0; }

.note {
  margin-block-start: var(--space-lg);
  max-width: 56ch;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Below the typography breakpoint the table stops being a table. */
@media (max-width: 47.99rem) {
  .spec thead { display: none; }
  .spec tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2xs) var(--space-md);
    padding-block: var(--space-md);
    border-block-end: var(--rule-hair) solid var(--color-rule-2);
  }
  .spec tbody th,
  .spec tbody td { border: 0; padding: 0; }
  .spec tbody th { grid-column: 1 / -1; }
  .spec tbody td::before {
    content: attr(data-label) " ";
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-rule-2);
  }
  .spec__price { text-align: end; }
}

/* --------------------------------------------------------------- FAQ */

.faq { max-width: 68ch; border-block-start: var(--rule-hair) solid var(--color-rule-2); }

.qa { border-block-end: var(--rule-hair) solid var(--color-rule-2); }

.qa__q {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.qa__q::-webkit-details-marker { display: none; }

.qa__q::after {
  content: "+";
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--color-accent);
  transition: color var(--dur-short) var(--ease-out);
}
.qa[open] .qa__q::after { content: "–"; }

@media (hover: hover) {
  .qa__q:hover { color: var(--color-accent-deep); }
}

/* Motion primitive 2 of 3 — accordion opens on grid-template-rows, not height. */
.qa__a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-long) var(--ease-in-out);
}
.qa[open] .qa__a-wrap { grid-template-rows: 1fr; }
.qa__a { overflow: hidden; }
.qa__a > p {
  padding-block-end: var(--space-lg);
  max-width: 60ch;
  color: var(--color-ink-2);
}
.qa__a > p + p { padding-block-start: var(--space-sm); }
.qa__note { font-size: var(--text-sm); color: var(--color-muted); }

/* -------------------------------------------- Tier-A hazard rule (CSS art) */

.stripe {
  border: 0;
  height: 10px;
  margin: 0;
  background: repeating-linear-gradient(
    -45deg,
    var(--color-accent) 0 10px,
    var(--color-paper-3) 10px 20px
  );
}

/* -------------------------------------------------------------- the form */

.form { max-width: 52rem; }

.form__grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 40rem) {
  .form__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field--wide { grid-column: 1 / -1; }
}

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

.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.field__input {
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  /* Border width never changes across states — no layout shift on focus. */
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-none);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.field__input--area { min-height: 7rem; resize: vertical; line-height: 1.55; }

.field__input::placeholder { color: var(--color-neutral); }

@media (hover: hover) {
  .field__input:hover { background: var(--color-paper-2); }
}
.field__input:focus-visible {
  outline-color: var(--color-focus);
  border-color: var(--color-ink-2);
}
.field__input[aria-invalid="true"] { border-color: var(--color-error); }
.field__input[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Helper holds a line of height whether or not it has text — validation never
   pushes the page down. */
.field__help {
  min-height: 1.4lh;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-muted);
}
.field__help[data-tone="error"] { color: var(--color-error); }
.field__help[data-tone="error"]::before { content: "⚠ "; }

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

.btn--submit[data-state="loading"] .btn__label::after {
  content: " …";
}
.btn--submit[data-state="success"] { background: var(--color-ok); border-color: var(--color-ok); color: var(--color-accent-ink); }

.form__status {
  font-size: var(--text-sm);
  line-height: 1.5;
  max-width: 42ch;
  color: var(--color-muted);
}
.form__status[data-tone="error"] { color: var(--color-error); }
.form__status[data-tone="error"]::before { content: "⚠ "; }
.form__status[data-tone="ok"] { color: var(--color-ok); }
.form__status[data-tone="ok"]::before { content: "✓ "; }

/* ------------------------------------------------------- Ft4 colophon */

.colophon {
  padding: var(--space-xl) var(--gutter-x) var(--space-2xl);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--color-muted);
}
.colophon p { max-width: 84ch; }
.colophon__sep { padding-inline: var(--space-2xs); color: var(--color-rule-2); }
/* Inline links inside running text — exempt from the 44 px target rule (WCAG
   2.5.8 inline exception), but padded on the block axis for a kinder tap.
   Padding on an inline box grows the hit area without moving the line. */
.colophon__link {
  color: var(--color-ink-2);
  text-underline-offset: 3px;
  padding-block: var(--space-xs);
}
@media (hover: hover) {
  .colophon__link:hover { color: var(--color-accent-deep); }
}

/* --------------------------------------------------- C4 sticky bottom bar */

.stickybar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--rule-hair);
  background: var(--color-rule);
  border-block-start: var(--rule-hair) solid var(--color-ink);
  padding-block-end: env(safe-area-inset-bottom);
}

.stickybar__call,
.stickybar__book {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.stickybar__call { background: var(--color-paper); color: var(--color-ink); }
.stickybar__book { background: var(--color-ink); color: var(--color-paper); }
.stickybar__call:active { background: var(--color-paper-2); }
.stickybar__book:active { background: var(--color-ink-2); }

/* Desktop has the masthead and the hero CTA in reach; the bar is a phone tool. */
@media (min-width: 60rem) {
  .stickybar { display: none; }
}
@media (max-width: 59.99rem) {
  body { padding-block-end: 52px; }
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .btn:hover { transform: none !important; }
}