/* Sapphire: logo blue on white, Outfit for all text.
   Calmer look (Seth, 10/24/2026, from the design research): one light-blue tint, white space instead
   of boxes, outlines only on things you tap or type in, the pill shape only for things you can tap,
   one filled button style, and fewer text sizes. */
:root {
  --ink: #0B1F3A;
  --ink-2: #3A4A63;
  --muted: #55657E;
  --navy: #0B2A55;
  --accent: #2458BD; /* Sapphire logo blue */
  --accent-dark: #1C4797;
  --wash: #F2F6FB; /* the one light tint: tinted sections, panels and notes */
  --pick: #E4ECFB; /* a picked option, icon squares and "Your details" */
  --line: #DCE4EF; /* dividers and the edges of cards */
  --line-soft: #E9EEF5;
  --line-strong: #C3CFE0;
  --edge: #7C8DAB; /* outlines of anything you tap or type in: 3.4:1 on white (Seth, 10/20/2026: options blended into the page) */
  --ring: 0 0 0 4px rgba(36, 88, 189, .2);
  --white: #FFFFFF;
  --gold: #B7791F;
  --good: #1E7A4C;
  --warn: #9A5B00;
  --panel-muted: #B9C8E0;
  --panel: var(--wash);
  --panel-strong: var(--pick);
  --display: Outfit, "Segoe UI", system-ui, -apple-system, sans-serif;
  --body: Outfit, "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 16px;
  --wrap: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
a:hover { color: var(--navy); }
main p:not(.crumbs) a:not(.btn), main .member-box a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--navy); line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(36px, 5.6vw, 60px); }
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: 21px; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
.wrap.narrow { max-width: 760px; }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: 19px; color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.section { padding-block: 72px; }
.section.tint { background: var(--wash); }
.section.dark { background: var(--navy); color: var(--white); }
.section.dark h2, .section.dark h3 { color: var(--white); }
.section-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.section-more { margin-top: 20px; font-weight: 600; }
.section-actions { margin-top: 32px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--white); padding: 8px 12px; z-index: 50; }
.sr { position: absolute; left: -9999px; }

/* Buttons: one filled style for the main action; outlined for the second choice. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 0; background: var(--accent); color: var(--white); font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: background .15s, transform .1s; }
.btn:hover { background: var(--accent-dark); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: var(--white); color: var(--accent); border: 1.5px solid var(--accent); }
.btn.ghost:hover { background: var(--pick); color: var(--accent-dark); }
.btn.light { background: var(--white); color: var(--navy); }
.btn.light:hover { background: var(--pick); color: var(--navy); }
.btn.outline-light { background: transparent; color: var(--white); border: 1.5px solid rgba(255, 255, 255, .55); }
.btn.outline-light:hover { background: rgba(255, 255, 255, .1); }
.btn.round { width: 44px; min-height: 44px; padding: 0; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
/* A plain text link that acts like a button (the estimator's "I know my exact counts" and so on). */
.link-btn { font: inherit; font-size: 15px; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-align: left; }
.link-btn:hover { color: var(--navy); }
.hint { font-size: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line-soft); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.brand-logo { display: block; height: 48px; width: auto; }
.footer-logo { display: inline-flex; flex-direction: column; align-items: center; margin-bottom: 14px; }
.footer-logo img { display: block; width: 190px; height: auto; filter: brightness(0) invert(1); }
.footer-logo span { margin-top: -4px; color: var(--white); font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: 15px; }
.nav a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--accent); }
.nav .phone { color: var(--navy); }
.nav a.btn, .nav a.btn:hover { color: var(--white); }
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); padding: 12px 20px 20px; display: grid; gap: 4px; }
.menu-panel a { padding: 10px 0; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line-soft); }
/* The full menu needs about 1,020 px at the normal spacing; tighter between 961 and 1100 px so it never wraps. */
@media (max-width: 1100px) { .nav { gap: 18px; } }
@media (max-width: 960px) {
  .nav { display: none; }
  .menu { display: block; }
}

