/* Georgia Cost Guide: porch blue and peach (brand picked with Eric, Mon 11/9/2026; the kit is in
   ~/georgia-cost-guide/docs/brand). Peach is a fill only (range bars, price tags, little peaches, link underlines), never
   text: it is 2.0:1 on white. scripts/qa.mjs checks every text color pair below against the brand's passing list. */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("fonts/rubik-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("fonts/rubik-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --porch: #d7ece8;      /* porch-ceiling blue: top bands, the circle behind each icon */
  --ink: #1f3f4a;        /* deep porch blue: headings, text, buttons */
  --ink-hover: #163039;  /* a button under the pointer */
  --peach: #f4a27e;      /* a fill only */
  --peach-deep: #e07f5a; /* peach shading; never text */
  --leaf: #3c7a55;       /* check marks */
  --muted: #3e5c64;      /* small and secondary text */
  --nav: #4a6670;        /* header links */
  --line: #e3eeec;       /* rules and the line under the header */
  --edge: #c9dfda;       /* card, chip and field borders: one step darker than --line, so a white card shows on white */
  --surface: #f2f8f7;    /* pale porch panels */
  --peach-soft: #fde9df; /* the home page's price menu band: a pale peach fill */
  --peach-mid: #fbd3c0;  /* the price menu's dental and cosmetic headings */
  --leaf-soft: #dcefe3;  /* the price menu's car headings */
  --on-ink: #c9d6d9;     /* small text on the deep porch blue footer */
  --error: #a3271c;      /* form errors, on white and on porch blue */
  --bg: #ffffff;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(31, 63, 74, .06), 0 6px 18px rgba(31, 63, 74, .07);
  --font: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* faint porch-ceiling beadboard: a groove and a lighter bead every 36px */
  --beadboard: repeating-linear-gradient(90deg, transparent 0 34px, rgba(31, 63, 74, .06) 34px 35px, rgba(255, 255, 255, .55) 35px 36px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 17px; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
p { margin: 0 0 1rem; text-wrap: pretty; }
li, dd { text-wrap: pretty; }
a { color: var(--ink); text-decoration-color: var(--peach); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.2; color: var(--ink); font-weight: 700; text-wrap: balance; }
h3 { font-weight: 600; }
strong, b { font-weight: 600; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 .6rem; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 0 0 .6rem; letter-spacing: -0.005em; }
h3 { font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.nowrap, .nw { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 12px; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; stroke-width: 1.75; }
.icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--porch); color: var(--ink); flex: none; }
.icon-tile .icon { width: 1.3rem; height: 1.3rem; }
/* the trade's soft 3D icon (its own porch-blue circle is part of the picture) */
.h-icon { width: 44px; height: 44px; flex: none; }

/* white header: the logo and the name, the links, then the trade chips */
.demo-bar { background: var(--ink); color: #fff; text-align: center; font-size: .85rem; padding: 6px 16px; }
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 8px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.22rem; letter-spacing: -0.01em; }
.brand-logo { width: auto; height: 46px; }
.site-nav { display: flex; gap: 20px; flex-wrap: wrap; font-size: .95rem; font-weight: 500; }
.site-nav a { color: var(--nav); text-decoration: none; display: inline-block; padding: 10px 0; margin: -10px 0; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--peach); }
.chips { position: relative; display: flex; gap: 8px; overflow-x: auto; padding-top: 4px; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
/* computers: one "Prices by trade" button opens every trade, in the price menu's groups (launch review, Eric 11/10);
   phones keep the single scrolling row of chips */
.header-inner { position: relative; }
.site-nav { margin-left: auto; }
.trade-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; background: var(--porch); color: var(--ink); font-weight: 500; font-size: .95rem; white-space: nowrap; user-select: none; }
.trade-menu summary::-webkit-details-marker { display: none; }
.trade-menu summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.trade-menu summary:hover { background: var(--edge); }
.trade-menu[open] summary { background: var(--ink); color: #fff; }
.trade-menu[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.trade-menu summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.trade-panel { position: absolute; z-index: 30; top: calc(100% + 2px); left: 20px; right: 20px; background: #fff; border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(31, 63, 74, .18); padding: 4px 22px 22px; }
/* a closed details still lays its content out inside its own contained box, where the panel would sit off the page edge */
.trade-menu:not([open]) .trade-panel { display: none; }
.trade-group { margin: 16px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.trade-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 641px) { .chips { display: none; } .header-inner { padding-bottom: 12px; } }
@media (max-width: 640px) { .trade-menu { display: none; } }
/* tablets: the links stay on one row beside the button. "Guides" drops the trade's name (a screen reader still hears
   it), "All trades" goes below 761px (the breadcrumb and the button cover it) and "About our prices" below 701px. */
@media (min-width: 641px) and (max-width: 1000px) {
  .site-nav .nav-trade { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-nav .nav-guides { text-transform: capitalize; }
}
@media (min-width: 641px) and (max-width: 760px) { .site-nav a.nav-all { display: none; } }
@media (min-width: 641px) and (max-width: 700px) { .site-nav a.nav-about { display: none; } }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border: 1px solid var(--edge); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.chip img { width: 26px; height: 26px; }
.chip:hover { border-color: var(--ink); }
.chip[aria-current] { background: var(--porch); border-color: var(--porch); font-weight: 500; }

/* porch-blue bands with faint beadboard: a groove and a lighter bead every 36px, like a porch ceiling */
.page-band { background-color: var(--porch); background-image: var(--beadboard); color: var(--ink); padding: 22px 0 34px; }
.page-band h1 { max-width: 820px; }
.page-band .lede { color: var(--muted); font-size: 1.12rem; max-width: 760px; margin-bottom: .9rem; }
.page-band .answer-lead { color: var(--ink); font-size: 1.18rem; font-weight: 500; line-height: 1.5; max-width: 760px; margin: 0 0 .7rem; }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); text-decoration-color: rgba(31, 63, 74, .35); display: inline-block; padding: 6px 0; margin: -6px 0; }
.crumbs [aria-current] { display: inline-block; }
.byline { color: var(--muted); font-size: .9rem; margin: 0; }
.byline a { color: var(--ink); font-weight: 500; }
.article-head .byline { margin: .35rem 0 .9rem; }
/* Trade and job pages: the words on the left and the trade's photo on the right, with a peach price tag hanging from the
   photo's corner (stacked below 761px, where the photo turns into a short wide strip under the words). */
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 761px) { .band-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); gap: 44px; align-items: center; } }
.hero-photo { position: relative; margin: 0; }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; background: var(--edge); box-shadow: 0 2px 4px rgba(31, 63, 74, .08), 0 14px 32px rgba(31, 63, 74, .16); }
/* a stand-in tile (the trade's icon on white, until the trade has an approved photo) is shown whole, never cropped */
.hero-photo--icon img { object-fit: contain; object-position: 4% 50%; background: #fff; }
.tag { position: absolute; top: 22px; right: -14px; max-width: min(17rem, 86%); transform: rotate(4deg); transform-origin: 0 50%; filter: drop-shadow(0 3px 4px rgba(31, 63, 74, .28)); }
/* the string, from the tag's hole up to a pin at the top of the photo (a thin light edge keeps it visible on a dark photo) */
.tag::before { content: ""; position: absolute; left: 14px; bottom: 50%; width: 2px; height: 56px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); transform: rotate(-28deg); transform-origin: 50% 100%; }
.tag::after { content: ""; position: absolute; left: -15px; top: calc(50% - 53px); width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); }
.tag-body { position: relative; display: flex; flex-direction: column; padding: 8px 16px 9px 32px; border-radius: 4px 8px 8px 4px; background: var(--peach); color: var(--ink); line-height: 1.25; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); }
.tag-body::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--peach-deep); }
.tag-label { font-size: .8rem; font-weight: 500; }
.tag-price { font-size: 1.22rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tag-price .p-unit { color: var(--ink); font-size: .8rem; }
@media (max-width: 760px) {
  .hero-photo img { aspect-ratio: 5 / 2; border-radius: 14px; }
  .tag { top: 14px; right: 12px; }
}
.hero { padding: 34px 0 40px; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
.stat { display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: var(--radius); padding: 10px 14px; margin: 4px 0 0; color: var(--ink); box-shadow: var(--shadow); }
.stat .icon { width: 1.4rem; height: 1.4rem; }
.stat strong { font-size: 1.2rem; font-weight: 700; }
/* Home hero: the question on the left, the most-searched Georgia prices on the right (audit D13); stacked below 901px. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 901px) { .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 40px; } }
.popular { background: #fff; border-radius: 16px; padding: 16px 20px; box-shadow: var(--shadow); }
.popular h2 { font-size: 1.1rem; margin: 0 0 6px; }
.popular ul { list-style: none; margin: 0; padding: 0; }
/* a range too long to sit beside its job name (a 320px phone) drops to its own line instead of leaving the card */
.popular li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.popular li:first-child { border-top: 0; }
.popular a { color: var(--ink); text-decoration: none; }
.popular a:hover { text-decoration: underline; text-decoration-color: var(--peach); }
.popular .pop-range { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.popular .pop-note { margin: 8px 0 0; font-size: .82rem; color: var(--muted); }

/* price cards and bars */
.short { padding-top: 30px; }
.answer { margin: 0 0 14px; max-width: 70ch; }
.answer p { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.checked { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); margin-bottom: 14px; }
.checked .icon { color: var(--muted); margin-top: 4px; }
.cards { display: grid; gap: 14px; margin: 14px 0 8px; }
.cols-1 { grid-template-columns: minmax(0, 1fr); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-3 > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.pcard { position: relative; border: 1px solid var(--edge); border-radius: var(--radius); padding: 16px 18px; background: var(--bg); display: flex; flex-direction: column; box-shadow: var(--shadow); }
.pcard p { margin: 0; }
.pcard-label { color: var(--muted); font-size: .95rem; font-weight: 500; }
/* on a job page the label is an H3 (it names the search), drawn the same as the plain label */
h3.pcard-label { margin: 0; line-height: inherit; text-wrap: wrap; }
.pcard-price { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; margin-top: 2px !important; }
/* On a job page the range is the number the visitor came for: larger than the section heading above it (audit D5). */
.job-short .pcard-price { font-size: clamp(1.75rem, 3.6vw, 2.4rem); letter-spacing: -0.01em; }
.pcard-alt { font-size: .9rem; color: var(--muted); }
.pcard-more { margin-top: 10px; font-size: .92rem; font-weight: 500; align-self: flex-start; }
/* the whole card is the link: the link's ::after covers the card */
.pcard-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pcard:has(.pcard-more:hover) { border-color: var(--ink); }
.pcard:has(.pcard-more:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
@supports selector(:has(a)) { .pcard-more:focus-visible { outline: none; } }
.p-unit { font-size: .9rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.pcard-foot { flex: 1; display: flex; flex-direction: column; }
.pcard-foot > .pcard-more:first-child { margin-top: auto; padding-top: 10px; }
.bar-block { margin-top: auto; padding-top: 10px; }
.bar-mid { position: relative; height: 1.35em; margin: 0 !important; font-size: .8rem; font-weight: 500; color: var(--ink); }
.bar-mid span { position: absolute; bottom: 0; left: var(--pos); transform: translateX(calc(var(--pos) * -1)); white-space: nowrap; }
/* A card's bar is its range, low to high, in peach; the dot marks the middle price. */
.bar { position: relative; height: 10px; border-radius: 5px; background: var(--peach); margin: 6px 0; }
.bar-dot { position: absolute; top: 50%; left: clamp(8px, var(--pos), calc(100% - 8px)); width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); box-shadow: 0 1px 2px rgba(31, 63, 74, .35); transform: translate(-50%, -50%); }
.ticks { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; margin: 0 !important; }
.quick-note { font-size: .92rem; color: var(--muted); margin: 10px 0 0; }
/* Little peaches: one for each business behind a price, up to 30, then "and N more"; the line under them says the count.
   Up to 16 sit on one row and more split into two even rows (the template sets the row's width), so no peach sits alone;
   a capped row is three rows of 10, which leaves room beside it for "and N more" on a phone. */
.pcard .peaches { margin-top: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 8px; row-gap: 3px; }
.peach-row { display: flex; flex-wrap: wrap; gap: 1px 2px; }
.peach-row i { width: 14px; height: 16px; background: url("img/little-peach.webp") center / contain no-repeat; }
.peach-more { font-size: .8rem; font-weight: 500; color: var(--muted); line-height: 16px; }
.peach-count { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }

/* quote strip, jump chips, job sections */
.quote-strip { background: var(--peach); margin-top: 32px; }
.quote-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.quote-strip p { margin: 0; font-weight: 600; color: var(--ink); }
.btn { display: inline-block; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; padding: 11px 18px; border-radius: 10px; }
.btn:hover { background: var(--ink-hover); color: #fff; }
.jump { padding-top: 24px; }
.jump ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jump a { display: inline-block; padding: 6px 13px; border: 1px solid var(--edge); border-radius: 999px; background: #fff; text-decoration: none; font-size: .9rem; color: var(--ink); }
.jump a:hover { border-color: var(--ink); }
.job { padding-top: 48px; scroll-margin-top: 12px; }
.job + .job { position: relative; margin-top: 40px; padding-top: 40px; }
.job + .job::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; border-top: 1px solid var(--line); }
.job > p, .job-intro, .quick-note, .in-short, .steps-list, .checks { max-width: 68ch; } /* 45 to 75 characters a line (audit D11) */
.job-title { display: flex; align-items: center; gap: 12px; }
.no-range { background: var(--surface); border-left: 4px solid var(--peach); border-radius: 6px; padding: 12px 16px; max-width: 800px; color: var(--ink); }
.no-range a { font-weight: 600; margin-left: 4px; white-space: nowrap; }
.in-short { color: var(--muted); }
.checks { list-style: none; padding: 0; margin: 6px 0 0; }
.checks li { position: relative; padding-left: 28px; margin: 7px 0; }
.checks li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--leaf); border-bottom: 2.5px solid var(--leaf); transform: rotate(-45deg); }
.drivers { margin: 6px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.drivers > div { background: var(--surface); border-radius: 10px; padding: 12px 14px; }
.drivers > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.drivers dt { font-weight: 600; }
.drivers dd { margin: 3px 0 0; color: var(--muted); font-size: .95rem; }
.steps-list { padding-left: 1.4rem; margin: 6px 0 0; }
.steps-list li { margin: 7px 0; padding-left: 4px; }
.steps-list li::marker { font-weight: 700; }

/* tables: med spa menus and the method section */
.price-table, .method-table { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-size: .97rem; }
.price-table th, .price-table td, .method-table th, .method-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table th, .method-table th { font-size: .82rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--ink); }
.price-table tbody th, .method-table tbody th { font-size: inherit; font-weight: 400; color: inherit; border-bottom: 1px solid var(--line); }
.price-table { table-layout: fixed; }
.price-table th:nth-child(1) { width: 40%; }
.price-table .t-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.price-table .bar { height: 7px; }
.price-table .bar-dot { width: 14px; height: 14px; border-width: 2px; }
.price-table .ticks { display: none; }
/* One scale per table: every row's bar is a full-width light track (the shared axis). The peach segment runs from --lo for --w
   (percent of the track); the dot and the "middle" label sit at --abs, the median's place on the shared axis. The label uses the
   cards' contain-the-dot rule, so a segment at either end can never push it outside the table. A phone hides the bar and prints the
   median as text (t-mid) in the price cell. The range text beside each bar carries the same numbers. */
.price-table { --t-amt: 10.5rem; --t-gap: 16px; }
.price-table .bar { background: var(--line); }
.price-table .bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--lo); width: max(var(--w), 6px); border-radius: 4px; background: var(--peach); }
.price-table .bar-mid span { left: var(--abs); transform: translateX(calc(var(--abs) * -1)); }
.price-table .bar-dot { left: clamp(7px, var(--abs), calc(100% - 7px)); }
.price-table tbody tr:hover { background: var(--surface); }
.price-table .t-mid, .price-table .scale-ends { display: none; }
@media (min-width: 641px) {
  /* the range text sits to the left of its bar; the header's scale ends sit over the same bar column */
  .price-table .t-cell { display: grid; grid-template-columns: var(--t-amt) minmax(0, 1fr); column-gap: var(--t-gap); align-items: end; }
  .price-table .bar-block { margin-top: 0; padding-top: 0; }
  /* the service name, the range text and the track share one baseline: bottom aligned, with the track centered on the text line */
  .price-table td { vertical-align: bottom; line-height: 1.4; }
  /* the service name sits on the range line; the middle price and the bar share the line below */
  .price-table tbody th { vertical-align: top; line-height: 1.4; padding-top: 10px; }
  /* a row with a range but no bar (another unit than the table's scale) has no bar-mid label, so it keeps its median as text */
  .price-table .t-mid--solo { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); }
  /* The middle price reads as text under each range, so a row has one baseline instead of a floating label (audit D6). */
  .price-table .t-mid { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); }
  .price-table .bar-mid { display: none; }
  .price-table th:nth-child(1) { width: 30%; }
  .price-table .bar { margin-bottom: 8px; }
  .price-table .scale-ends { display: flex; justify-content: space-between; gap: 8px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
}
.method-table { max-width: 800px; table-layout: fixed; }
.method-table th:nth-child(1) { width: 50%; }
.method-table .nw { white-space: normal; }
.method-table td:last-child { color: var(--muted); }
.method-more summary { cursor: pointer; font-weight: 500; margin: 10px 0; }

/* quote form: a porch-blue box, white fields, a deep porch blue button */
.quote-box { margin-top: 48px; background: var(--porch); color: var(--ink); border-radius: 18px; padding: 28px 26px; }
.quote-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quote-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: .95rem; color: var(--ink); }
.quote-form input, .quote-form select, .quote-form textarea { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--edge); background: #fff; color: var(--ink); height: 48px; width: 100%; min-width: 0; }
.quote-form textarea { height: auto; min-height: 88px; resize: vertical; }
.quote-form .wide, .quote-form .contact-method, .quote-form .consent, .quote-form .form-status { grid-column: 1 / -1; }
.quote-form .contact-method { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.quote-form .contact-method legend { padding: 0; margin-bottom: 6px; font-weight: 500; font-size: .95rem; color: var(--ink); }
.quote-form .contact-method label { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.quote-form .contact-method input { width: 20px; height: 20px; padding: 0; accent-color: var(--ink); }
.quote-form [aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.quote-form .field-error { color: var(--error); font-size: .88rem; font-weight: 500; }
.quote-form .contact-method .field-error { flex-basis: 100%; }
.quote-form .hint { font-weight: 400; font-size: .85rem; color: var(--muted); }
.quote-form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quote-form .consent { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--muted); }
.quote-form button { grid-column: 1 / -1; font: inherit; font-weight: 600; height: 48px; border-radius: 10px; border: 0; background: var(--ink); color: #fff; cursor: pointer; }
.quote-form button:hover { background: var(--ink-hover); }
.quote-form button:disabled { opacity: .7; cursor: wait; }
.quote-form .form-status { margin: 0; min-height: 1.4em; font-size: .92rem; color: var(--muted); }
.quote-form .form-status.is-error { color: var(--error); font-weight: 500; }
.form-done { padding: 6px 0 2px; }
.form-done h3 { margin: 0 0 6px; }
.form-done p { margin: 0; }

/* guides */
/* written guides only (11/10): card-sized boxes that fill a row as a trade gets more guides */
.guide-cards { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.guides-prices { margin-top: 14px; }
/* the guides webpage: one short block per trade, side by side */
.guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 34px 24px; padding-top: 40px; padding-bottom: 48px; }
.guides-trade { scroll-margin-top: 12px; }
.guides-trade h2 { font-size: 1.3rem; margin: 0; }
.guides-trade .guide-cards { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.guides-trade .guides-prices { margin: 12px 0 0; }
.guide-card { border-radius: var(--radius); }
.guide-card.is-live a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 16px 18px; border: 1px solid var(--edge); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); text-decoration: none; }
.guide-card.is-live a:hover { border-color: var(--ink); }
.guide-card.is-live .guide-title { font-weight: 600; font-size: 1.05rem; text-wrap: balance; }
.guide-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; }
.guides-page { padding-top: 30px; }

/* home: the price menu (Eric 11/9, "price menu", with more color than white). A pale peach band; a section per group in
   its own color (--g); a card per trade with its first prices on dotted leaders, the way a menu lists dishes. Two columns
   of cards from 761px, one below; a phone shows each trade's first two prices. */
.section-title { margin-top: 44px; }
.g-home { --g: var(--porch); }
.g-care { --g: var(--peach-mid); }
.g-cars { --g: var(--leaf-soft); }
.menu-band { background: var(--peach-soft); padding: 2px 0 40px; }
.menu-band .section-title { margin-top: 38px; }
.menu-intro { color: var(--muted); max-width: 680px; margin: 4px 0 16px; }
.menu-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-jump a { padding: 7px 16px; border-radius: 999px; background: var(--g); color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; box-shadow: 0 1px 2px rgba(31, 63, 74, .08); }
.menu-jump a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.menu-group { margin-top: 30px; scroll-margin-top: 12px; }
.menu-group-title { display: inline-block; margin: 0 0 14px; padding: 6px 16px; border-radius: 12px; background: var(--g); font-size: 1.3rem; }
.menu-cards { display: grid; gap: 14px; }
.menu-card { break-inside: avoid; background: #fff; border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.menu-trade { margin: 0; padding: 10px 18px; background: var(--g); font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.menu-trade a { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.menu-trade a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.menu-trade img { width: 46px; height: 46px; padding: 4px; border-radius: 50%; background: #fff; flex: none; }
.menu-items { list-style: none; margin: 0; padding: 6px 18px 2px; }
.menu-items li { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; }
.menu-items a { color: var(--ink); text-decoration: none; }
.menu-items a:hover { text-decoration: underline; text-decoration-color: var(--peach); }
.menu-dots { flex: 1 1 auto; min-width: 14px; border-bottom: 2px dotted var(--peach-deep); opacity: .7; }
.menu-price { flex: none; max-width: 58%; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.menu-price .p-unit { font-weight: 500; font-size: .8rem; color: var(--muted); }
.menu-more { display: inline-block; margin: 0 18px 14px; font-size: .92rem; font-weight: 600; }
@media (min-width: 761px) { .menu-cards { display: block; columns: 2; column-gap: 18px; } .menu-card { margin: 0 0 18px; } }
/* how our prices work: white cards on a porch band, like the top of the page */
.how-band { background-color: var(--porch); background-image: var(--beadboard); padding: 2px 0 44px; }
.how-steps { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.how-steps li { background: #fff; border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.how-steps .icon-tile { background: var(--peach-soft); }
.how-steps h3 { margin: 10px 0 6px; }
.how-steps p { margin: 0; color: var(--muted); font-size: .95rem; }

/* guide article */
.article-head > *, .article > * { max-width: 760px; } /* left edge lines up with the header (audit D22) */
.article { padding-top: 28px; }
.article ul, .article ol { margin-bottom: 1.1rem; }
.article h2 { margin-top: 32px; font-size: 1.4rem; }
/* About page: the publisher and the person who runs it, each with a picture (trust items, 2026-11-09) */
.about-who { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin: 14px 0 22px; max-width: 760px; }
.about-who h3 { margin: 0 0 6px; }
.about-who p { margin: 0 0 10px; }
.about-logo { width: 112px; height: 112px; }
.about-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.about-links { font-size: .95rem; }
@media (max-width: 560px) { .about-who { grid-template-columns: 1fr; gap: 12px; } .about-photo { width: 128px; height: 128px; } .about-logo { width: 96px; height: 96px; } }
.article-foot { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; }
.guide-end { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; padding: 18px; border: 1px solid var(--edge); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.guide-end .h-icon { width: 56px; height: 56px; }
.guide-end p { margin: 0; color: var(--muted); font-size: .95rem; }
.guide-end .guide-end-title { font-weight: 600; color: var(--ink); font-size: 1.02rem; margin-bottom: 4px; }

.related-links { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.related-links a { display: inline-block; padding: 8px 14px; border: 1px solid var(--edge); border-radius: 999px; background: #fff; text-decoration: none; font-size: .95rem; }
.related-links a:hover { border-color: var(--ink); }
.guide-end .related-links { margin-top: 12px; }
.guide-end .guide-end-cta { margin-top: 14px; }

/* footer: deep porch blue */
.site-footer { margin-top: 64px; background: var(--ink); color: #fff; padding: 36px 0 42px; font-size: .95rem; }
.site-footer a { color: #fff; text-decoration-color: var(--peach); }
.site-footer :focus-visible { outline-color: var(--peach); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 40px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 14px !important; font-weight: 700; font-size: 1.15rem; }
.footer-brand img { width: auto; height: 40px; }
.site-footer .fine { color: var(--on-ink); font-size: .88rem; margin: 0; }
.footer-trades { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.footer-trades a { display: inline-block; padding: 7px 0; }

/* A card alone on its row is a wide card: label, price and peaches on the left, bar on the right. The price and foot wrappers
   dissolve (display: contents), so their children place on the card's own two-column grid. */
@media (min-width: 641px) {
  .cols-1 > .pcard, .cols-3 > .pcard:last-child:nth-child(3n + 1) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 32px; align-items: center; }
  .cols-1 > .pcard > :is(.pcard-top, .pcard-foot), .cols-3 > .pcard:last-child:nth-child(3n + 1) > :is(.pcard-top, .pcard-foot) { display: contents; }
  .cols-1 > .pcard :is(.pcard-label, .pcard-price, .pcard-alt, .peaches, .pcard-more), .cols-3 > .pcard:last-child:nth-child(3n + 1) :is(.pcard-label, .pcard-price, .pcard-alt, .peaches, .pcard-more) { grid-column: 1; }
  .cols-1 > .pcard .bar-block, .cols-3 > .pcard:last-child:nth-child(3n + 1) .bar-block { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; padding-top: 0; }
  /* A lone figure with no range (a job page's price, the short answer or a section card on a trade page) has no bar to fill column 2,
     so the card shrinks to its content. */
  .cols-1 > .pcard--nobar { display: flex; align-items: flex-start; width: fit-content; min-width: min(100%, 22rem); }
}
/* Tablet: every card grid is one column of wide cards (no 2 + 1 rows) */
@media (min-width: 641px) and (max-width: 900px) {
  .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .cols-2 > .pcard, .cols-3 > .pcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 32px; align-items: center; }
  .cols-2 > .pcard > :is(.pcard-top, .pcard-foot), .cols-3 > .pcard > :is(.pcard-top, .pcard-foot) { display: contents; }
  .cols-2 > .pcard :is(.pcard-label, .pcard-price, .pcard-alt, .peaches, .pcard-more), .cols-3 > .pcard :is(.pcard-label, .pcard-price, .pcard-alt, .peaches, .pcard-more) { grid-column: 1; }
  .cols-2 > .pcard .bar-block, .cols-3 > .pcard .bar-block { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; padding-top: 0; }
}
/* Desktop: cards side by side share three row tracks (label, price, bar), so the prices and the bars line up across a row even when
   one label wraps to two lines. The lone last card of a three-column grid is a wide card and is left out. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .cols-2 > .pcard, .cols-3 > .pcard:not(:last-child:nth-child(3n + 1)) { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  }
}
/* tablet */
@media (max-width: 900px) {
  .how-steps { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
}
/* phone */
@media (max-width: 640px) {
  /* A shorter page head, so the price cards come up sooner on a phone (audit D1). */
  .job-head .lede { font-size: 1rem; line-height: 1.5; }
  .page-band .answer-lead { font-size: 1.06rem; }
  body { font-size: 16px; }
  .cols-1, .cols-2, .cols-3, .drivers, .quote-form { grid-template-columns: minmax(0, 1fr); }
  .drivers > div:last-child:nth-child(odd) { grid-column: auto; }
  .page-band { padding-bottom: 24px; }
  .job-head h1 { font-size: 1.65rem; }
  .quote-box { padding: 20px 16px; }
  .price-table .bar-block { display: none; }
  .legend-dot { display: none; } /* phone tables show no bars, so no dot to explain */
  .price-table .t-mid { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); }
  .price-table th:nth-child(1) { width: 58%; }
  .jump ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .jump li { flex: none; }
  .site-nav a.nav-all, .site-nav a.nav-about { display: none; }
  .header-inner { flex-wrap: nowrap; gap: 12px; }
  .brand { flex: none; white-space: nowrap; font-size: 1.05rem; gap: 8px; }
  .brand-logo { height: 40px; }
  .site-nav { font-size: .88rem; justify-content: flex-end; text-align: right; }
  /* "Painting and pressure washing guides" takes four lines beside the name on a phone: it shows "Guides", and a screen
     reader still hears the trade */
  .site-nav .nav-trade { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-nav .nav-guides { text-transform: capitalize; }
  .method-table thead { display: none; }
  .method-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .method-table td, .method-table tbody th { display: block; border: 0; padding: 0; }
  .method-table tbody th:nth-child(1) { width: auto; }
  /* The column header is hidden on phones, so each count says what it counts (the same words as the header). */
  .method-table td::before { content: "Businesses that post a price: "; }
  .drivers > div { background: none; border-radius: 0; padding: 10px 0; border-top: 1px solid var(--line); }
  /* Shorter phone pages (audit D10): the range text already names both ends of the bar. */
  .pcard .ticks { display: none; }
  /* The price menu on a phone: smaller card heads and each trade's first two prices (the trade page has the rest), so 19
     cards stay short. */
  .menu-band .section-title { margin-top: 30px; }
  .menu-trade { padding: 8px 14px; font-size: 1.08rem; }
  .menu-trade img { width: 38px; height: 38px; padding: 3px; }
  .menu-items { padding: 4px 14px 0; }
  .menu-items li { padding: 6px 0; }
  .menu-items li:nth-child(n + 3) { display: none; }
  .menu-more { margin: 0 14px 12px; }
  /* Rows that scroll sideways fade at the edge, so it shows there is more (audit D16). */
  .chips, .jump ul { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
/* 360px phones: the widest headline range ($10,900 to $15,000+) needs a little less type to stay whole in its card */
@media (max-width: 380px) { .pcard-price, .job-short .pcard-price { font-size: 1.3rem; } .tag-price { font-size: 1.08rem; } }
.guides-jobs { padding-top: 28px; padding-bottom: 40px; }
.job-price-list { list-style: none; margin: 10px 0 0; padding: 0; max-width: 800px; }
.job-price-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.jpl-range { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }