/* Ten DRAFT looks for choosing from (docs/LOOKS-DRAFTS-2026-10.md). Loaded on previews only, after site.css.
   Same markup as Bold/Classic/Clean; each look is a body.style-<name> block. The ones Alan doesn't pick get deleted,
   the ones he picks move into site.css. Fonts: assets/fonts/fonts.css (self-hosted, generated from looks.mjs). */

/* ---------- shared bits the drafts lean on ---------- */
.draft-bar { position: sticky; top: 64px; z-index: 19; display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 8px 12px; background: #fff6dc; border-bottom: 1px solid #e6cf8a; font: 600 13px/1 "Barlow", system-ui, sans-serif; color: #6b4d00; scrollbar-width: none; }
.draft-bar[hidden] { display: none; }
.draft-bar::-webkit-scrollbar { display: none; }
.draft-bar span { flex: none; margin-right: 4px; }
.draft-bar button { flex: none; font: inherit; color: #1c2128; background: #fff; border: 1px solid #d9c27a; border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.draft-bar button[aria-pressed="true"] { background: #1c2128; color: #fff; border-color: #1c2128; }
[class*="style-"] .kicker { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 500; }
.style-bold .kicker, .style-classic .kicker, .style-clean .kicker { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 600; }

/* =====================================================================================================
   NIGHT — the brand color's own shadow as the page; the hero photo in duotone, fading into it.
   ===================================================================================================== */
.style-night { --deep: color-mix(in oklab, var(--primary) 22%, #0c1014); --deep-2: color-mix(in oklab, var(--primary) 34%, #0c1014); --ink: #eef1f4; --ink-2: #aeb7c2;
  background: var(--deep); color: var(--ink); font-family: "Figtree", system-ui, sans-serif; }
.style-night h1, .style-night h2, .style-night h3, .style-night .logo, .style-night .foot-name, .style-night .big-rating, .style-night .band-line, .style-night .tiers strong, .style-night .tiers .price { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; letter-spacing: -.01em; }
.style-night h1 { font-size: clamp(2.3rem, 6.4vw, 3.9rem); line-height: 1.02; letter-spacing: -.02em; }
.style-night .muted { color: var(--ink-2); }
.style-night a { color: #fff; }
.style-night .btn { border-radius: 6px; }
.style-night .btn-accent { box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent), 0 8px 28px -6px color-mix(in oklab, var(--accent) 70%, transparent); }
.style-night .btn-primary { background: #fff; color: var(--deep); }
.style-night .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.style-night .top { background: color-mix(in oklab, var(--deep) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); }
.style-night .logo, .style-night .top-nav a, .style-night .top-nav .nav-svc summary { color: #fff; }
.style-night .top-nav .nav-svc .nav-menu a { color: #1c2128; } /* the dropdown itself stays a white card */
/* Phone menu (2026-10-11): the blur made .top the containing block for the fixed slide-out menu, so it opened squeezed
   into the header and widened the page; and its white panel carried Night's white links. Solid header, dark links. */
@media (max-width: 899px) {
  .jsnav .style-night .top { background: var(--deep); backdrop-filter: none; }
  .jsnav .style-night .top-nav a, .jsnav .style-night .top-nav .nav-svc summary { color: #1c2128; }
  .jsnav .style-night .top-nav .nav-svc .nav-menu a:first-child { color: var(--primary); }
}
.style-night .top-claim { color: var(--own-accent); }
/* No photo at the top (Alan, 2026-10-07). Night tinted the hero photo with the brand color through mix-blend-mode,
   which on most trades came out murky — a green or teal wash over a gray image, with the subject hard to read. The
   look's appeal is the typography on near-black, and it is stronger carrying that alone. Photos still appear further
   down in the work row, so the page is not photo-less. */
.style-night .hero { background: var(--deep); padding: 54px 0 48px; color: var(--ink); }
.style-night .hero::before, .style-night .hero::after { display: none; }
.style-night .hero-copy h1 { text-shadow: none; }
/* a quiet seam under the header, so the hero doesn't read as one unbroken slab */
.style-night .hero { border-bottom: 1px solid rgba(255,255,255,.07); }
.style-night .lede { color: var(--ink-2); opacity: 1; }
.style-night .trust { color: var(--ink-2); }
.style-night .trust-stars { color: #fff; }
.style-night .quote-card { background: var(--deep-2); color: var(--ink); border: 1px solid rgba(255,255,255,.1); box-shadow: none; }
.style-night .quote-card .muted, .style-night .form-note, .style-night .f-consent { color: var(--ink-2); }
.style-night form input, .style-night form textarea, .style-night form select { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
.style-night form input::placeholder, .style-night form textarea::placeholder { color: rgba(255,255,255,.66); opacity: 1; }
.style-night .form-disabled input, .style-night .form-disabled textarea, .style-night .form-disabled select { background: rgba(255,255,255,.03); }
@media (min-width: 900px) {
  .style-night .hero { padding: 72px 0 76px; }
  /* copy starts at the top: aligned to the end it floated halfway down beside the taller estimate card */
  .style-night .hero-grid { align-items: start; }
}
.style-night section { background: var(--deep); }
.style-night .services, .style-night .work, .style-night .how, .style-night .faq, .style-night .about-area { background: var(--deep); }
.style-night .service-grid li, .style-night .how-steps li { background: var(--deep-2); border-color: rgba(255,255,255,.08); }
.style-night .service-grid p, .style-night .how-steps p, .style-night .why-grid p, .style-night details p, .style-night .work-note { color: var(--ink-2); }
.style-night .service-grid li:hover { box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.style-night .ic-card, .style-night .ic-why { color: var(--accent-text, var(--accent)); }
.style-night .why { background: var(--deep-2); }
.style-night .band::before { background: linear-gradient(180deg, color-mix(in oklab, var(--deep) 60%, transparent), var(--deep)); }
.style-night .reviews { background: var(--deep-2); }
.style-night .review-list li { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.style-night .big-rating { color: var(--accent-text, var(--accent)); }
.style-night .how-n { background: var(--accent); color: var(--deep); }
.style-night .area-card { background: var(--deep-2); }
.style-night .towns li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.style-night details { border-color: rgba(255,255,255,.1); }
.style-night .faq-list details:first-child { border-top-color: rgba(255,255,255,.1); }
.style-night .faq summary::after { background: rgba(255,255,255,.1); color: var(--accent-text, var(--accent)); }
.style-night .final-cta { background: var(--primary); }
.style-night .offer { background: #0c1014; }
.style-night .quick-try { border-top-color: rgba(255,255,255,.12); }
.style-night .yours-sec { background: var(--deep-2); border-top-color: rgba(255,255,255,.08); }
.style-night .sample-tag { background: rgba(255,255,255,.1); border-color: var(--accent); color: #fff; }
.style-night footer { background: #0c1014; }
.style-night .sticky-bar { background: color-mix(in oklab, var(--deep) 92%, transparent); border-top-color: rgba(255,255,255,.1); }
.style-night .svc-hero { background: var(--deep-2); } .style-night .side-card { background: var(--deep-2); }
.style-night .look-bar.look-inline button { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
.style-night .look-bar.look-inline button[aria-pressed="true"] { background: var(--own-accent); color: var(--own-ink); border-color: var(--own-accent); }

/* =====================================================================================================
   SIGNAL — industrial and high-energy: a heavy capitals headline, a sharp accent stripe, and angled cuts on the hero
   photo and the wide strip only (2026-10-11: every band used to be cut, and every heading shouted; see the review block).
   ===================================================================================================== */
.style-signal { font-family: "Public Sans", system-ui, sans-serif; --cut: 4vw; }
.style-signal h1, .style-signal h2, .style-signal h3, .style-signal .logo, .style-signal .foot-name, .style-signal .big-rating, .style-signal .band-line, .style-signal .tiers strong, .style-signal .tiers .price, .style-signal .how-n { font-family: "Big Shoulders Display", "Barlow Condensed", sans-serif; font-weight: 800; letter-spacing: .01em; }
.style-signal h1 { font-size: clamp(2.8rem, 9vw, 5.4rem); line-height: .95; text-transform: uppercase; }
.style-signal h2 { font-size: clamp(2rem, 4.5vw, 3rem); text-transform: uppercase; }
.style-signal h3 { font-size: 1.35rem; }
.style-signal .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.style-signal .top { border-bottom: 0; }
.style-signal .top::after { content: ""; display: block; height: 6px; background: repeating-linear-gradient(135deg, var(--accent) 0 14px, #1c2128 14px 28px); }
.style-signal .hero { background: var(--primary); padding: 44px 0 0; color: #fff; }
.style-signal .hero { display: flex; flex-direction: column; }
.style-signal .hero .wrap { order: 1; width: 100%; }
.style-signal .hero::before { order: 2; position: relative; display: block; inset: auto; height: 60vw; max-height: 460px; min-height: 240px; margin-top: 28px; clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); animation: none; }
.style-signal .hero::after { display: none; }
.style-signal .hero-grid { display: block; }
.style-signal .hero-copy h1 { text-shadow: none; }
.style-signal .kicker { color: var(--accent-on-primary, var(--accent)); font-weight: 700; }
.style-signal .btn-ghost { border-color: #fff; }
.style-signal .quote-card { border-radius: 0; box-shadow: none; border-top: 6px solid var(--accent); margin-top: 24px; }
@media (min-width: 900px) {
  .style-signal .hero { padding-top: 64px; }
  .style-signal .hero-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 56px; align-items: start; }
  .style-signal .quote-card { margin-top: 0; }
  .style-signal .hero::before { height: 460px; margin-top: 36px; }
}
.style-signal section { padding: 64px 0; }
.style-signal .services { background: #fff; }
.style-signal .service-grid { gap: 0; border: 2px solid #1c2128; }
.style-signal .service-grid li { border: 0; border-radius: 0; outline: 1px solid #1c2128; outline-offset: -.5px; padding: 24px; }
.style-signal .service-grid li:hover { transform: none; box-shadow: inset 0 0 0 4px var(--accent); }
.style-signal .ic-card { color: var(--primary); }
.style-signal .svc-n { display: inline-block; font-family: "Big Shoulders Display", "Barlow Condensed", sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.2; letter-spacing: .02em; background: var(--accent); color: var(--accent-ink, #1c2128); padding: 2px 9px; margin-bottom: 12px; }
.style-signal .band-sec { background: #fff; }
.style-signal .band { clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut))); min-height: 460px; }
.style-signal .band-line { text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.4rem); }
.style-signal .work-grid li { border-radius: 0; }
.style-signal .why { background: var(--primary); color: #fff; clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); padding-top: calc(64px + var(--cut)); }
.style-signal .why-grid p { color: rgba(255,255,255,.82); }
.style-signal .ic-why { color: var(--accent-on-primary, var(--accent)); }
.style-signal .reviews { background: #fff; color: #1c2128; }
.style-signal .review-summary .muted { color: #5b6470; }
.style-signal .reviews .btn-ghost-dark { color: var(--primary); border-color: var(--primary); }
.style-signal .review-list li { background: #f1f3f5; border-radius: 0; border-left: 6px solid var(--accent); }
.style-signal .big-rating { color: var(--primary); font-size: 5.5rem; }
.style-signal .how { background: #1c2128; color: #fff; clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%); padding-top: calc(64px + var(--cut)); }
.style-signal .how .how-steps li { border-radius: 0; border-color: rgba(255,255,255,.2); }
.style-signal .how .how-steps p { color: rgba(255,255,255,.8); }
.style-signal .how-n { border-radius: 0; background: var(--accent); color: var(--accent-ink, #1c2128); font-size: 1.3rem; }
.style-signal .area-card { border-radius: 0; background: #f1f3f5; border-top: 6px solid var(--primary); }
.style-signal .towns li { border-radius: 0; }
.style-signal .faq summary::after { border-radius: 0; background: #1c2128; color: var(--accent-text, var(--accent)); }
.style-signal .final-cta { background: var(--accent); color: var(--accent-ink, #1c2128); clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); padding-top: calc(64px + var(--cut)); }
.style-signal .final-cta .btn-accent { background: #1c2128; color: #fff; }
.style-signal .final-cta .btn-ghost { color: #1c2128; border-color: #1c2128; }
.style-signal .how-steps li, .style-signal .side-card { border-radius: 0; }
.style-signal .sample-tag { border-radius: 0; }
.style-signal .sticky-bar .btn { border-radius: 0; text-transform: none; letter-spacing: 0; } .style-signal .chat-launch { text-transform: none; letter-spacing: 0; }

/* =====================================================================================================
   POSTER — no hero photo: the headline is the picture, huge and wide on the brand color.
   ===================================================================================================== */
.style-poster { font-family: "Archivo Variable", system-ui, sans-serif; font-stretch: 100%; }
.style-poster h1, .style-poster h2, .style-poster h3, .style-poster .logo, .style-poster .foot-name, .style-poster .big-rating, .style-poster .band-line, .style-poster .tiers strong, .style-poster .tiers .price { font-family: "Archivo Variable", system-ui, sans-serif; font-weight: 800; font-stretch: 125%; letter-spacing: -.02em; }
.style-poster h1 { font-size: clamp(2.6rem, 11.5vw, 5.2rem); line-height: .92; letter-spacing: -.035em; margin-bottom: .25em; }
.style-poster h2 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: .98; }
.style-poster .btn { border-radius: 0; font-weight: 700; font-stretch: 110%; }
.style-poster .top { border-bottom: 4px solid var(--primary); }
.style-poster .hero { background: var(--primary); color: #fff; padding: 44px 0 40px; }
.style-poster .hero::before, .style-poster .hero::after { display: none; }
.style-poster .hero-grid { grid-template-areas: "copy" "quote"; gap: 32px; }
.style-poster .hero-copy { grid-area: copy; }
.style-poster .hero-copy h1 { text-shadow: none; overflow-wrap: break-word; }
.style-poster .kicker { color: var(--accent-on-primary, var(--accent)); font-weight: 700; font-stretch: 110%; }
.style-poster .tagline { font-stretch: 110%; font-weight: 700; color: var(--accent-on-primary, var(--accent)); }
.style-poster .lede { font-size: 1.2rem; max-width: 30em; }
.style-poster .btn-ghost { background: transparent; border-color: #fff; }
.style-poster .quote-card { grid-area: quote; border-radius: 0; box-shadow: none; border: 4px solid #fff; background: #fff; }
.style-poster .quote-card h2 { font-size: 1.5rem; font-stretch: 110%; }
.style-poster form input, .style-poster form textarea, .style-poster form select { border-radius: 0; border-color: #1c2128; }
@media (min-width: 900px) {
  .style-poster .hero { padding: 72px 0 64px; }
  .style-poster .hero-grid { grid-template-columns: 1.6fr .8fr; grid-template-areas: "copy quote"; align-items: center; gap: 64px; }
  .style-poster h1 { font-size: clamp(3rem, 6vw, 5rem); }
}
/* the photo arrives as a full-width strip after the hero */
.style-poster .services { padding-top: 0; }
.style-poster .services::before { content: ""; display: block; height: 46vw; max-height: 420px; background: var(--hero) var(--hero-pos, center)/cover no-repeat; margin-bottom: 56px; }
.style-poster section { border-top: 4px solid var(--primary); }
.style-poster .hero, .style-poster .services, .style-poster .band-sec, .style-poster .owner { border-top: 0; }
.style-poster .service-grid { gap: 0; }
.style-poster .service-grid li { border: 0; border-top: 2px solid #1c2128; border-radius: 0; padding: 22px 0; display: block; }
.style-poster .service-grid li h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.05; margin-bottom: 6px; }
.style-poster .service-grid li:hover { transform: none; box-shadow: none; }
.style-poster .service-grid li.svc-ask { background: transparent; }
@media (min-width: 700px) { .style-poster .service-grid { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.style-poster .band-line { font-stretch: 125%; font-size: clamp(2rem, 5.5vw, 3.8rem); }
.style-poster .work-grid li { border-radius: 0; }
.style-poster .why { background: #fff; }
.style-poster .why-grid li { border-top: 2px solid #1c2128; padding-top: 16px; }
.style-poster .reviews { background: var(--accent); color: var(--accent-ink, #151a20); }
.style-poster .review-summary .muted, .style-poster .review-attrib { color: inherit; opacity: 1; }
.style-poster .svc-hero .lede { max-width: 46em; font-size: 1.08rem; } /* service and town pages keep the full intro width (Alan 2026-10-11) */
.style-poster .review-summary .stars { color: var(--accent-ink, #151a20); } /* gold stars vanish on the accent band (Alan 2026-10-11): the ink color, like the number beside them */
.style-poster .reviews .btn-ghost-dark { color: var(--accent-ink, #151a20); border-color: var(--accent-ink, #151a20); }
.style-poster .review-list li { background: #fff; color: #1c2128; border-radius: 0; } /* the section text is the accent's ink, white on a dark accent: the white cards need their own */
.style-poster .big-rating { font-size: 6rem; }
.style-poster .how-steps li { border-radius: 0; border: 0; border-top: 2px solid #1c2128; padding-left: 0; padding-right: 0; }
.style-poster .how-n { border-radius: 0; font-weight: 800; }
.style-poster .area-card { border-radius: 0; background: var(--primary); color: #fff; }
.style-poster .area-card h2 { color: #fff; } .style-poster .area-card .btn-primary { background: #fff; color: var(--primary); }
.style-poster .towns li { border-radius: 0; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.style-poster .faq summary::after { border-radius: 0; background: #1c2128; color: #fff; }
.style-poster .final-cta { background: #1c2128; }
.style-poster .side-card, .style-poster .sample-tag, .style-poster .review-list li { border-radius: 0; }
.style-poster .sticky-bar .btn { border-radius: 0; }
.style-poster .svc-hero { background: var(--primary); color: #fff; } .style-poster .svc-hero .crumbs, .style-poster .svc-hero .lede { color: rgba(255,255,255,.85); } .style-poster .svc-hero .crumbs a { color: #fff; }

/* =====================================================================================================
   FRAME — editorial: a big serif headline, the photo as a keylined picture with a caption, pull-quote reviews.
   ===================================================================================================== */
.style-frame { font-family: "Source Sans 3", system-ui, sans-serif; font-size: 17px; color: #1c2128; }
.style-frame h1, .style-frame h2, .style-frame h3, .style-frame .logo, .style-frame .foot-name, .style-frame .big-rating, .style-frame .band-line, .style-frame .tiers strong, .style-frame .tiers .price { font-family: "Newsreader", Georgia, serif; font-weight: 600; letter-spacing: -.01em; }
.style-frame h1 { font-size: clamp(2.6rem, 8vw, 4.4rem); line-height: 1.02; }
.style-frame h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.style-frame h3 { font-size: 1.3rem; }
.style-frame .btn { border-radius: 0; }
.style-frame .top { border-bottom: 1px solid #1c2128; }
.style-frame .hero { background: #fff; color: #1c2128; padding: 44px 0 40px; }
.style-frame .hero::before, .style-frame .hero::after { display: none; }
.style-frame .hero-grid { grid-template-areas: "copy" "photo" "quote"; gap: 28px; }
.style-frame .hero-copy { grid-area: copy; }
.style-frame .hero-copy h1 { text-shadow: none; }
.style-frame .kicker { font-style: italic; color: #5b6470; font-family: "Newsreader", serif; font-size: 1.05rem; }
.style-frame .tagline { font-family: "Newsreader", serif; font-style: italic; font-weight: 500; font-size: 1.3rem; color: var(--primary); }
.style-frame .lede { opacity: 1; color: #3d4652; font-size: 1.15rem; }
.style-frame .btn-ghost { background: transparent; color: #1c2128; border-color: #1c2128; }
.style-frame .trust { color: #3d4652; }
.style-frame .hero-photo { display: block; grid-area: photo; aspect-ratio: 3 / 2; background: var(--hero) var(--hero-pos, center)/cover no-repeat; outline: 1px solid #1c2128; outline-offset: 6px; margin: 8px 8px 0; position: relative; }
.style-frame .hero-photo::after { content: attr(data-caption); position: absolute; left: 0; top: calc(100% + 14px); font: italic 15px/1.4 "Newsreader", Georgia, serif; color: #5b6470; }
.style-frame .hero-grid { row-gap: 44px; }
.style-frame .quote-card { grid-area: quote; border-radius: 0; box-shadow: none; border: 1px solid #1c2128; margin-top: 28px; }
.style-frame form input, .style-frame form textarea, .style-frame form select { border-radius: 0; border-color: #1c2128; }
@media (min-width: 900px) {
  .style-frame .hero { padding: 64px 0 56px; }
  .style-frame .hero-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "copy photo" "quote photo"; gap: 28px 64px; align-items: start; }
  .style-frame .hero-photo { aspect-ratio: 4 / 5; margin: 8px; background-image: var(--hero-tall); background-position: center; }
  .style-frame .quote-card { margin-top: 0; }
}
.style-frame section { padding: 64px 0; }
.style-frame .sec-head h2 { max-width: 20em; }
.style-frame .service-grid { gap: 28px 40px; }
.style-frame .service-grid li { border: 0; border-radius: 0; padding: 0; }
.style-frame .service-grid li:hover { transform: none; box-shadow: none; }
.style-frame .service-grid h3 { font-size: 1.45rem; }
.style-frame .service-grid p { font-size: 1rem; }
.style-frame .ic-card { width: 26px; height: 26px; }
.style-frame .svc-n { display: block; font: italic 500 1.15rem/1 "Newsreader", Georgia, serif; color: var(--primary); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #1c2128; width: 2.2em; }
.style-frame .band-sec { padding: 0 20px; } .style-frame .band { max-width: 1080px; margin: 0 auto; outline: 1px solid #1c2128; outline-offset: 6px; }
.style-frame .band-line { font-weight: 500; font-style: italic; }
.style-frame .work-grid li { border-radius: 0; outline: 1px solid #1c2128; outline-offset: 4px; } .style-frame .work-grid { gap: 20px; }
.style-frame .why { background: #fff; border-top: 1px solid #1c2128; }
.style-frame .why-grid p { font-size: 1rem; }
.style-frame .reviews { background: var(--tint); color: #1c2128; }
.style-frame .review-summary .muted { color: #5b6470; }
.style-frame .reviews .btn-ghost-dark { color: #1c2128; border-color: #1c2128; }
.style-frame .review-list { grid-template-columns: 1fr; gap: 28px; max-width: 760px; }
.style-frame .review-list li { background: transparent; border-radius: 0; padding: 0 0 0 28px; border-left: 2px solid var(--primary); }
.style-frame .review-list .stars { display: none; }
.style-frame .review-list blockquote { font-family: "Newsreader", Georgia, serif; font-size: 1.45rem; line-height: 1.3; font-weight: 500; margin: 0 0 8px; }
.style-frame .big-rating { font-weight: 500; }
.style-frame .how-steps li { border: 0; border-top: 1px solid #1c2128; border-radius: 0; padding: 18px 0 0; }
.style-frame .how-n { border-radius: 0; background: transparent; color: var(--primary); border: 1px solid var(--primary); font-family: "Newsreader", serif; font-weight: 600; }
.style-frame .area-card { border-radius: 0; background: transparent; border: 1px solid #1c2128; }
.style-frame .towns li { border-radius: 0; border-color: #1c2128; }
.style-frame .faq summary { font-family: "Newsreader", serif; font-size: 1.25rem; font-weight: 500; }
.style-frame .faq summary::after { border-radius: 0; background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.style-frame .final-cta { background: #1c2128; }
.style-frame .side-card { border-radius: 0; background: var(--tint); }
.style-frame .sample-tag { border-radius: 0; }
.style-frame .sticky-bar .btn { border-radius: 0; }
.style-frame .svc-hero { background: #fff; border-bottom: 1px solid #1c2128; }

/* =====================================================================================================
   STRIPE — two-tone: color block and photo flush together; one accent stripe runs across the page.
   ===================================================================================================== */
.style-stripe { font-family: "Hanken Grotesk", system-ui, sans-serif; }
.style-stripe h1, .style-stripe h2, .style-stripe h3, .style-stripe .logo, .style-stripe .foot-name, .style-stripe .big-rating, .style-stripe .band-line, .style-stripe .tiers strong, .style-stripe .tiers .price { font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; }
.style-stripe h1 { font-size: clamp(2.4rem, 6.5vw, 4rem); line-height: 1; }
.style-stripe .btn { border-radius: 0; font-weight: 700; }
.style-stripe .top { border-bottom: 0; }
.style-stripe .top::after { content: ""; display: block; height: 10px; background: var(--accent); }
.style-stripe .hero { background: var(--primary); color: #fff; padding: 0; display: flex; flex-direction: column; }
.style-stripe .hero .wrap { order: 1; width: 100%; }
.style-stripe .hero::before { position: relative; display: block; inset: auto; height: 62vw; max-height: 480px; min-height: 240px; animation: none; order: 2; }
.style-stripe .hero::after { display: none; }
.style-stripe .hero .wrap { padding: 40px 20px 36px; }
.style-stripe .hero-grid { display: block; }
.style-stripe .hero-copy h1 { text-shadow: none; }
.style-stripe .kicker { color: var(--accent-on-primary, var(--accent)); font-weight: 700; }
.style-stripe .btn-ghost { background: transparent; border-color: #fff; }
.style-stripe .quote-card { border-radius: 0; box-shadow: none; margin-top: 28px; }
.style-stripe form input, .style-stripe form textarea, .style-stripe form select { border-radius: 0; }
@media (min-width: 900px) {
  .style-stripe .hero { display: grid; grid-template-columns: 1fr 1fr; }
  .style-stripe .hero .wrap { order: 0; }
  .style-stripe .hero::before { height: 100%; max-height: none; min-height: 560px; grid-column: 2; grid-row: 1; background-image: var(--hero-tall); }
  .style-stripe .hero .wrap { grid-column: 1; grid-row: 1; max-width: 560px; margin: 0 0 0 auto; padding: 64px 56px 64px 20px; }
  .style-stripe .quote-card { margin-top: 32px; }
}
.style-stripe section { padding: 64px 0; }
.style-stripe .sec-head { display: grid; grid-template-columns: 10px 1fr; gap: 16px; } .style-stripe .sec-head::before { content: ""; background: var(--accent); }
.style-stripe .sec-head h2, .style-stripe .sec-head p, .style-stripe .sec-head .sample-tag { grid-column: 2; justify-self: start; }
/* Service cards (2026-10-13): four sharp white cards across with a thin accent rule on top, not a dark ruled grid
   (seven services left a black hole in the eighth cell). */
.style-stripe .service-grid { gap: 20px; }
.style-stripe .service-grid li { border: 1px solid #e3e7eb; border-top: 4px solid var(--accent); border-radius: 0; background: #fff; padding: 22px 22px 24px; }
.style-stripe .service-grid li:hover { transform: none; box-shadow: none; border-top-color: var(--primary); background: var(--tint); }
.style-stripe .service-grid li.svc-ask { background: var(--tint); border-color: transparent; border-top-color: var(--primary); }
@media (min-width: 1000px) { .style-stripe .service-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 599px) { .style-stripe .service-grid { gap: 12px; } .style-stripe .service-grid li { padding: 16px 18px 18px; } }
.style-stripe .band { min-height: 440px; }
.style-stripe .band-line { font-weight: 800; }
.style-stripe .work-grid { gap: 2px; } .style-stripe .work-grid li { border-radius: 0; }
.style-stripe .why { background: #1c2128; color: #fff; } .style-stripe .why-grid p { color: rgba(255,255,255,.8); } .style-stripe .ic-why { color: var(--accent-text, var(--accent)); }
.style-stripe .reviews { background: #fff; color: #1c2128; border-top: 10px solid var(--accent); }
.style-stripe .review-summary .muted { color: #5b6470; }
.style-stripe .reviews .btn-ghost-dark { color: var(--primary); border-color: var(--primary); }
.style-stripe .review-list { gap: 2px; background: #1c2128; }
.style-stripe .review-list li { background: #fff; border-radius: 0; }
.style-stripe .big-rating { color: var(--primary); }
.style-stripe .how { background: var(--tint); }
.style-stripe .how-steps { gap: 2px; background: #1c2128; } .style-stripe .how-steps li { border: 0; border-radius: 0; background: #fff; }
.style-stripe .how-n { border-radius: 0; }
.style-stripe .area-card { border-radius: 0; background: var(--primary); color: #fff; }
.style-stripe .area-card h2 { color: #fff; } .style-stripe .area-card .btn-primary { background: var(--accent); color: var(--accent-ink, #151a20); }
.style-stripe .towns li { border-radius: 0; background: rgba(255,255,255,.12); border-color: transparent; }
.style-stripe .faq summary::after { border-radius: 0; background: var(--accent); color: var(--accent-ink, #151a20); }
.style-stripe .final-cta { background: #1c2128; border-top: 10px solid var(--accent); }
.style-stripe .side-card, .style-stripe .sample-tag { border-radius: 0; }
.style-stripe .sticky-bar .btn { border-radius: 0; }
.style-stripe .svc-hero { background: var(--primary); color: #fff; } .style-stripe .svc-hero .crumbs, .style-stripe .svc-hero .lede { color: rgba(255,255,255,.85); } .style-stripe .svc-hero .crumbs a { color: #fff; }

/* =====================================================================================================
   METER — evidence first: the rating panel leads the hero; the photo is small beside it.
   ===================================================================================================== */
.style-meter { font-family: "Red Hat Text", system-ui, sans-serif; }
.style-meter h1, .style-meter h2, .style-meter h3, .style-meter .logo, .style-meter .foot-name, .style-meter .big-rating, .style-meter .band-line, .style-meter .tiers strong, .style-meter .tiers .price { font-family: "Red Hat Display", system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; }
.style-meter h1 { font-size: clamp(2rem, 5.2vw, 3.2rem); line-height: 1.08; }
.style-meter .btn { border-radius: 8px; font-weight: 700; }
.style-meter .top { border-bottom: 1.5px solid #1c2128; }
.style-meter .hero { background: #fff; color: #1c2128; padding: 36px 0 44px; }
.style-meter .hero::before, .style-meter .hero::after { display: none; }
.style-meter .hero-grid { grid-template-areas: "copy" "photo" "quote"; gap: 24px; }
.style-meter .hero-copy { grid-area: copy; display: flex; flex-direction: column; }
.style-meter .hero-copy h1 { text-shadow: none; order: 1; }
.style-meter .kicker { order: 0; color: #5b6470; }
.style-meter .tagline { order: 1; color: var(--primary); }
.style-meter .lede { order: 3; opacity: 1; color: #3d4652; margin-top: 4px; }
.style-meter .cta-row { order: 4; }
/* the evidence panel: the trust list becomes a bordered panel right under the kicker */
.style-meter .trust { order: 2; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; border: 1.5px solid #1c2128; border-radius: 10px; padding: 16px 18px; margin: 4px 0 8px; font-size: 1rem; }
.style-meter .trust-stars { grid-column: 1 / -1; gap: 4px 12px; flex-wrap: wrap; font-size: 1.05rem; font-weight: 700; } /* the number shows beside the stars: the hero no longer repeats it in the lede (review 2026-10-08) */
.style-meter .trust-stars .stars { font-size: 2.2rem; line-height: 1; letter-spacing: .06em; color: var(--accent); }
.style-meter .trust li:not(.trust-stars) { padding-left: 12px; border-left: 3px solid var(--accent); }
.style-meter .btn-ghost { background: transparent; color: #1c2128; border-color: #1c2128; }
.style-meter .hero-photo { display: block; grid-area: photo; aspect-ratio: 16 / 9; border-radius: 10px; background: var(--hero) var(--hero-pos, center)/cover no-repeat; }
.style-meter .quote-card { grid-area: quote; border-radius: 10px; box-shadow: none; border: 1.5px solid #1c2128; }
.style-meter form input, .style-meter form textarea, .style-meter form select { border-radius: 8px; border-color: #1c2128; }
@media (min-width: 900px) {
  .style-meter .hero { padding: 56px 0 64px; }
  .style-meter .hero-grid { grid-template-columns: 1.1fr .9fr; grid-template-areas: "copy photo" "copy quote"; gap: 24px 56px; align-items: start; }
  .style-meter .hero-photo { aspect-ratio: 16 / 9; }
}
.style-meter .service-grid li { border: 1.5px solid #1c2128; border-radius: 10px; }
.style-meter .service-grid li:hover { transform: none; box-shadow: 4px 4px 0 var(--accent); }
.style-meter .band { min-height: 380px; } .style-meter .band-sec { padding: 0 20px; } .style-meter .band { max-width: 1080px; margin: 0 auto; border-radius: 12px; }
.style-meter .work-grid li { border-radius: 10px; }
.style-meter .why { background: #fff; }
.style-meter .why-grid li { border-top: 3px solid var(--accent); padding-top: 14px; }
.style-meter .reviews { background: #1c2128; }
.style-meter .big-rating { font-size: 6rem; color: var(--accent-text, var(--accent)); }
.style-meter .review-list li { border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: transparent; }
.style-meter .how-steps li { border: 1.5px solid #1c2128; border-radius: 10px; }
.style-meter .how-n { background: #1c2128; }
.style-meter .area-card { border-radius: 10px; background: transparent; border: 1.5px solid #1c2128; }
.style-meter .towns li { border-color: #1c2128; }
.style-meter .faq summary::after { background: #1c2128; color: var(--accent-text, var(--accent)); }
.style-meter .final-cta { background: var(--primary); }
.style-meter .side-card { border-radius: 10px; background: #fff; border: 1.5px solid #1c2128; }
.style-meter .svc-hero { background: #fff; border-bottom: 1.5px solid #1c2128; }

/* =====================================================================================================
   SERVICE PAGES. The looks above are written against the home page; these are the few places a service
   page differs — its own hero scale, the sticky side column, and the body headings. (2026-10-06)
   ===================================================================================================== */
/* The service hero's headline is a size of its own: without this the home page's display scale applies and a long
   service name fills the screen (Poster especially). */
[class*="style-"] .svc-hero h1 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); line-height: 1.1; }

.style-night .svc-hero { background: var(--deep-2); border-bottom: 1px solid rgba(255,255,255,.08); }
.style-night .svc-body { background: var(--deep); } .style-night .svc-steps p { color: var(--ink-2); } .style-night .svc-steps li:not(:last-child)::before { background: rgba(255,255,255,.12); }
.style-night .svc-main p, .style-night .factors, .style-night .crumbs { color: var(--ink-2); }
.style-night .crumbs a, .style-night .side-links a { color: #fff; }
.style-night .svc-main details { border-top-color: rgba(255,255,255,.1); }
.style-night .signs .ic-sm { color: var(--accent-text, var(--accent)); }

.style-signal .svc-hero { background: var(--primary); color: #fff; padding-bottom: 40px; }
.style-signal .svc-hero h1 { text-transform: uppercase; }
.style-signal .svc-hero .crumbs, .style-signal .svc-hero .lede { color: rgba(255,255,255,.85); }
.style-signal .svc-hero .crumbs a { color: #fff; }
/* The second hero button on the looks whose service-page hero is dark (2026-10-14: it was primary-on-primary, so the
   estimate button didn't show). */
.style-signal .svc-hero .btn-ghost-dark, .style-stripe .svc-hero .btn-ghost-dark, .style-poster .svc-hero .btn-ghost-dark, .style-night .svc-hero .btn-ghost-dark { color: #fff; border-color: rgba(255,255,255,.75); }
.style-signal .svc-main h2 { text-transform: uppercase; }
.style-signal .side-card { border-top: 6px solid var(--accent); } .style-signal .side-photo, .style-stripe .side-photo { border-radius: 0; }

.style-poster .svc-hero h1 { font-stretch: 125%; letter-spacing: -.03em; }
.style-poster .svc-main h2 { font-stretch: 125%; }
.style-poster .side-card, .style-poster .side-photo { border-radius: 0; }
.style-poster .svc-main details { border-top: 2px solid #1c2128; }
.style-poster .svc-body { border-top: 0; }

.style-frame .svc-hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.style-frame .svc-hero .crumbs { font-style: italic; }
.style-frame .side-photo { outline: 1px solid #1c2128; outline-offset: 5px; border-radius: 0; margin-bottom: 8px; }
.style-frame .svc-main h2 { font-size: 1.7rem; }

.style-stripe .svc-hero { padding-bottom: 38px; }
.style-stripe .svc-hero::after { content: ""; display: block; height: 10px; background: var(--accent); margin: 38px -100vw -38px; }
.style-stripe .side-card { border-left: 10px solid var(--accent); border-radius: 0; background: var(--tint); }

.style-meter .side-card { border: 1.5px solid #1c2128; background: #fff; }
.style-meter .svc-main h2 { border-top: 3px solid var(--accent); padding-top: 12px; }
.style-meter .svc-main h2:first-child { border-top: 0; padding-top: 0; }

/* The hero's button to the form (Alan, 2026-10-07): it is only useful when the form is out of sight. On a desktop
   every look has the form in the first screen, beside or just under the buttons, so it goes. On a phone it goes in
   the looks where the form follows straight on, and stays in the ones with a photo in between. With it
   gone the call button is the only one left, so it takes the filled style. The sticky bar on a phone keeps its own. */
@media (min-width: 900px) {
  .hero .cta-row .cta-to-form { display: none; }
  .hero .cta-row .btn.cta-call { background: var(--accent); color: var(--accent-ink, #151a20); border-color: transparent; }
}
@media (max-width: 899px) {
  :is(.style-bold, .style-clean, .style-night, .style-signal, .style-poster, .style-stripe) .hero .cta-row .cta-to-form { display: none; }
  :is(.style-bold, .style-clean, .style-night, .style-signal, .style-poster, .style-stripe) .hero .cta-row .btn.cta-call { background: var(--accent); color: var(--accent-ink, #151a20); border-color: transparent; }
}
.style-night .hero .cta-row .btn.cta-call { box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent), 0 8px 28px -6px color-mix(in oklab, var(--accent) 70%, transparent); }

/* Night's header is dark: an ordinary (dark) logo gets a white card so it doesn't vanish, and a white logo needs no plate. */
.style-night .logo.has-img:not(.logo-plate) .logo-img { background: #fff; padding: 5px 9px; border-radius: 8px; box-sizing: content-box; }
.style-night .logo-plate .logo-img { background: none; padding: 0; }

/* The one-line photo link (2026-10-11) on the dark quote cards. */
.style-night .f-photo-btn { color: #fff; }
.style-night .f-photo-btn small { color: rgba(255,255,255,.72); }

/* =====================================================================================================
   TEMPLATES REVIEW (Alan, 2026-10-11): one round of per-look tweaks from an outside review of all nine.
   ===================================================================================================== */
/* every look: the rating's number reads first; Meter's hero quote is hidden everywhere else */
.trust-stars .ts-num { font-weight: 700; margin-left: .35em; }
.trust-stars .ts-sep { white-space: pre; }
.trust-quote { display: none !important; }

/* Bold: a touch more shade behind the headline, so the copy wins over the photo */
.style-bold .hero::after { background: linear-gradient(100deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.3) 100%); }

/* Classic: about 10% more modern. Softer corners on buttons and boxes, and a bigger photo beside the headline. */
.style-classic .btn { border-radius: 8px; }
.style-classic form input, .style-classic form textarea, .style-classic form select { border-radius: 8px; }
@media (min-width: 900px) { .style-classic .hero-grid { grid-template-columns: 1fr 1fr; } }

/* Clean: on a computer the copy sat at the top with empty space under it beside the form; center it, and give the
   trust line soft chips so the space reads as calm, not missing */
@media (min-width: 900px) { .style-clean .hero-grid { align-items: center; } }
.style-clean .trust li { background: #fff; border: 1px solid var(--tint-2); border-radius: 999px; padding: 6px 12px; }

/* Night: the form was lost in the dark; a lighter panel with a clear edge. The glow behind buttons is quieter. */
.style-night .quote-card { background: color-mix(in oklab, var(--deep-2) 90%, #fff); border-color: rgba(255,255,255,.22); box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.style-night form input, .style-night form textarea, .style-night form select { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.3); }
.style-night .btn-accent { box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--accent) 55%, transparent); }

/* Signal: keep the road-crew headline, stop every section shouting. Capitals on the headline only; the diagonal cut
   stays on the hero photo and the wide strip, and the two middle bands go square. */
.style-signal h2, .style-signal .band-line { text-transform: none; }
.style-signal .btn { text-transform: none; letter-spacing: .01em; }
.style-signal .why, .style-signal .how { clip-path: none; padding-top: 64px; }

/* Poster: the type is the picture. The headline is bigger when it is short enough, its second half drops to its own
   line in the accent (or the city does), and everything around it is small, so the contrast is the design. */
.style-poster .hero-copy .lede { font-size: .98rem; color: #fff; opacity: .8; max-width: 26em; }
.style-poster .hero-copy .trust { font-size: .85rem; opacity: .85; }
.style-poster .hero-copy .kicker { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.style-poster .hero-copy h1 .hl-s, .style-poster .hero-copy h1 .hl-m { font-size: 1.14em; }
.style-poster .hl-2 { color: var(--accent-on-primary, var(--accent)); }
.style-poster .hl-2-after { display: block; }

/* Frame: keep the editorial photo, modernize the form a little */
.style-frame form input, .style-frame form textarea, .style-frame form select { border-radius: 4px; border-color: #b9c0c8; }
.style-frame .quote-card { border-color: #d5dae0; border-radius: 4px; }

/* Stripe: the photo takes more of the split on a computer (about 43/57) */
@media (min-width: 900px) {
  .style-stripe .hero { grid-template-columns: 43fr 57fr; }
  .style-stripe .hero .wrap { max-width: 520px; padding-right: 44px; }
}
/* Stripe on a wide screen (outside review Alan passed on, 2026-10-14): each section keeps its own width instead of one
   box around the site. Header and content sections run to 1240px (the services grid was the cramped one at 1120);
   long text keeps .narrow's 760px; the hero's words line up with the sections below and the photo runs to the
   right edge; the photo band stays full width. */
.style-stripe .wrap { max-width: 1240px; }
.style-stripe .wrap.narrow { max-width: 760px; }
@media (min-width: 1300px) {
  .style-stripe .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 720px) minmax(0, 1fr); }
  .style-stripe .hero .wrap { grid-column: 2; max-width: none; margin: 0; }
  .style-stripe .hero::before { grid-column: 3 / -1; }
}

/* Meter: the rating is the headline's partner. Big number, stars, the count under it, then one real review. */
.style-meter .trust-stars { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num stars" "num count"; gap: 0 14px; align-items: center; }
.style-meter .trust-stars .ts-num { grid-area: num; margin-left: 0; font: 800 3.4rem/1 "Red Hat Display", system-ui, sans-serif; color: #1c2128; }
.style-meter .trust-stars .stars { grid-area: stars; font-size: 1.8rem; }
.style-meter .trust-stars .ts-sep { display: none; }
.style-meter .trust-stars .ts-count { grid-area: count; font-weight: 600; color: #3d4652; }
.style-meter .trust-quote[hidden] { display: none !important; }
.style-meter .trust-quote:not([hidden]) { display: block !important; grid-column: 1 / -1; margin-top: 6px; padding-top: 12px; border-top: 1px solid #e3e7eb; font-style: italic; font-weight: 400; color: #3d4652; }
.style-meter .tq-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media (min-width: 900px) { .style-meter .tq-text { -webkit-line-clamp: 2; } }
.style-meter .trust-quote cite { display: block; margin-top: 4px; font-style: normal; font-size: .85rem; color: #5b6470; }

/* Frame: editorial hero first, form second (outside review Alan passed on, 2026-10-14). Headline, line, Call and
   Request an estimate beside the framed photo; the form follows as a wide cream panel (the layout Classic uses, in
   site.css), so the first screen breathes and Services starts sooner. A preview's "Sample photo" caption wears the
   preview notes' dashed tag, not the site's italic caption, and goes with "Hide the notes". */
.style-frame .logo { font-size: 1.55rem; font-weight: 700; }
.style-frame .hero-copy h1 { line-height: .98; }
.style-frame .trust { font-size: 1.02rem; gap: 10px 22px; margin-top: 22px; }
.style-frame .trust .ts-num, .style-frame .trust .ts-count { font-weight: 700; }
.style-frame .hero .cta-row .cta-to-form { display: inline-flex; }
.style-frame .hero-photo[data-caption="Sample photo"]::after { font: 600 .8rem/1.4 "Source Sans 3", system-ui, sans-serif; color: #6b4d00; background: #fff6dc; border: 1.5px dashed #b07d00; padding: 2px 10px; top: calc(100% + 12px); }
.notes-off .hero-photo[data-caption="Sample photo"]::after { display: none; }
.style-frame .quote-card { background: #f7f4ee; border: 0; border-top: 1px solid #1c2128; border-bottom: 1px solid #1c2128; border-radius: 0; padding: 26px 22px; margin-top: 40px; }
:is(.style-frame, .style-classic) .quote-card input, :is(.style-frame, .style-classic) .quote-card textarea { background: #fff; }
@media (min-width: 900px) {
  .style-frame .hero { padding: 56px 0 0; }
  .style-frame .hero-grid { grid-template-areas: "copy photo" "quote quote"; gap: 56px 64px; align-items: center; }
  .style-frame .quote-card { padding: 28px 32px; margin-top: 0; }
  .style-frame .quote-card h2 { font-size: 1.75rem; }
  .style-frame .services { padding-top: 56px; }
}

/* Signal's services (outside review Alan passed on, 2026-10-14; Alan: "not so hot on the square grid lines"): no
   ruled grid. Each card hangs from a heavy rule with its number block; the "Need something else?" card is a dark
   tile that takes the rest of the last row, so no cell is left empty. Explicit columns so that span is known. */
.style-signal .service-grid { border: 0; gap: 34px 28px; grid-template-columns: 1fr; }
.style-signal .service-grid li { outline: 0; border: 0; border-top: 3px solid #1c2128; padding: 18px 0 0; background: transparent; }
.style-signal .service-grid li:hover { box-shadow: none; border-top-color: var(--accent); }
.style-signal .service-grid li.svc-ask { background: var(--primary); color: #fff; border-top-color: var(--accent); padding: 20px 22px 22px; }
.style-signal .service-grid li.svc-ask p, .style-signal .service-grid li.svc-ask h3 { color: #fff; }
.style-signal .service-grid li.svc-ask a.svc-link { color: var(--accent-on-primary, var(--accent)); }
@media (min-width: 600px) {
  .style-signal .service-grid { grid-template-columns: repeat(2, 1fr); }
  .style-signal .service-grid li.svc-ask:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .style-signal .service-grid { grid-template-columns: repeat(4, 1fr); }
  .style-signal .service-grid li.svc-ask:nth-child(odd) { grid-column: auto; }
  .style-signal .service-grid li.svc-ask:nth-child(4n+1) { grid-column: 1 / -1; }
  .style-signal .service-grid li.svc-ask:nth-child(4n+2) { grid-column: span 3; }
  .style-signal .service-grid li.svc-ask:nth-child(4n+3) { grid-column: span 2; }
}

/* Dark-on-dark fixes (Alan, 2026-10-15: "Learn more links on Night show as very dark on black"). Found by a contrast
   check of every look in every color scheme, home, service and town pages, phone and computer. */
/* Night: its "every link is white" rule beat the accent button's own ink, and the service cards kept light-page colors. */
.style-night a.btn-accent { color: var(--accent-ink, #151a20); }
.style-night .service-grid li a.svc-link { color: var(--accent-text, var(--accent)); }
.style-night .service-grid li.svc-ask p { color: var(--ink-2); }
.style-night .owner-tip a, .style-night .growth-note a { color: inherit; }   /* our light preview notes */
/* our own preview chrome looks the same on every look: its orange buttons keep their dark ink, its Sample tag stays light */
.style-night .owner a.btn-accent, .style-night a.sticky-claim { color: var(--own-ink); }
.style-night a.pvbar-claim { color: #14213d; }
.style-night .owner .sample-tag { background: #fff6dc; border-color: #b07d00; color: #6b4d00; }
/* Frame and Meter: their ghost button is dark for the light hero, so on the dark closing band it vanished. */
.style-frame .final-cta .btn-ghost, .style-meter .final-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.7); }
/* Signal: the closing band is the accent, so its outline button takes the ink worked out for that accent. */
.style-signal .final-cta .btn-ghost { color: var(--accent-ink, #1c2128); border-color: currentColor; }

/* Our own boxes (Edit view's boxes, the code box, the help chat) are white with dark words in every look (Alan,
   2026-10-15: Night's see-through fields showed white words on gray there). The looks' form rules above are for the
   business's estimate form only. */
:is(.edit-dlg, .chat-form) :is(input:not([type=checkbox]):not([type=radio]), textarea) { background: #fff; color: #1c2128; border-color: #c9d0d8; border-radius: 8px; }
:is(.edit-dlg, .chat-form) :is(input, textarea)::placeholder { color: #6b7480; }
:is(.edit-dlg, .chat-form) :is(input, textarea):focus { border-color: #1c2128; }
.edit-dlg .qk-f.is-bad :is(input, textarea) { border-color: #b42318; }