/* s8x-94-qa.css: visual QA pass 3. One fix per rule block; each names the page and the defect. */

/* Home §03, Contact §01, Insights map-scan card: .w-ring sets display:inline-block, which beat .w-icon's grid, so the phone/pin glyph sat in the top-left corner instead of the centre of its circle */
.w-icon.w-ring { display: grid; place-items: center; }

/* Home §03 + Contact §01 blob cards at 901-1240px: square blobs were too small for their copy, so the curved corners clipped the icon and the link ("Google Ads plan") and "Free map scan" wrapped to an orphan */
@media (min-width: 901px) and (max-width: 1240px) {
  .w-g3 > a.w-blob { aspect-ratio: auto !important; min-height: 100%; padding: 58px 34px 58px 46px !important; gap: 10px !important; }
  .w-g3 > a.w-blob .w-h3 { font-size: 23px !important; }
  .w-g3 > a.w-blob .w-small { font-size: 14px; }
}

/* Closing CTA slab on most pages (all widths): the decorative leaf sat on the right-hand paragraph or heading; tuck it into the slab's top edge */
.s8-page .w-slab > .w-deco.w-floaty:not(.d2) { top: -34px !important; }

/* Service heroes, Contact §01 and CTA slabs at 601-1240px: section leaves sat on paragraphs, eyebrows and buttons; pin them to the section's outer corners */
@media (max-width: 1240px) {
  .s8-page section > .w-deco.w-floaty:not(.d2) { left: auto !important; right: -30px !important; width: clamp(64px, 8vw, 96px) !important; }
  .s8-page section > .w-deco.w-floaty.d2 { right: auto !important; left: -30px !important; top: auto !important; bottom: 8px !important; width: clamp(64px, 8vw, 96px) !important; }
}

/* Every page at phone width: leaves sat behind headings and buttons ("Ready for a fuller spring?", "Three ways to start", 404 "This path ends here."); keep the main leaf small and faint in the top corner and drop the secondary sage leaf */
@media (max-width: 600px) {
  .s8-page section > .w-deco.w-floaty { width: 60px !important; opacity: .3 !important; }
  .s8-page section > .w-deco.w-floaty:not(.d2) { top: 4px !important; bottom: auto !important; right: -24px !important; }
  .s8-page section > .w-deco.w-floaty.d2 { display: none; }
}

/* Team hero at phone width: Mihai's caption ran under Brodie's photo and "designer" was cut off */
.s8-duo > figure:first-child figcaption { max-width: 84%; }

/* Home §08 radius map at phone width: the "Buford · 18 mi" pin ran past the right screen edge; pull it in and drop it below the Monroe pin */
@media (max-width: 480px) {
  [aria-label="Service radius rings around the shop"] .w-pin[style*="left:82%"] { left: 54% !important; top: 88% !important; }
}

/* Google Ads page §05 at 901-1240px: the table needed sideways scrolling, and the injected "Swipe to compare" hint became a grid item that pushed the table into column 2 and the calculator onto a row of its own; stack table and calculator full width instead */
@media (min-width: 901px) and (max-width: 1240px) {
  .w-split:has(> .w-table-wrap) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1241px) {
  .w-split > .s8-swipe:first-child { grid-area: 1 / 1; align-self: start; margin: -30px 0 0; }
  .w-split > .s8-swipe:first-child + .w-table-wrap { grid-area: 1 / 1; }
  .w-split > .s8-swipe:first-child + .w-table-wrap + * { grid-area: 1 / 2; }
}

/* Service pages, sticky form panel at 901-1240px: the no-wrap button set the column's min width, so the inputs, divider and button ran flush to (and 2px past) the panel's right edge */
.s8-aside-grid .w-panel { grid-template-columns: minmax(0, 1fr); }
.s8-aside-grid .w-panel .w-btn { white-space: normal; text-align: center; line-height: 1.2; }

/* Blog posts: H2s had zero space before the paragraph that follows them, so the heading sat on the body copy */
.s8-single .s8-prose h2 { margin-bottom: .45em; }
.s8-single .s8-prose h3 { margin-bottom: .4em; }

/* Blog posts: the gold full stop added after every H2 doubled up on question headings ("…in the First Place?."); s8x-94-qa.js tags those headings */
.s8-prose h2.s8-nodot::after, .w-article h2.s8-nodot::after { content: none; }

/* Trade pages §06 "What homeowners search every month" at 901-1240px: the label column shrank to ~95px, so "landscape design near me" broke over three lines; put the label above its bar as on phones */
@media (min-width: 901px) and (max-width: 1240px) {
  .s8-dem { grid-template-columns: minmax(0, 1fr) 84px; gap: 6px 12px; }
  .s8-dem span { grid-column: 1 / -1; }
}

/* City pages "5 marketing mistakes": "01" is narrower than "02"-"05", so the first title started further left than the rest */
.s8-mistake .n { min-width: 1.3em; }

/* Trade pages: keyboard focus ring for the sideways-scrolling year strip (made focusable by s8x-94-qa.js) */
.s8-year:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 12px; }