/* CLIENT FILE. Reborn Renos type (2026-11-01). League Gothic: the condensed display face, capitals only, for the
   headlines Trevor asked for ("condensed displays"). League Spartan: the logo's own face, for everything people read.
   Latin files only, from Google Fonts on 2026-11-01, written WITHOUT unicode-range so nothing falls back to Arial. */
@font-face {
  font-family: "League Gothic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/league-gothic-latin.44dceee4.woff2) format("woff2");
}
@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/league-spartan-latin.7d843a9f.woff2) format("woff2");
}
/* Metric-matched fallbacks so the swap does not shift the page. League Gothic against Impact, from both fonts' own
   tables (2026-11-01): capitals average 0.353 em against 0.509, so Impact is drawn at 69.4%; the overrides are League
   Gothic's ascent (0.968) and descent (0.233) divided by that same 0.694. */
@font-face { font-family: "League Gothic fallback"; src: local("Impact"), local("Arial Narrow Bold"), local("Arial"); size-adjust: 69.4%; ascent-override: 139.4%; descent-override: 33.5%; }
@font-face { font-family: "League Spartan fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 92%; descent-override: 22%; }

/* CLIENT FILE. The Reborn Renos brand, from its logo (concept 33, 2026-11-01): slate #3B3F45 letters under gold
   #B08D4F roofs. Trevor, the same day: "the logo colour scheme on a white background, soft palette, high end
   professional, condensed displays and pills ... properly contrasted text". styles.css (the engine) uses only these
   tokens; client.css adds the gold and the surfaces it needs.

   Roles. Ground: --paper, white. Surfaces: --mist, a soft slate for the scope sheet, table heads and the footer;
   --sand, a soft gold for the small tags that mark a place (the ways to pay), never a
   whole section. Ink: --ink-text, the logo's slate, for headings, links and strong words; --body for reading; --ink-2
   for captions; --ink, a deeper slate, for the call band and the dark buttons. Gold: --gold is the logo's gold and is
   only ever a shape (the roofs, the call button, small marks): it is 3.1:1 on white, so it never carries text there.
   --accent is the deep gold that may be text: eyebrows, the focus ring, arrows.
   Contrast floors (WCAG 2.2 AA): text 4.5:1 on its ground, controls and the focus ring 3:1. Worked out 2026-11-01 and
   checked again in the browser after the build (HANDOFF.md): ink-text on paper 10.6 (9.8 on mist), body 8.3, ink-2
   5.6 (5.2 on mist), accent 6.1 (5.7 on mist, 5.4 on sand), white on ink 13.6, on-ink-2 on ink 7.3, on-gold on gold
   5.0 (6.1 on the hover gold), rule-2 on paper 3.4 for the outlines of controls. */
:root {
  --paper: #FFFFFF;    /* page ground, cards, tiles, the header under its blur */
  --mist: #F5F6F7;     /* soft slate: the scope sheet's section, table heads, the footer, hover fills */
  --panel: #ECEEF0;    /* one step darker: stacked table row heads, pressed fills */
  --sand: #F6F0E4;     /* soft gold: the ways to pay tags. Never a section. */
  --hero-bg: #FFFFFF;  /* the inner page heroes and the home hero: white, like the page */
  --ink: #2B2E33;      /* deep slate: the call band, the preview strip, the skip link, dark buttons */
  --ink-hover: #1E2024;/* hover on ink buttons only */
  --ink-text: #3B3F45; /* the logo's slate: headings, links, strong words, the outline buttons */
  --ink-2: #62686F;    /* captions, breadcrumbs, table labels */
  --body: #4A4F56;     /* long-form text, a step softer than the headings */
  --rule: #E1E4E7;     /* hairlines: card edges, table rows, section joins */
  --rule-2: #868C93;   /* the outline of a control (an outline link, the menu button): 3.4:1 on white, 3.1 on mist */
  --gold: #B08D4F;     /* the logo's gold: roofs, the call button, small marks. A shape, never text on a light ground. */
  --gold-hi: #C29D5E;  /* the call button on hover: lighter, so its dark text gains contrast instead of losing it */
  --on-gold: #22252A;  /* text on gold */
  --accent: #7A5D27;   /* deep gold, the only gold that is text: eyebrows, the focus ring, arrows, the warning edge */
  --accent-dk: #634B1F;/* hover on deep gold fills only */
  --on-ink: #FFFFFF;   /* text on ink */
  --on-ink-2: #B9BEC4; /* secondary text on ink (the band) */
  --warn-bg: #FBF6EC;  /* the warning box ground; its edge is the accent */
  --star: #FBBC04;     /* Google's star yellow: the stars strip only (no profile yet) */
  --card: #FFFFFF;     /* cards, tiles and side panels */

  --display: "League Gothic", "League Gothic fallback", Impact, "Arial Narrow", sans-serif;
  --text: "League Spartan", "League Spartan fallback", "Segoe UI", Arial, sans-serif;
  --display-weight: 400;

  --radius: 2px;       /* buttons, menu controls, tags: square cut, a 2px corner so they look made, not sharp */
  --radius-card: 4px;  /* cards, panels, tables, the call band */
  --wrap: 1200px;
  --gutter: 24px;
  --top-h: 68px;       /* the sticky header's height: anchors and focus stop below it */
  --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; }
}

