/* All Painting light layer: the HOME rebuilt from the old ap.server-1.ca home (owner brief 2026-10-05), polished to the light
   design system. Loaded after ap-light.css; every rule is scoped to the home (body.ap-light.home) and its .aph sections.
   1 rhythm  2 hero  3 heads and text blocks  4 CTA pairs  5 icon cards  6 split  7 tiles  8 reviews  9 map  10 text cards
   11 latest projects and news  12 FAQ */

/* 1. Rhythm: section padding comes from the section (112 / 72 / 64) and the gap between its rows from ap-light.css (60 px);
   a second head inside the same section (the old "Why do you need professional painters?") sits a further 48 px down */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph > .et_pb_row.aph-head--sub { margin-top: 48px !important; }
@media (max-width: 767px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph > .et_pb_row.aph-head--sub { margin-top: 32px !important; } }

/* 2. Hero: the old lines in the approved stack. "#1" beside TORONTO / PAINTERS is the one H1; then the facts line, the
   Google reviews line (gold stars), "Toronto Painters You Can Trust." (the old blue link, lightened for AA over the video),
   the lead and the pills. Line gaps follow the old grouping: facts + rating close together, the trust line, then the lead. */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-hero--stack .ap-hero-copy { gap: 1.1rem; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-h1-stack .apl-h1-mark--text { margin-right: 0.02em; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-hero--stack .apl-hero-linewrap { margin-top: 0.5rem !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-rating, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-trust { text-align: center; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-rating .et_pb_text_inner { font-family: var(--apl-font); font-size: 1rem; line-height: 1.4; color: #fff; text-wrap: balance; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-rating { margin-top: -0.35rem !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-rating a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.55); text-decoration-thickness: 1px; text-underline-offset: 4px; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 0.55rem; min-height: 44px; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-rating a strong { font-weight: 700; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 0.55rem; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-stars { color: #fbbc04; display: inline-flex; gap: 2px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35)); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-stars svg { display: block; width: 1.12em; height: 1.12em; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-trust .et_pb_text_inner { font-family: var(--apl-font); font-size: clamp(1.375rem, 0.85vw + 1rem, 1.9rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: #fff; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-trust a { color: #a9cfff; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 1px; }
@media (hover: hover) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-rating a:hover { text-decoration-color: #fff; text-decoration-thickness: 2px; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-trust a:hover { color: #fff; }
}
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-rating a:focus-visible, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-trust a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-hero--stack .apl-hero-lead { margin-top: 0.1rem !important; }
/* phones: the two facts centred on one line where they fit, wrapping as whole items where they do not */
@media (max-width: 640px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-hero-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.1rem; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-rating .et_pb_text_inner { font-size: 0.95rem; }
}
@media (max-height: 460px) and (orientation: landscape) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-hero--stack .ap-hero-copy { gap: 0.45rem !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-rating { margin-top: 0 !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-trust .et_pb_text_inner { font-size: 1.2rem; } /* 19.2 px bold: large text, so the light blue link keeps AA (3:1) over the video */
  /* the old lead stays on screen here too: two compact lines, the pills still above the fold at 844 x 390 */
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-hero--stack .apl-hero-lead { display: block !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-hero-lead .et_pb_text_inner { font-size: 0.9rem; line-height: 1.45; max-width: none; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-hero--stack { padding-bottom: 32px !important; }
}

/* the phone pill (hero and section pairs) carries the old phone glyph */
body.ap-bold.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-phone .et_pb_button::before, body.ap-bold.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-phone.et_pb_button::before {
  display: inline-block !important; position: static !important; content: "" !important; width: 17px; height: 17px; margin: 0 !important; opacity: 1 !important; font-size: 0 !important; transform: none !important; flex: none;
  background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/></svg>") center / 100% 100% no-repeat;
}

/* 3. Section heads (owner rules, 2026-10-05): left-aligned on the full content width, a kicker with a rotating logo-colour pill,
   the old H2 verbatim (full width, balanced when it wraps), an optional action button on the right of the head row (below the
   head on phones); and the old text blocks across the full width in 2 to 3 balanced columns (one clamped column on phones) */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-band .ap-shead.aph-head .ap-shead-h2 h2 { text-wrap: balance; max-width: none; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-band .ap-shead.aph-head > .aph-head-main { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-band .ap-shead.aph-head > .aph-head-act { flex: 0 0 auto !important; width: auto !important; max-width: none !important; align-items: flex-end; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-head-act .apl-cta-pair { justify-content: flex-end; }
@media (max-width: 767px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-band .ap-shead.aph-head { flex-wrap: wrap !important; row-gap: 18px !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .apl-band .ap-shead.aph-head > .aph-head-act { flex-basis: 100% !important; align-items: flex-start; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-head-act .apl-cta-pair { justify-content: flex-start; }
}

body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-h2-pre { display: block; font-weight: 400; font-size: 0.74em; line-height: 1.3; letter-spacing: -0.005em; margin-bottom: 0.15em; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-prose-row > .et_pb_column { max-width: none; }

body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-prose .et_pb_text_inner { color: var(--apl-text); font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-prose .et_pb_text_inner p { padding-bottom: 0; margin: 0 0 1em; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-prose .et_pb_text_inner p:last-child { margin-bottom: 0; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-prose a, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_description a { color: var(--apl-blue-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-prose a:hover, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_description a:hover { color: #003c9e; text-decoration-thickness: 2px; } }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-prose strong { color: var(--apl-ink); font-weight: 700; }

/* 4. CTA pairs: centred under their content; the phone pill only where the header has no phone (below 1240 px), as on the
   old site where it showed on mobile only */
body.ap-bold.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cta { justify-content: flex-start; }
body.ap-bold.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-split-copy .aph-cta { justify-content: flex-start; }
@media (min-width: 1240px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cta .et_pb_button_module_wrapper:has(.aph-call), body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cta .aph-call { display: none !important; } }
@media (max-width: 480px) {
  body.ap-bold.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cta { flex-direction: column; align-items: stretch; width: 100%; }
  body.ap-bold.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cta .et_pb_button_module_wrapper { width: 100% !important; }
  body.ap-bold.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cta .et_pb_button_module_wrapper > .et_pb_button { display: flex !important; width: 100% !important; max-width: none !important; }
}

/* 5. Icon cards (the old blurb cards): white, hairline, radius 16, a blue line icon in a pale-blue 44 px square; rows of equal
   height, and within a row the icons, titles and texts start on the same lines (each card is a 3-row subgrid) */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cards { display: grid !important; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-rows: auto; gap: 20px; align-items: stretch; width: 100%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cards--4 { --cols: 4; }
/* complete rows only: 4 across (2 below 1200 px), 6 as 3 + 3 (2 x 3 below 1024 px), 9 as 3 x 3 (one column below 760 px) */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card {
  width: auto !important; max-width: none; height: auto !important; margin: 0 !important;
  display: grid !important; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.85rem;
  background: #fff; border: 1px solid var(--apl-line); border-radius: var(--apl-radius); padding: 1.75rem 1.6rem 1.85rem; box-shadow: var(--apl-shadow-sm);
}
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_content, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_container { display: contents; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_main_blurb_image { display: none; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_content::before { content: ""; display: block; width: 44px; height: 44px; border-radius: 12px; background: var(--apl-blue-50) var(--ic) center / 24px 24px no-repeat; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card h3.et_pb_module_header { align-self: start; margin: 0; padding: 0; font-family: var(--apl-font); font-size: clamp(1.125rem, 0.25vw + 1.02rem, 1.25rem); line-height: 1.3; letter-spacing: -0.008em; color: var(--apl-ink) !important; text-wrap: balance; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_description { align-self: start; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_description, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_description p { color: var(--apl-text) !important; font-family: var(--apl-font); font-size: 1rem; line-height: 1.62; text-wrap: pretty; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_description p { padding-bottom: 0; margin: 0 0 0.85em; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_description p:last-child { margin-bottom: 0; }
@media (max-width: 1199px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cards--4 { --cols: 2; }
}
@media (max-width: 1023px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cards--6 { --cols: 2; } }
@media (max-width: 759px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cards--9 { --cols: 1; } }
@media (max-width: 640px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cards { --cols: 1 !important; gap: 14px; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cards > .aph-card, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cards > .aph-card:last-child { grid-column: auto !important; width: auto !important; justify-self: stretch; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card { padding: 1.3rem 1.2rem 1.4rem; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto; grid-row: auto; column-gap: 0.9rem; row-gap: 0.55rem; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .apl-more-btn, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .apl-more-ph { grid-column: 1 / -1; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_content::before { grid-column: 1; grid-row: 1; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card h3.et_pb_module_header { grid-column: 2; grid-row: 1; align-self: center; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_description { grid-column: 1 / -1; grid-row: 2; }
}
/* icons: 24 px line glyphs, brand blue */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--roller { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='14' height='6' rx='1.5'/><path d='M17 6h3v5h-8v3'/><rect x='10.5' y='14' width='3' height='7' rx='1'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--garage { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 20V9.5L12 4l9 5.5V20'/><path d='M7 20v-8h10v8M7 15h10M7 17.5h10'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--home { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-7 9 7'/><path d='M5 10v10h14V10'/><path d='M10 20v-6h4v6'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--building { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='10' height='18' rx='1'/><path d='M14 9h5a1 1 0 0 1 1 1v11h-6'/><path d='M7.5 7h3M7.5 11h3M7.5 15h3M17 13v.01M17 17v.01'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--clock { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--shield { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--calc { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3' width='14' height='18' rx='2'/><path d='M8 7h8v3H8z'/><path d='M8.5 14v.01M12 14v.01M15.5 14v.01M8.5 17.5v.01M12 17.5v.01M15.5 17.5v.01'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--sofa { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 11V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3'/><path d='M3 13a2 2 0 0 1 4 0v2h10v-2a2 2 0 0 1 4 0v5H3z'/><path d='M6 18v2M18 18v2'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--palette { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a9 9 0 0 0 0 18c1.1 0 1.7-.8 1.7-1.7 0-.9-.6-1.3-.6-2.1 0-.9.7-1.5 1.6-1.5H17a4 4 0 0 0 4-4C21 6.9 17 3 12 3z'/><path d='M7.5 11.5v.01M9.5 7.5v.01M14.5 7.5v.01M17 11v.01'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--quote { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16v11H9l-5 4z'/><path d='M8 9h8M8 12h5'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--clipboard { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4' width='14' height='17' rx='2'/><path d='M9 4V2.8h6V4'/><circle cx='11.5' cy='12' r='2.8'/><path d='M13.5 14l2.5 2.5'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--calendar { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='5' width='16' height='15' rx='2'/><path d='M4 10h16M8 3v4M16 3v4M8 14h3M13 14h3M8 17h3'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--brush { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M19 3l2 2-8.5 8.5-2-2z'/><path d='M10.5 11.5C8 11.5 6.5 13 6.5 15c0 1.6-1 2.6-3 3 3 2 7.5 1.5 8.6-1.6.6-1.7 0-3.2-1.6-4.9z'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--check { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z'/><path d='M8.5 12l2.5 2.5 4.5-5'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--team { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.2'/><path d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/><path d='M16 4.8a3.2 3.2 0 0 1 0 6.4M18 14.4c1.8.8 3 2.6 3 4.6'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--medal { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='9' r='5.5'/><path d='M8.8 13.5L7.5 21l4.5-2.4 4.5 2.4-1.3-7.5'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--bolt { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2.5L4.5 14H11l-1 7.5L19.5 10H13z'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--layers { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l9 5-9 5-9-5z'/><path d='M3 13l9 5 9-5'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--target { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='5'/><circle cx='12' cy='12' r='1'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--leaf { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 19c0-8 6-14 15-14 0 9-6 15-14 15'/><path d='M5 19c3-4 6-6 10-8'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--homeheart { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-7 9 7'/><path d='M5 10v10h14V10'/><path d='M12 17.5s-3-1.8-3-3.8a1.6 1.6 0 0 1 3-.8 1.6 1.6 0 0 1 3 .8c0 2-3 3.8-3 3.8z'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--pin { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/><circle cx='12' cy='9.5' r='2.5'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--smile { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9 9.5v.01M15 9.5v.01'/></svg>"); }

/* 6. Split: the old animated logo (a looping muted video on its own near-white ground) filling a panel as tall as the copy */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-panel { background: transparent; border: 0; border-radius: var(--apl-radius-lg); overflow: hidden; padding: 0; min-height: 320px; position: relative; }  /* client round 2026-10-08: no card frame */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-panel > .et_pb_code { position: absolute; inset: 0; margin: 0 !important; width: 100% !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-panel .et_pb_code_inner, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-anim { width: 100%; height: 100%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-panel .et_pb_code, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-panel .et_pb_code_inner { background: transparent !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-anim { overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* the logo fills about two thirds of the panel height (the video frame is mostly empty ground): the frame is scaled so the
   logo, not the frame, sets the size; multiply blends the frame's near-white ground into the panel (no inner box) */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-video { display: block; flex: none; height: 150%; width: auto; aspect-ratio: 1 / 1; max-width: none; object-fit: contain; background: transparent; mix-blend-mode: multiply; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-split-copy { justify-content: center !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-split-copy .ap-h2 h2 { text-wrap: balance; }
@media (max-width: 480px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-split-copy .ap-h2 h2 { font-size: 1.625rem; } }
@media (max-width: 980px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-split { row-gap: 32px !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-panel { min-height: 0; aspect-ratio: 16 / 9; }
}

/* 7. Tiles: the old 3-across grid (2 on tablets, 1 on phones), every tile a photo with its label and the blue hover wash */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tiles { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tiles > .aph-tile { width: 100% !important; max-width: none; height: auto !important; margin: 0 !important; aspect-ratio: 4 / 3; }  /* R8: width 100%, not auto: Safari sizes an auto-width grid item whose content is all absolutely positioned to 0 x 0 (blank tiles) */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile .et_pb_blurb_description { display: none; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile .et_pb_blurb_container { padding: 3.25rem 1.3rem 1.2rem; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile h3.et_pb_module_header, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile h3.et_pb_module_header a { font-size: clamp(1.06rem, 0.35vw + 0.95rem, 1.25rem); line-height: 1.28; text-wrap: balance; }
@media (max-width: 980px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 599px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tiles > .aph-tile { aspect-ratio: 16 / 10; }
}
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-t--interior img { object-position: 45% 60%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-t--exterior img { object-position: 4% 40%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-t--commercial img { object-position: 55% 50%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-t--cabinets img { object-position: 60% 50%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-t--custom img { object-position: 50% 45%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-t--condo img { object-position: 50% 50%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-t--floor img { object-position: 50% 60%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-t--stairs img { object-position: 60% 55%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-t--epoxy img { object-position: 50% 55%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-t--wallpaper img { object-position: 60% 40%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-t--popcorn img { object-position: 50% 40%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-t--finishes img { object-position: 60% 60%; }

/* 8. Reviews band: the old two-line heading (a lighter first line), our masonry of Google reviews */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-reviews .ap-shead h2 { color: #fff; }

/* 9. Near me: the old text, then the map on its stage and the note */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-map-row .ap-map-note .et_pb_text_inner { text-align: center; }

/* 10. Text cards: "Not Just another Toronto Painting Company" and "Our Promise", equal height, blue check-circles */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tcard { background: #fff; border: 1px solid var(--apl-line); border-radius: var(--apl-radius-lg); padding: 2.5rem 2.4rem 2.6rem; box-shadow: var(--apl-shadow-sm); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card-h2 h2 { font-size: clamp(1.4rem, 0.5vw + 1.1rem, 1.75rem) !important; line-height: 1.2; text-wrap: pretty; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card-text .et_pb_text_inner { font-size: 1.03rem; line-height: 1.65; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-checks { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 0.6rem; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-checks:last-child { margin-bottom: 0; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-checks li { position: relative; padding: 0 0 0 2rem; line-height: 1.55; color: var(--apl-text); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-checks li::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 1.3rem; height: 1.3rem; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9.5'/><path d='M8 12.4l2.8 2.8L16.2 9.6'/></svg>") center / contain no-repeat; }
@media (min-width: 981px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tcards > .aph-tcard:first-child { flex: 1.05 1 0% !important; width: auto !important; max-width: none !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tcards > .aph-tcard:last-child { flex: 1 1 0% !important; width: auto !important; max-width: none !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tcard .aph-card-text { flex: 1 1 auto; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tcard .aph-card-text .et_pb_text_inner { height: 100%; display: flex; flex-direction: column; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tcard .aph-card-text .et_pb_text_inner > p:last-of-type { margin-top: auto; }
}
@media (max-width: 980px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tcards { row-gap: 20px !important; } }
@media (max-width: 640px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tcard { padding: 1.6rem 1.3rem 1.75rem; } }

/* 11. Latest projects and news: the old head (H2 left, button right; stacked on tablets and phones), 3 cards across */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-lhead .ap-h2 h2 { text-wrap: balance; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-lhead-act { align-items: flex-end; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-lhead-act .apl-cta-pair { justify-content: flex-end; }
@media (max-width: 980px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-lhead { row-gap: 16px !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-lhead-act { align-items: flex-start; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-lhead-act .apl-cta-pair { justify-content: flex-start; }
}
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-posts .et_pb_blog_posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-posts .et_pb_blog_posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-posts .et_pb_blog_posts { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-posts .entry-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-posts .entry-title a:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 3px; border-radius: 4px; }
/* the photo is a second link to the same item: a blue line under it with the card's hover, its focus ring drawn inside the card */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-posts .entry-featured-image-url { pointer-events: none; border-bottom: 3px solid transparent; transition: border-color 0.2s; }
@media (hover: hover) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-posts article.et_pb_post:hover .entry-featured-image-url { border-bottom-color: var(--apl-blue); } }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-posts .entry-featured-image-url:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: -5px; border-bottom-color: var(--apl-blue); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-posts--projects .entry-title { padding-bottom: 1.2rem !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-posts .post-meta:empty, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-posts .post-content:has(> .post-content-inner:empty) { display: none; }

/* 12. FAQ: the head and the accordion across the full content width */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-faq-row > .et_pb_column { max-width: none; }

/* 13. The CTA card that completes the How It Works row: the brand blue with white text and a white pill link */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card.aph-card--cta { background: var(--apl-blue); border-color: var(--apl-blue); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card--cta h3.et_pb_module_header, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card--cta .et_pb_blurb_description, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card--cta .et_pb_blurb_description p { color: #fff !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card--cta .et_pb_blurb_description a { color: #fff !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card--cta .et_pb_blurb_content::before { background-color: rgba(255, 255, 255, 0.16); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-ic--cta { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/></svg>"); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card--cta a.aph-card-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.3rem; border-radius: 999px; background: #fff; color: var(--apl-ink) !important; font-weight: 700; text-decoration: none !important; }
@media (hover: hover) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card--cta a.aph-card-cta:hover { background: var(--apl-blue-50); color: var(--apl-blue-strong) !important; } }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card--cta a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* 14. Text and photo splits (owner rule): kicker, H2 and the old paragraphs (first paragraph + Read more) on the left, about 55 %;
   a real photo on the right, about 45 %, as tall as the text column, rounded; the side alternates; on phones the photo first */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit { align-items: stretch; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit > .aph-tsplit-copy { justify-content: center; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit .ap-h2 h2 { text-wrap: balance; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit-media { position: relative; min-height: 360px; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit-media .aph-tsplit-img { position: absolute; inset: 0; margin: 0 !important; width: 100% !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit-media .aph-tsplit-img .et_pb_image_wrap, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit-media .aph-tsplit-img img { display: block; width: 100%; height: 100%; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit-media img { object-fit: cover; border-radius: var(--apl-radius-lg); box-shadow: var(--apl-shadow-md); }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit + .aph-tsplit { margin-top: 72px !important; }
@media (min-width: 981px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit > .aph-tsplit-copy { flex: 0 0 calc(55% - 28px) !important; max-width: calc(55% - 28px) !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit > .aph-tsplit-media { flex: 0 0 calc(45% - 28px) !important; max-width: calc(45% - 28px) !important; }
}
@media (max-width: 980px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit { row-gap: 28px !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit > .aph-tsplit-media { order: -1; min-height: 0; aspect-ratio: 3 / 2; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tsplit + .aph-tsplit { margin-top: 56px !important; }
}

/* 15. The area pages' "Why All Painting" layout on the home (owner pick): Why hire professionals, and Many More Reasons in two rows */
body.ap-light #et-boc .et-l .aph-why .ap-why-points { gap: 10px !important; }
body.ap-light #et-boc .et-l .aph-why .ap-why-item { padding: 0.95rem 1.1rem; border: 1px solid var(--apl-line) !important; border-radius: 14px; background: #fff; box-shadow: var(--apl-shadow-sm); }
body.ap-light #et-boc .et-l .aph-why .ap-why-item:last-child { border-bottom: 1px solid var(--apl-line) !important; }
body.ap-light #et-boc .et-l .aph-why .ap-why-item .et_pb_blurb_content { grid-template-columns: 44px 1fr; gap: 0 1rem; align-items: start; }
body.ap-light #et-boc .et-l .aph-why .ap-why-item .et_pb_blurb_content::before { content: ""; display: block; width: 44px; height: 44px; border-radius: 12px; background: var(--apl-blue-50) var(--ic) center / 24px 24px no-repeat; grid-row: 1 / span 2; }
body.ap-light #et-boc .et-l .aph-why .ap-why-item h3.et_pb_module_header { color: var(--apl-ink); font-size: 1.1rem; line-height: 1.3; padding-bottom: 0.15rem; }
body.ap-light #et-boc .et-l .aph-why .ap-why-item .et_pb_blurb_description, body.ap-light #et-boc .et-l .aph-why .ap-why-item .et_pb_blurb_description p { color: var(--apl-text); font-size: 0.98rem; line-height: 1.55; text-wrap: pretty; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-why-split + .aph-why-split { margin-top: 72px !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-why-copy { justify-content: center; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-why .ap-why-points { gap: 12px !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-why .ap-why-item { margin: 0 !important; }
@media (max-width: 980px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-why-split + .aph-why-split { margin-top: 56px !important; } }
/* the four service cards belong to the About intro: same band, a normal content gap under the split */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-intro--cards > .aph-cards-row { margin-top: 48px !important; }
@media (max-width: 767px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-intro--cards > .aph-cards-row { margin-top: 36px !important; } }
/* 16. The About block: the intro split and the 4 cards, then three sub-parts (old H2s as H3s), photo sides alternating */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-about > .aph-split, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-about > .aph-tsplit:not(:first-child) { margin-top: 96px !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-sub-h3 h3 { font-family: var(--apl-font); font-size: clamp(1.5rem, 0.7vw + 1.15rem, 2rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--apl-ink); text-wrap: balance; padding: 0; }
@media (max-width: 980px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-about > .aph-split, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-about > .aph-tsplit:not(:first-child) { margin-top: 64px !important; } }
/* Hero links (owner 2026-10-05): "Toronto Painters" and the Google rating line stay links but look like the hero text around
   them (white, no underline at rest); an underline shows on hover and with the keyboard focus ring. */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-trust a, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-rating a { color: #fff !important; text-decoration: none; background-image: none; padding-bottom: 0; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-trust a:hover, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-rating a:hover,
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-trust a:focus-visible, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-hero-rating a:focus-visible { color: #fff !important; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.8); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* Why section photo (painter with a paint pail, 2560 px): keep the painter and the pail inside the tall crop */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l #why-hire .ap-why-media img, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l #why-hire img { object-position: 24% 50% !important; }
/* Animated logo, larger (owner 2026-10-05, second ask): the mark fills about 85 % of a taller panel (the logo is ~42 % of
   the video frame, so the frame is drawn at twice the panel height and its empty margins are cropped) */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-panel { min-height: 340px; }
/* client round 2026-10-08: the logo panel has one size on every page (home and the 33 area pages), whatever the length of the text beside it */
@media (min-width: 981px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-panel { height: 340px !important; min-height: 340px; align-self: center !important; flex-grow: 0; } }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-video { height: 200%; }
@media (max-width: 980px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-panel { min-height: 0; aspect-ratio: 4 / 3; } body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-video { height: 180%; } }
/* no stranded last words (wrap check, 2026-10-05): card titles and section headings on the home-layout pages, and the
   project cards (ap-projects) shown on them */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l :is(.ap-why-item, .aph-card) h3, body.ap-light .app-card__title { text-wrap: balance; }
/* phones: the service tiles sit two per row (review: 12 full-width tiles were ~2,900 px of scrolling) */
@media (max-width: 599px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tiles > .aph-tile { aspect-ratio: 4 / 5; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile .et_pb_blurb_container { padding: 2.4rem 0.75rem 0.8rem; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile h3.et_pb_module_header, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile h3.et_pb_module_header a { font-size: 0.95rem !important; line-height: 1.25; }
}
/* equal rows: a card's Read more sits at the foot of its text cell (same grid row as the text), so a clamped card's text plus
   button ends where its neighbours' full text ends (review M4) */
/* review R3: the Read more link has its own subgrid row (row 4) under the text, so clamped text never runs under it and every
   card's text ends on the same line */
@media (min-width: 641px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .apl-more-btn:not(.apl-more-ph) { grid-row: 4; grid-column: 1 / -1; align-self: start; margin-top: 0; } body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_description { grid-row: 3; grid-column: 1 / -1; } }
/* the About block: 80 px from the cards' quote button to the next sub-part (review minor: 156 px read as a hole) */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l #intro .aph-cta-row + .et_pb_row { margin-top: 20px !important; }
@media (max-width: 980px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l #intro .aph-cta-row + .et_pb_row { margin-top: 8px !important; } }
/* phones: tile titles may break inside long words ("Epoxy/Waterproofing" in a 2-column tile at 320 px) */
@media (max-width: 599px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile h3.et_pb_module_header { overflow-wrap: anywhere; hyphens: auto; } }
@media (max-width: 599px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile h3.et_pb_module_header { text-wrap: balance; } }
/* full-width text rows (tile notes, "what sets the price") keep a readable measure (review R2 N4) */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l :is(.aph-note-row, .aph-cost-row) .et_pb_text_inner { max-width: 75ch; }
/* review R4: on small laptops and tablets (981-1199 px) the long "why" lists and the care block would stretch their photo into
   a 410 x 1,300 px strip (upscaled 1.5x, the subject cropped away): those splits stack there, the photo on top at 3:2 */
@media (min-width: 981px) and (max-width: 1199px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l :is(.aph-why-split, .aph-promise .aph-tsplit) { flex-wrap: wrap !important; row-gap: 32px !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l :is(.aph-why-split, .aph-promise .aph-tsplit) > :is(.aph-tsplit-copy, .aph-why-copy) { flex: 1 1 100% !important; max-width: 100% !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l :is(.aph-why-split, .aph-promise .aph-tsplit) > .aph-tsplit-media { flex: 1 1 100% !important; max-width: 100% !important; order: -1; min-height: 0; aspect-ratio: 16 / 9; }
}
/* service pages: the price text with a "next step" card beside it (review R4: no empty half beside the cost block) */
@media (min-width: 981px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cost-row--2 > .et_pb_column:first-child { flex: 0 0 calc(55% - 28px) !important; max-width: calc(55% - 28px) !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-cost-row--2 > .et_pb_column:last-child { flex: 0 0 calc(45% - 28px) !important; max-width: calc(45% - 28px) !important; }
}
body.ap-light #et-boc .et-l .aph-cost-card { background: var(--apl-blue-50); border: 1px solid var(--apl-line); border-radius: var(--apl-radius-lg); padding: 2rem 2rem 1.75rem; }
body.ap-light #et-boc .et-l .aph-cost-card p { margin: 0 0 0.9rem; padding: 0; color: var(--apl-text); }
body.ap-light #et-boc .et-l .aph-cost-card .aph-cost-card-h { font-family: var(--apl-font); font-size: 1.3rem; font-weight: 700; line-height: 1.25; color: var(--apl-ink); margin-bottom: 0.75rem; }
body.ap-light #et-boc .et-l .aph-cost-card .aph-cost-card-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 1.25rem 0 0; }
body.ap-light #et-boc .et-l .aph-cost-card-btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0.75rem 1.6rem; border-radius: 999px; background: var(--apl-blue); color: #fff !important; font-weight: 700; text-decoration: none; }
@media (hover: hover) { body.ap-light #et-boc .et-l .aph-cost-card-btn:hover { background: var(--apl-blue-strong); } }
body.ap-light #et-boc .et-l .aph-cost-card-tel { font-weight: 700; color: var(--apl-blue-strong); text-decoration: none; white-space: nowrap; }
body.ap-light #et-boc .et-l .aph-cost-card a:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 3px; }
@media (max-width: 980px) { body.ap-light #et-boc .et-l .aph-cost-row--2 { row-gap: 24px !important; } }
/* the narrowest phones: tile labels a step smaller, so two bound words ("Cabinet Painting") fit the tile (review R4) */
@media (max-width: 359px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile h3.et_pb_module_header, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile h3.et_pb_module_header a { font-size: 0.8rem !important; letter-spacing: -0.005em; } }
/* R8b (Mayank: tiles exactly like the old ap.server-1.ca): title 20 px in from the left and bottom at every width; phones show
   one tile per row at the old site's 351 x 300 proportion (they were two per row), so the 20 px title fits like the original */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile .et_pb_blurb_container { padding: 0 20px 20px !important; }
@media (max-width: 599px) {
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tiles { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tiles > .aph-tile { aspect-ratio: 7 / 6 !important; }
  body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile h3.et_pb_module_header, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile h3.et_pb_module_header a { font-size: 20px !important; line-height: 24px !important; }
}
@media (min-width: 600px) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tiles > .aph-tile { aspect-ratio: 412 / 300 !important; } }  /* R8b: the old tile's proportion */
/* R8 (Safari): the logo MP4 has a white ground that multiply drops; Safari decodes it a shade off-white (253), so a 2% lift keeps the panel clean */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-logo-video { filter: brightness(1.02); }