/* Port Arthur Demolition / site.css
   Direction: "The printed annual" (tasteskill editorial-report). Read DESIGN.md before extending.
   Mobile-first. One ground (bone), one ink, one accent (slate, on actions only),
   red opens and closes the page, mustard and maroon are whole fields. Square corners everywhere. */

/* ---------- 1. Tokens ---------- */
:root {
  --bg: #e2dccf;          /* bone: the paper */
  --surface: #d7d0c1;     /* one tone step from the paper */
  --paper: #efeae0;       /* form fields and the quote sheet's inputs */
  --ink: #2a1110;
  --ink-2: #3a1a17;       /* second near-black for alternating dark rows */
  --muted: #5e4741;
  --accent: #4a6f84;      /* slate: buttons only */
  --accent-hover: #3b5b6d;
  --accent-ink: #ffffff;
  --red: #dc1928;   --red-ink: #ffffff;
  --maroon: #952625; --maroon-ink: #ffffff;
  --mustard: #e0a912; --mustard-ink: #2a1110;

  --font-display: "Imbue", "Didot", "Bodoni 72", Georgia, serif;
  --font-text: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* The five sizes. Nothing else. */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.2rem + 3.8vw, 4.75rem);
  --step-display: clamp(4.25rem, 0.6rem + 18vw, 13rem);

  --m: clamp(20px, 2.4vw, 36px);        /* the one pair of outer margins */
  --gap: clamp(16px, 1.8vw, 28px);      /* grid gutter */
  --section: clamp(96px, 11vw, 200px);  /* space between sections on one field */
  --measure: 38ch;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --focus: var(--ink);

  /* Lead form engine (sites/_shared/lead.css) */
  --lead-accent: var(--accent);
  --lead-accent-ink: #ffffff;
  --lead-fg: var(--ink);
  --lead-muted: var(--muted);
  --lead-border: rgb(42 17 16 / 0.3);
  --lead-surface: transparent;
  --lead-field-bg: var(--paper);
  --lead-error: #a3121c;
  --lead-radius: 0px;
  --lead-gap: 1rem;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: var(--step-body); line-height: 1.55;
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p, ul, ol, figure, dl { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.14em; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bg); }
table { border-collapse: collapse; }