/* CLIENT FILE. Reborn Renos, loaded after the engine's styles.css. Tokens live in theme.css; this file only places
   them. The plan (the redesign of 2026-11-01; Trevor: "the logo colour scheme on a white background, soft palette,
   high end professional, condensed displays and pills ... properly contrasted text ... smooth scrolling"):
   - White ground and the logo's slate for type. The logo's gold is only ever a shape: the roofs, the call button, small
     marks. Deep gold (--accent) is the one gold that may be text.
   - League Gothic capitals for the headline voice; League Spartan, the logo's own face, for reading.
   - No pills (Trevor, second pass the same day: "i dont wanna see round buttons pills, also must be more condensed
     and sleek and polished"). Every control is square cut (a 2px corner, cards 4px) and every action speaks in
     condensed capitals. A control that is a link has an outline at 3:1 and a hover; a label (a town, a way to pay)
     has a soft fill, no outline and no hover, so it never looks clickable.
   - The one bold moment is the home hero: the photo under two gables with the logo's two roofs drawn over it in gold.
     Every other section stays quiet: hairlines, soft surfaces, shadows only on what floats or is hovered.
   - Motion: 150 ms hovers on the engine's curve, one expressive moment (the roofs draw in), smooth scrolling for jumps
     within a page. All of it is off for anyone whose device asks for less motion.
   Never restyle .nav or .mnav inside a media query here (the gate keeps one breakpoint, tools/gate.cjs). */

:root {
  /* the logo's two roofs as a mask, for the small marks (fact cards, the footer, the call band) */
  --roofs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 5 44 12'%3E%3Cpath d='M1 15 11 7.5 21 15M23 15 33 7.5 43 15' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --lift: 0 1px 2px rgb(43 46 51 / 0.05), 0 18px 36px -18px rgb(43 46 51 / 0.30); /* one light, from above */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
::selection { background: #EADCBE; color: var(--on-gold); }
/* hover never loses contrast: links darken and their underline turns gold */
a:hover { color: var(--ink); text-decoration-color: var(--gold); }

/* ── type: condensed capitals for the headline voice, the logo's face for reading ─────────────────────── */
h1, h2, h3 { color: var(--ink-text); }
h1, .sect__head h2, .scope__head h2, .band h2, .facts b, .foot__name, .group__head h3, .tile__t, .card__t {
  font-family: var(--display); font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: 0.01em;
}
/* every action in condensed capitals: buttons, the nav, the menu, the outline links */
.btn, .nav a, .mnav nav a, .hbtn__n, .group__all, .after a, .related a, .parts a, .towns a {
  font-family: var(--display); font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: 0.05em;
}
h1 { font-size: clamp(2.9rem, 2rem + 3.2vw, 5rem); line-height: 0.92; }
.sect__head h2, .scope__head h2 { font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.9rem); line-height: 0.94; }
.band h2 { font-size: clamp(2.2rem, 1.7rem + 1.9vw, 3.4rem); line-height: 0.98; }
.prose h2, .prose h3, .aside .panel h2, .related h2, .warn h2, .warn h3, .foot__h {
  font-family: var(--text); font-weight: 700; letter-spacing: -0.01em; text-transform: none;
}
.prose h2 { font-size: clamp(1.4rem, 1.26rem + 0.6vw, 1.75rem); line-height: 1.22; }
.prose h3 { font-size: 1.2rem; line-height: 1.3; }
.answer { font-size: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem); line-height: 1.6; color: var(--body); }
/* the line over a heading that says where you are: a short gold rule, then deep gold words */
.eyebrow, .hero__eb {
  align-self: flex-start; display: flex; align-items: center; gap: 12px; max-width: 100%;
  color: var(--accent); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.01em;
}
.eyebrow::before, .hero__eb::before { content: ""; flex: none; width: 28px; height: 2px; background: var(--gold); }

