/* E&M Machine Solutions: shared stylesheet (trial build, direction A).
   Plain CSS, no build step. Tokens come from content/brief.md section 7.
   Taste-skill round of 19/10/2026, approved by Eros:
   - one type scale of six sizes and one body size, as tokens (--fs-*);
   - one dominant title on every first screen (--fs-title, about 96 px at 1440);
   - only the lines that come from his documents: the 3 px Marine rule under the header, the
     section-title bar with its thin rule, table borders and the chamfers. Everything else is
     separated by white surfaces on the grey canvas and by space, never by an outline;
   - "Machine down?" on the home page picks the machine and the symptom before the email opens.
   Answers to the review questions, 19/10/2026 (late):
   - no photographs: the four archive pictures of 19/10 came off on 20/10/2026, Eros's choice;
   - the machine schematics drawn larger in the tiles, on Machines and in the picker, never on a
     first screen;
   - small motion below the fold only: blocks fade and rise 16 px once as they come into view
     (site.js adds .rv only to blocks that start below the first screen), plus press and hover
     states. Nothing moves with prefers-reduced-motion, and nothing is hidden without the script. */

/* ---------- Fonts ----------
   Barlow and Inter are served from the site itself since 20/10/2026 (latin subset, from Google
   Fonts, SIL Open Font License: OFL-Barlow.txt and OFL-Inter.txt in the same folder), so the site
   makes no outside requests. On Windows, Bahnschrift and Segoe UI come first and these never load. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-variable.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --marine: #0078BF;
  --dark-blue: #042F56;
  --ice: #A3D8E1;
  --blue-gray: #5B6579;
  --ash: #9B9EA0;          /* only inside logo-dark.svg, never a text colour */
  --steel: #5E7488;        /* text only on white surfaces (4.85); 3.53 on the canvas, so not there */
  --steel-light: #E6EDF3;  /* hover on white, light text on dark bands */
  --canvas: #D6DEE6;       /* the page canvas: Steel Light deepened, 19/10/2026 */
  --muted: #525B6E;        /* Blue Gray deepened for small text on the canvas: 5.02:1 (Blue Gray is 4.31 there) */
  --ink: #1B2733;
  --border: #C9D4DE;       /* only for table borders and the thin rule under section titles */
  --white: #FFFFFF;

  --font-head: Bahnschrift, "Barlow", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-body: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;

  /* Type scale: six sizes, one body size. Values at 1440 / 768 / 390 px */
  --fs-title:   clamp(1.625rem, 0.4rem + 6.6vw, 6rem);      /* the page title (h1): 96 / 57 / 32 */
  /* the inner pages' titles are one to four short words: on phones they keep 44 px instead of 32
     (the home title needs 32 to stay on two lines at 320 px); from about 660 px up it is --fs-title */
  --fs-title-short: max(var(--fs-title), 2.75rem);
  --fs-section: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);     /* section and band titles, closing headings: 36 / 28 / 24 */
  --fs-item:    clamp(1.25rem, 1.1rem + 0.4vw, 1.375rem);   /* item headings, table labels, statements: 22 / 21 / 20 */
  --fs-lead:    clamp(1.125rem, 1.02rem + 0.35vw, 1.25rem); /* the sentence under a title, large buttons: 20 / 19 / 18 */
  --fs-body:    1.0625rem;                                  /* all running text: 17 */
  --fs-small:   0.9375rem;                                  /* nav, legal lines, placeholder tags: 15 */
  --lh-body: 1.55;

  --wrap: 1200px;
  --pad: clamp(16px, 4vw, 40px);
  --gap: 24px;
  --section-y: clamp(72px, 8.5vw, 128px);
  --chamfer: 14px;
  --bar-h: 0px;

  /* Motion (taste-skill references/motion.md): ease-out for everything under 600 ms, a slower
     settle for pictures. Press 140 ms, hover 180 ms, entrances 600-800 ms */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
  background: var(--canvas);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  padding-bottom: var(--bar-h);
}

[hidden] { display: none !important; }
/* the block a script brings to life; without the script only the plain version shows */
html:not(.js) .js-only { display: none !important; }
.js .nojs-only { display: none !important; }

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 600; color: var(--dark-blue); text-wrap: balance; }
p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; }
p { text-wrap: pretty; }
/* Links are Dark Blue and underlined everywhere: Marine is only 3.45:1 on the canvas */
a { color: var(--dark-blue); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; color: var(--dark-blue); }

/* Marine ring: 3.45:1 on the canvas and 4.73:1 on white, both above the 3:1 needed */
:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.selectable { user-select: all; -webkit-user-select: all; color: var(--dark-blue); font-weight: 600; overflow-wrap: anywhere; }
.nb { white-space: nowrap; }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; /* taste-skill-ignore: visually hidden text, not a rule */
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--dark-blue); color: var(--white);
  font: 600 var(--fs-body)/1 var(--font-head); padding: 14px 18px; text-decoration: none;
}
/* the ring stays Marine: it sits on the white header, where Ice would be 1.56:1 */
.skip-link:focus { top: 12px; }

/* ---------- Chamfer (45 degrees, from the E of the monogram) ----------
   A white surface with its top-left corner cut. No outline: white on the canvas is enough. */
.chamfer {
  --c: var(--chamfer);
  position: relative;
  clip-path: polygon(var(--c) 0, 100% 0, 100% 100%, 0 100%, 0 var(--c));
}

