/* Components for briannecrawford.com. Every value comes from css/tokens.css:
 * no color (bin/check.sh (g)), and no font size, weight, line height, letter
 * spacing, space, corner or transition (bin/check.sh (o)). Geometry that
 * belongs to one component (a width, an icon size) stays here.
 *
 * Layout: a drawing set. Inscriptional headlines, a photograph framed by a
 * hairline, asymmetric two-column sections, a title-block footer.
 *
 * Map of the classes, in page order:
 *   .wrap .label .btn .text-link              shared
 *   .skip-link .visually-hidden               accessibility
 *   .site-head .mark .monogram .nav           header (every page)
 *   .hero .hero-copy .lede .cta-row .hero-photo   home hero
 *   .towns                                    the service-area strip
 *   section.block .split .sec-head .prose    section scaffolding
 *   .why-intro .why-grid .why-item .math     why it matters, the numbers
 *   .services-grid .service .ico             what comes off your plate
 *   .offers .offer .fees .who                 ways to work together
 *   .tiles .tile .plan                        project types
 *   .process .phases .phase                   how a project runs
 *   .about-facts .fact .principle .portrait   about
 *   .contact .channels .channel .copy         contact channels
 *   .title-block .tb-grid .tb-cell .foot-nav  footer (every page)
 *   .page-head .article .faq .compare .table-wrap   secondary pages
 *   .lead-form .field .hp .form-note .form-error .form-success   the form
 */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--s-md);
  font-weight: var(--w-book);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
h1, h2, h3 { font-family: var(--display); font-weight: var(--w-regular); text-wrap: balance; margin: 0; line-height: var(--lh-heading); letter-spacing: var(--track-tight); }
p { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--patina-ink); outline-offset: 3px; border-radius: var(--radius-sm); }

.label {
  font-family: var(--mono);
  font-size: var(--s-xs);
  font-weight: var(--w-regular);
  letter-spacing: var(--track-label-wide);
  text-transform: uppercase;
  color: var(--patina-ink);
}

/* Header */
.site-head { border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--bg) 92%, transparent); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding-block: var(--sp-4); flex-wrap: wrap; }
.mark { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.monogram { width: 3rem; height: 3rem; display: block; flex: none; }
.monogram .roof { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.monogram .letters { fill: var(--ink); }
.monogram .ground { fill: none; stroke: var(--patina); stroke-width: 1.5; stroke-linecap: round; }
.mark-text { display: flex; flex-direction: column; line-height: var(--lh-snug); }
.mark-name { font-family: var(--display); font-size: var(--s-lg); font-weight: var(--w-medium); letter-spacing: var(--track-snug); }
.mark-sub { font-size: var(--s-2xs); color: var(--ink-soft); letter-spacing: var(--track-label-wide); text-transform: uppercase; }
.nav { display: flex; gap: var(--gap-grid); flex-wrap: wrap; }
.nav a { text-decoration: none; font-size: var(--s-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); transition: color var(--dur-fast) var(--ease-curve); display: inline-block; padding-block: var(--sp-1); }
.nav a:hover { color: var(--ink); }

/* Hero */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: center; padding-block: var(--space-hero-top) var(--space-hero-bottom); }
.hero-copy { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.hero h1 { font-size: var(--s-xxl); font-weight: var(--w-light); line-height: var(--lh-display); }
.hero h1 span { display: block; }
.hero h1 em { font-style: italic; color: var(--patina-ink); }
.lede { font-size: var(--s-lg); font-weight: var(--w-light); line-height: var(--lh-relaxed); color: var(--ink-soft); max-width: 31rem; }
.cta-row { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.btn {
  display: inline-block; text-decoration: none;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  padding: var(--sp-4) var(--sp-8); font-size: var(--s-xs); font-weight: var(--w-regular); letter-spacing: var(--track-label); text-transform: uppercase;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.btn:hover { background: var(--patina-ink); border-color: var(--patina-ink); color: var(--on-patina); }
.text-link { font-size: var(--s-xs); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--patina); padding-bottom: var(--sp-1); }
.text-link:hover { color: var(--patina-ink); }

.hero-photo { margin: 0; min-width: 0; position: relative; padding: 0 0 var(--sp-4) var(--sp-4); }
.hero-photo::before { content: ""; position: absolute; left: 0; bottom: 0; right: 1rem; top: 1rem; border: 1px solid var(--patina); }
.hero-photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 35% 50%; }
.drawing { min-width: 0; }
.drawing svg { display: block; width: 100%; height: auto; max-width: 100%; }
.drawing figcaption { margin-top: var(--sp-3); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: var(--sp-2); }
.drawing figcaption span { font-family: var(--mono); font-size: var(--s-2xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); }
.el-line { stroke: var(--line); fill: var(--bg); stroke-width: 0.9; stroke-linejoin: round; }
.el-thin { stroke: var(--line); fill: none; stroke-width: 0.55; }
.el-hatch { stroke: var(--rule); fill: none; stroke-width: 0.8; }
.el-dim { stroke: var(--brass); fill: none; stroke-width: 0.6; }
.el-text { fill: var(--patina-ink); font-family: var(--mono); font-size: var(--s-svg); letter-spacing: var(--track-caps-sm); }
.el-ground { stroke: var(--line); stroke-width: 1.1; }

/* Towns strip */
.towns { border-block: 1px solid var(--rule); background: var(--raised); }
.towns .wrap { display: flex; justify-content: center; text-align: center; padding-block: var(--sp-6); }
.towns .label { color: var(--patina-ink); font-size: var(--s-xs); letter-spacing: var(--track-caps-sm); text-wrap: balance; }
.towns ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }
.towns li { font-family: var(--display); font-size: var(--s-h3); font-style: italic; letter-spacing: var(--track-snug); color: var(--ink); }

/* Sections */
section.block { padding-block: var(--space-section); }
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--gap-columns); }
.split > * { min-width: 0; }
.sec-head { display: flex; flex-direction: column; gap: var(--sp-4); }
.sec-head h2 { font-size: var(--s-xl); font-weight: var(--w-light); }
.prose { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 40rem; color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: var(--w-regular); }

