/* Compressor City — site.css
   Direction: "Type and nothing else" (seed 420918315) · General Sans · Graphite and orange.
   One radius (0), one button shape (square, 48px), one pair of margins (16–40px), five type steps plus the fitted display. */

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #18191b;
  --surface: #222427;
  --ink: #eff0f1;
  --muted: #9c9ea3;
  --accent: #ff4a1f;
  --accent-ink: #18191b;
  --field-1: #eff0f1;
  --field-1-ink: #18191b;
  --field-1-soft: rgb(24 25 27 / 0.74);
  --hero-light: #fbfbfb; /* the light ink lifted one step so the 216px line clears 3:1 on safety orange */
  --accent-press: #e63c13;

  --font: "General Sans", "Helvetica Neue", Arial, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.125rem, 1rem + 3.8vw, 4.25rem);
  --avail: calc(100vw - 2 * var(--margin));
  --step-display: min(15vw, 14.375rem);

  --margin: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --pad: clamp(4.5rem, 2.5rem + 7vw, 8.75rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; font-weight: 400; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
:target { scroll-margin-top: 2rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.on-orange :focus-visible, .on-light :focus-visible { outline-color: var(--accent-ink); }
h1, h2, h3 { font-weight: 700; text-wrap: balance; hyphens: none; }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: 0.75rem; z-index: 20; padding: 0.7rem 1rem; background: var(--ink); color: var(--bg); transform: translateY(-160%); }
.skip:focus { transform: none; }
.nums { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }

/* ---------- type roles ---------- */
.t-small { font-size: var(--step-small); line-height: 1.45; }
.t-lead { font-size: var(--step-lead); line-height: 1.35; }
.t-head { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.02em; font-weight: 700; }
.t-display { font-size: var(--step-display); line-height: 0.86; letter-spacing: -0.035em; font-weight: 700; }
.soft { color: var(--muted); }
.on-light .soft { color: var(--field-1-soft); }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.field-graphite { background: var(--bg); color: var(--ink); }
.field-surface { background: var(--surface); color: var(--ink); }
.field-light { background: var(--field-1); color: var(--field-1-ink); }
.field-orange { background: var(--accent); color: var(--accent-ink); }
.pad { padding-block: var(--pad); }
.bar { height: 8px; background: var(--accent); }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.35rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); font-weight: 500; font-size: var(--step-body); line-height: 1.1; text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button--ink { background: var(--accent-ink); color: var(--ink); }
.link { text-decoration: underline; text-decoration-color: currentColor; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-press); }
  .button--ink:hover { background: #2c2e32; }
  .link:hover { text-decoration-color: transparent; }
}

/* ---------- header ---------- */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--margin) 0; position: relative; z-index: 5; }
.mark { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px; text-decoration: none; font-weight: 500; font-size: var(--step-small); }
.mark svg { width: 34px; height: 34px; flex: none; }
.mark-word { font-size: var(--step-body); letter-spacing: -0.01em; white-space: nowrap; }
/* Argon 18 Oct, finding 8: with Contact back in the bar, the wordmark keeps its one line at 768 and the nav gives way */
.mark { flex: none; }
.site-nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }
.site-nav a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-small); font-weight: 500; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease; }
.site-nav a[aria-current="page"] { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .site-nav a:not(.button):hover { text-decoration-color: currentColor; } }
.menu { display: none; position: relative; }
.menu summary { list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.2rem; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.menu summary::-webkit-details-marker { display: none; }
/* Argon aggressive round 3 (18 Oct): the open sheet sits on the plate surface, so on the graphite pages it no longer melts into
   the page and the display title under it */
.menu-sheet { position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(20rem, calc(100vw - 2 * var(--margin))); background: var(--surface); color: var(--ink); padding: 1rem 1.25rem 1.25rem; display: grid; gap: 0.25rem; transform-origin: top right; }
.menu-sheet a { display: flex; align-items: center; min-height: 48px; font-size: var(--step-lead); font-weight: 500; text-decoration: none; }
.menu-sheet .button { margin-top: 0.6rem; font-size: var(--step-body); }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu-sheet { animation: sheet-in var(--t-ui) var(--ease-out); }
}
@keyframes sheet-in { from { opacity: 0; transform: scale(0.97) translateY(-6px); } }
/* Argon aggressive review 18 Oct, item 1: the phone in every header. In the bar it sits before the action; on phones a
   short link beside Menu (the number itself on the home page, where the bar carries no wordmark), and the full number in the menu */
.nav-phone { white-space: nowrap; }
.site-nav a.nav-phone { font-size: var(--step-body); text-decoration-color: currentColor; text-decoration-thickness: 0.07em; }
@media (hover: hover) and (pointer: fine) { .site-nav a.nav-phone:hover { text-decoration-color: transparent; } }
.head-phone { display: none; align-items: center; min-height: 44px; margin-left: auto; font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; white-space: nowrap; }
.head-phone .hp-short { display: none; }
.menu-sheet a.menu-phone { font-size: var(--step-body); text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 47.99em) {
  .site-nav { display: none; }
  .menu { display: block; }
  .head-phone { display: inline-flex; }
}
@media (max-width: 29.99em) {
  .site-head:has(.mark-word) .head-phone .hp-long { display: none; }
  .site-head:has(.mark-word) .head-phone .hp-short { display: inline; }
}
/* tablets (48-63.99em): the bar holds the wordmark, the number, the action and the Menu, which carries all four page links
   (Argon aggressive round 2, item 3: hiding two of the four links left Services and Contact, and the current-page mark on
   /contact/, out of reach); desktop keeps the four links in the bar */
@media (min-width: 48em) and (max-width: 63.99em) {
  .site-nav { margin-left: auto; }
  .site-nav a:not(.button):not(.nav-phone) { display: none; }
  .menu { display: block; }
  /* Argon aggressive round 3 (18 Oct), item 4: the bar already shows the number and the action, so the tablet Menu holds
     the four page links only (no second number, no second button) */
  .menu-sheet .menu-phone, .menu-sheet .button { display: none; }
}

/* ---------- home hero: the name, two inks ---------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto minmax(1rem, calc(14svh - 4.25rem)) auto 1fr auto; overflow: clip; }
.hero .site-head { grid-row: 1; }
.name { grid-row: 3; margin: 0; padding-inline: var(--margin); font-size: min(var(--step-display), calc(var(--avail) / 5.8)); line-height: 0.82; letter-spacing: -0.04em; font-weight: 700; }
.name .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; margin-left: -0.05em; letter-spacing: -0.04em; }
.name [data-line] { display: block; }
.name .ink-light { color: var(--hero-light); }
.name .ink-dark { color: var(--accent-ink); }
.hero-foot { grid-row: 5; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 0 var(--margin) 40px; align-items: end; }
/* Argon aggressive review 18 Oct, item 1: the bottom of the first screen says what the business is and how the match
   works (left), and carries the live thing and the phone (right) */
.hero-line { grid-column: 1 / span 7; max-width: 50ch; font-size: var(--step-lead); line-height: 1.3; font-weight: 500; text-wrap: balance; }
.hero-actions { grid-column: 8 / -1; justify-self: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem 1.5rem; }
.hero-tel { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-body); font-weight: 500; color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; white-space: nowrap; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .hero-tel:hover { text-decoration-color: transparent; } }
@media (max-width: 63.99em) {
  .hero-line { grid-column: 1 / -1; }
  .hero-actions { grid-column: 1 / -1; justify-self: start; justify-content: flex-start; margin-top: 1.5rem; }
}
/* phones and portrait tablets: both lines at the size where "Compressor" fills the measure, as on desktop.
   (The sheet's 21vw cannot hold "Compressor" on one line; hyphenating would make three lines. Round 1, problem 1.) */
@media (max-width: 37.49em), (max-width: 64em) and (max-aspect-ratio: 4/5) {
  .name { font-size: calc(var(--avail) / 5.8); }
  .name .line { white-space: nowrap; }
  /* Argon 18 Oct, finding 3: both words at one size, as on desktop (the 1.4x "City" dwarfed "Compressor"), and the hero
     no longer stretches to the full screen, so the sentence and the button follow the name instead of sitting under an
     empty orange band; the next section starts on the first screen */
  .hero { min-height: 0; }
}
@media (max-width: 64em) and (max-aspect-ratio: 4/5) and (min-width: 37.5em) {
  .hero { grid-template-rows: auto minmax(1rem, calc(20svh - 4.25rem)) auto clamp(3rem, 9svh, 6rem) auto; }
}
@media (max-width: 37.49em) {
  /* restarted round 1, problem 9: the name starts 18% down, as the sheet's phone hero says */
  .hero { grid-template-rows: auto minmax(1rem, calc(18svh - 4.25rem)) auto clamp(2.5rem, 8svh, 4.5rem) auto; }
  .hero-foot { display: block; padding-bottom: 24px; }
  .hero-line { max-width: 30ch; font-size: var(--step-lead); }
  .hero-actions { margin-top: 1.25rem; gap: 0.5rem 1.25rem; }
}

/* ---------- services: the menu sheet ---------- */
.services { padding-block: var(--pad); }
.sheet { grid-column: 2 / span 7; background: var(--field-1); color: var(--field-1-ink); padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 3.75rem); }
.sheet h2 { text-align: center; margin-bottom: 2.5rem; }
.sheet-group + .sheet-group { margin-top: 2.75rem; }
.sheet-group h3 { font-size: var(--step-lead); line-height: 1.2; margin-bottom: 1rem; font-weight: 700; letter-spacing: -0.005em; }
.sheet-item + .sheet-item { margin-top: 1.25rem; }
.sheet-row { display: flex; align-items: baseline; gap: 0.75rem; }
.verb { font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.02em; font-weight: 700; }
.leader { flex: 1 1 2rem; min-width: 1.5rem; border-bottom: 4px dotted currentColor; transform: translateY(-0.28em); opacity: 0.55; }
.route { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .route:hover { text-decoration-color: currentColor; } }
.sheet-item p { margin-top: 0.35rem; max-width: 40ch; color: var(--field-1-soft); }
.sheet-foot { margin-top: 2.75rem; text-align: center; color: var(--field-1-soft); max-width: none; }
.services-pic { grid-column: 9 / -1; align-self: start; position: sticky; top: 12vh; margin-top: 4.5rem; }
.services-pic figcaption { margin-top: 0.75rem; }
@media (max-width: 63.99em) {
  .sheet { grid-column: 1 / -1; }
  .services-pic { grid-column: 3 / -1; margin-top: 3rem; position: static; }
}
@media (max-width: 37.49em) {
  .services-pic { grid-column: 1 / -1; }
  .route { font-size: var(--step-small); }
}

/* ---------- pictures ---------- */
.pic img, .pic video { width: 100%; height: auto; background: var(--surface); }
.pic figcaption { margin-top: 0.75rem; font-size: var(--step-small); line-height: 1.45; color: var(--muted); max-width: 52ch; }
.on-light .pic figcaption { color: var(--field-1-soft); }
.pic figcaption a { color: inherit; }
.crop { overflow: hidden; }
.crop img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the nameplate ---------- */
.np-grid { align-items: start; }
.np-title { grid-column: 6 / -1; grid-row: 1; }
.np-note { grid-column: 6 / span 5; grid-row: 2; margin-top: 1.25rem; }
.np-plate { grid-column: 6 / -1; grid-row: 3; margin-top: clamp(2.5rem, 4.5vw, 4rem); }
.np-pic { grid-column: 1 / span 5; grid-row: 1 / span 3; position: sticky; top: 12vh; }
.plate-list { display: grid; gap: 1.1rem; background: var(--bg); color: var(--ink); padding: 2rem; }
.plate-list b { display: block; font-size: var(--step-lead); }
.plate { position: relative; background: var(--bg); color: var(--ink); padding: clamp(1.5rem, 3.5vw, 3rem); }
.rivet { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #3a3d42; }
.rivet:nth-of-type(1) { top: 14px; left: 14px; } .rivet:nth-of-type(2) { top: 14px; right: 14px; }
.rivet:nth-of-type(3) { bottom: 14px; left: 14px; } .rivet:nth-of-type(4) { bottom: 14px; right: 14px; }
.plate-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.75rem; }
.plate-title { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.01em; }
.plate-count { color: var(--muted); }
.plate-row { display: grid; grid-template-columns: 14px minmax(0, 15rem) minmax(0, 1fr); column-gap: 1rem; align-items: start; padding-block: 0.9rem; }
.plate-row + .plate-row { margin-top: 0.15rem; }
/* restarted round 2, problem 3: an unlit lamp is a 2px ring in the muted ink, so it never reads as another rivet; lit, it fills orange */
.lamp { width: 12px; height: 12px; border-radius: 50%; margin-top: 0.45rem; background: transparent; border: 2px solid var(--muted); transition: background-color var(--t-ui) ease, border-color var(--t-ui) ease, transform var(--t-ui) var(--ease-out); }
.plate-row.is-set .lamp { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.plate-label { font-weight: 500; }
.plate-label span { display: block; margin-top: 0.2rem; font-weight: 400; color: var(--muted); font-size: var(--step-small); line-height: 1.4; }
.plate-row.is-set .plate-label > b { color: var(--accent); }
.plate-label > b { font-weight: 500; transition: color var(--t-ui) ease; }
.plate-ctrl { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plate input[type="text"], .plate select { width: 100%; min-height: 3rem; padding: 0.65rem 0.85rem; background: var(--surface); color: var(--ink); border: 0; border-radius: var(--radius); font-size: max(1rem, var(--step-body)); transition: background-color var(--t-hover) ease; }
.plate select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-image: none; }
.plate .select { position: relative; flex: 1 1 8.5rem; }
.plate .select::after { content: ""; position: absolute; right: 0.95rem; top: 50%; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.plate .volts { flex: 0.7 1 5rem; }
.plate input::placeholder { color: #8a8c91; }
.plate input:focus-visible, .plate select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; background: #2a2c30; }
.choice { display: inline-flex; flex: 1 1 8rem; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; padding: 0 1rem; background: var(--surface); font-weight: 500; cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.choice input:checked + span { background: var(--ink); color: var(--bg); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice span:active { transform: scale(0.97); }
.plate-status { margin-top: 1.5rem; padding: 1rem 1.1rem; background: var(--surface); font-size: var(--step-body); min-height: 3.5rem; max-width: none; }
.plate-status b { color: var(--accent); font-weight: 500; }
.plate-go { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.plate-go p { color: var(--muted); max-width: 52ch; }
.plate-go .plate-go-label { color: var(--ink); font-weight: 500; }
/* Argon aggressive round 2, item 6: the three enquiry types side by side (stacked on phones) */
.plate-go-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plate-go-links .button { flex: 1 1 auto; }
@media (max-width: 37.49em) { .plate-go-links { flex-direction: column; } }
@media (max-width: 63.99em) {
  .np-title, .np-note, .np-plate, .np-pic { grid-column: 1 / -1; grid-row: auto; }
  .np-pic { margin-top: 3rem; position: static; }
}
/* restarted round 2, problem 1: the photo beside the plate is now the 4:5 crop (560 px native), so tablets give it seven columns, not the full measure */
@media (min-width: 37.5em) and (max-width: 63.99em) { .np-pic { grid-column: 1 / span 7; } }
@media (max-width: 37.49em) {
  .plate-row { grid-template-columns: 12px minmax(0, 1fr); row-gap: 0.6rem; }
  .plate-ctrl { grid-column: 2; }
  .plate { padding: 2.25rem 1.1rem 2rem; }
}

/* ---------- how it goes: four steps, four lamps ---------- */
/* Argon aggressive review 18 Oct, item 7: a visible heading with the action beside it, then the four steps side by side on
   desktop (two by two on tablets, stacked on phones). Each step carries the plate's lamp, which lights as the step enters,
   so the order reads from the lamps, not from numbers (house rule) */
.how-top { align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.how-title { grid-column: 1 / span 8; }
.how-act { grid-column: 9 / -1; justify-self: end; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; }
/* Argon aggressive round 2, item 4: lit at rest, no staggered fill (steps 3 and 4 read as unfinished while they waited) */
.step .lamp { display: block; margin: 0 0 1.25rem; background: var(--accent); border-color: var(--accent); }
.step h3 { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.01em; }
/* headlines stay in ink: the accent is reserved for actions and the active plate state (16 Oct review) */
.step p { margin-top: 0.75rem; max-width: 40ch; }
@media (max-width: 63.99em) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99em) {
  .how-title, .how-act { grid-column: 1 / -1; justify-self: start; }
  .how-act { margin-top: 1.5rem; }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem; }
}

/* ---------- the rebuild film ---------- */
.film-top { align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.film-head { grid-column: 1 / span 7; max-width: 16ch; }
.film-text { grid-column: 9 / -1; }
.film-text .t-lead { max-width: 30ch; }
.film-text .link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.75rem; font-weight: 500; }
.film-pic video, .film-pic img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 62%; }
/* restarted round 2, problem 6: the caption row carries a "Pause film" / "Play film" text button (added by js/site.js, so a page without script shows none) */
.pic .film-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; max-width: none; margin-top: 0.25rem; }
.film-cap > span { max-width: 52ch; }
.film-toggle { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-small); font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .film-toggle:hover { text-decoration-color: transparent; } }
@media (max-width: 63.99em) {
  .film-head, .film-text { grid-column: 1 / -1; }
  .film-text { margin-top: 1.5rem; }
  .film-pic video, .film-pic img { aspect-ratio: 16 / 9; }
}

/* ---------- where they work: line-up with a frame ---------- */
/* restarted round 1, problem 2: the names are the lead, at the head step (two lines at most within columns 1-8), the heading a
   single line at the same size in the accent ink (the blueprint's part heading), each live line beneath at body size */
.lineup { position: relative; }
.lineup h2 { font-size: var(--step-head); line-height: 1; letter-spacing: -0.02em; font-weight: 500; color: var(--ink); margin-bottom: clamp(1rem, 2vw, 1.75rem); }
.rows { grid-column: 1 / span 8; }
.lu-row + .lu-row { margin-top: 0.25rem; }
.lu-row a { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.55rem; padding-block: clamp(0.85rem, 1.5vw, 1.3rem); text-decoration: none; }
.lu-name { font-size: var(--step-head); line-height: 1; letter-spacing: -0.02em; font-weight: 500; text-wrap: balance; transition: color var(--t-hover) ease; }
.lu-line { font-size: var(--step-body); line-height: 1.45; color: var(--ink); transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease; }
/* Argon aggressive round 2, item 7: every row reads as a link (the line underlined, as in the enquiry routes), and the rows
   that are not lit are dimmed, not greyed out */
.lu-line { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; }
.lu-row figure { margin-top: 0.75rem; margin-bottom: 1.5rem; }
.lu-row figure img { aspect-ratio: 16 / 10; object-fit: cover; }
.lu-foot { margin-top: 2rem; }
@media (min-width: 56em) and (hover: hover) and (pointer: fine) {
  .js .lineup .rows { display: flex; flex-direction: column; min-height: calc(((100vw - 2 * var(--margin) - 11 * var(--gutter)) / 12 * 4 + 3 * var(--gutter)) * 1.25 + 2.5rem); }
  .js .lineup .rows ul { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
  .js .lu-row + .lu-row { margin-top: 0; }
  /* the frame on columns 9-12, centred on the list (the list now runs taller than the picture) */
  .js .lu-row figure { position: absolute; top: 50%; right: var(--margin); width: calc((100% - 2 * var(--margin) - 11 * var(--gutter)) / 12 * 4 + 3 * var(--gutter)); margin: 0; opacity: 0; transform: translateY(-50%); transition: opacity 420ms ease; pointer-events: none; }
  .js .lu-row figure picture { overflow: hidden; }
  .js .lu-row figure img { aspect-ratio: 4 / 5; }
  /* Argon 18 Oct, finding 4: the frame shows the last row that has a picture, so lighting the bare row never blanks it */
  .js .lu-row.is-shown figure { opacity: 1; }
  .js .lu-row:not(.is-on) .lu-name, .js .lu-row:not(.is-on) .lu-line { color: #b1b3b8; }
}
@media (max-width: 55.99em) { .rows { grid-column: 1 / -1; } }
/* Argon aggressive round 2, item 5: tablets (36-55.99em) show each row's 4:5 picture beside it on four columns, about its
   native size (515-560 px files), instead of a full-width 16:10 strip blown up from it; phones keep the full-width strip */
@media (min-width: 36em) and (max-width: 55.99em) {
  .lu-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .lu-row a { grid-column: 1 / span 8; }
  .lu-row figure { grid-column: 9 / -1; margin: 0.9rem 0 1.5rem; }
  .lu-row figure img { aspect-ratio: 4 / 5; }
}
/* wide touch screens (landscape tablets): no frame to hover, so each row carries its picture on the right */
@media (min-width: 56em) and (hover: none), (min-width: 56em) and (pointer: coarse) {
  .rows { grid-column: 1 / -1; }
  .lu-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .lu-row a { grid-column: 1 / span 8; }
  .lu-row figure { grid-column: 9 / -1; margin: 0.9rem 0 1.5rem; }
  .lu-row figure img { aspect-ratio: 4 / 3; }
}

/* ---------- contact: the phone as display type ---------- */
/* Argon aggressive review 18 Oct, item 7: no stretched middle; the sentence, the number and the actions sit together */
.call { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(3.5rem, 7vw, 6rem) var(--margin) clamp(2.5rem, 5vw, 4rem); }
.call-line { max-width: 24ch; font-size: var(--step-lead); line-height: 1.3; font-weight: 500; }
.call-number { margin: 0; max-width: none; font-size: min(var(--step-display), calc(var(--avail) / 6.3)); line-height: 0.9; letter-spacing: -0.04em; font-weight: 700; white-space: nowrap; }
.call-number .line { display: block; overflow: hidden; padding: 0.06em 0 0.14em; margin: -0.06em 0 -0.14em; }
.call-number [data-line] { display: block; }
.call-number a { text-decoration: none; transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .call-number a:hover { color: var(--accent); } }
.call-foot { display: flex; justify-content: flex-start; align-items: center; gap: 0.25rem 2rem; flex-wrap: wrap; }
.call-foot a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
@media (max-width: 37.49em) {
  .call-foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- footer: a stamped plate ---------- */
.foot { padding: clamp(3rem, 6vw, 5rem) var(--margin) 2.5rem; }
.foot-name { display: flex; align-items: center; gap: 0.9rem; }
.foot-name svg { width: 40px; height: 40px; color: var(--accent); }
.foot-name b { font-size: var(--step-lead); }
.foot-grid { margin-top: clamp(2.5rem, 5vw, 4rem); row-gap: 2rem; }
.foot-col { grid-column: span 3; }
.foot-col h2 { font-size: var(--step-small); font-weight: 500; color: var(--muted); margin-bottom: 0.4rem; }
.foot-col ul { display: grid; gap: 0; }
.foot-col a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .foot-col a:hover { text-decoration-color: currentColor; } }
.foot-col .big { font-size: var(--step-lead); font-weight: 500; }
.foot-col p { max-width: 28ch; }
@media (max-width: 63.99em) { .foot-col { grid-column: span 6; } }
@media (max-width: 30em) { .foot-col { grid-column: 1 / -1; } }

/* ---------- inner pages ---------- */
.page-hero { padding-top: clamp(3rem, 8vw, 7rem); padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.page-title { font-size: min(var(--step-display), calc(var(--avail) / var(--fit, 6.2))); line-height: 0.86; letter-spacing: -0.035em; margin-left: -0.04em; }
.page-title .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.page-title [data-line] { display: block; }
.page-hero-foot { margin-top: clamp(2rem, 4vw, 3.5rem); align-items: end; }
.page-hero-foot .t-lead { grid-column: 1 / span 6; max-width: 34ch; }
.page-hero-foot .t-lead { max-width: 40ch; }
/* Argon aggressive review 18 Oct, item 3: the inner heroes carry the action and the phone */
.page-hero-actions { grid-column: 8 / -1; justify-self: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem 1.5rem; }
.page-hero-actions .hero-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-body); font-weight: 500; white-space: nowrap; }
/* Argon aggressive round 2, item 1: on desktop the lead picture starts inside the first screen. The title keeps its two
   lines at about four fifths of the measure (capped by the screen height), the padding is tighter and the sentence runs on
   seven columns (three lines), so at 1440 x 900 the picture enters at about two thirds down */
@media (min-width: 64em) {
  .page-hero { padding-top: clamp(2.5rem, 4vw, 4rem); padding-bottom: clamp(2.5rem, 3.5vw, 3.5rem); }
  .page-hero .page-title { font-size: min(var(--step-display), calc(var(--avail) / var(--fit, 6.2) * 0.8), 19svh); }
  .page-hero-foot { margin-top: clamp(1.75rem, 2.5vw, 2.5rem); }
  .page-hero-foot .t-lead { grid-column: 1 / span 7; max-width: 46ch; }
  .page-hero-actions { grid-column: 9 / -1; }
  .apps-intro-band { padding-top: clamp(2.5rem, 4vw, 3.5rem); }
}
@media (max-width: 63.99em) {
  .page-hero-foot .t-lead, .page-hero-actions { grid-column: 1 / -1; justify-self: start; justify-content: flex-start; }
  .page-hero-actions { margin-top: 1.5rem; }
}
.band { margin: 0; }
.band img { width: 100%; height: auto; }
.band figcaption { padding: 0.75rem var(--margin) 0; }

/* the compressor families: line-up at one size */
.types-title { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.types { width: 100%; border-collapse: collapse; font-size: var(--step-lead); line-height: 1.35; }
.types th, .types td { text-align: left; vertical-align: top; padding: 0.7rem var(--gutter) 0.7rem 0; font-weight: 400; }
/* Argon 18 Oct, finding 8: the column heads at the body step and weight 500, so the 26 px rows no longer swamp them */
.types thead th { color: var(--muted); font-size: var(--step-body); font-weight: 500; padding-bottom: 0.4rem; }
.types tbody th { width: 33%; font-weight: 500; }
.types td:nth-child(2) { width: 33%; }
@media (max-width: 47.99em) {
  .types thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .types, .types tbody, .types tr, .types th, .types td { display: block; width: auto !important; }
  .types tr + tr { margin-top: 1.4rem; }
  .types th, .types td { padding: 0; }
  .types tbody th { font-size: var(--step-lead); }
  .types td { font-size: var(--step-body); color: var(--muted); }
  .types td + td { margin-top: 0.3rem; }
  /* Argon aggressive review 18 Oct, item 10: the stacked rows keep their column names */
  .types td[data-label]::before { content: attr(data-label) ": "; color: var(--ink); font-weight: 500; }
}

/* split: before you order */
/* restarted round 2, problem 5: the text starts on the picture's top edge (the heading's cap line where the browser trims it).
   Argon aggressive review 18 Oct, item 4: the column runs the picture's full height (heading and sentence at the top, the
   three checks in the middle, the note and the action at the foot) and the picture stands on the grid's 9 line, the same
   right-hand column as the mosaic below it */
.split-grid { align-items: stretch; }
.split-text { grid-column: 1 / span 7; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2rem, 4vw, 3rem); }
.split-text h2 { margin-bottom: 1.5rem; text-box: trim-start cap alphabetic; }
.split-checks { display: grid; gap: 1.5rem; }
.split-checks dt { font-size: var(--step-lead); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.split-checks dd { margin-top: 0.35rem; max-width: 46ch; }
.split-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.split-foot p { max-width: 30ch; }
.split-pic { grid-column: 9 / -1; align-self: start; }
@media (max-width: 47.99em) { .split-text, .split-pic { grid-column: 1 / -1; } .split-pic { margin-top: 2.5rem; } }
@media (min-width: 48em) and (max-width: 63.99em) { .split-text { grid-column: 1 / span 7; } .split-pic { grid-column: 8 / -1; } }

/* mosaic: where compressors live */
.mosaic-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.mosaic { row-gap: var(--gutter); }
.mosaic .m-a { grid-column: 1 / span 8; grid-row: 1 / span 2; display: flex; flex-direction: column; }
.mosaic .m-a video { flex: 1 1 0; min-height: 18rem; height: auto; object-fit: cover; }
.mosaic .m-b, .mosaic .m-c { grid-column: 9 / -1; }
.mosaic-note { margin-top: 2rem; color: var(--muted); }
/* restarted round 2: the film's caption row now holds the 44px Pause film button, so every mosaic caption gets the same
   44px row and 0.75rem gap; the film and the crated picture then end on one line */
@media (min-width: 48em) {
  .mosaic .pic figcaption { min-height: 44px; }
  .mosaic .pic .film-cap { margin-top: 0.75rem; flex-wrap: nowrap; }
  .mosaic .film-toggle { flex: none; }
}
@media (max-width: 47.99em) {
  .mosaic .m-a, .mosaic .m-b, .mosaic .m-c { grid-column: 1 / -1; grid-row: auto; }
  .mosaic .m-a { display: block; }
  .mosaic .m-a video { aspect-ratio: 16 / 9; min-height: 0; }
}

/* rows: questions before you send */
.qa-head { grid-column: 1 / span 5; }
.qa { grid-column: 7 / -1; display: grid; gap: 2.25rem; }
.qa dt { font-size: var(--step-lead); font-weight: 500; line-height: 1.3; }
.qa dd { margin-top: 0.5rem; max-width: 58ch; }
@media (max-width: 63.99em) { .qa-head, .qa { grid-column: 1 / -1; } .qa { margin-top: 2rem; } }

/* routes: the three enquiry choices */
.routes-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.route-list li + li { margin-top: 0.25rem; }
.route-big { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); align-items: baseline; padding-block: 0.8rem; text-decoration: none; }
.route-big b { font-size: var(--step-head); line-height: 1; letter-spacing: -0.02em; transition: transform var(--t-ui) var(--ease-out); display: inline-block; }
.route-big span { font-size: var(--step-lead); line-height: 1.35; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .route-big:hover b { transform: translateX(0.25em); } .route-big:hover span { text-decoration-color: transparent; } }
.routes-foot { margin-top: 2rem; }
@media (max-width: 37.49em) { .route-big { grid-template-columns: 1fr; } .route-big span { font-size: var(--step-body); margin-top: 0.3rem; } }

/* applications */
/* Argon aggressive review 18 Oct, item 5: the plate runs the picture's height in the nameplate's language (surface, four
   rivets), and its five applications are links that open the home nameplate with that application chosen */
.apps-intro { align-items: stretch; }
.apps-intro .pic { grid-column: 1 / span 8; }
.apps-plate { grid-column: 9 / -1; display: flex; flex-direction: column; gap: 0; color: var(--ink); padding: clamp(1.75rem, 3vw, 2.5rem);
  background-color: var(--surface); background-image: url(/css/rivet.svg), url(/css/rivet.svg), url(/css/rivet.svg), url(/css/rivet.svg); background-repeat: no-repeat; background-size: 10px 10px;
  background-position: 14px 14px, calc(100% - 14px) 14px, 14px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px); }
.apps-plate h2 { font-size: var(--step-lead); line-height: 1.25; margin-bottom: 0.6rem; }
.apps-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 2rem; }
/* Argon aggressive round 2, item 1: beside the picture the five applications are a full-width list that fills the plate,
   so the heading and the choices no longer sit at its two ends with an empty middle */
@media (min-width: 64em) {
  .apps-chips { flex-direction: column; flex-wrap: nowrap; gap: 0.4rem; padding-top: 1.75rem; }
  .apps-chip { width: 100%; }
}
.apps-chip { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.1rem; background: var(--bg); color: var(--ink); font-weight: 500; text-decoration: none; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.apps-chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .apps-chip:hover { background: var(--accent); color: var(--accent-ink); } }
@media (max-width: 63.99em) { .apps-intro .pic, .apps-plate { grid-column: 1 / -1; } .apps-plate { margin-top: 2rem; } }
.app-list li + li { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.app { align-items: start; }
/* Argon 18 Oct, finding 1: the live "Restaurants and commercial kitchens" holds two lines in its six columns: the four
   application names share one size, the head step capped so "commercial kitchens" (9.91 em) fits half the measure
   (two columns) or the whole measure (stacked) */
.app h3 { grid-column: 1 / span 6; font-size: min(var(--step-head), calc((var(--avail) - var(--gutter)) / 20.6)); line-height: 1; letter-spacing: -0.02em; }
.app p { grid-column: 1 / span 5; margin-top: 1rem; }
.app p.t-lead { font-size: var(--step-lead); line-height: 1.35; }
.app .pic { grid-column: 7 / -1; grid-row: 1 / span 3; }
.app--flip h3, .app--flip p { grid-column: 7 / -1; }
.app--flip .pic { grid-column: 1 / span 6; }
/* Argon aggressive review 18 Oct, items 5 and 9: every application ends on its own enquiry link, and the fourth has its
   picture (a 4:5 crop, 528 px native, so it takes four columns on the left and the text moves to 6-12) */
.app .app-go a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.app--portrait .pic { grid-column: 1 / span 4; grid-row: 1 / span 4; }
.app--portrait h3, .app--portrait p { grid-column: 6 / -1; }
.app .pic { grid-row: 1 / span 4; }
@media (max-width: 47.99em) { .app h3, .app p, .app .pic, .app--flip h3, .app--flip p, .app--flip .pic, .app--portrait h3, .app--portrait p, .app--portrait .pic { grid-column: 1 / -1; grid-row: auto; } .app h3 { font-size: min(var(--step-head), calc(var(--avail) / 10.3)); } .app .pic { margin-top: 1.5rem; } .app--portrait .pic { max-width: 26rem; } }
@media (min-width: 48em) and (max-width: 63.99em) { .app--portrait .pic { grid-column: 1 / span 5; } .app--portrait h3, .app--portrait p { grid-column: 7 / -1; } }
.roof-text { margin-top: 0; margin-bottom: clamp(2rem, 4vw, 3rem); }
/* Argon aggressive round 3 (18 Oct), item 6: the opened rooftop unit (columns 1-7, 3:2) and the roof (8-12), both cut to the
   unit's height (container units), so the pictures and their captions start and end together */
.roof-pics { container-type: inline-size; align-items: start; }
.roof-a { grid-column: 1 / span 7; }
.roof-b { grid-column: 8 / -1; }
.roof-pics .pic img { height: calc(((100cqi - 11 * var(--gutter)) / 12 * 7 + 6 * var(--gutter)) / 1.5); object-fit: cover; }
@media (max-width: 47.99em) {
  .roof-a, .roof-b { grid-column: 1 / -1; }
  .roof-b { margin-top: 2rem; }
  .roof-pics .pic img { height: auto; }
  .roof-b img { aspect-ratio: 4 / 3; }
}
.roof-text h2 { grid-column: 1 / span 7; }
.roof-text p { grid-column: 9 / -1; align-self: end; }
@media (max-width: 63.99em) { .roof-text h2, .roof-text p { grid-column: 1 / -1; } .roof-text p { margin-top: 1rem; } }

/* ---------- contact page: the funnel, restyled ---------- */
/* Argon aggressive round 3 (18 Oct), item 3: one grid. Heading and sentence on columns 1-7; the number and the email on a
   plate (surface, four rivets: the nameplate's language) on 9-12 from the heading's top to the sentence's foot, so the
   upper right of the first desktop screen is no longer empty; tighter spacing above and below on desktop */
.contact-hero { padding-top: clamp(2.5rem, 6vw, 5rem); row-gap: 1.25rem; align-items: start; }
.contact-hero h1 { grid-column: 1 / span 8; font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.02em; max-width: 16ch; }
.contact-hero .finish-intro { grid-column: 1 / span 7; max-width: 40ch; }
.finish-contact { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 1.25rem;
  padding: clamp(1.75rem, 2.5vw, 2.25rem); background-color: var(--surface); background-image: url(/css/rivet.svg), url(/css/rivet.svg), url(/css/rivet.svg), url(/css/rivet.svg); background-repeat: no-repeat; background-size: 10px 10px;
  background-position: 14px 14px, calc(100% - 14px) 14px, 14px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px); }
.finish-contact p { font-size: var(--step-body); line-height: 1.4; color: var(--ink); max-width: 26ch; }
.finish-contact a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-lead); font-weight: 500; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; text-decoration-color: currentColor; transition: text-decoration-color var(--t-hover) ease; overflow-wrap: anywhere; }
.finish-contact p + a { margin-top: auto; }
.finish-contact a + a { margin-top: -1rem; font-size: var(--step-body); }
@media (hover: hover) and (pointer: fine) { .finish-contact a:hover { text-decoration-color: transparent; } }
.prefill-note { grid-column: 1 / -1; padding: 1rem 1.1rem; background: var(--surface); max-width: 60ch; }
.prefill-note b { color: var(--accent); font-weight: 500; }
@media (min-width: 64em) { .contact-hero { padding-top: clamp(2.5rem, 4vw, 3.5rem); } }
/* tablets and phones: heading and sentence across, the plate under them with the line on the left and the number and the
   email on the right (stacked on phones) */