/* ---------- Buttons (chamfer drawn on two layers so the focus ring is never clipped) ---------- */
.btn {
  --line: var(--marine);
  --fill: var(--marine);
  --fg: var(--white);
  --bw: 0px;
  --ch: 10px;
  position: relative;
  isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 0; background: none; cursor: pointer;
  color: var(--fg);
  font: 600 var(--fs-body)/1.1 var(--font-head);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.btn::before, .btn::after {
  content: "";
  position: absolute;
  transition: background-color var(--t-hover) ease;
}
/* press: the button gives a little under the finger (no movement with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform var(--t-press) var(--ease-out); }
  .btn:active { transform: scale(0.97); }
}
.btn::before {
  inset: 0; z-index: -2;
  background: var(--line);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--ch));
}
.btn::after {
  inset: var(--bw); z-index: -1;
  background: var(--fill);
  clip-path: polygon(calc(var(--ch) - var(--bw) * 0.586) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--ch) - var(--bw) * 0.586));
}
.btn:hover { text-decoration: none; }
/* Marine button, white label 4.73:1; its edge is 4.00:1 against the canvas */
.btn--primary:hover { --line: var(--dark-blue); --fill: var(--dark-blue); }
.btn--outline { --line: var(--dark-blue); --fill: var(--white); --fg: var(--dark-blue); --bw: 2px; }
.btn--outline:hover { --fill: var(--steel-light); }
.btn--light { --line: var(--white); --fill: var(--white); --fg: var(--dark-blue); }
.btn--light:hover { --line: var(--ice); --fill: var(--ice); }
.btn--outline-ice { --line: var(--ice); --fill: var(--dark-blue); --fg: var(--white); --bw: 2px; }
.btn--outline-ice:hover { --fill: var(--ice); --fg: var(--dark-blue); }
.btn--lg { min-height: 56px; padding: 0 26px; }
.btn--xl { min-height: 64px; padding: 0 32px; gap: 12px; font-size: var(--fs-lead); --ch: 12px; }
.btn--xl .icon { width: 22px; height: 22px; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: var(--fs-small); --ch: 8px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font: 600 var(--fs-body)/1.2 var(--font-head);
  letter-spacing: 0.01em;
  color: var(--dark-blue);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.arrow-link .icon { transition: transform var(--t-hover) var(--ease-out); }
.arrow-link:hover { text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .arrow-link:hover .icon { transform: translateX(4px); }
}

/* the address next to an email button: #525B6E, 5.02:1 on the canvas */
.mail-line { color: var(--muted); }

/* ---------- Placeholders (trial only, never shipped) ---------- */
.placeholder {
  border: 1.5px dashed var(--marine);
  background: var(--white);
  padding: 14px 18px 16px;
  color: var(--ink);
  line-height: 1.45;
}
.ph-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 8px;
  background: var(--marine); color: var(--white);
  font: 600 var(--fs-small)/1.1 var(--font-head);
  letter-spacing: 0.01em;
}
.ph-inline {
  display: inline;
  padding: 1px 6px 2px;
  border: 1.5px dashed var(--marine);
  background: var(--white);
  color: var(--ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ph-inline .ph-tag { margin: 0 6px 0 0; padding: 2px 6px; vertical-align: 1px; }

/* ---------- Header (white, so the logo keeps a white ground) ---------- */
.site-header {
  position: relative; z-index: 30;
  background: var(--white);
  border-bottom: 3px solid var(--marine);   /* the rule under his letterhead */
}
/* Clear space: a quarter of the monogram height (56 px at 180 px wide). It sits on the row, not
   on the logo link, so the link's focus ring has room above and below and shows on all four sides */
.header-inner { display: flex; align-items: center; gap: 24px; padding-block: 14px; }
.brand { flex: none; display: block; }
.brand img { width: 180px; height: auto; }

.nav { margin-left: auto; }
.nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.nav a {
  position: relative;
  display: flex; align-items: center;
  min-height: 44px; padding: 0 14px;
  font: 600 var(--fs-small)/1 var(--font-head);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--dark-blue); text-decoration: none;
}
.nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
  background: var(--marine);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.btn--header { flex: none; }
.label-narrow { display: none; }

.menu-toggle {
  display: none;
  align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  background: var(--white); color: var(--dark-blue);
  border: 2px solid var(--dark-blue);
  font: 600 var(--fs-small)/1 var(--font-head); letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer;
}
.menu-bars, .menu-bars::before, .menu-bars::after {
  display: block; width: 18px; height: 2px; background: currentColor; position: relative;
}
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -6px; }
.menu-bars::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-bars::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-bars::after { top: 0; transform: rotate(-45deg); }

/* Slim email dock: tablet and desktop, once the page top has scrolled away */
.dock { display: none; }

/* ---------- Sections and section titles (the contract style) ---------- */
.section { padding-top: var(--section-y); }

.section-title {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: clamp(32px, 4vw, 48px);
  padding-bottom: 18px;
  /* the thin rule from his contract documents; #C9D4DE, because Steel Light would vanish on the canvas */
  border-bottom: 1px solid var(--border); /* taste-skill-ignore: the rule under his contract section titles */
  font-size: var(--fs-section);
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.section-title::before {
  content: ""; flex: none;
  width: 6px; height: 0.72em; margin-top: 0.18em;
  background: var(--marine);
}
.section-lead { max-width: 40em; margin: -12px 0 32px; font-size: var(--fs-lead); line-height: 1.45; }
.more { margin-top: 28px; }

/* ---------- The page title: one per page, the largest thing on the first screen ---------- */
.hero h1, .page-head h1 {
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: -0.02em;
}
.page-head h1 { font-size: var(--fs-title-short); }

/* ---------- Page head (inner pages): the title on the left, real content on the right ---------- */
.page-head { padding: clamp(40px, 5vw, 72px) 0 0; }
.page-head-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 40px;
  align-items: start;
}
.page-head-text { grid-column: 1 / span 7; padding-right: clamp(0px, 2vw, 32px); }
.page-head-aside { grid-column: 8 / span 5; }
.page-head-grid--wide .page-head-text { grid-column: 1 / span 8; }
.page-head-grid--wide .page-head-aside { grid-column: 9 / span 4; }
/* Contact: a short title beside the wide Email panel, so the address fits on one line */
.page-head-grid--panel .page-head-text { grid-column: 1 / span 5; }
.page-head-grid--panel .page-head-aside { grid-column: 6 / span 7; }
.page-head h1 { margin-bottom: 28px; }
.page-lead { max-width: 34em; font-size: var(--fs-lead); line-height: 1.45; }
.page-lead + .page-lead { margin-top: 12px; }
.page-head .actions { margin-top: 36px; margin-bottom: 16px; }
.page-head + .section { padding-top: var(--section-y); }
.page-head + .band { margin-top: var(--section-y); }

/* "On this page": a white panel of jump links built from the page's own sections */
.jump {
  background: var(--white);
  padding: 26px clamp(22px, 2.4vw, 32px) 22px;
}
.jump-title {
  margin-bottom: 10px;
  color: var(--dark-blue);
  font: 600 var(--fs-item)/1.2 var(--font-head);
}
.jump ul {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}
.jump--one ul { grid-template-columns: minmax(0, 1fr); }
.jump a {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 6px 0;
  color: var(--dark-blue);
  font: 600 var(--fs-body)/1.2 var(--font-head);
  text-decoration: none;
}
.jump a .icon { width: 18px; height: 18px; color: var(--marine); transform: rotate(90deg); transition: transform var(--t-hover) var(--ease-out); }
.jump--out a .icon { transform: none; }
.jump a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .jump a:hover .icon { transform: rotate(90deg) translateX(3px); }
  .jump--out a:hover .icon { transform: translateX(3px); }
}