.display {
  font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.9;
  text-wrap: balance;
}
.lead { font-size: var(--step-lead); line-height: 1.4; }
.small { font-size: var(--step-small); line-height: 1.5; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--m); top: -200px; z-index: 100; background: var(--ink); color: var(--bg); padding: 0.75rem 1rem; }
.skip:focus { top: 12px; }
.wrap { padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* Fields: a whole section in one flat colour. */
.field-red { background: var(--red); color: var(--red-ink); --focus: #ffffff; }
.field-maroon { background: var(--maroon); color: var(--maroon-ink); --focus: #ffffff; }
.field-mustard { background: var(--mustard); color: var(--mustard-ink); }
.field-ink { background: var(--ink); color: var(--bg); --focus: var(--mustard); }
.field-surface { background: var(--surface); }
.field-slate { background: var(--accent); color: #ffffff; --focus: #ffffff; }

/* ---------- 3. Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 52px; padding: 0 1.5rem; border: 0; border-radius: 0;
  background: var(--accent); color: var(--accent-ink);
  font: 500 var(--step-body)/1.1 var(--font-text); text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color 0.2s ease, transform 0.15s var(--ease-out);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(2px); }
.btn--paper { background: var(--bg); color: var(--ink); }
.btn--paper:hover { background: #ffffff; }
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.arrow-link { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; font-weight: 500; }
.arrow-link::after { content: "\2192"; transition: transform 0.2s var(--ease-out); }
.arrow-link:hover::after { transform: translateX(4px); }

/* ---------- 4. Header ---------- */
.site-header { position: relative; z-index: 30; background: var(--bg); color: var(--ink); }
body:has(.hero) .site-header, body:has(.masthead) .site-header { background: var(--red); color: var(--red-ink); --focus: #ffffff; }
.site-header__bar { display: flex; align-items: center; gap: 1rem; min-height: 72px; padding: 12px var(--m); }
.wordmark {
  font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-lead); line-height: 1;
  letter-spacing: 0.01em; text-decoration: none; margin-right: auto; padding-block: 10px;
}
.nav-main { display: none; }
.nav-main ul { display: flex; gap: clamp(16px, 2vw, 32px); list-style: none; padding: 0; margin: 0; }
.nav-main a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-small); font-weight: 500; text-decoration: none; }
.nav-main a:hover { text-decoration: underline; }
.site-header__cta { display: none; min-height: 44px; padding: 0 1.1rem; font-size: var(--step-small); }
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.25rem; font-weight: 500; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: "+"; margin-left: 0.45em; font-size: 1.2em; line-height: 1; }
.nav-menu[open] summary::after { content: "\2212"; }
.nav-menu nav { position: absolute; right: calc(-1 * var(--m)); top: calc(100% + 12px); width: min(88vw, 340px); background: var(--ink); color: var(--bg); box-shadow: 0 18px 40px rgb(0 0 0 / 0.28); --focus: var(--mustard); } /* taste-skill-ignore: real overlay menu */
.nav-menu ul { list-style: none; margin: 0; padding: 8px 0; }
.nav-menu li a { display: flex; align-items: center; min-height: 52px; padding: 0 20px; text-decoration: none; font-size: var(--step-body); }
.nav-menu li:nth-child(even) a { background: var(--ink-2); }
@media (min-width: 960px) {
  .nav-main, .site-header__cta { display: inline-flex; }
  .nav-menu { display: none; }
  .site-header__bar { gap: clamp(20px, 2.6vw, 44px); }
}

/* ---------- 5. Home hero: narrow talk, wide headline (red field) ---------- */
.hero { background: var(--red); color: var(--red-ink); --focus: #ffffff; padding-top: clamp(16px, 4vh, 48px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); }
.hero__title { font-size: var(--step-display); line-height: 0.86; letter-spacing: -0.015em; white-space: nowrap; }
.hero__talk { margin-top: 28px; }
.hero__lede { font-size: var(--step-lead); line-height: 1.35; max-width: 24ch; }
.hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 28px; }
.hero__note { margin-top: 20px; font-size: var(--step-small); max-width: 34ch; }
.hero__media { position: relative; margin: 48px calc(-1 * var(--m)) 0; }
.hero__frame { overflow: clip; aspect-ratio: 4 / 3; }
.hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: grayscale(1) contrast(1.06); }
.stamp {
  position: absolute; z-index: 2; left: var(--m); top: 0; transform: translateY(-50%);
  width: min(60vw, 280px); padding: 16px 18px 18px; background: var(--mustard); color: var(--mustard-ink);
}
.stamp__figure { display: block; font-family: var(--font-display); font-size: var(--step-head); line-height: 0.85; }
.stamp__text { display: block; margin-top: 8px; font-size: var(--step-small); line-height: 1.4; }
@media (min-width: 760px) {
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero__title { grid-column: 5 / -1; grid-row: 1; padding-top: clamp(8px, 4vh, 40px); }
  .hero__title { font-size: min(var(--step-display), 14.6vw); }
  .hero__talk { grid-column: 1 / 5; grid-row: 1 / span 2; margin-top: 0; padding-top: clamp(140px, 30vh, 300px); padding-bottom: 40px; }
  .hero__actions { align-items: flex-start; }
  .hero__media { grid-column: 5 / -1; grid-row: 2; margin: clamp(48px, 9vh, 96px) 0 0; }
  .hero__frame { aspect-ratio: 16 / 9; }
  .stamp { left: 0; width: 280px; }
}
@media (min-width: 760px) and (max-width: 1100px) {
  .hero__title { grid-column: 1 / -1; }
  .hero__talk { grid-column: 1 / 7; grid-row: 2; padding-top: 40px; }
  .hero__media { grid-column: 7 / -1; grid-row: 2; }
}

/* Masked line reveal (signature move) */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines [data-line] { display: block; }

