/* Albemarle Standard: shared stylesheet for the whole site (/, /book/, /book/thanks/) in Owen's
   "architect's plate" system. Replaces /styles.css, which no page references any more.
   "Build it like a drawing, not like a poster": plaster ground, hairlines, a brick rule at the
   head, near-zero radii, Caslon for the voice, Public Sans for the interface, Plex Mono for data.
   Fonts are self-hosted WOFF2 made from the OFL TrueType files (see fonts/OFL-*.txt). */

@font-face { font-family: "AS Caslon Display"; src: url("fonts/LibreCaslonDisplay-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "AS Caslon"; src: url("fonts/LibreCaslonText-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "AS Caslon"; src: url("fonts/LibreCaslonText-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "AS Caslon"; src: url("fonts/LibreCaslonText-Italic400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "AS Public"; src: url("fonts/PublicSans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "AS Public"; src: url("fonts/PublicSans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "AS Public"; src: url("fonts/PublicSans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "AS Mono"; src: url("fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "AS Mono"; src: url("fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --p50: #f7f4ec; --p100: #ece7da; --p200: #ded7c5;
  --ink900: #1b2327; --ink600: #4a555a; --ink400: #5a6569;
  --brick700: #6d211a; --brick500: #8c2f26; --brick300: #b8604f;
  --chrome500: #dfa12b; --on-chrome: #2a1e08;
  --verd600: #3f6759;
  --hair: #c8bfa9; --control: #6b757a;
  --on-brick: #f7f4ec;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --r-sm: 2px;
  --display: "AS Caslon Display", "Libre Caslon Display", Georgia, serif;
  --text: "AS Caslon", "Libre Caslon Text", Georgia, serif;
  --ui: "AS Public", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "AS Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.plate {
  margin: 0; background: var(--p100); color: var(--ink900);
  font-family: var(--text); font-size: 16px; line-height: 1.6;
  font-kerning: normal; font-synthesis: none;
  border-top: 3px solid var(--brick500);          /* the head rule of the plate */
}
:where(.plate) :where(h1, h2, h3, p, ul, ol, figure, dl, dd) { margin: 0; }
:where(.plate) :where(ul, ol) { padding: 0; list-style: none; }
.plate a { color: var(--brick500); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.plate a:hover { color: var(--brick700); }
.plate :focus-visible { outline: 2px solid var(--brick500); outline-offset: 2px; }
.plate img, .plate svg { display: block; max-width: 100%; }
.plate em, .plate .tagline { font-variant-ligatures: no-common-ligatures; font-feature-settings: "liga" 0, "dlig" 0; } /* Caslon Italic: no long-s "st" */
.skip { position: absolute; left: -9999px; top: 0; background: var(--p50); padding: var(--s3) var(--s4); font-family: var(--ui); z-index: 10; }
.skip:focus { left: var(--s4); top: var(--s2); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.shell { width: 100%; max-width: 1136px; margin: 0 auto; padding: 0 20px; }

/* ---------- Nav: lockup left, one link right, hairline foot ---------- */
.pnav { border-bottom: 1px solid var(--hair); }
.pnav .shell { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; }
.lockup { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink900) !important; }
.lockup svg { width: 28px; height: 28px; flex: none; }
.lockup span { font-family: var(--text); font-weight: 700; font-size: 19px; line-height: 1.1; letter-spacing: -0.005em; white-space: nowrap; }
.pnav-links { display: flex; align-items: center; gap: var(--s5); }
.pnav-links a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--ui); font-weight: 500; font-size: 16px; color: var(--ink600); text-decoration: none; border-bottom: 2px solid transparent; }
.pnav-links a:hover { color: var(--ink900); border-bottom-color: var(--hair); }
.pnav-links a[aria-current="page"] { color: var(--ink900); box-shadow: inset 0 -2px 0 var(--chrome500); } /* chrome: active underline */
.pnav-links .hide-sm { display: none; }

/* ---------- Type roles ---------- */
.label {
  font-family: var(--ui); font-weight: 600; font-size: 12px; line-height: 16px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--brick500);
}
.eyebrow { display: flex; align-items: center; gap: var(--s3); }
.eyebrow::after { content: ""; flex: 1; min-width: 24px; border-top: 1px solid var(--hair); }
.display-lg { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 46px; letter-spacing: -0.01em; color: var(--ink900); }
.body-lg { font-family: var(--text); font-size: 18px; line-height: 29px; color: var(--ink600); }
.heading-md { font-family: var(--text); font-weight: 700; font-size: 19px; line-height: 26px; color: var(--ink900); }
.fig { font-family: var(--mono); font-weight: 500; font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink400); }
.data { font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 20px; color: var(--ink900); }
.small { font-family: var(--text); font-size: 14px; line-height: 22px; color: var(--ink400); }
.tagline { font-family: var(--text); font-style: italic; color: var(--ink600); }

/* double rule: brick border-rule (3px) over a 1px hair, space-2 apart */
.drule { height: 12px; border-top: 3px solid var(--brick500); position: relative; }
.drule::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; border-top: 1px solid var(--hair); }

/* ---------- Page layout ---------- */
.bk { padding: var(--s6) 0 var(--s7); }
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.intro .eyebrow { margin-bottom: var(--s4); }
.intro h1 { margin-bottom: var(--s3); font-size: 40px; line-height: 44px; }
.intro .body-lg { max-width: 34em; }

/* offer sticker: the one chrome fill on the page */
.offer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--hair); }
.sticker { display: inline-block; background: var(--chrome500); color: var(--on-chrome); border-radius: var(--r-sm); padding: 6px 12px; font-family: var(--ui); font-weight: 600; font-size: 16px; line-height: 22px; }
.offer .small { color: var(--ink600); }