@media (max-width: 63.99em) {
  .contact-hero h1, .contact-hero .finish-intro { grid-column: 1 / -1; }
  .finish-contact { grid-column: 1 / -1; grid-row: auto; margin-top: 0.75rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--gutter); row-gap: 0; }
  .finish-contact p { grid-row: 1 / span 2; }
  .finish-contact a + a { margin-top: 0; }
}
@media (max-width: 47.99em) {
  .finish-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .finish-contact a + a { margin-top: -0.75rem; }
}

.finish-shell { padding-bottom: var(--pad); }
.finish-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; margin-top: clamp(3rem, 6vw, 5rem); padding-inline: var(--margin); align-items: start; }
@media (min-width: 64em) { .finish-grid { margin-top: clamp(2.5rem, 4vw, 3.5rem); } }
.finish-grid > noscript, .funnel-chooser, .finish-aside { grid-column: 1 / -1; }
.finish-grid > .prefill-note:not([hidden]) + * { margin-top: -1.5rem; }
.funnel-details { grid-column: 1 / span 7; }
.funnel-details:not([hidden]) + .finish-aside { grid-column: 9 / -1; }
@media (max-width: 63.99em) { .funnel-details, .funnel-details:not([hidden]) + .finish-aside { grid-column: 1 / -1; } }