/* Homepage hero: the headline, one main button plus Call, the rating, and the crew photo. */
.hero { padding-block: 48px 72px; background: linear-gradient(180deg, #FFFFFF 0%, var(--wash) 100%); }
.hero .wrap { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.hero-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hero-copy h1 .h1-sub { display: block; margin-top: 10px; font-size: clamp(24px, 3.2vw, 34px); font-weight: 500; color: var(--accent); }
.hero-photo { flex: 1 1 420px; min-width: 0; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; }
.hero-actions .btn { min-height: 52px; padding-inline: 28px; font-size: 17px; }
@media (max-width: 600px) {
  .hero { padding-block: 28px 48px; }
  .hero .wrap { gap: 28px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-photo img { aspect-ratio: 3 / 2; border-radius: 18px; }
}

/* The rating and one plain line of what backs every job (no badge bubbles). */
.proof { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.rating-line { font-size: 16px; }
.rating-line a { color: var(--ink); text-decoration: none; }
.rating-line a:hover b { text-decoration: underline; }
.trust-line { display: flex; flex-wrap: wrap; gap: 2px 0; color: var(--ink-2); font-size: 15px; }
.trust-line span:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--muted); }
.stars { color: var(--gold); letter-spacing: 2px; }

select, input, textarea { font: inherit; font-size: 16px; color: var(--ink); padding: 12px; border: 1.5px solid var(--edge); border-radius: 10px; background: var(--white); width: 100%; transition: border-color .15s, box-shadow .15s; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
::placeholder { color: #6B7A93; }
textarea { min-height: 96px; resize: vertical; }

/* Picture or styled stand-in */
.photo { border-radius: 24px; overflow: hidden; height: 100%; min-height: inherit; background: linear-gradient(160deg, #DCE6F3 0%, #C7D6EC 55%, #AFC4E3 100%); position: relative; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.crew-photo .photo { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
/* The crew video: click to play, the cover photo until then. */
.video-frame { margin: 0 auto; max-width: 960px; }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--ink); }
/* The credit some photo licences ask for (src/photos.mjs), small in the corner of the photo. */
.photo-credit { position: absolute; right: 8px; bottom: 8px; z-index: 2; max-width: calc(100% - 16px); padding: 2px 8px; border-radius: 6px; background: rgba(11, 31, 58, .55); color: #FFFFFF; font-size: 11px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-credit a { color: inherit; }

/* Homepage services: photo cards (Seth, 10/24/2026), the three most asked-for bigger. The card's name
   is the link (it covers the card); "Get my price" sits above it. No photo yet: the icon on a light panel. */
.svc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.svc-cards.featured { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-bottom: 14px; }
.svc-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: var(--white); overflow: hidden; transition: border-color .15s; }
.svc-card:hover { border-color: var(--accent); }
.svc-media { position: relative; display: block; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pick); }
.svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-media.icon { display: grid; place-items: center; }
.svc-media.icon .tile-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--white); }
.svc-media.icon .tile-icon svg { width: 36px; height: 36px; }
.featured .svc-media { aspect-ratio: 3 / 2; }
.svc-card-text { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.svc-card b { font-size: 18px; line-height: 1.25; }
.featured .svc-card b { font-size: 21px; }
.svc-card b a { color: var(--navy); text-decoration: none; }
.svc-card b a::after { content: ""; position: absolute; inset: 0; }
.svc-card-text > span { color: var(--muted); font-size: 15px; line-height: 1.45; }
.svc-tag { align-self: flex-start; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--good); }
.svc-go { position: relative; z-index: 1; align-self: flex-start; margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 15px; color: var(--accent); text-decoration: none; }
.svc-go:hover { text-decoration: underline; }
.tile-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--pick); }
.tile-icon svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* A journey through the services (Seth, 10/25/2026): "More for your home/business" right after a service
   page's top (on phones one row to swipe, the next card peeking in), and "Next up" at the end. */
.section.explore { padding-block: 8px 0; }
.section.explore + .section { padding-top: 40px; }
.explore-h { font-size: 20px; margin: 0 0 12px; }
/* One slim row: photo and name (it fits across a computer screen; on a phone it scrolls sideways). */
.explore-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(124px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.explore-row .svc-card { scroll-snap-align: start; }
.explore-row .svc-media { aspect-ratio: 4 / 3; }
.explore-row .svc-card b { font-size: 15px; }
.explore-row .svc-card-text { padding: 9px 11px 11px; }
.explore-row .svc-card-text > span { display: none; }
.explore-row .svc-media.icon .tile-icon { width: 48px; height: 48px; border-radius: 14px; }
.explore-row .svc-media.icon .tile-icon svg { width: 28px; height: 28px; }
.next-section { padding-top: 0; }
.next-up { max-width: 760px; }
.next-up .svc-card { flex-direction: row; }
.next-up .svc-media { width: 40%; max-width: 260px; aspect-ratio: auto; min-height: 150px; }
.next-up .svc-card-text { justify-content: center; }
.next-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 600px) {
  .explore-row { grid-auto-columns: 40%; }
  .next-up .svc-media { width: 38%; min-height: 128px; }
  .next-up .svc-card b { font-size: 17px; }
}
/* Phones: the big three one per row, the rest two per row (an odd last one spans both). */
@media (max-width: 600px) {
  .svc-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .svc-cards.featured { grid-template-columns: 1fr; gap: 12px; margin-bottom: 10px; }
  .featured .svc-media.icon { aspect-ratio: 3 / 1; }
  .svc-cards:not(.featured) > :last-child:nth-child(odd) { grid-column: span 2; }
  .svc-cards:not(.featured) > :last-child:nth-child(odd) .svc-media { aspect-ratio: 2.4 / 1; }
  .svc-card-text { padding: 10px 12px 12px; }
  .svc-card b { font-size: 16px; }
  .featured .svc-card b { font-size: 19px; }
  .svc-cards:not(.featured) .svc-card-text > span { font-size: 13.5px; }
  .svc-go { font-size: 14px; }
}