/* Role diagram */
.roles { margin-top: var(--sp-12); display: grid; grid-template-columns: 1fr auto 1fr auto 1.2fr; align-items: center; gap: 0; }
.role { border: 1px solid var(--rule); background: var(--raised); padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.role h3 { font-size: var(--s-h3); font-weight: var(--w-regular); }
.role p { font-size: var(--s-sm); color: var(--ink-soft); line-height: var(--lh-compact); }
.role.is-rep { border-color: var(--patina); background: var(--accent-wash); }
.role.is-rep h3 { color: var(--ink); font-style: italic; }
.role ul { list-style: none; margin: var(--sp-1) 0 0; padding: 0; font-size: var(--s-sm); color: var(--ink-soft); }
.role li { padding-block: var(--sp-1); border-top: 1px solid var(--rule); }
.role li:first-child { border-top: 0; }
.link-line { width: clamp(1.25rem, 3vw, 2.5rem); height: 1px; background: var(--patina); position: relative; }
.link-line::before, .link-line::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: var(--radius-round); background: var(--bg); border: 1px solid var(--patina); }
.link-line::before { left: -4px; }
.link-line::after { right: -4px; }

/* Services */
.services-grid { margin-top: var(--sp-14); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.service { padding: var(--sp-7) var(--sp-7) var(--sp-9) 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--sp-3); }
.service + .service { }
.services-grid .service:not(:nth-child(3n+1)) { padding-left: var(--sp-7); border-left: 1px solid var(--rule); }
.service h3 { font-size: var(--s-h3); font-weight: var(--w-regular); }
.service p { font-size: var(--s-sm); color: var(--ink-soft); }

/* Process */
.process { background: var(--raised); border-block: 1px solid var(--rule); }
.phases { margin-top: var(--sp-14); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid-lg); counter-reset: phase; }
.phase { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--patina); }
.phase .num { font-family: var(--mono); font-size: var(--s-2xs); color: var(--patina-ink); letter-spacing: var(--track-label-wide); text-transform: uppercase; }
.phase h3 { font-size: var(--s-h3); font-weight: var(--w-regular); }
.phase p { font-size: var(--s-sm); color: var(--ink-soft); }

