/* CLIENT FILE. Archivo, variable weight 100 to 900, Latin: the same file JDT's app serves
   (custom-app contractor/public/fonts/archivo-latin-var.8f704806.woff2). The fallback face is sized to Archivo's
   metrics so the swap does not move the page (highend-web-design canon s13). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/archivo-latin-var.8f704806.woff2) format("woff2"); }
/* Archivo SemiCondensed, the buttons' cut (client.css: font-stretch 87.5%), from Google Fonts (Archivo, SIL Open Font
   Licence), latin, weights 600 to 700. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600 700; font-stretch: 87.5%; font-display: swap; src: url(/fonts/archivo-semicondensed-latin.7d12cb39.woff2) format("woff2"); }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 102%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%; }

/* CLIENT FILE. JDT Construction's brand: every colour, the type family, the corner radius. styles.css (the engine) uses
   only these tokens; client.css adds JDT's own pieces with the JDT tokens at the bottom.

   The plan (2026-10-30, Trevor: "the colouring of the client portal, sleek and professional"): the site wears the
   materials of JDT's own client portal (custom-app contractor/src/styles/portal.css), so the website and the app the
   client signs in to read as one company. The portal's roles, carried over:
     room    #0F131A with a cool lamp glow: every dark surface (header, page tops, the stage, the work, the footer)
     pencil  #A9C0DC: the drawing and its title block only
     brand   the logo's yellow #FBB81C: the logo, the one primary button, focus rings, a lit edge. Never a large fill
     steel   brushed and polished: the frame round the main actions, as the portal's frame holds its doors
     glass   the second buttons and the panels over the drawing
     sheet   the reading ground is the portal's paper, a cool white, with the yellow top edge on the one panel
   Square corners everywhere, as in the portal. Depth is a lit top edge and a dark bottom edge, not a soft shadow.
   Blend (colour-blend skill, measured): on the sheet, headings 8.4, body 6.9, quiet 5.4, accent 5.5; on the room,
   titles 12.3 (they also sit over photos), body 8.7, quiet 6.7; labels on yellow 10.6 (the room colour). */
:root {
  --paper: #F5F7F9;    /* the reading ground: the portal's sheet, cool, never cream */
  --panel: #EAEEF2;    /* quiet panels: card hover, the tip box, table row heads */
  --hero-bg: #0F131A;  /* every page top and the home stage: the portal's room */
  --ink: #0F131A;      /* borders and the dark surfaces (header, page tops, band, footer) */
  --ink-text: #3E4A5B; /* headings, links and strong text on the sheet: slate, softer than the room */
  --ink-hover: #000000;/* hover on ink buttons only */
  --ink-2: #5A6678;    /* secondary text on the sheet: captions, breadcrumbs, bylines */
  --body: #4A5668;     /* long-form text on the sheet */
  --rule: #D5DCE4;     /* hairlines on the sheet */
  --accent: #8A5A00;   /* the brand on the SHEET: links on hover, the eyebrow, card arrows, the focus ring on the sheet.
                          Never a fill. The yellow fills are --yellow below. */
  --accent-dk: #6B4500;
  --on-ink: #C9D1DB;   /* titles and labels on the room */
  --on-ink-2: #A6B2C1; /* reading text on the room */
  --warn-bg: #FBF4E2;
  --star: #FBBC04;

  /* Archivo, the type JDT's app already uses (custom-app contractor/public/fonts), so the site and the app read as one. */
  --display: "Archivo", "Archivo Fallback", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --text: "Archivo", "Archivo Fallback", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --display-weight: 800;

  --radius: 0;         /* square, as in the portal: the logo is all straight cuts */
  --wrap: 1240px;
  --gutter: 24px;
  --top-h: 68px;
  --measure: 64ch;

  /* JDT's own (client.css only) */
  --yellow: #FBB81C;   /* the logo's yellow. Fills only: the call button, the logo, focus on the room, a lit edge */
  --yellow-dk: #E9A50B;/* hover on yellow fills */
  --on-yellow: #0F131A;/* text on yellow: the room colour */
  --pencil: #A9C0DC;   /* the drawing's lines and its title block (the portal's pencil) */
  --night-2: #161C26;  /* a raised surface on the room (the band, the reel's frames) */
  --night-line: #283241;/* hairlines on the room */
  --night-dim: #8F9CAE;/* the quietest text on the room that still reads (6.7:1): drawing labels, counters */
  --glass: rgb(16 21 29 / .62);      /* the portal's glass */
  --glass-hi: rgb(26 34 46 / .72);   /* glass under the pointer */
}

/* 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. JDT Construction's own look, loaded after the engine's styles.css. The plan is in the repo README
   ("The design") and theme.css: the materials of JDT's client portal (the dark room, pencil lines, polished steel,
   glass, square corners, the logo's yellow only where it means something), a cool white reading sheet, Archivo
   throughout, and ONE bold moment, the home page's stage, where the property frames itself and gives way to a job.
   Motion: UI feedback 150 ms on the engine's Material standard curve; the stage is scroll driven (js/home.js) and
   holds still under prefers-reduced-motion. Only transform, opacity and clip-path move. */

