/* All Painting light roll-out layer: inner pages (services, About, Contact, Reviews, Projects, FAQ, legal) and the Theme Builder body templates (blog archive and single, search, 404, project single), plus the light reviews carousel and other shared inner-page components.
Loaded after ap-light.css on every page; every rule is scoped to body.ap-light.
Built by build/rollout_light.py. Tokens, type, buttons, header, footer and the home components (section heads, process
cards, FAQ accordion, CTA panel, before/after slider) come from ap-light.css; this file adds the inner-page components:
A hero over a still photo, B bands, C splits and checklists, D icon cards, E text pairs, F before/after rows, G service
links, H reviews (carousel and wall), I FAQ, J CTA band, K contact, L legal prose, M blog and posts, N tool pages. */
/* ====================================================================================================================
A. Inner hero: the light home's composition (the old site's), over a still photo: a full-viewport stage under the even
navy overlay (white text at least 5:1 over the brightest pixel), a centred stack of kicker, H1, facts line, lead and pills.
==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-hero--page { justify-content: center !important; }
body.ap-light #et-boc .et-l .apl-hero--page .ap-hero-copy-row { width: 92%; max-width: 1180px; }
body.ap-light #et-boc .et-l .apl-hero--page .ap-hero-copy { max-width: 1120px; gap: 1.25rem; }
body.ap-light #et-boc .et-l .apl-hero--page .ap-kicker { text-align: center; }
body.ap-light #et-boc .et-l .apl-hero--page .ap-kicker .et_pb_text_inner { display: flex; justify-content: center; text-align: center; width: 100%; }
body.ap-light #et-boc .et-l .apl-h1-page h1 {
font-size: clamp(2.3rem, 2.6vw + 1.15rem, 4.7rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.024em;
text-align: center; text-wrap: balance; max-width: 22ch; margin: 0 auto; color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}
body.ap-light #et-boc .et-l .apl-h1-page h1 .painted::before { bottom: -0.12em; height: 0.24em; }
body.ap-light #et-boc .et-l .apl-hero--page .apl-hero-lead .et_pb_text_inner { max-width: 58ch; }
body.ap-light #et-boc .et-l .apl-hero--page .ap-lead .et_pb_text_inner a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.7); }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-hero--page .ap-lead .et_pb_text_inner a:hover { color: #fff; text-decoration-color: #fff; text-decoration-thickness: 2px; } }
@media (max-width: 640px) {
body.ap-light #et-boc .et-l .apl-hero--page .ap-hero-copy { gap: 1rem; }
body.ap-light #et-boc .et-l .apl-h1-page h1 { font-size: clamp(2.05rem, 7.4vw, 2.6rem); line-height: 1.07; }
}
@media (max-height: 460px) and (orientation: landscape) {
body.ap-light #et-boc .et-l .apl-h1-page h1 { font-size: 1.9rem; line-height: 1.05; }
body.ap-light #et-boc .et-l .apl-hero--page .ap-hero-copy { gap: 0.6rem !important; }
body.ap-light #et-boc .et-l .apl-hero--page .apl-hero-line { font-size: 0.85rem; }
body.ap-light #et-boc .et-l .apl-hero--page .apl-btn .et_pb_button { min-height: 44px; padding: 0.5rem 1.2rem !important; font-size: 0.95rem !important; }
}
/* ====================================================================================================================
B. Bands: white and tint alternate after the hero; the one blue band is the reviews band
==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-inner .ap-shead + .et_pb_row { margin-top: 0 !important; }
body.ap-light #et-boc .et-l .apl-inner .apl-cta-pair { justify-content: flex-start; }
body.ap-light #et-boc .et-l .apl-inner.apl-band--blue .apl-cta-pair, body.ap-light #et-boc .et-l .apl-inner.apl-wall .apl-cta-pair { justify-content: center; }
/* ====================================================================================================================
C. Splits: copy beside a photo, equal height (the photo covers its column); checklists with a blue check in a soft circle
==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-split { align-items: stretch; }
/* the copy sits centred beside the photo when the photo's minimum height is the taller of the two (short copy on wide screens) */
body.ap-light #et-boc .et-l .apl-split-copy { justify-content: center; }
body.ap-light #et-boc .et-l .apl-split-copy .ap-h3 { margin-top: 0.35rem !important; }
body.ap-light #et-boc .et-l .apl-media { min-height: 340px; }
body.ap-light #et-boc .et-l .apl-body .et_pb_text_inner { color: var(--apl-text); font-size: 1.0625rem; line-height: 1.68; }
body.ap-light #et-boc .et-l .apl-body .et_pb_text_inner p { max-width: 68ch; padding-bottom: 1em; text-wrap: pretty; }
body.ap-light #et-boc .et-l .apl-body .et_pb_text_inner p:last-child { padding-bottom: 0; }
body.ap-light #et-boc .et-l .apl-checklist .et_pb_text_inner ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; max-width: 68ch; }
body.ap-light #et-boc .et-l .apl-checklist .et_pb_text_inner li { position: relative; padding: 0 0 0 2.15rem; color: var(--apl-text); font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
body.ap-light #et-boc .et-l .apl-checklist .et_pb_text_inner li::before {
content: ""; position: absolute; left: 0; top: 0.08em; width: 1.5rem; height: 1.5rem; border-radius: 50%;
background: var(--apl-blue-50) center / 0.85rem no-repeat url("data:image/svg+xml;utf8,");
}
body.ap-light #et-boc .et-l .apl-checklist strong { color: var(--apl-ink); font-weight: 700; }
body.ap-light #et-boc .et-l .apl-checklist a { color: var(--apl-blue); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-checklist a:hover { color: var(--apl-blue-strong); text-decoration-thickness: 2px; } }
/* wide screens keep the full content width (edges on the header pill); copy and photo share it */
/* stacked (tablets and phones): copy first, then a 3:2 photo */
@media (max-width: 980px) {
body.ap-light #et-boc .et-l .apl-media { aspect-ratio: 3 / 2; min-height: 0; width: 100%; }
body.ap-light #et-boc .et-l .apl-split { row-gap: 28px !important; }
}
/* ====================================================================================================================
D. Icon cards: white cards with a blue line icon in a pale-blue square (the home's Why / process / "Also on request" look).
One grid; each card is a subgrid of three rows (icon, title, text), so titles and texts start on one line across a row.
==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-fcards { display: grid !important; grid-template-columns: repeat(var(--fc, 3), minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; width: 100%; margin: 0; align-items: stretch; }
body.ap-light #et-boc .et-l .apl-fcards > .apl-fcard { width: auto !important; max-width: none; margin: 0 !important; }
body.ap-light #et-boc .et-l .apl-fc-2 { --fc: 2; }
body.ap-light #et-boc .et-l .apl-fc-3, body.ap-light #et-boc .et-l .apl-fc-6, body.ap-light #et-boc .et-l .apl-fc-9 { --fc: 3; }
body.ap-light #et-boc .et-l .apl-fc-4, body.ap-light #et-boc .et-l .apl-fc-8 { --fc: 4; }
body.ap-light #et-boc .et-l .apl-fcard {
position: relative; display: grid !important; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start;
background: #fff; border: 1px solid var(--apl-line); border-radius: var(--apl-radius); padding: 1.5rem 1.4rem 1.55rem; box-shadow: var(--apl-shadow-sm);
}
body.ap-light #et-boc .et-l .apl-fcard .et_pb_blurb_content, body.ap-light #et-boc .et-l .apl-fcard .et_pb_blurb_container { display: contents; }
body.ap-light #et-boc .et-l .apl-fcard .et_pb_main_blurb_image { display: none; }
body.ap-light #et-boc .et-l .apl-fcard .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 #et-boc .et-l .apl-fcard h3.et_pb_module_header { align-self: start; margin: 0.95rem 0 0.45rem; padding: 0; font-family: var(--apl-font); font-size: 1.1rem; line-height: 1.3; letter-spacing: -0.006em; color: var(--apl-ink); text-wrap: balance; }
body.ap-light #et-boc .et-l .apl-fcard .et_pb_blurb_description, body.ap-light #et-boc .et-l .apl-fcard .et_pb_blurb_description p { color: var(--apl-text); font-size: 0.98rem; line-height: 1.62; text-wrap: pretty; }
body.ap-light #et-boc .et-l .apl-fcard .et_pb_blurb_description a { color: var(--apl-blue); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-fcard .et_pb_blurb_description a:hover { color: var(--apl-blue-strong); text-decoration-thickness: 2px; } }
@media (max-width: 1279px) { body.ap-light #et-boc .et-l .apl-fc-4, body.ap-light #et-boc .et-l .apl-fc-8 { --fc: 2; } }
/* complete rows only (owner rule): 2 | 3 and 9 (3 across, one column below 760 px) | 4 and 8 (4 across, 2 below 1280 px) |
6 (3 across, 2 below 900 px); 5 and 7 never occur, the builder adds a CTA card */
@media (max-width: 899px) { body.ap-light #et-boc .et-l .apl-fc-6 { --fc: 2; } }
@media (max-width: 759px) { body.ap-light #et-boc .et-l .apl-fc-3, body.ap-light #et-boc .et-l .apl-fc-9 { --fc: 1; } }
body.ap-light #et-boc .et-l .apl-fcard .apl-more-btn, body.ap-light #et-boc .et-l .apl-fcard .apl-more-ph { margin-top: 0.4rem; }
/* phones: one column; the icon sits beside the title, the text runs full width under both */
@media (max-width: 640px) {
body.ap-light #et-boc .et-l .apl-fcards { --fc: 1 !important; gap: 12px; }
body.ap-light #et-boc .et-l .apl-fcards > .apl-fcard { grid-column: auto !important; }
body.ap-light #et-boc .et-l .apl-fcard { grid-row: auto; grid-template-rows: none; grid-template-columns: 44px minmax(0, 1fr); column-gap: 0.9rem; padding: 1.15rem 1.1rem 1.2rem; align-items: center; }
body.ap-light #et-boc .et-l .apl-fcard h3.et_pb_module_header { margin: 0; align-self: center; }
body.ap-light #et-boc .et-l .apl-fcard .et_pb_blurb_description { grid-column: 1 / -1; margin-top: 0.7rem; }
body.ap-light #et-boc .et-l .apl-fcard .apl-more-btn, body.ap-light #et-boc .et-l .apl-fcard .apl-more-ph { grid-column: 1 / -1; }
}
/* icons (24 px line icons, blue #0a66f2 on #eaf2ff) */
body.ap-light #et-boc .et-l .apl-ic--quote { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--chat { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--coats { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--leaf { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--tidy { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--calendar { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--shield { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--ladder { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--search { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--patch { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--prep { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--palette { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--cabinet { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--stairs { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--roll { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--home { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--recycle { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--cost { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--check { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--camera { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--image { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--interior { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--exterior { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--sun { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--key { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--droplet { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--sander { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--brush { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--trowel { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--nail { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--crack { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--corner { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--brick { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--siding { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--door { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--wood { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--island { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--vanity { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--shelves { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--sparkle { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--building { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--moon { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--roller { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--scale { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--sw0 { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--sw1 { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--sw2 { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--sw3 { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--phone { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--mail { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--pin { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--clock { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-ic--map { --ic: url("data:image/svg+xml;utf8,"); }
/* ====================================================================================================================
E. Text pairs: two white cards side by side, equal height
==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-pair { align-items: stretch; }
body.ap-light #et-boc .et-l .apl-pair > .apl-pair-card { background: #fff; border: 1px solid var(--apl-line); border-radius: var(--apl-radius); box-shadow: var(--apl-shadow-sm); padding: clamp(1.4rem, 2.4vw, 2.4rem); justify-content: flex-start; }
body.ap-light #et-boc .et-l .apl-pair .ap-h3 h3 { font-size: clamp(1.2rem, 0.5vw + 0.95rem, 1.45rem); }
@media (max-width: 980px) { body.ap-light #et-boc .et-l .apl-pair { row-gap: 16px !important; } }
/* ====================================================================================================================
F. Before / after rows (service pages and Projects): the slider beside its message; the stills fill the copy column on
wide screens; full content width at every size (no 1440 px block), so the edges stay on the header pill
==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-ba-split .ap-lead .et_pb_text_inner { font-size: 1.0625rem; }
body.ap-light .ap-ba-stills figure { background: var(--apl-tint-2); border-radius: var(--apl-radius-sm); box-shadow: var(--apl-shadow-sm); }
body.ap-light .ap-ba-stills figcaption { background: rgba(255, 255, 255, 0.95); color: var(--apl-ink); font-family: var(--apl-font); box-shadow: 0 2px 8px rgba(16, 24, 40, 0.16); }
body.ap-light #et-boc .et-l .apl-more-link a, body.ap-light #et-boc .et-l .ap-ba-split .ap-more-link a, body.ap-light #et-boc .et-l .ap-project .ap-more-link a {
display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; color: var(--apl-blue-strong); font-weight: 700; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
body.ap-light #et-boc .et-l .apl-more-link a::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; transition: transform 0.2s var(--apl-ease); }
@media (hover: hover) {
body.ap-light #et-boc .et-l .apl-more-link a:hover, body.ap-light #et-boc .et-l .ap-ba-split .ap-more-link a:hover, body.ap-light #et-boc .et-l .ap-project .ap-more-link a:hover { color: #003c9e; text-decoration-thickness: 2px; }
body.ap-light #et-boc .et-l .apl-more-link a:hover::after { transform: translateX(3px); }
}
body.ap-light #et-boc .et-l .ap-projects .ap-project + .ap-project { margin-top: clamp(56px, 6vw, 96px) !important; }
body.ap-light #et-boc .et-l .ap-project .apl-project-h h3 { font-size: clamp(1.5rem, 0.9vw + 1.05rem, 2rem); line-height: 1.15; letter-spacing: -0.015em; }
@media (max-width: 980px) {
body.ap-light #et-boc .et-l .apl-ba-split { row-gap: 28px !important; }
body.ap-light #et-boc .et-l .apl-ba-split.apl-project--img-left > .ap-ba-col { order: 2; }
}
/* ====================================================================================================================
G. Service links: white link cards, each with its service's line icon in a pale-blue square and an arrow; 4 across from
900 px (12 and 16 items fill whole rows), 2 across on tablets, one column on phones; the whole card is the target
==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner li { padding: 0; margin: 0; display: flex; }
body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner a {
position: relative; display: flex; align-items: center; gap: 0.85rem; width: 100%; min-height: 68px; padding: 0.7rem 2.7rem 0.7rem 0.75rem;
border-radius: 14px; background: #fff; border: 1px solid var(--apl-line); box-shadow: var(--apl-shadow-sm);
color: var(--apl-ink); font-family: var(--apl-font); font-weight: 600; font-size: 0.99rem; line-height: 1.3; text-decoration: none; text-wrap: balance;
transition: border-color 0.2s, box-shadow 0.2s, color 0.2s, transform 0.2s var(--apl-ease);
}
body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner a::before { content: ""; flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--apl-blue-50) var(--ic, none) center / 22px 22px no-repeat; }
body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner a::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid var(--apl-blue); border-right: 2px solid var(--apl-blue); transform: rotate(45deg); transition: transform 0.2s var(--apl-ease); }
@media (hover: hover) {
body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner a:hover { border-color: var(--apl-blue-100); box-shadow: var(--apl-shadow-md); color: var(--apl-blue-strong); transform: translateY(-2px); }
body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner a:hover::after { transform: translateX(3px) rotate(45deg); }
}
body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner a:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 3px; }
@media (min-width: 900px) and (max-width: 1279px) { body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner a { font-size: 0.92rem; gap: 0.7rem; padding-right: 2.2rem; } body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner a::before { width: 36px; height: 36px; } body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner a::after { right: 0.9rem; } }
@media (max-width: 899px) { body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner ul { grid-template-columns: minmax(0, 1fr); gap: 10px; } body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner a { min-height: 60px; } }
body.ap-light .apl-svc-links .apl-sl--interior { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--exterior { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--house { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--commercial { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--condo { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--cabinets { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--stairs { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--wallpaper { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--drywall { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--siding { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--brick { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--door { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--deck { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--floor { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--epoxy { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--popcorn { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light .apl-svc-links .apl-sl--chat { --ic: url("data:image/svg+xml;utf8,"); }
/* ====================================================================================================================
H. Reviews. The carousel (every page except the home and /reviews/, and the area pages): white cards, Google only, no
rating bar; on the blue band (inner pages) or on a white / tint band (cards get a hairline). Cards share one resting
height; a clamped review gets "Read more", and only the opened card grows. Arrows sit under the track, centred.
The wall (/reviews/): the same white cards in the home's masonry, on the tint band.
==================================================================================================================== */
body.ap-light .ap-rv-card { background: #fff; color: var(--apl-ink); border: 1px solid var(--apl-line); border-radius: var(--apl-radius); box-shadow: var(--apl-shadow-sm); font-family: var(--apl-font); }
body.ap-light .ap-rv-who strong { color: var(--apl-ink); font-family: var(--apl-font); }
body.ap-light .ap-rv-who time { color: var(--apl-muted); }
body.ap-light .ap-rv-card p { color: var(--apl-text); font-family: var(--apl-font); font-size: 0.95rem; line-height: 1.6; }
body.ap-light .ap-rv-avatar { background: var(--apl-blue-strong); }
body.ap-light .ap-rv-avatar b { font-family: var(--apl-font); font-weight: 700; }
body.ap-light .ap-rv-stars svg { fill: #f5b400; }
body.ap-light .ap-rv-src { color: var(--apl-muted); }
body.ap-light .apl-band--blue .ap-rv-card { border: 0; }
/* carousel */
body.ap-light .ap-rv-carousel { gap: 1.1rem; }
body.ap-light .ap-rv-car-nav { order: 2; justify-content: center; gap: 0.75rem; }
body.ap-light .ap-reviews--carousel .ap-rv-track > .ap-rv-card { scroll-snap-align: start; }
body.ap-light #et-boc .et-l .ap-reviews--carousel ul.ap-rv-track:has(> .ap-rv-card.is-open), body.ap-light .ap-reviews--carousel .ap-rv-track:has(> .ap-rv-card.is-open) { align-items: flex-start !important; }
body.ap-light .ap-reviews--carousel .ap-rv-track:has(> .ap-rv-card.is-open) > .ap-rv-card { min-height: var(--rest-h, 0px); }
body.ap-light .ap-reviews--carousel .ap-rv-card { gap: 0.8rem; padding: 1.35rem 1.4rem 1.2rem; }
body.ap-light .ap-reviews--carousel .ap-rv-card .ap-rv-stars { order: 1; }
body.ap-light .ap-reviews--carousel .ap-rv-card p { order: 2; flex: 0 0 auto; font-size: 0.98rem; line-height: 1.62; -webkit-line-clamp: 5; }
body.ap-light .ap-reviews--carousel .ap-rv-card .ap-rv-more-btn { order: 3; margin-top: -0.45rem; }
body.ap-light .ap-reviews--carousel .ap-rv-card .ap-rv-who { order: 4; margin-top: auto; padding-top: 0.95rem; border-top: 1px solid var(--apl-line); }
body.ap-light .ap-reviews--carousel .ap-rv-card.is-open p { -webkit-line-clamp: unset; display: block; overflow: visible; }
body.ap-light .ap-rv-car-btn { width: 44px; height: 44px; border: 1px solid var(--apl-line-strong); background: #fff; color: var(--apl-ink); box-shadow: var(--apl-shadow-sm); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
@media (hover: hover) { body.ap-light .ap-rv-car-btn:not([disabled]):hover { background: var(--apl-blue-50); border-color: var(--apl-blue); color: var(--apl-blue-strong); } }
body.ap-light .ap-rv-car-btn[disabled] { background: transparent; border-color: var(--apl-line); color: #98a2b3; box-shadow: none; }
body.ap-light .ap-rv-car-btn:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 3px; }
body.ap-light .apl-band--blue .ap-rv-car-btn { border-color: #fff; background: #fff; color: var(--apl-ink); box-shadow: 0 6px 16px rgba(3, 28, 77, 0.22); }
@media (hover: hover) { body.ap-light .apl-band--blue .ap-rv-car-btn:not([disabled]):hover { background: var(--apl-blue-50); border-color: var(--apl-blue-50); color: var(--apl-blue-strong); } }
body.ap-light .apl-band--blue .ap-rv-car-btn[disabled] { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: rgba(255, 255, 255, 0.8); box-shadow: none; }
body.ap-light .apl-band--blue .ap-rv-car-btn:focus-visible, body.ap-light .apl-band--blue .ap-reviews--carousel .ap-rv-track:focus-visible { outline-color: #fff; }
body.ap-light .ap-reviews--carousel .ap-rv-track:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 4px; border-radius: 18px; }
@media (min-width: 900px) { body.ap-light #et-boc .et-l .ap-reviews--carousel { margin-top: 0; } }
body.ap-light #et-boc .et-l .et_pb_section:has(.ap-reviews--carousel) .ap-shead { margin-bottom: 0 !important; }
body.ap-light #et-boc .et-l .et_pb_section:has(.ap-reviews--carousel) .ap-shead + .et_pb_row { margin-top: 0 !important; }
/* wall (/reviews/) */
body.ap-light .ap-reviews--wall .ap-rv-card { box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06); }
body.ap-light .ap-rv-more-wrap { justify-content: center; margin-top: 1rem; }
body.ap-light .ap-rv-more {
min-height: 50px; padding: 0.8rem 1.55rem; border-radius: 999px; border: 1px solid var(--apl-line-strong); background: #fff; color: var(--apl-ink);
font-family: var(--apl-font); font-weight: 600; font-size: 1rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
@media (hover: hover) { body.ap-light .ap-rv-more:hover { background: var(--apl-blue-50); border-color: var(--apl-blue); color: var(--apl-blue-strong); } }
body.ap-light .ap-rv-more:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 3px; }
body.ap-light .ap-rv-shown { color: var(--apl-muted); font-family: var(--apl-font); }
body.ap-light .ap-reviews-fallback { color: var(--apl-text); }
/* ====================================================================================================================
I. FAQ: the home's accordion (white cards, blue plus); the heading column is sticky on desktops
==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-inner.ap-faq-section .ap-sticky-col .ap-lead .et_pb_text_inner { max-width: 36ch; text-wrap: balance; }
/* ====================================================================================================================
J. Closing CTA: the blue panel sits on the band before it (white or tint)
==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-cta-band.apl-band--tint { background-color: var(--apl-tint); }
/* ====================================================================================================================
K. Contact: facts as white cards with icons, the form in a white card with light fields and chips
==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-contact-row { align-items: flex-start; }
/* side by side (981 px and up): the form card is as tall as the facts column (equal-height split); the message box takes the extra height */
@media (min-width: 981px) {
body.ap-light #et-boc .et-l .apl-contact-row { align-items: stretch; }
body.ap-light #et-boc .et-l .apl-contact-row > .apl-form-card .et_pb_contact_form_container { flex: 1 1 auto; }
body.ap-light #et-boc .et-l .apl-contact-row > .apl-form-card .et_pb_contact { flex: 1 1 auto; display: flex; flex-direction: column; }
body.ap-light #et-boc .et-l .apl-contact-row > .apl-form-card .et_pb_contact_form { flex: 1 1 auto; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
body.ap-light #et-boc .et-l .apl-contact-row > .apl-form-card .et_pb_contact_field:has(> textarea) { align-self: stretch; }
body.ap-light #et-boc .et-l .apl-contact-row > .apl-form-card .et_pb_contact_form textarea { flex: 1 1 auto; }
}
body.ap-light #et-boc .et-l .apl-facts { gap: 12px !important; }
body.ap-light #et-boc .et-l .apl-fact { margin: 0 !important; background: #fff; border: 1px solid var(--apl-line); border-radius: 14px; box-shadow: var(--apl-shadow-sm); padding: 1rem 1.15rem; }
body.ap-light #et-boc .et-l .apl-fact .et_pb_blurb_content { max-width: none; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; align-items: center; text-align: left; }
body.ap-light #et-boc .et-l .apl-fact .et_pb_main_blurb_image { display: none; }
body.ap-light #et-boc .et-l .apl-fact .et_pb_blurb_content::before { content: ""; width: 44px; height: 44px; border-radius: 12px; background: var(--apl-blue-50) var(--ic) center / 22px 22px no-repeat; grid-row: 1; }
body.ap-light #et-boc .et-l .apl-fact .et_pb_blurb_container { display: grid; gap: 0.1rem; min-width: 0; }
body.ap-light #et-boc .et-l .apl-fact h3.et_pb_module_header { margin: 0; padding: 0; font-family: var(--apl-font); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apl-muted); }
body.ap-light #et-boc .et-l .apl-fact .et_pb_blurb_description, body.ap-light #et-boc .et-l .apl-fact .et_pb_blurb_description p { color: var(--apl-ink); font-size: 1.02rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
body.ap-light #et-boc .et-l .apl-fact .et_pb_blurb_description a { color: var(--apl-ink); text-decoration: underline; text-decoration-color: var(--apl-blue); text-decoration-thickness: 1px; text-underline-offset: 4px; display: inline-block; padding: 0.15rem 0; }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-fact .et_pb_blurb_description a:hover { color: var(--apl-blue-strong); text-decoration-thickness: 2px; } }
body.ap-light #et-boc .et-l .apl-follow-h { margin-top: 0.4rem !important; }
body.ap-light #et-boc .et-l .apl-follow-h .et_pb_text_inner { font-family: var(--apl-font); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apl-blue); }
body.ap-light #et-boc .et-l .apl-contact-row .et_pb_social_media_follow li a.icon { background: #fff !important; border: 1px solid var(--apl-line-strong); }
body.ap-light #et-boc .et-l .apl-contact-row .et_pb_social_media_follow li a.icon::before { color: var(--apl-ink); }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-contact-row .et_pb_social_media_follow li a.icon:hover { background: var(--apl-blue) !important; border-color: var(--apl-blue); color: #fff !important; } body.ap-light #et-boc .et-l .apl-contact-row .et_pb_social_media_follow li a.icon:hover::before { color: #fff; } }
body.ap-light #et-boc .et-l .apl-form-card { background: #fff; border: 1px solid var(--apl-line); border-radius: var(--apl-radius-lg); box-shadow: var(--apl-shadow-md); padding: clamp(1.4rem, 3vw, 2.6rem); }
body.ap-light #et-boc .et-l .apl-form-intro h2.ap-form-title { color: var(--apl-ink); font-family: var(--apl-font); font-size: clamp(1.5rem, 0.8vw + 1.1rem, 1.9rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; padding: 0 0 0.5rem; }
body.ap-light #et-boc .et-l .apl-form-intro p { color: var(--apl-text); font-size: 1rem; line-height: 1.6; max-width: 62ch; }
body.ap-light #et-boc .et-l .apl-form .input, body.ap-light #et-boc .et-l .apl-form input[type="text"], body.ap-light #et-boc .et-l .apl-form input[type="email"], body.ap-light #et-boc .et-l .apl-form input[type="tel"], body.ap-light #et-boc .et-l .apl-form textarea, body.ap-light #et-boc .et-l .apl-form select {
background: #fff !important; color: var(--apl-ink) !important; border: 1px solid var(--apl-line-strong) !important; border-radius: 12px !important;
font-family: var(--apl-font) !important; font-size: 1rem !important; line-height: 1.4 !important; padding: 0.85rem 1rem !important; min-height: 50px; box-shadow: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
body.ap-light #et-boc .et-l .apl-form .input::placeholder, body.ap-light #et-boc .et-l .apl-form textarea::placeholder { color: var(--apl-muted) !important; opacity: 1; }
body.ap-light #et-boc .et-l .apl-form .input:focus, body.ap-light #et-boc .et-l .apl-form textarea:focus, body.ap-light #et-boc .et-l .apl-form select:focus { border-color: var(--apl-blue) !important; box-shadow: 0 0 0 3px var(--apl-blue-100) !important; outline: none; }
body.ap-light #et-boc .et-l .apl-form .input:focus-visible, body.ap-light #et-boc .et-l .apl-form textarea:focus-visible { outline: 2px solid var(--apl-blue); outline-offset: 1px; }
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_radio label, body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_checkbox label {
display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 1rem !important; border-radius: 999px; border: 1px solid var(--apl-line-strong) !important; background: #fff !important;
color: var(--apl-ink) !important; font-family: var(--apl-font); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_radio label i, body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_checkbox label i { display: none; }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_radio label:hover { border-color: var(--apl-blue) !important; color: var(--apl-blue-strong) !important; background: var(--apl-blue-50) !important; } }
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_radio input:checked + label { background: var(--apl-blue-50) !important; border-color: var(--apl-blue) !important; color: var(--apl-blue-strong) !important; box-shadow: inset 0 0 0 1px var(--apl-blue); }
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_radio input:focus-visible + label { outline: 3px solid var(--apl-blue); outline-offset: 2px; }
body.ap-light #et-boc .et-l .apl-form .et_contact_bottom_container { margin-top: 0.5rem; }
body.ap-light #page-container #et-boc .et-l .apl-form .et_pb_contact_submit.et_pb_button, body.ap-light #page-container #et-boc .et-l .apl-form button.et_pb_button {
display: inline-flex !important; align-items: center; justify-content: center; min-height: 50px; padding: 0.8rem 1.8rem !important; margin: 0 !important;
border-radius: 999px !important; border: 1px solid var(--apl-blue) !important; background: var(--apl-blue) !important; background-image: none !important; color: #fff !important;
font-family: var(--apl-font) !important; font-weight: 600 !important; font-size: 1rem !important; line-height: 1.15 !important; letter-spacing: 0 !important; cursor: pointer;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_submit::after, body.ap-light #et-boc .et-l .apl-form .et_pb_contact_submit::before { display: none !important; }
@media (hover: hover) { body.ap-light #page-container #et-boc .et-l .apl-form .et_pb_contact_submit.et_pb_button:hover { background: var(--apl-blue-strong) !important; border-color: var(--apl-blue-strong) !important; box-shadow: 0 8px 20px rgba(10, 102, 242, 0.28); } }
body.ap-light #page-container #et-boc .et-l .apl-form .et_pb_contact_submit.et_pb_button:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 3px; }
body.ap-light #et-boc .et-l .apl-form .et-pb-contact-message, body.ap-light #et-boc .et-l .apl-form .et-pb-contact-message p, body.ap-light #et-boc .et-l .apl-form .et_pb_contact_captcha_question { color: var(--apl-ink) !important; font-family: var(--apl-font); }
/* ====================================================================================================================
L. Legal pages: one readable column of prose
==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-prose .et_pb_text_inner, body.ap-light #et-boc .et-l .apl-prose .et_pb_post_content { color: var(--apl-text); font-family: var(--apl-font); font-size: 1.0625rem; line-height: 1.72; }
body.ap-light #et-boc .et-l .apl-prose h2 { color: var(--apl-ink); font-size: clamp(1.4rem, 0.8vw + 1.05rem, 1.8rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; padding: 1.5em 0 0.45em; text-wrap: balance; }
body.ap-light #et-boc .et-l .apl-prose h3 { color: var(--apl-ink); font-size: clamp(1.12rem, 0.4vw + 0.95rem, 1.3rem); font-weight: 700; line-height: 1.3; padding: 1em 0 0.35em; text-wrap: balance; }
body.ap-light #et-boc .et-l .apl-prose h2:first-child, body.ap-light #et-boc .et-l .apl-prose h3:first-child { padding-top: 0; }
body.ap-light #et-boc .et-l .apl-prose p, body.ap-light #et-boc .et-l .apl-prose ul, body.ap-light #et-boc .et-l .apl-prose ol { color: var(--apl-text); padding-bottom: 1em; }
body.ap-light #et-boc .et-l .apl-prose ul { list-style: disc; padding-left: 1.3em; }
body.ap-light #et-boc .et-l .apl-prose ol { list-style: decimal; padding-left: 1.4em; }
body.ap-light #et-boc .et-l .apl-prose li { padding: 0 0 0.4em; }
body.ap-light #et-boc .et-l .apl-prose li::marker { color: var(--apl-blue); }
body.ap-light #et-boc .et-l .apl-prose strong { color: var(--apl-ink); }
body.ap-light #et-boc .et-l .apl-prose a { color: var(--apl-blue); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-prose a:hover { color: var(--apl-blue-strong); text-decoration-thickness: 2px; } }
body.ap-light #et-boc .et-l .apl-prose .ap-legal-date { color: var(--apl-muted); font-size: 0.95rem; }
body.ap-light #et-boc .et-l .apl-prose blockquote { border-left: 4px solid var(--apl-blue); background: var(--apl-tint); color: var(--apl-ink); padding: 1rem 1.25rem; margin: 0 0 1em; border-radius: 0 12px 12px 0; }
body.ap-light #et-boc .et-l .apl-prose img { border-radius: var(--apl-radius-sm); }
/* ====================================================================================================================
M. Blog archive and search (Divi Blog module as white cards), single post and project (meta, featured image, prose, aside)
==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-blog .et_pb_blog_posts { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
/* 3 across (complete rows for the 6 latest articles; 2 below 981 px) */
body.ap-light #et-boc .et-l .apl-blog .et_pb_blog_posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { body.ap-light #et-boc .et-l .apl-blog .et_pb_blog_posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body.ap-light #et-boc .et-l .apl-blog .et_pb_blog_posts { grid-template-columns: minmax(0, 1fr); } }
body.ap-light #et-boc .et-l .apl-blog article.et_pb_post { position: relative; background: #fff; border: 1px solid var(--apl-line); border-radius: var(--apl-radius); box-shadow: var(--apl-shadow-sm); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--apl-ease); }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-blog article.et_pb_post:hover { border-color: var(--apl-blue-100); box-shadow: var(--apl-shadow-md); transform: translateY(-2px); } }
body.ap-light #et-boc .et-l .apl-blog .entry-title, body.ap-light #et-boc .et-l .apl-blog .entry-title a { font-family: var(--apl-font); font-weight: 700; color: var(--apl-ink) !important; letter-spacing: -0.008em; text-wrap: balance; }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-blog article.et_pb_post:hover .entry-title a { color: var(--apl-blue-strong) !important; } }
body.ap-light #et-boc .et-l .apl-blog .post-meta, body.ap-light #et-boc .et-l .apl-blog .post-meta a { color: var(--apl-muted); font-family: var(--apl-font); }
body.ap-light #et-boc .et-l .apl-blog .post-content, body.ap-light #et-boc .et-l .apl-blog .post-content-inner, body.ap-light #et-boc .et-l .apl-blog .post-content-inner p { color: var(--apl-text); font-family: var(--apl-font); font-size: 0.97rem; line-height: 1.6; }
body.ap-light #et-boc .et-l .apl-blog .more-link { color: var(--apl-blue-strong); border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; text-transform: none; min-height: 44px; display: inline-flex; align-items: center; }
body.ap-light #et-boc .et-l .apl-blog .entry-featured-image-url { background: var(--apl-tint-2); }
body.ap-light #et-boc .et-l .apl-blog .pagination a {
display: inline-flex; align-items: center; min-height: 50px; padding: 0.8rem 1.55rem; border-radius: 999px; border: 1px solid var(--apl-line-strong); background: #fff;
color: var(--apl-ink); font-family: var(--apl-font); font-weight: 600; text-decoration: none; transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-blog .pagination a:hover { background: var(--apl-blue-50); border-color: var(--apl-blue); color: var(--apl-blue-strong); } }
body.ap-light #et-boc .et-l .apl-blog .pagination a:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 3px; }
body.ap-light #et-boc .et-l .apl-prose-row { align-items: flex-start; }
body.ap-light #et-boc .et-l .apl-post-meta .et_pb_text_inner { color: var(--apl-muted); font-family: var(--apl-font); }
body.ap-light #et-boc .et-l .apl-post-meta a { color: var(--apl-blue-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-post-meta a:hover { color: #003c9e; text-decoration-thickness: 2px; } }
body.ap-light #et-boc .et-l .apl-featured img { border-radius: var(--apl-radius); box-shadow: var(--apl-shadow-md); background: var(--apl-tint-2); }
body.ap-light #et-boc .et-l .apl-aside { background: #fff; border: 1px solid var(--apl-line); border-radius: var(--apl-radius); box-shadow: var(--apl-shadow-sm); padding: 1.6rem 1.5rem 1.7rem; }
body.ap-light #et-boc .et-l .apl-aside-h .et_pb_text_inner { font-family: var(--apl-font); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apl-blue); }
body.ap-light #et-boc .et-l .apl-aside-contact .et_pb_text_inner a { color: var(--apl-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-aside-contact .et_pb_text_inner a:hover { color: var(--apl-blue-strong); text-decoration: underline; text-underline-offset: 3px; } }
body.ap-light #et-boc .et-l .apl-aside-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
body.ap-light #et-boc .et-l .apl-aside-links li { padding: 0; border-top: 1px solid var(--apl-line); }
body.ap-light #et-boc .et-l .apl-aside-links li:last-child { border-bottom: 1px solid var(--apl-line); }
body.ap-light #et-boc .et-l .apl-aside-links a { display: flex; align-items: center; min-height: 44px; color: var(--apl-text); font-family: var(--apl-font); font-size: 0.97rem; text-decoration: none; border: 0; }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-aside-links a:hover { color: var(--apl-blue-strong); text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 1024px) { body.ap-light #et-boc .et-l .apl-aside { position: static; } }
/* ====================================================================================================================
N. Tool pages: the calculator and the colour visualizer keep their tools' own containers (styled in ap-light-tools.css
and the ap-visualiser plugin); the page around them is plain light bands
==================================================================================================================== */
body.ap-light #et-boc .et-l .ap-vis-tool .ap-shead + .et_pb_row { margin-top: 0 !important; }
/* phone links never break inside the number */
body.ap-light #et-boc .et-l .apl-inner a[href^="tel:"], body.ap-light #et-boc .et-l .apl-hero--page a[href^="tel:"] { white-space: nowrap; }
/* left-aligned headings (splits, before/after and project rows, FAQ columns) fill their first line; the build binds each
heading's last two words, so no line ends with one word. Centred section heads keep balanced lines (ap-light.css). */
body.ap-light #et-boc .et-l .apl-split-copy h2, body.ap-light #et-boc .et-l .apl-inner .ap-ba-copy h2, body.ap-light #et-boc .et-l .apl-inner .ap-ba-copy h3, body.ap-light #et-boc .et-l .apl-inner .ap-faq-row h2, body.ap-light #et-boc .et-l .apl-why-copy h2, body.ap-light #et-boc .et-l .apl-pair h3 { text-wrap: pretty !important; }
/* phones: the hero facts run as centred wrapping rows (long items such as "Instant preview on your device" never run off) */
@media (max-width: 640px) {
body.ap-light #et-boc .et-l .apl-hero--page .apl-hero-line { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1.1rem; row-gap: 0.4rem; }
body.ap-light #et-boc .et-l .apl-hero--page .apl-hero-line li { white-space: nowrap; }
}
/* short landscape phones: the H1 uses the full width (one line where it fits) */
@media (max-height: 460px) and (orientation: landscape) { body.ap-light #et-boc .et-l .apl-h1-page h1 { max-width: none; } }
/* phones: H2s at 26 px (24 px below 375 px) and filled lines, so short headings sit on one line and longer ones keep a long
first line; the build binds every heading's last two words, so no line ends with one word */
@media (max-width: 480px) {
body.ap-light #et-boc .et-l .apl-inner .ap-h2 h2, body.ap-light #et-boc .et-l .apl-inner .ap-shead .ap-shead-h2 h2 { font-size: 1.625rem !important; line-height: 1.18; text-wrap: pretty !important; }
body.ap-light #et-boc .et-l .apl-inner .apl-prose h2, body.ap-light #et-boc .et-l .apl-inner .apl-prose h3 { text-wrap: pretty !important; }
}
@media (max-width: 374px) { body.ap-light #et-boc .et-l .apl-inner .ap-h2 h2, body.ap-light #et-boc .et-l .apl-inner .ap-shead .ap-shead-h2 h2 { font-size: 1.5rem !important; } }
/* blog cards: the photo link and "read more" show their own hover (a blue bar under the photo, a deeper blue link) */
body.ap-light #et-boc .et-l .apl-blog a.entry-featured-image-url { display: block; border-bottom: 3px solid transparent; transition: border-color 0.2s; }
@media (hover: hover) {
body.ap-light #et-boc .et-l .apl-blog a.entry-featured-image-url:hover { border-bottom-color: var(--apl-blue); }
body.ap-light #et-boc .et-l .apl-blog .more-link:hover { color: #003c9e; text-decoration-thickness: 2px; }
}
/* in-copy link to the visualizer stays on one line (one hover target) */
body.ap-light #et-boc .et-l .apl-inner .apl-body a[href="/colour-visualizer/"] { white-space: nowrap; }
/* ====================================================================================================================
Owner rules (2026-10-05): full width, heads with actions, CTA cards, legal text in columns
==================================================================================================================== */
/* every inner row spans the header pill's content edges at every width (no centred max-width blocks) */
body.ap-light #et-boc .et-l .apl-inner > .et_pb_row:not(.ap-hero-copy-row):not(.ap-hero-stage-row) { max-width: none !important; }
/* a section head with an action: kicker, H2 and lead on the left, the button on the right (below the head under 768 px) */
body.ap-light #et-boc .et-l .apl-band .ap-shead.apl-head--act { display: flex !important; flex-wrap: nowrap; align-items: flex-end; column-gap: 24px; }
body.ap-light #et-boc .et-l .apl-band .ap-shead.apl-head--act > .apl-head-main { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
body.ap-light #et-boc .et-l .apl-band .ap-shead.apl-head--act > .apl-head-act { flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; }
@media (max-width: 767px) {
body.ap-light #et-boc .et-l .apl-band .ap-shead.apl-head--act { flex-wrap: wrap; row-gap: 18px; }
body.ap-light #et-boc .et-l .apl-band .ap-shead.apl-head--act > .apl-head-act { flex-basis: 100% !important; }
}
/* the CTA card that completes a row of 5 or 7: brand blue, white text, a white pill link */
body.ap-light #et-boc .et-l .apl-fcard.apl-fcard--cta { background: var(--apl-blue); border-color: var(--apl-blue); }
body.ap-light #et-boc .et-l .apl-fcard--cta h3.et_pb_module_header, body.ap-light #et-boc .et-l .apl-fcard--cta .et_pb_blurb_description, body.ap-light #et-boc .et-l .apl-fcard--cta .et_pb_blurb_description p, body.ap-light #et-boc .et-l .apl-fcard--cta .et_pb_blurb_description a { color: #fff !important; }
body.ap-light #et-boc .et-l .apl-fcard--cta .et_pb_blurb_content::before { background-color: rgba(255, 255, 255, 0.16); }
body.ap-light #et-boc .et-l .apl-ic--cta { --ic: url("data:image/svg+xml;utf8,"); }
body.ap-light #et-boc .et-l .apl-fcard--cta a.apl-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 #et-boc .et-l .apl-fcard--cta a.apl-card-cta:hover { background: var(--apl-blue-50); color: var(--apl-blue-strong) !important; } }
body.ap-light #et-boc .et-l .apl-fcard--cta a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* legal text across the full width: the text on the left (no multi-column text), a real photo on the right that stays in
view while the text scrolls; on phones the photo is left out (the hero already shows one) */
body.ap-light #et-boc .et-l .apl-legal-row > .et_pb_column { max-width: none !important; }
body.ap-light #et-boc .et-l .apl-legal-media { position: sticky; top: 116px; align-self: flex-start; }
body.ap-light #et-boc .et-l .apl-legal-img img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--apl-radius-lg); box-shadow: var(--apl-shadow-md); }
@media (max-width: 980px) { body.ap-light #et-boc .et-l .apl-legal-media { display: none !important; } }
/* #example rows: full content width (overrides the dark build's 1440 px block at 1600 px and up) */
body.ap-light #et-boc .et-l #example.apl-inner > .et_pb_row, body.ap-light #et-boc .et-l .apl-inner.ap-projects > .et_pb_row { max-width: none !important; margin-left: auto !important; margin-right: auto !important; }
/* Areas we serve (service pages): the regions as columns of area links */
body.ap-light #et-boc .et-l .apl-areas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
body.ap-light #et-boc .et-l .apl-areas h3 { font-family: var(--apl-font); font-size: 1.05rem; font-weight: 700; color: var(--apl-ink); margin: 0 0 0.6rem; padding: 0; }
body.ap-light #et-boc .et-l .apl-areas h3 a { color: var(--apl-ink); text-decoration: underline; text-decoration-color: var(--apl-line-strong); text-underline-offset: 4px; }
body.ap-light #et-boc .et-l .apl-areas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
body.ap-light #et-boc .et-l .apl-areas li a { display: flex; align-items: center; min-height: 40px; color: var(--apl-blue-strong); font-weight: 600; text-decoration: none; border-top: 1px solid var(--apl-line); }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-areas li a:hover, body.ap-light #et-boc .et-l .apl-areas h3 a:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 1099px) { body.ap-light #et-boc .et-l .apl-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { body.ap-light #et-boc .et-l .apl-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.ap-light #et-boc .et-l .apl-areas li a { min-height: 44px; } }
body.ap-light #et-boc .et-l .apl-depth-text .et_pb_text_inner p { max-width: none; }
/* Inner-page heroes in the old-hero composition (owner 2026-10-05, step 2): the logo's paint mark above a big centred
title (any length, normal case), then the facts line, lead and buttons as on the home hero */
body.ap-light #et-boc .et-l .apl-h1-stack.apl-h1-free h1 { display: flex; flex-direction: column; align-items: center; gap: 0.3em; text-align: center; text-wrap: balance;
font-size: clamp(2.25rem, 2.4vw + 1.15rem, 4.25rem); line-height: 1.06; letter-spacing: -0.02em; }
body.ap-light .apl-h1-stack.apl-h1-free .apl-h1-mark { height: 1.55em; }
body.ap-light .apl-h1-stack.apl-h1-free .apl-h1-title { white-space: normal; text-transform: none; font-weight: 800; max-width: 22ch; }
@media (max-width: 640px) { body.ap-light #et-boc .et-l .apl-h1-stack.apl-h1-free h1 { font-size: 2.1rem; } body.ap-light .apl-h1-stack.apl-h1-free .apl-h1-mark { height: 1.3em; } }
/* Reviews page: the wall now sits on the blue band, so its "Showing N of M" line is white */
body.ap-light #et-boc .et-l .apl-band--blue .ap-rv-shown, body.ap-light #et-boc .et-l .aph-reviews .ap-rv-shown { color: #fff !important; }
/* ==== Final-review fixes (2026-10-06) ==== */
/* old-hero composition for dynamic titles (guides, projects, search): the paint mark beside a normal-case title */
body.ap-light #et-boc .et-l .apl-h1-stack.apl-h1-dyn h1 { --t: clamp(2rem, 1.5vw + 1.3rem, 3.15rem); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.4em; align-items: center; justify-content: center;
text-align: left; font-size: var(--t); line-height: 1.1; letter-spacing: -0.015em; max-width: 1100px; margin: 0 auto; text-wrap: balance; }
body.ap-light .apl-h1-stack.apl-h1-dyn .apl-h1-mark { grid-column: 1; grid-row: 1; height: calc(var(--t) * 2.1); }
body.ap-light .apl-h1-stack.apl-h1-dyn .apl-h1-title { grid-column: 2; grid-row: 1; white-space: normal; text-transform: none; font-weight: 800; }
@media (max-width: 640px) { body.ap-light #et-boc .et-l .apl-h1-stack.apl-h1-dyn h1 { --t: 1.7rem; column-gap: 0.35em; } body.ap-light .apl-h1-stack.apl-h1-dyn .apl-h1-mark { height: calc(var(--t) * 1.8); } }
@media (max-width: 767px) { body.ap-light #et-boc .et-l .apl-hero--dyn { min-height: 0 !important; } }
/* long place name: one unbreakable word, a little smaller on phones so it fits its line */
/* review R3: a heading holding the long name shrinks as a whole (one size per heading), never the name alone */
@media (max-width: 420px) {
body.ap-light #et-boc .et-l :is(h2, h3) :is(.ap-nw-long) { font-size: 1em; }
body.ap-light #et-boc .et-l .ap-kicker .ap-nw-long { font-size: 1em; }
body.ap-light #et-boc .et-l .ap-kicker:has(.ap-nw-long) { zoom: 0.86; }
body.ap-light #et-boc .et-l h1 .ap-nw-long { font-size: 0.86em; letter-spacing: -0.01em; }
}
/* FAQ heads in the narrow sticky column: smaller and balanced, so no word sits alone and the head stays at two lines */
body.ap-light #et-boc .et-l .ap-faq-row .ap-sticky-col .ap-h2 h2 { font-size: clamp(1.6rem, 0.8vw + 1.15rem, 2.15rem); text-wrap: balance; }
/* projects and guides bands (ap-projects markup) keep the same side gutter as every other section on phones */
@media (max-width: 767px) { body.ap-light #et-boc .et-l .app-band .app-band-inner { width: 95%; margin: 0 auto; } }
/* the project and guide aside is not sticky (it is taller than the screen) */
body.ap-light #et-boc .et-l .apl-aside { position: static !important; }
/* a readable measure for long-form text (guides, legal) */
body.ap-light #et-boc .et-l .apl-measure .et_pb_text_inner, body.ap-light #et-boc .et-l .apl-measure.et_pb_post_content, body.ap-light #et-boc .et-l .apl-measure .et_pb_post_content { max-width: 72ch; }
body.ap-light #et-boc .et-l .apl-legal-one > .et_pb_column { width: 100% !important; flex: 1 1 100% !important; }
/* service card titles that link to their page */
body.ap-light #et-boc .et-l .aph-card--link h3.et_pb_module_header a { color: var(--apl-ink); text-decoration: underline; text-decoration-color: var(--apl-line-strong); text-underline-offset: 4px; }
@media (hover: hover) { body.ap-light #et-boc .et-l .aph-card--link h3.et_pb_module_header a:hover { color: var(--apl-blue-strong); text-decoration-color: currentColor; } }
body.ap-light #et-boc .et-l .apl-search-form { display: flex; gap: 10px; max-width: 640px; }
body.ap-light #et-boc .et-l .apl-search-form input[type=search] { flex: 1; min-height: 50px; padding: 0 1rem; border: 1px solid var(--apl-line-strong); border-radius: 999px; font: inherit; font-family: var(--apl-font); }
body.ap-light #et-boc .et-l .apl-search-form button { min-height: 50px; padding: 0 1.5rem; border: 0; border-radius: 999px; background: var(--apl-blue); color: #fff; font-family: var(--apl-font); font-weight: 600; cursor: pointer; }
body.ap-light #et-boc .et-l .apl-search-count { margin: 0.6rem 0 0; color: var(--apl-muted); font-family: var(--apl-font); }
@media (max-width: 480px) { body.ap-light #et-boc .et-l .apl-search-form { flex-direction: column; } body.ap-light #et-boc .et-l .apl-search-form button { width: 100%; } }
/* Contact form (review re-check, 2026-10-06): visible labels above every field (Divi hides them), a required marker, AA text
and clear error states (Divi's own validation adds .et_contact_error; ap-light.js adds an inline message and aria-invalid) */
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field { display: flex; flex-direction: column; gap: 6px; }
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_form_label { display: block !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; margin: 0 !important; overflow: visible !important;
font-family: var(--apl-font); font-size: 0.95rem; font-weight: 700; color: var(--apl-ink); line-height: 1.3; }
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field:has([data-required_mark="required"]) > .et_pb_contact_form_label::after { content: " *"; color: #b3261e; }
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_options_title { display: none !important; }
body.ap-light #et-boc .et-l .apl-form .input::placeholder, body.ap-light #et-boc .et-l .apl-form textarea::placeholder { color: #5b6577 !important; }
body.ap-light #et-boc .et-l .apl-form .input.et_contact_error, body.ap-light #et-boc .et-l .apl-form textarea.et_contact_error, body.ap-light #et-boc .et-l .apl-form select.et_contact_error,
body.ap-light #et-boc .et-l .apl-form [aria-invalid="true"] { border-color: #b3261e !important; box-shadow: 0 0 0 1px #b3261e inset; background: #fff8f7 !important; }
body.ap-light #et-boc .et-l .apl-form .apl-field-error { margin: 0; color: #b3261e; font-family: var(--apl-font); font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
body.ap-light #et-boc .et-l .apl-form .et-pb-contact-message ul, body.ap-light #et-boc .et-l .apl-form .et-pb-contact-message li { color: #b3261e; }
body.ap-light #et-boc .et-l .apl-form-required-note { margin: 0 0 0.25rem; color: var(--apl-text); font-family: var(--apl-font); font-size: 0.9rem; }
body.ap-light #et-boc .et-l .apl-form-required-note span { color: #b3261e; }
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field.et_contact_error .et_pb_contact_field_radio label { border-color: #b3261e !important; }
/* project pages: scope, materials, photos and FAQ run in a full-width row under the article + aside (review R2 N5).
Text keeps the article measure; the photo grid uses the whole row. */
body.ap-light #et-boc .et-l .app-details-row { margin-top: 0 !important; }
/* review R3: the details row uses its full width (no empty strip): scope in 2 columns, materials in 3, a single photo beside its
caption, the FAQ as heading + questions like the site's FAQ bands */
body.ap-light #et-boc .et-l .app-details-row .app-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.ap-light #et-boc .et-l .app-details-row .app-gallery__grid:has(> .app-gallery__item:nth-child(2):last-child),
body.ap-light #et-boc .et-l .app-details-row .app-gallery__grid:has(> .app-gallery__item:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.ap-light #et-boc .et-l .app-details-row .app-gallery__grid:has(> .app-gallery__item:only-child) { grid-template-columns: 1fr; }
body.ap-light #et-boc .et-l .app-details-row .app-gallery__item:only-child { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: center; }
body.ap-light #et-boc .et-l .app-details-row .app-gallery__item:only-child figcaption { font-size: 1.0625rem; line-height: 1.6; color: var(--apl-text); max-width: 34ch; }
body.ap-light #et-boc .et-l .app-details-row .app-matlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.ap-light #et-boc .et-l .app-details-row .app-matlist li:last-child:nth-child(odd) { grid-column: auto; }
body.ap-light #et-boc .et-l .app-details-row .app-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 40px; align-items: start; }
body.ap-light #et-boc .et-l .app-details-row .app-faq > h2 { position: sticky; top: 116px; }
@media (max-width: 980px) {
body.ap-light #et-boc .et-l .app-details-row .app-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body.ap-light #et-boc .et-l .app-details-row .app-gallery__grid:has(> .app-gallery__item:only-child) { grid-template-columns: 1fr !important; }
body.ap-light #et-boc .et-l .app-details-row .app-matlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.ap-light #et-boc .et-l .app-details-row .app-faq { grid-template-columns: 1fr; }
body.ap-light #et-boc .et-l .app-details-row .app-faq > h2 { position: static; }
}
@media (max-width: 640px) {
body.ap-light #et-boc .et-l .app-details-row .app-gallery__grid { grid-template-columns: 1fr !important; }
body.ap-light #et-boc .et-l .app-details-row .app-gallery__item:only-child { grid-template-columns: 1fr; gap: 10px; }
body.ap-light #et-boc .et-l .app-details-row .app-matlist { grid-template-columns: 1fr; }
}
/* review R3 X2: readable measure on wide screens. Article rows stop at 1400 px and centre; body text keeps about 75 characters */
body.ap-light #et-boc .et-l :is(.apl-prose-row, .app-details-row) { max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; }
body.ap-light #et-boc .et-l .apl-prose :is(p, li, h2, h3, h4, blockquote) { max-width: 75ch; }
body.ap-light #et-boc .et-l :is(.aph-prose, .ap-lead, .aph-intro .et_pb_text_inner) p { max-width: 75ch; }
/* ==== Review R2 (2026-10-06) ==== */
/* dynamic-title heroes: mark + title centre as one block, so the title lines up with the centred lead and buttons */
body.ap-light #et-boc .et-l .apl-h1-stack.apl-h1-dyn h1 { width: fit-content; max-width: min(1100px, 100%); }
/* guides: the old-hero look, uppercase title beside the mark, full first screen like the service and area heroes */
body.ap-light #et-boc .et-l .apl-hero--guide .apl-h1-stack.apl-h1-dyn h1 { --t: clamp(2.1rem, 2.2vw + 1.1rem, 3.9rem); line-height: 1.02; letter-spacing: -0.01em; }
body.ap-light .apl-hero--guide .apl-h1-stack.apl-h1-dyn .apl-h1-title { text-transform: uppercase; max-width: 21ch; text-wrap: balance; }
body.ap-light .apl-hero--guide .apl-h1-stack.apl-h1-dyn .apl-h1-mark { height: calc(var(--t) * 1.92); }
@media (max-width: 640px) {
body.ap-light #et-boc .et-l .apl-hero--guide .apl-h1-stack.apl-h1-dyn h1 { --t: 1.6rem; grid-template-columns: auto; justify-items: center; text-align: center; }
body.ap-light .apl-hero--guide .apl-h1-stack.apl-h1-dyn .apl-h1-mark { grid-column: 1; grid-row: 1; height: 56px; margin-bottom: 0.6rem; }
body.ap-light .apl-hero--guide .apl-h1-stack.apl-h1-dyn .apl-h1-title { grid-column: 1; grid-row: 2; }
}
/* Privacy and Terms: a sticky "On this page" list beside one readable column, the pair centred (review R2 N5) */
body.ap-light #et-boc .et-l .apl-legal-toc { max-width: 1120px !important; margin-left: auto !important; margin-right: auto !important; }
body.ap-light #et-boc .et-l .apl-legal-toc > .apl-toc-col { position: sticky; top: 116px; align-self: flex-start; flex: 0 0 280px !important; width: 280px !important; max-width: 280px !important; }
body.ap-light #et-boc .et-l .apl-legal-toc > .et_pb_column:not(.apl-toc-col) { flex: 1 1 0 !important; width: auto !important; max-width: 760px !important; }
body.ap-light #et-boc .et-l .apl-toc { border-left: 3px solid var(--apl-line); padding-left: 1.1rem; }
body.ap-light #et-boc .et-l .apl-toc-h { margin: 0 0 0.6rem; padding: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--apl-ink); }
body.ap-light #et-boc .et-l .apl-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
body.ap-light #et-boc .et-l .apl-toc a { display: block; padding: 0.3rem 0; line-height: 1.35; color: var(--apl-text); text-decoration: none; }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-toc a:hover { color: var(--apl-blue-strong); text-decoration: underline; text-underline-offset: 3px; } }
body.ap-light #et-boc .et-l .apl-toc a:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 2px; }
body.ap-light #et-boc .et-l .ap-legal h2[id] { scroll-margin-top: 120px; }
@media (max-width: 980px) {
body.ap-light #et-boc .et-l .apl-legal-toc { flex-wrap: wrap !important; }
body.ap-light #et-boc .et-l .apl-legal-toc > .apl-toc-col { position: static; flex: 1 1 100% !important; width: 100% !important; max-width: none !important; }
body.ap-light #et-boc .et-l .apl-legal-toc > .et_pb_column:not(.apl-toc-col) { flex: 1 1 100% !important; max-width: none !important; }
body.ap-light #et-boc .et-l .apl-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}
@media (max-width: 560px) { body.ap-light #et-boc .et-l .apl-toc ol { grid-template-columns: 1fr; } }
/* Contact: the facts column runs the full height of the form card, its cards sharing the extra height (review R2 N5) */
@media (min-width: 981px) {
body.ap-light #et-boc .et-l .apl-contact-row { align-items: stretch !important; }
body.ap-light #et-boc .et-l .apl-contact-left { display: flex !important; flex-direction: column; }
body.ap-light #et-boc .et-l .apl-contact-left > .apl-facts { flex: 1 1 auto; }
body.ap-light #et-boc .et-l .apl-contact-left > .apl-facts > .ap-fact { flex: 1 1 0 !important; display: flex !important; align-items: center; }
}
@media (min-width: 981px) { body.ap-light #et-boc .et-l .et_pb_row.apl-legal-row.apl-legal-toc { justify-content: center !important; } }
/* Contact facts: content centred in each stretched card */
@media (min-width: 981px) { body.ap-light #et-boc .et-l .apl-contact-left > .apl-facts > .ap-fact { flex-direction: column; justify-content: center; align-items: stretch; } }
/* project and guide asides follow the reader (review R2 N5: no empty column beside a long article). ap-light.js sets the
top offset so an aside taller than the window sticks by its bottom edge instead */
@media (min-width: 981px) { body.ap-light #et-boc .et-l .apl-prose-row > .apl-aside { position: sticky !important; top: var(--apl-aside-top, 116px); align-self: flex-start; } }
/* review R3: no single word left alone on a heading's last line, site-wide (explicit balance rules still win) */
body.ap-light :is(h1, h2, h3, h4) { text-wrap: pretty; }
/* project heroes on phones: smaller title and tighter stack so the quote button sits in the first screen */
@media (max-width: 420px) {
body.single-project #et-boc .et-l .apl-hero--dyn .apl-h1-stack.apl-h1-dyn h1 { --t: 1.4rem; line-height: 1.12; }
body.single-project #et-boc .et-l .apl-hero--dyn .apl-h1-stack.apl-h1-dyn .apl-h1-mark { height: calc(var(--t) * 1.6); }
}
/* ==== Review R3: contact form in the design system ==== */
/* category: standard radio buttons (a ring that fills when chosen), not chips */
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_radio label {
position: relative; min-height: 44px; padding: 0.4rem 1.2rem 0.4rem 2rem !important; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important;
font-weight: 500; font-size: 1rem; color: var(--apl-ink) !important;
}
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_radio label::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 2px solid var(--apl-muted); background: #fff; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; }
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_radio input:checked + label { background: none !important; box-shadow: none; color: var(--apl-ink) !important; }
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_radio input:checked + label::before { border-color: var(--apl-blue); box-shadow: inset 0 0 0 4px #fff; background: var(--apl-blue); }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_radio label:hover { background: none !important; color: var(--apl-blue-strong) !important; } body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field_radio label:hover::before { border-color: var(--apl-blue); } }
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field.et_contact_error .et_pb_contact_field_radio label { border: 0 !important; }
body.ap-light #et-boc .et-l .apl-form .et_pb_contact_field.et_contact_error .et_pb_contact_field_radio label::before { border-color: #b3261e; }
/* full-size Submit, the site's primary button */
body.ap-light #page-container #et-boc .et-l .apl-form .et_pb_contact_submit.et_pb_button { min-height: 56px; min-width: 200px; padding: 0.95rem 2.2rem !important; font-size: 1.0625rem !important; font-weight: 700 !important; }
@media (max-width: 640px) { body.ap-light #page-container #et-boc .et-l .apl-form .et_pb_contact_submit.et_pb_button { width: 100%; } body.ap-light #et-boc .et-l .apl-form .et_contact_bottom_container { width: 100%; } }
/* each error once: the inline message under the field; Divi's "Please, fill in the following fields" list is not shown
(its success message, which has no list, still shows) */
body.ap-light #et-boc .et-l .apl-form .et-pb-contact-message:has(ul) { display: none !important; }
/* services without their own page: the card and the tile say "Ask about it" (they open Contact) */
body.ap-light #et-boc .et-l .apl-sl-ask { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 600; color: var(--apl-muted); }
body.ap-light #et-boc .et-l .aph-tile--ask .aph-tile-ask, body.ap-light #et-boc .et-l .aph-tile--ask .et_pb_blurb_description .aph-tile-ask { display: inline-block; margin: 6px 0 0; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--apl-ink) !important; font-size: 0.8125rem; font-weight: 700; line-height: 1.5; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile.aph-tile--ask .et_pb_blurb_description { display: block; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile.aph-tile--ask .et_pb_blurb_description p { padding: 0; }
@media (max-width: 420px) {
body.single-project #et-boc .et-l .apl-hero--dyn .apl-h1-stack.apl-h1-dyn h1 { font-size: 1.4rem !important; }
body.single-project #et-boc .et-l .apl-hero--dyn .app-hero-lead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.single-project #et-boc .et-l .apl-hero--dyn { padding-top: 92px !important; }
}
@media (max-width: 420px) { body.single-project.ap-light #page-container #et-boc .et-l .ap-hero .apl-h1-page h1, body.single-project.ap-light #page-container #et-boc .et-l .ap-hero .apl-h1-page h1 .apl-h1-title { font-size: 1.4rem !important; line-height: 1.15 !important; } }
/* review R3 X2: every running paragraph keeps a readable measure on wide screens (cards, FAQ answers, project details) */
body.ap-light #et-main-area .et_pb_section:not(.apl-hero):not(.ap-hero) :is(p, li) { max-width: 75ch; }
body.ap-light #et-main-area .et_pb_section:not(.apl-hero):not(.ap-hero) :is(.ap-shead, .apl-head--center, .ap-cta-panel) p { max-width: none; }
/* centred lines keep their centring under the measure cap */
body.ap-light #et-main-area .et_pb_section:not(.apl-hero):not(.ap-hero) p:is([style*="center"], .has-text-align-center) { margin-left: auto; margin-right: auto; }
body.ap-light #et-main-area :is(.ap-map-note p, p.ap-foot-line) { margin-left: auto; margin-right: auto; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-tile.aph-tile--ask .et_pb_blurb_description { overflow: visible !important; height: auto !important; max-height: none !important; line-height: 1.4 !important; margin-top: 6px; }
body.ap-light #et-boc .et-l .aph-tile--ask .et_pb_blurb_description .aph-tile-ask { margin: 0 !important; padding: 4px 11px !important; line-height: 1.3 !important; font-size: 0.8125rem !important; }
/* small phones: the closing panel's heading a step smaller, so a two-word place name fits one line (review R3, Downtown) */
@media (max-width: 360px) { body.ap-light #page-container #et-boc .et-l .ap-cta-panel .ap-h2 h2 { font-size: 1.5rem !important; } }
/* footer: no measure cap (review R4 N5); the region strip is one centred row on desktops, separators only between items */
body.ap-light #et-main-area .apl-footer :is(p, li), body.ap-light .apl-footer :is(p, li) { max-width: none; }
body.ap-light #et-boc .et-l .apl-footer .ap-foot-regions { max-width: none !important; width: 100%; margin-left: auto !important; margin-right: auto !important; justify-content: center; }
@media (min-width: 900px) { body.ap-light #et-boc .et-l .apl-footer .ap-foot-regions { flex-wrap: nowrap; } }
/* guide cards (blog, categories, service and area pages): every card's title takes two lines' height and its excerpt fills the
four-line clamp, so text in a row ends level (review R4) */
@media (min-width: 641px) {
body.ap-light #et-boc .et-l .ap-guides .app-card__title { min-height: calc(2 * 1.25em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.ap-light #et-boc .et-l .ap-guides .app-card__text { min-height: calc(4 * 1.6em); }
}
/* /projects/: the before/after band follows the project list without a double gap; each slider's text sits centred beside it
(review R4) */
body.ap-light.page-id-701 #et-boc .et-l #before-after { padding-top: 24px !important; }
@media (min-width: 981px) { body.ap-light.page-id-701 #et-boc .et-l #before-after .apl-ba-split { align-items: center !important; } body.ap-light.page-id-701 #et-boc .et-l #before-after .apl-ba-split > .et_pb_column { align-self: center !important; } }
/* review R4: H2s holding Whitchurch-Stouffville keep the H2 size wherever the name fits a line (375 px and up); only the
narrowest phones scale the whole heading a little */
@media (max-width: 374px) { body.ap-light #et-boc .et-l :is(h2, h3):has(.ap-nw-long) { zoom: 0.92; } }
/* ==== Review R5 ==== */
/* small phones: FAQ questions a step smaller so a bound place name and its last word fit one line (no lone "?") */
@media (max-width: 360px) { body.ap-light #et-boc .et-l .et_pb_toggle_title, body.ap-light #et-boc .et-l .et_pb_toggle .et_pb_toggle_title { font-size: 0.95rem !important; } }
/* closing panel lead: readable measure on wide screens */
body.ap-light #et-main-area .ap-cta-panel p { max-width: 70ch; }
/* "Ask about it" never splits */
body.ap-light #et-boc .et-l .apl-sl-ask, body.ap-light #et-boc .et-l .aph-tile-ask { white-space: nowrap; }
/* search: the pagination button centred */
body.ap-light #et-boc .et-l .ap-blog .pagination, body.ap-light #et-boc .et-l .ap-blog .wp-pagenavi, body.ap-light #et-boc .et-l .et_pb_blog_grid_wrapper + .pagination { display: flex; justify-content: center; text-align: center; float: none; }
body.ap-light #et-boc .et-l .ap-blog .pagination > div { float: none !important; }
body.ap-light #et-boc .et-l .apl-sl-t { display: block; min-width: 0; }
body.ap-light #et-boc .et-l .pagination .alignleft, body.ap-light #et-boc .et-l .pagination .alignright { float: none !important; }
body.ap-light #et-boc .et-l .pagination.clearfix { display: flex; justify-content: center; }
/* short landscape phones: the home hero's buttons stay inside the first screen (review R5: 844 x 390) */
@media (max-height: 430px) and (orientation: landscape) {
body.ap-light.home #et-boc .et-l .apl-hero, body.ap-light.home #et-boc .et-l .ap-hero { padding-top: 76px !important; padding-bottom: 20px !important; }
body.ap-light.home #et-boc .et-l .apl-hero .ap-hero-copy { row-gap: 10px !important; gap: 10px !important; }
}
/* ==== Review R6 ==== */
body.ap-light #et-boc .et-l .apl-nowrap { white-space: nowrap; }
/* short landscape phones: hero lead centred under the headline, not clamped */
@media (max-height: 430px) and (orientation: landscape) {
body.ap-light #et-boc .et-l .apl-hero .apl-hero-lead, body.ap-light #et-boc .et-l .apl-hero .ap-lead { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: 60ch !important; }
body.ap-light #et-boc .et-l .apl-hero .apl-hero-lead .et_pb_text_inner, body.ap-light #et-boc .et-l .apl-hero .apl-hero-lead p { -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important; max-height: none !important; text-align: center !important; margin-left: auto; margin-right: auto; }
}
/* search "More results": the pagination row centred as a whole */
body.ap-light.search #et-boc .et-l .pagination.clearfix { justify-content: center !important; width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
body.ap-light.search #et-boc .et-l .pagination.clearfix .alignleft, body.ap-light.search #et-boc .et-l .pagination.clearfix .alignright { margin: 0 auto !important; }
body.ap-light #et-boc .et-l .pagination.clearfix > .alignright:empty, body.ap-light #et-boc .et-l .pagination.clearfix > .alignleft:empty { display: none !important; }
body.ap-light #et-boc .et-l .pagination.clearfix > div { margin: 0 !important; text-align: center; }
body.ap-light #et-boc .et-l .pagination.clearfix { gap: 16px; }
body.ap-light #et-boc .et-l .pagination.clearfix > div:not(:has(a)) { display: none !important; }
body.ap-light #et-boc .et-l .pagination.clearfix::after, body.ap-light #et-boc .et-l .pagination.clearfix::before { display: none !important; }