/* ---------- Home hero: the title across the grid, the lead and the "On every job" card under it ---------- */
.hero { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6.5vw, 96px); }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 36px;
}
.hero h1 { grid-column: 1 / -1; margin-bottom: 4px; }
.hero-copy {
  grid-column: 1 / span 7;
  display: flex; flex-direction: column; align-items: flex-start;
  padding-right: clamp(0px, 2vw, 32px);
}
.hero-lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 32em; margin-bottom: 14px; }
.hero-sub { max-width: 36em; margin-bottom: 36px; }
.hero .actions { margin-bottom: 16px; }

.job-card {
  grid-column: 8 / span 5;
  align-self: start;
  background: var(--white);
  padding: 28px clamp(24px, 2.6vw, 36px) 12px;
}
.job-card-label {
  margin-bottom: 4px;
  color: var(--dark-blue);
  font: 600 var(--fs-item)/1.2 var(--font-head);
}
.job-card-list { list-style: none; padding: 0; }
.job-card-list li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 16px;
  padding: 14px 0;
  font-size: var(--fs-lead); line-height: 1.4;
}
.job-card-list li::before {
  content: "";
  width: 10px; height: 10px;
  margin-top: calc(0.7em - 5px);   /* centred on the first line */
  background: var(--marine);
}

/* ---------- Dark Blue status band ---------- */
.band {
  background: var(--dark-blue);
  color: var(--steel-light);
  padding: clamp(56px, 6vw, 96px) 0;
}
.band :focus-visible { outline-color: var(--ice); }
.band strong { color: var(--white); }
.band .selectable { color: var(--white); }
.band-title {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 24px;
  color: var(--white);
  font-size: var(--fs-section);
  line-height: 1.1;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.band-title::before { content: ""; flex: none; width: 6px; height: 0.72em; margin-top: 0.18em; background: var(--ice); }
.band-copy { max-width: 32em; font-size: var(--fs-lead); line-height: 1.45; }
.band-mail { margin-top: 18px; color: var(--steel-light); }
.band-note { margin-top: 6px; color: var(--steel-light); }
.band h3 { color: var(--white); }
.band .list li::before { background: var(--ice); }

/* ---------- Machine down? (home): pick the machine, pick the symptom, send ---------- */
.down-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 40px;
  align-items: start;
}
/* the two steps start on one line: machine on the left, symptom and the button on the right.
   The machines get eight columns, so the schematics are drawn larger (about 215 px at 1440) */
.down-intro { grid-column: 1 / span 7; grid-row: 1; }
.down-machines { grid-column: 1 / span 8; grid-row: 2; }
.down-side { grid-column: 9 / span 4; grid-row: 2; }
.down-list { grid-column: 1 / -1; grid-row: 3; }
/* without the script there are no steps: on wide screens the button sits beside the intro and the
   checklist runs under both */
@media (min-width: 1024px) {
  html:not(.js) .down-side { grid-row: 1; }
  html:not(.js) .down-list { grid-row: 2; }
}
.down-step { border: 0; padding: 0; min-width: 0; }
.down-legend {
  display: block; padding: 0;
  margin-bottom: 16px;
  color: var(--white);
  font: 600 var(--fs-item)/1.2 var(--font-head);
}