/* ---------- 6. Services: statement cell + dark rows ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); }
.split__cell { background: var(--surface); padding: 72px var(--m) 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 70svh; }
.zig { font-size: var(--step-head); }
.zig span { display: block; }
.zig span:nth-child(2) { text-align: right; }
.split__foot { display: flex; flex-direction: column; gap: 24px; }
.split__foot p { max-width: 30ch; }
.rows { list-style: none; margin: 0; padding: 0; background: var(--ink); color: var(--bg); --focus: var(--mustard); }
.row { position: relative; padding: 28px var(--m); transition: background-color 0.2s ease; }
.row:nth-child(odd) { background: var(--ink); }
.row:nth-child(even) { background: var(--ink-2); }
.row:hover { background: #4a221e; }
.row__title { font-size: var(--step-lead); line-height: 1; letter-spacing: 0; }
.row__title a { text-decoration: none; }
.row__title a::after { content: ""; position: absolute; inset: 0; }
.row__title a:focus-visible { outline: none; }
.row:has(a:focus-visible) { outline: 3px solid var(--mustard); outline-offset: -3px; }
.row p { margin-top: 10px; font-size: var(--step-small); line-height: 1.5; }
.row__terms { list-style: none; padding: 0; margin: 8px 0 0; font-size: var(--step-small); color: #cbbfb0; }
.row__terms li { display: inline; }
.row__terms li + li::before { content: ", "; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split__cell { min-height: 90svh; padding: 96px var(--m) 56px; }
  .split__foot { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .rows { display: grid; grid-auto-rows: 1fr; min-height: 90svh; }
  .row { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 20px; align-items: start; padding: 28px var(--m) 28px 28px; }
  .row p, .row__terms { margin-top: 0; }
  .row__terms li { display: block; }
  .row__terms li + li::before { content: none; }
}

/* ---------- 7. How it works: lines that step across ---------- */
.stairs { padding-block: var(--section); }
.stairs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.stairs__line { font-size: clamp(2.25rem, 0.8rem + 4.6vw, 4.75rem); line-height: 0.95; text-wrap: balance; }
.stairs__list p { margin-top: 12px; max-width: 34ch; color: var(--muted); }
.stairs__list li:last-child .stairs__line { color: var(--accent); }
.stairs__list li:nth-child(2) { padding-left: 6vw; }
.stairs__list li:nth-child(3) { padding-left: 12vw; }
.stairs__list li:nth-child(4) { padding-left: 18vw; }
.stairs__more { margin-top: 48px; }
.areas__more { margin-top: 24px; }
@media (min-width: 760px) {
  .stairs__list { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; }
  .stairs__list li { grid-column: var(--start) / -1; padding-left: 0 !important; }
}