/* Homepage: How it works, the plan band and the four locations. */
.how { list-style: none; counter-reset: how; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px; }
.how li { counter-increment: how; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
.how li::before { content: counter(how); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--white); font-weight: 700; }
.how li > * { grid-column: 2; }
.how b { font-size: 19px; color: var(--navy); }
.plan-band { flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.plan-band > div { flex: 1 1 420px; display: flex; flex-direction: column; gap: 8px; }
.plan-band .eyebrow { color: var(--panel-muted); }
.plan-band h2 { color: var(--white); }
.plan-band p:not(.eyebrow) { color: var(--panel-muted); }
.office-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
@media (max-width: 600px) { .office-links { grid-template-columns: 1fr 1fr; gap: 10px; } .office-links a { padding: 14px; } .office-links b { font-size: 16px; } .office-links span { font-size: 14px; } }
.office-links a { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: inherit; transition: border-color .15s; }
.office-links a:hover { border-color: var(--accent); }
.office-links b { color: var(--navy); font-size: 18px; }
.office-links span { font-size: 15px; }

.svc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); column-gap: 40px; border-top: 1px solid var(--line); }
.svc-list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.svc-list a b { display: block; font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--navy); }
.svc-list a span { color: var(--muted); }
.svc-list a i { font-style: normal; font-size: 22px; color: var(--accent); transition: transform .15s; }
.svc-list a:hover i { transform: translateX(4px); }

/* Split blocks */
.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.split > * { flex: 1 1 400px; min-width: 0; }
.split .photo { min-height: 360px; }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.review { margin: 0; border: 1px solid #2C4C7E; border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.review blockquote { margin: 0; font-family: var(--display); font-size: 19px; line-height: 1.45; }
.review figcaption { color: var(--panel-muted); font-size: 15px; }
.google-reviews { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.google-reviews .row { justify-content: center; }
.section:not(.dark) .review { border-color: var(--line); background: var(--white); }
.section:not(.dark) .review figcaption { color: var(--muted); }

/* Guarantees */
.guarantees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px; }
.guarantees div { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 2px solid var(--accent); }
.guarantees b { font-size: 18px; }

/* Areas */
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 40px; }
.areas ul { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.areas li a { display: inline-block; padding: 6px 12px; border: 1.5px solid var(--edge); border-radius: 999px; background: var(--white); text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 600; transition: border-color .15s, color .15s; }
.areas li a:hover { border-color: var(--accent); color: var(--accent); }

/* The top of each page: a soft gradient (Seth, 10/23/2026). */
.page-hero { padding-block: 52px 60px; background: linear-gradient(180deg, #FFFFFF 0%, var(--wash) 100%); border-bottom: 1px solid var(--line-soft); }
.page-hero .wrap { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.page-hero .copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.page-hero .side { flex: 1 1 320px; min-width: 0; }
.page-hero .side .photo { min-height: 340px; }
.page-hero .side:empty, .split > :empty, .crew-photo:empty { display: none; }
/* A short top for pages where the form is the point (Pick my day). */
.page-hero.slim { padding-block: 32px 28px; border-bottom: 0; }
.page-hero.slim .copy { gap: 12px; max-width: 760px; margin-inline: auto; }
.page-hero.slim h1 { font-size: clamp(32px, 5vw, 48px); }
.section.form-first { padding-top: 8px; background: var(--wash); }
.form-aside { margin-top: 18px; text-align: center; color: var(--ink-2); }
.crumbs { font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks li::before { content: ""; flex: 0 0 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat; }
/* A service page's How it works: one line of numbered steps going down, next to What's included (Seth, 10/25/2026). */
.step-line { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step-line li { position: relative; counter-increment: step; display: flex; flex-direction: column; gap: 2px; padding: 0 0 22px 46px; }
.step-line li:last-child { padding-bottom: 0; }
.step-line li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--white); font-size: 15px; font-weight: 700; display: grid; place-items: center; }
.step-line li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 36px; bottom: 6px; width: 2px; background: var(--line); }
.step-line li > b { font-size: 18px; line-height: 30px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 28px; counter-reset: step; }
.steps div { display: flex; flex-direction: column; gap: 8px; }
.steps div::before { counter-increment: step; content: counter(step); font-family: var(--display); font-size: 36px; color: var(--accent); line-height: 1; }
.steps b { font-size: 18px; }
/* Cards you read: a light tint, no outline or shadow. */
.price-card { background: var(--wash); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.section.tint .price-card { background: var(--white); }
.faq details { border-bottom: 1px solid var(--line); padding-block: 16px; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--ink-2); max-width: 70ch; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.cards a { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; background: var(--white); transition: border-color .15s; }
.cards a:hover { border-color: var(--accent); }
.cards b { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--navy); }
.cards span { color: var(--muted); font-size: 15px; }

/* CTA band */
.cta-band { background: var(--navy); color: var(--white); }
.cta-band .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-block: 56px; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: var(--panel-muted); margin-top: 8px; }

/* Forms */
.form { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; color: var(--ink); }
.form label .pick-hint, .form label .muted { font-weight: 400; }
.form .two { display: flex; flex-wrap: wrap; gap: 16px; }
.form .two > label { flex: 1 1 220px; }
.form .two > label.zip { flex: 0 1 140px; }
/* Address suggestions under the address box (public/js/address.js). */
.addr-field { position: relative; }
.addr-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 10px 28px rgba(11, 42, 85, .14); max-height: 320px; overflow-y: auto; font-weight: 400; }
.addr-list li { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1.3; }
.addr-list li .muted { font-size: 14px; }
.addr-list li:hover, .addr-list li[aria-selected="true"] { background: var(--pick); }
.note { font-size: 14px; color: var(--muted); }
.err { color: var(--warn); font-size: 15px; min-height: 22px; }
.err:empty { min-height: 0; }
.ok-box { background: var(--wash); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 12px; }

/* Each group of questions sits on a light panel with a numbered heading (Seth, 10/23/2026: "definitely
   like the estimate form with shading"). "Your details" is the strongest, with a blue edge. */
.form-section { display: flex; flex-direction: column; gap: 18px; min-width: 0; background: var(--panel); border-radius: 18px; padding: clamp(16px, 3vw, 24px); }
.form-section.details { background: var(--panel-strong); box-shadow: inset 4px 0 0 var(--accent); }
.form-step { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--body); font-size: 19px; font-weight: 700; color: var(--navy); }
.form-step .n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.form-section input, .form-section select, .form-section textarea { background: var(--white); }
.form-shell { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 4vw, 40px); box-shadow: 0 8px 28px rgba(11, 42, 85, .06); }
.form-shell.form { max-width: none; }
.form-shell .price-card, .form-shell .ok-box { background: var(--wash); }
/* The business quote's contact card stays white so the shaded panels inside stand out. */
.form-shell #bq-form.price-card { background: var(--white); padding: 0; max-width: none; }
.form-shell > .ok-box:only-child { background: var(--white); padding: 0; }
@media (max-width: 600px) {
  .section.tint:has(> .wrap > .form-shell) .wrap, .section.form-first .wrap { padding-inline: 12px; }
  .form-shell { border-radius: 18px; padding: 16px; }
}

/* Step bar: every step's name, ✓ on finished steps */
.stepbar { margin-bottom: 24px; }
.stepbar ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.stepbar li { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 4px solid var(--line); font-size: 14px; font-weight: 700; color: var(--muted); }
.stepbar li.done, .stepbar li.now { border-top-color: var(--accent); }
.stepbar li.now { color: var(--navy); }
.stepbar .dot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; border: 1.5px solid var(--edge); background: var(--white); color: var(--muted); }
.stepbar li.done .dot { background: var(--accent); border-color: var(--accent); color: var(--white); }
.stepbar li.now .dot { border: 2px solid var(--accent); color: var(--accent); box-shadow: var(--ring); }
.stepbar .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stepbar-now { display: none; margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 700px) { .stepbar-now { display: block; } .stepbar .name { display: none; } .stepbar li { gap: 0; padding-top: 0; border-top-width: 4px; } .stepbar .dot { display: none; } }

/* Phones: the step's main button stays in view at the bottom of the screen */
@media (max-width: 700px) {
  .sticky-actions { position: sticky; bottom: 0; z-index: 5; margin-inline: -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); }
  .sticky-actions .btn:not(.ghost) { flex: 1 1 auto; }
}

/* Phones: Call and Get my price stay at the bottom once the page's own buttons scroll away. */
.mbar { display: none; }
@media (max-width: 700px) {
  .mbar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--white); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .2s; }
  .mbar.on { transform: none; }
  .mbar .btn { flex: 1 1 0; min-height: 46px; }
  .mbar .btn.ghost { flex: 0 1 120px; }
  body.has-mbar .site-footer { padding-bottom: 72px; }
}