/* About */
.about-facts { margin-top: var(--sp-9); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.fact { display: flex; flex-direction: column; gap: var(--sp-2); border-left: 1px solid var(--patina); padding-left: var(--sp-4); }
.fact .big { font-family: var(--display); font-weight: var(--w-light); font-size: var(--s-stat); line-height: var(--lh-none); color: var(--ink); font-variant-numeric: lining-nums proportional-nums; }
.fact span:last-child { font-size: var(--s-sm); color: var(--ink-soft); line-height: var(--lh-compact); }
.principle {
  margin-top: var(--sp-11); padding-top: var(--sp-8); border-top: 1px solid var(--rule);
  font-family: var(--display); font-style: italic; font-weight: var(--w-light); font-size: var(--s-quote); line-height: var(--lh-quote); color: var(--ink); max-width: 36rem;
}

/* Projects */
.project-list { margin: var(--sp-10) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.project-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--sp-6); padding-block: var(--sp-5); border-bottom: 1px solid var(--rule); }
.project-list strong { font-family: var(--display); font-weight: var(--w-regular); font-size: var(--s-h4); }
.project-list span { color: var(--ink-soft); font-size: var(--s-sm); }

/* Contact */
.contact { background: var(--accent-wash); color: var(--ink); border-top: 1px solid var(--rule); }
.contact .wrap { padding-block: var(--space-band); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; }
.contact .label { color: var(--patina-ink); }
.contact h2 { font-size: var(--s-xxl); font-weight: var(--w-light); margin-top: var(--sp-4); }
.contact h2 em { font-style: italic; color: var(--patina-ink); }
.contact .intro { margin-top: var(--sp-6); max-width: 32rem; color: var(--ink-soft); font-weight: var(--w-light); font-size: var(--s-lg); line-height: var(--lh-relaxed); }
.channels { display: flex; flex-direction: column; gap: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.channel { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding-block: var(--sp-4); border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); flex-wrap: wrap; }
.channel div { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.channel .k { font-family: var(--mono); font-size: var(--s-2xs); letter-spacing: var(--track-label-wide); text-transform: uppercase; color: var(--patina-ink); }
.channel .v { font-family: var(--display); font-size: var(--s-h3); user-select: all; overflow-wrap: anywhere; }
a.v { color: inherit; text-decoration: none; }
a.v:hover { text-decoration: underline; text-decoration-color: var(--patina); text-underline-offset: 0.2em; }
.copy {
  font: var(--w-regular) var(--s-2xs) var(--body); letter-spacing: var(--track-caps); text-transform: uppercase;
  background: transparent; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  padding: var(--sp-2) var(--sp-4); cursor: pointer;
}
.copy:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.note { margin-top: var(--sp-5); font-size: var(--s-sm); color: var(--ink-soft); font-style: italic; }

/* Title-block footer */
.title-block { border-top: 1px solid var(--rule); }
.title-block .wrap { padding-block: var(--sp-7) var(--sp-10); }
.tb-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 0.7fr; border: 1px solid var(--rule); }
.tb-cell { padding: var(--sp-3) var(--sp-4); border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.tb-cell:first-child { border-left: 0; }
.tb-cell .k { font-family: var(--mono); font-size: var(--s-2xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); }
.tb-cell .v { font-size: var(--s-sm); color: var(--ink-soft); }

/* Illustrations */
.ico { width: 3rem; height: 3rem; display: block; }
.ico * { fill: none; stroke: var(--line); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ico .acc { stroke: var(--patina); }
.ico .accf { fill: var(--patina); stroke: none; }
.service { gap: var(--sp-4); }
.svc-txt { display: flex; flex-direction: column; gap: var(--sp-2); }

.plan { margin: var(--sp-4) 0 0; }
.plan svg { display: block; width: 100%; max-width: 40rem; height: auto; }
.plan .wall { stroke: var(--line); stroke-width: 3.5; stroke-linecap: square; fill: none; }
.plan .iwall { stroke: var(--line); stroke-width: 2; stroke-linecap: square; fill: none; }
.plan .thin { stroke: var(--line); stroke-width: 0.6; fill: none; }
.plan .swing { stroke: var(--ink-soft); stroke-width: 0.8; fill: none; stroke-dasharray: 2 2; }
.plan .win-gap { fill: var(--bg); stroke: none; }
.plan .room { fill: var(--ink-soft); font-family: var(--mono); font-size: var(--s-svg); letter-spacing: var(--track-caps-sm); }
.plan .furn { stroke: var(--ink-soft); stroke-width: 0.6; fill: var(--bg); }
.plan .rug { stroke: var(--rule); stroke-width: 0.8; fill: none; stroke-dasharray: 1 2; }
.plan .beam { stroke: var(--ink-soft); stroke-width: 0.8; stroke-dasharray: 8 3 2 3; fill: none; }
.plan .screen { stroke: var(--line); stroke-width: 0.9; fill: none; }
.plan .post { fill: var(--line); }
.plan .narrow { fill: var(--patina); }
.plan .tiny { fill: var(--ink-soft); font-family: var(--mono); font-size: var(--s-svg-sm); letter-spacing: var(--track-open); }
.plan .acc-room { fill: var(--patina); fill-opacity: 0.12; stroke: none; }
.plan figcaption, .tile figcaption { margin-top: var(--sp-2); font-family: var(--mono); font-size: var(--s-2xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); }

.tiles { margin-top: var(--sp-12); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); }
.tile { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.tile .art { background: var(--bg); border: 1px solid var(--rule); padding: var(--sp-5) var(--sp-4) var(--sp-3); }
.tile svg { display: block; width: 100%; height: auto; max-width: 100%; }
.tile h3 { font-size: var(--s-h3); font-weight: var(--w-regular); }
.tile p { font-size: var(--s-sm); color: var(--ink-soft); line-height: var(--lh-compact); }
.tile .ln { stroke: var(--line); stroke-width: 0.9; fill: var(--bg); stroke-linejoin: round; }
.tile .fr { stroke: var(--line); stroke-width: 0.6; fill: none; }
.tile .new { stroke: var(--patina); stroke-width: 1; fill: none; stroke-dasharray: 4 3; stroke-linejoin: round; }
.tile .wave { stroke: var(--patina); stroke-width: 1; fill: none; }
.tile .gnd { stroke: var(--line); stroke-width: 1; }
.tile .tag { fill: var(--patina-ink); font-family: var(--mono); font-size: var(--s-svg-sm); letter-spacing: var(--track-caps); }
.tile .wash { fill: var(--accent-wash); stroke: none; }
.tile .solid { stroke-dasharray: none; }
.tile .dash2 { stroke-dasharray: 2 2; }
.also { margin-top: var(--sp-10); font-family: var(--display); font-style: italic; font-size: var(--s-lg); color: var(--ink-soft); }
.portrait { margin: var(--sp-9) 0 0 var(--sp-3); position: relative; width: min(100%, 20rem); }
.portrait .ph { position: relative; display: block; }
.portrait .ph::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--patina); border-radius: var(--radius-round); inset: -0.75rem; }
.portrait img { position: relative; display: block; width: 100%; height: auto; border-radius: var(--radius-round); }
.portrait figcaption { margin-top: var(--sp-8); font-family: var(--mono); font-size: var(--s-2xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); }
.phase-ico { width: 2.5rem; height: 2.5rem; }

/* Why it matters */
.why-intro { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--gap-columns); align-items: start; }
.why-intro .prose { max-width: 36rem; }
.why-grid { margin-top: var(--sp-12); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid-lg); }
.why-item { border-top: 1px solid var(--patina); padding-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.why-item .k { font-family: var(--mono); font-size: var(--s-2xs); letter-spacing: var(--track-label-wide); text-transform: uppercase; color: var(--patina-ink); }
.why-item h3 { font-size: var(--s-h3); font-weight: var(--w-regular); }
.why-item p { font-size: var(--s-sm); color: var(--ink-soft); }
.math { margin-top: var(--sp-14); background: var(--accent-wash); border: 1px solid var(--rule); padding: var(--pad-panel); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--gap-panel); align-items: center; }
.math .figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
.math .fig { display: flex; flex-direction: column; gap: var(--sp-1); }
.math .big { font-family: var(--display); font-weight: var(--w-light); font-size: var(--s-stat-lg); line-height: var(--lh-none); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.math .fig span:last-child { font-size: var(--s-xs); letter-spacing: var(--track-open); color: var(--ink-soft); max-width: 10rem; }
.math p { color: var(--ink-soft); }
.math p strong { color: var(--ink); font-weight: var(--w-regular); }
.math .fine { margin-top: var(--sp-3); font-size: var(--s-xs); font-style: italic; }
.math-close { grid-column: 1 / -1; border-top: 1px solid color-mix(in srgb, var(--patina) 40%, transparent); padding-top: var(--gap-grid-lg); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--gap-panel); align-items: baseline; }
.math-close h3 { font-size: var(--s-h3); font-weight: var(--w-regular); }
.math-close h3 em { color: var(--patina-ink); }
@media (max-width: 900px) { .math-close { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } }
.sub-head { margin-top: var(--space-band-sm); }