/* ---------- Form ---------- */
.bform fieldset { border: 0; margin: 0 0 var(--s6); padding: 0; min-width: 0; }
.bform legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--s4); }
.bform legend + * { clear: left; }
.field { margin-bottom: var(--s5); }
.field > label, .field > .flabel { display: block; margin-bottom: 6px; font-family: var(--ui); font-weight: 500; font-size: 16px; line-height: 22px; color: var(--ink900); }
.opt { font-weight: 400; color: var(--ink400); }
.hint { display: block; margin: -2px 0 8px; font-family: var(--ui); font-size: 14px; line-height: 20px; color: var(--ink400); }
.bform input[type="text"], .bform input[type="email"], .bform input[type="tel"], .bform input[type="date"],
.bform select, .bform textarea {
  display: block; width: 100%; min-height: 48px; margin: 0;
  padding: 11px 14px; border: 1px solid var(--control); border-radius: var(--r-sm);
  background: var(--p50); color: var(--ink900);
  font-family: var(--ui); font-weight: 400; font-size: 17px; line-height: 24px;   /* >=16px: no iOS zoom */
  -webkit-appearance: none; appearance: none;
}
.bform input[type="date"] { min-width: 0; -webkit-appearance: none; }
.bform input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.bform textarea { min-height: 104px; resize: vertical; }
.bform select {
  padding-right: 40px; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231b2327' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.bform ::placeholder { color: var(--ink400); opacity: 1; }
.bform input:hover, .bform select:hover, .bform textarea:hover { border-color: var(--ink600); }
.bform input:focus-visible, .bform select:focus-visible, .bform textarea:focus-visible { outline: 2px solid var(--brick500); outline-offset: 2px; border-color: var(--ink900); }
.row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--s4); }

/* validation: brick edge + a deadpan mono line. Works without JS via :user-invalid. */
.field-msg { display: none; margin-top: 6px; font-family: var(--mono); font-size: 13px; line-height: 18px; color: var(--brick500); }
.bform input:user-invalid, .bform select:user-invalid, .bform textarea:user-invalid,
.bform .is-invalid { border: 2px solid var(--brick500); padding: 10px 13px; }
.field:has(input:user-invalid) .field-msg, .field.show-msg .field-msg { display: block; }

/* checkboxes: drawn squares, 44px rows */
.checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.check { display: flex; align-items: center; gap: var(--s3); min-height: 44px; font-family: var(--ui); font-size: 16px; line-height: 22px; color: var(--ink900); cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--brick500); }
.check .data { color: var(--ink600); }
.offer-check { align-items: flex-start; padding: var(--s3) var(--s4); margin-bottom: var(--s5); background: var(--p50); border: 1px solid var(--hair); border-left: 3px solid var(--chrome500); }
.offer-check input { margin-top: 1px; }