:root {
  /* the portal's polished finishes (portal.css .pf-btn, .pf-frame and the room's lamp) */
  --enamel: radial-gradient(120% 140% at 60% 0%, rgb(255 255 255 / .42), rgb(255 255 255 / 0) 55%),
            linear-gradient(180deg, rgb(255 255 255 / .28) 0%, rgb(255 255 255 / 0) 46%, rgb(0 0 0 / .12) 100%);
  --steel: linear-gradient(180deg, rgb(255 255 255 / .2), rgb(255 255 255 / 0) 24%, rgb(0 0 0 / 0) 76%, rgb(0 0 0 / .34)),
           repeating-linear-gradient(90deg, rgb(255 255 255 / .035) 0 1px, rgb(0 0 0 / .05) 1px 2px, transparent 2px 4px),
           linear-gradient(90deg, #39424f 0%, #737f8f 62%, #39424f 100%);
  --room: radial-gradient(1100px 760px at 72% 38%, rgb(52 72 102 / .22), transparent 72%), linear-gradient(180deg, #10151d 0%, #0c1016 100%);
  /* Depth (2026-10-30, Trevor: "no depth"): one light from above, every shadow in layers and tinted to the room's
     blue black, never one grey blur. A hairline ring gives the edge, a tight layer the contact, a wide soft layer the
     lift. Rest, then raised under the pointer. On the room the shadows are deeper and the ring is a lit hairline. */
  --lift: 0 0 0 1px rgb(15 19 26 / .06), 0 1px 2px rgb(15 19 26 / .05), 0 4px 10px -2px rgb(15 19 26 / .06), 0 18px 36px -14px rgb(15 19 26 / .16);
  --lift-hi: 0 0 0 1px rgb(15 19 26 / .08), 0 2px 4px rgb(15 19 26 / .06), 0 14px 28px -8px rgb(15 19 26 / .14), 0 36px 64px -22px rgb(15 19 26 / .28);
  --lift-room: 0 0 0 1px rgb(255 255 255 / .07), 0 2px 4px rgb(0 0 0 / .35), 0 18px 40px -12px rgb(0 0 0 / .6), 0 40px 80px -30px rgb(0 0 0 / .7);
  --rise: 260ms;
  --ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);   /* Material emphasized decelerate: things arriving */
  --slow: 420ms;
  --sect-y: clamp(56px, 2.4rem + 4vw, 120px);     /* section padding: about 60% of desktop on a phone */
}
html { background: var(--ink); }
body { font-feature-settings: "ss01" 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection { background: var(--yellow); color: var(--on-yellow); }
h1, h2, h3 { letter-spacing: -0.025em; }
h3 { font-weight: 700; letter-spacing: -0.01em; }

/* ── buttons: the portal's finish, at a refined size ────────────────────
   Labels are set in Archivo SemiCondensed (a second cut of the same family, fonts.css) at 15px, so they read as set
   type rather than chrome. 44px tall (48 for the large one): the touch target the canon asks for, and no bigger.
   The primary is the portal's one button: the logo's yellow painted like enamel (a highlight across the top, a
   darker foot), a crisp dark rim, square, a small tinted shadow under it. Second buttons are glass on the room and
   a white button on the sheet. Hover brightens and, on glass, lights the top edge yellow (the portal's door);
   press settles 1px. 160ms on the engine's standard curve. */
.btn, .hbtn, .stage__flip, .related a, .mnav summary { font-stretch: 87.5%; font-weight: 600; letter-spacing: 0.015em; }
.btn { min-height: 44px; padding: 0 18px; gap: 8px; font-size: 0.9375rem; line-height: 1; border-width: 1px;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease), filter 160ms var(--ease), transform 160ms var(--ease); }
.btn--lg { min-height: 48px; padding: 0 22px; font-size: 0.9375rem; }
.btn .ico { width: 16px; height: 16px; flex: none; }
.btn:active, .hbtn:active { transform: translateY(1px); }
.btn--accent, .btn--accent:hover { background-color: var(--yellow); background-image: var(--enamel); color: var(--on-yellow); }
.btn--accent { border: 1px solid rgb(0 0 0 / .85);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -1px 0 rgb(0 0 0 / .3), 0 1px 2px rgb(15 19 26 / .2), 0 6px 14px -6px rgb(15 19 26 / .45); }
.btn--accent:hover { filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -1px 0 rgb(0 0 0 / .3), 0 2px 4px rgb(15 19 26 / .22), 0 10px 22px -8px rgb(15 19 26 / .55); }
.btn--accent:active { filter: brightness(.94); box-shadow: inset 0 1px 2px rgb(0 0 0 / .25); }
.hbtn { transition: background-color 160ms var(--ease), border-color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease); }
/* on the sheet: a white button with a steel grey rim and a small lift, darker rim and label on hover */
.btn--line { border-color: #C5CED8; background: #FFFFFF; color: var(--ink-text); box-shadow: 0 1px 2px rgb(15 19 26 / .06); }
.btn--line:hover { border-color: var(--ink-text); background: #FFFFFF; color: var(--ink); box-shadow: 0 2px 6px -1px rgb(15 19 26 / .14); }
/* on the room: glass with a faint rim; under the pointer the glass lifts and its top edge lights yellow */
.hero--stage .btn--line, .phero--dark .btn--line, .band .btn--line, .dock .btn--line, .btn--light {
  border-color: rgb(255 255 255 / .18); color: var(--on-ink); background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 -1px 0 rgb(0 0 0 / .55), 0 6px 14px -6px rgb(0 0 0 / .5); }
.hero--stage .btn--line:hover, .phero--dark .btn--line:hover, .band .btn--line:hover, .dock .btn--line:hover, .btn--light:hover {
  border-color: rgb(255 255 255 / .36); background: var(--glass-hi); color: #EEF2F6;
  box-shadow: inset 0 2px 0 var(--yellow), inset 0 -1px 0 rgb(0 0 0 / .55), 0 10px 22px -8px rgb(0 0 0 / .6); }
/* a phone: tinted glass, not frosted (the portal's rule: a blur re-runs on every frame behind it) */
@media (pointer: coarse), (max-width: 899px) {
  .hero--stage .btn--line, .phero--dark .btn--line, .band .btn--line, .dock .btn--line, .btn--light { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(16 21 29 / .8); }
}
.actions { gap: 10px; }
.band__in > .actions { flex: 0 0 auto; }   /* the engine grows every box in the band; the buttons keep their own size */
@media (max-width: 640px) { .band__in > .actions { flex-basis: 100%; } }
.related a { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; font-size: 0.9375rem;
  border: 1px solid #C5CED8; color: var(--ink-text); background: #FFFFFF; box-shadow: 0 1px 2px rgb(15 19 26 / .06); transition: border-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease); }
.related a:hover { border-color: var(--ink-text); color: var(--ink); background: #FFFFFF; box-shadow: inset 0 2px 0 var(--yellow), 0 2px 6px -1px rgb(15 19 26 / .14); }
.related h2 { font-size: 1.25rem; }

/* Every surface in the room: light text, and a focus ring that shows on it (yellow, 10.6:1). */
.top, .hero--stage, .phero--dark, .sect--work, .sect--portal, .band, .foot, .dock, .lightbox, .preview { --focus: var(--yellow); }
.top :focus-visible, .hero--stage :focus-visible, .phero--dark :focus-visible, .sect--work :focus-visible, .sect--portal :focus-visible, .band :focus-visible, .foot :focus-visible, .dock :focus-visible, .lightbox :focus-visible { outline-color: var(--yellow); }
.btn--accent:focus-visible, .hbtn--call:focus-visible { outline-color: var(--on-ink); outline-offset: 3px; }
.btn--accent:focus-visible:not(.top *, .hero--stage *, .phero--dark *, .sect--portal *, .band *, .foot *, .dock *) { outline-color: var(--ink); }

.preview { background: var(--yellow); color: var(--on-yellow); font-weight: 600; }

/* ── header: slim, the room, the logo in its own yellow lit like the portal's (a lit top edge, a dark foot) ──
   The phone is a quiet glass button with the yellow handset and the number on one line: the yellow fill is kept for
   the page's own call to action, so the header never shouts over it. */
.top { background: var(--ink); border-bottom: 1px solid rgb(255 255 255 / .07); box-shadow: 0 10px 30px -18px rgb(0 0 0 / .8); }
.brand img { width: 164px; height: auto; filter: drop-shadow(0 -1px 0 rgb(255 236 190 / .28)) drop-shadow(0 1.5px 0 rgb(0 0 0 / .7)); }
.nav { gap: 30px; }
.nav a { color: var(--on-ink-2); font-size: 0.9375rem; font-weight: 550; letter-spacing: 0.01em; padding: 10px 0; border-bottom-width: 2px; transition: color 160ms var(--ease), border-color 160ms var(--ease); }
.nav a:hover { color: #EEF2F6; border-bottom-color: var(--night-dim); }
.nav a[aria-current] { color: var(--on-ink); border-bottom-color: var(--yellow); }
.hbtn--call, .hbtn--call:hover { background: var(--glass); color: var(--on-ink); }
.hbtn--call { min-height: 40px; padding: 0 14px 0 12px; gap: 8px; border: 1px solid rgb(255 255 255 / .16);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), inset 0 -1px 0 rgb(0 0 0 / .5); }
.hbtn--call:hover { background: var(--glass-hi); color: #EEF2F6; border-color: rgb(255 255 255 / .32); box-shadow: inset 0 2px 0 var(--yellow), inset 0 -1px 0 rgb(0 0 0 / .5); }
.hbtn--call .ico { width: 16px; height: 16px; color: var(--yellow); }
.hbtn--call .hbtn__k { display: none; }
.hbtn--call .hbtn__n { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; }
@media (max-width: 760px) {
  .hbtn--call { min-height: 40px; }
  .hbtn--call .hbtn__k { display: block; font-size: 0.9375rem; font-weight: 600; }
}
.hbtn--text { background: var(--glass); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); }
.mnav summary { width: 40px; height: 40px; border: 1px solid rgb(255 255 255 / .18); color: var(--on-ink); background: var(--glass); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); }
.mnav[open] summary { background: var(--on-ink); color: var(--ink); }
.mnav nav { background: #121820; border-color: rgb(255 255 255 / .1); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 16px 40px rgb(0 0 0 / .5); }
.mnav nav a { color: var(--on-ink); }
.mnav nav a:hover, .mnav nav a[aria-current] { background: var(--night-2); color: var(--on-ink); }
@media (max-width: 860px) { .brand img { width: 140px; } .dock { padding-block: 8px calc(8px + env(safe-area-inset-bottom)); } .dock .btn { min-height: 44px; } }

/* ── the home stage ────────────────────────────────────────────────────── */
/* Without JavaScript (or with reduced motion) it is one tall first screen: the drawing finished, the copy over it.
   With js/home.js the camera turns while the drawing builds, and the scroll brings it round and raises the photo
   through it (--reveal and --done are set by the script; --done, the lines going and the motto coming in, is for
   wide screens only). */
.hero--stage { position: relative; background: var(--room) var(--ink); color: var(--on-ink); }
.hero__pin { position: relative; min-height: calc(100svh - var(--top-h)); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; }
/* js/home.js: the pin sticks under the header while the person scrolls through .hero__run (--run screens) */
.is-scrub .hero__pin { position: sticky; top: var(--top-h); height: calc(100svh - var(--top-h)); min-height: 0; }
.hero__run { height: calc(var(--run, 1.2) * (100svh - var(--top-h))); }
.hero__in { position: relative; z-index: 3; padding: 0 0 clamp(36px, 1rem + 4vw, 88px); }
.hero__copy { max-width: 620px; gap: 22px; }
.hero--stage .hero__title { color: var(--on-ink); font-size: clamp(2.5rem, 1.55rem + 3.9vw, 5.1rem); line-height: 0.98; letter-spacing: -0.035em; max-width: 12.5ch; }
.hero--stage .answer { color: var(--on-ink-2); font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); max-width: 54ch; }
/* the copy keeps a dark pool behind it wherever the drawing or the photo runs under it */
.hero__pin::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgb(14 18 24 / .92) 0%, rgb(14 18 24 / .78) 34%, rgb(14 18 24 / 0) 62%),
              linear-gradient(0deg, rgb(12 16 22 / .9) 0%, rgb(12 16 22 / 0) 38%); }

.stage { position: absolute; inset: 0; z-index: 1; }
.stage__still, .stage__svg { position: absolute; top: 4%; bottom: 6%; left: 30%; right: -2%; width: 72%; height: 90%; object-fit: contain; }
.stage__svg { z-index: 1; overflow: visible; transform: translateZ(0); }
.stage.is-live .stage__still { visibility: hidden; }
.stage__svg path { fill: none; stroke: var(--pencil); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.stage__svg .k-grid { stroke-width: 0.6; opacity: .16; }
.stage__svg .k-hidden { stroke-width: 1; opacity: .5; stroke-dasharray: 6 5; }
.stage__svg .k-edge { stroke-width: 1.5; }
.stage__svg .k-stud { stroke-width: 0.95; opacity: .62; }
.stage__svg .k-truss { stroke-width: 0.85; opacity: .56; }
.stage__svg .k-door { stroke-width: 1.25; opacity: .9; }
.stage__svg .k-dim { stroke-width: 0.8; opacity: .55; stroke: var(--night-dim); }
.stage__svg .k-land { stroke-width: 0.9; opacity: .6; stroke: var(--night-dim); }
.stage__svg text { fill: var(--night-dim); font: 500 13px/1 var(--text); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* the lines give way to the picture as it rises, and are gone once the house stands */
.stage__svg .g-lines { opacity: calc((1 - var(--reveal, 0) * .8) * (1 - var(--done, 0))); }

/* The same property built (jdt/built.mjs): a rendering from the drawing's own camera, laid exactly where the drawing
   sits (--bx/--by/--bw/--bh, the SVG's view box on screen, from js/home.js) so every line lands on its edge. It
   rises from the ground line up like a print coming out of the plotter, the pencil edge riding on top, and its own
   edges feather into the room. Never moved or scaled: that would break the registration. */
.stage__photo { position: absolute; z-index: 0; left: var(--bx, 0); top: var(--by, 0); width: var(--bw, 100%); height: var(--bh, 100%);
  clip-path: inset(calc((1 - var(--reveal, 0)) * 100%) 0 0 0); }
.stage__photo picture, .stage__photo img { display: block; width: 100%; height: 100%; }
.stage__photo picture {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 93%, transparent), linear-gradient(0deg, transparent, #000 10%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 93%, transparent), linear-gradient(0deg, transparent, #000 10%, #000 92%, transparent);
  mask-composite: intersect; }
.stage__roll { position: absolute; z-index: 1; left: var(--bx, 0); top: var(--by, 0); width: var(--bw, 100%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--pencil) 14%, var(--pencil) 86%, transparent);
  box-shadow: 0 0 14px 1px rgb(169 192 220 / .45);
  transform: translateY(calc((1 - var(--reveal, 0)) * var(--bh, 0px))); opacity: clamp(0, calc(min(var(--reveal, 0), 1 - var(--reveal, 0)) * 6), 1); }
.stage .stage__tag { top: auto; bottom: 18px; left: auto; right: 18px; z-index: 3; opacity: var(--reveal, 0); }
.stage:not(.is-live) .stage__photo, .stage:not(.is-live) .stage__roll, .stage:not(.is-live) .stage__tag { display: none; }

.stage__phase { position: absolute; z-index: 3; right: var(--gutter); top: 18px; display: flex; gap: 0; align-items: stretch;
  font-size: 0.8125rem; letter-spacing: .03em; font-variant-numeric: tabular-nums; opacity: calc(1 - var(--reveal, 0));
  border: 1px solid rgb(169 192 220 / .3); background: rgb(15 19 26 / .55); }
/* the portal's title block: hairline cells in pencil */
.stage__k { padding: 7px 12px; color: var(--night-dim); border-right: 1px solid rgb(169 192 220 / .22); }
.stage__v { padding: 7px 12px; color: var(--on-ink); font-weight: 600; }

.hero__done { position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(36px, 1rem + 4vw, 88px); margin: 0; text-align: right;
  font: 800 clamp(1.6rem, 1rem + 2.4vw, 3.2rem)/1 var(--display); letter-spacing: -0.03em; color: var(--on-ink);
  opacity: var(--done, 0); transform: translateY(calc((1 - var(--done, 0)) * 16px)); pointer-events: none; text-shadow: 0 1px 24px rgb(0 0 0 / .5); }
.hero__done span { display: block; }

/* A phone: the stage is a picture at the top and the words below it; the pin is taller than the screen, so its top
   sticks while the scroll turns the house and raises the photo. The flip button is no longer shown (js/home.js leaves
   it hidden: the scroll does what it did). */
.stage__flip { display: none; }
@media (max-width: 899px) {
  .hero__pin { min-height: 0; display: block; }
  .is-scrub .hero__pin { height: auto; }   /* taller than the screen: its top sticks, the rest waits below */
  .stage { position: relative; inset: auto; aspect-ratio: 4 / 3; overflow: hidden; }
  .hero--stage { background: radial-gradient(600px 420px at 70% 20%, rgb(52 72 102 / .22), transparent 72%) var(--ink); }   /* one flat room under the words: no seam where the stage ends */
  .stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: 2; pointer-events: none; background: linear-gradient(0deg, var(--ink), rgb(15 19 26 / 0)); }
  .stage__still, .stage__svg { left: -8%; right: auto; width: 116%; max-width: none; top: 0; height: 100%; bottom: auto; }
  .hero__pin::before { display: none; }
  .hero__in { padding-top: 4px; }
  .hero__done { display: none; }
  .stage__phase { top: 12px; right: auto; left: var(--gutter); }
  .stage .stage__tag { top: 12px; right: var(--gutter); bottom: auto; left: auto; }
  .stage.is-live .stage__flip:not([hidden]) { display: inline-flex; }
  .stage__flip { position: absolute; z-index: 4; left: var(--gutter); bottom: 14px; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
    border: 1px solid rgb(255 255 255 / .18); background: rgb(16 21 29 / .82); color: var(--on-ink); font: 650 0.9375rem/1 var(--text); cursor: pointer;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 -1px 0 rgb(0 0 0 / .55); }
  .stage__flip::before { content: ""; width: 8px; height: 8px; background: var(--pencil); }
  .stage__flip[aria-pressed="true"] .stage__flip-a, .stage__flip[aria-pressed="false"] .stage__flip-b { display: none; }
  .stage__flip:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
}
/* ── inner page tops: JDT black, the drawing faint behind the title ────── */
.phero--dark { background: var(--room) var(--ink); border-bottom: 0; position: relative; overflow: hidden; }
.phero--dark > .wrap { position: relative; z-index: 1; }
.phero--drawn::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .17;
  background: url(/img/drawing-home.svg) right max(-14vw, -200px) bottom -40px / min(78vw, 1020px) auto no-repeat; }