/* the six schematics as choices: white surfaces, the chosen one turns Ice with a tick */
.picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pick { position: relative; display: block; cursor: pointer; }
.pick-face {
  --c: 12px;
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  height: 100%;
  padding: 18px 18px 16px;
  background: var(--white);
  color: var(--dark-blue);
  clip-path: polygon(var(--c) 0, 100% 0, 100% 100%, 0 100%, 0 var(--c));
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.pick .schematic { max-width: none; margin: 0 0 14px; stroke-width: 1.75; }
.pick-name { font: 600 var(--fs-body)/1.2 var(--font-head); }
.pick:hover .pick-face { background: var(--steel-light); }
@media (prefers-reduced-motion: no-preference) {
  .pick:active .pick-face { transform: scale(0.98); }
}
.pick input:checked + .pick-face { background: var(--ice); }
.pick input:checked + .pick-face .schematic .solid { fill: var(--ice); }
/* the tick: a Dark Blue square with a white check, top right */
.pick input:checked + .pick-face::before,
.pick input:checked + .pick-face::after { content: ""; position: absolute; }
.pick input:checked + .pick-face::before { top: 12px; right: 12px; width: 26px; height: 26px; background: var(--dark-blue); }
.pick input:checked + .pick-face::after {
  top: 17px; right: 21px; width: 8px; height: 14px;
  border: solid var(--white); border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}
/* Ice ring round the whole tile on the dark band; the face itself is clipped for the chamfer */
.pick:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: 3px; }
@supports not selector(:has(a)) {
  .pick input:focus-visible + .pick-face { outline: 3px solid var(--marine); outline-offset: -6px; }
}

/* the symptoms: a short list of radio choices, Ice markers on the band */
.opts { display: grid; gap: 2px; }
.opt { display: block; cursor: pointer; }
.opt-face {
  display: flex; align-items: center; gap: 14px;
  min-height: 48px; padding: 6px 4px;
  color: var(--white);
  font: 600 var(--fs-body)/1.25 var(--font-head);
}
.opt-face::before {
  content: ""; flex: none;
  width: 22px; height: 22px;
  border: 2px solid var(--ice); border-radius: 50%;
  padding: 4px; background-clip: content-box;   /* the chosen dot sits inside the ring, with a gap */
  transition: background-color 0.15s ease;
}
.opt:hover .opt-face::before { background-color: rgba(163, 216, 225, 0.3); }
.opt input:checked + .opt-face::before { background-color: var(--ice); }
.opt input:focus-visible + .opt-face { outline: 2px solid var(--ice); outline-offset: 2px; }

.js .down-side .down-step + .down-send { margin-top: 32px; }
.down-status { margin-bottom: 20px; color: var(--steel-light); min-height: 3.1em; }
.down-status strong { color: var(--white); }

/* "Put these in the email": under the picker, three columns of tick boxes */
.down-list .checklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }

/* Checklist with tick boxes (Ice on dark, Marine on light). No rules between the items */
.checklist {
  --box: var(--ice);
  list-style: none; padding: 0;
}
.checklist li {
  position: relative;
  display: flex; align-items: center;
  min-height: 48px;
  padding: 8px 0 8px 40px;
  color: var(--white);
  font: 600 var(--fs-body)/1.3 var(--font-head);
  text-wrap: pretty;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 22px; height: 22px; margin-top: -11px;
  border: 1.5px solid var(--box);
}
.checklist li::after {
  content: ""; position: absolute; left: 8px; top: 50%;
  width: 6px; height: 12px; margin-top: -8px;
  border: solid var(--box); border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.checklist--light { --box: var(--marine); }
.checklist--light li { color: var(--ink); font: 400 var(--fs-body)/1.4 var(--font-body); }

/* Plain list with small Marine squares */
.list { list-style: none; padding: 0; display: grid; gap: 10px; }
.list li { position: relative; padding-left: 24px; }
.list li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 8px; height: 8px; background: var(--marine);
}

