/* Moorpark Carpet Cleaners, "The drying yard" theme (brand/kit v1, October 2026). One stylesheet, every class in
   class-inventory.txt. Tokens from brand/kit/colours.css, roles from brand/kit/type.css, rules from
   brand/kit/guideline.pdf. The markup is the shared build's; this file changes only how it looks.
   Phone first: base rules are for a 390 px phone, the 760 px step raises the headings and lays out two columns,
   the 960 px step shows the nav and the hero's two columns. Preload fira-sans-latin-400-normal.woff2 and
   bitter-latin-600-normal.woff2. */

/* ---------- fonts: Bitter and Fira Sans, SIL OFL 1.1, Latin subsets, self-hosted ---------- */
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/bitter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/bitter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/fira-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/fira-sans-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/fira-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/fira-sans-latin-600-normal.woff2') format('woff2'); }

/* ---------- tokens ---------- */
:root {
  --kernel: #2B2119; --apricot: #F2A24A; --amber: #9A4A12; --blush: #E8A79B; --slat: #CDAE7E; --husk: #6E5B4B;
  --ground: #FFFFFF; --wash: #F6F1EA; --rule: #DDD3C6; --apricot-pale: #FCE9D4; --apricot-light: #F7C78A;
  --apricot-hover: #EE9330; --amber-deep: #7A3A0C; --kernel-2: #3A2D24; --error: #8A1C1C; --error-fill: #FFE4E1;
  --on-kernel: #FFFFFF; --on-kernel-muted: #F6F1EA;
  --font-body: 'Fira Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-head: 'Bitter', 'Rockwell', Georgia, serif;
  --wrap: 1180px; --narrow: 760px; --gutter: 1.25rem;
  --radius: 8px; --radius-lg: 12px; --radius-btn: 10px;
  --t-body-size: 18px; --t-body-line: 28px; --t-small-size: 15px; --t-small-line: 22px; --t-tiny-size: 14px; --t-tiny-line: 20px;
  --t-lead-size: 19px; --t-lead-line: 29px; --t-h1-size: 34px; --t-h1-line: 38px; --t-h2-size: 26px; --t-h2-line: 32px;
  --t-h3-size: 20px; --t-h3-line: 26px; --t-price-size: 19px; --t-price-line: 27px; --t-price-big-size: 28px; --t-price-big-line: 34px;
  --t-numeral-size: 36px; --t-numeral-line: 40px;
}
@media (min-width: 760px) {
  :root { --t-lead-size: 20px; --t-lead-line: 30px; --t-h1-size: 46px; --t-h1-line: 52px; --t-h2-size: 30px; --t-h2-line: 36px;
          --t-h3-size: 22px; --t-h3-line: 28px; --t-price-size: 22px; --t-price-line: 28px; --t-price-big-size: 32px; --t-price-big-line: 38px;
          --t-numeral-size: 44px; --t-numeral-line: 48px; --gutter: 1.5rem; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--ground); color: var(--kernel); font-family: var(--font-body); font-size: var(--t-body-size); line-height: var(--t-body-line);
       font-variant-numeric: lining-nums tabular-nums; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg { max-width: 100%; }
a { color: var(--amber); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--amber-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 2px; }
.inquiry :focus-visible, .site-footer :focus-visible, .consent-bar :focus-visible, .calc__out :focus-visible { outline-color: var(--apricot); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- type roles ---------- */
h1, h2, h3 { margin: 0 0 0.45em; font-family: var(--font-head); font-weight: 600; color: inherit; text-wrap: balance; letter-spacing: -0.005em; }
h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-line); }
h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-line); }
h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-line); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25rem; }
strong, b { font-weight: 600; }
.dek { font-size: var(--t-lead-size); line-height: var(--t-lead-line); color: var(--kernel); max-width: 40rem; }
.lede { font-size: var(--t-lead-size); line-height: var(--t-lead-line); color: var(--husk); max-width: 62ch; margin-bottom: 1.75rem; }
.note, .fine, .quote-card__fine, .figure figcaption, .guide-meta, .sources, .opt, .toc, .glance dt { font-size: var(--t-small-size); line-height: var(--t-small-line); }
.note, .fine, .figure figcaption, .guide-meta, .opt, .crumbs { color: var(--husk); }
.note { margin-top: 1.25rem; }
.fine { margin: 0.9rem 0 0; }
.eyebrow { font-size: var(--t-small-size); line-height: var(--t-small-line); font-weight: 500; color: var(--husk); margin: 0 0 0.6rem; }
.eyebrow--light { color: var(--husk); }
.nowrap { white-space: nowrap; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { max-width: var(--narrow); }
.wrap.narrow { width: min(100% - 2 * var(--gutter), var(--narrow)); }
.section { padding: 2.75rem 0; }
.section--wash { background: var(--wash); }
.section + .section:not(.section--wash) { padding-top: 0.5rem; }
.section--wash + .section { padding-top: 2.75rem; }
@media (min-width: 760px) { .section { padding: 4rem 0; } .section--wash + .section { padding-top: 4rem; } .section + .section:not(.section--wash) { padding-top: 1rem; } }
.skip { position: absolute; left: -999px; top: 0.5rem; z-index: 60; background: var(--apricot); color: var(--kernel); padding: 0.7rem 1rem; border-radius: var(--radius-btn); font-weight: 600; text-decoration: none; }
.skip:focus { left: 0.5rem; }

/* ---------- icons: 24 px strokes in currentColor (brand/kit/icons) ---------- */
.icon { width: 1.3em; height: 1.3em; flex: none; vertical-align: -0.3em; }
.icon--btn { width: 1.15em; height: 1.15em; margin-right: 0.5rem; vertical-align: -0.2em; }
.icon--service { width: 1.2em; height: 1.2em; margin-right: 0.55rem; vertical-align: -0.18em; color: var(--amber); }

/* ---------- buttons: apricot with kernel text; outlined; outlined on dark. 52 px tall, 10 px corners ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0; min-height: 52px; padding: 12px 1.4rem; border: 2px solid transparent; border-radius: var(--radius-btn);
       font: inherit; font-size: 18px; line-height: 24px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; color: var(--kernel); background: transparent; }
.btn--sun { background: var(--apricot); border-color: var(--apricot); color: var(--kernel); }
.btn--sun:hover { background: var(--apricot-hover); border-color: var(--apricot-hover); color: var(--kernel); }
.btn--ghost { border-color: var(--kernel); color: var(--kernel); background: var(--ground); }
.btn--ghost:hover { background: var(--wash); color: var(--kernel); }
.btn--ghost-light { border-color: var(--on-kernel); color: var(--on-kernel); background: transparent; }
.btn--ghost-light:hover { background: var(--kernel-2); color: var(--on-kernel); }
.btn--small { min-height: 44px; padding: 8px 1.1rem; font-size: 16px; line-height: 22px; }
.btn--wide { width: 100%; }

/* ---------- header: white with a kernel rule, the mark on the left ---------- */
.site-header { background: var(--ground); color: var(--kernel); border-bottom: 1px solid var(--rule); position: relative; z-index: 30; }
.site-header__inner { display: flex; align-items: center; gap: 0.5rem; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; min-height: 44px; text-decoration: none; color: var(--kernel); font-family: var(--font-head); font-weight: 700; font-size: 17px; line-height: 1.15; }
.brand svg, .brand .icon { width: 36px; height: 36px; flex: none; vertical-align: 0; }
.brand > span { font-size: 15px; line-height: 18px; max-width: 8.5rem; } /* two lines on a phone, one from 760 */
.site-nav { display: none; gap: 0.1rem; }
.site-nav a { color: var(--kernel); text-decoration: none; padding: 0.65rem 0.8rem; font-weight: 500; font-size: 17px; line-height: 24px; border-radius: var(--radius); }
.site-nav a:hover { background: var(--wash); color: var(--kernel); }
.site-header__call { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 44px; min-width: 44px; padding: 0 0.6rem; border-radius: var(--radius-btn);
  text-decoration: none; font-weight: 600; font-size: 17px; color: var(--amber); border: 2px solid var(--rule); }
.site-header__call:hover { background: var(--wash); color: var(--amber-deep); }
.site-header__call > span:not(.icon) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* icon only on a phone; the text comes back at 960 */
.site-header .btn--small { display: none; }
.menu { position: relative; border: 0; }
.menu summary::after { content: none; }
.menu summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0 0.8rem; border: 2px solid var(--rule); border-radius: var(--radius-btn); font-weight: 600; color: var(--kernel); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--wash); }
.menu nav { position: absolute; right: 0; top: calc(100% + 0.5rem); background: var(--ground); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 0.5rem; min-width: 17rem; display: grid; z-index: 40; }
.menu nav a { color: var(--kernel); text-decoration: none; padding: 0.75rem 0.9rem; min-height: 48px; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; border-radius: var(--radius); }
.menu nav a:hover { background: var(--wash); }
.menu nav a[href^='/get-quotes'] { background: var(--apricot); font-weight: 600; margin-top: 0.25rem; }
.menu nav a[href^='tel:'] { color: var(--amber); font-weight: 600; }

