/* CLIENT FILE. Archivo (SIL Open Font License), self-hosted from Google Fonts on 2026-11-04: the latin variable file,
   weight 100 to 900 and width 62% to 125%. One file, no unicode-range, so nothing falls back to Arial. Headings use
   font-stretch 112% (theme.css --display-stretch); body text stays at 100%. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin.e3a28ead.woff2) format("woff2");
}

/* Cruzz palette, the approved redesign of 2026-11-04 (canvas https://claude.ai/artifact/FcuzramMUyeVoEtqkk1KTH).
   Roles: --paper and --panel are the concrete-white grounds; --ink is the steel navy of every dark surface (header rule,
   band, footer, commercial hero); --ink-text is the blue-black reading ink; --accent is the logo blue and is allowed
   on buttons, links and focus only. Square corners everywhere (--radius 0): Trevor's rule for this site. */
:root {
  --paper: #FFFFFF;
  --panel: #F4F5F7;
  --hero-bg: #F4F5F7;
  --ink: #18212D;
  --ink-hover: #0F1620;
  --ink-text: #121821;
  --ink-2: #4A5563;
  --body: #3A4553;
  --rule: #D3D8DF;
  --accent: #2D6CBE;
  --accent-dk: #1D5299;
  --accent-on-ink: #8DB4EC;
  --on-ink: #EEF1F5;
  --on-ink-2: #AEB8C5;
  --warn-bg: #F4F5F7;
  --star: #FBBC04;
  --display: "Archivo", system-ui, "Segoe UI", Arial, sans-serif;
  --text: "Archivo", system-ui, "Segoe UI", Arial, sans-serif;
  --display-weight: 800;
  --display-stretch: 112%;
  --radius: 0;
  --wrap: 1320px;
  --gutter: clamp(16px, 4px + 3vw, 56px);
  --top-h: 76px;
  --measure: 64ch;
}

/* ENGINE FILE. The layout every trade site shares, born as Jackman Mechanical's styles.css (2026-10-20, every audit
   clean at 320 to 1440). It uses only the tokens in theme.css (the brand), so a new client never edits this file:
   colours, type and radius go in theme.css, additions in client.css. A fix here reaches every site by
   `git merge template/main`. Text on light grounds is var(--ink-text, var(--ink)): a theme that wants its reading ink
   softer than its dark surfaces sets --ink-text; one that does not set it gets --ink, as before. */
:root {
  --ease: cubic-bezier(0.2, 0, 0, 1);   /* Material standard: every hover and the dock */
  --fast: 150ms;
  /* vertical padding for a link that is a tap target of its own. A flat 3px reached 24px in Jackman's face and left
     20px in Reborn's tighter one (2026-11-01); this clears 26px for any face whose line box is at least 0.9em. The em
     resolves on the link itself, so one value fits every text size. */
  --tap-pad: max(3px, calc(13px - 0.45em));
}

