/* UMBRA DOMUS — one stylesheet, every page. No framework, no icon font, no hotlinked type.
   Palette: the official logo (2026-09-21) — Prussian #003153 for every fill and rule, black under the
   canopy, olive / purple / rust only as small marks. Type on a Prussian or black ground is --white
   (13.43:1 on Prussian, 21:1 on black); a hover or an active state keeps Prussian and adds a ring of it (SITE-FIX-02); the
   logo's own pair, and white on black reads 21:1. SITE-THEME-01, 2026-09-24: the three retired tokens
   left :root with the colour they named, and no rule names that colour any more. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --tyrian: #66023C;
  --ink: #0F0B1A;
  /* SITE-FIX-02 (B58): the olive and the second black are retired. No hex on this page
     is outside the logo palette and the card's kit. */
  --crimson: #7A0215;
  --purple: #251736;
  --rust: #92310E;
  --green: #4FB87B;
  --prussian: #003153;
  --vermillion: #D9432B;
  /* the same red darkened until it carries white text and small caps at AA. Buttons and
     kickers use this; the logo colour above is unchanged. */
  --white: #FFFFFF;
  --paper: #F6F3EE;
  --paper-2: #ECE7DF;
  --line: #D9D2C7;
  --muted: #4E4960;
  --blue-edge: #2F6BB0;
  --font: "Jost", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --radius: 14px;
  --wrap: 1100px;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* the sticky header is about 7rem tall — an anchor must land below it, not under it */
[id] { scroll-margin-top: 7rem; }
/* the inlined wordmark symbol: present in the document, never drawn */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--prussian); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
h1, h2, h3 { font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
h3 { font-size: 1.2rem; letter-spacing: 0; }
p { margin: 0 0 1em; }
.lead { font-size: 1.2rem; }
.muted { color: var(--muted); }
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 42rem; }
section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.band { background: var(--white); }
.dark { background: var(--ink); color: var(--white); }
.dark a { color: var(--white); }
.dark a:hover { color: var(--green); }
.kicker { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; font-weight: 600; color: var(--prussian); margin-bottom: 0.9rem; }
.dark .kicker { color: var(--green); }

/* ---------- header ---------- */
.top { background: var(--ink); color: var(--white); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(255,255,255,0.08); }
.top .wrap { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.5rem 1rem; padding-block: 0.6rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--white); text-decoration: none; min-height: 44px; }
.brand img { width: 40px; height: 40px; }
.brand .wm { height: 14px; width: auto; color: var(--white); }
.call { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--prussian); color: var(--white); text-decoration: none; font-weight: 600; padding: 0.55rem 0.9rem; border-radius: 999px; min-height: 44px; white-space: nowrap; }
/* SITE-FIX-02 · CDO 6 · ONE BLUE FOR EVERY BUTTON. A hover flipped a Prussian button to
   a flat black, so the one Next a thumb was resting on read a black the site does not own
   against Prussian everywhere else (the CDO's 5b). The button keeps its blue and the hover
   is a ring of the same blue — a mark, not a second colour. */
.call:hover { color: var(--white); background: var(--prussian); box-shadow: 0 0 0 3px rgba(0,49,83,0.28); }
.call svg { width: 18px; height: 18px; }
.call .num { display: inline; font-size: .9rem; }
.menu { grid-column: 1 / -1; display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -1.25rem; padding: 0 1.25rem 0.35rem; }
.menu::-webkit-scrollbar { display: none; }
.menu a { color: rgba(255,255,255,0.86); text-decoration: none; padding: 0.4rem 0.7rem; border-radius: 8px; white-space: nowrap; font-weight: 500; }
.menu a:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.menu a[aria-current="page"] { color: var(--white); background: rgba(255,255,255,0.14); }

/* SITE-FIX-02 · CDO 1 · THE MENU ON A PHONE. At 390 the eight links ran off the right
   edge and the last of them read "Sustainab…" / "Planes de C…" — the first thing a stranger
   screenshots. Below 760 the list is now tucked behind one button and opens as a column, so
   every item's box is whole inside the screen. No JavaScript and no library: the button is a
   label, the state is a checkbox. From 760 up the button is gone and the row is what it was. */
.nav-box { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nav-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  padding: 0.5rem 0.85rem; border: 1.5px solid rgba(255,255,255,0.28); border-radius: 999px;
  color: var(--white); font-weight: 600; font-size: 0.9rem; cursor: pointer; white-space: nowrap; }
.nav-btn svg { width: 18px; height: 18px; }
.nav-box:focus-visible + .nav-btn { box-shadow: 0 0 0 4px rgba(102,2,60,0.45); }
@media (max-width: 759px) {
  .menu { display: none; }
  .nav-box:checked ~ .menu { display: grid; gap: 0.15rem; padding-top: 0.35rem; }
  .nav-box:checked ~ .menu a { padding: 0.6rem 0.7rem; }
}
@media (min-width: 760px) { .nav-btn, .nav-box { display: none; } }

@media (min-width: 760px) {
  .top .wrap { grid-template-columns: auto 1fr auto; padding-block: 0.8rem; }
  .brand img { width: 48px; height: 48px; }
  .brand .wm { height: 19px; }
  .menu { grid-column: auto; justify-content: center; margin: 0; padding: 0; overflow: visible; }
  /* A ninth item (Work) is wider than the header can hold, and on a tablet the overspill
     pushed the whole page sideways. Once Work is in the nav, the links wrap to a second
     centred row instead. Scoped to that link so the nav on every other page is untouched,
     and a browser without :has() simply behaves the way it does today. */
  .menu:has(a[href="/work"]) { flex-wrap: wrap; row-gap: 0.15rem; }
  .call .num { font-size: inherit; }
}

/* the response promise — Drew's blank until he fills it */
.promise { margin: 0; background: var(--prussian); color: var(--white); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.18); text-align: center; padding: 0.55rem 1rem; font-size: 0.95rem; }
.promise strong { font-weight: 600; }
.promise svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 0.3rem; }

/* ---------- hero: the official logo on its own ground, Prussian over black ----------
   --f is the picture's own line. In the kit's UMBRA-DOMUS-OFFICIAL-LOGO-2100x1200.png the first
   row whose every channel is under 10 is y = 532, at x = 4 and at x = 2095 alike; 532 / 1200 =
   44.33%. The 1050x600 file agrees exactly: its first black row is 266 of 600. Row 0 is Prussian
   (0,49,83). The band below is as wide as the window and exactly the picture's height, and carries
   the same two-stop gradient, so the ground's line meets the picture's line at every width.
   Above the band the hero is Prussian (the top padding), below it black. */
.hero { --top: 38px; --f: 44.33%; padding: var(--top) 0 clamp(3rem, 8vw, 5rem); color: var(--white); text-align: center; overflow-x: clip;
  background: linear-gradient(to bottom, var(--prussian) 0, var(--prussian) var(--top), var(--ink) var(--top), var(--ink) 100%); }
.hero .lockup { display: grid; justify-items: center; margin-bottom: 2.25rem;
  width: 100vw; margin-left: calc(50% - 50vw);
  background: linear-gradient(to bottom, var(--prussian) 0, var(--prussian) var(--f), var(--ink) var(--f), var(--ink) 100%); }
.hero .hero-logo { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; }
.hero h1 { max-width: 14ch; margin-inline: auto; }
.hero .lead { margin-inline: auto; max-width: 34rem; }
.hero .sub { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.95rem; color: rgba(255,255,255,0.8); margin-bottom: 2rem; }
.hero .cta-row, .hero .links-row { justify-content: center; }
.hero a:not(.btn) { color: var(--white); }
/* the type pick is --white, and it is already this link's colour: the underline is the hover's mark */
.hero a:not(.btn):hover { color: var(--white); }
@media (min-width: 760px) { .hero { --top: 48px; } }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.links-row { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-weight: 500; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 54px; padding: 0.7rem 1.4rem; border-radius: var(--radius); background: var(--prussian); color: var(--white); text-decoration: none; font-weight: 600; font-size: 1.05rem; border: 2px solid var(--prussian); cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--prussian); border-color: var(--prussian); color: var(--white); box-shadow: 0 0 0 3px rgba(0,49,83,0.28); }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn.ghost:hover { background: rgba(255,255,255,0.08); color: inherit; }
.btn.wide { width: 100%; }
.btn svg { width: 20px; height: 20px; }

/* ---------- cards / tiles ---------- */
.grid { display: grid; gap: 1rem; }
@media (min-width: 600px) { .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid.three { grid-template-columns: 1fr 1fr 1fr; } }
.tile { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15,11,26,0.12); color: inherit; }
.tile .ph { aspect-ratio: 4 / 3; background: var(--paper-2); }
.tile .ph img { width: 100%; height: 100%; object-fit: cover; }
.tile .ph.panel { display: grid; place-items: center; background: linear-gradient(135deg, var(--prussian), var(--ink)); color: var(--white); }
.tile .ph.panel svg { width: 34%; height: auto; }
.tile .body { padding: 1rem 1.1rem 1.15rem; }
.tile h3 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.tile h3 svg { width: 20px; height: 20px; flex: none; }
.tile p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.tile .lic { margin-top: 0.6rem; font-size: 0.85rem; color: var(--prussian); font-weight: 500; }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.step .n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--prussian); color: var(--white); font-weight: 600; margin-bottom: 0.7rem; }
/* the three panels of the umbrella, as three small marks */
.step:nth-child(1) .n { background: var(--green); }
.step:nth-child(2) .n { background: var(--purple); }
.step:nth-child(3) .n { background: var(--rust); }
.note { border-left: 4px solid var(--prussian); background: var(--white); padding: 0.9rem 1.1rem; border-radius: 0 var(--radius) var(--radius) 0; }
.note.blue { border-color: var(--blue-edge); }

/* ---------- forms ---------- */
.req { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: grid; gap: 1rem; }
.req label { display: grid; gap: 0.35rem; font-weight: 600; }
.req label small { font-weight: 400; color: var(--muted); }
.field { width: 100%; min-height: 54px; font: inherit; font-size: 1.1rem; padding: 0.7rem 0.9rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.field:focus { outline: none; border-color: var(--tyrian); box-shadow: 0 0 0 4px rgba(102,2,60,0.45); background: var(--white); }
.field:focus:not(:focus-visible) { box-shadow: 0 0 0 4px rgba(102,2,60,0.18); }
.field:focus-visible { outline: none; border-color: var(--tyrian); box-shadow: 0 0 0 4px rgba(102,2,60,0.45); background: var(--white); }
textarea.field { min-height: 8rem; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips label { position: relative; font-weight: 500; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-block; padding: 0.5rem 0.85rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); cursor: pointer; min-height: 40px; }
.chips input:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chips input:focus-visible + span { box-shadow: 0 0 0 3px rgba(102,2,60,0.3); }
/* the opt-in checkbox — same 1rem rhythm as a .field, and it stays readable when the
   consent sentence wraps to two or three lines */
.opt, .req label.opt { display: flex; align-items: flex-start; gap: 0.65rem; font-weight: 500; margin: 0; }
.opt input[type="checkbox"], .req label.opt input { width: 22px; height: 22px; margin: 0.22rem 0 0; flex: none; accent-color: var(--tyrian); }
.opt > span, .req label.opt > span { display: block; }
.honey { position: absolute; left: -9999px; }
.fine { font-size: 0.9rem; color: var(--muted); }

/* ---------- status track ---------- */
.track { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: s; }
.track li { display: grid; grid-template-columns: 34px 1fr; gap: 0.8rem; align-items: start; padding: 0.8rem 0.9rem; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.track li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper-2); color: var(--ink); font-weight: 600; }
.track li.done::before { content: "✓"; background: var(--prussian); color: var(--white); }
.track li.now { border-color: var(--prussian); box-shadow: 0 0 0 3px rgba(0,49,83,0.18); }
.track li.now::before { background: var(--prussian); color: var(--white); }
.track strong { display: block; }
.track small { color: var(--muted); }

/* ---------- about ---------- */
.portrait { margin: 0 0 1.5rem; background: var(--prussian); border-radius: var(--radius); aspect-ratio: 4 / 5; display: grid; place-items: center; color: var(--white); text-align: center; padding: 1.5rem; max-width: 22rem; }
.portrait img { width: 100px; height: 100px; margin-bottom: 0.75rem; }
.portrait figcaption { font-size: 0.95rem; opacity: 0.9; }
/* the same slot once a real photo of Drew is in it: the photo fills the frame, the caption sits under it */
.portrait.has-photo { display: block; padding: 0; overflow: hidden; aspect-ratio: auto; }
.portrait.has-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin: 0; }
.portrait.has-photo figcaption { padding: 0.75rem 1rem 0.9rem; text-align: left; }
@media (min-width: 760px) { .about { display: grid; grid-template-columns: 22rem 1fr; gap: 3rem; align-items: start; } .portrait { position: sticky; top: 6.5rem; } }
.arc { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.35rem; }
.arc li { padding-left: 1.1rem; position: relative; }
.arc li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 8px; height: 8px; border-radius: 50%; background: var(--prussian); }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--white); padding: 2.5rem 0 2rem; border-top: 4px solid var(--prussian); }
.foot a { color: var(--white); }
.foot a:hover { color: var(--white); }
.foot .cols { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .foot .cols { grid-template-columns: 1.3fr 1fr 1fr; } }
.foot .wm { height: 15px; width: auto; color: var(--white); margin-bottom: 0.8rem; }
.foot nav { display: grid; gap: 0.35rem; }
.foot p { margin-bottom: 0.5rem; }
.foot .fine { color: rgba(255,255,255,0.72); margin-top: 1.5rem; }