/* ── buttons: slim, square cut, condensed capitals (Trevor, 2026-11-01: "the call buttons are big and weird looking
   and should be sleek and better contrasted"). The call is deep slate with white words (14:1) and a gold phone;
   everything else is a slate outline. Gold stays a shape: the icon and the line that grows under a hovered call. ─── */
.btn {
  position: relative; min-height: 44px; padding: 1px 20px 0; gap: 9px; font-size: 1.05rem; line-height: 1; letter-spacing: 0.06em;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn--lg { min-height: 46px; padding: 1px 24px 0; font-size: 1.125rem; }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 16px; height: 16px; }
.btn--accent { background: var(--ink); color: var(--on-ink); box-shadow: 0 1px 2px rgb(43 46 51 / 0.2); }
.btn--accent .ico { color: var(--gold-hi); }
.btn--accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--fast) var(--ease); }
.btn--accent:hover { background: var(--ink-hover); color: var(--on-ink); }
.btn--accent:hover::after { transform: scaleX(1); }
.btn--accent:focus-visible { outline-color: var(--ink-text); }
/* on the dark band the call turns white with slate words, so it still stands out */
.band .btn--accent { background: var(--paper); color: var(--ink-text); box-shadow: none; }
.band .btn--accent .ico { color: var(--accent); }
.band .btn--accent:hover { background: var(--panel); color: var(--ink); }
.band .btn--accent:focus-visible { outline-color: var(--on-ink); }
.btn--line { background: var(--paper); border: 1.5px solid var(--ink-text); color: var(--ink-text); }
.btn--line:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn--ghost { text-decoration-color: var(--gold); }
.btn--ghost:hover { color: var(--ink); }

/* ── the header: white under a blur, the nav as condensed words, the call as one slim slate block ─────── */
.top {
  background: rgb(255 255 255 / 0.88); border-bottom: 1px solid var(--rule);
  -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .top { background: var(--paper); }
}
/* a soft edge that fades in as the page scrolls under the header (browsers with scroll timelines; the rest keep the hairline) */
.top::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none; opacity: 0;
  background: linear-gradient(rgb(43 46 51 / 0.07), rgb(43 46 51 / 0));
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .top::after { animation: rr-show linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
  }
}
@keyframes rr-show { to { opacity: 1; } }
.brand img { width: 208px; }
.nav { gap: 2px; font-size: 1.0625rem; }
.nav a { position: relative; padding: 12px 12px 10px; letter-spacing: 0.07em; border-bottom: 0; color: var(--ink-text); transition: color var(--fast) var(--ease); }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--fast) var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--ink); }
/* the call (Trevor, 2026-11-02: "the call button is so bold and large"): no block at all. On wide screens it is the
   number in plain words after a hairline, with a small deep gold phone; on phones a quiet square the size of the menu
   button, the phone alone. The aria-label still says "Call us at" and the number. */
.top__acts { align-self: stretch; align-items: center; }
.hbtn--call, .hbtn--call:hover {
  min-height: 44px; padding: 0 0 0 22px; gap: 9px; border-left: 1px solid var(--rule); border-radius: 0;
  background: transparent; color: var(--ink-text);
}
.hbtn .ico { width: 16px; height: 16px; color: var(--accent); }
.hbtn__k { display: none; }
.hbtn__n {
  position: relative; padding: 4px 0 3px; font: 600 1.0625rem/1 var(--text); letter-spacing: 0.01em; text-transform: none;
}
.hbtn__n::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--fast) var(--ease); }
.hbtn--call:hover .hbtn__n { color: var(--ink); }
.hbtn--call:hover .hbtn__n::after { transform: scaleX(1); }
.hbtn--call:focus-visible { outline-color: var(--accent); outline-offset: 2px; }
.mnav summary { width: 44px; height: 44px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink-text); transition: background-color var(--fast) var(--ease); }
.mnav summary svg { width: 20px; height: 20px; }
.mnav summary:hover { background: var(--mist); }
.mnav[open] summary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.mnav nav { top: calc(100% + 10px); min-width: 264px; padding: 6px; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--paper); box-shadow: 0 2px 6px rgb(43 46 51 / 0.06), 0 24px 48px -16px rgb(43 46 51 / 0.30); }
.mnav nav a { padding: 13px 16px 11px; border-radius: var(--radius); border-left: 2px solid transparent; font-size: 1.3rem; line-height: 1.1; color: var(--ink-text); }
.mnav nav a:hover { background: var(--mist); color: var(--ink); }
.mnav nav a[aria-current] { border-left-color: var(--gold); background: var(--mist); color: var(--ink); }