/* ---------- hero: copy, the two buttons, then the tray; the quote card below ---------- */
.hero { background: var(--ground); color: var(--kernel); padding: 1.25rem 0 0; }
.hero__inner { display: grid; grid-template-columns: 1fr; row-gap: 0.75rem; }
.hero__copy { max-width: 42rem; }
.hero h1 { margin-bottom: 0.5rem; }
.hero__range { font-family: var(--font-head); font-weight: 600; font-size: var(--t-price-size); line-height: var(--t-price-line); margin: 0 0 0.4rem; font-variant-numeric: lining-nums tabular-nums; max-width: 36rem; }
.hero__license { font-size: var(--t-small-size); line-height: var(--t-small-line); color: var(--husk); margin: 0 0 1rem; }
.hero__cta { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 0.75rem; }
.hero__cta .btn { width: 100%; }
.hero__art { margin: 0.25rem 0 0; }
.hero__art svg, .hero__art img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.hero__art figcaption { font-size: var(--t-small-size); line-height: var(--t-small-line); color: var(--husk); margin-top: 0.6rem; }
.hero__dek { margin: 0.5rem 0 0.5rem; }
.hero__card { margin: 0.5rem 0 2.25rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0 0 0.75rem; padding: 0; font-size: var(--t-small-size); line-height: var(--t-small-line); }
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: var(--rule); }
.crumbs a { color: var(--husk); }