/* ---------- Machine tiles ---------- */
.tiles {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.tile {
  display: flex; flex-direction: column;
  background: var(--white);
  padding: 28px 28px 30px;
  transition: background-color var(--t-hover) ease;
}
/* The schematics are drawn across the whole tile (about 330 px at 1440, 290 at 768), with a
   slightly heavier line so they hold at that size */
.schematic {
  width: 100%; height: auto;
  margin: 4px 0 26px;
  overflow: visible;
  fill: none; stroke: var(--marine); stroke-width: 2; stroke-linejoin: round;
}
.schematic * { vector-effect: non-scaling-stroke; }
.schematic .ground { stroke: var(--steel); stroke-width: 1.25; }
.schematic .jet { stroke-dasharray: 3 4; }
.schematic .solid { fill: var(--white); transition: fill var(--t-hover) ease; }
.tile h3 { margin-bottom: 8px; font-size: var(--fs-item); line-height: 1.2; }
.tiles-note { max-width: 44em; margin-top: 32px; font-size: var(--fs-lead); line-height: 1.45; }
.tiles-note + .more { margin-top: 12px; }

/* Home: each tile's name links to its type on the Machines page; the link covers the tile */
.tile-link { color: var(--dark-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.tile-link::after { content: ""; position: absolute; inset: 0; }
.tile-link .icon { color: var(--marine); transition: transform var(--t-hover) var(--ease-out); }
.tile--link:hover { background: var(--steel-light); }
.tile--link:hover .schematic .solid { fill: var(--steel-light); }
.tile--link:hover .tile-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
@media (prefers-reduced-motion: no-preference) {
  .tile--link:hover .tile-link .icon { transform: translateX(4px); }
}

/* Machines page: two tiles a row, the schematic large across the top of each */
.tiles--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles--wide .tile { padding: 32px 32px 34px; }
.tiles--wide .schematic { max-width: 460px; margin: 6px 0 30px; }
.tiles--wide .tile h3 { margin-bottom: 10px; }

/* ---------- Spec table (one white surface; the header column is marked by a Marine rule) ---------- */
.spec { width: 100%; border-collapse: collapse; border: 1px solid var(--border); background: var(--white); }
.spec th, .spec td {
  border: 1px solid var(--border);
  padding: 20px 24px 21px;
  text-align: left; vertical-align: baseline;
}
.spec th {
  width: 32%;
  background: var(--white);
  box-shadow: inset 3px 0 0 var(--marine); /* taste-skill-ignore: the 3 px Marine rule of his tables */
  color: var(--dark-blue);
  font: 600 var(--fs-item)/1.3 var(--font-head);
  letter-spacing: 0.01em;
}
.spec th h3 { font: inherit; color: inherit; }
.spec th a {
  /* the link fills the cell, so the tap target is the whole header cell, not the words */
  display: block;
  margin: -20px -24px -21px; padding: 20px 24px 21px;
  color: var(--dark-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}
.spec th a:hover { text-decoration-thickness: 2px; }
.spec td { color: var(--ink); background: var(--white); }
.spec td > p + p { margin-top: 0.75em; }
.spec-note { max-width: 44em; }
/* About: the business facts, a short table beside "Where I learned it" */
.spec--compact th { width: 38%; }
.spec--compact th, .spec--compact td { padding: 18px 22px 19px; }

/* ---------- How a job works: numbered balloons, no leader line ---------- */
.steps {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
}
.step { position: relative; }
.balloon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 22px;
  border: 1.5px solid var(--marine); border-radius: 50%;
  background: var(--white);
  color: var(--dark-blue);
  font: 600 var(--fs-item)/1 var(--font-head);
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 8px; font-size: var(--fs-item); line-height: 1.2; }

/* ---------- Notes (text blocks separated by space) ---------- */
.notes {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 40px;
}
.note--lead { grid-column: 1 / span 5; padding-right: clamp(0px, 3vw, 40px); }
.notes-grid {
  grid-column: 6 / span 7;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px var(--gap);
}
.notes-grid--full { grid-column: 1 / -1; }
.note h3 { margin-bottom: 10px; font-size: var(--fs-item); line-height: 1.2; }
.note p + p { margin-top: 0.75em; }
.note--lead h3 { font-size: var(--fs-section); line-height: 1.12; margin-bottom: 18px; }
.note--lead p { font-size: var(--fs-lead); line-height: 1.5; }

/* ---------- Where I work ---------- */
.area {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 32px;
  align-items: start;
}
.area .area-lead { grid-column: 1 / span 5; margin: 0; }
.area .zones { grid-column: 7 / span 6; }
.area-lead {
  margin-bottom: 28px;
  color: var(--dark-blue);
  font: 600 var(--fs-item)/1.3 var(--font-head);
}

.zones { list-style: none; padding: 0; display: grid; gap: 28px; }
.zones li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px;
}
.zones strong { font-family: var(--font-head); letter-spacing: 0.01em; }
.zone-action { margin-top: 20px; }

/* distance gauge: 1, 2 or 3 segments lit (decorative) */
.gauge { display: flex; gap: 4px; margin-top: 6px; }
.gauge i { display: block; width: 18px; height: 10px; border: 1.5px solid var(--marine); }
.gauge[data-lit="1"] i:nth-child(-n+1),
.gauge[data-lit="2"] i:nth-child(-n+2),
.gauge[data-lit="3"] i:nth-child(-n+3) { background: var(--marine); }

/* ---------- About teaser ---------- */
.about-text p { max-width: 38em; }

/* ---------- Services: each group in its own composition ---------- */
/* When a machine stops: the Dark Blue status band, two columns */
.band-pair {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 40px;
  margin-top: 16px;
}
.band-pair > :first-child { grid-column: 1 / span 6; }
.band-pair > :last-child { grid-column: 8 / span 5; }
.band-pair h3 { margin-bottom: 14px; font-size: var(--fs-item); line-height: 1.2; }
.band-pair p, .band-pair li { color: var(--steel-light); }

/* Keeping it accurate: three text columns straight on the canvas */
.cols3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px clamp(24px, 3vw, 48px);
  align-items: start;
}
.cols3 h3, .cards h3, .start h3, .faq h3 { margin-bottom: 12px; font-size: var(--fs-item); line-height: 1.2; }

/* Setting up: three white cards */
.cards {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.card-item { background: var(--white); padding: 28px 28px 32px; }

/* Getting started: the free first visit on the canvas, regional trips on a white panel */
.start {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 40px;
  align-items: start;
}
.start-main { grid-column: 1 / span 6; }
.start-main p { font-size: var(--fs-lead); line-height: 1.5; }
.start-panel { grid-column: 8 / span 5; background: var(--white); padding: clamp(26px, 3vw, 40px); }
.start-panel .action-row { margin-top: 24px; }

.prose > * + * { margin-top: 1em; }
.prose > .list { margin-top: 1.1em; }
.prose > .list + p { margin-top: 1.1em; }

/* Questions: three across on wide screens */
.faq {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px clamp(24px, 3vw, 48px);
}

/* Two titled columns side by side */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px clamp(24px, 5vw, 72px);
  align-items: start;
}
.split .section-title { margin-bottom: 28px; }
/* Machines: when one title wraps and the other doesn't, the titles share one row, so both columns'
   rules and first lines stay level (768 to about 990 px, where "Chinese-built machines" wraps) */
@media (min-width: 768px) {
  .split--paired { grid-template-rows: auto auto; row-gap: 0; }
  .split--paired > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
}
/* Quotes and payment: the statement on the left, the terms in two columns on the right */
.split--terms { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--gap); }
/* Before I arrive: the checklist on the left, the statement on the right */
.split--check { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

/* About: where I learned it */
.learned-text { max-width: 40em; }
.learned-text p { font-size: var(--fs-lead); line-height: 1.5; }

/* ---------- Contact page ---------- */
.panel {
  --c: 22px;
  padding: clamp(28px, 4vw, 48px);
}
.panel--dark {
  background: var(--dark-blue);
  color: var(--steel-light);
}
.panel--dark :focus-visible { outline-color: var(--ice); }
.panel .band-title { margin-bottom: 22px; }
.panel .section-title { margin-bottom: 22px; }
.panel p + .actions { margin-top: 28px; }
.panel--light { background: var(--white); }
.hours-line { color: var(--dark-blue); font: 600 var(--fs-item)/1.3 var(--font-head); }
.email-big {
  display: block;
  margin: 4px 0 20px;
  color: var(--dark-blue);
  /* keeps "emmachinesolutions.com.au" on one line in the contact panel on phones: the panel
     text is 100vw - 72px wide there, and the domain is about 13.5 times the font size */
  font: 600 min(var(--fs-section), calc((100vw - 72px) / 13.5))/1.2 var(--font-head);
  user-select: all; -webkit-user-select: all;
  overflow-wrap: anywhere;
}
.panel--dark .email-big { color: var(--white); }
/* What to send: the lead and the button on the left, the checklist on the right */
.send {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--gap); row-gap: 28px;
  align-items: start;
}
.send-lead { grid-column: 1 / span 5; grid-row: 1; margin: 0; }
.send-action { grid-column: 1 / span 5; grid-row: 2; }
.send .checklist { grid-column: 7 / span 6; grid-row: 1 / span 2; }