/* ── the home hero: the one bold moment ─────────────────────────────────────────────────────────────────
   Trevor, 2026-11-02: the tagline ACROSS the page, "renewing spaces" on top and "rebuilding value" below it; the
   picture "more semi immersive or 3D"; on phones the title and the picture first, fewer words before them. So: the
   tagline over the full width, the two buttons beside the line under it, then the stage across the page: a room under
   two gables at the logo's own pitch (rise 3 in 4) with the logo's gold roofs floating over it. The room opens as the
   unit the day the old tenant left and a gold line sweeps across it, leaving the finished unit behind (the one
   orchestrated moment, once, on load). Under a mouse the stage leans toward the pointer in depth (js/hero.js), the
   roofs a layer in front; as the page scrolls on, the camera walks a step into the room. Reduced motion: the finished
   room, still. Narrow screens: title, picture, buttons, then the words (the DOM keeps the answer right under the h1,
   for the gate and for crawlers; only the grid moves it). */
.hero__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  grid-template-areas: "head head" "stage stage" "say chips";
  gap: 0 56px; padding: clamp(28px, 1rem + 2.6vw, 60px) 0 clamp(28px, 1rem + 2vw, 48px);
}
.hero__head { grid-area: head; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero__say { grid-area: say; min-width: 0; margin-top: clamp(24px, 1rem + 1.5vw, 40px); }
.hero__say .answer { max-width: 62ch; margin: 0; }
.hero__act { grid-area: head; align-self: end; justify-self: end; width: min(100%, 440px); }
.hero__act .actions { margin: 0; }
.hero__act .btn { flex: 1 1 auto; }
/* wide screens: the tagline on the left, the line under it and the two buttons stacked in the space to its right */
.hero__title { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: end; column-gap: 56px; font-size: 1rem; line-height: 1; }
.hero__tag { display: block; font-size: clamp(3.2rem, 1.6rem + 6.4vw, 8.6rem); line-height: 0.86; letter-spacing: 0.005em; }
.hero__tag > span { display: block; white-space: nowrap; }
.hero__sub {
  display: block; justify-self: end; width: min(100%, 440px); margin: 0 0 76px; color: var(--ink-text);
  font: 600 clamp(1.1rem, 1.02rem + 0.4vw, 1.4rem)/1.3 var(--text); letter-spacing: -0.005em; text-transform: none;
}
.chips { list-style: none; margin: 4px 0 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; border-top: 1px solid var(--rule); }
.chips li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-text); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.chips li::before { content: ""; flex: none; width: 15px; height: 15px; background: var(--accent); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.hero__chips { grid-area: chips; align-self: start; flex-direction: column; flex-wrap: nowrap; gap: 12px; margin: clamp(24px, 1rem + 1.5vw, 40px) 0 0; padding: 2px 0 2px 28px; border-top: 0; border-left: 1px solid var(--rule); }

.stage { --ar: 2; --rise: calc(18.75% * var(--ar)); grid-area: stage; position: relative; margin: clamp(30px, 4.6%, 60px) 0 0; min-width: 0; }
.stage__tilt { position: relative; transform: perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }
.stage__frame { filter: drop-shadow(0 0 0.6px rgb(43 46 51 / 0.4)) drop-shadow(0 26px 40px rgb(43 46 51 / 0.16)); }
.stage__room {
  position: relative; display: block; aspect-ratio: var(--ar); overflow: hidden; background: var(--mist);
  clip-path: polygon(0 var(--rise), 25% 0, 50% var(--rise), 75% 0, 100% var(--rise), 100% 100%, 0 100%);
}
.stage__pan { position: absolute; inset: 0; transform-origin: 50% 58%; }
.stage__pan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
.stage__seam { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.stage__seam::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: var(--gold-hi);
  box-shadow: 0 0 18px 4px rgb(255 255 255 / 0.7), 0 0 2px rgb(43 46 51 / 0.3);
}
.stage__sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--glow, 0); transition: opacity 500ms cubic-bezier(0.2, 0, 0, 1);
  background: radial-gradient(42% 70% at var(--mx, 50%) var(--my, 30%), rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 70%);
}
/* the roofs: 1600 user units to the room's width, each peak 24 units above the room's own, a layer in front of it
   (translateZ, with the scale that cancels the perspective's enlargement so the ends stay over the eaves at rest) */
.stage__roofs {
  position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1600 / 312; overflow: visible; pointer-events: none;
  transform: translate3d(0, -11.54%, 18px) scale(0.98875);
  fill: none; stroke: var(--gold); stroke-width: 20; stroke-linejoin: miter; stroke-linecap: butt;
}
.stage__tag {
  position: absolute; right: 12px; bottom: 12px; padding: 5px 9px 4px; border-radius: var(--radius);
  background: rgb(255 255 255 / 0.9); color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; line-height: 1.2;
}
@media (prefers-reduced-motion: reduce) {
  .stage__before, .stage__seam { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .stage__roofs path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rr-draw 1100ms cubic-bezier(0.05, 0.7, 0.1, 1) 200ms forwards; }
  .stage__roofs path + path { animation-delay: 350ms; }
  .stage__after { animation: rr-renew 1800ms cubic-bezier(0.65, 0, 0.35, 1) 1000ms both; }
  .stage__seam { animation: rr-seam 1800ms cubic-bezier(0.65, 0, 0.35, 1) 1000ms both; }
  @supports (animation-timeline: view()) {
    .stage__pan { animation: rr-walk linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@keyframes rr-draw { to { stroke-dashoffset: 0; } }
@keyframes rr-renew { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rr-seam { 0% { opacity: 1; transform: translateX(-100%); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } }
@keyframes rr-walk { to { transform: scale(1.09) translateY(1.5%); } }
/* narrower: one column, the picture straight after the title, then the buttons, the marks and the words */
@media (max-width: 1100px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "act" "chips" "say"; }
  .hero__title { display: block; }
  .hero__sub { justify-self: start; width: auto; max-width: 40ch; margin: 18px 0 0; }
  .hero__act { grid-area: act; justify-self: start; align-self: start; width: auto; margin-top: 30px; }
  .hero__act .btn { flex: 0 1 auto; }
  .hero__chips { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; padding: 0; border-left: 0; }
  .hero__say { margin-top: 22px; }
  .stage { --ar: 1.7778; }
}
@media (max-width: 640px) {
  .stage { --ar: 1.3333; margin-top: 26px; }
  .hero__sub { max-width: none; margin-top: 14px; }
  .hero__act { margin-top: 26px; }
  .hero__act { justify-self: stretch; }
  .hero__act .btn { flex: 1 1 100%; }
  .stage__tag { right: 8px; bottom: 8px; padding: 4px 7px 3px; font-size: 0.75rem; }
  .hero__head { gap: 14px; }
}
/* the at-a-glance table as a spec strip under the hero: still a real table, laid out in four columns */
.tblock { display: block; width: 100%; margin: 0; padding: 20px 26px 22px; border: 0; border-left: 3px solid var(--gold); border-radius: var(--radius); background: var(--mist); font-size: 0.9375rem; }
.tblock caption { display: block; padding: 0 0 14px; color: var(--ink-2); }
.tblock tbody { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 16px 32px; }
.tblock tr { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* the second row is the work and the fourth the towns: the two long ones get two columns */
.tblock tr:nth-child(2), .tblock tr:nth-child(4) { grid-column: span 2; }
.tblock th, .tblock td { display: block; width: auto; padding: 0; border: 0; }
.tblock th { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.tblock td { font-weight: 600; line-height: 1.45; color: var(--ink-text); }
.tblock a { color: var(--ink-text); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ── sections: white, airy, one soft slate band for the scope sheet ─────────────────────────────────── */
.sect { padding: clamp(40px, 1.5rem + 3.2vw, 80px) 0; border-top: 0; }
.sect--mist { background: var(--mist); }
.sect__head { max-width: 780px; gap: 14px; margin-bottom: clamp(28px, 1.25rem + 1.6vw, 48px); }
.sect__head p { color: var(--body); max-width: 62ch; }

/* the home page's service tiles, in two groups (rental and commercial: four; homes: six) */
.group + .group { margin-top: clamp(48px, 2rem + 3vw, 80px); }
.group__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t a" "p a"; gap: 6px 24px; align-items: end; margin-bottom: 24px; }
.group__head h3 { grid-area: t; font-size: clamp(1.3rem, 1.18rem + 0.5vw, 1.6rem); line-height: 1.2; }
.group__head p { grid-area: p; max-width: 70ch; color: var(--body); }
.group__all, .after a, .related a, .parts a, .towns a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 1px 18px 0; border: 1.5px solid var(--rule-2); border-radius: var(--radius);
  font-size: 1.15rem; line-height: 1; color: var(--ink-text); text-decoration: none; background: var(--paper);
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.group__all:hover, .after a:hover, .related a:hover, .parts a:hover, .towns a:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.group__all { grid-area: a; white-space: nowrap; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 0.5rem + 1.2vw, 28px); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: var(--ink-text);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card);
  transition: border-color var(--fast) var(--ease), box-shadow 240ms var(--ease);
}
.tile a:hover { border-color: var(--rule-2); color: var(--ink-text); box-shadow: var(--lift); }
.tile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--mist); transition: transform 600ms var(--ease); }
.tile a:hover img { transform: scale(1.04); }
.tile__t { padding: 18px 22px 0; font-size: 1.65rem; line-height: 1; color: var(--ink-text); }
.tile a:hover .tile__t { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tile__d { padding: 8px 22px 24px; font-size: 0.975rem; line-height: 1.55; color: var(--body); }

/* what you can count on: six cards, each under the logo's two roofs */
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 0.5rem + 1vw, 24px); }
.facts > li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 28px 26px 30px; }
.facts > li::before { content: ""; display: block; width: 46px; height: 13px; margin-bottom: 22px; background: var(--gold); -webkit-mask: var(--roofs) center / contain no-repeat; mask: var(--roofs) center / contain no-repeat; }
.facts b { display: block; margin-bottom: 10px; font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2.25rem); line-height: 1; color: var(--ink-text); }
.facts span { display: block; color: var(--body); line-height: 1.55; }
/* the ways to pay: labels, not links, so a soft fill and no outline */
.paylist { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.paylist li { padding: 7px 12px 6px; border-radius: var(--radius); background: var(--sand); color: var(--ink-text); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.prose .paylist { padding-left: 0; }
.prose .paylist li + li { margin-top: 0; }

/* the scope sheet: one real quote's lines, set like the document (no prices) */
.scope { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 1rem + 4vw, 80px); align-items: start; }
.scope__head { position: sticky; top: calc(var(--top-h) + 32px); display: flex; flex-direction: column; gap: 16px; }
.scope__head p { color: var(--body); max-width: 52ch; }
.scope__head a { font-weight: 700; padding-block: var(--tap-pad); }
.sheet { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); box-shadow: 0 1px 2px rgb(43 46 51 / 0.04), 0 24px 48px -32px rgb(43 46 51 / 0.25); }
.sheet caption { caption-side: top; text-align: left; padding: 0 0 12px; font-weight: 700; color: var(--ink-2); }
.sheet thead th { padding: 18px 26px 14px; border-bottom: 1px solid var(--rule); text-align: left; font-size: 0.875rem; font-weight: 700; color: var(--ink-2); }
.sheet tbody th, .sheet td { padding: 16px 26px; text-align: left; vertical-align: baseline; }
.sheet tbody tr + tr > * { border-top: 1px solid var(--rule); }
.sheet tbody th { width: 9em; font: 400 1.35rem/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-text); }
.sheet td { color: var(--body); line-height: 1.55; }

/* the towns: labels on a soft fill */
.townlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.townlist li { padding: 9px 14px 8px; border-radius: var(--radius); background: var(--mist); color: var(--ink-text); font-weight: 600; line-height: 1.3; }
.prose .townlist { padding-left: 0; }
.prose .townlist li + li { margin-top: 0; }
.addr { margin-top: 22px; color: var(--body); }
.addr a { font-weight: 700; }

/* the common questions, a row each */
.qlinks { gap: 0 48px; border-top: 1px solid var(--rule); }
.qlinks li { border-bottom: 1px solid var(--rule); }
.qlinks a { min-height: 64px; padding: 14px 4px; font-weight: 600; color: var(--ink-text); }
.qlinks a:hover { color: var(--ink); }
.qlinks .ico, .card__go .ico { transition: transform var(--fast) var(--ease); }
.qlinks a:hover .ico, .card a:hover .card__go .ico { transform: translateX(4px); }
.after { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* the three service agreements: three white cards under a gold rule, options side by side (not a sequence) */
.deals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 0.5rem + 1vw, 24px); }
.deals > li { padding: 24px 24px 26px; background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: var(--radius-card); }
.deals b { display: block; margin-bottom: 10px; font: 400 clamp(1.6rem, 1.4rem + 0.7vw, 2rem)/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink-text); }
.deals span { display: block; color: var(--body); line-height: 1.55; }