.phero--dark .eyebrow { color: var(--pencil); }
.phero--dark h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 18ch; }
.phero__in { padding-bottom: clamp(40px, 1.5rem + 3vw, 80px); }
.phero--dark .crumbs li + li::before { color: var(--night-line); }
.note--sample { max-width: 640px; border-left: 2px solid var(--pencil); padding: 4px 0 4px 14px; color: var(--on-ink-2); font-size: 0.9375rem; }

/* ── sections ──────────────────────────────────────────────────────────── */
.sect { padding: var(--sect-y) 0; border-top: 0; }
.sect + .sect:not(.sect--work):not(.sect--portal) { border-top: 1px solid var(--rule); }
.sect__head h2 { font-size: clamp(1.9rem, 1.4rem + 1.9vw, 3rem); line-height: 1.02; }
.sect__head p { font-size: 1.0625rem; max-width: 60ch; }
.sect__row { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; }
.sect__row .sect__head { margin-bottom: 0; }
.after a { font-weight: 700; color: var(--ink-text); text-decoration-thickness: 2px; text-decoration-color: var(--yellow); text-underline-offset: 6px; }
.after a:hover { color: var(--accent); }

/* the three builds: big pictures that are the links */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* each build is a raised card: the picture bleeds to its edges, the words sit inside, and it rises under the pointer */
.tile a { height: 100%; display: flex; flex-direction: column; text-decoration: none; color: var(--ink-text); background: #FFFFFF;
  box-shadow: var(--lift); transition: box-shadow var(--rise) var(--ease-out), transform var(--rise) var(--ease-out); }