/* ---------- Privacy (a short document in two columns) ---------- */
.doc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px clamp(24px, 5vw, 72px);
  align-items: start;
}
.doc h2 {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 0 0 12px;
  font-size: var(--fs-item); line-height: 1.2;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.doc h2::before { content: ""; flex: none; width: 6px; height: 0.8em; margin-top: 0.12em; background: var(--marine); }
.doc p + p { margin-top: 1em; }
.doc a { overflow-wrap: anywhere; }
.doc-meta { margin: 0 0 18px; color: var(--muted); }

/* ---------- Closing call to action ---------- */
.cta { padding: var(--section-y) 0; }
.cta-panel {
  --c: 22px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px var(--gap);
  align-items: center;
  background: var(--white);
  padding: clamp(32px, 5vw, 64px);
}
.cta-text h2 {
  margin-bottom: 18px;
  font-size: var(--fs-section);
  line-height: 1.1;
}
.cta-text p { max-width: 34em; }
.cta-text .mail-line { margin-top: 12px; }
.cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; justify-self: end; width: min(100%, 340px); }

/* ---------- 404 ---------- */
.notfound { padding-bottom: var(--section-y); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--blue-gray);
  color: var(--white);
  padding: clamp(56px, 6vw, 80px) 0 40px;
}
.site-footer :focus-visible { outline-color: var(--ice); }
.site-footer a { color: var(--steel-light); text-decoration: underline; text-decoration-thickness: 1px; }
.site-footer a:hover { color: var(--white); text-decoration-thickness: 2px; }
.footer-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: 32px;
  padding-bottom: 40px;
}
.footer-brand { grid-column: 1 / span 5; }
.footer-brand img { width: 200px; height: auto; margin-bottom: 20px; }
.footer-brand p { max-width: 24em; }
.footer-contact { grid-column: 6 / span 4; display: grid; gap: 6px; align-content: start; padding-top: 6px; }
.footer-contact p { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.footer-contact a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; overflow-wrap: anywhere; }
.footer-label { color: var(--steel-light); }
.footer-nav { grid-column: 10 / span 3; padding-top: 6px; }
.footer-nav ul { list-style: none; padding: 0; }
.footer-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 var(--fs-small)/1 var(--font-head); letter-spacing: 0.05em; text-transform: uppercase;
}
.footer-nav a[aria-current="page"] { color: var(--white); text-decoration-thickness: 2px; }
.footer-legal {
  display: grid; gap: 10px;
  padding-top: 8px;
  font-size: var(--fs-small); line-height: 1.5;
  color: var(--white);
}
.footer-legal p { max-width: 42em; }
.copyright { margin-top: 6px; }

/* ---------- NFC card page (/eros): a white card on the canvas ---------- */
.card-page { border-top: 3px solid var(--marine); }
.card-wrap { padding: 32px 16px 0; }
.card {
  width: 100%; max-width: 480px; margin-inline: auto;
  padding: 36px 24px 26px;
  background: var(--white);
}
.card-mark { width: 132px; height: auto; margin-bottom: 30px; }
/* the card keeps its own name size: it is a business card, not a page head */
.card h1 { font-size: clamp(2.25rem, 1.8rem + 2vw, 2.75rem); line-height: 1.05; margin-bottom: 10px; }
.card-role {
  margin-bottom: 18px;
  color: var(--blue-gray);
  font: 600 var(--fs-body)/1.35 var(--font-head);
  letter-spacing: 0.01em;
}
/* the role line is about 340 px on one line; on narrower cards it goes on two lines, without the dot */
@media (max-width: 459.98px) {
  .card-sep { display: none; }
  .card-role .nb { display: block; }
}
.card-line { margin-bottom: 28px; font-size: var(--fs-lead); }
.card-actions { list-style: none; padding: 0; display: grid; gap: 12px; }
.card-actions .btn { width: 100%; justify-content: flex-start; min-height: 60px; padding: 0 22px; }
.card-actions .btn .icon { width: 22px; height: 22px; }
.card-contact {
  margin-top: 28px;
  color: var(--dark-blue);
  font: 600 var(--fs-body)/1.4 var(--font-head);
}
.card-contact span { user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
/* lines up with the text inside the card (16 px gutter + 24 px padding) */
.card-foot {
  max-width: 512px; margin: 0 auto;
  padding: 14px 40px 40px;
  color: var(--muted);
}

/* ---------- Mobile email bar ---------- */
.mailbar { display: none; }

/* ---------- Spacing and small helpers ---------- */
.section--last { padding-bottom: var(--section-y); }
.section-lead--flat { margin-top: 0; margin-bottom: 18px; }
.placeholder--form { max-width: 44em; }

/* A single statement set large */
.statement {
  color: var(--dark-blue);
  font: 600 var(--fs-item)/1.35 var(--font-head);
  max-width: 24em;
}


/* ======================================================================
   Responsive
   ====================================================================== */

/* Below 1280: How a job works in 3 x 2 (six columns are too narrow for the copy) */
@media (max-width: 1279.98px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
}

/* 1024 to 1279: the footer gives the email line room to stay on one line */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .footer-contact { grid-column: 6 / span 5; }
  .footer-nav { grid-column: 11 / span 2; }
  .jump ul { grid-template-columns: minmax(0, 1fr); }
}