*, *::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-text, 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, var(--ink)); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: -0.02em; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.5rem); line-height: 1.04; }
h2 { font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem); }
h3 { font-size: 1.3rem; line-height: 1.25; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); 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(--on-ink); padding: 10px 16px; border-radius: var(--radius); }
.skip:focus { top: 12px; color: var(--on-ink); }
.preview { background: var(--ink); color: var(--on-ink); font-size: 0.875rem; text-align: center; padding: 6px var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: var(--radius);
  font: 700 1rem/1.15 var(--text); text-decoration: none; text-align: center;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn--lg { min-height: 56px; padding: 0 24px; font-size: 1.0625rem; }
.btn--accent { background: var(--accent); color: var(--on-ink); }
.btn--accent:hover { background: var(--accent-dk); color: var(--on-ink); }
.btn--accent:focus-visible { outline-color: var(--ink-text, var(--ink)); }
.btn--line { border-color: var(--ink-text, var(--ink)); color: var(--ink-text, var(--ink)); background: var(--paper); }
.btn--line:hover { background: var(--ink); color: var(--on-ink); }
.btn--ghost { border-color: transparent; color: var(--ink-text, var(--ink)); background: transparent; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.btn--ghost:hover { color: var(--accent); }
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: var(--ink-hover); color: var(--on-ink); }
.btn--light { border-color: var(--on-ink); color: var(--on-ink); background: transparent; }
.btn--light:hover { background: var(--on-ink); color: var(--ink-text, 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-text, var(--ink)); }
.band .btn--ink:hover, .phero--dark .btn--ink:hover, .face--dark .btn--ink:hover { background: var(--panel); color: var(--ink-text, var(--ink)); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* online booking's line under the buttons: in the page only while the owner has it open (functions/_booking.js) */
.bkline { margin: 14px 0 0; max-width: 640px; font-size: 1rem; line-height: 1.5; color: var(--body); }
.bkline a { color: var(--ink-text, var(--ink)); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.phero--dark .bkline, .phero--dark .bkline a, .face--dark .bkline, .face--dark .bkline a { color: var(--on-ink); }

/* ── Google stars strip ────────────────────────────────────────────────── */
/* Above the header, scrolls away (the sticky header keeps the numbers). Stars are a bar masked to five star shapes
   and filled to the rating; the text beside it says the same thing. */
.gstrip { background: var(--ink); color: var(--on-ink); font-size: 0.875rem; line-height: 1.3; }
.gstrip__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; min-height: 38px; padding-block: 4px; }
.gstrip a { color: var(--on-ink); }
.gstrip a:hover { color: var(--on-ink); }
.gstrip a:focus-visible { outline-color: var(--on-ink); }
.gstrip__g { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 30px; }
.gstrip__g b { font: 800 0.9375rem/1 var(--display); font-variant-numeric: tabular-nums; }
.gstrip__g:hover .gstrip__t { text-decoration: underline; }
.gstrip__x { color: var(--on-ink-2); }
.gstrip__x a { font-weight: 700; text-decoration: none; }
.gstrip__x a:hover { text-decoration: underline; }
.stars { display: block; flex: none; width: 85px; height: 16px; background: linear-gradient(90deg, var(--star) var(--r), rgb(255 255 255 / .28) var(--r));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath d='M8.5 0l2.5 5.3 5.8.7-4.3 4 1.1 5.7-5.1-2.8-5.1 2.8 1.1-5.7L.2 6l5.8-.7z'/%3E%3C/svg%3E") 0 0 / 17px 16px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16'%3E%3Cpath d='M8.5 0l2.5 5.3 5.8.7-4.3 4 1.1 5.7-5.1-2.8-5.1 2.8 1.1-5.7L.2 6l5.8-.7z'/%3E%3C/svg%3E") 0 0 / 17px 16px repeat-x; }
@media (forced-colors: active) { .stars { forced-color-adjust: none; } }
@media (max-width: 760px) {
  .gstrip__in { justify-content: center; }
  .gstrip__x { display: none; }
}

/* ── 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-text, var(--ink)); border-bottom-color: var(--ink-text, var(--ink)); }
.nav a[aria-current] { border-bottom-color: var(--accent); }
/* Text and Call, side by side at every width. 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: var(--radius); color: var(--on-ink); text-decoration: none; transition: background-color var(--fast) var(--ease); }
.hbtn:hover { color: var(--on-ink); }
.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: var(--ink-hover); }
.hbtn--call { background: var(--accent); }
.hbtn--call:hover { background: var(--accent-dk); }
.hbtn--call:focus-visible { outline-color: var(--ink-text, 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: var(--radius); cursor: pointer; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav[open] summary { background: var(--ink); color: var(--on-ink); }
.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 2px 4px rgb(0 0 0 / .06), 0 12px 30px rgb(0 0 0 / .10); }
.mnav nav a { padding: 13px 18px; text-decoration: none; font-weight: 600; }
.mnav nav a:hover, .mnav nav a[aria-current] { background: var(--panel); color: var(--ink-text, var(--ink)); }

/* ── home hero ─────────────────────────────────────────────────────────── */
.hero, .phero { background: var(--hero-bg); }
.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, 1.7rem + 3vw, 4.1rem); line-height: 1.02; }
.answer { max-width: 640px; font-size: 1.1875rem; color: var(--body); }

/* the at-a-glance block: a real table */
.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: var(--tap-pad); }
.tblock a:hover { text-decoration: underline; }
.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(--on-ink); }