/* ── inner pages ─────────────────────────────────────────────────────────────────────────────────────── */
.phero { border-bottom: 0; }
.phero__in { gap: 32px clamp(40px, 5vw, 72px); padding: 18px 0 clamp(36px, 1.25rem + 3vw, 72px); }
.phero--fig .phero__in { align-items: center; }
.phero__fig { flex: 0 1 500px; min-width: 0; max-width: 720px; margin: 0; }
.phero__fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-card); }
.crumbs { padding-top: 22px; }
.crumbs a { text-decoration-color: rgb(98 104 111 / 0.4); }
.crumbs a:hover { color: var(--ink-text); }
.crumbs li + li::before { color: var(--rule-2); }
.body { padding: clamp(24px, 1rem + 2vw, 48px) 0 clamp(56px, 2rem + 4vw, 104px); }
.body__in { gap: 48px clamp(40px, 5vw, 80px); }
.prose h2 { margin-top: 56px; }
.prose a { text-decoration-color: rgb(59 63 69 / 0.4); }
.prose a:hover { color: var(--ink); text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.prose li::marker { color: var(--gold); }
.aside .panel { gap: 14px; padding: 26px; border: 1px solid var(--rule); border-top: 3px solid var(--gold); border-radius: var(--radius-card); background: var(--card); box-shadow: 0 1px 2px rgb(43 46 51 / 0.04), 0 22px 44px -30px rgb(43 46 51 / 0.30); }
.aside .panel h2 { font-size: 1.2rem; }
/* rounded by its own corner cells, not by overflow: a clip would cut the caption's first letter at the corner */
.data { border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-card); }
.data caption { padding: 0 0 12px; }
.data th, .data td { border: 0; padding: 13px 16px; font-size: 0.9375rem; line-height: 1.5; vertical-align: top; overflow-wrap: anywhere; }
.data thead th { background: var(--mist); color: var(--ink-text); font-size: 0.875rem; border-bottom: 1px solid var(--rule); }
.data thead th:first-child { border-top-left-radius: 3px; }
.data thead th:last-child { border-top-right-radius: 3px; }
.data tbody tr + tr > * { border-top: 1px solid var(--rule); }
.data td { color: var(--body); }
.card a { padding: 24px 24px 22px; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--card); transition: border-color var(--fast) var(--ease), box-shadow 240ms var(--ease); }
.card a:hover { background: var(--card); border-color: var(--rule-2); box-shadow: var(--lift); }
.card__t { font-size: 1.6rem; line-height: 1; color: var(--ink-text); }
.related { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); }
.related h2 { margin-bottom: 14px; font-size: 1rem; color: var(--ink-2); }
.related a, .parts a, .towns a { font-weight: 600; }
.warn { border: 1px solid #E5D3AE; border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--warn-bg); }
.tip { border: 1px dashed var(--rule-2); border-radius: var(--radius); background: var(--mist); }
.note { border-left: 3px solid var(--gold); }

/* ── the call band: a deep slate card at the foot of every page, under the logo's roofs ──────────────── */
.band { background: transparent; color: inherit; border-top: 0; padding: 0 0 clamp(56px, 2rem + 4vw, 104px); }
.band__in { gap: 28px 48px; padding: clamp(32px, 1.25rem + 3.2vw, 72px); border-radius: var(--radius-card); background: var(--ink); color: var(--on-ink); }
.band__in > div:first-child::before { content: ""; display: block; width: 46px; height: 13px; margin-bottom: 8px; background: var(--gold); -webkit-mask: var(--roofs) center / contain no-repeat; mask: var(--roofs) center / contain no-repeat; }
/* the engine stacks the band's buttons in a column; here they sit side by side, to the right */
.band .actions { flex: 0 1 auto; flex-direction: row; justify-content: flex-start; }
.band p { color: var(--on-ink-2); }

/* ── the footer: soft slate, the roofs over the name ─────────────────────────────────────────────────── */
.foot { padding: clamp(48px, 2rem + 3vw, 80px) 0 32px; background: var(--mist); color: var(--body); border-top: 1px solid var(--rule); }
.foot a { color: var(--ink-text); text-decoration-color: rgb(59 63 69 / 0.35); }
.foot a:hover { color: var(--ink); text-decoration-color: var(--gold); }
.foot :focus-visible { outline-color: var(--accent); }
.foot__name { font-size: 2rem; line-height: 1; color: var(--ink-text); }
.foot__name::before { content: ""; display: block; width: 46px; height: 13px; margin-bottom: 14px; background: var(--gold); -webkit-mask: var(--roofs) center / contain no-repeat; mask: var(--roofs) center / contain no-repeat; }
.foot__h, .foot__h a { color: var(--ink-text); }
.foot__base { align-items: baseline; border-top: 1px solid var(--rule); color: var(--ink-2); }

/* ── the phone dock: white under a blur, the request as the one dark block (the call is gold, in the header) ── */
.dock { background: rgb(255 255 255 / 0.9); border-top: 1px solid var(--rule); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); }
.dock .btn--line { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.dock .btn--line:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--on-ink); }
.dock .btn { min-height: 46px; }