/* Footer */
.site-footer { background: #07193A; color: #C9D6EA; font-size: 15px; }
.site-footer .wrap { padding-block: 56px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 32px; }
.site-footer h3 { color: var(--white); font-size: 19px; margin-bottom: 10px; }
.site-footer a { color: #C9D6EA; text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer .footer-office + .footer-office { margin-top: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid #1F3560; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: #8FA3C3; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .section { padding-block: 52px; }
  .lead { font-size: 18px; }
  .page-hero .side .photo { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Sparkling Clean Program */
.member-box { margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: var(--pick); display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.member-box > b { color: var(--navy); font-size: 17px; }
.member-box a { font-weight: 700; }
.plan-card { background: var(--navy); color: #fff; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.plan-card .big { font-family: var(--display); font-size: 48px; line-height: 1; }
.plan-card .muted, .plan-card small { color: var(--panel-muted); }
.plan-card table { width: 100%; border-collapse: collapse; font-size: 15px; }
.plan-card td { padding: 7px 0; border-bottom: 1px solid #23406E; }
.plan-card td:last-child { text-align: right; white-space: nowrap; }
.plan-card td:not(:first-child) { text-align: right; white-space: nowrap; padding-left: 10px; }
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.perks div { background: var(--wash); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.perks .num { font-family: var(--display); font-size: 40px; color: var(--accent); line-height: 1; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 20px; align-items: stretch; }
.tier { position: relative; background: var(--white); border: 1px solid var(--line-strong); border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; gap: 8px; }
.tier.best { border: 2px solid var(--accent); }
.tier .tag { position: absolute; top: -13px; left: 24px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.tier h3 { font-size: 24px; }
.tier .pct { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--accent); }
.tier .checks { margin: 12px 0 16px; font-size: 15px; }
.tier .btn { margin-top: auto; }
/* A benefit a plan doesn't have: a grey dash instead of the check (the rows line up across plans). */
.checks li.no { color: var(--muted); }
.checks li.no::before { background: var(--line) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355657E' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center/14px no-repeat; }
.plan-terms-box { margin-top: 18px; font-size: 15px; }
.plan-terms-box summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.plan-terms-box p { margin-top: 10px; color: var(--muted); max-width: 80ch; }
.table-scroll { overflow-x: auto; max-width: 100%; }
@media (max-width: 520px) { .plan-card table { font-size: 14px; } .plan-card { padding: 22px 18px; } }

/* City pages: neighborhoods (read-only, so not pill-shaped) and linked towns (pills you tap). */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { background: var(--wash); border-radius: 8px; padding: 6px 12px; font-weight: 600; color: var(--navy); }
.chips a { color: inherit; text-decoration: none; }
.chips li:has(a) { background: var(--white); border: 1.5px solid var(--edge); border-radius: 999px; }
.chips li:has(a):hover { border-color: var(--accent); }

/* About: the motto band (navy-to-Sapphire-blue, centered) */
.motto { position: relative; overflow: hidden; text-align: center; color: #fff; padding: clamp(72px, 11vw, 132px) 0;
  background:
    radial-gradient(900px 340px at 12% -10%, rgba(255,255,255,.16), transparent 62%),
    radial-gradient(760px 420px at 92% 110%, rgba(126,172,255,.38), transparent 62%),
    linear-gradient(135deg, #0B1F3A 0%, #15366F 52%, #2458BD 100%); }
.motto::before, .motto::after { content: "✦"; position: absolute; color: rgba(255,255,255,.14); line-height: 1; pointer-events: none; }
.motto::before { font-size: clamp(80px, 12vw, 150px); top: 10%; left: 5%; }
.motto::after { font-size: clamp(44px, 6vw, 76px); bottom: 12%; right: 7%; color: rgba(190,214,255,.22); }
.motto .wrap { position: relative; }
.motto-spark { display: block; font-size: 26px; color: #A9C8FF; margin-bottom: 18px; }
.motto-line { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 5.6vw, 64px); line-height: 1.08; letter-spacing: -0.01em; max-width: 940px; margin: 0 auto; text-wrap: balance; }
.motto-line em { font-style: normal; color: #BFD6FF; background: linear-gradient(transparent 72%, rgba(169,200,255,.28) 72%); padding: 0 .06em; }
.motto-by { margin: 26px 0 0; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.motto-by::before, .motto-by::after { content: ""; display: inline-block; width: 32px; height: 1px; background: rgba(255,255,255,.4); vertical-align: middle; margin: 0 12px; }
@media (max-width: 600px) { .motto-by { letter-spacing: .1em; } .motto-by::before, .motto-by::after { display: none; } }

/* The Sapphire Difference (About): points with a mark, no boxes */
.diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px 28px; }
.diff-grid > div { position: relative; padding-left: 40px; display: flex; flex-direction: column; gap: 6px; }
.diff-grid b { font-size: 18px; color: var(--navy); }
.diff-mark { position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; background: var(--accent); }
.difference .split > .photo { min-height: 420px; }
@media (min-width: 900px) { .difference .wrap > .diff-grid { grid-template-columns: repeat(3, 1fr); } }
/* The Commercial page's four points, under the service tiles (Seth, 10/25/2026): one row on a computer. */
.section.biz-points { padding-top: 0; }
@media (min-width: 900px) { .biz-points .diff-grid { grid-template-columns: repeat(4, 1fr); } }

/* About: our story (one readable column, the verse as a pull quote) */
.story .wrap { max-width: 760px; }
.story .stack > p:not(.eyebrow):not(.lead) { font-size: 18px; line-height: 1.7; margin: 0; }
.verse { margin: 12px 0; padding: 26px 28px; border-left: 4px solid var(--accent); border-radius: 0 18px 18px 0; background: var(--wash); }
.verse span { display: block; color: var(--accent); font-size: 18px; margin-bottom: 8px; }
.verse p { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(22px, 3vw, 28px); line-height: 1.3; color: var(--navy); }
.verse cite { display: block; margin-top: 14px; font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.story-more { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.story-more h3 { font-size: clamp(24px, 3vw, 30px); }

/* About: core values, numbered */
.core-values h2 { font-size: clamp(36px, 6vw, 60px); letter-spacing: -0.01em; }
.core-values .lead { font-size: clamp(19px, 2.2vw, 22px); }
.values { list-style: none; counter-reset: v; padding: 0; margin: 0; display: grid; gap: 22px; max-width: 860px; }
.values li { counter-increment: v; position: relative; display: flex; flex-direction: column; gap: 4px; padding-left: 64px; }
.values li::before { content: counter(v, decimal-leading-zero); position: absolute; left: 0; top: 2px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 15px; color: #fff; background: var(--accent); }
.values b { font-family: var(--display); font-size: 20px; color: var(--navy); }

/* Business quote (/business-quote/) and the estimator's service cards */
.bq-title { font-size: clamp(30px, 5vw, 44px); }
/* The business quote's two steps (Seth, 10/25/2026: contact details first; every choice one line to pick from,
   "+ Add another" for more services or locations). */
.bq-field { display: flex; flex-direction: column; gap: 8px; }
.form .bq-field > label:not(.bq-add), .bq-label { display: block; font-weight: 700; font-size: 15px; color: var(--ink); }
.bq-rows { display: flex; flex-direction: column; gap: 8px; }
.bq-row { display: flex; align-items: center; gap: 8px; }
.bq-row-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink-2); font-size: 18px; cursor: pointer; }
.bq-field .link-btn { align-self: flex-start; padding: 2px 0; }
.bq-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.bq-thanks { gap: 6px; }
.bq-more { margin-top: 28px; }
.bq-details { max-width: none; }
.bq-details .bq-h { margin: 6px 0 10px; }
.bq-lead { margin: 12px 0 26px; }
.bq-h { font-family: var(--body); font-size: 18px; font-weight: 700; color: var(--ink); margin: 26px 0 12px; }
.bq-h .muted { font-weight: 400; font-size: 15px; }
.bq-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.bq-pick { position: relative; font: inherit; text-align: left; cursor: pointer; padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--edge); background: var(--white); color: var(--ink); display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, background .15s; }
.bq-pick b { font-size: 17px; color: var(--navy); padding-right: 30px; }
.bq-pick > span { font-size: 14px; color: var(--muted); }
.bq-pick:hover:not([disabled]) { border-color: var(--accent); }
.bq-pick[aria-pressed="true"] { border: 2px solid var(--accent); padding: 15.5px 17.5px; background: var(--pick); }
.bq-pick[aria-pressed="true"]::after { content: ""; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat; }
.bq-pick > .pick-icon { width: 40px; height: 40px; margin-bottom: 6px; border-radius: 12px; display: grid; place-items: center; background: var(--pick); }
.bq-pick[aria-pressed="true"] > .pick-icon { background: var(--white); }
.pick-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bq-pick .pick-tag { align-self: flex-start; margin-top: auto; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--accent); font-size: 13px; font-weight: 700; color: var(--accent); background: var(--white); }
.bq-pick > span:not(.pick-icon) { margin-bottom: 10px; }
.bq-pick[aria-pressed="true"] .pick-tag { background: var(--accent); color: var(--white); }
/* Phones: compact cards, the icon beside the words */
@media (max-width: 600px) {
  .bq-picks { gap: 10px; }
  .bq-pick { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; padding: 14px 16px; }
  .bq-pick[aria-pressed="true"] { padding: 13.5px 15.5px; }
  .bq-pick > .pick-icon { grid-row: 1 / span 3; margin: 0; }
  .bq-pick > b, .bq-pick > span:not(.pick-icon), .bq-pick > .pick-tag { grid-column: 2; }
  .bq-pick > .pick-tag { justify-self: start; }
  .bq-pick > span:not(.pick-icon) { margin-bottom: 6px; }
  .bq-pick[aria-pressed="true"]::after { top: 10px; right: 10px; }
}
.bq-chips, .pick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bq-chip, .pick-chip { font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 44px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--edge); background: var(--white); color: var(--navy); transition: border-color .15s, color .15s; }
.bq-chip:hover, .pick-chip:hover { border-color: var(--accent); color: var(--accent); }
.bq-chip[aria-pressed="true"], .pick-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--white); }
.bq-chip[aria-pressed="true"]::before, .pick-chip[aria-pressed="true"]::before { content: "✓ "; }
/* A two-way switch (Pick my day: for my home / for my business), so it doesn't look like the options under it. */
.pick-chips.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--white); border: 1.5px solid var(--edge); max-width: 420px; }
.pick-chips.seg .pick-chip { border: 0; min-height: 40px; padding: 8px 10px; }
.pick-chips.seg .pick-chip[aria-pressed="true"]::before { content: ""; }

/* Pick your day (the booking page and the estimator's thank-you screen) */
[hidden] { display: none !important; } /* layout rules like `.form label { display: flex }` would otherwise show hidden parts */
.pick-group { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pick-group legend { font-weight: 700; color: var(--ink); padding: 0; margin-bottom: 10px; }
.pick-hint { margin: 0; font-size: 14px; color: var(--muted); }
/* "Pick a date": the box and its calendar (Seth, 10/25/2026); weekends tinted amber with the warning */
.cal-field { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.cal-box { font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--edge); background: var(--white); color: var(--muted); transition: border-color .15s; }
.cal-box.has { color: var(--navy); }
.cal-box:hover, .cal-box[aria-expanded="true"] { border-color: var(--accent); }
.cal-box svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.cal-text { flex: 1; }
.cal-caret { flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-3px) rotate(45deg); transition: transform .15s; }
.cal-box[aria-expanded="true"] .cal-caret { transform: translateY(2px) rotate(-135deg); }
.cal { background: var(--white); border: 1.5px solid var(--line-strong); border-radius: 16px; padding: 14px; box-shadow: 0 12px 32px rgba(11, 31, 58, .10); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-head b { font-size: 17px; color: var(--ink); }
.cal-nav { font: inherit; font-size: 24px; line-height: 1; width: 44px; height: 44px; padding: 0 0 3px; border-radius: 50%; border: 1.5px solid var(--edge); background: var(--white); color: var(--navy); cursor: pointer; }
.cal-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-week span { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 4px 0; }
.cal-day { font: inherit; font-size: 16px; font-weight: 600; height: 46px; padding: 0; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--white); color: var(--navy); cursor: pointer; position: relative; transition: border-color .15s; }
.cal-day:hover:not(:disabled) { border-color: var(--accent); }
.cal-day.wknd { background: #FFF6E5; border-color: #E5C27E; }
.cal-day.wknd::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--warn); }
.cal-day[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--white); }
.cal-day.wknd[aria-pressed="true"]::after { background: var(--white); }
.cal-day:disabled { border-color: transparent; background: transparent; color: #A3AFC2; font-weight: 500; cursor: default; }
.cal-day.hol:disabled { text-decoration: line-through; }
.cal-day.blank { visibility: hidden; border: 0; }
.cal-key { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.cal-key i { flex: none; width: 16px; height: 16px; border-radius: 4px; background: #FFF6E5; border: 1.5px solid #E5C27E; }
.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.cal-foot .btn { min-height: 44px; padding: 10px 22px; }
.cal-full { color: var(--warn); font-weight: 600; }
.cal-warn { margin: 0; padding: 10px 14px; border-radius: 12px; background: #FFF1D6; color: #7A4B00; font-size: 14px; font-weight: 600; }
.est-cal { margin: 14px 0; }
@media (max-width: 400px) { .cal { padding: 10px; } .cal-day { height: 42px; font-size: 15px; } .cal-week, .cal-grid { gap: 3px; } }
.bq-note { margin: 10px 0 0; font-size: 14px; }
.bq-actions { margin-top: 28px; }
.bq-photos { border: 2px dashed var(--edge); border-radius: 16px; background: var(--wash); padding: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bq-thumb { position: relative; }
.bq-thumb img { width: 112px; height: 84px; object-fit: cover; border-radius: 10px; display: block; }
.bq-thumb button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(11, 31, 58, .75); color: #fff; cursor: pointer; }
.bq-add { width: 112px; height: 84px; border-radius: 10px; border: 1.5px solid var(--accent); background: var(--white); color: var(--accent); font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: background .15s; }
.bq-add:hover { background: var(--pick); }
.bq-desc { width: 100%; min-height: 140px; box-sizing: border-box; font: inherit; padding: 14px; border-radius: 12px; border: 1.5px solid var(--edge); background: var(--white); resize: vertical; }

/* The estimator (/estimate/): one short screen at a time (Seth, 10/24/2026). */
#estimator { max-width: 760px; margin-inline: auto; }
.est-title { font-size: clamp(28px, 4.4vw, 40px); }
.est-lead { margin: 8px 0 22px; font-size: 18px; color: var(--ink-2); }
.est-title + .est-price, .est-title + .est-note, .est-title + .est-panel { margin-top: 20px; }
.est-title + .est-q-label { display: block; margin-top: 18px; }
.est-q { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.est-q-label { font-size: 17px; color: var(--ink); }
.est-input { display: flex; flex-direction: column; gap: 8px; }
.est-input input { max-width: 240px; }
.est-panel { background: var(--wash); border-radius: 18px; padding: 6px 18px; margin-bottom: 20px; }
.est-panel > .est-q { margin: 16px 0; }
.est-count { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
.est-count:last-child { border-bottom: 0; }
.est-count-label { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.est-count-label .muted { font-size: 14px; }
.est-count-input { display: flex; align-items: center; gap: 8px; }
.est-count-input input { width: 80px; text-align: center; font-weight: 700; }
.est-count-input .unit { min-width: 34px; color: var(--muted); font-size: 14px; }
.est-note { background: var(--pick); border-radius: 16px; padding: 16px 18px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.est-assume { margin-bottom: 18px; font-size: 15px; }
.est-assume summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.est-assume[open] { background: var(--wash); border-radius: 14px; padding: 12px 16px; }
.est-assume > span { display: block; margin-top: 6px; }
.est-switch { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 4px 0 8px; }
.est-actions { margin-top: 12px; }
.est-form { max-width: none; }
.est-picks { margin-bottom: 16px; }
.est-picks .bq-pick > span:not(.pick-icon) { margin-bottom: 0; }
.est-block { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.est-h { font-family: var(--body); font-size: 20px; font-weight: 700; color: var(--navy); }
.est-summary { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.est-summary li { display: flex; flex-direction: column; }
.est-summary .muted { font-size: 15px; }
/* The price: first thing on the last screen, with the one button. */
.est-price { background: var(--navy); color: var(--white); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.est-price-label { font-size: 15px; color: var(--panel-muted); }
.est-price-range { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 8vw, 52px); line-height: 1.05; }
.est-price-range.small { font-size: 32px; }
.est-price-sub { font-size: 15px; color: #9BE3B8; font-weight: 600; }
.est-price-note { font-size: 14px; color: #FFD08A; }
.est-price-closer { font-size: 14px; color: var(--white); }
.est-price-closer .link-btn { color: var(--white); font-size: 14px; padding: 0; }
/* "Pick your estimate type", at the top of "Your home" in its own box (Seth, 10/24/2026: they need to
   stand out, and show which is most accurate): radio-style cards with an accuracy meter. */
.how-box { background: var(--pick); border-radius: 18px; padding: 14px; margin: 14px 0 22px; box-shadow: inset 4px 0 0 var(--accent); }
.how-box-title { display: block; font-size: 18px; color: var(--navy); margin: 0 0 10px 4px; }
.how-picks { display: grid; gap: 8px; }
.how-pick { font: inherit; text-align: left; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; border: 1.5px solid var(--edge); background: var(--white); color: var(--muted); font-size: 14px; line-height: 1.4; transition: border-color .15s; }
.how-pick:hover { border-color: var(--accent); }
.how-pick[aria-pressed="true"] { border: 2px solid var(--accent); padding: 13.5px; }
.how-radio { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--edge); background: var(--white); }
.how-pick[aria-pressed="true"] .how-radio { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--white); background: var(--accent); }
.how-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.how-name { font-size: 17px; color: var(--navy); }
.how-badges { display: flex; flex-wrap: wrap; gap: 5px; }
@media (max-width: 420px) { .how-badges .how-time, .how-badges .how-acc { font-size: 12px; padding: 2px 6px; } .how-time svg { width: 13px; height: 13px; } .how-pick { gap: 10px; padding: 12px; } .how-pick[aria-pressed="true"] { padding: 11.5px; } }
.how-time { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 13px; font-weight: 700; white-space: nowrap; }
.how-time svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.how-acc { padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.how-acc.acc-3 { background: #E7F6EC; color: #1E6B3E; }
.how-acc.acc-2 { background: var(--wash); color: var(--navy); }
.how-acc.acc-1 { background: #FFF1D6; color: #7A4B00; }
.how-line { color: var(--ink-2); }
/* "Measure it yourself": how to count and measure. */
.est-guide { background: var(--wash); border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; font-size: 15px; }
.est-guide summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.est-guide p { margin-top: 8px; color: var(--ink-2); }
/* Optional photos and videos with every estimate type. */
.est-media { margin-top: 4px; }
.est-videos { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.est-video { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--wash); font-size: 15px; }
.est-video > span { min-width: 0; overflow-wrap: anywhere; }
.est-video button { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(11, 31, 58, .75); color: #fff; cursor: pointer; }
.bq-add.video-add { width: auto; height: 48px; padding: 0 18px; align-self: flex-start; }

/* The three Sparkling Clean plans side by side on the price screen (Seth, 10/24/2026), the same
   benefit rows in each so the differences line up; tap one to price it. */
.tier-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tier-pick { font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border-radius: 14px; border: 1.5px solid var(--edge); background: var(--white); color: var(--ink); transition: border-color .15s, background .15s; }
.tier-pick:hover { border-color: var(--accent); }
.tier-pick[aria-pressed="true"] { border: 2px solid var(--accent); padding: 11.5px 9.5px; background: var(--pick); }
/* The rows line up across the three plans: tag, name, price, savings, then one row per benefit. */
@supports (grid-template-rows: subgrid) {
  .tier-picks { grid-template-rows: repeat(11, auto); row-gap: 0; }
  .tier-pick { display: grid; grid-row: span 11; grid-template-rows: subgrid; row-gap: 6px; align-content: start; }
  .tier-pick > .tp-tag, .tier-pick > .tp-save { justify-self: start; align-self: start; }
}
.tp-tag { align-self: flex-start; min-height: 22px; padding: 2px 8px; border-radius: 6px; background: var(--accent); color: var(--white); font-size: 12px; font-weight: 700; }
.tp-tag.blank { background: none; }
.tp-name { font-size: 16px; color: var(--navy); line-height: 1.2; }
.tp-price { display: flex; flex-direction: column; line-height: 1.2; }
.tp-price small { font-size: 12px; color: var(--muted); }
.tp-price strong { font-size: 16px; color: var(--accent); }
.tp-save { align-self: flex-start; min-height: 22px; padding: 2px 6px; border-radius: 6px; background: #E7F6EC; color: #1E6B3E; font-size: 12px; font-weight: 700; }
.tp-save.blank { background: none; }
.tp-perk { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.35; }
.tp-perk::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--good); font-weight: 700; }
.tp-perk.no { color: var(--muted); }
.tp-perk.no::before { content: "–"; color: #9AA7B8; }
.plan-terms { font-size: 14px; color: var(--muted); background: var(--wash); border-radius: 12px; padding: 12px 14px; }
@media (max-width: 400px) { .tier-picks { gap: 6px; } .tier-pick { padding: 10px 7px; } .tier-pick[aria-pressed="true"] { padding: 9.5px 6.5px; } .tp-perk { font-size: 12px; padding-left: 15px; } .tp-name, .tp-price strong { font-size: 15px; } }
.est-done { display: flex; flex-direction: column; gap: 12px; }
.est-done-range { font-size: 22px; font-weight: 700; color: var(--navy); }
.est-days .pick-chips { margin-top: 4px; }
.est-bar { display: none; }
@media (max-width: 700px) {
  .est-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-between; align-items: center; gap: 12px; background: var(--navy); color: var(--white); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); transition: transform .2s; }
  .est-bar.on { transform: none; }
  .est-bar small { display: block; font-size: 13px; color: var(--panel-muted); }
  .est-bar b { font-family: var(--display); font-weight: 600; font-size: 22px; }
  #estimator { padding-bottom: 72px; }
}

/* Town pages: Google rating band (no review cards, so none repeat) */
.rating-band { text-align: center; }
.rating-band .wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rating-band p.stars { margin: 0; font-size: 28px; letter-spacing: 4px; color: var(--gold); }
.rating-band h2 { color: var(--white); }
.rating-band p { margin: 0; color: var(--panel-muted); }
.rating-band .btn { margin-top: 8px; }