/* ── the faces (who the business serves) ───────────────────────────────── */
.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(--accent); }
.face h2 { font-size: clamp(1.6rem, 1.4rem + 0.8vw, 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(--on-ink); }
.face--dark h2, .band h2 { color: var(--on-ink); }
.face--dark a:not(.btn), .band a:not(.btn) { color: var(--on-ink); }
.face--dark .face__k { color: var(--on-ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.face--dark :focus-visible, .band :focus-visible { outline-color: var(--on-ink); }

/* ── 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, .prose li > a:only-child { padding-block: var(--tap-pad); }
/* photos from real jobs: the column count follows the photo count (gallery--n3 .. --n6) so no row has a hole */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 16px; }
.gallery--n3 { --n: 3; } .gallery--n4 { --n: 4; } .gallery--n5 { --n: 5; } .gallery--n6 { --n: 3; }
.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(--on-ink); }
/* 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, var(--ink)); text-decoration: none; }
.qlinks .ico { color: var(--accent); }
.qlinks a:hover { color: var(--accent); }

/* ── 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: var(--ink); color: var(--on-ink); }
.phero--dark h1 { color: var(--on-ink); }
.phero--dark .answer { color: var(--on-ink-2); }
.phero--dark a:not(.btn) { color: var(--on-ink); }
.phero--dark .btn--line { background: transparent; border-color: var(--on-ink); color: var(--on-ink); }
.phero--dark .btn--line:hover { background: var(--on-ink); color: var(--ink-text, var(--ink)); }
.phero--dark .btn--ghost { color: var(--on-ink); }
.phero--dark :focus-visible { outline-color: var(--on-ink); }
.phero--dark .crumbs, .phero--dark .crumbs a, .phero--dark .eyebrow { color: var(--on-ink-2); }
.phero--dark .tblock { color: var(--ink-text, var(--ink)); }
.eyebrow { font-weight: 700; color: var(--accent); 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-text, var(--ink)); margin-top: 48px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: var(--ink-text, 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-text, var(--ink)); }
.prose a { color: var(--ink-text, var(--ink)); text-decoration-thickness: 1px; }
.prose a:hover { color: var(--accent); }
.src { font-size: 0.875rem; color: var(--ink-2); overflow-wrap: anywhere; } /* wraps: a long source name ("Landlord and Tenant Board, How a Landlord Can End a Tenancy") pushed phones sideways when it was 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); border-radius: var(--radius); }
.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(--accent); border-left-width: 8px; padding: 18px 20px; background: var(--warn-bg); color: var(--ink-text, 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(--panel); color: var(--ink-text, var(--ink)); }
/* the request page on a site with no app: the ways to send the same details */
.ways { padding-left: 22px; }
.ways li + li { margin-top: 10px; }
.ways a { padding-block: var(--tap-pad); }

/* 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-text, 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(--on-ink); font-weight: 700; }
.data tbody th { font-weight: 700; color: var(--ink-text, var(--ink)); width: 30%; }
.data td.nw { white-space: nowrap; }
.data td { font-variant-numeric: tabular-nums; }
.data td a { color: var(--ink-text, var(--ink)); }

.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--n1 { grid-template-columns: 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--n1 { grid-template-columns: minmax(0, 1fr); }
  .cards--n2, .cards--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--n3 > li:last-child { grid-column: auto; }
}
@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); border-radius: var(--radius); padding: 22px; text-decoration: none; background: var(--paper); transition: background-color var(--fast) var(--ease); }
.card a:hover { background: var(--panel); color: var(--ink-text, var(--ink)); }
.card__t { font: var(--display-weight) 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(--accent); 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 li + li { margin-top: 0; }   /* a related list inside .prose: the gap does the spacing */
.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(--on-ink); }

/* 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: var(--on-ink-2); max-width: 560px; }
.band .btn--line { background: transparent; border-color: var(--on-ink); color: var(--on-ink); }
.band .btn--line:hover { background: var(--on-ink); color: var(--ink-text, var(--ink)); }
.band .btn--ghost { color: var(--on-ink); }

/* 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: var(--on-ink-2); padding: 52px 0 28px; font-size: 0.9375rem; }
.foot a { color: var(--on-ink); text-decoration-color: rgb(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(--on-ink); text-decoration-color: var(--on-ink); }
.foot :focus-visible { outline-color: var(--on-ink); }
/* the business column, then one column per face, the areas column and the company column (--cols, set by the build) */
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(var(--cols, 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(--on-ink); font-family: var(--display); font-weight: var(--display-weight); font-size: 1.2rem; }
.foot__mail { overflow-wrap: anywhere; }
.foot__h { color: var(--on-ink); font-weight: 700; margin: 0 0 8px; }
.foot__h + .foot__h { margin-top: 18px; }   /* the areas column of a site with no town pages has no list between them */
.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 rgb(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--n5 > li:last-child { grid-column: span 2; }
  .gallery--n5 > li:last-child img { aspect-ratio: 3 / 2; }
  .gallery--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .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 (tools/gate.cjs checks it). It sits
   where the logo, the nav links and both numbers stop fitting on one line; a site with a shorter nav may move it, in
   this one rule, as a deliberate local engine change (ENGINE.md). */
@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; }
  .gallery, .gallery--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery--n3 > li:last-child { grid-column: span 2; }
  .gallery--n3 > li:last-child img { aspect-ratio: 3 / 2; }
  .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 200ms var(--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)); }
}
/* 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%; }
  /* 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: var(--tap-pad); }
  .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(--panel); }
  .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, .hbtn, .card a, .dock { transition: none; }
}
@media print {
  .top, .dock, .band, .foot, .preview, .skip, .gstrip { display: none; }
}

/* Cruzz's client layout: the approved two-door redesign (2026-11-04). Loaded after the engine's styles.css.
   Square corners, Archivo with wide headings, steel navy and concrete white, the logo blue on actions only.
   The one bold moment is the pair of photo doors on the home page; everything else stays quiet.
   The shared navigation keeps the engine's single breakpoint. */
:root { --ease-expr: cubic-bezier(.4, .14, .3, 1); --s6: clamp(48px, 30px + 4.4vw, 80px); --s7: clamp(64px, 36px + 7vw, 120px); }
body { font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .foot__name, .card__t { font-stretch: var(--display-stretch); letter-spacing: -0.02em; }
h1 { line-height: 1.04; }
a:hover { color: var(--accent-dk); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--top-h) + 20px); }

/* header: a thin rule, square buttons, no tracked capitals */
.top { border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; min-height: 44px; }
.brand img { width: 230px; height: auto; }
.nav { gap: 32px; }
.nav a { border-bottom-width: 2px; }
.nav a[aria-current] { border-bottom-color: var(--ink-text); }
.hbtn { min-height: 48px; }
.hbtn__k { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.mnav summary { border-width: 1.5px; }
.btn { min-height: 52px; padding: 0 26px; }
.btn--lg { min-height: 56px; }
.btn--light:hover { color: var(--ink-text); }

/* the generic inner page */
.project-label { font-size: 1rem; font-weight: 600; margin: 0 0 4px; color: var(--accent); }
.phero { border-bottom: 1px solid var(--rule); background: var(--paper); }
.phero--dark { border-bottom: 0; background: var(--ink); }
.phero--dark .project-label { color: var(--accent-on-ink); }
.phero h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 4.2rem); max-width: 18ch; }
.phero .answer { max-width: 62ch; font-size: 1.125rem; line-height: 1.65; }
.phero:not(.cruzz-hero) .phero__in { padding-block: 40px 56px; }
.cruzz-hero .phero__in { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 56px; padding-block: 48px 64px; }
.cruzz-hero .phero__copy { min-width: 0; }
.project-photo { margin: 0; min-width: 0; }
.project-photo img { display: block; width: 100%; height: auto; object-fit: cover; }
.cruzz-hero .project-photo img { aspect-ratio: 4/3; max-height: 520px; }
.project-photo img[src$="existing-interior.webp"] { aspect-ratio: auto; max-height: none; }
.project-photo figcaption { font-size: 0.9375rem; line-height: 1.5; margin-top: 12px; color: var(--ink-2); }
.phero--dark .project-photo figcaption { color: var(--on-ink-2); }
.phero--dark a:focus-visible, .phero--dark :focus-visible { outline-color: var(--accent-on-ink); }
.body { padding: 64px 0 var(--s7); }
.body__in { gap: 64px; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); line-height: 1.15; margin-top: 48px; }
.prose > h2:first-child { margin-top: 0; }
.prose p, .prose li { line-height: 1.7; }
.prose li { margin-block: 8px; }
.prose a { text-underline-offset: 4px; }
.prose table { width: 100%; margin-block: 40px; font-size: 1rem; border-collapse: collapse; }
.prose caption { text-align: left; font-weight: 700; color: var(--ink-text); margin-bottom: 14px; }
.prose thead th { text-align: left; font-size: 0.875rem; font-weight: 700; padding: 12px 16px 12px 0; border-bottom: 2px solid var(--ink-text); color: var(--ink-text); }
.prose tbody th, .prose tbody td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); }
.prose tbody th { color: var(--ink-text); font-weight: 700; }
.aside .panel { border: 1px solid var(--rule); background: var(--panel); }
.aside .panel h2 { font-size: 1.3rem; }
.panel .btn { width: 100%; }
.space-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 40px; }
.space-gallery img { aspect-ratio: 3/4; object-fit: cover; }
.related a { border-width: 1px; border-color: var(--rule); }
.related a:hover { border-color: var(--ink); }
.card a { border-width: 1px; border-color: var(--rule); }
.card a:hover { border-color: var(--ink-text); }