.tile a:hover { box-shadow: var(--lift-hi); transform: translateY(-3px); }
.tile__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
@media (min-width: 640px) and (max-width: 899px) { .tile__media { aspect-ratio: 3 / 4; } }
@media (max-width: 639px) { .tile__media { aspect-ratio: 3 / 2; } }
.tile__media picture, .tile__media img { width: 100%; height: 100%; }
.tile__media img { object-fit: cover; transition: transform var(--slow) var(--ease-out); }
.tile__media .tile__draw { object-fit: contain; padding: 12%; opacity: .7; }
.tile a:hover .tile__media img { transform: scale(1.035); }
.tile__cap { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; border-top: 1px solid rgb(15 19 26 / .06); }
.tile__t { font: 800 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1.1 var(--display); letter-spacing: -0.02em; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 6px; transition: text-decoration-color var(--fast) var(--ease); }
.tile a:hover .tile__t { text-decoration-color: var(--yellow); }
.tile__d { color: var(--body); }

/* how a job runs: four steps, each numbered on a small square of the room */
.process { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 32px; grid-template-columns: minmax(0, 1fr); counter-reset: step; }
@media (min-width: 640px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .process { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sect--process { background: var(--panel); }
.process__step { counter-increment: step; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px; background: #FFFFFF;
  box-shadow: inset 0 2px 0 var(--ink-text), var(--lift); }
.process__k { display: flex; align-items: baseline; gap: 12px; font: 800 clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem)/1 var(--display); letter-spacing: -0.035em; color: var(--ink-text); }
.process__k::before { content: counter(step); font: 700 0.9375rem/1 var(--text); letter-spacing: 0; color: var(--pencil); background: var(--ink); min-width: 28px; height: 28px; display: inline-grid; place-items: center; transform: translateY(-6px); }
.process__step h3 { font-size: 1.15rem; }
.process__step p:not(.process__k) { color: var(--body); }

/* the reel of jobs, on black */
.sect--work { background: var(--room) var(--ink); color: var(--on-ink); overflow: hidden; }
.sect--work h2 { color: var(--on-ink); }
.sect--work .sect__head p { color: var(--on-ink-2); }
.reel { position: relative; }
.reel__track { list-style: none; margin: 0; display: flex; gap: clamp(14px, .5rem + 1vw, 24px); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--night-line) transparent;
  padding: 8px max(var(--gutter), calc((100% - var(--wrap)) / 2)) 44px; scroll-padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.reel__item { flex: 0 0 clamp(270px, 80vw, 420px); scroll-snap-align: start; }
@media (min-width: 900px) { .reel__item { flex-basis: clamp(420px, 42vw, 680px); } }
.reel__card { display: flex; flex-direction: column; gap: 14px; color: var(--on-ink); text-decoration: none; }
.reel__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--night-2); box-shadow: var(--lift-room); }
.reel__media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px rgb(255 255 255 / .05); }
@media (min-width: 900px) { .reel__media { aspect-ratio: 3 / 2; } }
.reel__media picture, .reel__media img, .reel__media .vid, .reel__media video { width: 100%; height: 100%; }
.reel__media img, .reel__media video { object-fit: cover; transition: transform var(--slow) var(--ease-out); }
.reel__card:hover .reel__media img, .reel__card:hover .reel__media video { transform: scale(1.03); }
.reel__cap { display: flex; flex-direction: column; gap: 6px; }
.reel__t { font: 800 clamp(1.25rem, 1.05rem + .6vw, 1.6rem)/1.1 var(--display); letter-spacing: -0.02em; }
.reel__card:hover .reel__t { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.reel__m, .chap__m { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--on-ink-2); font-size: 0.9375rem; }
.reel__m span + span::before, .chap__m span + span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--night-dim); transform: translateY(-2px); }
.reel__nav { display: none; }
@media (min-width: 900px) and (hover: hover) {
  .reel__nav { display: flex; gap: 10px; justify-content: flex-end; width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin: 18px auto 0; }
}
.rbtn { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / .18); background: var(--glass); color: var(--on-ink); cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 -1px 0 rgb(0 0 0 / .55); transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.rbtn:hover { background: var(--glass-hi); color: #EEF2F6; border-color: rgb(255 255 255 / .36); box-shadow: inset 0 2px 0 var(--yellow), inset 0 -1px 0 rgb(0 0 0 / .55); }
.rbtn:disabled { opacity: .35; cursor: default; background: var(--glass); color: var(--on-ink); border-color: rgb(255 255 255 / .18); box-shadow: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reel__media img { animation: reel-in linear both; animation-timeline: view(inline); animation-range: entry 0% cover 45%; }
    @keyframes reel-in { from { transform: scale(1.12); } to { transform: scale(1); } }
  }
}