/* "More details" disclosure */
.more { margin: 0 0 var(--s5); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 52px; cursor: pointer; list-style: none; font-family: var(--ui); font-weight: 500; font-size: 16px; color: var(--ink900); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; font-family: var(--mono); font-size: 20px; color: var(--brick500); }
.more[open] > summary::after { content: "\2212"; }
.more > summary .opt { font-size: 14px; }
.more-body { padding: var(--s2) 0 var(--s2); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: var(--r-sm); border: 1px solid var(--brick500); font-family: var(--ui); font-weight: 500; font-size: 17px; line-height: 22px; text-decoration: none; cursor: pointer; }
.btn-primary { background: var(--brick500); color: var(--on-brick) !important; }
.btn-primary:hover { background: var(--brick700); border-color: var(--brick700); }
.btn-primary:disabled { background: var(--p200); border-color: var(--p200); color: var(--ink400) !important; cursor: default; }
.btn-outline { background: transparent; color: var(--brick500) !important; }
.btn-outline:hover { border-color: var(--brick700); color: var(--brick700) !important; }
.submit-row { display: flex; flex-direction: column; align-items: stretch; gap: var(--s3); }
.submit-row .data { color: var(--ink400); }
.form-foot { margin-top: var(--s4); }
.hidden-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; margin-top: var(--s4); padding: var(--s3) var(--s4); background: var(--p50); border: 1px solid var(--brick500); border-left-width: 3px; font-family: var(--ui); font-size: 16px; line-height: 24px; color: var(--ink900); }
.form-status.show { display: block; }
.plain-mailto { margin-top: var(--s4); font-family: var(--ui); font-size: 14px; line-height: 20px; color: var(--ink400); }
.plain-mailto a { display: inline-block; padding: 12px 0; }

/* ---------- Pricing: PriceRow panel ---------- */
.aside > section + section { margin-top: var(--s7); }
.aside .eyebrow { margin-bottom: var(--s4); }
.prices { background: var(--p50); border: 1px solid var(--hair); border-top: 3px solid var(--brick500); }
.prow { padding: var(--s5) var(--s4); }
.prow + .prow { border-top: 1px solid var(--hair); }
.prow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.prow-head h3 { margin: 0; }
.prow .lead { margin-top: 4px; font-family: var(--text); font-size: 15px; line-height: 23px; color: var(--ink600); }
.price { flex: none; text-align: right; }
.price b { display: block; font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 32px; color: var(--brick500); }
.price span { display: block; margin-top: 4px; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--ink400); white-space: nowrap; }
.price .quoted { font-family: var(--mono); font-size: 13px; line-height: 20px; color: var(--brick500); white-space: normal; max-width: 9em; margin: 0; }
.sched { width: 100%; margin-top: var(--s4); border-collapse: collapse; table-layout: fixed; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sched th, .sched td { padding: 6px 2px; text-align: center; border-left: 1px solid var(--hair); }
.sched tr > :first-child { border-left: 0; }
.sched thead th { font-weight: 400; font-size: 12px; line-height: 16px; color: var(--ink400); border-bottom: 1px solid var(--hair); }
.sched tbody td { font-size: 15px; line-height: 20px; color: var(--ink900); }
.sched tbody th { font-weight: 400; font-size: 12px; line-height: 16px; color: var(--ink400); text-align: left; }
.sched tbody tr + tr > * { border-top: 1px solid var(--hair); }
.sched.has-rowhead col.rh { width: 26%; }
.sched caption { caption-side: bottom; padding-top: var(--s2); text-align: left; }
.addons { margin-top: var(--s3); font-family: var(--mono); font-size: 12px; line-height: 19px; color: var(--ink400); }

/* ---------- How it works: octagon steps ---------- */
.steps li { display: flex; align-items: center; gap: var(--s4); padding: var(--s2) 0; }
.oct { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--brick500); color: var(--on-brick);
  clip-path: polygon(29.29% 0, 70.71% 0, 100% 29.29%, 100% 70.71%, 70.71% 100%, 29.29% 100%, 0 70.71%, 0 29.29%);
  font-family: var(--text); font-size: 20px; line-height: 1; padding-top: 2px; }
.steps .step { font-family: var(--text); font-size: 18px; line-height: 25px; color: var(--ink900); }

/* ---------- Footer ---------- */
.pfoot { padding: 0 0 var(--s6); }
.pfoot .drule { margin-bottom: var(--s5); }
.pfoot-grid { display: grid; gap: var(--s4); }
.pfoot .lockup span { font-size: 18px; }
.pfoot .tagline { font-size: 15px; line-height: 22px; margin-top: 2px; }
.pfoot .data a { display: inline-block; padding: 12px 0; color: var(--ink900); }
.pfoot .data a:hover { color: var(--brick500); }
.pfoot .fig { margin-top: var(--s1); }