/* ---------- motion: near-free, CSS only ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero .mark { animation: unfurl 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  @keyframes unfurl { from { opacity: 0; transform: translateY(-14px) scale(0.94); } to { opacity: 1; transform: none; } }
  @supports (animation-timeline: view()) {
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tile { transition: none; } }

/* ---------- automate: price cards, included lists, the condition box ---------- */
.pricecard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.pricecard .inc { flex: 1 0 auto; margin-bottom: 0; }
.pricecard > .btn { margin-top: auto; }
.pricecard h3 { margin-bottom: 0; }
.price { font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--tyrian); margin: 0; }
.price small { display: block; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.45rem; }
.price .per { font-size: 0.95rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.cond { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.85rem; font-size: 0.97rem; margin: 0; }
.tile .cond { color: var(--ink); }
.inc { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 0.9rem; }
.inc.compact { gap: 0.5rem; }
.inc li { display: grid; grid-template-columns: 22px 1fr; gap: 0.7rem; align-items: start; }
.inc > li > svg { width: 20px; height: 20px; color: var(--green); margin-top: 0.22em; flex: none; }
.inc strong { display: block; font-weight: 600; }
.inc span { display: block; color: var(--muted); font-size: 0.98rem; }

/* ---------- work: one job card, three photo strips ---------- */
.job { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
@media (min-width: 760px) { .job { padding: 1.75rem 2rem; } }
.job > h2 { margin-bottom: 0.15rem; }
.job .where { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.5rem; }
.shots { margin-bottom: 1.5rem; }
.shots h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 0.6rem; }
/* the strip scrolls sideways on a phone and simply fits on a wide screen */
.strip { display: flex; gap: 0.75rem; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; margin: 0 -1.25rem; padding: 0 1.25rem 0.4rem; scroll-snap-type: x proximity; }
@media (min-width: 760px) { .strip { margin: 0; padding: 0 0 0.4rem; flex-wrap: wrap; } }
.shot { flex: 0 0 auto; width: min(17rem, 76vw); margin: 0; scroll-snap-align: start; }
.shot a { display: block; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.shot a:focus-visible { outline: 3px solid var(--tyrian); outline-offset: 2px; }
.shot figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }
.strip-empty { flex: 1 1 auto; margin: 0; background: var(--paper-2); border: 1px dashed var(--line); border-radius: 10px; padding: 0.9rem 1.1rem; color: var(--muted); font-size: 0.95rem; }
.job-notes { border-top: 1px solid var(--line); padding-top: 1.25rem; max-width: 42rem; }
.job-notes h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.job-notes p:last-child { margin-bottom: 0; }
.askline { margin: 1.5rem 0 0; font-size: 1.1rem; font-weight: 500; }

/* ---------- the photo field ---------- */
.field.file { min-height: 0; padding: 0.55rem 0.7rem; font-size: 1rem; }
.field.file::file-selector-button { font: inherit; font-weight: 600; font-size: 0.95rem; border: 0; background: var(--ink); color: var(--white); border-radius: 8px; padding: 0.6rem 0.9rem; margin-right: 0.7rem; min-height: 44px; cursor: pointer; }
.field.file::file-selector-button:hover { background: var(--tyrian); }

/* two ways to add a photo, side by side. The raw file input stays in the markup and
   takes over whenever the script does not run, so the no-JS path is unchanged. */
.photo-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: -0.35rem 0 0; }
.photo-actions .btn { flex: 1 1 11rem; }
.pix { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pix li { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); }
.pix img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; background: var(--line); }
.pix .nm { flex: 1 1 auto; min-width: 0; font-weight: 400; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pix .rm { flex: none; min-height: 40px; min-width: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.pix .rm:hover { background: var(--ink); color: var(--white); }
.pix .rm:focus-visible { outline: 3px solid var(--tyrian); outline-offset: 2px; }

/* ───────────────────────────────────────────────────────────────────────────
   WSS-03 · THE DRYWALL-HOLES INTAKE (R17 · R17b · R17d · R17e)

   PORTED, NOT REDESIGNED, from the file Drew approved on 2026-09-18 —
   Bridge\BIP\UMBRA\WSS\INTAKE-DRYWALL-HOLES-APPROVED-2026-09-18.html ("and
   thats looking good"). Every rule below is that file's own rule. Its :root
   block is deliberately NOT copied: every token it named already lives at the
   top of this stylesheet, so the palette keeps coming from one place.

   Scoped to .intake so the service chips above the block keep the look they
   already have — restyling them was not approved and is not this round's job.
   ────────────────────────────────────────────────────────────────────────── */
.intake[hidden], .intake [hidden] { display: none !important; }
.intake { margin: 0; }
.req .q { font-weight: 600; margin: 0 0 0.15rem; }
.req .hint { font-size: 0.9rem; color: var(--muted); margin: 0 0 0.6rem; }
.intake .step { border-top: 1px solid var(--line); padding: 1.15rem 0 0.35rem; }
.intake .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.35rem; padding: 0; list-style: none; }
.intake .chip { position: relative; font-weight: 500; }
.intake .chip input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.intake .chip span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.85rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); min-height: 40px; font-weight: 500; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.intake .chip input:checked + span { background: var(--prussian); border-color: var(--prussian); color: var(--white); }
.intake .chip input:focus-visible + span { outline: 2px solid var(--prussian); outline-offset: 2px; }
.intake .dot { display: inline-block; border-radius: 50%; background: currentColor; opacity: 0.85; flex: none; }
/* the room, seen from inside: the chips do the selecting, the picture teaches the word */
.intake .room { background: var(--paper-2); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 0.5rem; margin: 0 0 0.7rem; }
.intake .room svg { width: 100%; }
.intake .zone { fill: transparent; stroke: var(--prussian); stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: fill 0.15s; }
.intake .zone.on { fill: var(--prussian); fill-opacity: 0.22; }
.intake .edge { stroke: var(--prussian); stroke-width: 1.6; fill: none; vector-effect: non-scaling-stroke; }
.intake .edge.on { stroke: var(--crimson); stroke-width: 3.4; }
.intake .lbl { font-size: 9px; fill: var(--muted); letter-spacing: 0.04em; }
/* one card per place they tapped */
.intake .area { border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: 0.85rem 0.9rem 0.5rem; margin: 0 0 0.7rem; }
.intake .area h3 { margin: 0 0 0.7rem; font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.intake .area h3 .pin { width: 9px; height: 9px; border-radius: 50%; background: var(--prussian); flex: none; }
.intake .area .q { font-size: 0.97rem; margin-top: 0.55rem; }
.intake .area .chip span { background: var(--white); }
.intake .area .chip input:checked + span { background: var(--prussian); }
.intake .exact { display: flex; align-items: center; gap: 0.5rem; margin: 0.15rem 0 0.1rem; font-size: 0.9rem; color: var(--muted); }
.intake .exact input { width: 5.5rem; min-height: 44px; font: inherit; font-size: 1rem; padding: 0.35rem 0.6rem; border: 1.5px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); }
/* the honesty gate — the reference's .note / .noprice rules, nothing new */
.req .gate { font-size: 0.9rem; color: var(--muted); border-left: 3px solid var(--prussian); padding-left: 0.75rem; margin: 0.9rem 0 0; }
.req .gate.warn { border-left-color: var(--crimson); }
/* the photo guidance lines (R17d) — the reference's .guide rules */
.req .guide { margin: 0 0 0.8rem; padding-left: 1.35rem; font-size: 0.93rem; color: var(--muted); }
.req .guide li { margin-bottom: 0.3rem; }
.req .guide b { color: var(--ink); font-weight: 600; }
/* .req label is a bold grid on this site; a chip label and the exact-number label
   are neither, so they are put back to what the approved reference uses. */