/* Below 1024: menu button, stacked heads */
@media (max-width: 1023.98px) {
  .menu-toggle { display: inline-flex; }
  .header-inner { gap: 12px; }
  .btn--header { margin-left: auto; }
  .js .nav { display: none; }
  .js .nav.is-open {
    display: block;
    position: absolute; top: calc(100% + 3px); left: 0; right: 0;
    background: var(--white);
    /* same closing edge as the header, plus a soft shadow, so the panel reads as a layer */
    border-bottom: 3px solid var(--marine);
    box-shadow: 0 10px 18px rgba(4, 47, 86, 0.12); /* taste-skill-ignore: the open menu is an overlay */
    padding: 4px var(--pad) 16px;
  }
  .js .nav.is-open ul { flex-direction: column; }
  .js .nav.is-open a { min-height: 52px; padding: 0; font-size: var(--fs-body); }
  .js .nav.is-open a::after { left: 0; right: auto; width: 48px; bottom: 6px; }
  html:not(.js) .header-inner { flex-wrap: wrap; }
  html:not(.js) .nav { order: 5; width: 100%; margin: 0 0 8px; }
  html:not(.js) .nav ul { flex-wrap: wrap; }
  html:not(.js) .nav a { padding: 0 12px 0 0; }
  html:not(.js) .menu-toggle { display: none; }

  .hero-copy { grid-column: 1 / -1; padding-right: 0; }
  .job-card { grid-column: 1 / -1; max-width: 640px; }

  .down-intro, .down-machines, .down-side, .down-list { grid-column: 1 / -1; grid-row: auto; }
  .down-side { max-width: 640px; }
  .down-list .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Machines on tablets: one machine a row, the schematic beside the text */
  .tiles--wide { grid-template-columns: 1fr; }
  .tiles--wide .tile {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    column-gap: 32px;
    align-items: center;
  }
  .tiles--wide .schematic { margin: 0; }

  .note--lead, .notes-grid { grid-column: 1 / -1; padding-right: 0; }
  .note--lead p { max-width: 40em; }

  .area .area-lead, .area .zones { grid-column: 1 / -1; }
  .area .area-lead { max-width: 640px; }


  .page-head-text, .page-head-aside,
  .page-head-grid--wide .page-head-text, .page-head-grid--wide .page-head-aside,
  .page-head-grid--panel .page-head-text, .page-head-grid--panel .page-head-aside { grid-column: 1 / -1; }
  .page-head-text { padding-right: 0; }
  .page-head-aside { max-width: 640px; }
  .jump ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jump--one ul { grid-template-columns: minmax(0, 1fr); }

  .band-pair > :first-child, .band-pair > :last-child { grid-column: 1 / -1; }
  .cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-main, .start-panel { grid-column: 1 / -1; }
  .start-panel { max-width: 640px; }
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--terms, .split--check { grid-template-columns: 1fr; }

  .send-lead, .send-action, .send .checklist { grid-column: 1 / -1; grid-row: auto; }
  .send { grid-template-rows: none; }
  .send-action { order: 3; }

  .cta-panel { grid-template-columns: 1fr; }
  .cta-actions { justify-self: start; flex-direction: row; flex-wrap: wrap; width: auto; }

  .footer-brand { grid-column: 1 / -1; }
  .footer-contact { grid-column: 1 / span 7; padding-top: 0; }
  .footer-nav { grid-column: 8 / span 5; padding-top: 0; }
}