.funnel-chooser h2 { font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.005em; margin-bottom: 1rem; }
.funnel-details h2 { font-size: var(--step-head); line-height: 1; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.funnel-options { display: grid; gap: 0.5rem; }
/* restarted round 1, problem 5: each choice is a small plate in the nameplate's language: the plate surface, a rivet in each
   corner (one 10px SVG dot, four background layers) and a lamp that lights when the choice is made (aria-pressed) */
.funnel-option { position: relative; display: grid; grid-template-columns: 12px minmax(0, 5fr) minmax(0, 7fr); column-gap: 1rem; align-items: baseline; width: 100%; min-height: 4.5rem; padding: 1.75rem 2rem 1.75rem 2.5rem; text-align: left; color: var(--ink);
  background-color: var(--surface); background-image: url(/css/rivet.svg), url(/css/rivet.svg), url(/css/rivet.svg), url(/css/rivet.svg); background-repeat: no-repeat; background-size: 10px 10px;
  background-position: 14px 14px, calc(100% - 14px) 14px, 14px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px);
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
/* restarted round 2, problem 3: at rest the lamp is an unlit ring (2px, muted ink), so it is not a fifth grey dot beside the four rivets */
.funnel-option::before { content: ""; grid-column: 1; grid-row: 1; align-self: center; width: 12px; height: 12px; border-radius: 50%; background: transparent; border: 2px solid var(--muted); transition: background-color var(--t-ui) ease, border-color var(--t-ui) ease, transform var(--t-ui) var(--ease-out); }
.funnel-option strong { grid-column: 2; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; transition: color var(--t-ui) ease; }
.funnel-option > span { grid-column: 3; font-size: var(--step-body); line-height: 1.4; }
.funnel-option[aria-pressed="true"] { background-color: #2c2e32; }
.funnel-option[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.funnel-option[aria-pressed="true"] strong { color: var(--accent); }
.funnel-option:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .funnel-option:not([aria-pressed="true"]):hover { background-color: #2c2e32; } }
.funnel-choice-status { margin-top: 1rem; color: var(--muted); }
/* phones: the lamp moves in and down, about 40px from the corner rivet's centre instead of 30 (restarted round 2, problem 3) */
@media (max-width: 37.49em) { .funnel-option { grid-template-columns: 12px minmax(0, 1fr); padding: 1.75rem 1.5rem 1.6rem 3rem; } .funnel-option > span { grid-column: 2; margin-top: 0.5rem; } }
/* Argon aggressive review 18 Oct, item 8: the lamp sits on the title's line, whatever the description wraps to (it was
   centred on a two-line row at 768 and floated below "Rebuild") */
.funnel-option { align-items: start; }
.funnel-option::before { align-self: start; margin-top: calc((var(--step-lead) * 1.2 - 12px) / 2); }
@media (min-width: 37.5em) and (max-width: 63.99em) { .funnel-option > span { padding-top: 0.2rem; } }

.funnel-details { margin-top: 1rem; }
.funnel-details:focus-within h2, #funnel-form-title:focus { outline: none; }
#funnel-form-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
#funnel-form-intro { font-size: var(--step-lead); line-height: 1.35; margin-bottom: 1.5rem; max-width: 40ch; }
.finish-form > p:first-child { margin-bottom: 1.5rem; }
.finish-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem var(--gutter); }
.finish-field { display: grid; gap: 0.45rem; font-weight: 500; font-size: var(--step-body); }
.finish-wide { grid-column: 1 / -1; }
.finish-field input, .finish-field textarea { width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem; background: var(--surface); color: var(--ink); border: 0; border-radius: var(--radius); font-weight: 400; font-size: max(1rem, var(--step-body)); line-height: 1.45; transition: background-color var(--t-hover) ease; }
.finish-field textarea { resize: vertical; }
.finish-field input::placeholder, .finish-field textarea::placeholder { color: #8a8c91; }
.finish-field input:focus-visible, .finish-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; background: #2a2c30; }
.finish-form button[type="submit"], .finish-action { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.35rem; margin-top: 1.5rem; background: var(--accent); color: var(--accent-ink); font-weight: 500; text-decoration: none; cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.finish-form button[type="submit"]:active, .finish-action:active { transform: scale(0.97); }
.finish-form button[type="submit"]:disabled { opacity: 0.55; cursor: default; }
.finish-action.secondary { background: var(--surface); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .finish-form button[type="submit"]:hover, .finish-action:hover { background: var(--accent-press); } .finish-action.secondary:hover { background: #2c2e32; } }
.finish-small { margin-top: 1rem; color: var(--muted); font-size: var(--step-small); }
#enquiry-status { margin-top: 1rem; }
#enquiry-status:empty { display: none; }
#enquiry-preview { margin-top: 2rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); }
#enquiry-preview:focus { outline: none; }
#enquiry-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#enquiry-preview h2 { font-size: var(--step-lead); line-height: 1.25; margin-bottom: 1rem; }
#enquiry-packet { min-height: 14rem; background: var(--bg); font-size: var(--step-small); }
.funnel-delivery { margin-top: 0.5rem; }
.funnel-delivery p { margin-top: 0.75rem; }
.finish-actions { display: flex; flex-wrap: wrap; gap: 0 0.6rem; }
@media (max-width: 37.49em) { .finish-fields { grid-template-columns: 1fr; } }

.finish-aside { padding: 0; }
.finish-aside h2 { font-size: var(--step-lead); line-height: 1.25; margin-bottom: 0.9rem; }
.finish-aside h2 ~ h2 { margin-top: 2rem; }
.finish-aside ul, .finish-aside ol { padding: 0; margin: 0; list-style: none; display: grid; gap: 0.55rem; }
.finish-aside ul li { padding-left: 1.1rem; position: relative; }
.finish-aside ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--muted); }
.finish-aside ol strong { font-weight: 500; }
.finish-aside details { margin-top: 1.25rem; }
.finish-aside details + details { margin-top: 0.4rem; }
.finish-aside summary { display: flex; align-items: center; min-height: 44px; font-weight: 500; cursor: pointer; list-style: none; }
.finish-aside summary::-webkit-details-marker { display: none; }
.finish-aside summary::before { content: "+"; display: inline-block; width: 1.2rem; color: var(--muted); font-weight: 700; transition: transform var(--t-ui) var(--ease-out); }
.finish-aside details[open] summary::before { transform: rotate(45deg); }
.finish-aside details p { margin: 0.25rem 0 0.5rem 1.2rem; }
.finish-col > ul:last-child { margin-top: 1.75rem; }
.finish-col > ul:last-child li::before { display: none; }
.finish-col > ul:last-child li { padding-left: 0; }
.finish-col > ul:last-child a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.finish-col > h2:first-child + details { margin-top: 0.4rem; }
.finish-col + .finish-col { margin-top: 2.5rem; }
/* desktop: the three choices run across the page; before a choice the aside is a band of three columns on the
   grid's 1 / 5 / 9 lines, and once the form opens it stands beside it (after the base rules so it wins) */
@media (min-width: 64em) {
  .funnel-options { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
  .funnel-option { grid-template-columns: 12px minmax(0, 1fr); align-content: start; min-height: 8.5rem; padding: 2rem 2.25rem 2.25rem 2.5rem; }
  .funnel-option > span { grid-column: 2; margin-top: 0.75rem; max-width: 30ch; }
}
/* Argon aggressive round 2, item 2: two explicit columns on the grid's 1 and 7 lines (CSS grid, not multi-column), the
   questions under their own heading. Argon aggressive round 3 (18 Oct), item 3: from 48em, not 64em, so a 768 tablet no
   longer runs the short checklist lines down one full-width column (the 64em rule above stacks them beside the open form) */
@media (min-width: 48em) {
  .finish-aside { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .finish-col:first-child { grid-column: 1 / span 6; }
  .finish-col + .finish-col { grid-column: 7 / -1; margin-top: 0; }
}
/* once the form opens the aside stands beside it and its two columns stack */
@media (min-width: 64em) {
  .funnel-details:not([hidden]) + .finish-aside { display: block; }
  .funnel-details:not([hidden]) + .finish-aside .finish-col + .finish-col { margin-top: 2.5rem; }
}

.helps-head { align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.helps-head h2 { grid-column: 1 / span 6; }
.helps-head p { grid-column: 9 / -1; }
/* small and large, then large and small (4 + 8, 8 + 4). Restarted round 1, problem 4: every picture in the block is cut to one
   height, the height of a 4:5 picture on four columns (container units), so the pictures and captions of a row start and end
   together whatever the gutter does */
.helps { container-type: inline-size; row-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.helps .help-big:nth-child(1) { grid-column: 1 / span 8; }
.helps .help-small:nth-child(2) { grid-column: 9 / -1; }
.helps .help-small:nth-child(3) { grid-column: 1 / span 4; }
.helps .help-big:nth-child(4) { grid-column: 5 / -1; }
.helps .pic img { height: calc(((100cqi - 11 * var(--gutter)) / 12 * 4 + 3 * var(--gutter)) * 1.25); object-fit: cover; }
@media (max-width: 63.99em) { .helps-head h2, .helps-head p { grid-column: 1 / -1; } .helps-head p { margin-top: 1rem; } }
@media (max-width: 37.49em) {
  .helps .help-big:nth-child(n), .helps .help-small:nth-child(n) { grid-column: 1 / -1; }
  .helps .help-small img { height: auto; aspect-ratio: 4 / 5; }
  .helps .help-big img { height: auto; aspect-ratio: 3 / 2; }
}

/* privacy and credits */
.doc { padding-top: clamp(3rem, 7vw, 6rem); }
.doc h1 { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.02em; }
.doc-lede { margin-top: 1.5rem; font-size: var(--step-lead); line-height: 1.35; max-width: 46ch; }
.doc-body { margin-top: clamp(3rem, 6vw, 5rem); row-gap: 2.5rem; }
.doc-body h2 { grid-column: 1 / span 4; font-size: var(--step-lead); line-height: 1.25; }
.doc-body .doc-text { grid-column: 5 / span 7; }
.doc-body .doc-text p + p { margin-top: 1em; }
@media (max-width: 47.99em) { .doc-body h2, .doc-body .doc-text { grid-column: 1 / -1; } .doc-body .doc-text { margin-top: -1.5rem; } }
.credits { margin-top: clamp(3rem, 6vw, 5rem); display: grid; gap: 2.5rem; }
.credit { align-items: start; }
.credit picture { grid-column: 1 / span 3; }
.credit img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }
.credit div { grid-column: 5 / span 7; }
.credit b { display: block; font-size: var(--step-lead); line-height: 1.3; font-weight: 500; }
.credit span { display: block; margin-top: 0.5rem; }
.credit span a { color: var(--ink); }
@media (max-width: 47.99em) { .credit picture { grid-column: 1 / span 5; } .credit div { grid-column: 6 / -1; } .credit b { font-size: var(--step-body); } }
/* Argon aggressive round 3 (18 Oct), item 8: tablets give the picture four columns (text 5-12); desktop runs the twelve
   entries in two columns, picture and text side by side in each, so the page is about half as tall and no row is mostly empty */
@media (min-width: 48em) and (max-width: 63.99em) { .credit picture { grid-column: 1 / span 4; } .credit div { grid-column: 5 / -1; } }
@media (min-width: 64em) {
  .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; }
  .credit { display: flex; gap: var(--gutter); }
  .credit picture { flex: 0 0 38%; }
  .credit div { flex: 1 1 0; min-width: 0; }
  .credit b { line-height: 1.25; }
}

/* ---------- motion (content stays visible without script and under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .name [data-line], .js .page-title [data-line] { transform: translateY(108%); animation: line-up 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js [data-rise] { opacity: 0; transform: translateY(16px); animation: rise 700ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 80ms + 520ms); }

  .js [data-reveal] { opacity: 0; transform: translateY(var(--rise, 24px)); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 75ms); }
  .js [data-reveal="left"] { transform: translateX(-36px); }
  .js [data-reveal="settle"] { transform: scale(0.965); transition-duration: 900ms, 1300ms; }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .js [data-reveal="shutter"] { opacity: 1; transform: none; }
  .js [data-reveal="shutter"] .crop { clip-path: inset(100% 0 0 0); transition: clip-path 650ms var(--ease-out); }
  .js [data-reveal="shutter"] .crop img { transform: scale(1.08); transition: transform 900ms var(--ease-soft); }
  .js [data-reveal="shutter"].is-in .crop { clip-path: inset(0 0 0 0); }
  .js [data-reveal="shutter"].is-in .crop img { transform: none; }

  .js .call-number [data-line] { transform: translateY(108%); transition: transform 1000ms var(--ease-out); }
  .js .call-number.is-in [data-line] { transform: none; }
  .js .call-number[data-reveal] { opacity: 1; transform: none; }


  /* the contract markup carries no reveal attributes, so its parts enter by CSS alone, once, on load */
  .js .funnel-chooser h2, .js .funnel-option, .js .funnel-choice-status, .js .finish-col > * { animation: rise-in 700ms var(--ease-out) both; }
  .js .funnel-chooser h2 { animation-delay: 300ms; }
  .js .funnel-option:nth-child(1) { animation-delay: 380ms; } .js .funnel-option:nth-child(2) { animation-delay: 450ms; } .js .funnel-option:nth-child(3) { animation-delay: 520ms; }
  .js .funnel-choice-status { animation-delay: 600ms; }
  .js .finish-col > :nth-child(1) { animation-delay: 520ms; } .js .finish-col > :nth-child(2) { animation-delay: 580ms; } .js .finish-col > :nth-child(3) { animation-delay: 640ms; }
  .js .finish-col > :nth-child(4) { animation-delay: 700ms; } .js .finish-col > :nth-child(n+5) { animation-delay: 760ms; }
  .js .funnel-details:not([hidden]) { animation: rise-in 600ms var(--ease-out) both; }
  .lu-row figure img { transition: transform 1200ms var(--ease-soft); }

  @supports (animation-timeline: view()) {
    .drift img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes drift { from { transform: scale(1.08) translateY(-3%); } to { transform: scale(1.08) translateY(3%); } }
  }
}
/* restarted round 1, problem 3: the "not on" zoom belongs to the hover frame only (inline phone pictures bled past the margin) */
@media (prefers-reduced-motion: no-preference) and (min-width: 56em) and (hover: hover) and (pointer: fine) {
  .js .lu-row:not(.is-shown) figure img { transform: scale(1.04); }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }

.zigzag { clip-path: polygon(0.000% 0px, 1.471% 12px, 2.941% 0px, 4.412% 12px, 5.882% 0px, 7.353% 12px, 8.824% 0px, 10.294% 12px, 11.765% 0px, 13.235% 12px, 14.706% 0px, 16.176% 12px, 17.647% 0px, 19.118% 12px, 20.588% 0px, 22.059% 12px, 23.529% 0px, 25.000% 12px, 26.471% 0px, 27.941% 12px, 29.412% 0px, 30.882% 12px, 32.353% 0px, 33.824% 12px, 35.294% 0px, 36.765% 12px, 38.235% 0px, 39.706% 12px, 41.176% 0px, 42.647% 12px, 44.118% 0px, 45.588% 12px, 47.059% 0px, 48.529% 12px, 50.000% 0px, 51.471% 12px, 52.941% 0px, 54.412% 12px, 55.882% 0px, 57.353% 12px, 58.824% 0px, 60.294% 12px, 61.765% 0px, 63.235% 12px, 64.706% 0px, 66.176% 12px, 67.647% 0px, 69.118% 12px, 70.588% 0px, 72.059% 12px, 73.529% 0px, 75.000% 12px, 76.471% 0px, 77.941% 12px, 79.412% 0px, 80.882% 12px, 82.353% 0px, 83.824% 12px, 85.294% 0px, 86.765% 12px, 88.235% 0px, 89.706% 12px, 91.176% 0px, 92.647% 12px, 94.118% 0px, 95.588% 12px, 97.059% 0px, 98.529% 12px, 100.000% 0px, 100.000% 100%, 98.529% calc(100% - 12px), 97.059% 100%, 95.588% calc(100% - 12px), 94.118% 100%, 92.647% calc(100% - 12px), 91.176% 100%, 89.706% calc(100% - 12px), 88.235% 100%, 86.765% calc(100% - 12px), 85.294% 100%, 83.824% calc(100% - 12px), 82.353% 100%, 80.882% calc(100% - 12px), 79.412% 100%, 77.941% calc(100% - 12px), 76.471% 100%, 75.000% calc(100% - 12px), 73.529% 100%, 72.059% calc(100% - 12px), 70.588% 100%, 69.118% calc(100% - 12px), 67.647% 100%, 66.176% calc(100% - 12px), 64.706% 100%, 63.235% calc(100% - 12px), 61.765% 100%, 60.294% calc(100% - 12px), 58.824% 100%, 57.353% calc(100% - 12px), 55.882% 100%, 54.412% calc(100% - 12px), 52.941% 100%, 51.471% calc(100% - 12px), 50.000% 100%, 48.529% calc(100% - 12px), 47.059% 100%, 45.588% calc(100% - 12px), 44.118% 100%, 42.647% calc(100% - 12px), 41.176% 100%, 39.706% calc(100% - 12px), 38.235% 100%, 36.765% calc(100% - 12px), 35.294% 100%, 33.824% calc(100% - 12px), 32.353% 100%, 30.882% calc(100% - 12px), 29.412% 100%, 27.941% calc(100% - 12px), 26.471% 100%, 25.000% calc(100% - 12px), 23.529% 100%, 22.059% calc(100% - 12px), 20.588% 100%, 19.118% calc(100% - 12px), 17.647% 100%, 16.176% calc(100% - 12px), 14.706% 100%, 13.235% calc(100% - 12px), 11.765% 100%, 10.294% calc(100% - 12px), 8.824% 100%, 7.353% calc(100% - 12px), 5.882% 100%, 4.412% calc(100% - 12px), 2.941% 100%, 1.471% calc(100% - 12px), 0.000% 100%); }