/* ---------- Thanks page ---------- */
.ty { padding: var(--s6) 0 var(--s7); }
.ty-inner { max-width: 640px; }
.ty h1 { margin: var(--s4) 0 var(--s3); font-size: 40px; line-height: 44px; }
.ty .body-lg + .body-lg { margin-top: var(--s3); }
.ty-list { margin-top: var(--s5); border-top: 1px solid var(--hair); }
.ty-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--hair); font-family: var(--text); font-size: 16px; line-height: 24px; color: var(--ink600); }
.ty-list .fig { padding-top: 4px; }
.ty .btns { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.ty .btns .btn { flex: 1 1 180px; }
.plate-fig { margin-top: var(--s7); }
.plate-fig svg { width: 100%; height: auto; }
.plate-fig figcaption { margin-top: var(--s3); text-align: center; }

/* ---------- Wider screens ---------- */
@media (min-width: 560px) {
  .checks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--s4); }
  .submit-row { flex-direction: row; align-items: center; gap: var(--s4); }
  .pnav-links .hide-sm { display: inline-flex; }
  .prow { padding: var(--s5) var(--s5); }
}
@media (min-width: 720px) {
  .shell { padding: 0 32px; }
  .intro h1, .ty h1 { font-size: 44px; line-height: 46px; }
  .pfoot-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .pfoot-grid > :last-child { text-align: right; }
}
@media (min-width: 1000px) {
  .bk { padding: var(--s7) 0 var(--s8); }
  .bk-grid { grid-template-columns: minmax(0, 1fr) 400px; column-gap: var(--s8); row-gap: var(--s6); align-items: start; }
  .intro { grid-column: 1; grid-row: 1; }
  .bform { grid-column: 1; grid-row: 2; }
  .aside { grid-column: 2; grid-row: 1 / span 2; }
  .form-col { max-width: 640px; }
  .ty-inner { max-width: 720px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---- iteration 2 ---- */
.note { margin-top: var(--s2); font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--ink600); }
.sched caption { padding-top: var(--s3); }
.prow .quoted { margin-top: var(--s3); font-family: var(--mono); font-weight: 500; font-size: 13px; line-height: 20px; color: var(--brick500); }
.heading-md, .steps .step, .prow .lead, .body-lg, .display-lg { text-wrap: balance; }
.bform fieldset > .field:last-child, .bform fieldset > .row-2:last-child .field { margin-bottom: 0; }
.row-md { grid-template-columns: minmax(0, 1fr); }
.form-foot { margin-top: var(--s4); max-width: 36em; }
.plain-mailto { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--hair); }
.plain-mailto a { padding: 12px 0; }
.submit-row .data { font-size: 13px; }
@media (min-width: 560px) { .row-md { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.nw { white-space: nowrap; }
.ty-from { margin-top: var(--s2); color: var(--ink600); overflow-wrap: anywhere; }

/* =====================================================================
   Homepage
   ===================================================================== */
.display-md { font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 36px; letter-spacing: -0.005em; color: var(--ink900); }
.heading-lg { font-family: var(--text); font-weight: 700; font-size: 22px; line-height: 28px; color: var(--ink900); }

/* nav: lockup, section links, one brick button */
.hnav { position: sticky; top: 0; z-index: 5; background: var(--p100); }
.hnav .shell { min-height: 64px; }
.hnav-links { display: none; }
.hnav-links a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--ui); font-weight: 500; font-size: 15px; color: var(--ink600); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.hnav-links a:hover { color: var(--ink900); box-shadow: inset 0 -2px 0 var(--chrome500); }
.btn-sm { min-height: 44px; padding: 10px 14px; font-size: 16px; }
.hnav .lockup span { font-size: 18px; }
@media (max-width: 379px) { .hnav .lockup span { font-size: 16px; } .hnav .btn-sm { padding: 10px 10px; } }

.sec { padding: var(--s7) 0; }
.sec + .sec { border-top: 1px solid var(--hair); }
.sec-head { margin-bottom: var(--s6); max-width: 40em; }
.sec-head .eyebrow { margin-bottom: var(--s3); }
.sec-head h2 { margin-bottom: var(--s3); }
.sec-head .body-lg { max-width: 36em; }
.sec-head .body-lg + .body-lg { margin-top: var(--s3); }

/* hero */
.hero { padding: var(--s6) 0 var(--s7); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.hero .eyebrow { margin-bottom: var(--s4); }
.hero h1 { font-size: 38px; line-height: 42px; margin-bottom: var(--s4); }
.hero .body-lg { max-width: 34em; }
.hero .btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.hero .btn-row .btn { flex: 1 1 160px; }
.meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--hair); }
.meta dt { font-family: var(--mono); font-size: 13px; line-height: 18px; color: var(--ink400); }
.meta dd { margin: 2px 0 0; font-family: var(--mono); font-size: 16px; line-height: 22px; color: var(--ink900); }
.meta dd.brick { color: var(--brick500); font-weight: 500; }
.hero .offer a { font-family: var(--ui); font-size: 15px; display: inline-flex; align-items: center; min-height: 44px; }
.hero-fig svg { width: 100%; height: auto; }
.hero-fig figcaption { margin-top: var(--s3); }