/* a sample stand-in says so, on the picture itself */
.tag { position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: rgb(15 19 26 / .82); color: var(--on-ink); font: 600 0.8125rem/1.2 var(--text);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tag::before { content: ""; width: 7px; height: 7px; background: var(--pencil); flex: none; }

/* a video: plays muted while on screen (js/work.js), with its own pause button (WCAG 2.2.2) */
.vid { position: relative; display: block; }
.vid { background: var(--night-2); }
.vid video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.vid__poster, .vid__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid__btn { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgb(255 255 255 / .18); background: rgb(15 19 26 / .78); color: var(--on-ink); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vid__btn:hover { background: var(--ink); }
.vid__btn .ico { width: 20px; height: 20px; }
.vid__btn[aria-pressed="false"] .vid__on, .vid__btn[aria-pressed="true"] .vid__off { display: none; }
.vid__btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* permits: the answer beside the City's own table */
.split { display: grid; gap: 32px 64px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1040px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.split .sect__head { margin-bottom: 0; }
.src { white-space: normal; }

/* already a client: the door into the app, in the portal's own room with the drawing faint behind */
.sect--portal { position: relative; overflow: hidden; background: var(--room) var(--ink); color: var(--on-ink); }
.sect--portal::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background: url(/img/drawing-home.svg) right max(-10vw, -160px) center / min(70vw, 900px) auto no-repeat; }
.sect--portal > .wrap { position: relative; }
.sect--portal h2 { color: var(--on-ink); }
.portal { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.portal > div { flex: 1 1 420px; display: flex; flex-direction: column; gap: 12px; }
.portal h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); }
.portal p { color: var(--on-ink-2); max-width: 60ch; }

/* ── reading pages ─────────────────────────────────────────────────────── */
.prose h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); }
.prose a { text-decoration-color: var(--accent); text-underline-offset: 4px; }
.steps { list-style: none; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
.prose .steps li + li { margin-top: 0; }
.steps li { counter-increment: s; position: relative; padding: 14px 0 14px 52px; border-bottom: 1px solid var(--rule); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 13px; width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--ink); color: var(--pencil); font: 700 0.9375rem/1 var(--text); font-variant-numeric: tabular-nums; }
/* the one panel is the portal's sheet: white, square, a yellow top edge */
.aside .panel { border: 0; border-top: 3px solid var(--yellow); padding: 24px; background: #FFFFFF; box-shadow: var(--lift-hi); }
.aside .panel .btn + .btn { margin-top: -2px; }
.data thead th { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.data { background: #FFFFFF; box-shadow: var(--lift); }
.data th, .data td { border-color: var(--rule); }
.data tbody th { background: var(--panel); }
.data a { text-decoration-color: var(--accent); display: inline-block; padding-block: 4px; }
.card a { border: 0; background: #FFFFFF; box-shadow: var(--lift); transition: box-shadow var(--rise) var(--ease-out), transform var(--rise) var(--ease-out); }
.card a:hover { background: #FFFFFF; box-shadow: inset 0 2px 0 var(--yellow), var(--lift-hi); transform: translateY(-2px); }
.card__go { color: var(--accent); }

/* a build page's own jobs */
.jobs { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.prose .jobs li + li { margin-top: 0; }
.jobs a { position: relative; display: flex; flex-direction: column; gap: 0; text-decoration: none; color: var(--ink-text); font-weight: 700; background: #FFFFFF;
  box-shadow: var(--lift); transition: box-shadow var(--rise) var(--ease-out), transform var(--rise) var(--ease-out); }
.jobs a:hover { box-shadow: var(--lift-hi); transform: translateY(-2px); }
.jobs__t { padding: 12px 14px 14px; }
.jobs picture { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.jobs img { width: 100%; height: 100%; object-fit: cover; }
.jobs a:hover .jobs__t { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }

/* ── the Work page: one chapter per job ────────────────────────────────── */
.chap { padding-bottom: var(--sect-y); }
.chap + .chap { border-top: 1px solid var(--rule); padding-top: 0; }
.chap__lead { position: relative; height: clamp(320px, 72svh, 860px); background: var(--ink); overflow: hidden; box-shadow: 0 30px 60px -40px rgb(15 19 26 / .6); }
.chap__lead picture, .chap__lead img, .chap__lead .vid, .chap__lead video { width: 100%; height: 100%; }
.chap__lead img, .chap__lead video { object-fit: cover; }
.chap__in { display: grid; gap: 32px 56px; grid-template-columns: minmax(0, 1fr); padding-top: clamp(28px, 1rem + 2vw, 56px); }
@media (min-width: 1000px) { .chap__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.chap__text { display: flex; flex-direction: column; gap: 14px; max-width: 60ch; }
.chap__text h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); line-height: 1.02; }
.chap__k { font-weight: 700; color: var(--ink-text); margin: 8px 0 0; }
.chap__text > p { color: var(--body); }
.chap__m { color: var(--ink-2); }
.chap__text a { font-weight: 700; color: var(--ink-text); text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.shots { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.shots--n1 { grid-template-columns: minmax(0, 1fr); }
.shots--n3 > li:first-child { grid-column: span 2; }
.shots li { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); box-shadow: var(--lift); }
.shots picture, .shots img, .shots .vid, .shots video { width: 100%; height: 100%; }
.shots img, .shots video { object-fit: cover; }
.shots .zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.shots .zoom img { transition: transform var(--slow) var(--ease-out); }
.shots .zoom:hover img { transform: scale(1.03); }
.shots .zoom:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (max-width: 599px) { .shots { grid-template-columns: minmax(0, 1fr); } .shots--n3 > li:first-child { grid-column: auto; } }

.lightbox { width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(10 13 18 / .96); }
.lightbox::backdrop { background: rgb(0 0 0 / .6); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__img { max-width: calc(100vw - 2 * var(--gutter)); max-height: calc(100svh - 96px); width: auto; height: auto; object-fit: contain; }
.lightbox form { position: absolute; top: 16px; right: 16px; margin: 0; }
.lightbox__x { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / .18); background: var(--glass); color: var(--on-ink); cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / .12); }
.lightbox__x:hover { background: var(--glass-hi); color: #EEF2F6; border-color: rgb(255 255 255 / .36); box-shadow: inset 0 2px 0 var(--yellow); }

/* ── band, dock and footer ─────────────────────────────────────────────── */
.band { border-top: 1px solid rgb(255 255 255 / .06); padding: clamp(48px, 2rem + 3vw, 88px) 0;
  background: radial-gradient(900px 520px at 80% 0%, rgb(150 182 224 / .10), transparent 70%), var(--night-2); }
.band h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); }
.dock { background: var(--ink); border-top-color: rgb(255 255 255 / .08); }
.foot { background: var(--ink); border-top: 1px solid rgb(255 255 255 / .08); }
.foot__name { font-size: 1.35rem; letter-spacing: -0.02em; }
.foot__col ul:empty { display: none; }

/* lists that carry their own markers (numbered steps, job cards) sit flush with the text edge, not indented */
.prose .steps, .prose .jobs { padding-left: 0; }

/* ── phones (2026-10-30, Trevor: tighten the layout, spacing and sizes below the hero) ─────────────
   A tighter rhythm, smaller headings, pictures no taller than they need to be, rows instead of tall cards where
   the content is short, and the dock's room taken by the footer instead of a white strip under it. */
@media (max-width: 860px) {
  body { padding-bottom: 0; }
  .foot { padding-bottom: calc(28px + 72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  :root { --sect-y: 48px; }
  .sect__head { margin-bottom: 22px; }
  .sect__head h2, .chap__text h2, .portal h2, .band h2 { font-size: 1.75rem; }
  .sect__head p, .portal p, .band p { font-size: 1rem; }
  .sect__row { margin-bottom: 22px; }
  .answer { font-size: 1.0625rem; }
  .phero--dark h1 { font-size: 2.125rem; }
  .phero__in { padding-bottom: 36px; }
  .note--sample { font-size: 0.875rem; }
  .prose h2 { font-size: 1.375rem; }

  /* the three builds: a row each, the picture beside the words */
  .tiles { gap: 12px; }
  .tile a { flex-direction: row; align-items: stretch; }
  .tile__media { flex: 0 0 40%; aspect-ratio: 1 / 1; }
  .tile__cap { justify-content: center; padding: 14px 16px; border-top: 0; }
  .tile__t { font-size: 1.15rem; }
  .tile__d { font-size: 0.9375rem; }
  .tile .tag { top: auto; bottom: 0; left: 0; right: 0; padding: 5px 7px; gap: 6px; font-size: 0.6875rem; }

  /* the four steps: lighter cards */
  .process { gap: 12px; }
  .process__step { padding: 18px 18px 20px; gap: 6px; }
  .process__k { gap: 10px; font-size: 1.5rem; }
  .process__k::before { min-width: 24px; height: 24px; font-size: 0.8125rem; transform: translateY(-3px); }
  .process__step h3 { font-size: 1rem; }
  .process__step p:not(.process__k) { font-size: 0.9375rem; }

  /* the reel: square pictures, the next one peeking in, no dead space under it */
  .reel__item { flex-basis: 78vw; }
  .reel__media { aspect-ratio: 1 / 1; }
  .reel__track { padding-bottom: 24px; }
  .reel__t { font-size: 1.15rem; }

  /* tables stacked into rows: light cards, not black boxes */
  .data { background: transparent; box-shadow: none; }
  .data caption { padding-bottom: 12px; }
  .data tr { border: 0; margin-bottom: 10px; background: #FFFFFF; box-shadow: var(--lift); }
  .data th, .data td { padding: 10px 14px; }
  .data td::before { display: inline; margin-right: 8px; }   /* the label leads its line ("Share 30 per cent"), not a line of its own */

  /* the call band: full width buttons, one above the other */
  .band__in > .actions { flex-direction: row; }

  /* the Work page: the lead picture a landscape, not a whole screen */
  .chap__lead { height: auto; aspect-ratio: 4 / 3; }
  .chap__in { gap: 24px; }
  .shots { gap: 10px; }

  /* the footer: two columns of links under the name */
  .foot { padding-top: 40px; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .foot__biz { grid-column: 1 / -1; }
  .foot__col li a { padding: 4px 0; }
  /* a heading with no list under it (Areas) sits under the first column's links; the last column runs down the right */
  .foot__grid > .foot__col:last-child { grid-column: 2; grid-row: 2 / span 2; }
  .foot__col:has(> ul:empty) { grid-column: 1; grid-row: 3; }
  .foot__base { margin-top: 24px; flex-direction: column; gap: 4px; }

  /* the hero's drawing: bigger, in a shorter frame (it sat small in an empty square; the engine's max-width: 100% on
     svg and img had also been holding it to the screen's width) */
  /* The title over the scene (2026-10-31, Trevor): the drawing fills the top of the phone and the title stands on the
     ground at its foot, so the first screen is one picture with the name on it, not a picture above a page. The
     drawing is 128% of the width, so its view box is 80vw tall; it starts under the title block strip at the top. */
  .hero__pin { position: relative; }
  .stage { position: absolute; inset: 0 0 auto 0; aspect-ratio: auto; height: calc(56px + 80vw + 120px); }
  .stage__still, .stage__svg { left: -14%; width: 128%; top: 56px; height: 80vw; }
  .stage::after { height: 230px; background: linear-gradient(0deg, var(--ink) 22%, rgb(15 19 26 / .7) 58%, rgb(15 19 26 / 0)); }
  .hero__in { padding-top: calc(56px + 62vw); }   /* the title overlaps the foot of the drawing by 18vw: the ground, not the house */
  .hero--stage .hero__title { text-shadow: 0 2px 20px rgb(0 0 0 / .6); }
  /* the strip at the top: the build's stage (then the rendering's label) on the left, the flip on the right */
  .stage__k { display: none; }
  .stage__phase, .stage .stage__tag { max-width: calc(100% - 2 * var(--gutter) - 148px); }
  .stage__phase .stage__v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stage .stage__tag { left: var(--gutter); right: auto; top: 12px; }
  .stage__flip { top: 10px; bottom: auto; left: auto; right: var(--gutter); min-height: 40px; padding: 0 12px; font-size: 0.875rem; }

  /* the build rows: the sample label on one line under the picture ("Sample photo"; the full words are on the
     Work page and the reel) */
  .tile .tag__more { display: none; }
}
/* phones and small tablets: the side panel repeats the call band right under it, so the band does the asking */
@media (max-width: 860px) {
  body:has(.band) .aside .panel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tile__media img, .reel__media img, .reel__media video, .shots .zoom img, .btn, .tile a, .card a, .jobs a { transition: none; }
  .tile a:hover .tile__media img, .reel__card:hover .reel__media img, .shots .zoom:hover img, .tile a:hover, .card a:hover, .jobs a:hover { transform: none; }
}
@media (forced-colors: active) {
  .stage__svg path { stroke: CanvasText; }
  .tag::before, .stage__v::before, .process__k::before { forced-color-adjust: none; }
}

/* ── the request form (jdt/link.cjs; only while site.cjs APP_LINK is on) ── */
.reqform { display: grid; gap: 18px; margin: 8px 0 32px; padding: 24px; background: #fff; border: 1px solid var(--rule); max-width: 46rem; }
.reqform__row { display: grid; gap: 6px; }
.reqform__pair { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.reqform label { font-weight: 650; color: var(--ink-text); }
.reqform__opt { font-weight: 400; color: var(--body); }
.reqform input[type="text"], .reqform input[type="tel"], .reqform input[type="email"], .reqform select, .reqform textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid #8F9CAE; border-radius: var(--radius); }
.reqform textarea { min-height: 128px; resize: vertical; }
.reqform input[type="file"] { min-height: 48px; font: inherit; }
.reqform :is(input, select, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.reqform__hint { margin: 0; font-size: 0.9375rem; color: var(--body); }
.reqform__status { margin: 0; min-height: 1.5em; font-weight: 650; }
.reqform__status.is-ok { color: #1F6B3A; }
.reqform__status.is-bad { color: #A12C1F; }
.reqform button { justify-self: start; }
.reqform__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .reqform { padding: 18px 16px; } .reqform__pair { grid-template-columns: 1fr; } .reqform button { justify-self: stretch; } }