/* ---------- the quote card: a white card with a wash field strip, 12 px corners, no shadow ---------- */
.quote-card { margin: 0; background: var(--ground); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.quote-card__title { font-family: var(--font-body); font-weight: 500; font-size: var(--t-small-size); line-height: var(--t-small-line); color: var(--husk); margin: 0; padding: 0.9rem 1rem 0; letter-spacing: 0; }
.quote-card__fields { display: grid; grid-template-columns: 1fr; gap: 0 0.75rem; padding: 0.5rem 1rem 0.9rem; background: var(--wash); margin-top: 0.6rem; }
.quote-card .cell { padding: 0.35rem 0; }
.quote-card .cell:first-child, .quote-card .cell--range { grid-column: 1 / -1; }
.quote-card .cell--range { padding-top: 0.6rem; }
.quote-card label { display: block; font-weight: 500; font-size: var(--t-small-size); line-height: var(--t-small-line); color: var(--husk); margin: 0; }
.quote-card select { margin-top: 0.3rem; }
.quote-card__range { margin: 0; font-weight: 500; font-size: var(--t-small-size); line-height: var(--t-small-line); color: var(--husk); }
.quote-card__range strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: var(--t-price-big-size); line-height: var(--t-price-big-line); color: var(--kernel); margin-top: 0.2rem; font-variant-numeric: lining-nums tabular-nums; }
.quote-card__foot { display: grid; gap: 0.9rem; padding: 1rem; }
.quote-card__actions { display: grid; gap: 0.6rem; }
.quote-card__text { max-width: 44rem; }
.quote-card__note, .quote-card__fine { margin: 0; }
.quote-card__note { font-size: var(--t-small-size); line-height: var(--t-small-line); color: var(--kernel); }
.quote-card__fine { color: var(--husk); margin-top: 0.25rem; }