.intake .chip label { display: block; gap: 0; font-weight: 500; }
.intake .exact label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 400; }

/* ============================================================================
   form v3 — the intake wizard (2026-09-22, rebuilt on Drew's U-0010 readings)
   One question per screen; every surface question under a CEILING / WALLS
   banner; a real check box or radio dot on the LEFT of each row, on the line
   with the words; Send in Next's place on the last screen; no room drawing.
   Nothing above this block is changed.
   ========================================================================== */
.v2service { display: none; }
.intake2 { margin: 0; }
.intake2 [hidden] { display: none !important; }
.intake2 .fstep { display: grid; gap: 0.6rem; }
/* road MW: the walls' texture screen — "Same texture as the ceiling?" and the tiles, each its own block of the screen */
.intake2 .v2same, .intake2 .v2tiles { display: grid; gap: 0.6rem; }
.intake2 .v2same[hidden], .intake2 .v2tiles[hidden] { display: none; }
/* the thin progress line */
.v2bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 0 0 1.1rem; }
.v2bar i { display: block; height: 100%; width: 0; background: var(--prussian); transition: width 0.18s ease-out; }
/* the surface banner: which one this screen is about */
.intake2 .v2where { margin: 0 0 0.15rem; }
.intake2 .v2where span { display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px;
  background: var(--ink); color: var(--white); font-weight: 700; font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; }
.intake2 .v2where[data-surface="ceiling"] span { background: var(--prussian); }
.intake2 .v2where[data-surface="walls"] span { background: var(--tyrian); }
/* the question, and the one short hint under it */
.intake2 .v2q { font-weight: 600; font-size: 1.25rem; line-height: 1.25; margin: 0; }
.intake2 .v2hint { font-size: 0.95rem; color: var(--muted); margin: -0.35rem 0 0.2rem; }
/* road XW: the one line a patch job gets on the time picker */
.intake2 .v2pair { margin: 0.1rem 0 0.4rem; padding: 0.55rem 0.8rem; border-left: 4px solid var(--prussian); background: rgba(0,49,83,0.06); border-radius: 0 10px 10px 0; font-size: 0.95rem; font-weight: 500; }
.intake2 .v2pair[hidden] { display: none; }
.intake2 .v2need { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--crimson); }
/* full-width option rows, one tap target per answer, the mark on the left */
.v2opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.v2opts li { margin: 0; }
.req .v2opt { position: relative; display: flex; align-items: center; gap: 0.85rem; width: 100%;
  min-height: 56px; padding: 0.8rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--paper); font-weight: 500; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s; }
.req .v2opt input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.req .v2opt span { flex: 1 1 auto; }
.req .v2opt .v2mark { flex: none; width: 24px; height: 24px; border: 2px solid var(--muted); background: var(--white);
  border-radius: 6px; display: block; box-sizing: border-box; }
.req .v2opt.v2radio .v2mark { border-radius: 50%; }
.req .v2opt:has(input:checked), .req .v2opt.on { background: var(--prussian); border-color: var(--prussian); color: var(--white); }
.req .v2opt:has(input:checked) .v2mark, .req .v2opt.on .v2mark { border-color: var(--white); background: var(--white);
  background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23003153' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.req .v2opt.v2radio:has(input:checked) .v2mark, .req .v2opt.v2radio.on .v2mark { background-image: none; box-shadow: inset 0 0 0 6px var(--prussian); }
.req .v2opt:has(input:focus-visible) { outline: 3px solid var(--tyrian); outline-offset: 2px; }
/* "Something else" sits last, after a divider */
.v2opts li.v2last { margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px solid var(--line); }
/* texture rows: the mark, a swatch, the word */
.v2opts.v2tex img { flex: none; width: 52px; height: 52px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); }
/* one-line and multi-line answers */
.req .intake2 .v2field { display: grid; gap: 0.35rem; font-weight: 600; }
.intake2 .v2field .field { font-weight: 400; }
.v2sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.req .intake2 .v2file { display: block; }
.intake2 .v2cam { flex: 0 0 auto; min-width: 56px; }
.intake2 .v2cam svg { width: 22px; height: 22px; }
/* Back · Next — and Send, in Next's place, on the last screen only */
.v2nav { display: flex; gap: 0.75rem; margin-top: 1.2rem; }
.v2nav .btn { flex: 1 1 auto; min-height: 52px; }
.v2nav .v2back { flex: 0 0 8rem; }
.v2nav .btn[hidden] { display: none !important; }
@media (max-width: 420px) {
  .intake2 .v2q { font-size: 1.15rem; }
  .v2nav .v2back { flex: 0 0 6.5rem; }
}

/* ==========================================================================
   FORM-WINDOWS-01 (2026-09-23) · "When could we come?" and the text box.
   Every target is at least 44px; a state is always said in words or a mark,
   never by colour alone (a picked block says "Picked", a day says "1 picked",
   an open day is inverted AND carries a notch). Nothing above is changed.
   ========================================================================== */
.wbox { display: grid; gap: 0.7rem; }
.wdays { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 0.45rem; }
.req .wday { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60px; min-width: 44px; padding: 0.4rem 0.3rem; border: 1.5px solid var(--muted); border-radius: 12px;
  background: var(--paper); color: var(--ink); font: inherit; line-height: 1.15; cursor: pointer; }
.req .wday .wdow { font-size: 0.85rem; font-weight: 600; text-transform: capitalize; }
.req .wday .wdate { font-size: 1.05rem; font-weight: 700; }
.req .wday .whas { font-size: 0.72rem; font-weight: 600; margin-top: 0.1rem; }
.req .wday.has { border-width: 2.5px; border-color: var(--prussian); }
.req .wday[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.req .wday[aria-pressed="true"]::after { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -7px;
  border: 7px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.req .wday:focus-visible, .req .wblock:focus-visible, .req .wpick:focus-visible, .req .wprivacy:focus-visible {
  outline: 3px solid var(--tyrian); outline-offset: 2px; }
.wblocks { margin: 0; padding: 0.8rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--white); }
.wblocks legend { padding: 0 0.35rem; font-weight: 600; }
.wblocklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.45rem; }
.req .wblock { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 52px;
  padding: 0.55rem 0.85rem; border: 1.5px solid var(--muted); border-radius: 10px; background: var(--paper);
  color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.req .wblock.on { background: var(--prussian); border-color: var(--prussian); color: var(--white); }
.req .wblock .wbon { font-size: 0.85rem; white-space: nowrap; }
.req .wblock[disabled] { cursor: not-allowed; opacity: 0.55; text-decoration: line-through; }
.wfull { margin: 0.5rem 0 0; font-size: 0.95rem; font-weight: 600; }
.wcount { margin: 0; font-size: 0.95rem; color: var(--muted); }
.wpicks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.wpicks li { margin: 0; }
.req .wpick { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.4rem 0.5rem 0.4rem 0.4rem;
  border: 1.5px solid var(--prussian); border-radius: 999px; background: var(--white); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer; }
.req .wpick .wpn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--prussian); color: var(--white); font-size: 0.9rem; }
.req .wpick .wpx { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; border: 1.5px solid var(--muted); font-size: 0.85rem; }
/* road MW (2026-09-26) · THE WHOLE CHIP REMOVES A PICK. Each pick is one full-width row, 48 px tall, the whole row the
   button (it always was one); its right end says so in a word — "Remove ✕" — instead of a small ✕ a thumb misses. */
.wpicks { flex-direction: column; flex-wrap: nowrap; }
.req .wpick { display: flex; width: 100%; min-height: 48px; box-sizing: border-box; gap: 0.5rem; padding: 0.4rem 0.4rem 0.4rem 0.4rem;
  border-radius: 14px; text-align: left; }
.req .wpick .wpn { width: 26px; height: 26px; flex: none; }
.req .wpick .wpt { flex: 1 1 auto; min-width: 0; font-size: 0.98rem; }
.req .wpick .wpd { white-space: nowrap; }
.req .wpick .wpx { width: auto; height: 32px; padding: 0 0.55rem; border-radius: 999px; font-size: 0.82rem;
  font-weight: 600; white-space: nowrap; flex: none; }
.req .wpick:hover .wpx, .req .wpick:active .wpx { background: var(--paper); border-color: var(--ink); }
.intake2 .wnq { font-size: 1.05rem; }
.wconsent { display: grid; gap: 0.25rem; margin-top: 0.6rem; }
.req .wconsent .v2opt { align-items: flex-start; font-weight: 400; font-size: 0.92rem; line-height: 1.4; }
.req .wconsent .v2opt .v2mark { margin-top: 0.1rem; }
.req .wconsent .v2opt strong { font-weight: 700; }
.req .wprivacy { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 0.25rem;
  justify-self: start; font-size: 0.95rem; }

/* ==========================================================================
   road W (2026-09-26) · the contact step, the last screen's "what you gave",
   the thank-you page's "what you sent", and the status page's visits and
   receipt. Nothing above is changed.
   ========================================================================== */
.intake2 .v2contact { gap: 0.25rem; }
.intake2 .v2contact .v2lab { font-weight: 600; font-size: 1.05rem; }
.intake2 .v2contact .v2sub { font-weight: 400; font-size: 0.95rem; color: var(--muted); margin: -0.1rem 0 0.15rem; }
.intake2 .v2contact .v2optional { font-weight: 400; font-size: 0.9rem; color: var(--muted); margin-left: 0.3rem; }
.intake2 .v2contact + .v2contact { margin-top: 0.35rem; }
/* no opacity here: it would lift the text above the (invisible) checkbox and take its taps */
.req .wconsent .wlegal { display: block; margin-top: 0.3rem; font-size: 0.8rem; line-height: 1.4; font-weight: 400; color: inherit; }
.wsum { margin: 0.4rem 0 0; display: grid; gap: 0.5rem; }
.wsum:empty { display: none; }
.wsum div { padding: 0.65rem 0.85rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); }
.wsum dt { font-size: 0.9rem; color: var(--muted); }
.wsum dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
/* the thank-you page */
.sent-line { font-size: 1.15rem; margin: 0; }
.nw { white-space: nowrap; }
.sent { display: grid; gap: 0.55rem; margin-top: 1rem; }
.sent .sent-h { margin: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 600; color: var(--prussian); }
.sent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.sent li { display: flex; gap: 0.55rem; align-items: baseline; font-weight: 600; }
.sent li span { color: var(--muted); font-weight: 500; min-width: 1.2rem; }
.sent p { margin: 0; }
.sent .sent-copy { overflow-wrap: anywhere; }
/* the status page: the visits, and a finished, paid job */
.live-visits { margin: 1.2rem 0; }
.live-visits p { margin: 0; }
.live-visits p + p { margin-top: 0.3rem; }
.live-paid { margin: 1.2rem 0; display: grid; gap: 0.8rem; }
/* road FW: the quoted status — the price and one big button to their quote page */
.live-quote { margin: 1.2rem 0; display: grid; gap: 0.8rem; }
.live-quote p { margin: 0; }
.live-quote[hidden] { display: none !important; }
.live-paid p { margin: 0; }
/* an element these rules lay out is still hidden while it carries `hidden` */
.sent[hidden], .sent [hidden], .live-paid[hidden], .live-paid [hidden], .live-visits[hidden], .wsum[hidden] { display: none !important; }

/* ============================================================================
   SITE-FIX-01 (2026-09-28) · THE CHOOSER, THE TILE QUESTIONS, THE ADDRESS CARD
   AND THE REVIEW. House palette only — every colour below is one of the tokens
   at the top of this file. No new colour, no new font, no library.
   Phone first: 16px text in every box (a smaller size makes iOS zoom the page),
   44pt tap targets, and the label always above its field, never a placeholder.
   ========================================================================== */