/* ── narrower screens (never .nav or .mnav here) ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .phero__fig { flex-basis: 100%; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deals { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tblock tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scope { grid-template-columns: minmax(0, 1fr); }
  .scope__head { position: static; }
}
@media (max-width: 860px) {
  .brand img { width: 196px; }
}
@media (max-width: 760px) {
  /* the engine drops the number here and shows the word: this site shows the phone alone, in a square like the menu */
  .hbtn--call, .hbtn--call:hover { width: 44px; padding: 0; justify-content: center; border: 1px solid var(--rule-2); border-radius: var(--radius); }
  .hbtn--call:hover { background: var(--mist); }
  .hbtn .ico { display: block; width: 18px; height: 18px; }
  .hbtn__k { display: none; }
}
@media (max-width: 640px) {
  .group__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "p" "a"; }
  .group__all { justify-self: start; margin-top: 10px; }
  .tblock { padding: 18px 18px 20px; }
  .tblock tbody { gap: 14px 20px; }
  .sheet thead th { padding: 14px 16px 12px; }
  .sheet tbody th, .sheet td { padding: 13px 16px; }
  .sheet tbody th { width: 6.4em; font-size: 1.15rem; }
  /* tables stack into cards (the engine), each card rounded on its own */
  .data { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .data tr { overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--card); }
  .data tbody tr + tr > * { border-top: 0; }
  .data tbody th { background: var(--mist); }
}
@media (max-width: 560px) {
  .tiles, .tiles--4, .facts { grid-template-columns: minmax(0, 1fr); }
  /* on a phone a service is a row: its photo as a square beside the words, so all ten fit in a few thumb scrolls
     instead of ten screens. */
  .tile a { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; padding: 12px; }
  .tile img { grid-row: 1 / 3; width: 96px; height: 96px; aspect-ratio: 1; border-radius: var(--radius); }
  .tile__t { align-self: end; padding: 4px 4px 0 0; font-size: 1.4rem; }
  .tile__d { padding: 4px 4px 2px 0; font-size: 0.9375rem; line-height: 1.45; }
  .facts > li { padding: 24px 22px 26px; }
}
/* the logo takes what the Call button and the menu button leave (about 176px less than the screen) */
@media (max-width: 480px) {
  .brand img { width: 180px; }
}
@media (max-width: 400px) {
  .brand img { width: 158px; }
}
@media (max-width: 340px) {
  .brand img { width: 136px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav a, .nav a::after, .mnav summary, .tile a, .tile img, .group__all, .after a, .related a, .parts a, .towns a, .qlinks .ico, .card__go .ico { transition: none; }
  .tile a:hover img, .qlinks a:hover .ico, .card a:hover .card__go .ico, .btn:active { transform: none; }
}