/* ---------- 8. Local context: headline crossing onto a photograph ---------- */
.local { padding-block: var(--section); row-gap: 28px; }
.local__title { font-size: var(--step-head); line-height: 1; }
.local__lede { font-size: var(--step-lead); line-height: 1.4; max-width: 30ch; }
.facts { list-style: none; padding: 0; display: grid; gap: 22px; max-width: 44ch; }
.facts li { padding-left: 18px; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--red); }
.facts .src { display: block; margin-top: 4px; font-size: var(--step-small); color: var(--muted); }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.photo figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--muted); max-width: 52ch; }
.local__big { margin-inline: calc(-1 * var(--m)) 0; }
.local__big img { aspect-ratio: 4 / 5; }
.local__small { width: 72%; }
.local__small img { aspect-ratio: 9 / 10; }
@media (min-width: 760px) {
  .local { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .local__title { grid-column: 1 / 9; grid-row: 1; font-size: clamp(3rem, 0.8rem + 5.6vw, 6rem); padding-top: 4vh; position: relative; z-index: 1; }
  .local__big { grid-column: 7 / -1; grid-row: 1 / span 4; margin: clamp(120px, 16vw, 220px) calc(-1 * var(--m)) 0 0; }
  .local__lede { grid-column: 1 / 6; grid-row: 2; margin-top: 24px; }
  .facts { grid-column: 1 / 6; grid-row: 3; margin-top: 16px; }
  .local__small { grid-column: 1 / 5; grid-row: 4; width: auto; margin-top: 48px; }
}

/* ---------- 9. Mosaic: photographs and flat tiles, gutterless ---------- */
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
.mosaic > * { min-width: 0; }
.mosaic__photo { aspect-ratio: 1 / 1; overflow: clip; }
.mosaic__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.mosaic__tile { padding: clamp(20px, 2.6vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.mosaic__tile--wide { grid-column: 1 / -1; }
.mosaic__tile h2, .mosaic__tile h3 { font-size: var(--step-head); }
.mosaic__tile h3 { font-size: var(--step-lead); line-height: 1; }
.mosaic__tile p { max-width: 36ch; }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mosaic__tile--wide { grid-column: auto; }
  .mosaic__tile, .mosaic__photo { aspect-ratio: 1 / 1; }
  .mosaic__tile h2 { font-size: clamp(2rem, 0.6rem + 2.4vw, 3.25rem); }
}

/* ---------- 10. Notice page: one large figure + the working-day calculator ---------- */
.notice { padding-block: clamp(72px, 9vw, 160px); }
.notice__figure { font-size: clamp(10rem, 2rem + 34vw, 34rem); line-height: 0.78; letter-spacing: -0.04em; }
.notice__body { display: grid; gap: 20px; max-width: 64ch; }
.notice__body h2 { font-size: var(--step-head); }
.notice a { font-weight: 500; }
@media (min-width: 760px) {
  .notice .grid { align-items: start; }
  .notice__figure { grid-column: 1 / 6; }
  .notice__body { grid-column: 6 / -1; }
}
.calc { margin-top: 12px; display: grid; gap: 16px; }
.calc__rule { font-weight: 500; max-width: 46ch; }
.calc__ui { display: grid; gap: 14px; }
.calc__ui[hidden] { display: none; }
.calc label { font-weight: 600; }
.calc input[type="date"] {
  font: inherit; color: var(--ink); background: var(--paper); border: 0; border-radius: 0;
  min-height: 52px; padding: 0 14px; width: min(100%, 300px);
}
.calc__out { font-size: var(--step-lead); line-height: 1.35; }
.calc__out strong { font-weight: 600; }
.calc__strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.calc__strip li { background: rgb(42 17 16 / 0.12); padding: 8px 8px 10px; font-size: var(--step-small); line-height: 1.25; min-height: 58px; }
.calc__strip li b { display: block; font-weight: 600; }
.calc__strip li.is-file { background: var(--ink); color: var(--bg); }
.calc__strip li.is-start { background: var(--accent); color: #ffffff; grid-column: span 5; }
.calc__fine { font-size: var(--step-small); }
@media (min-width: 1100px) {
  .calc__strip { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .calc__strip li.is-start { grid-column: auto; }
}

/* ---------- 11. Prices: a large table ---------- */
.prices { padding-block: var(--section); }
.price-table { width: 100%; font-size: var(--step-body); }
.price-table th, .price-table td { text-align: left; vertical-align: top; padding: 18px 16px; }
.price-table thead th { vertical-align: bottom; }
.price-table caption { text-align: left; }
.price-table .plan { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: var(--step-head); line-height: 0.95; }
.price-table .plan small { display: block; margin-top: 10px; font-family: var(--font-text); text-transform: none; font-size: var(--step-small); line-height: 1.4; letter-spacing: 0; }
.price-table tbody tr:nth-child(odd) { background: var(--surface); }
.price-table tbody th { font-weight: 500; color: var(--muted); }
.price-table .is-yours { background: var(--mustard); color: var(--mustard-ink); }
.price-table tbody tr:nth-child(odd) .is-yours { background: #d69f08; }
.prices__drivers { display: grid; gap: 24px; margin-top: 56px; }
.prices__drivers ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
@media (max-width: 759px) {
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; width: 100%; }
  .price-table thead, .price-table thead tr { display: block; }
  .price-table thead th:not(:first-child) { display: none; }
  .price-table thead th { padding: 0 0 8px; }
  .price-table tbody tr { background: none !important; padding: 0; }
  .price-table tbody th { padding: 18px 0 2px; }
  .price-table td { padding: 2px 16px 6px; }
  .price-table td::before { content: attr(data-label); display: block; font-size: var(--step-small); font-weight: 600; padding-top: 10px; }
  .price-table td.is-yours { padding-bottom: 14px; }
  .price-table td:empty { display: none; }
}
@media (min-width: 760px) {
  .prices__drivers { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .prices__drivers > :first-child { grid-column: 1 / 6; }
  .prices__drivers > :last-child { grid-column: 6 / -1; columns: 2 18ch; column-gap: var(--gap); }
  .prices__drivers ul { display: block; }
  .prices__drivers li { margin-bottom: 8px; break-inside: avoid; }
}
.price-table .cell-btn { padding-top: 24px; }

/* ---------- 12. FAQ: a band per question ---------- */
.faq-head { min-height: 34svh; display: flex; align-items: flex-end; padding: 48px var(--m) 36px; }
.faq-head h2 { font-size: clamp(3rem, 1rem + 8vw, 8rem); }
.band { padding: 36px var(--m) 40px; display: grid; gap: 14px; }
.band:nth-child(odd) { background: var(--bg); }
.band:nth-child(even) { background: var(--surface); }
.band h3 { font-family: var(--font-text); font-weight: 600; font-size: var(--step-lead); line-height: 1.25; max-width: 32ch; }
.band__a { max-width: 62ch; }
.band__a p + p { margin-top: 0.8em; }
@media (min-width: 760px) {
  .band { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-block: 56px; }
  .band h3 { grid-column: 1 / 6; }
  .band__a { grid-column: 7 / -1; }
}

/* ---------- 13. Service areas: tabs + banded list ---------- */
.areas { padding-block: var(--section); }
.areas__head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; }
.areas__head h2 { font-size: var(--step-head); }
.areas__head h2 span { display: block; }
.areas__head h2 span:first-child { color: var(--muted); }
.areas__body { display: grid; gap: 16px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tabs[hidden] { display: none; }
.tab {
  flex: 1 0 auto; min-height: 56px; padding: 8px 14px; border: 0; border-radius: 0; cursor: pointer; text-align: left;
  background: var(--surface); color: var(--ink); font: 500 var(--step-small)/1.25 var(--font-text);
  transition: background-color 0.2s ease;
}
.tab:hover { background: #cbc3b2; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.tab small { display: block; font-size: var(--step-small); font-weight: 400; opacity: 0.85; }
.panel h3 { font-size: var(--step-lead); margin-bottom: 10px; }
.panel + .panel { margin-top: 32px; }
.js .tabs:not([hidden]) ~ .panels .panel + .panel { margin-top: 0; }
.js .tabs:not([hidden]) ~ .panels .panel h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.town-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.town { display: grid; gap: 4px; padding: 16px 18px; background: var(--surface); }
.town:nth-child(even) { background: #cdc5b5; }
.town__name { font-size: var(--step-lead); line-height: 1.1; font-weight: 500; }
.town__note { font-size: var(--step-small); color: var(--muted); }
.town__county { font-size: var(--step-small); font-weight: 500; }
@media (min-width: 760px) {
  .areas__head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .areas__body { grid-template-columns: 180px minmax(0, 1fr); gap: 40px; align-items: start; }
  .tabs { flex-direction: column; overflow: visible; }
  .tab { min-height: 64px; flex: none; }
  .town { grid-template-columns: 28% minmax(0, 1fr) auto; align-items: center; gap: 20px; min-height: 76px; padding: 12px 20px; }
  .town__county { text-align: right; }
}

/* ---------- 14. Close: the idea again, inverted, with the quote form on a paper sheet ---------- */
.close { padding-block: clamp(80px, 10vw, 180px); row-gap: 40px; }
.close__title { font-size: clamp(3.5rem, 0.6rem + 11vw, 10rem); line-height: 0.88; }
.close__text { display: grid; gap: 18px; align-content: start; max-width: 40ch; }
.close__text a { color: var(--bg); }
.sheet { background: var(--bg); color: var(--ink); padding: clamp(20px, 3vw, 44px); --focus: var(--ink); margin-inline: calc(-1 * var(--m)); }
.sheet__note { margin-top: 18px; font-size: var(--step-small); color: var(--muted); }
@media (min-width: 760px) {
  .close .grid { row-gap: 56px; }
  .close__title { grid-column: 1 / -1; }
  .close__text { grid-column: 1 / 6; }
  .sheet { grid-column: 6 / -1; margin-inline: 0; }
}

/* ---------- 15. Lead form restyle ---------- */
.lead-form { font-size: var(--step-body); }
.lead-progress-track { height: 6px; border-radius: 0; background: rgb(42 17 16 / 0.14); }
.lead-progress-bar { background: var(--ink); }
.lead-step-count { font-size: var(--step-small); color: var(--muted); }
.lead-step-title { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: var(--step-lead); line-height: 1; margin-bottom: 0.4rem; }
.lead-step-intro { font-size: var(--step-small); }
.lead-label { font-size: var(--step-small); font-weight: 600; }
.lead-field input:not([type=radio]):not([type=checkbox]), .lead-field select, .lead-field textarea { border-color: transparent; border-bottom: 2px solid rgb(42 17 16 / 0.35); background: var(--paper); min-height: 48px; }
.lead-field input:focus-visible, .lead-field select:focus-visible, .lead-field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; border-bottom-color: var(--ink); }
.lead-tile-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 4px; }
.lead-tile { border: 0; background: var(--paper); min-height: 64px; padding: 12px 14px; transition: background-color 0.15s ease, color 0.15s ease; }
.lead-tile:hover { background: #ffffff; }
.lead-tile-grid input:checked + .lead-tile { background: var(--ink); color: var(--bg); box-shadow: none; } /* taste-skill-ignore: removes engine shadow */
.lead-tile-grid input:checked + .lead-tile .lead-tile-hint { color: #cbbfb0; }
.lead-tile-grid input:focus-visible + .lead-tile { outline: 3px solid var(--ink); outline-offset: 2px; }
.lead-tile-text { font-weight: 500; }
.lead-tile-hint { font-size: var(--step-small); }
.lead-invalid .lead-tile { box-shadow: inset 0 0 0 2px var(--lead-error); } /* taste-skill-ignore: form error state */
.lead-btn { border-radius: 0; min-height: 52px; border: 0; }
.lead-back { background: var(--surface); }
.lead-back:hover { background: #cbc3b2; }
.lead-next:hover, .lead-submit:hover { background: var(--accent-hover); }
.lead-btn:active { transform: translateY(2px); }
.lead-done-title { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: var(--step-head); line-height: 0.95; }
.lead-done-text { margin: 12px 0 18px; }
.lead-done-faster { font-weight: 600; margin-bottom: 10px; }

/* ---------- 16. Inner pages: masthead (image band + title on the axis) ---------- */
.masthead { background: var(--red); color: var(--red-ink); --focus: #ffffff; padding-bottom: clamp(48px, 7vw, 112px); }
.masthead__band { height: clamp(220px, 40vh, 460px); overflow: clip; }
.masthead__band img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.masthead__grid { padding-top: clamp(28px, 4vw, 56px); row-gap: 20px; }
.crumbs { font-size: var(--step-small); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4em; }
.crumbs li + li::before { content: "/"; margin-right: 0.4em; }
.crumbs a { display: inline-block; padding-block: 12px; }
.masthead h1 { font-size: clamp(3rem, 0.4rem + 8vw, 8rem); line-height: 0.9; }
.masthead--long h1 { font-size: clamp(2.75rem, 0.4rem + 6.6vw, 6.75rem); } /* H1 lines of 19-23 characters */
.masthead__stand { font-size: var(--step-lead); line-height: 1.38; max-width: 40ch; }
.masthead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 8px; }
@media (min-width: 760px) {
  .crumbs { grid-column: 1 / 5; grid-row: 1 / span 2; padding-top: 1.2em; }
  .masthead h1, .masthead__stand, .masthead__actions { grid-column: 6 / -1; }
  .masthead--quote h1, .masthead--quote .masthead__stand { grid-column: 1 / -1; }
}

/* Text page: title on the axis, side note in the left zone, body in columns */
.textpage { padding-block: var(--section); row-gap: 28px; }
.textpage__side { color: var(--muted); font-size: var(--step-small); display: grid; gap: 16px; align-content: start; }
.textpage__side strong { color: var(--ink); }
.textpage__side .photo img { aspect-ratio: 4 / 5; }
.textpage h2 { font-size: var(--step-head); }
.textpage__body { display: grid; gap: 1em; }
.textpage__body h3 { font-family: var(--font-text); font-weight: 600; font-size: var(--step-lead); line-height: 1.25; margin-top: 0.8em; }
.textpage__body > p, .textpage__body > ul, .textpage__body > ol { max-width: 62ch; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 4px; }
.steps li { background: var(--surface); padding: 18px 20px 20px; display: grid; gap: 4px; }
.steps li:nth-child(even) { background: #cdc5b5; }
.steps b { font-weight: 600; font-size: var(--step-body); }
.cols-2 { display: grid; gap: 24px; }
.cols-2 > div { display: grid; gap: 8px; align-content: start; }
.cols-2 h3 { margin-top: 0 !important; }
@media (min-width: 760px) {
  .textpage { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .textpage__side { grid-column: 1 / 5; grid-row: 1 / span 2; padding-top: 0.6em; }
  .textpage h2, .textpage__body { grid-column: 6 / -1; }
  .cols-2 { grid-template-columns: 1fr 1fr; column-gap: var(--gap); row-gap: 32px; }
}

/* Checklist page (surface field) */
.checklist { padding-block: var(--section); }
.checklist h2 { font-size: var(--step-head); margin-bottom: 40px; max-width: 24ch; }
.checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.checklist li { background: var(--bg); padding: 18px 20px 18px 56px; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 20px; top: 1.45em; width: 18px; height: 10px; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red); transform: translateY(-50%) rotate(-45deg); }
.checklist li b { display: block; font-weight: 600; }
@media (min-width: 760px) {
  .checklist ul { grid-template-columns: 1fr 1fr; }
}

/* Related services list */
.related { padding-block: var(--section); }
.related h2 { font-size: var(--step-head); margin-bottom: 32px; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.related li a { display: grid; gap: 4px; padding: 22px 20px; background: var(--surface); text-decoration: none; transition: background-color 0.2s ease; }
.related li:nth-child(even) a { background: #cdc5b5; }
.related li a:hover { background: var(--ink); color: var(--bg); }
.related li a b { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: var(--step-lead); line-height: 1; }
.related li a span { font-size: var(--step-small); }
@media (min-width: 760px) {
  .related .grid > h2 { grid-column: 1 / 6; }
  .related .grid > ul { grid-column: 6 / -1; }
  .related li a { grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
}

/* Quote page */
.quote-head { padding-top: clamp(20px, 3vw, 48px); }
.quote-head h1 { font-size: clamp(3.25rem, 0.4rem + 8.6vw, 9rem); line-height: 0.88; margin-top: 8px; }
.quote-page { padding-block: clamp(48px, 6vw, 96px) var(--section); row-gap: 40px; }
.quote-page .sheet { margin-inline: calc(-1 * var(--m)); background: var(--surface); }
.next-steps { list-style: none; counter-reset: n; margin: 0; padding: 0; display: grid; gap: 4px; }
.next-steps li { background: var(--surface); padding: 18px 20px; display: grid; gap: 4px; }
.next-steps li:nth-child(even) { background: #cdc5b5; }
.next-steps b { font-weight: 600; }
.quote-page__side { display: grid; gap: 32px; align-content: start; }
.quote-page__side h2 { font-size: var(--step-lead); font-family: var(--font-display); text-transform: uppercase; line-height: 1; }
.alt-contact { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) {
  .quote-page { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .quote-page .sheet { grid-column: 6 / -1; grid-row: 1; margin-inline: 0; }
  .quote-page__side { grid-column: 1 / 5; grid-row: 1; }
}

/* ---------- 17. Footer: columns above, wordmark below (red field) ---------- */
.site-footer { background: var(--red); color: var(--red-ink); --focus: #ffffff; min-height: 80svh; display: grid; grid-template-rows: auto 1fr auto auto; padding: 48px var(--m) 20px; row-gap: 32px; }
.site-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px var(--gap); font-size: var(--step-small); }
.site-footer__col { display: grid; gap: 10px; align-content: start; }
.site-footer__col:nth-child(3), .site-footer__col:nth-child(4) { grid-column: 1 / -1; }
.site-footer__h { font-family: var(--font-text); font-size: var(--step-small); font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; }
.site-footer__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.site-footer__buttons .btn { min-height: 48px; font-size: var(--step-small); }
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.site-footer__mark { grid-row: 3; align-self: end; }
.site-footer__mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.site-footer__mark text { font-family: var(--font-display); fill: currentColor; }
.mark-one { display: none !important; }
.site-footer__legal { grid-row: 4; font-size: var(--step-small); }
@media (min-width: 760px) {
  .site-footer__cols { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .site-footer__col { grid-column: span 3 !important; }
  .mark-one { display: block !important; }
  .mark-two { display: none !important; }
}

/* ---------- 18. Motion (transform and opacity only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise 700ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 420ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .hero__frame img, .masthead__band img { animation: settle 2400ms var(--ease-soft) both; }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
}