/* Tablet and up: the slim email dock */
@media (min-width: 768px) {
  html { scroll-padding-top: 88px; }
  .dock {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    background: var(--white);
    border-bottom: 3px solid var(--marine);
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .dock.is-on { transform: none; visibility: visible; transition: transform 0.25s ease, visibility 0s; }
  .dock-inner { display: flex; align-items: center; gap: 12px; min-height: 64px; }
  .dock-mark { display: flex; align-items: center; min-height: 44px; padding: 8px 0; margin-right: auto; }
  .dock-mark img { width: 84px; height: auto; }
  .dock-mail { margin-right: 8px; font-size: var(--fs-small); color: var(--blue-gray); }
}

/* Phones */
@media (max-width: 767.98px) {
  /* 3 px Marine rule + 8 + 52 + 8 px */
  :root { --bar-h: calc(71px + env(safe-area-inset-bottom, 0px)); --gap: 16px; }
  /* focused elements scroll clear of the fixed email bar (WCAG 2.4.11) */
  html { scroll-padding-bottom: calc(var(--bar-h) + 12px); }

  .header-inner { gap: 8px; padding-block: 13px; }
  .brand img { width: 160px; }
  /* on phones the email bar at the bottom is always there, so the header keeps only the menu */
  .btn--header { display: none; }
  .menu-toggle { margin-left: auto; }

  .page-head { padding-top: 32px; }
  .page-head h1 { margin-bottom: 18px; }
  .page-head-grid { row-gap: 28px; }
  .page-head .actions { flex-direction: column; margin-top: 28px; }
  .page-head .actions .btn { width: 100%; }
  .jump { padding: 20px 18px 14px; }
  .jump ul { column-gap: 14px; }
  .jump a { font-size: var(--fs-small); }

  .hero { padding-block: 32px 48px; }
  .hero-grid { row-gap: 22px; }
  .hero-lead { margin-bottom: 12px; }
  .hero-sub { margin-bottom: 24px; }
  .hero .actions { flex-direction: column; width: 100%; }
  .hero .actions .btn { width: 100%; }
  .job-card { padding: 22px 18px 8px; }
  .job-card-list li { padding: 10px 0; column-gap: 14px; }

  .picks { gap: 10px; }
  .pick-face { padding: 14px 12px 12px; }
  .pick .schematic { margin-bottom: 10px; }
  .down-list .checklist { grid-template-columns: 1fr; }
  .band .btn--xl { width: 100%; padding: 0 16px; font-size: var(--fs-body); }

  .tiles { grid-template-columns: 1fr; gap: 12px; }
  /* the schematic on top of the text, about 280 px wide (it was 96 beside the text) */
  .tile, .tiles--wide .tile {
    display: flex; flex-direction: column;
    padding: 20px 18px 22px;
  }
  .tile .schematic, .tiles--wide .schematic { max-width: 280px; margin: 2px 0 16px; }
  .tile h3, .tiles--wide .tile h3 { margin-bottom: 6px; }
  .tiles-note { margin-top: 24px; }

  .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: 100%; }
  .spec { border: 0; background: none; }
  .spec tr { border: 1px solid var(--border); margin-bottom: -1px; background: var(--white); }
  .spec th, .spec td { border: 0; padding: 14px 18px; }
  .spec td { border-top: 1px solid var(--border); }
  .spec th a { margin: -14px -18px; padding: 14px 18px; }
  .spec td { padding-bottom: 18px; }
  /* the business facts are short: keep label and value side by side instead of stacking them */
  /* baseline, not top: the label and the value use different fonts and sizes, and top-aligned they
     sit about 5 px apart. Baseline cells no longer stretch, so the Marine rule moves from the label
     cell to the row, where it still runs the full height. */
  .spec--compact tr { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); align-items: baseline; box-shadow: inset 3px 0 0 var(--marine); } /* taste-skill-ignore: his table rule */
  .spec--compact th, .spec--compact td { width: auto; }
  .spec--compact th { font-size: var(--fs-body); line-height: 1.35; background: none; box-shadow: none; } /* taste-skill-ignore: removes the rule */
  .spec--compact td { border-top: 0; border-left: 1px solid var(--border); padding-bottom: 14px; }

  .steps { grid-template-columns: 1fr; row-gap: 0; }
  .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; padding-bottom: 28px; }
  .step:last-child { padding-bottom: 0; }
  .balloon { width: 48px; height: 48px; margin: 0; }
  .step > div { padding-top: 11px; }

  .notes-grid { grid-template-columns: 1fr; gap: 28px; }
  .faq, .split, .cols3, .cards, .doc, .list--two { grid-template-columns: 1fr; }
  .faq, .cols3, .doc { gap: 32px; }
  .cards { gap: 12px; }
  .card-item { padding: 22px 20px 24px; }


  .cta-panel { --c: 16px; padding: 28px 20px; }
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-actions .btn { width: 100%; }
  .panel { --c: 16px; padding: 26px 20px 28px; }
  .start-panel { padding: 24px 20px 26px; }
  /* "Email the alarm details" is wider than the panel at 320 px: let the label wrap there */
  .panel .actions .btn { flex: 1 1 100%; white-space: normal; text-align: center; }

  .action-row .btn { width: 100%; }

  .footer-contact, .footer-nav { grid-column: 1 / -1; }
  .footer-nav ul { display: flex; flex-wrap: wrap; column-gap: 20px; }

  .card-wrap { padding-top: 20px; }

  .mailbar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--white);
    border-top: 3px solid var(--marine);   /* the header's rule, mirrored at the bottom */
    transition: transform 0.2s ease, visibility 0s;
  }
  /* out of the way while a closing panel with its own email button is on screen */
  .mailbar.is-off { transform: translateY(110%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
  .mailbar-btn {
    --ch: 8px;
    width: 100%;
    min-height: 52px; padding: 0 12px;
  }
  .mailbar-btn .icon { width: 18px; height: 18px; }
}

@media (max-width: 599.98px) {
  .label-wide { display: none; }
  .label-narrow { display: inline; }
  /* icon-only menu button frees the room the logo needs */
  .menu-toggle { width: 44px; padding: 0; }
  .menu-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 359.98px) {
  .header-inner { gap: 6px; padding-block: 12px; }
  .brand img { width: 144px; }
  .jump ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Motion ----------
   Entrances below the fold. site.js puts .rv only on blocks that start below the first screen,
   and only when the browser has IntersectionObserver and the visitor allows motion; .rv-in then
   brings each one in once, 80 ms after the one before it in the same batch. Without the script,
   or with reduced motion, nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(16px); }
  .rv.rv-in {
    opacity: 1; transform: none;
    transition: opacity 600ms var(--ease-out) var(--d, 0ms), transform 800ms var(--ease-out) var(--d, 0ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}