/* --- the chooser ---------------------------------------------------------- */
.ch-heading { font-size: 1.18rem; line-height: 1.25; margin: 0 0 0.35rem; font-weight: 700; }
.ch-while .ch-heading { font-size: 1.02rem; }
.req .ch-tiles { margin-bottom: 0.4rem; }
.req .ch-tap { align-items: flex-start; min-height: 60px; }
.req .ch-tap .v2mark { margin-top: 0.15rem; }
.req .ch-tap .ch-words { display: grid; gap: 0.15rem; flex: 1 1 auto; }
.req .ch-tap .ch-label { flex: 0 1 auto; font-weight: 600; line-height: 1.3; }
.req .ch-tap .ch-sub { flex: 0 1 auto; font-weight: 400; font-size: 0.88rem; line-height: 1.35;
  color: var(--muted); }
.req .ch-tap.on .ch-sub, .req .ch-tap:has(input:checked) .ch-sub { color: var(--white); opacity: 0.85; }

/* ONE SCREEN ON A PHONE. The ignite asks for the heading and every tile on one
   390-wide screen, so on a phone the tiles run tight: the words stay full size to
   the thumb, the padding and the second line give up the room. Each tile is still
   well over a 44pt target. Nothing here changes a colour or a font. */
@media (max-width: 480px) {
  /* the band the chooser lives in, and nothing else on the site */
  section.band:has([data-chooser-tiles]) { padding-top: 0.9rem; }
  section.band:has([data-chooser-tiles]) > .wrap > h2 { font-size: 1.35rem; line-height: 1.12; margin-bottom: 0.25em; }
  section.band:has([data-chooser-tiles]) > .wrap > .lead { font-size: 1rem; line-height: 1.35; margin-bottom: 0.55rem; }
  .ch-heading { font-size: 1.1rem; margin-bottom: 0.25rem; }
  .ch-hint { font-size: 0.88rem; line-height: 1.3; margin: 0 0 0.5rem; }
  .req .ch-tiles { gap: 0.3rem; }
  .req .ch-tiles .ch-tap { min-height: 52px; padding: 0.45rem 0.7rem; gap: 0.55rem; }
  .req .ch-tiles .ch-label { font-size: 0.97rem; line-height: 1.18; }
  /* SITE-FIX-02 · CDO 8 · THE LINE UNDER EACH TILE IS BACK ON THE PHONE. The round before
     this one took it away to hold the eight tiles on one 390x844 screen. The CDO's read of
     that screen: "the tiles lost the little line under each one that the desktop has — put
     it back, that's what tells people they picked the right one." It is back, at every
     width, and it turns white on the tile they picked, as it always did at 1440. The list
     now runs past the fold and is scrolled, which is what suite K (2) and its Spanish twin K (8)'s
     one-screen readings were re-cut to say. */
  .req .ch-tiles .ch-sub { font-size: 0.84rem; line-height: 1.25; }
}