/* standards row (was the trust row) */
.standards { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--hair); }
.standards li { display: flex; gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--hair); }
.standards svg { flex: none; width: 24px; height: 24px; color: var(--brick500); margin-top: 1px; }
.standards b { display: block; font-family: var(--text); font-weight: 700; font-size: 16px; line-height: 22px; color: var(--ink900); }
.standards span { display: block; font-family: var(--text); font-size: 15px; line-height: 22px; color: var(--ink600); }

/* service cards */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.card { background: var(--p50); border: 1px solid var(--hair); border-top: 3px solid var(--brick500); padding: var(--s5) var(--s4); display: flex; flex-direction: column; }
.card .fig { margin-bottom: var(--s2); }
.card h3 { font-family: var(--text); font-weight: 700; font-size: 22px; line-height: 28px; color: var(--brick500); margin-bottom: var(--s2); }
.card p.body { font-family: var(--text); font-size: 16px; line-height: 25px; color: var(--ink600); }
.card .cdata { margin-top: auto; padding-top: var(--s4); font-family: var(--mono); font-size: 13px; line-height: 20px; color: var(--ink600); }
.card .cdata b { display: block; font-weight: 500; font-size: 15px; color: var(--brick500); }
.card ul.tags { margin-top: var(--s3); font-family: var(--mono); font-size: 13px; line-height: 20px; color: var(--ink600); }
.card ul.tags li { display: inline; }
.card ul.tags li + li::before { content: " · "; color: var(--ink400); }

/* how it works: numbered octagons with text */
.hsteps { counter-reset: s; }
.hsteps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--hair); }
.hsteps li:last-child { border-bottom: 1px solid var(--hair); }
.hsteps .oct { margin-top: 2px; }
.hsteps h3 { margin-bottom: 4px; }
.hsteps p { font-family: var(--text); font-size: 16px; line-height: 25px; color: var(--ink600); }

/* pricing on the homepage reuses .prices/.prow/.sched; add-ons table */
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.addon-tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 14px; line-height: 20px; }
.addon-tbl th, .addon-tbl td { padding: 10px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.addon-tbl th { font-weight: 400; color: var(--ink900); padding-right: var(--s3); }
.addon-tbl td { text-align: right; color: var(--ink900); white-space: nowrap; }
.addon-tbl small { display: block; font-size: 12px; line-height: 18px; color: var(--ink400); }
.addons-box { background: var(--p50); border: 1px solid var(--hair); padding: var(--s5) var(--s4); }
.addons-box h3 { margin-bottom: var(--s2); }
.offer-note { margin-top: var(--s5); padding: var(--s4); background: var(--p50); border: 1px solid var(--hair); border-left: 3px solid var(--chrome500); }
.offer-note p { font-family: var(--text); font-size: 16px; line-height: 25px; color: var(--ink600); }
.offer-note .sticker { margin-bottom: var(--s3); }
.offer-note p + p { margin-top: var(--s2); }

/* service area */
.places { display: flex; flex-wrap: wrap; gap: 0; font-family: var(--mono); font-size: 15px; line-height: 24px; color: var(--ink900); border-top: 1px solid var(--hair); }
.places li { padding: var(--s3) var(--s4) var(--s3) 0; }
.places li + li::before { content: "·"; margin-right: var(--s4); color: var(--ink400); }

/* FAQ */
.faq { border-top: 1px solid var(--hair); max-width: 48em; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 56px; padding: var(--s3) 0; cursor: pointer; list-style: none; font-family: var(--text); font-weight: 700; font-size: 18px; line-height: 25px; color: var(--ink900); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--mono); font-weight: 400; font-size: 22px; color: var(--brick500); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 var(--s4); max-width: 40em; font-family: var(--text); font-size: 16px; line-height: 26px; color: var(--ink600); }