/* shared section rhythm for the home page and the two doors */
.cz-sect { padding: clamp(56px, 32px + 5vw, 104px) 0; background: var(--panel); }
.cz-sect--white { background: var(--paper); }
.cz-sect--panel { background: var(--panel); }
.cz-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 48px; margin-bottom: clamp(32px, 20px + 2.4vw, 56px); align-items: end; }
.cz-head h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.cz-head p { color: var(--ink-2); max-width: 56ch; }

/* home: the intro and the two doors */
.cz-intro { background: var(--paper); padding: clamp(32px, 22px + 2.6vw, 56px) 0 clamp(28px, 20px + 1.6vw, 40px); }
.cz-intro__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 56px; align-items: end; }
.cz-intro h1 { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.4rem); max-width: 22ch; }
.cz-intro .answer { color: var(--ink-2); font-size: 1.0625rem; max-width: 46ch; }
.cz-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--paper); }
.cz-door { container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(560px, calc(100svh - var(--top-h) - 200px), 820px); color: #fff; }
.cz-door > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 700ms var(--ease-expr); }
.cz-door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(12 17 24 / .94) 0%, rgb(12 17 24 / .78) 42%, rgb(12 17 24 / .3) 70%, rgb(12 17 24 / .08) 100%); }
.cz-door:hover > img { transform: scale(1.04); }
.cz-door__body { padding: var(--s6) clamp(24px, 2vw + 16px, 64px) clamp(32px, 2vw + 24px, 64px); max-width: 660px; }
.cz-door__who { font-weight: 600; font-size: 1rem; color: #D5DEEA; margin-bottom: 14px; }
.cz-door h2 { font-size: clamp(2.6rem, 1.8rem + 3.6vw, 5.2rem); font-size: clamp(2.6rem, 12.5cqi, 5.6rem); line-height: 1; margin-bottom: 22px; overflow-wrap: normal; hyphens: manual; }
.cz-door h2 a { color: #fff; text-decoration: none; }
.cz-door h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cz-door h2 a:focus-visible { outline: 3px solid var(--accent-on-ink); outline-offset: 6px; }
.cz-door p { font-size: 1.125rem; color: #E4E9F0; max-width: 46ch; margin-bottom: 22px; }
.cz-door ul { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; }
.cz-door li { font-size: 0.9375rem; font-weight: 600; line-height: 1.2; padding-right: 18px; margin-right: 18px; border-right: 1px solid rgb(255 255 255 / .35); }
.cz-door li:last-child { border: 0; margin: 0; padding: 0; }
.cz-door__cta { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; background: #fff; color: var(--ink-text); font-weight: 700; font-size: 1rem; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.cz-door:hover .cz-door__cta { background: var(--accent); color: #fff; }

/* home: how a project starts */
.cz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink-text); }
.cz-steps li { padding: 24px 24px 0 0; }
.cz-steps li + li { padding-left: 24px; border-left: 1px solid var(--rule); }
.cz-steps__n { display: block; font-weight: 800; font-size: 0.9375rem; color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.cz-steps h3 { font-size: 1.375rem; margin-bottom: 10px; }
.cz-steps p { font-size: 1rem; color: var(--ink-2); }

/* lists of service links, in columns of a size the count fills */
.cz-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.cz-cols h3 { font-size: 1.6rem; padding-bottom: 14px; border-bottom: 2px solid var(--ink-text); }
.cz-cols h3 a { text-decoration: none; }
.cz-links { list-style: none; margin: 0; padding: 0; }
.cz-links li { border-bottom: 1px solid var(--rule); }
.cz-links a { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; text-decoration: none; font-weight: 700; color: var(--ink-text); }
.cz-links a span { font-weight: 400; font-size: 0.9375rem; color: var(--ink-2); }
.cz-links a:hover { color: var(--accent-dk); }
.cz-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
.cz-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.cz-grid4 li:nth-child(-n+4), .cz-grid3 li:nth-child(-n+3) { border-top: 2px solid var(--ink-text); }
.towns a { border-width: 1px; border-color: var(--rule); background: var(--paper); }
.towns a:hover { border-color: var(--ink); }

/* commercial: the dark split hero */
.cz-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(520px, 70svh, 720px); background: var(--ink); color: var(--on-ink); }
.cz-split__txt { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; padding: var(--s6) var(--gutter) var(--s6) max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.cz-split .crumbs { padding-top: 0; }
.cz-split .crumbs, .cz-split .crumbs a { color: var(--on-ink-2); }
.cz-split h1 { color: #fff; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.7rem); max-width: 18ch; overflow-wrap: normal; }
.cz-split .answer { color: var(--on-ink-2); max-width: 52ch; font-size: 1.125rem; }
.cz-split :focus-visible { outline-color: var(--accent-on-ink); }
.cz-split__pic { position: relative; min-height: 320px; }
.cz-split__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* commercial: the sector tiles, each a link */
.cz-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.cz-tile a { height: 100%; display: flex; flex-direction: column; background: var(--paper); text-decoration: none; color: var(--ink-text); }
.cz-tile img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.cz-tile__b { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 28px; }
.cz-tile h3 { font-size: 1.45rem; }
.cz-tile p { font-size: 1rem; color: var(--ink-2); }
.cz-tile__for { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 0.875rem; font-weight: 700; color: var(--ink-text) !important; }
.cz-tile a:hover h3 { color: var(--accent-dk); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* hub tables on the two doors: full width, the prose table rules and phone stacking still apply */
.prose.cz-hubtable { max-width: none; }
.prose.cz-hubtable table { margin-block: 24px 0; }
.cz-hubtable__h { margin-top: 56px; }

/* the spec table: a real table, ruled like a drawing schedule */
.cz-spec { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.cz-spec th, .cz-spec td { text-align: left; vertical-align: top; padding: 24px 24px 24px 0; border-top: 1px solid var(--rule); }
.cz-spec tr:first-child th, .cz-spec tr:first-child td { border-top: 2px solid var(--ink-text); }
.cz-spec th { width: 30%; font-weight: 800; font-size: 1.1875rem; font-stretch: var(--display-stretch); color: var(--ink-text); }
.cz-spec td { color: var(--ink-2); }

/* residential: the full-bleed hero and the split */
.cz-rhero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(560px, 80svh, 860px); color: #fff; }
.cz-rhero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cz-rhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgb(12 17 24 / .72) 0%, rgb(12 17 24 / .35) 50%, rgb(12 17 24 / 0) 75%), linear-gradient(to top, rgb(12 17 24 / .85) 0%, rgb(12 17 24 / .35) 50%, rgb(12 17 24 / .1) 100%); }
.cz-rhero__in { padding-bottom: var(--s6); display: flex; flex-direction: column; gap: 22px; }
.cz-rhero .crumbs, .cz-rhero .crumbs a { color: #D5DEEA; }
.cz-rhero h1 { color: #fff; font-size: clamp(2.4rem, 1.4rem + 3.8vw, 5rem); max-width: 17ch; }
.cz-rhero .answer { color: #E4E9F0; max-width: 54ch; font-size: 1.125rem; }
.cz-rhero :focus-visible { outline-color: var(--accent-on-ink); }
.cz-rsplit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2px; background: var(--paper); }
.cz-rsplit__pic { position: relative; min-height: 460px; }
.cz-rsplit__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cz-rsplit__txt { padding: var(--s6) clamp(24px, 3vw, 56px); }
.cz-rsplit__txt h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); margin-bottom: 16px; }
.cz-rsplit__txt > p { color: var(--ink-2); margin-bottom: 20px; }
.cz-rsplit .cz-links li:first-child { border-top: 2px solid var(--ink-text); }

/* closing prose on the door pages */
.cz-notegrid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px 48px; align-items: start; }
.cz-notegrid__h { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.75rem); padding-top: 14px; border-top: 2px solid var(--ink-text); }
.cz-notegrid .cz-notes { padding-top: 16px; border-top: 1px solid var(--rule); }
.cz-notes { max-width: var(--measure); color: var(--body); }
.cz-notes > * + * { margin-top: 16px; }
.cz-notes h2 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); margin-top: 40px; color: var(--ink-text); }
.cz-notes h2:first-child { margin-top: 0; }
.cz-notes ul { padding-left: 22px; }
.cz-notes li + li { margin-top: 6px; }
.cz-notes a { color: var(--ink-text); text-underline-offset: 4px; }