/* Offerings */
.offers { margin-top: var(--sp-12); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.offer { background: var(--bg); padding: var(--pad-panel); display: flex; flex-direction: column; gap: var(--sp-3); }
.offer.is-lead { background: var(--accent-wash); }
.offer .num { font-family: var(--mono); font-size: var(--s-2xs); letter-spacing: var(--track-label-wide); text-transform: uppercase; color: var(--patina-ink); }
.offer h3 { font-size: var(--s-h3-lg); font-weight: var(--w-regular); }
.offer p { font-size: var(--s-sm); color: var(--ink-soft); }
.offer ul { list-style: none; margin: var(--sp-1) 0 0; padding: 0; font-size: var(--s-sm); color: var(--ink-soft); }
.offer li { padding: var(--sp-2) 0; border-top: 1px solid var(--rule); }
.offer .best { margin-top: auto; padding-top: var(--sp-3); font-family: var(--display); font-style: italic; font-size: var(--s-h4); color: var(--ink); }
.fees { margin-top: var(--sp-6); font-size: var(--s-sm); color: var(--ink-soft); max-width: 46rem; }
.who { margin-top: var(--sp-10); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); list-style: none; padding: 0; }
.who li { border-left: 1px solid var(--patina); padding-left: var(--sp-4); font-size: var(--s-sm); color: var(--ink-soft); line-height: var(--lh-compact); }
.who li strong { display: block; font-family: var(--display); font-weight: var(--w-regular); font-size: var(--s-lg); color: var(--ink); margin-bottom: var(--sp-1); }
.refer { margin-top: var(--sp-6); font-size: var(--s-sm); color: var(--ink-soft); max-width: 32rem; border-left: 1px solid var(--patina); padding-left: var(--sp-4); }
@media (max-width: 900px) {
  .why-intro, .math { grid-template-columns: minmax(0, 1fr); }
  .why-grid, .who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .why-grid, .who, .offers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hero .wrap, .split, .contact .wrap { grid-template-columns: minmax(0, 1fr); }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-grid .service:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .services-grid .service:nth-child(even) { padding-left: var(--sp-6); border-left: 1px solid var(--rule); }
  .phases, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roles { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .link-line { width: 1px; height: 1.75rem; justify-self: center; }
  .link-line::before { left: -3px; top: -4px; }
  .link-line::after { right: auto; left: -3px; top: auto; bottom: -4px; }
  .tb-grid { grid-template-columns: 1fr 1fr; }
  .tb-cell:nth-child(3) { border-left: 0; }
  .tb-cell:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .services-grid, .phases, .about-facts { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .services-grid .service:nth-child(even) { padding-left: 0; border-left: 0; }
  .service { padding-right: 0; }
  .project-list li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .nav { gap: var(--sp-4); }
}

/* ------------------------------------------------------------------ */
/* Accessibility                                                        */
/* ------------------------------------------------------------------ */
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--bg); padding: var(--sp-2) var(--sp-4); font-size: var(--s-xs); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; transition: top var(--ease); }
.skip-link:focus { top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
img { max-width: 100%; height: auto; }
body { margin: 0; }
.nav a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--patina); }
.nav .nav-cta { color: var(--patina-ink); }
.nav .nav-cta:hover { color: var(--ink); }

/* Secondary buttons and links */
.btn.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: wait; }

