/* Self-hosted from Google Fonts (2026-10-20): the LATIN subset of each variable font, with no
   unicode-range on purpose (a self-hosted subset with a range that misses a character silently falls
   back to Arial for the whole run). Both families are SIL Open Font License. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700 800;font-display:swap;src:url(/fonts/montserrat-latin.06b16db7.woff2) format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/hanken-grotesk-latin.e9201edd.woff2) format('woff2');}

/* Jackman Mechanical Ltd. The Blueprint look (Option A, picked 2026-10-20).
   Tokens live here and nowhere else. Each colour says what it may touch. */
:root {
  --paper: #FFFFFF;   /* page ground, drawing paper */
  --grid: #EEF1F4;    /* drafting grid behind heroes and the sheet, quiet panels */
  --ink: #161616;     /* text, linework, the commercial panel (his black) */
  --ink-2: #5B6168;   /* secondary text, captions, leaders */
  --body: #2B3036;    /* long-form text, a step softer than ink */
  --rule: #D5DAE0;    /* hairlines and borders */
  --red: #D10522;     /* HIS red (logo): call buttons, focus ring, warnings; in the drawings only the
                         expansion tank and the main shutoff lever */
  --red-dk: #A8031B;  /* hover on red buttons only */
  --copper: #B8733F;  /* copper pipe: drawings and the water legend swatch only */
  --gas: #F2C230;     /* gas tags: drawings and the gas legend swatch only */

  --display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --text: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --wrap: 1200px;
  --gutter: 24px;
  --top-h: 76px;
  --measure: 60ch;
}