/* the band at the foot of every page */
.band { padding: var(--s7) 0; border-top: 0; }
.band h2 { font-size: clamp(2.1rem, 1.4rem + 3vw, 4rem); }
.band p { margin-top: 8px; }
.band .btn--accent:focus-visible { outline-color: var(--accent-on-ink); }
.foot { border-top: 1px solid #223041; }

@media (max-width: 1100px) {
  .cz-tiles, .cz-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-grid4 li:nth-child(-n+4) { border-top: 0; }
  .cz-grid4 li:nth-child(-n+2) { border-top: 2px solid var(--ink-text); }
  .cz-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .cz-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 860px) {
  .cz-notegrid .cz-notes { border-top: 0; padding-top: 0; }
  .brand img { width: 180px; }
  .cz-head, .cz-intro__in, .cz-cols, .cz-rsplit, .cz-notegrid { grid-template-columns: minmax(0, 1fr); }
  .cz-doors { grid-template-columns: minmax(0, 1fr); }
  .cz-door { min-height: 0; }
  .cz-door__body { padding-top: 180px; }
  .cz-door::before { background: linear-gradient(to top, rgb(12 17 24 / .94) 0%, rgb(12 17 24 / .82) 60%, rgb(12 17 24 / .35) 100%); }
  .cz-door li { width: 100%; border: 0; margin-right: 0; padding-right: 0; }
  .cz-split { grid-template-columns: minmax(0, 1fr); }
  .cz-split__pic { order: -1; min-height: 260px; }
  .cz-split__txt { padding: 40px var(--gutter) 56px; }
  .cz-grid3 { grid-template-columns: minmax(0, 1fr); }
  .cz-grid3 li:nth-child(-n+3) { border-top: 0; }
  .cz-grid3 li:first-child { border-top: 2px solid var(--ink-text); }
  .cz-rsplit__pic { min-height: 280px; }
  .cruzz-hero .phero__in { grid-template-columns: 1fr; gap: 32px; padding-block: 32px 40px; }
  .cruzz-hero .project-photo img { aspect-ratio: 16/9; max-height: 400px; }
  .phero h1 { max-width: 22ch; }
  .body__in { gap: 32px; }
}
@media (max-width: 640px) {
  /* checklist tables stack into labelled rows; still real tables for crawlers and screen readers */
  .prose caption { display: block; }
  .prose table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose table, .prose table tbody, .prose table tr, .prose table th, .prose table td { display: block; width: 100%; }
  .prose table tr { border-top: 2px solid var(--ink-text); padding-bottom: 8px; }
  .prose tbody th, .prose tbody td { border-bottom: 0; padding: 10px 0 0; }
  .prose tbody th { padding-top: 14px; }
  .prose td::before { content: attr(data-label); display: block; font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); margin-bottom: 2px; }

  body { font-size: 17px; }
  .cz-tiles, .cz-grid4, .cz-steps { grid-template-columns: minmax(0, 1fr); }
  .cz-grid4 li:nth-child(-n+2) { border-top: 0; }
  .cz-grid4 li:first-child { border-top: 2px solid var(--ink-text); }
  .cz-steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .cz-spec th, .cz-spec td { display: block; width: auto; padding: 0; }
  .cz-spec th { padding-top: 22px; border-top: 1px solid var(--rule); }
  .cz-spec td { border-top: 0; padding: 6px 0 22px; }
  .cz-spec tr:first-child td { border-top: 0; }
  .phero:not(.cruzz-hero) .phero__in { padding-block: 28px 36px; }
  .space-gallery { grid-template-columns: 1fr; }
  .brand img { width: 160px; }
  .aside a[href^="mailto:"], .foot a[href^="mailto:"], .prose td a[href^="mailto:"], .prose td a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 400px) {
  .brand img { width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .cz-door:hover > img { transform: none; }
}
.cz-after { margin-top: 32px; }