/* "While we're there" — the second thing on the chooser's screen, under the tiles */
.ch-while { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.req .ch-list .ch-tap { min-height: 52px; }
.req .ch-list .ch-label { font-weight: 500; }

/* --- one screen of questions per lit tile --------------------------------- */
.ch-which { font-weight: 700; }
.ch-qblock { margin-bottom: 1.35rem; }
.ch-qblock:last-child { margin-bottom: 0; }
.ch-qblock .v2q { font-size: 1.02rem; margin-bottom: 0.5rem; }
.ch-small-q { font-size: 0.98rem; }
.req .ch-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.req .ch-inline li { flex: 1 1 8rem; }
.req .ch-inline .ch-tap { min-height: 48px; }

/* --- the photo ask, per tile ---------------------------------------------- */
.ch-photo-ask { list-style: none; margin: 0.4rem 0 0.9rem; padding: 0; display: grid; gap: 0.45rem; }
.ch-photo-ask li { font-size: 0.92rem; line-height: 1.4; color: var(--muted);
  padding-left: 0.8rem; border-left: 3px solid var(--line); }
.ch-photo-ask strong { color: var(--ink); }
.ch-photo-tile { display: block; width: 100%; margin-top: 0.35rem; min-height: 44px; font-size: 16px;
  font-family: var(--font); border: 1.5px solid var(--line); border-radius: 8px; background: var(--white);
  color: var(--ink); padding: 0 0.5rem; }

/* --- the address card ------------------------------------------------------ */
.ch-addr-host { margin-top: 0.6rem; }
.uaddr-sug { list-style: none; margin: 0.4rem 0 0; padding: 0; border: 1.5px solid var(--line);
  border-radius: 12px; overflow: hidden; background: var(--white); }
.uaddr-sug li + li { border-top: 1px solid var(--line); }
.uaddr-pick { display: block; width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; text-align: left;
  font: inherit; font-size: 16px; background: none; border: 0; color: var(--ink); cursor: pointer; }
.uaddr-pick:hover, .uaddr-pick:focus-visible { background: var(--paper); }
.uaddr { margin-top: 0.5rem; }
.uaddr-line { margin: 0; font-size: 0.95rem; line-height: 1.4; }
.uaddr-need .uaddr-line { color: var(--rust); font-weight: 600; }
.uaddr-busy .uaddr-line { color: var(--muted); }
/* SITE-FIX-02 · B58 · the two states are on the kit now: what still needs confirming is
   the card's crimson, what is confirmed is the same Prussian the whole site is built on. */
.uaddr-ok .uaddr-line { color: var(--prussian); font-weight: 600; }
.uaddr-card { border: 1.5px solid var(--prussian); border-radius: 12px; padding: 0.9rem;
  background: var(--paper); }
.uaddr-ask { margin: 0 0 0.3rem; font-weight: 700; }
.uaddr-found { margin: 0 0 0.5rem; font-size: 1.02rem; line-height: 1.35; }
.uaddr-note { margin: 0 0 0.6rem; font-size: 0.88rem; line-height: 1.4; color: var(--muted); }
.uaddr-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.uaddr-row .btn { flex: 1 1 10rem; min-height: 48px; }

/* --- the review: the last screen before Send ------------------------------- */
.ch-review { display: grid; gap: 0.85rem; margin: 0.5rem 0 1rem; }
.ch-rgroup { border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.85rem;
  background: var(--paper); }
.ch-rhead { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ch-rtitle { font-weight: 700; font-size: 0.95rem; }
.ch-redit { min-height: 44px; min-width: 64px; padding: 0 0.7rem; font: inherit; font-size: 0.95rem;
  font-weight: 600; color: var(--prussian); background: none; border: 1.5px solid var(--line);
  border-radius: 8px; cursor: pointer; }
.ch-redit:hover, .ch-redit:focus-visible { border-color: var(--prussian); background: var(--white); }
.ch-rlist { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.ch-rlist li { font-size: 0.95rem; line-height: 1.4; white-space: pre-wrap; }
.ch-thumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.ch-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.ch-replyby { margin: 0.2rem 0 0; font-weight: 700; font-size: 1rem; }
.ch-missing { margin-top: 0.4rem; }

/* the sent page says the same list back, read-only */
.ch-got { display: grid; gap: 0.2rem; list-style: none; margin: 0.4rem 0 0; padding: 0; }
.ch-got li { font-size: 0.95rem; line-height: 1.4; white-space: pre-wrap; }

/* a card that lost a photo we could not vouch for keeps its caption and its shape */
.ph-none { min-height: 0; }
.tile .ph.ph-none { display: none; }

/* every box on this form is 16px, so no phone zooms the page when it is tapped */
.req .field, .req input, .req textarea, .req select { font-size: 16px; }

/* ============================================================================
   FRONT-DOOR-01 (2026-10-04) · THE MENU — Drew's pick of the three shapes.
   The home page body only: hero, the price tiles, the day card, the trust row, the
   three steps and the who-card. Header, promise strip and footer are the site's own
   rules above. The same tiles are drawn on /services by /assets/umbra-menu.js.
   Type is 18px here (his rule: phone first), every tap is 44px or more, and the
   hero's first button is PAPER with ink text: Prussian on ink reads 1.4:1 as a
   shape, under the 3:1 a control needs, so the button is the light one.
   ========================================================================== */
.fd { font-size: 1.125rem; }
.fd .fine { font-size: 0.95rem; }
.fd a:focus-visible, .fd .btn:focus-visible, .fd .mtile:focus-visible, .fd .day:focus-visible { outline: 3px solid var(--tyrian); outline-offset: 3px; }
.fd-hero a:focus-visible, .fd-hero .btn:focus-visible, .daycard a:focus-visible { outline-color: var(--green); }

/* --- hero ---------------------------------------------------------------- */
.fd-hero { background: var(--ink); color: var(--white); padding: clamp(2.5rem, 7vw, 4.75rem) 0 clamp(2.25rem, 6vw, 3.75rem); }
.fd-hero h1 { max-width: 12ch; margin-bottom: 0.6rem; }
.fd-hero .lead { color: rgba(255,255,255,0.84); max-width: 30rem; margin-bottom: 1.6rem; }
.fd-hero .cta-row { flex-direction: column; align-items: stretch; max-width: 30rem; margin-bottom: 1.1rem; }
.fd-hero .btn { width: 100%; }
.fd-hero .btn.ghost { color: var(--white); border-color: rgba(255,255,255,0.7); }
.fd-hero .btn.ghost:hover { border-color: var(--white); box-shadow: 0 0 0 3px rgba(255,255,255,0.18); }
.fd-hero .tiny { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.95rem; color: rgba(255,255,255,0.8); }
.fd-hero .tiny svg { width: 18px; height: 18px; flex: none; }
.fd-hero .tiny a { color: var(--white); text-decoration: none; font-weight: 500; }
.fd-hero .tiny a:hover { text-decoration: underline; }
@media (min-width: 600px) {
  .fd-hero .cta-row { flex-direction: row; max-width: none; }
  .fd-hero .btn { width: auto; min-width: 15rem; }
}
.btn.paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.paper:hover { background: var(--white); border-color: var(--white); color: var(--ink); box-shadow: 0 0 0 3px rgba(246,243,238,0.35); }

/* --- the menu ------------------------------------------------------------ */
.fd-menu h2 { margin-bottom: 0.3rem; }
.fd-menu .lead { color: var(--muted); font-size: 1.05rem; max-width: 42rem; margin-bottom: 0.5rem; }
.menu-group { margin-top: 1.75rem; }
.menu-group h3 { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.7rem; }
.menu-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
@media (min-width: 760px) { .menu-tiles { grid-template-columns: repeat(3, 1fr); gap: 0.85rem; } }
@media (min-width: 1000px) { .menu-tiles { grid-template-columns: repeat(4, 1fr); } }
.mtile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 0.7rem; min-height: 7.25rem; height: 100%;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 0.9rem 0.8rem;
  color: inherit; text-decoration: none; overflow-wrap: break-word; transition: border-color 120ms ease, box-shadow 120ms ease; }
.mtile:hover { border-color: var(--prussian); box-shadow: 0 0 0 3px rgba(0,49,83,0.14); color: inherit; }
.mtile .mtop { display: block; padding-right: 0.9rem; }
.mtile .mname { display: block; font-weight: 600; font-size: 1rem; line-height: 1.25; }
.mtile .minc { display: block; font-size: 0.85rem; color: var(--muted); line-height: 1.35; margin-top: 0.3rem; }
.mtile .mprice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.35rem; }
.mtile .mfrom { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mtile .mamt { font-size: 1.35rem; font-weight: 600; color: var(--prussian); line-height: 1; }
.mtile .munit { font-size: 0.82rem; color: var(--muted); }
.mtile .mchev { position: absolute; right: 0.6rem; top: 0.75rem; width: 12px; height: 12px; color: var(--line); }
.mtile:hover .mchev { color: var(--prussian); }
@media (min-width: 600px) { .mtile { padding: 1rem 1.05rem 0.95rem; } .mtile .mname { font-size: 1.05rem; } .mtile .minc { font-size: 0.9rem; } }
@media (max-width: 389px) { .mtile { overflow-wrap: anywhere; } }

.daycard { background: var(--ink); color: var(--white); border-radius: var(--radius); padding: 1.25rem; margin-top: 1.75rem; max-width: 42rem; }
.daycard h3 { font-size: 1.4rem; letter-spacing: -0.01em; margin-bottom: 0.25rem; }
.daycard p { color: rgba(255,255,255,0.8); margin-bottom: 1rem; font-size: 1rem; }
.days { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; margin-bottom: 1rem; }
.day { display: flex; flex-direction: column; min-height: 44px; background: rgba(246,243,238,0.07); border: 1px solid rgba(246,243,238,0.22); border-radius: 10px; padding: 0.8rem; color: var(--white); text-decoration: none; }
.day:hover { background: rgba(246,243,238,0.13); color: var(--white); border-color: rgba(246,243,238,0.5); }
.day .l { font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.day .v { font-size: 1.65rem; font-weight: 600; line-height: 1.15; margin-top: 0.1rem; }
.day .h { font-size: 0.85rem; color: rgba(255,255,255,0.75); margin-top: 0.15rem; }
.daycard .btn { width: 100%; }
@media (min-width: 600px) { .daycard { padding: 1.5rem; } .daycard .btn { width: auto; min-width: 15rem; } }
.fd-note { font-size: 0.95rem; color: var(--muted); margin: 1.5rem 0 0; max-width: 62ch; line-height: 1.5; }
.fd-note strong { color: var(--ink); font-weight: 600; }
.fd-menu .no-js { background: var(--white); border: 1px dashed var(--line); border-radius: 10px; padding: 0.9rem 1.1rem; margin: 1rem 0 0; }

/* --- trust row ------------------------------------------------------------ */
.trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
@media (min-width: 760px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust li { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 500; font-size: 1rem; line-height: 1.3; }
.trust svg { width: 22px; height: 22px; flex: none; margin-top: 0.05rem; }

/* --- how it works, who's coming ---------------------------------------------- */
.fd .step h3 { font-size: 1.15rem; }
.fd .step p { font-size: 1rem; margin: 0; }
.fd-alt { background: var(--paper-2); }
.who { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; max-width: 42rem; }
.who h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 0.4rem; }
.who p:last-child { margin: 0; }
@media (min-width: 600px) { .who { padding: 1.75rem 2rem; } }
/* a group with one job in it: the tile goes the full width, name left, price right */
.menu-tiles > li:only-child { grid-column: 1 / -1; }
.menu-tiles > li:only-child .mtile { flex-direction: row; align-items: center; min-height: 0; gap: 1rem; }
.menu-tiles > li:only-child .mtop { flex: 1 1 auto; padding-right: 0; }
.menu-tiles > li:only-child .mprice { flex: none; flex-direction: column; align-items: flex-end; gap: 0.1rem; padding-right: 0.9rem; }
/* on a wide screen the hero sits centred, as the site's hero always has */
@media (min-width: 900px) {
  .fd-hero .wrap { text-align: center; }
  .fd-hero h1, .fd-hero .lead { margin-inline: auto; }
  .fd-hero .cta-row { justify-content: center; }
  .fd-hero .tiny { justify-content: center; }
}

/* ============================================================================
   SITE-FIX-12 (2026-10-06) · NOTHING A CUSTOMER READS IS UNDER 16 PX.
   The walk-through's W6 check at 390 named 497 elements under 16 px across the
   27 published pages, EN and ES, and 453 at 1440 — so the raise is made in the
   base cascade, not behind a phone-only query: one size, both widths, one
   source of truth. Every rule below is a SIZE only. No colour, no font family,
   no weight, no letter-spacing and no word is changed anywhere: the small print
   is still the small print by its muted colour, its uppercase, its tracking and
   its weight — the three marks it already carried — and never by going under 16.
   A rule here repeats its own selector exactly as the rule above it is written,
   so it wins on source order alone; a media query adds no specificity, which is
   why the three @media sizes further up (.mtile .minc, .ch-label, .ch-sub) are
   beaten by the plain selectors below.
   ========================================================================== */

/* the header, the promise strip, the kicker */
.nav-box { font-size: 1rem; }           /* the hidden menu checkbox: a control at 13.3px */
.nav-btn { font-size: 1rem; }
.promise { font-size: 1rem; }
.kicker { font-size: 1rem; }
.hero .sub { font-size: 1rem; }

/* tiles, cards, lists */
.tile p { font-size: 1rem; }
.tile .lic { font-size: 1rem; }
.fine { font-size: 1rem; }
.portrait figcaption { font-size: 1rem; }
.price small { font-size: 1rem; }
.price .per { font-size: 1rem; }
.cond { font-size: 1rem; }
.inc span { font-size: 1rem; }
.job .where { font-size: 1rem; }
.shots h3 { font-size: 1rem; }
.shot figcaption { font-size: 1rem; }
.strip-empty { font-size: 1rem; }
small { font-size: 1rem; }

/* the form: the photo field, the drywall intake, the wizard */
.field.file::file-selector-button { font-size: 1rem; }
.pix .nm { font-size: 1rem; }
.req .hint { font-size: 1rem; }
.intake .area .q { font-size: 1rem; }
.intake .exact { font-size: 1rem; }
.req .gate { font-size: 1rem; }
.req .guide { font-size: 1rem; }
.intake2 .v2hint { font-size: 1rem; }
.intake2 .v2pair { font-size: 1rem; }
.intake2 .v2need { font-size: 1rem; }

/* "When could we come?" — the days, the blocks, the picks, the consent */
.req .wday .wdow { font-size: 1rem; }
.req .wday .whas { font-size: 1rem; }
.req .wblock .wbon { font-size: 1rem; }
.wfull { font-size: 1rem; }
.wcount { font-size: 1rem; }
.req .wpick .wpn { font-size: 1rem; }
.req .wpick .wpt { font-size: 1rem; }
.req .wpick .wpx { font-size: 1rem; }
.req .wconsent .v2opt { font-size: 1rem; }
.req .wprivacy { font-size: 1rem; }
.intake2 .v2contact .v2sub { font-size: 1rem; }
.intake2 .v2contact .v2optional { font-size: 1rem; }
/* the legal line under the consent box: the same words, at a size a thumb can read */
.req .wconsent .wlegal { font-size: 1rem; }
.wsum dt { font-size: 1rem; }
.sent .sent-h { font-size: 1rem; }

/* the chooser, the questions, the address card, the review */
.req .ch-tap .ch-sub { font-size: 1rem; }
.ch-small-q { font-size: 1rem; }
.ch-photo-ask li { font-size: 1rem; }
.uaddr-line { font-size: 1rem; }
.uaddr-note { font-size: 1rem; }
.ch-rtitle { font-size: 1rem; }
.ch-redit { font-size: 1rem; }
.ch-rlist li { font-size: 1rem; }
.ch-got li { font-size: 1rem; }

/* the front door */
.fd .fine { font-size: 1rem; }
.fd-hero .tiny { font-size: 1rem; }
.menu-group h3 { font-size: 1rem; }
.mtile .minc { font-size: 1rem; }
.mtile .mfrom { font-size: 1rem; }
.mtile .munit { font-size: 1rem; }
.day .l { font-size: 1rem; }
.day .h { font-size: 1rem; }
.fd-note { font-size: 1rem; }

/* the phone number in the header was shrunk below 760 only; from 760 up the rule
   above already says `inherit`, and that is left exactly as it is. */
@media (max-width: 759px) { .call .num { font-size: 1rem; } }

/* the three sizes the chooser's own phone query shrinks. Above 480 those rules do
   not apply at all, so they are answered inside the same query and nothing wider
   than 480 is touched by this block. */
@media (max-width: 480px) {
  .ch-hint { font-size: 1rem; }
  .req .ch-tiles .ch-label { font-size: 1rem; }
  .req .ch-tiles .ch-sub { font-size: 1rem; }
}