/* ---------- the plain-facts band under the hero (no seals, no badges: four sentences with apricot dots) ---------- */
.seals-band { background: var(--wash); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.seals { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0.5rem 1.75rem; margin-block: 0; padding: 1rem 0; font-size: var(--t-small-size); line-height: var(--t-small-line); color: var(--husk); font-weight: 500; }
.seals li { display: flex; gap: 0.6rem; align-items: baseline; }
.seals li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--apricot); transform: translateY(-1px); }

/* ---------- lists ---------- */
.check { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.7rem; }
.check li { display: flex; gap: 0.7rem; align-items: baseline; }
.check li::before { content: ''; flex: none; width: 18px; height: 18px; transform: translateY(3px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5l4 4L15 5' fill='none' stroke='%239A4A12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.cell-list { margin: 0 0 0.4rem; padding-left: 1.1rem; }
.cell-list li + li { margin-top: 0.2rem; }
.related, .guide-list, .facts, .link-list { list-style: none; padding: 0; margin: 0; }
.related li, .guide-list li { border-top: 1px solid var(--rule); padding: 0.9rem 0; }
.related li:last-child, .guide-list li:last-child { border-bottom: 1px solid var(--rule); }
.related a, .guide-list a { font-family: var(--font-head); font-weight: 600; font-size: 19px; line-height: 26px; color: var(--kernel); text-decoration-color: var(--rule); }
.related a:hover, .guide-list a:hover { color: var(--amber); text-decoration-color: var(--amber); }
.related p, .guide-list p { margin: 0.2rem 0 0; color: var(--husk); font-size: var(--t-small-size); line-height: var(--t-small-line); }
.facts li { padding: 0.45rem 0; border-top: 1px solid var(--rule); }
.facts li:last-child { border-bottom: 1px solid var(--rule); }
.link-list li, .link-cols li { padding: 0.35rem 0; }
.link-cols { display: grid; grid-template-columns: 1fr; gap: 0 2rem; }
.link-cols ul { padding-left: 1.1rem; margin: 0; }
.sources { padding-left: 1.2rem; }
.sources li { overflow-wrap: anywhere; }
.sources li + li { margin-top: 0.3rem; }
.guide-group { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.wrap > .guide-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.city-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.city-list a { display: flex; align-items: center; min-height: 52px; padding: 0.6rem 1rem; background: var(--ground); border: 1px solid var(--rule); border-radius: var(--radius-btn); font-weight: 600; color: var(--kernel); text-decoration: none; }
.city-list a:hover { border-color: var(--amber); color: var(--amber); }
.section--wash .city-list a { background: var(--ground); }
.jump { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding: 0.6rem 0; font-size: 16px; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.8rem; border-radius: var(--radius-btn); color: var(--kernel); text-decoration: none; background: var(--wash); font-weight: 500; }
.jump a:hover { background: var(--apricot-pale); color: var(--amber-deep); }
.confirm-note { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--amber); font-weight: 600; }
.confirm-note .icon { color: var(--amber); }
.contact-address { font-style: normal; margin: 0 0 1rem; }

/* ---------- service rows ---------- */
.service-rows { border-top: 1px solid var(--rule); }
.service-row { display: grid; grid-template-columns: 1fr; gap: 0.35rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
.service-row h3 { font-size: 22px; line-height: 28px; margin: 0; }
.service-row h3 a { color: var(--kernel); text-decoration: none; display: inline-flex; align-items: baseline; }
.service-row h3 a:hover { color: var(--amber); text-decoration: underline; }
.service-row h3 .icon, .service-row h3 svg { color: var(--amber); width: 1.1em; height: 1.1em; margin-right: 0.5rem; align-self: center; }
.service-row p { margin: 0; }
.service-row__name .service-row__guide { margin-top: 0.4rem; font-size: var(--t-small-size); line-height: var(--t-small-line); }
.service-row__range { font-family: var(--font-head); font-weight: 600; font-size: 16px; line-height: 24px; font-variant-numeric: lining-nums tabular-nums; }

/* ---------- steps: slab numerals in amber ---------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0 0.75rem; align-items: start; }
.steps li::before { content: counter(step); grid-row: 1 / 3; font-family: var(--font-head); font-weight: 600; font-size: var(--t-numeral-size); line-height: var(--t-numeral-line); color: var(--amber); font-variant-numeric: lining-nums tabular-nums; }
.steps li h3 { margin: 0.1rem 0 0.25rem; }
.steps li p { margin: 0; grid-column: 2; }
.steps--compact { gap: 1.1rem; }
.steps--compact li { grid-template-columns: 2.5rem minmax(0, 1fr); }
.steps--compact li::before { font-size: 30px; line-height: 34px; }

/* ---------- tables: husk column heads, slat-tint rules; stack on phones ---------- */
.table-wrap { overflow-x: auto; margin: 0 0 1rem; }
table { width: 100%; border-collapse: collapse; }
thead th { text-align: left; font-size: var(--t-small-size); line-height: var(--t-small-line); font-weight: 500; color: var(--husk); border-bottom: 1px solid var(--kernel); padding: 0.55rem 1rem 0.55rem 0; }
tbody th, tbody td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); padding: 0.8rem 1rem 0.8rem 0; font-size: 17px; line-height: 26px; }
tbody th { font-weight: 600; }
tbody td:last-child, tbody th:last-child { padding-right: 0; }
@media (max-width: 720px) {
  table.stack thead { display: none; }
  table.stack tr { display: block; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
  table.stack th, table.stack td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; border: 0; padding: 0.3rem 0; }
  table.stack th::before, table.stack td::before { content: attr(data-label); font-weight: 500; color: var(--husk); font-size: var(--t-small-size); line-height: 22px; }
}

/* ---------- FAQ: details with a round apricot-pale indicator ---------- */
details { border-top: 1px solid var(--rule); }
details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq details:last-of-type, #faq details:last-of-type { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 0; min-height: 60px; }
summary::-webkit-details-marker { display: none; }
summary h3 { margin: 0; font-size: 19px; line-height: 26px; }
summary::after { content: '+'; flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--apricot-pale); color: var(--amber); font-family: var(--font-body); font-weight: 500; font-size: 26px; line-height: 1; }
details[open] summary::after { content: '\2013'; }
summary:hover::after { background: var(--apricot); color: var(--kernel); }
.faq__a { padding: 0 0 1.1rem; max-width: 64ch; }
.faq__a > :last-child { margin-bottom: 0; }
.faq__more { margin-top: 1.25rem; }