/* ------------------------------------------------------------------ */
/* Secondary pages                                                      */
/* ------------------------------------------------------------------ */
.page-head { border-bottom: 1px solid var(--rule); background: var(--raised); }
.page-head .wrap { padding-block: var(--space-head-top) var(--space-head-bottom); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--gap-columns); align-items: end; }
.page-head h1 { font-size: var(--s-page-title); font-weight: var(--w-light); line-height: var(--lh-display); margin-top: var(--sp-4); }
.page-head h1 em { font-style: italic; color: var(--patina-ink); }
.page-head .lede { margin-top: var(--sp-6); }
.page-head .aside { font-family: var(--display); font-style: italic; font-weight: var(--w-light); font-size: var(--s-aside); line-height: var(--lh-quote); color: var(--ink-soft); border-left: 1px solid var(--patina); padding-left: var(--sp-5); max-width: 26rem; }

.article { max-width: 44rem; color: var(--ink-soft); }
.article h2 { font-size: var(--s-xl); font-weight: var(--w-light); color: var(--ink); margin-top: var(--space-heading); }
.article h2:first-child { margin-top: 0; }
.article h3 { font-size: var(--s-h3); font-weight: var(--w-regular); color: var(--ink); margin-top: var(--sp-8); }
.article p { margin-top: var(--sp-4); }
.article h2 + p, .article h3 + p { margin-top: var(--sp-4); }
.article ul, .article ol { margin: var(--sp-4) 0 0; padding-left: var(--sp-5); }
.article li { margin-top: var(--sp-2); }
.article li::marker { color: var(--patina-ink); }
.article strong, .article b { color: var(--ink); font-weight: var(--w-regular); }
.article a { text-decoration-color: var(--patina); text-underline-offset: 0.2em; }
.article a:hover { color: var(--patina-ink); }
.article .label { display: block; margin-top: var(--space-heading); }
.article .label + h2 { margin-top: var(--sp-3); }
.article table { width: 100%; border-collapse: collapse; margin-top: var(--sp-5); font-size: var(--s-sm); }
.article th, .article td { text-align: left; vertical-align: top; padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom: 1px solid var(--rule); }
.article th { font-family: var(--display); font-weight: var(--w-regular); font-size: var(--s-h4); color: var(--ink); }

/* Definition rows: a term in display type, then the explanation. */
.defs { list-style: none; margin: var(--sp-10) 0 0; padding: 0; border-top: 1px solid var(--ink); }
.defs li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: var(--sp-6); padding-block: var(--sp-5); border-bottom: 1px solid var(--rule); }
.defs strong { font-family: var(--display); font-weight: var(--w-regular); font-size: var(--s-h3); color: var(--ink); line-height: var(--lh-snug); }
.defs span, .defs p { color: var(--ink-soft); font-size: var(--s-sm); }

/* Comparison table: owner's rep, construction manager, architect. */
.table-wrap { margin-top: var(--sp-10); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: var(--s-sm); }
.compare caption { text-align: left; font-family: var(--mono); font-size: var(--s-2xs); letter-spacing: var(--track-label-wide); text-transform: uppercase; color: var(--ink-soft); padding-bottom: var(--sp-4); }
.compare th, .compare td { text-align: left; vertical-align: top; padding: var(--sp-4) var(--sp-5) var(--sp-4) 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
.compare thead th { font-family: var(--display); font-weight: var(--w-regular); font-size: var(--s-h3); color: var(--ink); border-bottom: 1px solid var(--ink); }
.compare thead th.is-rep { color: var(--patina-ink); font-style: italic; }
.compare tbody th { font-family: var(--mono); font-size: var(--s-2xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--patina-ink); font-weight: var(--w-regular); padding-top: var(--sp-5); width: 11rem; }
.compare td.is-rep { color: var(--ink); background: var(--accent-wash); padding-left: var(--sp-4); }

/* Questions people ask: native details, no script. */
.faq { margin-top: var(--sp-10); border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-6); padding: var(--sp-5) 0; font-family: var(--display); font-weight: var(--w-regular); font-size: var(--s-h3); color: var(--ink); line-height: var(--lh-snug); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--body); font-weight: var(--w-light); font-size: var(--s-h3); color: var(--patina-ink); line-height: var(--lh-none); transition: transform var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--patina-ink); }
.faq .answer { padding: 0 0 var(--sp-6); max-width: 42rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: var(--sp-4); }

