/* home-services template v2. Two colors come from the data file (--primary, --accent); the hero
   background comes from --hero (a trade photo when one exists, else a designed SVG). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: #1c2128; background: #fff;
  font: 16px/1.6 "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3 { font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif; font-weight: 700; line-height: 1.1; margin: 0 0 .4em; letter-spacing: .005em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--primary); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.muted { color: #5b6470; }
.small { font-size: .9rem; }
.kicker { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 600; margin: 0 0 10px; opacity: .85; }
section { padding: 56px 0; }
.sec-head { margin-bottom: 24px; }
.sec-head p { margin: 0; }
.hp { position: absolute; left: -9999px; }
.show-sm { display: none; }
@media (max-width: 560px) { .hide-sm { display: none; } .show-sm { display: inline; } .preview-banner { padding: 7px 12px; font-size: 13px; gap: 6px 12px; } }

/* icons */
.ic { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -.15em; flex: none; }
.ic-btn { margin-right: .45em; }
.ic-sm { width: 1em; height: 1em; margin-right: .4em; }
.ic-card, .ic-why { width: 32px; height: 32px; color: var(--primary); margin-bottom: 10px; display: block; }
.ic-logo { width: 26px; height: 26px; color: var(--accent); margin-right: 8px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; border: 2px solid transparent; line-height: 1.2; cursor: pointer; font-family: inherit; font-size: 1rem; }
.btn-lg { padding: 15px 24px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-accent { background: var(--accent); color: var(--accent-ink, #151a20); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.7); }
.btn-ghost-dark { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* preview banner */
.preview-banner { background: #fff4d6; color: #5a4300; border-bottom: 2px solid var(--own-accent); padding: 9px 16px; font-size: 14px; display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; }
.preview-banner a { color: inherit; }
.preview-claim { font-weight: 700; white-space: nowrap; }

/* top bar */
.top { background: #fff; border-bottom: 1px solid #e6e9ed; position: sticky; top: 0; z-index: 20; }
.top-row { display: flex; align-items: center; gap: 20px; height: 64px; }
.logo { display: flex; align-items: center; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.35rem; color: #1c2128; text-decoration: none; min-width: 0; }
.logo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-nav { display: none; gap: 22px; margin-left: auto; }
.top-nav a { color: #1c2128; text-decoration: none; font-weight: 500; }
.top-call { margin-left: auto; white-space: nowrap; }
.top-call .ic-btn { margin-right: .4em; }
@media (min-width: 900px) { .top-nav { display: flex; } .top-call { margin-left: 0; } }
@media (max-width: 560px) { .top-call { padding: 10px 14px; font-size: .95rem; } }

/* hero */
.hero { position: relative; color: #fff; padding: 64px 0 56px; background: var(--primary); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--hero) var(--hero-pos, center)/cover no-repeat; opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.25) 100%); }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.3fr .9fr; gap: 56px; } }
.hero-photo { display: none; }
.hero-copy h1 { text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.lede { font-size: 1.15rem; max-width: 34em; opacity: .95; }
/* The owner's tagline (editor, "Tagline"), one line under the headline; review 2026-10-08. Light-hero looks set it in the brand color. */
.tagline { font-size: 1.22rem; font-weight: 600; line-height: 1.35; max-width: 34em; margin: -.15em 0 .7em; }
.style-classic .tagline { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--primary); }
.style-clean .tagline { color: var(--primary); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 20px; }
.trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .95rem; font-weight: 500; }
.trust li { display: inline-flex; align-items: center; }
.stars { color: #ffb400; letter-spacing: .05em; }
.stars.big { font-size: 1.5rem; }
.trust-stars { font-weight: 600; }

.quote-card { background: #fff; color: #1c2128; border-radius: 12px; padding: 22px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.quote-card h2 { font-size: 1.6rem; margin-bottom: 2px; }
.quote-card .muted { margin-bottom: 12px; }
form label { display: block; margin: 0 0 12px; font-weight: 600; font-size: .95rem; }
form input, form textarea { display: block; width: 100%; padding: 11px 12px; margin-top: 5px; border: 1px solid #c9cfd6; border-radius: 8px; font: inherit; font-weight: 400; background: #fff; }
/* What people type is regular weight (Alan, 2026-10-15: it came out bold because the box sat inside its bold label).
   A switched-off form (previews) keeps its words readable: browsers fade disabled boxes on their own. */
form input:disabled:not([type=file]):not([type=checkbox]), form textarea:disabled, form select:disabled { opacity: 1; }
form input:focus, form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.form-disabled input, .form-disabled textarea { background: #f3f5f7; }
.form-note { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; font-size: .9rem; color: #5b6470; }
.form-note .ic-sm { color: var(--accent); margin-top: .2em; }
.q-call { display: none; margin: -6px 0 12px; font-size: .95rem; color: #5b6470; }
.q-call a { color: var(--primary); font-weight: 700; white-space: nowrap; }
:is(.style-classic, .style-frame) .q-call { display: block; }

/* services */
.services { background: #fff; }
.service-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.service-grid li { background: #fff; border: 1px solid #e3e7eb; border-radius: 12px; padding: 20px; transition: transform .15s, box-shadow .15s; }
.service-grid li:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.service-grid p { margin: 0; color: #5b6470; font-size: .95rem; }

/* work band */
.work { background: #fff; padding-top: 0; }
.work-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.work-grid li { margin: 0; border-radius: 12px; overflow: hidden; background: #e3e7eb; aspect-ratio: 3 / 2; }
.work-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .work-grid { grid-template-columns: 1fr 1fr; } .work-grid li:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } }

.work-grid.n2 { grid-template-columns: 1fr 1fr; }
.work-grid.n1 { grid-template-columns: 1fr; max-width: 760px; } .work-grid.n1 li { aspect-ratio: 16 / 9; }
/* Recent jobs (Growth and Pro, 2026-10-08): the owner's photo, then the service, town and month, then their one line. */
.jobs-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.job-card { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.08); color: #1c2128; }
.job-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #e3e7eb; }
.job-body { padding: 12px 14px 14px; }
.job-meta { margin: 0 0 4px; font-size: .9rem; }
.job-meta a { color: inherit; }
.job-line { margin: 0; line-height: 1.45; }
.jobs-note { margin: 0 0 14px; } .jobs-note .growth-tag { margin-right: 6px; } .jobs-note .sample-tag { margin: 6px 0 0; }
.jobs-grid + .work-grid { margin-top: 16px; }
.town-work { padding-top: 48px; }
.work-note { margin: 4px 0 0; font-size: .92rem; color: #5b6470; }
.work-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* The owner's own photos: a grid that opens full size. The home page opens with the first 8; "See all N photos" unfolds the rest in place (2026-10-15). */
.work-grid.own { grid-template-columns: repeat(4, 1fr); }
.work-grid.folded li.more { display: none; }
.work-more { margin: 16px 0 0; text-align: center; } .work-more .btn { padding: 10px 18px; }
.work-grid.own.n1 { grid-template-columns: 1fr; } .work-grid.own.n2, .work-grid.own.n4 { grid-template-columns: 1fr 1fr; } .work-grid.own.n3, .work-grid.own.n5, .work-grid.own.n6 { grid-template-columns: repeat(3, 1fr); }
.work-grid.own.n5 li:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 560px) { .work-grid.own { grid-template-columns: 1fr 1fr !important; } .work-grid.own li:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; } .work-grid.own.n2 li:first-child, .work-grid.own.n4 li:first-child, .work-grid.own.n6 li:first-child, .work-grid.own.n8 li:first-child { grid-column: auto; aspect-ratio: 3 / 2; } }
.work-count { display: none; }
/* Phones, 5+ own photos: one swipeable row (next photo peeks in) instead of a tall stack. Never auto-advances. */
@media (max-width: 560px) {
  .work-grid.own.swipe { display: flex !important; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .work-grid.own.swipe::-webkit-scrollbar { display: none; }
  .work-grid.own.swipe li, .work-grid.own.swipe li:first-child { flex: 0 0 84%; aspect-ratio: 4 / 3; grid-column: auto; scroll-snap-align: start; }
  .work-count { display: block; margin: 10px 0 0; font-size: .88rem; color: #5b6470; }
}
.work-open { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.work-open:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.work-open img { transition: transform .25s; } .work-open:hover img { transform: scale(1.03); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(10, 14, 22, .92); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 92vw; max-height: 84vh; border-radius: 8px; object-fit: contain; }
.lightbox button { position: absolute; background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 999px; width: 48px; height: 48px; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: rgba(255,255,255,.26); }
.lb-x { top: 16px; right: 16px; font-size: 20px !important; } .lb-prev { left: 16px; top: 50%; transform: translateY(-50%); } .lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-n { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #cfd6df; font-size: .9rem; margin: 0; }
@media (max-width: 560px) { .work-grid.n2 li:first-child { grid-column: auto; aspect-ratio: 3 / 2; } }

/* photo band: the photo stays put while the page scrolls over it ("window" effect). Fixed backgrounds don't
   work on iPhones and repaint badly on touch devices, so there — and with reduced motion — it scrolls normally. */
.band-sec { padding: 0; }
.band-sec + .work { padding-top: 56px; }
.band { position: relative; min-height: 400px; display: grid; place-items: center; text-align: center; color: #fff;
  background: var(--band) center/cover no-repeat fixed; overflow: hidden; }
/* Phones get the 1200-wide copy of our band photo when the page names one (pipeline/phone-images.mjs). */
@media (max-width: 760px) { .band { background-image: var(--band-m, var(--band)); } }
.band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)); }
.band-inner { position: relative; z-index: 1; max-width: 760px; padding: 56px 20px; }
.band-line { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 700; font-size: clamp(1.7rem, 4.2vw, 2.7rem); line-height: 1.1; margin: 0 0 22px; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
@media (hover: none), (max-width: 900px), (prefers-reduced-motion: reduce) { .band { background-attachment: scroll; min-height: 320px; } }
.style-classic .band-sec { background: var(--cream); padding: 0 20px; }
.style-classic .band { max-width: 1080px; margin: 0 auto; border-radius: 4px; box-shadow: 10px 10px 0 var(--accent); }
.style-classic .band-line { font-family: var(--serif); font-weight: 700; }
.style-classic .band .btn { border-radius: 4px; }
.style-clean .band-sec { padding: 8px 20px; }
.style-clean .band { max-width: 1080px; margin: 0 auto; border-radius: 16px; }
.style-clean .band::before { background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.5)); }

/* before / after (drag to compare) */
.ba { background: #f4f6f8; }
.ba-box { --ba: 50%; position: relative; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: #e3e7eb; user-select: none; }
.ba-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-before { clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
.ba-box input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; z-index: 3; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--ba); width: 3px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events: none; z-index: 2; }
.ba-handle::after { content: "⇔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #1c2128; font-size: 20px; line-height: 44px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.ba-tag { position: absolute; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: .8rem; font-weight: 600; z-index: 2; pointer-events: none; }
.ba-tag-l { left: 12px; } .ba-tag-r { right: 12px; }
.ba-cap { margin: 10px 0 20px; }

/* motion: a slow zoom on the hero photo, content easing in as it scrolls into view. All CSS; the script only
   adds the "in" class. Nothing is hidden without JS (html.js gates it) and reduced-motion turns it all off. */
.hero::before { animation: hero-zoom 22s ease-out both; }
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-copy > * { animation: rise .45s ease-out both; }
.hero-copy > *:nth-child(2) { animation-delay: .05s; } .hero-copy > *:nth-child(3) { animation-delay: .1s; } .hero-copy > *:nth-child(4) { animation-delay: .15s; } .hero-copy > *:nth-child(5) { animation-delay: .2s; }
@keyframes rise { from { opacity: .4; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Content is never hidden waiting for a scroll: the reveal is a short rise from .55 opacity, and the script adds .in to everything after 900 ms regardless. */
.js:not(.no-io) .reveal { opacity: .55; transform: translateY(10px); transition: opacity .35s ease-out, transform .35s ease-out; }
.js:not(.no-io) .reveal.in { opacity: 1; transform: none; }
.js:not(.no-io) .service-grid li.reveal:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero-copy > * { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* why */
.why { background: #f4f6f8; }
.why-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.why-grid p { margin: 0; color: #5b6470; font-size: .95rem; }

/* reviews */
.reviews { background: var(--primary); color: #fff; }
.review-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-bottom: 28px; }
.big-rating { font-family: "Barlow Condensed", sans-serif; font-size: 4.5rem; font-weight: 700; line-height: 1; }
.review-summary .muted { color: rgba(255,255,255,.85); margin: 4px 0 0; }
.reviews .btn-ghost-dark { color: #fff; border-color: rgba(255,255,255,.7); margin-left: auto; }
.review-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.review-list li { background: rgba(255,255,255,.1); border-radius: 12px; padding: 18px 20px; }
.review-list blockquote { margin: 6px 0 8px; font-size: 1.05rem; }
.review-list cite { font-style: normal; opacity: .85; font-size: .9rem; }
.review-face { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 10px; background: rgba(127,127,127,.2); }

/* about + area */
.two-col { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; } /* the area card is as tall as what it holds, never a tall empty panel */
@media (min-width: 900px) { .two-col { grid-template-columns: 1.2fr .8fr; gap: 56px; } }
.h-sub { margin-top: 20px; }
.hours { border-collapse: collapse; }
.hours th { text-align: left; padding: 3px 28px 3px 0; font-weight: 600; }
.hours td { padding: 3px 0; }
.area-card { background: #f4f6f8; border-radius: 12px; padding: 24px; }
.towns { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.towns li { background: #fff; border: 1px solid #dfe4e9; border-radius: 999px; padding: 4px 12px; font-size: .9rem; }
.towns li a { color: inherit; text-decoration: none; } .towns li a:hover { text-decoration: underline; }
/* town pages (2026-10-08): the services list links each service to its page */
.town-svcs a { color: var(--primary); font-weight: 600; }

/* faq */
.faq { background: #fff; }
details { border-bottom: 1px solid #e6e9ed; padding: 14px 0; }
summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; }
/* Heading + action on the left, content on the right: keeps the page's left edge and a readable line length. */
.split-head .muted { margin: 8px 0 18px; }
.split-body { max-width: 720px; }
@media (min-width: 860px) {
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; }
  .split-head { position: sticky; top: 96px; }
}
@media (max-width: 859px) { .split-head { margin-bottom: 20px; } .split-head .btn { display: none; } }
.faq-head { margin-bottom: 20px; } .faq-head .muted { margin: 6px 0 0; }
.faq-list details:first-child { border-top: 1px solid #e6e9ed; }
.faq-list details p { max-width: 72ch; }
.faq-more { margin: 22px 0 0; } .faq-more a { color: inherit; font-weight: 700; white-space: nowrap; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--primary); font-size: 1.2rem; font-weight: 600; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
details p { margin: 10px 0 0; color: #3d4652; }

/* offer (previews only) */
.offer { background: #151a20; color: #fff; scroll-margin-top: 64px; }
.offer-box { max-width: 820px; margin: 0 auto; text-align: center; }
.offer .kicker { color: var(--accent-text, var(--accent)); }
.offer p { max-width: 42em; margin-left: auto; margin-right: auto; }
.tiers { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); text-align: left; }
.tiers li { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; position: relative; transition: border-color .15s, background .15s, transform .15s; }
.tiers li a { display: flex; flex-direction: column; gap: 4px; padding: 16px; color: inherit; text-decoration: none; height: 100%; }
.tiers li:hover { border-color: var(--accent); background: rgba(255,255,255,.12); transform: translateY(-2px); }
.promise { background: rgba(255,255,255,.08); border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 0 0 18px; line-height: 1.45; }
/* 30-day guarantee (2026-10-09): sales pages only, never after purchase. Under the plans with a 30px shield in a
   tinted circle since 2026-10-12, as an emoji (Alan) (outside review: the small shield was easy to miss; no gold seal). */
.offer .promise { display: flex; gap: 14px; align-items: flex-start; text-align: left; max-width: 36em; margin: 0 auto 20px; }
.g-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 28%, transparent); font-size: 28px; line-height: 1; }
.guarantee { display: block; margin: 0 0 4px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-text, var(--accent)); }
.ic-g { width: 30px; height: 30px; margin: 0; vertical-align: 0; }
.promise strong { font-family: "Barlow Condensed", sans-serif; font-size: 1.25rem; letter-spacing: .01em; margin-right: 6px; }
.tier-feats { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; font-size: .9rem; opacity: .9; }
.tier-feats li { background: none; border: 0; padding: 0 0 0 1.1em; position: relative; line-height: 1.35; }
.tier-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-text, var(--accent)); font-weight: 700; }
.tier-math { font-size: .82rem; opacity: .75; margin-top: 8px; font-style: italic; }
.tiers .tier-go { margin-top: auto; font-weight: 700; color: var(--accent-text, var(--accent)); opacity: 1 !important; font-size: .95rem !important; }
.tier-badge { position: absolute; top: -11px; right: 14px; background: var(--accent); color: var(--accent-ink, #151a20); font-style: normal; font-weight: 700; font-size: .75rem; padding: 2px 10px; border-radius: 999px; }
.tier-note { margin-top: -8px; }
.tiers li strong { font-family: "Barlow Condensed", sans-serif; font-size: 1.25rem; }
.tiers li span { font-size: .9rem; opacity: .85; }
.tiers li span.price { font-size: 2rem; opacity: 1; }
.tiers .price { font-family: "Barlow Condensed", sans-serif; font-size: 2rem; font-weight: 700; line-height: 1; }
.tiers .price small { font-size: 1rem; font-weight: 500; opacity: .8; }
.tiers .price .was { text-decoration: line-through; font-size: 1rem; font-weight: 500; opacity: .6; margin-right: 6px; }
.tier-hi { border-color: var(--accent) !important; box-shadow: inset 0 3px 0 var(--accent); }
.offer .muted { color: rgba(255,255,255,.6); margin-top: 14px; }
.offer-more { margin-top: 14px; font-size: .9rem; }
.offer-more a { color: rgba(255,255,255,.7); }
/* Each card's own button (2026-10-12): the whole card is the link; this just shows where to tap and what it costs. */
.tiers .tier-go { display: block; text-align: center; margin-top: auto; padding: 11px 14px; border-radius: 8px; border: 2px solid var(--accent); color: var(--accent-text, var(--accent)); }
.tiers .tier-hi .tier-go { background: var(--accent); color: var(--accent-ink, #151a20); }

/* footer */
footer { background: #1c2128; color: #c9d1d9; padding: 36px 0 90px; font-size: .95rem; }
footer a { color: #fff; }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.foot-name { font-family: "Barlow Condensed", sans-serif; font-size: 1.4rem; font-weight: 700; color: #fff; margin: 0 0 6px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 16px; }
.foot-links a { text-decoration: none; }
.foot-note { margin-top: 24px; font-size: .85rem; color: #8b949e; }
footer .muted { color: #8b949e; }

/* sticky mobile bar */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid #e6e9ed; backdrop-filter: blur(6px); }
.sticky-bar .btn { padding: 13px 10px; font-size: .98rem; }
@media (min-width: 900px) { .sticky-bar { display: none; } footer { padding-bottom: 36px; } }

/* ---------- look switcher (previews only) ---------- */
.look-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: #c9d1d9; font-size: .88rem; }
.look-label { margin-right: 4px; }
.look-bar button { font: inherit; font-weight: 600; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 4px 13px; cursor: pointer; }
.look-bar button[aria-pressed="true"] { background: var(--own-accent); color: var(--own-ink); border-color: var(--own-accent); cursor: default; }

/* ---------- Looks. One template, three looks: body.style-bold (the base rules above), .style-classic,
   .style-clean. Same content, same phone number, same tracking — only layout and feel change. ---------- */

/* Classic: cream page, serif headings, a framed photo beside the copy, estimate strip underneath. */
.style-classic { --serif: Georgia, "Times New Roman", Times, serif; --cream: #f7f4ee; --cream-2: #ebe6da; }
.style-classic h1, .style-classic h2, .style-classic h3, .style-classic .logo, .style-classic .foot-name, .style-classic .big-rating, .style-classic .tiers li strong, .style-classic .tiers .price { font-family: var(--serif); letter-spacing: 0; }
.style-classic h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12; }
.style-classic .btn { border-radius: 4px; }
.style-classic .top { border-bottom: 3px solid var(--primary); }
.style-classic .hero { background: var(--cream); color: #1c2128; padding: 48px 0 0; }
.style-classic .hero::before, .style-classic .hero::after { display: none; }
.style-classic .hero-copy h1 { text-shadow: none; color: var(--primary); }
.style-classic .kicker { color: #6b6250; opacity: 1; }
.style-classic .lede { opacity: 1; color: #3d4652; }
.style-classic .btn-ghost { background: transparent; color: var(--primary); border-color: var(--primary); }
.style-classic .hero-grid { gap: 28px; grid-template-areas: "copy" "photo" "quote"; grid-template-columns: 1fr; }
@media (min-width: 900px) { .style-classic .hero-grid { grid-template-columns: 1.1fr .9fr; grid-template-areas: "copy photo" "quote quote"; align-items: center; gap: 28px 48px; } }
.style-classic .hero-copy { grid-area: copy; padding-bottom: 8px; }
.style-classic .hero-photo { display: block; grid-area: photo; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--hero) var(--hero-pos, center)/cover no-repeat; box-shadow: 10px 10px 0 var(--accent); margin-right: 10px; margin-bottom: 10px; animation: rise .8s ease-out both; }
.style-classic .work { background: var(--cream); padding-top: 48px; }
.style-classic .work-grid li, .style-classic .ba-box { border-radius: 4px; }
.style-classic .ba { background: #fff; }
/* Classic's form is a light panel with a thin navy border and a serif heading (outside review Alan passed on,
   2026-10-14): the dark block read like a form dropped into an editorial page. */
.style-classic .hero { padding-bottom: 44px; }
.style-classic .quote-card { grid-area: quote; background: #fffdf8; color: #1c2128; border: 1px solid var(--primary); border-radius: 4px; box-shadow: none; padding: 22px 26px 22px; margin-top: 16px; }
.style-classic .quote-card h2 { color: var(--primary); }
.style-classic .quote-card .muted, .style-classic .form-note { color: #5b6470; }
.style-classic .form-note a { color: var(--primary); }
.style-classic .quote-card .btn-primary { background: var(--accent); color: var(--accent-ink, #151a20); }
/* The wide form under the hero: Classic, and Frame since 2026-10-14 (outside review: "beautiful editorial hero first, form second"). */
@media (min-width: 900px) {
  :is(.style-classic, .style-frame) .quote-card { display: grid; grid-template-columns: 1fr 2.4fr; grid-template-rows: auto auto 1fr; gap: 6px 36px; align-items: start; }
  :is(.style-classic, .style-frame) .quote-card h2 { grid-column: 1; margin: 0; font-size: 1.5rem; }
  :is(.style-classic, .style-frame) .quote-card .muted { grid-column: 1; margin: 0; font-size: .95rem; }
  :is(.style-classic, .style-frame) .quote-card form { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px 12px; align-items: end; }
  :is(.style-classic, .style-frame) .quote-card .f-row { display: contents; }
  :is(.style-classic, .style-frame) .quote-card .f-msg { grid-column: span 2; }
  :is(.style-classic, .style-frame) .quote-card form:not(:has(.f-photos)) .f-msg { grid-column: span 3; }
  :is(.style-classic, .style-frame) .quote-card form label { margin: 0; }
  :is(.style-classic, .style-frame) .quote-card .f-photos { grid-column: span 1; align-self: center; }
  /* the texting box sits right under name + phone (2026-10-11); dense lets the message box fill the row beside them */
  :is(.style-classic, .style-frame) .quote-card form { grid-auto-flow: row dense; }
  :is(.style-classic, .style-frame) .quote-card form .f-consent { grid-column: 1 / span 2; }
  :is(.style-classic, .style-frame) .quote-card .f-photo-btn { white-space: nowrap; }
  :is(.style-classic, .style-frame) .quote-card textarea { height: 46px; min-height: 46px; resize: none; }
  :is(.style-classic, .style-frame) .quote-card .btn-block { width: 100%; padding: 12px 18px; }
  :is(.style-classic, .style-frame) .quote-card .q-call { grid-column: 1; margin: 10px 0 0; }
  :is(.style-classic, .style-frame) .quote-card .btn-block { white-space: nowrap; }
  :is(.style-classic, .style-frame) .form-note { grid-column: 2; margin-top: 2px; }
}
.style-classic .services { border-top: 1px solid var(--cream-2); }
.style-classic .service-grid li, .style-classic .area-card, .style-classic .review-list li { border-radius: 4px; }
.style-classic .why { background: var(--cream); }
.style-classic .reviews { background: #fff; color: #1c2128; border-top: 1px solid var(--cream-2); border-bottom: 1px solid var(--cream-2); }
.style-classic .review-summary .muted { color: #5b6470; }
.style-classic .reviews .btn-ghost-dark { color: var(--primary); border-color: var(--primary); }
.style-classic .review-list li { background: var(--cream); }
.style-classic .review-list blockquote { font-family: var(--serif); font-style: italic; }
.style-classic .area-card { background: var(--cream); }
.style-classic .towns li { border-color: var(--cream-2); }
.style-classic .stars { color: #c9a227; }

/* Clean: light tinted page, no photo hero, rounded and airy. The photo becomes a wide strip under the hero. */
.style-clean .btn { border-radius: 999px; }
.style-clean .top { border-bottom: 0; border-top: 4px solid var(--primary); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.style-clean .hero { background: var(--tint); color: #1c2128; padding: 56px 0 48px; }
.style-clean .hero::before { background: radial-gradient(circle at 85% 15%, var(--tint-2), transparent 45%); }
.style-clean .hero::after { display: none; }
.style-clean .hero-copy h1 { text-shadow: none; }
.style-clean .kicker { color: var(--primary); opacity: 1; }
.style-clean .lede { opacity: 1; color: #3d4652; }
.style-clean .btn-ghost { background: #fff; color: var(--primary); border-color: var(--primary); }
.style-clean .hero-grid { grid-template-areas: "copy" "quote" "photo"; grid-template-columns: 1fr; }
@media (min-width: 900px) { .style-clean .hero-grid { grid-template-columns: 1.3fr .9fr; grid-template-areas: "copy quote" "photo photo"; } }
.style-clean .hero-copy { grid-area: copy; }
.style-clean .quote-card { grid-area: quote; box-shadow: none; border: 1px solid var(--tint-2); border-radius: 16px; }
.style-clean .hero-photo { display: block; grid-area: photo; aspect-ratio: 16 / 9; border-radius: 16px; background: var(--hero) var(--hero-pos, center)/cover no-repeat; animation: rise .8s ease-out both; }
.style-clean .work-grid li, .style-clean .ba-box { border-radius: 16px; }
.style-clean .ba { background: var(--tint); }
@media (min-width: 900px) { .style-clean .hero-photo { aspect-ratio: 5 / 2; } }
.style-clean section { padding: 64px 0; }
.style-clean .service-grid li { background: var(--tint); border-color: transparent; border-radius: 16px; }
.style-clean .why { background: #fff; }
.style-clean .why-grid li { background: var(--tint); border-radius: 16px; padding: 20px; }
.style-clean .reviews { background: #fff; color: #1c2128; border-top: 1px solid var(--tint-2); border-bottom: 1px solid var(--tint-2); }
.style-clean .review-summary .muted { color: #5b6470; }
.style-clean .reviews .btn-ghost-dark { color: var(--primary); border-color: var(--primary); }
.style-clean .review-list li { background: var(--tint); border-radius: 16px; }
.style-clean .area-card { background: var(--tint); border-radius: 16px; }
.style-clean .towns li { border-color: var(--tint-2); }
.style-clean .offer { background: var(--primary); }
.style-clean .offer .kicker { color: #fff; opacity: .8; }

/* ---------- conversion pieces: preview sample notes, quote form fields, how it works, final call ---------- */
.sample-note { margin: 14px 0 0; font-size: .85rem; opacity: .8; font-style: italic; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.f-row .f-zip { max-width: none; }
form select { display: block; width: 100%; padding: 11px 10px; margin-top: 5px; border: 1px solid #c9cfd6; border-radius: 8px; font: inherit; font-weight: 400; background: #fff; }
.form-disabled select { background: #f3f5f7; }
.f-photos { position: relative; }
.f-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.f-photo-btn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; font-weight: 600; font-size: .92rem; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.f-photo-btn small { font-weight: 400; text-decoration: none; color: #5b6470; }
.f-file:focus-visible + .f-photo-btn { outline: 2px solid var(--primary); outline-offset: 1px; }
.form-disabled .f-photo-btn { opacity: .6; cursor: not-allowed; }
.quote-card form label { margin-bottom: 10px; }
.how { background: #fff; }
.how-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: none; }
.how-steps li { position: relative; padding: 18px 18px 16px; border: 1px solid #e3e7eb; border-radius: 12px; }
.how-steps p { margin: 0; color: #5b6470; font-size: .95rem; }
.how-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; margin-bottom: 10px; }
.final-cta { background: var(--primary); color: #fff; }
.final-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.final-row h2 { margin-bottom: 6px; }
.final-row p { margin: 0; max-width: 36em; opacity: .92; }
.final-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.style-classic .how-steps li { border-radius: 4px; background: var(--cream); border-color: var(--cream-2); }
.style-classic .how-n { border-radius: 4px; font-family: var(--serif); }
.style-classic .final-cta { background: var(--cream); color: #1c2128; border-top: 3px solid var(--primary); }
.style-classic .final-cta h2 { color: var(--primary); }
.style-classic .final-cta .btn-ghost { color: var(--primary); border-color: var(--primary); background: transparent; }
.style-clean .how-steps li { border-radius: 16px; background: var(--tint); border-color: transparent; }
.style-clean .final-cta { background: var(--tint); color: #1c2128; }
.style-clean .final-cta .btn-ghost { color: var(--primary); border-color: var(--primary); background: #fff; }
.review-list cite a { color: inherit; }
.review-attrib { margin: 14px 0 0; font-size: .85rem; opacity: .8; }
.review-attrib a { color: inherit; }
.style-classic .review-attrib a, .style-clean .review-attrib a { color: var(--primary); }

/* ---------- our preview chrome (previews only) ----------
   Everything that speaks to the OWNER rather than to their customers — the panel at the top, the "Make this my
   website" bar, the look and color switchers — wears lookatyournewsite's own navy and amber, never the client's
   palette. Otherwise our purchase button and their call button are the same color and compete, and the overlay
   reads as part of their site. (2026-10-06, raised in both reviews.) */
.is-preview { --own: #14213d; --own-accent: #fca311; --own-ink: #151a20; }
.owner { background: var(--own); color: #e6e9ed; padding: 22px 0 20px; border-bottom: 3px solid var(--own-accent); }
.owner-in { display: grid; gap: 14px 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .owner-in { grid-template-columns: 1fr auto; } }
.owner-hi { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.55rem; line-height: 1.1; color: #fff; margin: 0 0 6px; }
.owner-why { margin: 0 0 14px; max-width: 46em; }
.owner-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
/* The dismiss affordance: an × in the corner rather than a third button competing with the two real actions. */
.owner-in { position: relative; }
.owner-main { padding-right: 44px; }
.owner-x { position: absolute; top: -2px; right: 0; width: 40px; height: 40px; padding: 0; font: inherit; font-size: 1.7rem;
  line-height: 1; color: rgba(255,255,255,.7); background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.owner-x:hover { color: #fff; background: rgba(255,255,255,.12); }
.owner-x:focus-visible { outline: 3px solid var(--own-accent, #fca311); outline-offset: 2px; }
.owner.is-min .owner-x { display: none; }
.owner-keep { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.owner-note { margin: 0; font-size: .85rem; color: #aab3c0; max-width: 46em; }
.owner .unconf { text-decoration-color: rgba(255,255,255,.7); }
.owner-mini { display: none; margin: 0; font-size: .92rem; }
.owner-mini a { color: #fff; font-weight: 600; }
/* "Learn more", not a "?": it has to read as something that opens (Alan, 2026-10-11) */
.owner-mini-more { margin-left: 6px; text-transform: none; letter-spacing: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.owner.is-min { padding: 9px 0; }
.owner.is-min .owner-main { display: none; }
.owner.is-min .owner-mini { display: block; }
.owner.is-min .owner-in { grid-template-columns: 1fr auto; }
@media (max-width: 899px) { .owner.is-min .look-bar .look-label { display: none; } }
/* unconfirmed claim on a preview: a quiet dotted underline, explained in the owner panel */
.unconf { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: help; }
.sticky-bar.one { grid-template-columns: 1fr; }
.top-nav a { white-space: nowrap; }
.top-nav { gap: 18px; }
.logo { flex: 1 1 auto; }
@media (min-width: 900px) and (max-width: 1180px) { .top-nav a[href="#reviews"] { display: none; } }
.owner-mini { white-space: nowrap; display: none; gap: 14px; align-items: center; }
.owner.is-min .owner-mini { display: flex; }
@media (max-width: 560px) {
  .owner.is-min .look-bar button { padding: 3px 10px; font-size: .82rem; }
  .preview-claim { display: none; }
  .preview-banner { padding: 6px 12px; }
}
.owner.is-min .look-bar { flex-wrap: nowrap; }
@media (max-width: 440px) { .owner.is-min .owner-in { gap: 8px; } .owner.is-min .owner-mini { font-size: .85rem; gap: 10px; } }
.owner-tag { margin: 0 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--own-accent); }
.owner-tag a { color: inherit; }
.owner-mini-tag { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--own-accent); background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; text-align: left; white-space: normal; }
.owner-mini a { white-space: nowrap; }
.embedded .owner, .embedded .sticky-bar { display: none !important; }
/* and inside the owner's editor (workers/forms editorShell): just their site, none of our own chrome */
.embedded .chat-launch, .embedded .chat, .embedded .pvbar, .embedded .draft-bar, .embedded .yours-sec, .embedded .offer { display: none !important; }
.owner-asof { color: #aab3c0; font-size: .9em; }
/* the problem, shown: a plain browser-warning illustration with their own domain in it */
.owner-proof { margin: 0 0 14px; display: grid; gap: 8px; max-width: 420px; }
.proof-win { background: #fff; color: #1c2128; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.35); font-size: .85rem; }
.proof-bar { display: flex; align-items: center; gap: 8px; background: #e9ecef; padding: 7px 10px; color: #5b6470; font-size: .8rem; }
.proof-url { background: #fff; border-radius: 999px; padding: 3px 10px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proof-body { padding: 14px 14px 12px; }
.proof-body strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.proof-body p { margin: 0 0 10px; color: #3d4652; line-height: 1.4; }
.proof-btn { display: inline-block; background: #1a73e8; color: #fff; border-radius: 4px; padding: 6px 12px; font-weight: 600; font-size: .8rem; }
.owner-proof figcaption { font-size: .82rem; color: #aab3c0; line-height: 1.4; }
.pricing { padding: 48px 0; background: #fff; }
.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.price-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: baseline; padding: 12px 16px; background: #f4f6f8; border-radius: 10px; }
.price-list strong { font-family: "Barlow Condensed", sans-serif; font-size: 1.3rem; color: var(--primary); }
.price-list small { grid-column: 1 / -1; color: #5b6470; }

/* expired preview: one paragraph and one button (templates/_includes/expired-preview.njk) */
.is-expired { background: #f4f6f8; margin: 0; }
.expired { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.expired-box { background: #fff; border-radius: 16px; padding: 32px 28px; max-width: 560px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.expired-brand { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.25rem; color: #14213d; margin: 0 0 18px; }
.expired-brand b { color: #fca311; } .expired-brand span { color: #5b6470; font-weight: 600; font-size: .8em; }
.expired h1 { font-size: 1.9rem; line-height: 1.1; margin: 0 0 12px; }
.expired p { margin: 0 0 14px; line-height: 1.5; }
.expired .btn { margin: 4px 0 14px; }
.expired .muted { color: #5b6470; }
/* collapsed owner bar on phones: one line of text (name trimmed with …), the look buttons on their own row */
@media (max-width: 759px) {
  .owner.is-min .owner-in { grid-template-columns: 1fr; gap: 6px; }
  .owner.is-min .owner-mini { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
  .owner.is-min .owner-mini-tag { min-width: 0; flex: 1; line-height: 1.25; }
  .owner.is-min .look-bar { justify-content: flex-start; }
}
.f-consent { font-size: .74rem; color: #5b6470; line-height: 1.4; margin: 0 0 12px; display: flex; gap: 8px; align-items: flex-start; font-weight: 400; cursor: pointer; }
.f-consent input { width: auto; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.f-consent a { color: inherit; text-decoration: underline; }
/* /privacy/ and /terms/ on a live site (legal.njk) */
.legal { max-width: 46em; } .legal h2 { font-size: 1.25rem; margin: 26px 0 8px; } .legal p, .legal li { line-height: 1.55; } .legal li { margin-bottom: 8px; }
.style-classic .quote-card .f-consent { color: #5b6470; }

/* ---------- service pages (service.njk) ---------- */
.svc-hero { background: var(--tint); padding: 36px 0 32px; }
.svc-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; margin: 6px 0 12px; max-width: 22em; }
.svc-hero .lede { max-width: 46em; font-size: 1.08rem; line-height: 1.55; margin: 0 0 18px; }
.crumbs { font-size: .85rem; color: #5b6470; margin: 0; } .crumbs a { color: inherit; }
.svc-trust { margin: 14px 0 0; font-size: .95rem; }
.svc-body { padding: 40px 0 48px; background: #fff; }
.svc-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .svc-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.svc-main h2 { font-size: 1.5rem; margin: 28px 0 12px; } .svc-main h2:first-child { margin-top: 0; }
.signs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .signs li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; } .signs .ic-sm { flex: none; color: var(--primary); margin-top: 3px; }
/* "How the job goes" as a numbered timeline (outside review Alan passed on, 2026-10-14): number, step, one short
   paragraph, a thin line joining the numbers; no boxes floating in white space. */
.svc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.svc-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 16px; position: relative; padding-bottom: 18px; }
.svc-steps li:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; background: #e3e7eb; }
.svc-steps .how-n { margin: 0; }
.svc-steps h3 { margin: 5px 0 4px; font-size: 1.08rem; }
.svc-steps p { margin: 0; color: #5b6470; font-size: .95rem; line-height: 1.5; max-width: 60ch; }
/* The hero's photo beside the intro on a wide screen; on a phone the side column's copy shows instead. */
@media (min-width: 900px) {
  .svc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 40px; align-items: center; }
  .svc-hero-grid .svc-hero-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .svc-side .side-photo-sm { display: none; }
}
@media (max-width: 899px) { .svc-hero .svc-hero-photo, .svc-hero .svc-hero-ph { display: none; } }
/* A service page's photo carries its pencil in the corner (Edit view, 2026-10-17). */
.ed-ph { position: relative; }
body.can-edit .ed-ph > a.ed-pen.ed-pen-in { position: absolute; top: 10px; right: 10px; margin: 0; }
.side-rating { margin: 10px 0 0 !important; font-size: .9rem; }
.factors { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.45; }
.svc-main details { border-top: 1px solid #e3e7eb; padding: 12px 0; } .svc-main summary { font-weight: 600; cursor: pointer; } .svc-main details p { margin: 8px 0 0; line-height: 1.5; }
.svc-side { position: sticky; top: 80px; display: grid; gap: 16px; }
.side-card { background: #f4f6f8; border-radius: 12px; padding: 20px; } .side-card h3 { margin: 0 0 6px; } .side-card .btn { margin-top: 8px; } .side-card p { margin: 0 0 6px; line-height: 1.45; }
.side-photo { width: 100%; height: auto; border-radius: 12px; display: block; }
.side-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .side-links a { color: var(--primary); font-weight: 500; }
.svc-page .owner.is-min { padding: 9px 0; }
.style-classic .svc-hero { background: var(--cream); } .style-clean .side-card { background: var(--tint); }
/* Service cards (outside review 2026-10-13): the whole card is the link (the "Learn more" line stretches over it), so
   the long "More about …" lines are gone; the last card asks for anything not listed. */
.service-grid li { position: relative; }
.service-grid li a.svc-link { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--primary); text-decoration: none; }
.service-grid li a.svc-link::after { content: ""; position: absolute; inset: 0; }
.service-grid li:hover a.svc-link { text-decoration: underline; }
.service-grid li.svc-ask { background: var(--tint); border-color: transparent; }
.service-grid li.svc-ask p { color: #1c2128; }
/* Icons and numbers (outside review Alan passed on, 2026-10-14): the markup carries both; a look shows icons only if its
   cards suit them (Bold, Clean, Meter, Night) and the list has one distinct icon per service, numbers only in Frame
   and Signal, neither in Stripe, Classic and Poster (looks.css). */
.svc-n { display: none; }
.style-stripe .service-grid .ic-card, .style-classic .service-grid .ic-card, .style-poster .service-grid .ic-card, .style-frame .service-grid .ic-card, .style-signal .service-grid .ic-card { display: none; }
@media (max-width: 599px) { .service-grid { gap: 12px; } .service-grid li { padding: 16px 18px; } .service-grid .ic-card { width: 26px; height: 26px; margin-bottom: 6px; } .service-grid li a.svc-link { margin-top: 8px; } }
.style-classic .service-grid { grid-template-columns: 1fr; gap: 0; }
.style-classic .service-grid li, .style-classic .service-grid li:hover { border: 0; border-bottom: 1px solid var(--cream-2); border-radius: 0; background: transparent; padding: 18px 0; display: block; transform: none; box-shadow: none; }
.style-classic .service-grid li h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; }
.style-classic .service-grid li p { font-size: 1rem; }
.style-classic .service-grid li a.svc-link { margin-top: 6px; }
.style-classic .service-grid li.svc-ask { background: var(--cream); padding: 18px 20px; border-radius: 4px; border-bottom: 0; margin-top: 18px; }
@media (min-width: 900px) { .style-classic .service-grid { grid-template-columns: 1fr 1fr; column-gap: 56px; } .style-classic .service-grid li.svc-ask { grid-column: 1 / -1; } }

/* "This is your site. Change anything." (previews) */
.yours-sec { background: #fff; padding: 56px 0; border-top: 1px solid #e3e7eb; }
.yours-sec .sec-head { text-align: center; max-width: 40em; margin: 0 auto 28px; } .yours-sec .kicker { color: var(--primary); }
.yours-sec .sec-head { margin-bottom: 20px; } .yours-cta { text-align: center; margin: 0; }
.quick-try { max-width: 40em; margin: 30px auto 0; padding-top: 22px; border-top: 1px solid #e3e7eb; text-align: center; }
.quick-try h3 { margin: 0 0 2px; } .quick-try p { margin: 4px 0; }
.quick-try .look-bar, .quick-try .pal-bar { display: flex; flex-wrap: wrap; justify-content: center; margin: 10px 0 4px; }
.quick-try .pal-bar button[aria-pressed="true"] { border-color: var(--primary); }
.edit-note { background: #fff4d6; border-left: 3px solid var(--accent); padding: 8px 10px; border-radius: 6px; }
/* "Change anything" popup (previews, 2026-10-08): opened by every edit link on the page. Our chrome, not the client's,
   so it carries our yellow itself (Alan 2026-10-17: Save looked white on live sites, where nothing above sets --own-accent). */
.edit-dlg { --own-accent: #fca311; --own-ink: #151a20; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-x: hidden; padding: 26px 24px 20px; border: 0; border-radius: 16px;
  background: #fff; color: #1c2128; box-shadow: 0 24px 60px rgba(0,0,0,.35); line-height: 1.5; }
.edit-dlg::backdrop { background: rgba(10,16,28,.6); }
.edit-dlg h2 { margin: 0 40px 8px 0; font-size: 1.5rem; line-height: 1.15; }
.dlg-lede { margin: 0 0 16px; color: #4a5562; }
.dlg-x { position: absolute; z-index: 1; top: 12px; right: 12px; width: 40px; height: 40px; padding: 0; font: inherit; font-size: 1.6rem; line-height: 1;
  color: #4a5562; background: #f1f3f5; border: 0; border-radius: 50%; cursor: pointer; }
.dlg-x:focus-visible, .dlg-link:focus-visible { outline: 3px solid var(--own-accent); outline-offset: 2px; }
.dlg-main { background: #f4f6f8; border-radius: 12px; padding: 16px; }
.dlg-main h3 { margin: 0 0 4px; font-size: 1.1rem; } .dlg-main > p { margin: 0 0 12px; }
.edit-dlg .btn-accent { background: var(--own-accent); color: var(--own-ink); }
.dlg-main .btn-lg { width: 100%; }
.dlg-code label { display: block; font-weight: 600; margin-bottom: 6px; } .dlg-code small { display: block; font-weight: 400; color: #4a5562; }
.dlg-code-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dlg-code input { flex: 1 1 140px; min-width: 0; font: inherit; font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; padding: 10px 12px; border: 1.5px solid #c9d0d8; border-radius: 8px; }
.dlg-code .btn { flex: 1 1 auto; }
.dlg-code[hidden], .edit-dlg [hidden] { display: none; }
.dlg-err { margin: 10px 0 0; background: #fff4d6; border-left: 3px solid var(--own-accent); padding: 8px 10px; border-radius: 6px; }
/* "Everything included" popup: the /what-you-get grid, one line per feature, tap for the detail (same markup as main.css's .cmp). */
.offer-dlg { width: min(760px, calc(100vw - 24px)); }
/* The plan list is long on a phone: its close button stays at the top corner while the rows scroll (2026-10-15). */
.offer-dlg .dlg-x { position: sticky; top: -14px; right: auto; display: block; margin: -14px -8px -40px auto; box-shadow: 0 1px 6px rgba(0,0,0,.18); }
.offer-dlg .cmp-2 { --cols: minmax(0, 1fr) repeat(2, 60px); }
.offer-dlg .cmp { --cols: minmax(0, 1fr) repeat(3, 60px); border: 1px solid #e6e9ed; border-radius: 12px; overflow: hidden; margin: 0 0 14px; text-align: left; }
.offer-dlg .cmp-head { display: grid; grid-template-columns: var(--cols); background: var(--own); color: #fff; font-weight: 700; font-size: .92rem; padding: 8px 12px; }
.offer-dlg .cmp-head span { text-align: center; }
.offer-dlg .cmp-group { margin: 0; padding: 10px 12px 5px; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: #4a5562; background: #f4f6f8; border-bottom: 1px solid #e6e9ed; }
.offer-dlg .cmp-row { border: 0; border-bottom: 1px solid #e6e9ed; padding: 0; margin: 0; } /* not the FAQ's details spacing */
.offer-dlg .cmp-row:last-child { border-bottom: 0; }
.offer-dlg .cmp-row summary { display: grid; grid-template-columns: var(--cols); align-items: center; padding: 9px 12px; list-style: none; cursor: pointer; font-size: .95rem; }
.offer-dlg .cmp-row summary::-webkit-details-marker { display: none; }
.offer-dlg .cmp-name { padding-right: 6px; }
.offer-dlg .cmp-name::before { content: "+"; display: inline-block; width: 1.1em; color: #4a5562; font-weight: 700; }
.offer-dlg .cmp-row[open] .cmp-name::before { content: "–"; }
.offer-dlg .cmp-mark { text-align: center; color: #b8bec6; font-weight: 700; }
.offer-dlg .cmp-mark.yes { color: #1f7a3a; font-size: 1.1rem; }
.offer-dlg .cmp-mark small { display: block; font-size: .68rem; font-weight: 500; color: #4a5562; line-height: 1.1; }
.offer-dlg .cmp-row p { margin: 0; padding: 0 12px 12px calc(12px + 1.1em); color: #3d4652; font-size: .92rem; line-height: 1.5; }
.offer-dlg .cmp-row summary { font-weight: 600; }
.offer-dlg .dlg-foot a { color: inherit; }
.offer-dlg .visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 520px) {
  .offer-dlg { padding: 22px 14px 16px; }
  .offer-dlg .cmp { --cols: minmax(0, 1fr) repeat(3, 44px); }
  .offer-dlg .cmp-2 { --cols: minmax(0, 1fr) repeat(2, 54px); }
  .offer-dlg .cmp-head { font-size: .82rem; padding: 8px; }
  .offer-dlg .cmp-row summary { padding: 9px 8px; font-size: .92rem; }
  .offer-dlg .cmp-row p { padding: 0 8px 12px calc(8px + 1.1em); }
  .offer-dlg .cmp-name .soon { display: table; margin: 3px 0 0; }
}
.dlg-ways { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.dlg-ways li { padding: 0 2px; }
.dlg-link { font: inherit; font-weight: 600; color: var(--own); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
/* "Your new site is ready" (previews, 2026-10-10; rows since 2026-10-15): the exit popup. Same chrome as the other two,
   one button and a way out. Each line is a row: icon, the words, and the Growth pill at the right. */
.exit-dlg .exit-list { list-style: none; margin: 0 0 16px; padding: 0; }
.exit-dlg .exit-list li { display: grid; grid-template-columns: 22px 1fr auto; gap: 0 10px; align-items: start; padding: 11px 0; border-top: 1px solid #e6e9ee; font-size: .93rem; line-height: 1.4; }
.exit-dlg .exit-list li:first-child { border-top: 0; padding-top: 4px; }
.exit-dlg .exit-list strong { display: block; }
.exit-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--own); }
.exit-tag { margin: 2px 0 0; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: var(--own); padding: 3px 8px; border-radius: 999px; }
.exit-dlg h2:focus { outline: none; }   /* opening it moves focus to the heading, not onto the close button */
.exit-price { margin: 0 0 14px; font-size: .95rem; }
.exit-dlg .exit-go { width: 100%; }
.exit-stay { margin: 10px 0 0; text-align: center; }
.dlg-ways a { color: var(--own); font-weight: 600; }
.dlg-foot { margin: 12px 0 0; font-size: .88rem; color: #6b7480; }
.logo-img { max-height: 44px; max-width: min(200px, 100%); width: auto; display: block; }
/* Logo shapes (templates/_includes/site-logo.njk). A wide wordmark gets more room; a square emblem or a tall stacked
   badge gets a taller header. The business name sits beside the logo only for a picture-only mark (.logo-named), so
   a square or tall logo on its own gets more width. A white logo sits on a dark plate (charcoal, not the brand
   color: a green logo on its own green vanished). */
.logo .logo-name { display: none; }
.logo-wide .logo-img, .logo-auto .logo-img { max-height: 48px; max-width: min(260px, 52vw, 100%); }
.logo-square .logo-img { max-height: 56px; max-width: min(150px, 40vw, 100%); }
.logo-tall .logo-img { max-height: 60px; max-width: min(100px, 100%); }
.logo-named.logo-square .logo-img { max-width: 72px; } .logo-named.logo-tall .logo-img { max-width: 56px; }
.logo-named .logo-name { display: block; margin-left: 10px; }
.top-row:has(.logo-square), .top-row:has(.logo-tall) { height: 76px; }
@media (min-width: 900px) { .logo-wide .logo-img, .logo-auto .logo-img { max-height: 54px; max-width: 300px; } .logo-square .logo-img { max-height: 62px; max-width: 170px; } .logo-tall .logo-img { max-height: 66px; } .logo-named.logo-square .logo-img { max-width: 80px; } }
@media (max-width: 560px) { .logo-named .logo-name { font-size: 1.05rem; } .top-row:has(.logo-square), .top-row:has(.logo-tall) { height: 68px; } .logo-square .logo-img, .logo-tall .logo-img { max-height: 50px; } }
.logo-plate .logo-img { background: #1c2128; padding: 6px 10px; border-radius: 8px; box-sizing: content-box; }
.logo.logo-plate .logo-img { max-height: 40px; } .logo-square.logo-plate .logo-img, .logo-tall.logo-plate .logo-img { max-height: 50px; } /* the plate's padding counts toward the header */
@media (max-width: 560px) { .logo.logo-plate .logo-img { max-height: 36px; } .logo-square.logo-plate .logo-img, .logo-tall.logo-plate .logo-img { max-height: 42px; } }
/* Logo styles set on /admin (images.logo_style / logo_size, 2026-10-13). .logo-plain: the logo as it is, never a plate,
   even on Night. .logo-bar: the header bar takes the site's primary color with white menu text, so a logo drawn on a
   black or colored box sits in a dark header instead of as a block on white. .logo-big: a taller header for a
   detailed emblem or badge that is unreadable at the usual height. */
.logo-plain .logo-img, .style-night .logo-plain .logo-img { background: none; padding: 0; }
.top:has(.logo-bar) { background: var(--primary); border-bottom: 0; }
.top:has(.logo-bar) .top-nav a, .top:has(.logo-bar) .top-nav .nav-svc summary { color: #fff; }
.top:has(.logo-bar) .top-nav .nav-svc .nav-menu a { color: #1c2128; }
.top:has(.logo-bar) .nav-burger { border-color: rgba(255,255,255,.35); background: transparent; }
.top:has(.logo-bar) .nav-burger span { background: #fff; }
.logo-bar.logo-plate .logo-img { background: none; padding: 0; }
.style-night .top:has(.logo-bar) { background: var(--primary); backdrop-filter: none; }
.style-night .logo-bar .logo-img { background: none; padding: 0; }
@media (max-width: 899px) {
  .jsnav .top:has(.logo-bar) .top-nav a, .jsnav .top:has(.logo-bar) .top-nav .nav-svc summary { color: #1c2128; } /* the slide-out menu is a white panel */
  .jsnav .top:has(.logo-bar) .top-nav .nav-svc .nav-menu a:first-child { color: var(--primary); }
}
.logo-big .logo-img, .logo-big.logo-wide .logo-img, .logo-big.logo-square .logo-img, .logo-big.logo-tall .logo-img { max-height: 76px; max-width: min(320px, 62vw, 100%); }
.logo-big.logo-plate .logo-img { max-height: 66px; }
.top-row:has(.logo-big) { height: 100px; }
@media (min-width: 900px) { .logo-big .logo-img, .logo-big.logo-wide .logo-img, .logo-big.logo-square .logo-img, .logo-big.logo-tall .logo-img { max-height: 88px; max-width: min(380px, 100%); } .logo-big.logo-plate .logo-img { max-height: 76px; } .top-row:has(.logo-big) { height: 112px; } }
@media (max-width: 560px) { .logo-big .logo-img, .logo-big.logo-wide .logo-img, .logo-big.logo-square .logo-img, .logo-big.logo-tall .logo-img { max-height: 62px; max-width: min(58vw, 100%); } .logo-big.logo-plate .logo-img { max-height: 54px; } .top-row:has(.logo-big) { height: 84px; } }

/* Phones, bold look: the photo gets its own strip above the headline instead of sitting behind it under a dark
   overlay (a portrait crop of a landscape photo showed a sliver of roof). Text sits on the brand color. */
@media (max-width: 560px) {
  .style-bold .hero { padding: 0 0 32px; }
  .style-bold .hero::before { position: relative; display: block; inset: auto; height: 230px; animation: none; background-position: var(--hero-pos-m, center 65%); }
  .style-bold .hero::after { display: none; }
  .style-bold .hero .wrap { padding-top: 22px; }
  .style-bold .hero-copy h1 { text-shadow: none; }
}

/* Previews: anything that speaks for the business before the owner has confirmed it carries a visible label
   (tooltips don't exist on phones, where postcards get scanned). */
.sample-tag { display: inline-block; margin: 6px 0 0; padding: 3px 10px; border: 1.5px dashed #b07d00; border-radius: 999px; background: #fff6dc; color: #6b4d00; font-size: .8rem; font-weight: 600; letter-spacing: .01em; line-height: 1.4; }
.sec-head .sample-tag { margin-top: 8px; }
.form-sample { margin: 0 0 8px; } .form-sample .sample-tag { margin: 0; }
.style-classic .quote-card .form-sample, .style-frame .quote-card .form-sample { grid-column: 1 / -1; }
.area-card .sample-tag { margin: 0 0 10px; }
/* A preview note (2026-10-14): something the owner hasn't added yet, said to them on a sticky-note strip in the same
   dashed family as the Sample tag, so it never reads as part of the business's page. Previews only. */
.owner-tip { margin: 12px 0 16px; padding: 9px 13px; border: 1.5px dashed #b07d00; border-radius: 8px; background: #fff6dc; color: #4a3600; font-size: .92rem; line-height: 1.45; }
.owner-tip a { color: inherit; font-weight: 700; white-space: nowrap; }
/* Edit pencils and the badge row's ✕ / "+ Add" (Alan chose "Both", 2026-10-15): each opens Customize My Site at that
   part. The pencil sits at the top right of its section; the section gets position: relative only to hold it.
   body.can-edit is every preview, and a live site while its owner edits it from the account (2026-10-15); without it
   (a customer on a live site) every control is out of the page, see below. */
.can-edit section:has(> .ed-pen), .can-edit footer:has(> .ed-pen) { position: relative; }
/* The footer band's words change on the page only; the full editor has no card for them, so no pencil in its frame. */
.embedded .ed-pen[data-qk="cta"] { display: none !important; }
/* The looks that draw the top photo as its own block (Classic, Clean, Frame, Meter) get a pencil on it (Alan, 2026-10-15). */
.can-edit .hero-photo { position: relative; }
body.can-edit .hero-photo > a.ed-pen { top: 10px; right: 10px; }
body.can-edit a.ed-pen { position: absolute; top: 12px; right: 12px; z-index: 6; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px 6px 10px; border-radius: 999px; background: #fff; color: #1d4ed8; border: 1.5px solid #1d4ed8; box-shadow: 0 2px 8px rgba(15,23,42,.18); font: 600 .85rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; letter-spacing: 0; text-transform: none; }
body.can-edit a.ed-pen:hover, body.can-edit a.ed-pen:focus-visible { background: #1d4ed8; color: #fff; }
.ed-pen .ic-pen { width: 15px; height: 15px; fill: currentColor; }
/* ✕ and + Add are the pencils' family (Alan, 2026-10-15): white, a blue ring, blue mark, solid blue on hover. The hero's
   badges used a gray ✕ in the text's color and + Add a dashed outline; now every one on the page matches. */
/* "body a" so a look's own link color (Night paints every link white) can't blank the mark; the pencils already win that way. */
body a.ed-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 6px; border-radius: 50%; background: #fff; color: #1d4ed8; border: 1.5px solid #1d4ed8; box-shadow: 0 1px 4px rgba(15,23,42,.14); font: 700 .7rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; }
body a.ed-x:hover, body a.ed-x:focus-visible { background: #1d4ed8; color: #fff; }
.trust-sample { opacity: .9; }
.trust-add { gap: 8px; }
body a.ed-add { display: inline-flex; align-items: center; padding: 4px 11px; border: 1.5px solid #1d4ed8; border-radius: 999px; background: #fff; color: #1d4ed8; box-shadow: 0 1px 4px rgba(15,23,42,.14); font: 600 .82rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; }
body a.ed-add:hover, body a.ed-add:focus-visible { background: #1d4ed8; color: #fff; }
.trust-add .sample-tag { margin: 0; }

/* "Hide the notes" in the owner panel: the page without its Sample tags and preview notes, as a customer would see it. */
.notes-off .sample-tag, .notes-off .owner-tip, .notes-off .form-sample, .notes-off .work-note, .notes-off .area-growth, .notes-off .jobs-note,
.notes-off .ed-pen, .notes-off .ed-x, .notes-off .trust-add, .notes-off .ed-add, .notes-off .ed-row, .notes-off .ed-addrow { display: none !important; }
/* A live site for its customers (no can-edit): the same controls are in the page, and none of them shows. */
body:not(.can-edit) .ed-pen, body:not(.can-edit) .ed-x, body:not(.can-edit) .trust-add, body:not(.can-edit) .ed-add, body:not(.can-edit) .ed-row, body:not(.can-edit) .ed-addrow, body:not(.can-edit) .ed-addline { display: none !important; }
/* The bar at the top of a live site while the owner edits it (Alan, 2026-10-15): the pencils’ family, sticky, with
   the way to the full editor and Done. */
.edbar { position: sticky; top: 0; z-index: 40; background: #fff; color: #1c2128; border-bottom: 2px solid #1d4ed8; box-shadow: 0 2px 8px rgba(15,23,42,.12); font: 500 .92rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; }
.edbar-in { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.edbar-in p { margin: 0; flex: 1 1 auto; min-width: 0; }
.edbar-in strong { color: #1d4ed8; }
.edbar a.edbar-full, .edbar .edbar-done { flex: none; display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; border: 1.5px solid #1d4ed8; background: #fff; color: #1d4ed8; font: 600 .85rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; cursor: pointer; }
.edbar .edbar-done { background: #1d4ed8; color: #fff; }
.edbar a.edbar-full:hover, .edbar a.edbar-full:focus-visible { background: #eef3ff; }
.edbar .edbar-done:hover, .edbar .edbar-done:focus-visible { background: #1640b3; }
body.embedded .edbar { display: none; }
/* Edit view (Alan, 2026-10-15): the controls inside the page, and the one box they open. A pencil in a heading or a
   card's corner is small and sits in the flow; ✕ and pencil pairs share a row. Site view (notes-off, above) hides
   them all. The looks don't touch these: they are ours, not the site's. */
body.can-edit a.ed-pen.ed-pen-in { position: static; padding: 6px; font-size: .74rem; margin-left: 8px; vertical-align: middle; box-shadow: 0 1px 4px rgba(15,23,42,.14); }
/* Beside a line the pencil is the circle alone (Alan, 2026-10-15); the first one on the page, on the small line at the
   top, says Edit once so the mark is learned there. */
body.can-edit a.ed-pen.ed-pen-in > span { display: none; }
body.can-edit a.ed-pen.ed-pen-in.ed-pen-say { padding: 4px 9px 4px 7px; }
body.can-edit a.ed-pen.ed-pen-in.ed-pen-say > span { display: inline; }
.can-edit .hero h1 .ed-pen-in, .can-edit .hero .kicker .ed-pen-in, .can-edit .hero .tagline .ed-pen-in { margin-left: 10px; }
.can-edit .hero .cta-row .ed-pen-in { margin-left: 0; align-self: center; }
.notes-off .ed-addline { display: none !important; }
.ed-row { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.ed-row .ed-x { margin: 0; width: 24px; height: 24px; font-size: .75rem; }
.can-edit .ed-corner { position: absolute; top: 10px; right: 10px; z-index: 3; }
.can-edit .ed-corner .ed-pen-in { margin: 0; }
.can-edit .why-grid li, .can-edit .how-steps li { position: relative; }
.can-edit .why-grid li:has(> .ed-corner), .can-edit .how-steps li:has(> .ed-corner) { padding-right: 96px; }
.can-edit .service-grid li:has(> .ed-corner) { padding-right: 96px; }
.ed-addrow { margin: 14px 0 0; }
.sec-head .ed-addrow { margin-top: 10px; }
.towns li .ed-x { width: 18px; height: 18px; margin-left: 6px; font-size: .62rem; }
.faq summary .faq-q { flex: 1 1 auto; }
.faq summary .ed-row { flex: none; }
.qk-dlg { width: min(460px, calc(100vw - 24px)); }
.qk-form h2 { font-size: 1.3rem; margin-bottom: 14px; }
.qk-f { display: block; margin: 0 0 12px; }
/* A service page's lists in Edit view (Alan, 2026-10-17: "make it world class"): one line per item with a grip, its
   words and a ✕; a tap opens that item's boxes in place. A step's number sits beside its words, never on its own line. */
.ql { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid #dfe4ea; border-radius: 12px; background: #fff; }
.ql:empty { display: none; }
.ql-item { border-top: 1px solid #e6e9ed; background: #fff; }
.ql-item:first-child { border-top: 0; border-radius: 12px 12px 0 0; }
.ql-item:last-child { border-radius: 0 0 12px 12px; }
.ql-item:only-child { border-radius: 12px; }
.ql-line { display: flex; align-items: stretch; min-height: 52px; }
.ql-grip, .ql-x { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; padding: 0; border: 0; background: none; color: #8a94a3; cursor: pointer; }
.ql-grip { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.ql-x { width: 44px; }
.ql-x:hover, .ql-x:focus-visible { color: #b42318; }
.ql-grip:hover, .ql-grip:focus-visible { color: #1c2128; }
.ql-grip:focus-visible, .ql-x:focus-visible, .ql-open:focus-visible, .ql-add:focus-visible, .ql-done:focus-visible { outline: 3px solid var(--own-accent, #fca311); outline-offset: -3px; border-radius: 8px; }
.ql-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 13px 4px; border: 0; background: none; font: inherit; color: #1c2128; text-align: left; cursor: pointer; }
.ql-n { display: none; }
.ql-num .ql-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; background: #e9eef5; color: #14365d; font-size: .8rem; font-weight: 700; }
.ql-t { flex: 1 1 auto; min-width: 0; }
.ql-t b { display: block; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ql-t small { display: block; margin-top: 2px; color: #5b6573; font-size: .88rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-t small:empty { display: none; }
.ql-lines .ql-t b { font-weight: 400; }
.ql-item.is-new .ql-t b { color: #8a94a3; font-weight: 400; font-style: italic; }
.ql-item.is-open { background: #f6f8fb; }
.ql-item.is-open .ql-t small { display: none; }
.ql-edit { padding: 2px 14px 14px; }
.ql-edit .qk-f:last-of-type { margin-bottom: 10px; }
.ql-done-row { display: flex; justify-content: flex-end; }
.ql-done { padding: 8px 20px; border: 1.5px solid #c9d0d8; border-radius: 999px; background: #fff; color: #1c2128; font: inherit; font-weight: 600; cursor: pointer; }
.ql-done:hover { border-color: #1c2128; }
.ql.is-dragging { -webkit-user-select: none; user-select: none; }
.ql-item.is-drag { position: relative; z-index: 3; border-radius: 10px; box-shadow: 0 10px 24px rgba(16, 24, 40, .18), 0 0 0 2px #1d4ed8; }
.ql-item.is-drag .ql-grip { cursor: grabbing; color: #1d4ed8; }
.ql-add { display: block; width: 100%; margin: 0 0 6px; padding: 12px; border: 1.5px dashed #9fb3d9; border-radius: 12px; background: #fff; color: #1d4ed8; font: inherit; font-weight: 600; text-align: center; cursor: pointer; }
.ql-add:hover { background: #f1f5ff; border-color: #1d4ed8; }
.ql-empty, .ql-full { margin: 0 0 10px; color: #5b6573; font-size: .92rem; }
.ql-undo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 8px 8px 8px 14px; border-radius: 10px; background: #1c2128; color: #fff; font-size: .92rem; }
.ql-undo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-undo button { flex: none; padding: 6px 12px; border: 0; border-radius: 8px; background: none; color: #fcd34d; font: inherit; font-weight: 700; cursor: pointer; }
.ql-dots { display: inline-block; vertical-align: -3px; color: #8a94a3; }
.qk-f > span { display: block; font-weight: 600; margin-bottom: 5px; font-size: .95rem; }
.qk-f input, .qk-f textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 10px 12px; border: 1.5px solid #c9d0d8; border-radius: 8px; background: #fff; color: #1c2128; }
.qk-f textarea { resize: vertical; line-height: 1.45; }
.qk-f input:focus, .qk-f textarea:focus { outline: 3px solid var(--own-accent, #fca311); outline-offset: 1px; border-color: #1c2128; }
.qk-f small { display: block; color: #4a5562; margin-top: 5px; font-size: .85rem; }
/* Custom colors in Edit view (2026-10-15): a swatch to pick from and the code beside it; the page shows through more. */
.qk-f > .qk-color-row { display: flex; gap: 10px; align-items: center; margin: 0; }
.qk-f .qk-color-row input[type=color] { flex: none; width: 58px; height: 46px; padding: 3px; cursor: pointer; }
.qk-color-row input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.qk-color-row input[type=color]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.qk-color-row input[type=color]::-moz-color-swatch { border: 0; border-radius: 5px; }
.qk-f .qk-color-row input:not([type=color]) { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, monospace; text-transform: lowercase; }
.qk-dlg.is-colors::backdrop { background: rgba(10,16,28,.22); }
.qk-f .qk-bad { color: #b42318; font-weight: 600; }
.qk-f.is-bad input, .qk-f.is-bad textarea { border-color: #b42318; }
.qk-note { margin: 0 0 12px; color: #4a5562; font-size: .95rem; }
.qk-ask { margin: 0 0 16px; font-size: 1.02rem; }
.qk-ticks { display: grid; gap: 9px; margin: 0 0 14px; }
.qk-tick { display: flex; align-items: flex-start; gap: 10px; font-size: .98rem; cursor: pointer; }
.qk-tick input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: #1d4ed8; }
/* The hours box (2026-10-17): a day per row, its name and Closed on one line and the two times under them, roomy
   enough for a phone's time boxes; a closed day has no times, and with the switch off there are no days. */
.qk-show { margin: 0 0 6px; font-weight: 600; }
.qk-days { display: grid; }
.qk-dlg form:has([data-hours-show]:not(:checked)) .qk-days { display: none; }
.qk-day { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding: 12px 0; border-top: 1px solid #e6e9ed; }
.qk-day b { font-weight: 600; }
.qk-shut { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; cursor: pointer; }
.qk-shut input { width: 20px; height: 20px; margin: 0; accent-color: #1d4ed8; }
/* The photo pencils' box (2026-10-17): tiles of the owner's photos and ours, the first one takes a new photo. The grid's
   ✕ sits on each photo's corner; + Add a photo under the section's heading. */
.qk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.qk-lib { display: contents; }
.qk-tile { position: relative; display: block; aspect-ratio: 4 / 3; margin: 0; border-radius: 10px; overflow: hidden; border: 2px solid #e3e7eb; background: #f3f5f8; cursor: pointer; }
.qk-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.qk-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qk-tile:has(input:checked) { border-color: #1d4ed8; box-shadow: inset 0 0 0 2px #1d4ed8; }
.qk-tile:has(input:focus-visible) { outline: 3px solid var(--own-accent, #fca311); outline-offset: 1px; }
.qk-tile b { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 999px; background: #fff; color: #1d4ed8; font-size: .72rem; font-weight: 700; }
.qk-up .qk-up-in { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; box-sizing: border-box; border: 2px dashed #1d4ed8; border-radius: 8px; color: #1d4ed8; font-weight: 600; font-size: .8rem; line-height: 1.15; text-align: center; padding: 4px; }
.qk-up .qk-up-in small { display: block; margin-top: 3px; font-weight: 400; color: #4a5562; font-size: .7rem; line-height: 1.1; }
.qk-up:has(img:not([hidden])) .qk-up-in { display: none; }
.can-edit .work-grid li { position: relative; }
.can-edit .work-grid li > a.ed-x { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; width: 26px; height: 26px; }
.can-edit .work .sec-head .ed-addrow { margin: 10px 0 0; }
.qk-times { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; }
.qk-times > span { color: #4a5562; font-size: .9rem; }
.qk-times input { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; font: inherit; font-size: 1rem; padding: 8px 10px; border: 1.5px solid #c9d0d8; border-radius: 8px; background: #fff; color: #1c2128; text-align: left; }
.qk-day:has(.qk-shut input:checked) .qk-times { display: none; }
.qk-more { margin: 0 0 6px; } .qk-more summary { font-weight: 600; cursor: pointer; margin: 0 0 10px; }
/* Save and Cancel stay on screen however long the box gets (Alan, 2026-10-15: on a phone the strengths list pushed
   Save below the fold). The footer sticks to the bottom of the box while the boxes scroll under it. */
.qk-btns { display: flex; gap: 8px; position: sticky; bottom: -20px; z-index: 2; margin: 12px -24px -20px; padding: 12px 24px 20px;
  background: #fff; border-top: 1px solid #e6e9ed; }
.qk-btns .btn { flex: 1 1 auto; padding: 12px 14px; font-size: 1rem; }
.qk-cancel { background: #f4f6f8; color: #1c2128; }
.qk-cancel:hover, .qk-cancel:focus-visible { background: #e6e9ed; }
.edit-dlg .btn-accent.qk-danger { background: #b42318; color: #fff; }
.qk-foot { margin: 4px 0 0; color: #4a5562; font-size: .85rem; }
.qk-toast { position: fixed; left: 50%; bottom: 90px; z-index: 60; transform: translate(-50%, 16px); max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 999px; background: #14213d; color: #fff; font: 600 .95rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; transition: opacity .3s, transform .3s; }
.qk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.qk-toast.is-bad { background: #b42318; }
/* The "Edit view" switch in the bar at the top, in the row with Look and Colors (Alan, 2026-10-15: no extra row). */
.pvbar-switch { gap: 7px; }
.pvbar-knob { position: relative; display: inline-block; width: 30px; height: 17px; border-radius: 999px; background: #c9ced4; transition: background .15s; }
.pvbar-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.pvbar-switch[aria-checked="true"] .pvbar-knob { background: #1d4ed8; }
.pvbar-switch[aria-checked="true"] .pvbar-knob::after { left: 15px; }
body.is-preview .pvbar-switch[aria-checked="true"] { border-color: #1d4ed8; }
.owner-notes-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; white-space: nowrap; }
/* Growth's town pages on a preview (2026-10-08): the tag beside the sample link on the home page, and the strip on the
   sample town page itself. Same dashed-pill family as .sample-tag so it reads as "about the preview, not the business". */
.growth-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #14213d; color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; vertical-align: 1px; margin-right: 4px; }
.area-growth { margin: 12px 0 16px; font-size: .95rem; }
.area-growth a { color: inherit; font-weight: 600; }
.growth-note { background: #fff6dc; border-bottom: 1.5px dashed #b07d00; color: #4a3600; padding: 0; }
.growth-note p { margin: 0; padding: 10px 0; font-size: .95rem; line-height: 1.45; }
.growth-note a { color: inherit; font-weight: 700; white-space: nowrap; }
.owner-offer { margin: 0 0 14px; max-width: 46em; color: #e6eaef; }
.owner-offer strong { color: #fff; }
/* The look and color choosers in the plans block sit on their own row under their sentence: there are a dozen looks
   and seven color pairs now, and inline mid-sentence they wrapped into the words (2026-10-06). */
.look-bar.look-inline { display: flex; margin: 8px 0 2px; color: inherit; }
.look-bar.look-inline button { color: var(--primary); background: #fff; border-color: var(--primary); padding: 3px 12px; }
.look-bar.look-inline button[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.offer .who { margin: 18px auto 6px; max-width: 40em; padding: 14px 18px; border-left: 4px solid var(--accent); background: rgba(0,0,0,.04); border-radius: 8px; text-align: left; }
.offer .who p { margin: 0 0 4px; }
.offer .who a { color: #fff; text-decoration: underline; }

/* Chat demo on previews (manual §6b): a launcher pill, and a panel (bottom sheet on phones). */
.chat-launch { position: fixed; right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 31; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 0; border-radius: 999px; background: var(--primary); color: #fff; font-family: inherit; font-weight: 600; font-size: .95rem; line-height: 1.1; box-shadow: 0 6px 20px rgba(0,0,0,.22); cursor: pointer; }
.chat-launch svg { width: 20px; height: 20px; }
.chat-on .chat-launch { display: none; }
.chat-launch { transition: opacity .2s, transform .2s, visibility .2s; }
body:not(.chat-ready) .chat-launch { opacity: 0; visibility: hidden; transform: translateY(12px); } /* until the hero has scrolled past (site.njk) */
.chat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; height: min(78vh, 620px); background: #fff; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.25); margin: 0; padding: 0 0 env(safe-area-inset-bottom); }
.chat[hidden] { display: none; }
.chat-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 8px 16px; }
.chat-title { margin: 0; flex: 1; font-weight: 600; font-size: .95rem; line-height: 1.3; color: #151a20; }
.chat-x { border: 0; background: none; font-size: 1.1rem; line-height: 1; padding: 4px 6px; cursor: pointer; color: #555; }
.chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--tint, #f5f7fa); }
.chat-log[hidden] { display: none; }
.chat-msg { margin: 0; max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: .95rem; line-height: 1.4; white-space: pre-wrap; }
.chat-bot { align-self: flex-start; background: #fff; color: #151a20; border: 1px solid #e3e7ec; border-bottom-left-radius: 4px; }
.chat-me { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-wait { color: #888; }
.chat-sugg { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chat-sugg button { border: 1px solid var(--primary); color: var(--primary); background: #fff; border-radius: 999px; padding: 6px 11px; font-family: inherit; font-weight: 500; font-size: .85rem; line-height: 1.2; cursor: pointer; text-align: left; }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 6px; border-top: 1px solid #e6e9ed; }
.chat-form input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid #cfd5dc; border-radius: 8px; font-family: inherit; font-size: 16px; line-height: 1.2; }
.chat-form .btn { padding: 10px 16px; }
.chat-foot { margin: 0; padding: 0 14px 10px; font-size: .75rem; color: #6b7480; }
@media (min-width: 900px) {
  .chat-launch { bottom: 22px; right: 22px; }
  .chat { left: auto; right: 22px; bottom: 22px; width: 380px; height: min(600px, calc(100vh - 110px)); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
}
@media print { .chat-launch, .chat { display: none !important; } }
.offer .hear-ai { margin: 14px auto 8px; max-width: 40em; padding: 12px 16px; border: 1px dashed rgba(255,255,255,.35); border-radius: 10px; }
.offer .hear-ai a { color: #fff; font-weight: 700; }

/* ---------- the Look and Colors dropdowns in the preview bar (Alan, 2026-10-11) ----------
   A plain list under each button, over the page, in our own neutral chrome whatever the site wears. */
.pvbar-dd { position: relative; display: inline-flex; }
.pvbar-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; display: flex; flex-direction: column; min-width: 190px;
  max-height: min(60vh, 440px); overflow-y: auto; padding: 6px; background: #fff; color: #1c2128; border: 1px solid #d9dde3;
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); text-transform: none; letter-spacing: 0; }
.pvbar-menu[hidden] { display: none; }
.pvbar-menu[data-sb-panel="look"] { max-width: 280px; }
.pvbar-menu-h { margin: 0; padding: 8px 12px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7480; }
.pvbar-menu-h + button + .pvbar-menu-h { margin-top: 4px; border-top: 1px solid #eef0f3; padding-top: 10px; }
/* the second list opens leftward from its button's right edge, so on a phone it never runs off the screen */
.pvbar-dd + .pvbar-dd .pvbar-menu { left: auto; right: 0; }
.pvbar-menu button { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: .95rem; font-weight: 500; text-align: left;
  color: #1c2128; background: none; border: 0; border-radius: 6px; padding: 9px 12px; cursor: pointer; white-space: nowrap; }
.pvbar-menu button[hidden] { display: none; }
.pvbar-menu .pvbar-own { border-top: 1px solid #e6e9ed; margin-top: 4px; }
.pvbar-menu .pvbar-own small { font-size: .82rem; color: #5b6470; font-weight: 400; }
.pvbar-sw.pvbar-sw-own { width: 26px; height: 18px; border-radius: 999px; background: conic-gradient(#e63946, #f4a300, #2a9d8f, #1d4ed8, #7b2cbf, #e63946); }
.pvbar-menu button:hover, .pvbar-menu button:focus-visible { background: #f2f4f7; outline: none; }
.pvbar-menu button[aria-pressed="true"] { font-weight: 700; background: #fff6dc; }
.pvbar-menu button[aria-pressed="true"]::after { content: "\2713"; margin-left: auto; padding-left: 12px; color: #6b4d00; }
.pvbar-menu .pvbar-sw i { width: 14px; height: 18px; }
.pvbar-pick[aria-expanded="true"] .pvbar-caret { transform: rotate(180deg); }

/* ---------- color switcher (previews): the palettes from config/palettes.json as two-swatch chips ---------- */
.pal-bar { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 8px 4px 8px 0; vertical-align: middle; }
.pal-bar button { display: inline-flex; align-items: center; gap: 0; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 999px; background: none; cursor: pointer; font: inherit; line-height: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.pal-bar button i { display: block; width: 22px; height: 22px; }
/* :last-of-type, not :last-child — the visually-hidden label span is the last child, so the accent half kept square corners */
.pal-bar button i:first-of-type { border-radius: 999px 0 0 999px; }
.pal-bar button i:last-of-type { border-radius: 0 999px 999px 0; }
.pal-bar button span { position: absolute; left: -9999px; }
.pal-bar button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.pal-bar button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.yours .pal-bar button { box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
/* in the owner's draft bar (light background) the ring is dark */
.draft-bar .pal-bar button { box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.draft-bar .pal-bar button[aria-pressed="true"] { border-color: #1c2128; box-shadow: none; }

/* Our buttons, inside the preview chrome only: the owner panel's two, the sticky claim bar, and the inline look
   chooser in the plans block. The customer's call and estimate buttons keep the client's accent. */
.owner .btn-accent, .sticky-claim { background: var(--own-accent); color: var(--own-ink); }
.owner .owner-keep { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.look-bar.look-inline button { color: var(--own); background: #fff; border-color: var(--own); }
/* the chosen look needs to read on the dark panel: --own is navy, which all but disappeared against it */
.look-bar.look-inline button[aria-pressed="true"] { background: var(--own-accent); color: var(--own-ink); border-color: var(--own-accent); }
.pal-bar button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--own-accent); }
.draft-bar .pal-bar button[aria-pressed="true"] { border-color: var(--own); box-shadow: none; }

/* The preview owner's own bar, first thing inside the sticky header and above the site's menu (Alan, 2026-10-10).
   It carries the only two things they need from us, so the menu underneath is the menu their customers will see.
   Inside the header on purpose: the whole header is already sticky, so the bar is always there with no second
   sticky element to stack. Hidden inside the editor's frame with the rest of our chrome (.embedded, above). */
.pvbar { background: var(--own, #14213d); color: #fff; }
.pvbar-in { display: flex; align-items: center; gap: 14px; min-height: 38px; padding-top: 5px; padding-bottom: 5px; }
.pvbar-tag { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .72; white-space: nowrap; }
.pvbar-btns { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pvbar-btns a { font-size: .86rem; font-weight: 700; text-decoration: none; white-space: nowrap; padding: 6px 12px; border-radius: 999px; }
.pvbar-edit { color: #fff; border: 1px solid rgba(255,255,255,.4); }
.pvbar-edit:hover, .pvbar-edit:focus-visible { background: rgba(255,255,255,.14); }
.pvbar-claim { color: #14213d; background: var(--own-accent, #fca311); }
.pvbar-claim:hover, .pvbar-claim:focus-visible { filter: brightness(1.06); }
/* Look and Colors, showing what the page wears now (Alan, 2026-10-11) */
.pvbar-try { display: flex; align-items: center; gap: 6px; }
.pvbar-pick { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 30px; font: inherit; font-size: .84rem; line-height: 1; color: inherit; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.pvbar-pick small { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.pvbar-pick b { font-weight: 700; }
.pvbar-sw { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid rgba(0,0,0,.15); }
.pvbar-sw i { display: block; width: 12px; height: 16px; background: var(--primary); }
.pvbar-sw i + i { background: var(--accent); }
.pvbar-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; }
.pvbar-pick:focus-visible { outline: 3px solid var(--own-accent, #fca311); outline-offset: 2px; }
@media (max-width: 560px) {
  .pvbar-in { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .pvbar-tag { display: none; }
  .pvbar-try { width: 100%; justify-content: center; }
  .pvbar-btns { margin: 0 auto; gap: 6px; } .pvbar-btns a { font-size: .8rem; padding: 6px 10px; }
}

/* The site's own menu on a phone (Alan, 2026-10-10): below 900px it used to be hidden altogether, so a phone had no
   menu at all. Now the same items sit behind a hamburger. Button and drawer exist only once the script has run
   (.jsnav on <html>), so without script nothing changes and the footer's page list is still the way around. */
.nav-burger, .nav-scrim { display: none; }
@media (max-width: 899px) {
  .jsnav .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 42px; padding: 0 10px; margin-left: auto; border: 1px solid #e6e9ed; border-radius: 10px; background: #fff; cursor: pointer; }
  .jsnav .nav-burger span { display: block; height: 2px; border-radius: 2px; background: #1c2128; }
  .jsnav .top-call { margin-left: 10px; }
  .jsnav .top-nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: 300px; max-width: 86vw; margin: 0; padding: 16px 14px 24px; background: #fff; border-left: 1px solid #e6e9ed; box-shadow: 0 12px 40px rgba(16,24,40,.22); overflow-y: auto; transform: translateX(101%); transition: transform .18s ease; }
  .jsnav .top-nav.open { transform: none; }
  .jsnav .top-nav > a, .jsnav .top-nav .nav-svc summary { padding: 12px 10px; border-radius: 9px; font-size: 1.05rem; font-weight: 600; }
  .jsnav .top-nav .nav-svc { position: static; }
  .jsnav .top-nav .nav-svc .nav-menu { position: static; min-width: 0; max-height: none; padding: 0 0 6px 10px; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .jsnav .nav-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(16,24,40,.38); }
}

/* header Services menu (2026-10-08): a <details> so it works without script; a small script closes it on an outside
   click or Escape (_includes/site-nav.njk). Hidden on phones with the rest of the menu; the footer lists the pages. */
.top-nav { align-items: center; }
.top-nav .nav-svc { position: relative; border: 0; padding: 0; }
.top-nav .nav-svc summary { list-style: none; cursor: pointer; font-weight: 500; font-size: 1rem; color: #1c2128; white-space: nowrap; }
.nav-svc summary::-webkit-details-marker { display: none; }
.nav-svc summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nav-svc[open] summary::after { transform: rotate(-135deg); margin-bottom: -1px; }
.nav-menu { position: absolute; top: calc(100% + 14px); left: -16px; z-index: 40; min-width: 240px; max-height: 70vh; overflow-y: auto; display: grid; padding: 8px; background: #fff; border: 1px solid #e6e9ed; border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 24, 40, .14); }
.top-nav .nav-svc .nav-menu a { color: #1c2128; padding: 9px 12px; border-radius: 7px; font-weight: 500; white-space: normal; }
.top-nav .nav-svc .nav-menu a:hover, .top-nav .nav-svc .nav-menu a:focus-visible { background: var(--tint, #f1f4f7); }
.top-nav .nav-svc .nav-menu a:first-child { color: var(--primary); font-weight: 600; border-bottom: 1px solid #eef0f3; border-radius: 7px 7px 0 0; margin-bottom: 4px; }
.top-nav .nav-svc .nav-menu a[aria-current="page"] { background: var(--tint, #f1f4f7); }

/* footer service pages and social links (2026-10-08) */
.foot-h { margin: 0 0 8px; font-weight: 600; color: #fff; }
.foot-svcs ul, .foot-social ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-svcs ul { grid-template-columns: repeat(2, minmax(0, auto)); column-gap: 28px; }
.foot-svcs a, .foot-social a { text-decoration: none; }
.foot-svcs a:hover, .foot-social a:hover { text-decoration: underline; }
@media (max-width: 560px) { .foot-svcs ul { grid-template-columns: 1fr; } }
/* "Coming soon" on plan features not built yet (preview plans block) */
.tier-feats .soon, .offer-dlg .soon { display: inline-block; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 0 6px; border-radius: 999px; border: 1px solid currentColor; opacity: .75; margin-left: 4px; vertical-align: 1px; white-space: nowrap; }

/* Preview-only parts in the Sample look (Alan, 2026-10-11): the bar above the menu, the owner panel, "Customize it"
   and the offer wear the same cream and dashed amber as the Sample tags, so they read as ours and temporary, never as
   part of the owner's site. The three sections also carry a "Preview only" tab. body.is-preview outranks every look. */
body.is-preview .pvbar { background: #fff6dc; color: #6b4d00; border-bottom: 2px dashed #b07d00; }
body.is-preview .pvbar-tag { opacity: 1; font-weight: 800; }
body.is-preview .pvbar-tag::after { content: " · only you can see this bar"; text-transform: none; letter-spacing: 0; font-weight: 500; }
body.is-preview .pvbar-edit { color: #6b4d00; background: #fff; border-color: #b07d00; }
body.is-preview .pvbar-edit:hover, body.is-preview .pvbar-edit:focus-visible { background: #fffdf6; }
body.is-preview .pvbar-pick { background: #fff; border-color: #d9b35a; color: #6b4d00; }
body.is-preview .pvbar-pick:hover { background: #fffdf6; }
body.is-preview .owner, body.is-preview .yours-sec, body.is-preview .offer { position: relative; background: #fffdf6; color: #1c2128; border: 3px dashed #b07d00; border-radius: 18px; margin: 26px 12px; }
body.is-preview .owner::before, body.is-preview .yours-sec::before, body.is-preview .offer::before { content: "Preview only. Not part of your site."; position: absolute; top: -15px; left: 22px; background: #fff6dc; border: 1.5px dashed #b07d00; color: #6b4d00; font: 700 .8rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
body.is-preview .owner { padding: 30px 0 22px; }
body.is-preview .yours-sec, body.is-preview .offer { padding-top: 56px; }
/* The panel's × sits in the frame's own corner, not out at the edge of the page's width. */
body.is-preview .owner .owner-in { position: static; }
body.is-preview .owner-x { top: 10px; right: 10px; color: #6b4d00; }
body.is-preview .owner-x:hover { color: #3d2c00; background: rgba(176,125,0,.12); }
body.is-preview .owner-hi, body.is-preview .owner-offer strong, body.is-preview .owner-mini a, body.is-preview .owner .owner-keep { color: #1c2128; }
body.is-preview .owner-offer, body.is-preview .owner-why { color: #2b323b; }
body.is-preview .owner-note, body.is-preview .owner-asof, body.is-preview .owner-proof figcaption { color: #5b6470; }
body.is-preview .owner-tag, body.is-preview .owner-mini-tag { color: #6b4d00; }
body.is-preview .owner .owner-keep { border-color: #1c2128; }
body.is-preview .owner .unconf { text-decoration-color: rgba(0,0,0,.5); }
body.is-preview .owner .look-bar { color: #5b6470; }
body.is-preview .owner .look-bar button:not([aria-pressed="true"]) { color: #1c2128; background: #fff; border-color: #c9ced4; }
/* Collapsed, the panel is one line that already says "preview": a thinner frame and no tab. */
body.is-preview .owner.is-min { padding: 9px 0; margin: 10px 12px; border-width: 2px; }
body.is-preview .owner.is-min::before { display: none; }
body.is-preview .offer .muted, body.is-preview .yours-sec .muted { color: #5b6470; }
body.is-preview .yours-sec h2, body.is-preview .yours-sec h3, body.is-preview .offer h2 { color: #1c2128; }
body.is-preview .yours-sec .btn-primary { background: var(--primary); color: #fff; }
body.is-preview .yours-sec .quick-try { border-top-color: #e6dcc0; }
body.is-preview .look-bar.look-inline button:not([aria-pressed="true"]) { color: #1c2128; background: #fff; border-color: #c9ced4; }
body.is-preview .offer-more a, body.is-preview .offer .who a, body.is-preview .offer .hear-ai a { color: #1c2128; }
body.is-preview .offer .hear-ai { border-color: #c9ced4; }
body.is-preview .offer .promise { background: #fff6dc; }
body.is-preview .tiers li { background: #fff; border-color: #e3e7eb; }
body.is-preview .tiers li:hover { background: #fff; }
body.is-preview .offer .kicker, body.is-preview .offer .guarantee, body.is-preview .tier-feats li::before, body.is-preview .tiers .tier-go { color: var(--primary); }
body.is-preview .tiers .tier-hi .tier-go { color: var(--accent-ink, #151a20); }
body.is-preview .offer-more a { color: #4a5562; }
@media (max-width: 560px) {
  body.is-preview .pvbar-tag::after { content: none; }
  body.is-preview .owner, body.is-preview .yours-sec, body.is-preview .offer { margin: 24px 6px; border-radius: 14px; }
  body.is-preview .owner::before, body.is-preview .yours-sec::before, body.is-preview .offer::before { left: 14px; font-size: .74rem; }
}
@media (max-width: 900px) { body.is-preview .pvbar-tag::after { content: none; } .pvbar-in { gap: 10px; } }

/* Hero headline by length (2026-10-11): each look sets its h1 size; these scale it so a long line doesn't stack up. */
.hero-copy h1 .hl-s { font-size: 1.08em; }
.hero-copy h1 .hl-l { font-size: .86em; }
.hero-copy h1 .hl-xl { font-size: .76em; }

/* A button at work: a spinner in front of its own words (Alan, 2026-10-16). Same rules as workers/forms/src/busy.mjs. */
.is-busy{pointer-events:none;cursor:progress;opacity:.85}
.is-busy::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:.5em;vertical-align:-.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:lyns-spin .7s linear infinite}
@keyframes lyns-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.is-busy::before{animation-duration:1.8s}}