/* CTA band: brick-700 ground, on-brick text, chrome focus */
.cta { background: var(--brick700); color: var(--on-brick); padding: var(--s6) var(--s5); }
.cta .label { color: var(--on-brick); }
.cta .eyebrow::after { border-top-color: rgba(247, 244, 236, 0.45); }
.cta h2 { color: var(--on-brick); margin: var(--s3) 0; }
.cta p.body-lg { color: var(--on-brick); max-width: 36em; }
.cta p.body-lg + p.body-lg { margin-top: var(--s3); }
.cta a:not(.btn) { color: var(--on-brick); }
.cta .btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.cta .btn-row .btn { flex: 1 1 200px; }
.btn-chrome { background: var(--chrome500); border-color: var(--chrome500); color: var(--on-chrome) !important; }
.btn-chrome:hover { background: #c98d1f; border-color: #c98d1f; }
.btn-ghost { background: transparent; border-color: var(--on-brick); color: var(--on-brick) !important; }
.btn-ghost:hover { background: rgba(247, 244, 236, 0.1); }
.cta :focus-visible { outline-color: var(--chrome500); }
.pfoot .small { margin-top: var(--s2); }

@media (min-width: 560px) {
  .standards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s5); }
  .card { padding: var(--s5); }
  .addons-box { padding: var(--s5); }
}
@media (min-width: 720px) {
  .hero h1 { font-size: 44px; line-height: 46px; }
  .cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cta { padding: var(--s7); }
}
@media (min-width: 1000px) {
  .hnav-links { display: flex; align-items: center; gap: var(--s5); margin-left: auto; margin-right: var(--s5); }
  .hero { padding: var(--s7) 0 var(--s8); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s7); align-items: end; }
  .standards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .standards li { flex-direction: column; border-bottom: 0; padding: var(--s5) var(--s5) var(--s4) 0; }
  .standards li + li { border-left: 1px solid var(--hair); padding-left: var(--s5); }
  .standards { border-bottom: 1px solid var(--hair); }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: var(--s8); align-items: start; }
  .split .sec-head { margin-bottom: 0; }
  .price-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: var(--s6); }
  .cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s7); align-items: end; }
  .cta .btn-row { margin-top: 0; flex-direction: column; min-width: 260px; }
  .cta .btn-row .btn { flex: none; }
}
.hnav .shell { gap: var(--s3); }
.sec { scroll-margin-top: 64px; }
#how { position: relative; top: -64px; display: block; height: 0; }
@media (min-width: 720px) { .cards-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1000px) { .cards-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.card .heading-lg { color: var(--ink900); }
.btn { white-space: nowrap; }
.hnav .btn-sm { flex: none; }
.hnav .lockup { min-width: 0; }
.hero .btn-row .btn { flex: 1 1 100%; }
.hero-fig figcaption { text-align: center; }
@media (max-width: 400px) { .hnav .lockup span { font-size: 17px; } .hnav .lockup svg { width: 26px; height: 26px; } .hnav .lockup { gap: 8px; } }
@media (min-width: 560px) { .hero .btn-row .btn { flex: 1 1 160px; } }
.places { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: var(--s5); }
.places li { padding: var(--s3) 0; border-bottom: 1px solid var(--hair); }
.places li + li::before { content: none; }
.places li:last-child { grid-column: 1 / -1; color: var(--ink600); }
@media (min-width: 1000px) { .places li:last-child { grid-column: auto / span 2; } }
.pfoot .small, .small { text-wrap: pretty; }

/* Business phone (434) 260-6513, added 2026-09-30. Each tel: link stands alone, so it gets a 44px tap height. */
.foot-tel { margin-top: 0; }
.foot-tel .fig { margin-right: 6px; }
.foot-tel a { display: inline-block; padding: 12px 0; color: var(--ink900); }
.foot-tel a:hover { color: var(--brick500); }
.cta-tel { margin-top: var(--s3); font-size: 16px; line-height: 20px; color: var(--on-brick); }
.cta-tel .label { margin-right: 8px; }
.cta .cta-tel a { display: inline-block; padding: 12px 0; color: var(--on-brick); text-underline-offset: 3px; }
.plain-tel { margin-top: 0; font-family: var(--ui); font-size: 14px; line-height: 20px; color: var(--ink400); }
.plain-tel a { display: inline-block; padding: 12px 0; }