/* A quiet aside or note box. */
.note-box { margin-top: var(--sp-10); padding: var(--sp-6) var(--sp-7); background: var(--accent-wash); border: 1px solid var(--rule); color: var(--ink-soft); font-size: var(--s-sm); max-width: 44rem; }
.note-box strong { color: var(--ink); font-weight: var(--w-regular); }

/* Closing prompt at the foot of a page. */
.closing { background: var(--raised); border-top: 1px solid var(--rule); }
.closing .wrap { padding-block: var(--space-band-sm); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--gap-columns); align-items: center; }
.closing h2 { font-size: var(--s-xl); font-weight: var(--w-light); margin-top: var(--sp-3); }
.closing h2 em { font-style: italic; color: var(--patina-ink); }
.closing p { margin-top: var(--sp-4); color: var(--ink-soft); max-width: 32rem; }
.closing .cta-row { justify-self: end; }

/* ------------------------------------------------------------------ */
/* The lead form                                                        */
/* ------------------------------------------------------------------ */
.lead-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-6); margin-top: var(--sp-10); }
.lead-form .field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.lead-form .field.is-wide, .lead-form .form-actions, .lead-form .form-note, .lead-form .form-error, .lead-form .lead-form-turnstile { grid-column: 1 / -1; }
.lead-form label { font-family: var(--mono); font-size: var(--s-2xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft); }
.lead-form label .req { color: var(--patina-ink); }
.lead-form input, .lead-form select, .lead-form textarea {
  font: var(--w-light) var(--s-md) var(--body); color: var(--ink); background: var(--bg);
  border: 1px solid var(--field-edge); border-radius: 0; padding: var(--sp-3) var(--sp-4); width: 100%; min-width: 0;
  transition: border-color var(--ease);
}
.lead-form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 1.4rem) 55%, calc(100% - 1rem) 55%; background-size: 0.4rem 0.4rem; background-repeat: no-repeat; padding-right: var(--sp-11); }
.lead-form textarea { min-height: 9rem; resize: vertical; line-height: var(--lh-relaxed); }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: 2px solid var(--patina-ink); outline-offset: 2px; border-color: var(--patina); }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.lead-form .hint { font-size: var(--s-xs); color: var(--ink-soft); }
.lead-form .form-note { font-size: var(--s-sm); color: var(--ink-soft); max-width: 40rem; }
.lead-form .form-note a { text-decoration-color: var(--patina); text-underline-offset: 0.2em; }
.lead-form .form-actions { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-2); }
.lead-form .form-error { color: var(--error); font-size: var(--s-sm); border-left: 2px solid var(--error); padding-left: var(--sp-4); }
.lead-form .form-error:empty { display: none; }
.lead-form .field.is-invalid input, .lead-form .field.is-invalid textarea, .lead-form .field.is-invalid select, .lead-form [aria-invalid="true"] { border-color: var(--error); }
.lead-form .field .field-error { font-size: var(--s-xs); color: var(--error); }
.lead-form .field .field-error:empty { display: none; }
/* The honeypot: present in the document, off every screen and every tab order. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-success { margin-top: var(--sp-10); padding: var(--pad-panel); background: var(--accent-wash); border: 1px solid var(--rule); }
.form-success h2 { font-size: var(--s-xl); font-weight: var(--w-light); }
.form-success p { margin-top: var(--sp-4); color: var(--ink-soft); max-width: 36rem; }

/* Contact page layout: the form beside the channels. */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
.contact-layout .channels { border-top: 1px solid var(--ink); }
.contact-layout .side { position: sticky; top: 6rem; }
.contact-layout .side .label { display: block; margin: var(--sp-10) 0 var(--sp-2); font-size: var(--s-xs); font-weight: var(--w-regular); letter-spacing: var(--track-label-wide); text-transform: uppercase; color: var(--patina-ink); }
.contact-layout .side .channels + .label { margin-top: var(--sp-10); }
.contact-layout .side .note { margin-top: var(--sp-5); }
.steps { list-style: none; margin: var(--sp-6) 0 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: var(--sp-4) 0 var(--sp-4) var(--sp-10); border-top: 1px solid var(--rule); font-size: var(--s-sm); color: var(--ink-soft); counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 1rem; font-family: var(--mono); font-size: var(--s-2xs); letter-spacing: var(--track-caps); color: var(--patina-ink); }
.steps li strong { display: block; font-family: var(--display); font-weight: var(--w-regular); font-size: var(--s-h4); color: var(--ink); }

/* Footer nav row under the title block. */
.foot-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4) var(--sp-8); flex-wrap: wrap; margin-top: var(--sp-5); font-size: var(--s-xs); letter-spacing: var(--track-caps-sm); text-transform: uppercase; color: var(--ink-soft); }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-2) var(--sp-6); flex-wrap: wrap; }
.foot-nav a { text-decoration: none; display: inline-block; padding-block: var(--sp-1); }
.foot-nav a:hover { color: var(--patina-ink); }

/* Phase icons on the process grid, and the role diagram on services. */
.phase .ico { width: 2.5rem; height: 2.5rem; }
.roles .role p { color: var(--ink-soft); }

/* Not-found and thank-you pages: a short centered block. */
.simple { min-height: 50vh; display: grid; place-items: center; text-align: center; }
.simple .wrap { padding-block: var(--space-section); max-width: 40rem; }
.simple h1 { font-size: var(--s-xxl); font-weight: var(--w-light); }
.simple h1 em { font-style: italic; color: var(--patina-ink); }
.simple p { margin-top: var(--sp-5); color: var(--ink-soft); font-size: var(--s-lg); }
.simple .cta-row { justify-content: center; margin-top: var(--sp-8); }

/* Home page specifics on top of the shared components. */
.why-intro h2 .line { display: block; font-style: normal; color: var(--patina-ink); white-space: nowrap; }
.math-title { font-size: var(--s-h2-sm); font-weight: var(--w-light); }
.math-title em { color: var(--patina-ink); }
.principle.is-quiet { margin-top: var(--sp-6); padding-top: 0; border-top: 0; font-size: var(--s-lg); }
.contact .cta-row { margin-top: var(--sp-8); }
.hero .text-link { color: var(--ink-soft); }
.hero .text-link:hover { color: var(--patina-ink); }

@media (max-width: 900px) {
  .page-head .wrap, .closing .wrap, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .closing .cta-row { justify-self: start; }
  .contact-layout .side { position: static; }
  .defs li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}
@media (max-width: 600px) {
  .lead-form { grid-template-columns: minmax(0, 1fr); }
  .nav .nav-cta { display: none; }
  .foot-nav { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Refinements after the first review. Two plain sections in a row share one
 * gap instead of two; long labels and questions wrap in balanced lines; the
 * comparison table becomes one card per row on a phone; photos step down a
 * little in dark mode so they do not glare. */
section.block:not(.process) + section.block:not(.process) { padding-top: var(--space-section-follow); }
.also .text-link { font-family: var(--body); font-style: normal; color: var(--ink); }
.faq summary, .defs strong, .foot-nav > span, .page-head h1, .sec-head h2 { text-wrap: balance; }
@media (max-width: 600px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare { min-width: 0; }
  .compare caption { display: block; width: 100%; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { padding-block: var(--sp-4); border-bottom: 1px solid var(--rule); }
  .compare tbody th, .compare td { border-bottom: 0; padding: var(--sp-1) 0; }
  .compare td::before { content: attr(data-role); display: block; font-family: var(--mono); font-size: var(--s-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-soft); }
  .compare td.is-rep::before { color: var(--patina-ink); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-photo img, :root:not([data-theme="light"]) .portrait img { filter: brightness(0.85); }
}
:root[data-theme="dark"] .hero-photo img, :root[data-theme="dark"] .portrait img { filter: brightness(0.85); }

/* Independent by design: the fee stance under the offers. */
.independent { margin-top: var(--sp-10); padding-top: var(--sp-7); border-top: 1px solid var(--patina); display: flex; flex-direction: column; gap: var(--sp-2); max-width: 46rem; }
.independent h3 { font-size: var(--s-lg); }
.independent .indep-line { font-family: var(--display); font-style: italic; font-size: var(--s-aside); line-height: var(--lh-quote); color: var(--ink); }
.independent .fees { margin-top: var(--sp-1); }
.why-intro .prose .lead-in { font-family: var(--display); font-style: italic; font-size: var(--s-aside); line-height: var(--lh-quote); color: var(--ink); }