/* ---------- forms: 48 px fields, 6 px corners, husk borders, amber focus ---------- */
label { display: block; font-size: var(--t-small-size); line-height: var(--t-small-line); font-weight: 500; margin-bottom: 1rem; color: var(--kernel); }
input, select, textarea { display: block; width: 100%; margin-top: 0.35rem; min-height: 48px; padding: 0.55rem 0.8rem; border: 1.5px solid var(--husk); border-radius: 6px;
  background: var(--ground); color: var(--kernel); font: inherit; font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 24px; }
select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background: var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2119' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 0.75rem center / 20px no-repeat; }
textarea { min-height: 6rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--amber); outline-offset: 1px; border-color: var(--kernel); }
.opt { font-weight: 400; }
.row2 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.consent { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0.25rem; align-items: start; font-size: 15px; line-height: 22px; font-weight: 400; color: var(--kernel);
  border: 1px solid var(--rule); background: var(--wash); border-radius: var(--radius); padding: 0.85rem 0.9rem 0.85rem 0.5rem; margin: 0.25rem 0 1rem; }
.consent input { width: 24px; height: 24px; min-height: 0; margin: 0; justify-self: center; align-self: start; accent-color: var(--amber); border-radius: 4px; }
.consent span { padding-top: 1px; }
.consent a { color: var(--amber); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { background: var(--error-fill); color: var(--error); padding: 0.75rem 0.9rem; border: 1px solid #E8B4B0; border-radius: var(--radius); font-weight: 500; }
.lead-form { background: var(--ground); color: var(--kernel); padding: 1.25rem; border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.lead-form .fine { color: var(--husk); }
.quote-page { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.quote-page__aside h2 { font-size: var(--t-h3-size); line-height: var(--t-h3-line); }
.quote-page__aside .btn--ghost { margin-top: 0.35rem; }

/* ---------- the inquiry band: kernel, with the form on white ---------- */
.inquiry { background: var(--kernel); color: var(--on-kernel); padding: 2.75rem 0; }
.inquiry__inner { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.inquiry__copy p { color: var(--on-kernel-muted); max-width: 34rem; }
.inquiry__copy h2 { color: var(--on-kernel); }
.inquiry__copy a:not(.btn) { color: var(--apricot-light); }
.inquiry__copy .btn--ghost-light { margin-top: 0.25rem; }
.inquiry .lead-form { border-color: var(--kernel-2); }

/* ---------- page heads (guides, the form, the calculator): a quiet wash band ---------- */
.page-head { padding: 1.5rem 0 1.5rem; background: var(--wash); border-bottom: 1px solid var(--rule); }
.page-head .dek { color: var(--kernel); max-width: 42rem; margin-bottom: 0.25rem; }
.page-head h1 { margin-bottom: 0.5rem; }
.page-head .crumbs ol { margin-bottom: 1rem; }

/* ---------- callouts, covered box, figures ---------- */
.callout { background: var(--apricot-pale); color: var(--kernel); padding: 1.4rem 1.25rem; margin: 2rem 0 0.5rem; border-radius: var(--radius-lg); }
.callout h2 { font-size: 23px; line-height: 30px; margin-bottom: 0.4rem; }
.callout p { max-width: 50ch; }
.callout .btn { margin-top: 0.25rem; }
.covered { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--apricot-pale); border-radius: var(--radius); padding: 0.9rem 1rem; font-size: var(--t-small-size); line-height: var(--t-small-line); margin: 0; }
.covered > .icon, .covered > svg { color: var(--amber); margin-top: 0.1em; width: 1.5em; height: 1.5em; flex: none; }
.covered__cities { color: var(--husk); }
.covered__call { font-weight: 600; white-space: nowrap; display: inline-block; padding: 0.55rem 0; margin: -0.55rem 0; } /* a 44 px target without moving the line */
.figure { margin: 1.75rem 0 0.75rem; }
.figure svg, .figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--wash); }
.figure figcaption { margin-top: 0.6rem; }
.figure--photo .photo { aspect-ratio: 3 / 2; background: var(--wash); border-radius: var(--radius-lg); display: flex; align-items: flex-end; padding: 1rem; color: var(--husk); font-size: var(--t-small-size); }
.figure--small img { width: auto; max-width: 100%; }
.photo-band { padding: 1.5rem 0 0; }
.photo-band .figure { margin-top: 0; }
.photo-band .figure svg, .photo-band .figure img { aspect-ratio: 3 / 1; object-fit: cover; }

/* ---------- guides ---------- */
.guide { display: block; }
.guide > .guide-body > :first-child { margin-top: 0; }
.guide-head { padding-bottom: 1.5rem; }
.guide-meta { margin: 0 0 1.1rem; }
.guide-body { padding: 2rem 0 1rem; }
.glance { background: var(--wash); border-radius: var(--radius-lg); padding: 1rem 1.1rem 0.5rem; margin-bottom: 1.75rem; }
.glance h2 { font-family: var(--font-body); font-size: var(--t-small-size); line-height: var(--t-small-line); font-weight: 500; color: var(--husk); margin-bottom: 0.4rem; }
.glance dl { display: grid; grid-template-columns: 1fr; gap: 0 2rem; margin: 0; }
.glance div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.glance dt { color: var(--husk); }
.glance dd { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 16px; line-height: 22px; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.glance--area dl { grid-template-columns: 1fr; }
.glance--area div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 0.25rem 1rem; align-items: start; }
.glance--area dd { font-family: var(--font-body); font-weight: 500; text-align: left; overflow-wrap: anywhere; font-size: var(--t-small-size); line-height: var(--t-small-line); }
.toc { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 1rem 0; margin-bottom: 1rem; }
.toc h2 { font-family: var(--font-body); font-size: var(--t-small-size); line-height: var(--t-small-line); font-weight: 500; color: var(--husk); margin-bottom: 0.4rem; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; grid-template-columns: 1fr; gap: 0 2rem; }
.toc li { counter-increment: toc; display: flex; gap: 0.75rem; align-items: baseline; padding: 0.4rem 0; font-size: 16px; line-height: 24px; }
.toc li::before { content: counter(toc); flex: none; min-width: 1.4rem; font-family: var(--font-head); font-weight: 600; color: var(--amber); font-variant-numeric: lining-nums tabular-nums; }
.toc a { color: var(--kernel); text-decoration-color: var(--rule); }
.toc a:hover { color: var(--amber); text-decoration-color: var(--amber); }
.guide-section { padding-top: 2rem; }
.guide-section h2 { margin-bottom: 0.5em; }
.guide-section h3 { font-size: 19px; line-height: 26px; margin-top: 1.25rem; }
.guide-section .table-wrap { margin-top: 0.5rem; }

/* ---------- calculator: inputs on white, the result on kernel with apricot figures ---------- */
.calc { display: grid; grid-template-columns: 1fr; gap: 1rem; background: var(--ground); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1rem; margin-bottom: 1.75rem; }
.calc__inputs { display: grid; grid-template-columns: 1fr; gap: 0 1rem; align-content: start; }
.calc__inputs label:first-child { grid-column: 1 / -1; }
.calc__inputs [hidden] { display: none; }
.calc__out { background: var(--kernel); color: var(--on-kernel); padding: 1.25rem; display: grid; gap: 0.4rem; align-content: start; border-radius: var(--radius); }
/* Plain links only: the apricot button keeps its kernel text (the kit never sets white on apricot). */
.calc__out a:not(.btn) { color: var(--on-kernel); }
.calc__area { margin: 0; color: var(--on-kernel-muted); font-size: var(--t-small-size); line-height: var(--t-small-line); font-weight: 500; }
.calc__range { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: var(--t-price-big-size); line-height: var(--t-price-big-line); color: var(--apricot); font-variant-numeric: lining-nums tabular-nums; }
.calc__permit { margin: 0; font-size: var(--t-small-size); line-height: var(--t-small-line); color: var(--on-kernel-muted); }
.calc__out .btn { justify-self: start; margin-top: 0.6rem; }
.calc__check { display: flex; align-items: center; gap: 0.6rem; align-self: end; padding-bottom: 0.6rem; min-height: 44px; font-weight: 500; }
.calc__check input { width: 24px; height: 24px; min-height: 0; margin: 0; accent-color: var(--amber); }

/* ---------- footer: kernel, with the mark in white and the disclaimer verbatim ---------- */
.site-footer { background: var(--kernel); color: var(--on-kernel-muted); padding: 2.75rem 0 2rem; font-size: 16px; line-height: 24px; }
.site-footer a { color: var(--apricot-light); }
.site-footer a:hover { color: var(--on-kernel); }
.site-footer__brand { margin: 0 0 1rem; display: flex; align-items: center; gap: 10px; color: var(--on-kernel); font-family: var(--font-head); font-weight: 700; font-size: 19px; }
.site-footer__brand svg, .site-footer__brand .icon { width: 36px; height: 36px; }
.site-footer__nap { font-style: normal; margin: 0.5rem 0 0.25rem; color: var(--on-kernel); }
.site-footer__phone { margin: 0 0 0.75rem; }
.site-footer__phone a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 18px; }
.site-footer__license { max-width: 60ch; }
.site-footer__disclaimer { max-width: 72ch; font-size: var(--t-tiny-size); line-height: var(--t-tiny-line); color: var(--on-kernel-muted); }
.footer-cols { display: grid; grid-template-columns: 1fr; gap: 1.25rem 2rem; margin: 2rem 0; border-top: 1px solid var(--kernel-2); padding-top: 1.5rem; }
.footer-cols h2 { font-family: var(--font-body); font-size: var(--t-small-size); line-height: var(--t-small-line); font-weight: 500; color: var(--on-kernel-muted); margin-bottom: 0.25rem; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li a { display: inline-block; padding: 10px 0; line-height: 24px; color: var(--on-kernel); text-decoration-color: var(--kernel-2); }
.footer-cols li a:hover { color: var(--apricot-light); text-decoration-color: var(--apricot-light); }
.site-footer .site-footer__legal { color: var(--on-kernel-muted); margin: 0; font-size: var(--t-tiny-size); line-height: var(--t-tiny-line); }

/* ---------- analytics consent bar: fixed below the first screen's buttons, kernel with an apricot Accept ---------- */
.consent-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between;
  padding: 0.75rem var(--gutter); background: var(--kernel); color: var(--on-kernel); font-size: 15px; line-height: 22px; border-top: 1px solid var(--kernel-2); }
.consent-bar[hidden] { display: none; }
.consent-bar p { margin: 0; max-width: 60ch; }
.consent-bar a { color: var(--apricot-light); }
.consent-bar__actions { display: flex; gap: 0.5rem; }

/* ---------- 760 and up: two columns where there is room ---------- */
@media (min-width: 760px) {
  .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .link-cols, .toc ol, .glance dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance--area dl { grid-template-columns: 1fr; }
  .glance--area div { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
  .city-list { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
  .seals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .steps--compact { grid-template-columns: 1fr; gap: 1.1rem; }
  .service-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr); padding: 1.4rem 0; }
  .quote-card__fields { grid-template-columns: 1fr 1fr 1fr 1.6fr; gap: 0 1.25rem; padding: 0.75rem 1.25rem 1rem; }
  .quote-card .cell:first-child, .quote-card .cell--range { grid-column: auto; }
  .quote-card .cell--range { padding-top: 0.35rem; }
  .quote-card__title { padding: 1rem 1.25rem 0; }
  .quote-card__foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem 2rem; padding: 1rem 1.25rem 1.1rem; }
  .quote-card__actions { grid-auto-flow: column; }
  .lead-form { padding: 1.75rem; }
  .calc { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem; }
  .calc__inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callout { padding: 1.75rem; }
  .inquiry { padding: 4rem 0; }
  .inquiry__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
  .quote-page { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; }
  .page-head { padding: 2.5rem 0 2rem; }
  .guide-body { padding: 2.5rem 0 1rem; }
  .hero { padding-top: 2rem; }
  .hero__cta { flex-direction: row; }
  .hero__cta .btn { width: auto; min-width: 12rem; }
  .brand { font-size: 19px; }
  .brand > span { font-size: 19px; line-height: 24px; max-width: none; }
  .brand svg, .brand .icon { width: 40px; height: 40px; }
  .site-header__inner { min-height: 76px; gap: 0.75rem; }
  .site-header .btn--small { display: inline-flex; }
}

/* ---------- 960 and up: the nav shows, the hero is copy beside the tray with the card across both ---------- */
@media (min-width: 960px) {
  .site-nav { display: flex; }
  .site-header__call > span:not(.icon) { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .site-header__call { border-color: transparent; padding: 0 0.75rem; }
  .menu { display: none; }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); grid-template-areas: 'copy art' 'dek art' 'card card'; column-gap: 3rem; row-gap: 0; align-items: start; }
  .hero__copy { grid-area: copy; }
  .hero__art { grid-area: art; align-self: start; margin: 0; }
  .hero__dek { grid-area: dek; align-self: end; margin: 0 0 2.5rem; max-width: 36rem; }
  .hero__card { grid-area: card; margin: -2rem 0 2.5rem; }
  .hero__card .quote-card { background: var(--ground); }
  .hero__cta { margin-bottom: 1.5rem; }
  .seals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}