*, *::before, *::after { box-sizing: border-box; }
/* keyboard focus, anchors and scrollIntoView all stop clear of the sticky header (WCAG 2.4.11), and on a phone of the dock */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--text); overflow-wrap: break-word; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--red); }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.04; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
h3 { font-size: 1.3rem; line-height: 1.25; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.ico { width: 1.15em; height: 1.15em; flex: none; }

.wrap { width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 4px; }
.skip:focus { top: 12px; color: var(--paper); }
.preview { background: var(--ink); color: var(--paper); font-size: 0.875rem; text-align: center; padding: 6px var(--gutter); }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 3px;
  font: 700 1rem/1.15 var(--text); text-decoration: none; text-align: center;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--lg { min-height: 56px; padding: 0 24px; font-size: 1.0625rem; }
.btn--red { background: var(--red); color: var(--paper); }
.btn--red:hover { background: var(--red-dk); color: var(--paper); }
.btn--red:focus-visible { outline-color: var(--ink); }
.btn--line { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--ghost { border-color: transparent; color: var(--ink); background: transparent; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.btn--ghost:hover { color: var(--red); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #000; color: var(--paper); }
.btn--light { border-color: var(--paper); color: var(--paper); background: transparent; }
.btn--light:hover { background: var(--paper); color: var(--ink); }
/* on a dark ground the ink button turns paper, or it would vanish into the panel */
.band .btn--ink, .phero--dark .btn--ink, .face--dark .btn--ink { background: var(--paper); color: var(--ink); }
.band .btn--ink:hover, .phero--dark .btn--ink:hover, .face--dark .btn--ink:hover { background: var(--grid); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ── header ────────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 2px solid var(--ink); }
.top__in { display: flex; align-items: center; gap: 28px; min-height: var(--top-h); }
.brand { display: block; flex: none; }
.brand img { width: 196px; }
.nav { display: flex; gap: 24px; margin-left: auto; font-weight: 600; }
.nav a { text-decoration: none; padding: 12px 0; border-bottom: 3px solid transparent; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nav a[aria-current] { border-bottom-color: var(--red); }
/* Text and Call, side by side at every width (2026-10-20: "we want people to see both").
   Wide: a small label over the number. Narrow: one word each, the number is in the link. */
.top__acts { display: flex; gap: 10px; flex: none; }
.hbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px 6px 13px; border-radius: 3px; color: var(--paper); text-decoration: none; transition: background-color .15s ease; }
.hbtn:hover { color: var(--paper); }
.hbtn .ico { width: 22px; height: 22px; }
.hbtn__l { display: flex; flex-direction: column; align-items: flex-start; }
.hbtn__k { font-size: 0.75rem; font-weight: 800; line-height: 1.25; letter-spacing: 0.07em; text-transform: uppercase; }
.hbtn__n { font-size: 1.0625rem; font-weight: 800; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hbtn--text { background: var(--ink); }
.hbtn--text:hover { background: #000; }
.hbtn--call { background: var(--red); }
.hbtn--call:hover { background: var(--red-dk); }
.hbtn--call:focus-visible { outline-color: var(--ink); }
.mnav { display: none; position: relative; }
.mnav summary { list-style: none; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 3px; cursor: pointer; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav[open] summary { background: var(--ink); color: var(--paper); }
.mnav nav { position: absolute; right: 0; top: calc(100% + 10px); background: var(--paper); border: 2px solid var(--ink); min-width: 240px; display: flex; flex-direction: column; padding: 6px 0; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.mnav nav a { padding: 13px 18px; text-decoration: none; font-weight: 600; }
.mnav nav a:hover, .mnav nav a[aria-current] { background: var(--grid); color: var(--ink); }

/* ── grid backgrounds ──────────────────────────────────────────────────── */
.hero, .sheet, .phero {
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

/* ── home hero ─────────────────────────────────────────────────────────── */
.hero__in { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 40px 56px; padding: 64px 0 56px; }
.hero__copy { flex: 1 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero__title { font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.02; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__title .line > span { display: inline-block; }
.answer { max-width: 640px; font-size: 1.1875rem; color: var(--body); }

/* title block: a real table, as on a drawing sheet */
.tblock { flex: 0 1 400px; min-width: 0; border-collapse: collapse; background: var(--paper); border: 2px solid var(--ink); font-size: 0.9375rem; align-self: flex-end; }
.tblock caption { caption-side: top; text-align: left; font: 700 0.875rem/1.4 var(--text); padding: 0 0 8px; color: var(--ink-2); }
.tblock th, .tblock td { border: 1px solid var(--ink); padding: 9px 12px; text-align: left; vertical-align: top; }
.tblock th { width: 118px; font-weight: 500; color: var(--ink-2); }
.tblock td { font-weight: 700; }
.tblock a { text-decoration: none; padding-block: 3px; }
.tblock a:hover { text-decoration: underline; }

/* ── the sheet: sticky drawing + steps (home) ──────────────────────────── */
.sheet { border-top: 2px solid var(--ink); padding: 64px 0 24px; }
.sheet__head { display: flex; flex-wrap: wrap; gap: 12px 48px; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; }
.sheet__head h2 { flex: 1 1 520px; max-width: 760px; }
.sheet__head p { flex: 1 1 320px; max-width: 460px; color: var(--ink-2); }
.sheet__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 0 56px; }
.stage { position: relative; }
.stage__frame { position: sticky; top: calc(var(--top-h) + 24px); margin: 0; background: var(--paper); border: 2px solid var(--ink); padding: 14px; }
.drawing { display: block; width: 100%; height: auto; }
.drawing text { font: 600 17px var(--text); fill: var(--ink); letter-spacing: 0.03em; }
.drawing .tagt { font: 700 11.5px var(--text); letter-spacing: 0.08em; }
.stage__frame figcaption, .detail figcaption { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--ink-2); }
.hot rect { fill: transparent; stroke: transparent; stroke-width: 3; transition: fill .15s ease, stroke .15s ease; }
.hot:hover rect, .hot:focus-visible rect { fill: rgba(209, 5, 34, 0.06); stroke: var(--red); }
.hot:focus { outline: none; }
.steps { display: flex; flex-direction: column; }
.step { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 40px 0; }
.step:last-child { min-height: 66vh; }
.step h3 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
.step p:not(.key) { color: var(--body); }
.step .more { font-weight: 700; }
.step .more a { padding-block: 3px; }
.key { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.sw { width: 34px; height: 12px; border: 1.5px solid var(--ink); flex: none; }
.sw--gas { background: linear-gradient(90deg, var(--ink) 0 34%, var(--gas) 34% 66%, var(--ink) 66%); }
.sw--water { background: var(--copper); }
.sw--heat { background: var(--red); border-radius: 6px; width: 22px; height: 22px; }
.sw--drain { border: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--ink-2) 0 8px, transparent 8px 13px); }
.parts { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.parts a { display: inline-block; border: 1.5px solid var(--ink); padding: 8px 14px; font-weight: 600; text-decoration: none; min-height: 44px; }
.parts a:hover { background: var(--ink); color: var(--paper); }

/* ── two faces ─────────────────────────────────────────────────────────── */
.faces { padding: 64px 0; border-top: 2px solid var(--ink); }
.faces__in { display: flex; flex-wrap: wrap; gap: 24px; }
.face { flex: 1 1 440px; min-width: 0; border: 2px solid var(--ink); padding: 36px; display: flex; flex-direction: column; gap: 16px; }
.face__k { font-weight: 700; color: var(--red); }
.face h2 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); }
.face ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
.face li a { display: inline-block; padding-block: 4px; }
.face .btn { align-self: flex-start; margin-top: auto; }
.face--dark, .band { background: var(--ink); color: var(--paper); }
.face--dark h2, .band h2 { color: var(--paper); }
.face--dark a:not(.btn), .band a:not(.btn) { color: var(--paper); }
.face--dark .face__k { color: var(--paper); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.face--dark :focus-visible, .band :focus-visible { outline-color: var(--paper); }

/* ── sections on the home page ─────────────────────────────────────────── */
.sect { padding: 64px 0; border-top: 1px solid var(--rule); }
.sect--rule { border-top: 2px solid var(--ink); }
.sect__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; max-width: 760px; }
.sect__head p { color: var(--body); }
.after { margin-top: 18px; }
/* Links stay display:inline (a link in a sentence must wrap with it); vertical padding on an inline
   box grows only its tap area, not the line, so a lone short link still gets a finger-sized target. */
.after a, .prose p > a:only-child { padding-block: 3px; }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--ink); }
.gallery figcaption { font-size: 0.875rem; color: var(--ink-2); margin-top: 8px; line-height: 1.4; }
.towns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.towns a { display: inline-block; border: 2px solid var(--ink); padding: 10px 18px; font-weight: 700; text-decoration: none; min-height: 48px; }
.towns a:hover { background: var(--ink); color: var(--paper); }
/* the home page's common questions, each a whole-row link to its answer */
.qlinks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 2px solid var(--ink); }
.qlinks li { border-bottom: 1px solid var(--rule); }
.qlinks a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; font-weight: 700; color: var(--ink); text-decoration: none; }
.qlinks .ico { color: var(--red); }
.qlinks a:hover { color: var(--red); }

/* ── inner page hero ───────────────────────────────────────────────────── */
.phero { border-bottom: 2px solid var(--ink); }
.phero__in { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-end; padding: 28px 0 48px; }
.phero__copy { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.phero--dark { background-color: var(--ink); background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); color: var(--paper); }
.phero--dark h1, .phero--dark .answer { color: var(--paper); }
.phero--dark .answer { color: #D9DDE1; }
.phero--dark a:not(.btn) { color: var(--paper); }
.phero--dark .btn--line { background: transparent; border-color: var(--paper); color: var(--paper); }
.phero--dark .btn--line:hover { background: var(--paper); color: var(--ink); }
.phero--dark .btn--ghost { color: var(--paper); }
.phero--dark :focus-visible { outline-color: var(--paper); }
.phero--dark .crumbs, .phero--dark .crumbs a, .phero--dark .eyebrow { color: #C9CDD2; }
.phero--dark .tblock { color: var(--ink); }
.eyebrow { font-weight: 700; color: var(--red); letter-spacing: 0.01em; }
.crumbs { padding-top: 20px; font-size: 0.875rem; color: var(--ink-2); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--rule); }
.crumbs a { color: var(--ink-2); display: inline-block; padding-block: 4px; }

/* ── long-form body ────────────────────────────────────────────────────── */
.body { padding: 48px 0 64px; }
.body__in { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px 56px; align-items: start; }
.body__in--wide { grid-template-columns: minmax(0, 1fr); }
.prose { min-width: 0; max-width: var(--measure); color: var(--body); }
.body__in--wide .prose { max-width: none; }
.body__in--wide .prose > p, .body__in--wide .prose > ul, .body__in--wide .prose > ol, .body__in--wide .prose > h2, .body__in--wide .prose > h3 { max-width: var(--measure); }
.prose > * + * { margin-top: 18px; }
.prose h2 { color: var(--ink); margin-top: 48px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: var(--ink); margin-top: 32px; }
.prose h2 + p, .prose h3 + p { margin-top: 12px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose strong { color: var(--ink); }
.prose a { color: var(--ink); text-decoration-thickness: 1px; }
.prose a:hover { color: var(--red); }
.src { font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; }
.aside { position: sticky; top: calc(var(--top-h) + 24px); display: flex; flex-direction: column; gap: 18px; }
.aside .panel { border: 2px solid var(--ink); padding: 22px; display: flex; flex-direction: column; gap: 12px; background: var(--paper); }
.aside .panel h2 { font-size: 1.25rem; }
.aside .panel p { max-width: 60ch; color: var(--body); font-size: 0.975rem; }
.aside .panel .btn { width: 100%; }
.byline { max-width: 60ch; font-size: 0.9375rem; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 40px; }

.warn { border: 2px solid var(--red); border-left-width: 8px; padding: 18px 20px; background: #FFF6F7; color: var(--ink); }
.warn h2 { font-size: 1.5rem; margin: 0 0 8px; }
.warn h3 { font-size: 1.3rem; margin: 0 0 6px; }
.warn p + p { margin-top: 8px; }
.note { border-left: 4px solid var(--ink); padding: 4px 0 4px 16px; }
.tip { border: 1.5px dashed var(--ink-2); padding: 14px 16px; background: var(--grid); color: var(--ink); }

/* tables: real tables, labelled cards on phones */
.data { width: 100%; border-collapse: collapse; font-size: 0.975rem; background: var(--paper); }
.data caption { caption-side: top; text-align: left; font-weight: 700; color: var(--ink); padding: 0 0 10px; }
.data th, .data td { border: 1px solid var(--ink); padding: 11px 14px; text-align: left; vertical-align: top; }
.data thead th { background: var(--ink); color: var(--paper); font-weight: 700; }
.data tbody th { font-weight: 700; color: var(--ink); width: 30%; }
.data td.nw { white-space: nowrap; }
.data td a { color: var(--ink); }

.detail { margin: 0; border: 2px solid var(--ink); padding: 12px; background: var(--paper); }
.photo { margin: 0; }
.photo img { width: 100%; border: 1px solid var(--ink); }
.photo figcaption { font-size: 0.875rem; color: var(--ink-2); margin-top: 8px; }

/* cards (indexes). The columns follow the width the cards actually have (the .cardset wrapper is
   the container), not the window: in the reading column four cards are two by two, never four
   slivers. Columns are chosen per count so no row is left with a hole. The reading column's list
   indent and its gap between list items are taken back off, or every card after the first sits low. */
.cardset { container-type: inline-size; }
.cards { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cardset > .cards { margin: 0; padding: 0; }
.cards > .card { margin: 0; }
@container (min-width: 520px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--n3 > li:last-child, .cards--n5 > li:first-child { grid-column: span 2; }
}
@container (min-width: 900px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--n3 > li:last-child { grid-column: auto; }
  .cards--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 1040px) {
  .cards--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.card a { height: 100%; display: flex; flex-direction: column; gap: 8px; border: 2px solid var(--ink); padding: 22px; text-decoration: none; background: var(--paper); transition: background-color .15s ease; }
.card a:hover { background: var(--grid); color: var(--ink); }
.card__t { font: 800 1.2rem/1.25 var(--display); letter-spacing: -0.01em; }
.card__d { color: var(--body); }
.card__go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--red); padding-top: 6px; }

/* related links */
.related { border-top: 2px solid var(--ink); margin-top: 48px; padding-top: 20px; }
.related h2 { font-size: 1.15rem; margin-bottom: 12px; }
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.related a { display: inline-block; border: 1.5px solid var(--ink); padding: 9px 14px; text-decoration: none; font-weight: 600; min-height: 44px; }
.related a:hover { background: var(--ink); color: var(--paper); }

/* call band at the foot of a page */
.band { padding: 48px 0; border-top: 2px solid var(--ink); }
.band__in { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.band__in > div { flex: 1 1 420px; display: flex; flex-direction: column; gap: 10px; }
.band p { color: #D9DDE1; max-width: 560px; }
.band .btn--line { background: transparent; border-color: var(--paper); color: var(--paper); }
.band .btn--line:hover { background: var(--paper); color: var(--ink); }
.band .btn--ghost { color: var(--paper); }

/* the request form, served by the app inside this page */
.reqframe { display: block; width: 100%; min-height: 1100px; border: 2px solid var(--ink); background: var(--paper); }
.reqframe[data-sized] { min-height: 0; }

/* ── footer ────────────────────────────────────────────────────────────── */
.foot { background: var(--ink); color: #C9CDD2; padding: 52px 0 28px; font-size: 0.9375rem; }
.foot a { color: var(--paper); text-decoration-color: rgba(255,255,255,.35); }
/* links that are a whole line get a taller tap box; a link inside a sentence stays inline */
.foot__biz a, .foot__h a { display: inline-block; padding-block: 4px; }
.foot a:hover { color: var(--paper); text-decoration-color: var(--red); }
.foot :focus-visible { outline-color: var(--paper); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot__biz { display: flex; flex-direction: column; gap: 8px; }
.foot__biz p { max-width: 60ch; }
.foot__name { color: var(--paper); font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.foot__mail { overflow-wrap: anywhere; }
.foot__h { color: var(--paper); font-weight: 700; margin: 0 0 8px; }
.foot__col ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.foot__col li a { display: inline-block; padding: 5px 0; }
.foot__base a { display: inline-block; padding-block: 4px; }
.foot__base { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.18); margin-top: 32px; padding-top: 18px; font-size: 0.875rem; }

/* ── phone dock: the request button (Call and Text are always in the header) ── */
.dock { display: none; }

/* ── narrower screens ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* five photos in 3 or 2 columns: the last one goes wide so the last row has no hole */
  .gallery > li:nth-child(5):last-child { grid-column: span 2; }
  .gallery > li:nth-child(5):last-child img { aspect-ratio: 3 / 2; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__biz { grid-column: 1 / -1; }
}
/* ONE breakpoint for the desktop nav and the menu button, so no width has neither. It sits where
   the logo, the five links and both numbers stop fitting on one line. */
@media (max-width: 1180px) {
  .nav { display: none; }
  .mnav { display: block; }
  .top__acts { margin-left: auto; }
}
@media (max-width: 1000px) {
  .body__in { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; }
}
@media (max-width: 860px) {
  :root { --top-h: 64px; }
  .top__in { gap: 16px; }
  .brand img { width: 158px; }
  .hbtn { min-height: 48px; padding-block: 4px; }
  .sheet__body { grid-template-columns: minmax(0, 1fr); }
  .stage { position: sticky; top: var(--top-h); z-index: 5; background: var(--paper); padding: 10px var(--gutter); margin-inline: calc(-1 * var(--gutter)); border-bottom: 1px solid var(--rule); }
  .stage__frame { position: static; padding: 8px; }
  .stage__frame figcaption { display: none; }
  .drawing--home .co { display: none; } /* labels cannot be read at phone size; colour and the step text carry it */
  /* the drawing sticks under the header while the steps scroll past: kept short so the step text and its links are never under it */
  .stage .drawing { max-height: 32vh; }
  .step { min-height: 62vh; justify-content: flex-end; padding: 32px 0 48px; }
  .step:last-child { min-height: 54vh; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dock { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 2px solid var(--ink); transition: transform .2s ease; }
  .dock .btn { flex: 1 1 0; min-height: 50px; padding: 0 10px; }
  .dock.is-away { transform: translateY(110%); }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (max-width: 860px) and (orientation: landscape) and (max-height: 520px) {
  .sheet__body { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 24px; }
  .stage { position: relative; margin-inline: 0; padding: 0; border: 0; background: none; }
  .stage__frame { position: sticky; top: calc(var(--top-h) + 8px); }
  .step { min-height: 90vh; justify-content: center; }
}
/* the numbers come off and each button says one word; the number is still what the link dials */
@media (max-width: 760px) {
  .top__acts { gap: 8px; }
  .hbtn { min-height: 46px; padding: 0 14px 0 12px; gap: 7px; }
  .hbtn .ico { width: 18px; height: 18px; }
  .hbtn__k { font-size: 1rem; letter-spacing: 0; text-transform: none; }
  .hbtn__us, .hbtn__n { display: none; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .top__in { gap: 12px; }
  .brand img { width: 134px; }
  .hero__in { padding: 40px 0 40px; }
  .phero__in { padding: 20px 0 36px; }
  .face { padding: 26px 20px; }
  .tblock { flex-basis: 100%; }
  .tblock th { width: 104px; }
  .actions .btn { flex: 1 1 100%; }
  .detail { padding: 6px; }
  .detail .co text { font-size: 22px; }
  /* tables stack into labelled cards */
  /* the caption stays a full-width line; left as a table caption inside a block it shrinks to one word a line */
  .data caption { display: block; }
  /* stacked, a link alone in a cell is a tap target of its own: a taller tap area, still inline */
  .data a { padding-block: 3px; }
  .data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data, .data tbody, .data tr, .data th, .data td { display: block; width: 100%; }
  .data tr { border: 2px solid var(--ink); margin-bottom: 12px; }
  .data th, .data td { border: 0; border-bottom: 1px solid var(--rule); }
  .data tbody th { width: 100%; background: var(--grid); }
  .data td::before { content: attr(data-label); display: block; font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); margin-bottom: 2px; }
  .data td:last-child { border-bottom: 0; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .qlinks { grid-template-columns: minmax(0, 1fr); }
}
/* small phones: the words stay, the icons go, and the logo gives way before the buttons do */
@media (max-width: 480px) {
  .brand { flex: 0 1 auto; min-width: 64px; }
  .hbtn { padding: 0 13px; }
  .hbtn .ico { display: none; }
}
@media (max-width: 400px) {
  .brand img { width: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .card a, .hot rect, .dock { transition: none; }
}
@media print {
  .top, .dock, .band, .foot, .preview, .skip { display: none; }
}