/* All Painting light theme (ap-light). Loaded after ap-bold.css on every page.
   - Header and footer: light chrome on every page (.apl-header, .apl-footer).
   - Body components: only on pages that opt in (body.ap-light, post meta _ap_theme = light).
   On light pages the dark system's tokens are remapped, so components written against --ap-* read correctly; the rules
   below then give each component its light design. Spec: DESIGN-SYSTEM.md. */

:root {
  --apl-bg: #ffffff; --apl-tint: #f5f8fc; --apl-tint-2: #eef3f9;
  --apl-line: #e2e8f0; --apl-line-strong: #c9d3e1;
  --apl-ink: #101828; --apl-text: #344054; --apl-muted: #5b6577;
  --apl-blue: #0a66f2; --apl-blue-strong: #0050c8; --apl-blue-50: #eaf2ff; --apl-blue-100: #d6e6ff;
  --apl-navy: #0b1a33; --apl-on-navy: #c5cfdf;
  --apl-red: #d90a2e; --apl-green: #42ca54;
  --apl-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --apl-radius: 16px; --apl-radius-lg: 24px; --apl-radius-sm: 12px;
  --apl-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --apl-shadow-md: 0 10px 30px rgba(16, 24, 40, 0.08);
  --apl-shadow-lg: 0 22px 50px rgba(16, 24, 40, 0.14);
  --apl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --apl-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9.5'/><path d='M7.8 12.3l2.8 2.8 5.6-5.8'/></svg>");
  --apl-swash: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'><path d='M4 15C40 8 92 6 150 8s104 3 146 0c3 3 2 7-2 9-40 4-96 2-150 3S46 22 8 22c-6 0-8-5-4-7z'/></svg>");
}

/* ====================================================================================================================
   1. Light page tokens: the dark system's variables, remapped
   ==================================================================================================================== */
body.ap-light {
  --ap-ink: #ffffff; --ap-ink-2: #f5f8fc; --ap-ink-3: #eef3f9;
  --ap-line: #e2e8f0;
  --ap-paper: #f5f8fc; --ap-paper-2: #eaf0f7;
  --ap-text: #101828; --ap-soft: #344054; --ap-muted: #5b6577;
  --ap-on-paper: #101828; --ap-on-paper-soft: #344054; --ap-on-paper-muted: #5b6577;
  --ap-blue: #0a66f2; --ap-blue-on-ink: #0050c8;
  --ap-display: var(--apl-font); --ap-body: var(--apl-font);
  --ap-radius: 16px; --ap-radius-sm: 12px;
  background: #fff; color: var(--apl-text); font-family: var(--apl-font); font-size: 17px;
}
/* Dark surfaces inside a light page (hero over video, the blue band, the CTA panel) carry their own token set */
body.ap-light #et-boc .et-l .apl-hero {
  --ap-text: #ffffff; --ap-soft: #e9edf3; --ap-muted: #d3dae6; --ap-line: rgba(255, 255, 255, 0.2);
  --ap-ink: #0b1a33; --ap-ink-2: #0b1a33; --ap-ink-3: rgba(255, 255, 255, 0.12); --ap-paper: #ffffff;
}
body.ap-light #et-boc .et-l .apl-band--blue, body.ap-light #et-boc .et-l .apl-cta-panel {
  --ap-text: #ffffff; --ap-soft: #ffffff; --ap-muted: #f2f7ff; --ap-line: rgba(255, 255, 255, 0.3);
  --ap-paper: #ffffff; --ap-blue-on-ink: #ffffff;
}

/* ====================================================================================================================
   2. Type
   ==================================================================================================================== */
body.ap-light #et-boc .et-l h1, body.ap-light #et-boc .et-l h2, body.ap-light #et-boc .et-l h3, body.ap-light #et-boc .et-l h4 { font-family: var(--apl-font); font-weight: 700; }
body.ap-light #et-boc .et-l .ap-h1 h1 { font-size: clamp(2.375rem, 2.15vw + 1.3rem, 4.1rem); line-height: 1.08; letter-spacing: -0.022em; }
body.ap-light #et-boc .et-l .ap-h2 h2, body.ap-light #et-boc .et-l .ap-h2 h1 { font-size: clamp(1.875rem, 1.15vw + 1.15rem, 2.55rem); line-height: 1.16; letter-spacing: -0.018em; }
@media (max-width: 480px) { body.ap-light #et-boc .et-l .ap-h2 h2, body.ap-light #et-boc .et-l .ap-shead .ap-shead-h2 h2 { font-size: 1.75rem; text-wrap: pretty; } }
body.ap-light #et-boc .et-l .ap-h3 h3, body.ap-light #et-boc .et-l .ap-h3 h2 { font-size: clamp(1.125rem, 0.45vw + 0.9rem, 1.375rem); line-height: 1.25; letter-spacing: -0.006em; }
body.ap-light #et-boc .et-l .et_pb_text_inner, body.ap-light #et-boc .et-l .et_pb_blurb_description { font-family: var(--apl-font); }
body.ap-light #et-boc .et-l .ap-lead .et_pb_text_inner { line-height: 1.6; }
body.ap-light #et-boc .et-l .ap-lead a, body.ap-light #et-boc .et-l .ap-body a { color: var(--apl-blue); text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { body.ap-light #et-boc .et-l .ap-lead a:hover, body.ap-light #et-boc .et-l .ap-body a:hover { color: var(--apl-blue-strong); text-decoration-thickness: 2px; } }
body.ap-light .ap-bold :focus-visible, body.ap-light :focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 3px; }
body.ap-light #et-boc .et-l .apl-hero :focus-visible, body.ap-light #et-boc .et-l .apl-band--blue :focus-visible, body.ap-light #et-boc .et-l .apl-cta-panel :focus-visible { outline-color: #fff; }

/* Kicker: blue label with a small brand pill (red / green / blue as in the logo); white on dark and blue surfaces */
body.ap-light #et-boc .et-l .ap-kicker .et_pb_text_inner { font-family: var(--apl-font); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--apl-blue); gap: 0.65rem; }
body.ap-light #et-boc .et-l .ap-kicker .et_pb_text_inner::before { width: 22px; height: 8px; border-radius: 999px; }
body.ap-light #et-boc .et-l .apl-hero .ap-kicker .et_pb_text_inner,
body.ap-light #et-boc .et-l .apl-band--blue .ap-kicker .et_pb_text_inner,
body.ap-light #et-boc .et-l .apl-cta-panel .ap-kicker .et_pb_text_inner { color: #fff; }
body.ap-light #et-boc .et-l .ap-kicker--paper { --paint: #ffffff; }

/* Highlighted phrases: a hand-drawn brand swash under the words (no solid block) */
body.ap-light .painted { color: inherit; }
body.ap-light .painted::before {
  inset: auto -0.06em -0.1em -0.04em; height: 0.26em; z-index: -1;
  -webkit-mask: var(--apl-swash) center / 100% 100% no-repeat; mask: var(--apl-swash) center / 100% 100% no-repeat;
}
body.ap-light .painted.red, body.ap-light .painted.blue { color: inherit; }
body.ap-light .painted.green { color: inherit; --paint: var(--apl-green); }
body.ap-light .painted.blue { --paint: #2f80ff; }
body.ap-light #et-boc .et-l .ap-h1 h1 > .painted:first-child::before { left: -0.02em; }

/* ====================================================================================================================
   3. Buttons (every page: the header and footer use them too). Pills; each hover keeps or raises contrast.
   ==================================================================================================================== */
body.ap-bold #et-boc .et-l .apl-btn.et_pb_button, body.ap-bold #et-boc .et-l .apl-btn .et_pb_button,
body.ap-bold .ap-btn-like.apl-like {
  position: relative; display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 50px; padding: 0.8rem 1.55rem !important; border-radius: 999px !important; border: 1px solid transparent !important;
  font-family: var(--apl-font) !important; font-weight: 600 !important; font-size: 1rem !important; line-height: 1.15 !important; letter-spacing: 0 !important;
  text-decoration: none; white-space: nowrap; background-image: none !important; box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--apl-ease) !important;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
body.ap-bold #et-boc .et-l .apl-btn .et_pb_button::after, body.ap-bold #et-boc .et-l .apl-btn.et_pb_button::after,
body.ap-bold #et-boc .et-l .apl-btn .et_pb_button::before, body.ap-bold #et-boc .et-l .apl-btn.et_pb_button::before { display: none !important; }
body.ap-bold #et-boc .et-l .apl-btn .et_pb_button:active, body.ap-bold #et-boc .et-l .apl-btn.et_pb_button:active { transform: translateY(1px); }
/* primary: blue, white label 5.0:1 -> hover #0050c8, 7.0:1 */
body.ap-bold #et-boc .et-l .apl-btn--primary .et_pb_button, body.ap-bold #et-boc .et-l .apl-btn--primary.et_pb_button { background-color: var(--apl-blue) !important; color: #fff !important; border-color: var(--apl-blue) !important; }
/* secondary: white with a grey hairline, ink label 17.8:1 -> hover #eaf2ff with #0050c8 label, 6.3:1 */
body.ap-bold #et-boc .et-l .apl-btn--secondary .et_pb_button, body.ap-bold #et-boc .et-l .apl-btn--secondary.et_pb_button,
body.ap-light .ap-btn-like.ap-vis-reset { background-color: #fff !important; color: var(--apl-ink) !important; border-color: var(--apl-line-strong) !important; }
/* white (on the hero, the blue band and the CTA panel): ink label 17.8:1 -> hover #eaf2ff, ink label 15.8:1 */
body.ap-bold #et-boc .et-l .apl-btn--white .et_pb_button, body.ap-bold #et-boc .et-l .apl-btn--white.et_pb_button { background-color: #fff !important; color: var(--apl-ink) !important; border-color: #fff !important; }
/* glass (outline on dark or blue): white label; hover adds a white 16% fill (contrast only rises on the dark surfaces) */
body.ap-bold #et-boc .et-l .apl-btn--glass .et_pb_button, body.ap-bold #et-boc .et-l .apl-btn--glass.et_pb_button { background-color: rgba(255, 255, 255, 0.08) !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.62) !important; }
body.ap-bold #et-boc .et-l .apl-band--blue .apl-btn--glass .et_pb_button, body.ap-bold #et-boc .et-l .apl-band--blue .apl-btn--glass.et_pb_button,
body.ap-bold #et-boc .et-l .apl-cta-panel .apl-btn--glass .et_pb_button, body.ap-bold #et-boc .et-l .apl-cta-panel .apl-btn--glass.et_pb_button { background-color: transparent !important; border-color: #fff !important; }
@media (hover: hover) {
  body.ap-bold #et-boc .et-l .apl-btn--primary .et_pb_button:hover, body.ap-bold #et-boc .et-l .apl-btn--primary.et_pb_button:hover { background-color: 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-bold #et-boc .et-l .apl-btn--secondary .et_pb_button:hover, body.ap-bold #et-boc .et-l .apl-btn--secondary.et_pb_button:hover,
  body.ap-light .ap-btn-like.ap-vis-reset:hover { background-color: var(--apl-blue-50) !important; color: var(--apl-blue-strong) !important; border-color: var(--apl-blue) !important; }
  body.ap-bold #et-boc .et-l .apl-btn--white .et_pb_button:hover, body.ap-bold #et-boc .et-l .apl-btn--white.et_pb_button:hover { background-color: var(--apl-blue-50) !important; border-color: var(--apl-blue-50) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); }
  body.ap-bold #et-boc .et-l .apl-btn--glass .et_pb_button:hover, body.ap-bold #et-boc .et-l .apl-btn--glass.et_pb_button:hover { background-color: rgba(255, 255, 255, 0.18) !important; border-color: #fff !important; }
  body.ap-bold #et-boc .et-l .apl-band--blue .apl-btn--glass .et_pb_button:hover, body.ap-bold #et-boc .et-l .apl-band--blue .apl-btn--glass.et_pb_button:hover,
  body.ap-bold #et-boc .et-l .apl-cta-panel .apl-btn--glass .et_pb_button:hover, body.ap-bold #et-boc .et-l .apl-cta-panel .apl-btn--glass.et_pb_button:hover { background-color: var(--apl-blue-strong) !important; }
}
body.ap-bold #et-boc .et-l .apl-btn .et_pb_button:focus-visible, body.ap-bold #et-boc .et-l .apl-btn.et_pb_button:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 3px; }
body.ap-bold #et-boc .et-l .apl-hero .apl-btn .et_pb_button:focus-visible, body.ap-bold #et-boc .et-l .apl-hero .apl-btn.et_pb_button:focus-visible,
body.ap-bold #et-boc .et-l .apl-band--blue .apl-btn .et_pb_button:focus-visible, body.ap-bold #et-boc .et-l .apl-band--blue .apl-btn.et_pb_button:focus-visible,
body.ap-bold #et-boc .et-l .apl-cta-panel .apl-btn .et_pb_button:focus-visible, body.ap-bold #et-boc .et-l .apl-cta-panel .apl-btn.et_pb_button:focus-visible { outline-color: #fff; }
body.ap-bold #et-boc .et-l .apl-cta-pair { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
body.ap-bold #et-boc .et-l .apl-cta-pair .et_pb_button_module_wrapper { margin: 0; width: auto; }

/* ====================================================================================================================
   4. Header (every page): the old site's floating frosted pill, pale silver, identical at the top and after scrolling.
   Old (ap.server-1, measured): 18 px from the top, radius 16, rgba(165,158,158,.32) + 10 px blur, which reads #e2e0e0 over white,
   with white menu text (about 1.5:1 over white content). Here the pill is the same pale silver, rgba(226,224,228,.9) + 14 px blur
   (#e3e1e5 over white, #cdcbd0 over the darkest video frames), and the text is dark ink (11:1 or more) with a deeper blue
   (#0046b0, 5.2:1 or more) for hover and the current page, so it reads AA over the video, white and tint bands, photos, the blue
   band and the footer. Nothing switches on scroll. Dropdowns and the phone drawer are white with dark text.
   ==================================================================================================================== */
:root { --ap-header-h: 92px; --apl-glass: rgba(226, 224, 228, 0.9); --apl-nav-blue: #0046b0; }
@media (max-width: 1239px) { :root { --ap-header-h: 76px; } }
body.ap-light { --ap-header-h: 92px; }
@media (max-width: 1239px) { body.ap-light { --ap-header-h: 76px; } }
body.ap-bold #et-boc .et-l .ap-header.apl-header, body.ap-bold #et-boc .et-l .ap-header.apl-header.is-solid {
  --ap-display: var(--apl-font); --ap-body: var(--apl-font);
  height: calc(var(--ap-header-h) + 12px); background: transparent !important; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.ap-bold #et-boc .et-l .apl-header .ap-header-row.apl-pill {
  height: 76px; margin: 16px auto 0 !important; padding: 0 12px 0 20px !important; box-sizing: border-box;
  border-radius: 16px; background: var(--apl-glass); border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(4, 10, 24, 0.12); pointer-events: auto; transition: box-shadow 0.3s ease;
}
/* brand */
body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image { width: 50px; }
body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image img { width: 50px; height: 54px; }
body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_text_inner, body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_text_inner a { font-family: var(--apl-font); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--apl-ink); }
body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_text_inner a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color 0.2s; }
body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image a { display: block; transition: filter 0.25s ease; }
@media (hover: hover) {
  body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_text_inner a:hover { text-decoration-color: var(--apl-blue); }
  /* client round 2026-10-08: no tilt or scale on the logo, only a soft glow (white over the glassy header, blue on the silver one) */
  body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image a:hover { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.32)); }
  body.ap-bold #et-boc .et-l .apl-header.is-solid .ap-brand .et_pb_image a:hover { filter: drop-shadow(0 0 7px rgba(1, 111, 255, 0.35)); }
}
/* menu: dark ink, blue for hover and the current page, with a blue bar */
body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu { gap: 1.6rem; }
body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li > a { font-family: var(--apl-font); font-weight: 600; font-size: 0.95rem; color: var(--apl-ink); padding-top: 0.45rem; padding-bottom: 0.45rem; opacity: 1; }
body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li:hover > a, body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li > a:focus-visible, body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li.current-menu-item > a { color: var(--apl-nav-blue); }
body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li > a::after { height: 2px; bottom: -2px; background: var(--apl-nav-blue); }
/* dropdowns: white cards with dark text */
body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav ul.et-menu li ul.sub-menu { background: #fff !important; border: 1px solid var(--apl-line) !important; border-radius: 14px; padding: 0.45rem; width: 300px; box-shadow: var(--apl-shadow-lg); top: calc(100% + 22px); }
body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav ul.et-menu li ul.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav ul.et-menu li ul.sub-menu li a { font-family: var(--apl-font); font-weight: 600; font-size: 0.95rem; color: var(--apl-text) !important; border-radius: 10px; padding: 0.6rem 0.85rem; }
body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav ul.et-menu li ul.sub-menu li a:hover, body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav ul.et-menu li ul.sub-menu li a:focus-visible { background: var(--apl-blue-50) !important; color: var(--apl-blue-strong) !important; padding-left: 1rem; }
body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav ul.et-menu li ul.sub-menu li.current-menu-item > a { color: var(--apl-blue-strong) !important; }
/* call link + the blue quote pill (with the old pill's arrow) */
body.ap-bold #et-boc .et-l .apl-header .ap-call .et_pb_text_inner a { color: var(--apl-ink); font-family: var(--apl-font); font-weight: 700; font-size: 0.97rem; padding: 0.55rem 0.8rem; border-radius: 999px; }
body.ap-bold #et-boc .et-l .apl-header .ap-call .et_pb_text_inner a:hover { background: #fff; color: var(--apl-nav-blue); }
body.ap-bold #et-boc .et-l .apl-header .apl-btn--header .et_pb_button, body.ap-bold #et-boc .et-l .apl-header .apl-btn--header.et_pb_button { min-height: 46px; padding: 0.6rem 1.25rem !important; font-size: 0.95rem !important; background-color: var(--apl-blue) !important; color: #fff !important; border-color: var(--apl-blue) !important; }
@media (hover: hover) { body.ap-bold #et-boc .et-l .apl-header .apl-btn--header .et_pb_button:hover, body.ap-bold #et-boc .et-l .apl-header .apl-btn--header.et_pb_button:hover { background-color: var(--apl-blue-strong) !important; border-color: var(--apl-blue-strong) !important; } }
body.ap-bold #et-boc .et-l .apl-header :focus-visible, body.ap-bold #et-boc .et-l .apl-header .apl-btn--header .et_pb_button:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 3px; }
@media (min-width: 1240px) and (max-width: 1439px) {
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu { gap: 1.15rem; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li > a { font-size: 0.93rem; }
  body.ap-bold #et-boc .et-l .apl-header .ap-call .et_pb_text_inner a { width: 44px; height: 44px; padding: 0; justify-content: center; border: 1px solid var(--apl-line-strong); }
}

/* Below 1240 px: the same pill (64 px), the hamburger in a 44 px circle, the drawer a white sheet under the pill. The pill's
   backdrop-filter makes it the containing block, so the sheet is placed against the pill and shares its edges. */
@media (max-width: 1239px) {
  body.ap-bold #et-boc .et-l .apl-header .ap-header-row.apl-pill { height: 64px; margin-top: 12px !important; padding: 0 8px 0 14px !important; border-radius: 16px; }
  body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image, body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image a { width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image img { width: 42px; height: 46px; }
  body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_text_inner, body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_text_inner a { font-size: 1.1rem; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .mobile_menu_bar { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--apl-line-strong); color: var(--apl-ink); background: #fff; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .mobile_menu_bar::before { color: var(--apl-ink); font-size: 26px; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu {
    position: fixed; top: 72px; left: -1px; right: -1px; bottom: auto;
    height: calc(100vh - 100px) !important; height: calc(100dvh - 100px) !important;
    padding: 0.75rem 1.25rem 1.5rem; background: #fff !important;
    border: 1px solid var(--apl-line); border-radius: 18px; box-shadow: var(--apl-shadow-lg);
  }
  body.ap-bold.admin-bar #et-boc .et-l .apl-header .ap-nav .et_mobile_menu { top: 72px; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu ul.sub-menu, body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu ul.sub-menu li { background: transparent !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu li a, body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu li .ap-drawer-parent { font-family: var(--apl-font); font-weight: 700; font-size: 1.3rem; color: var(--apl-ink) !important; border-color: var(--apl-line) !important; letter-spacing: -0.01em; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu li.menu-item-has-children.visible > ul.sub-menu li a { font-family: var(--apl-font); font-weight: 600; font-size: 1.05rem; color: var(--apl-text) !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu li.menu-item-has-children > .mobile-toggle::after { color: var(--apl-blue-strong); background: var(--apl-blue-50); }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu .ap-drawer-info { color: var(--apl-muted); }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu .ap-drawer-info a { font-family: var(--apl-font); font-weight: 700; font-size: 1.2rem; color: var(--apl-ink) !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu .ap-drawer-cta a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.7rem 1.4rem; border-radius: 999px; font-family: var(--apl-font); font-weight: 600; font-size: 1rem; border: 1px solid var(--apl-line-strong) !important; background: #fff !important; color: var(--apl-ink) !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu .ap-drawer-cta a.et_pb_button, body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu .ap-drawer-cta a:first-child { background: var(--apl-blue) !important; color: #fff !important; border-color: var(--apl-blue) !important; }
  body.ap-bold #et-boc .et-l .apl-header .apl-btn--header .et_pb_button, body.ap-bold #et-boc .et-l .apl-header .apl-btn--header.et_pb_button { min-height: 44px; padding: 0.5rem 1rem !important; font-size: 0.92rem !important; }
}
/* narrow phones: tighter paddings and quote pill; below 385 px the logo without its wordmark, so logo + quote + menu fit from 320 px
   with 44 px targets */
@media (max-width: 419px) {
  body.ap-bold #et-boc .et-l .apl-header .ap-header-row.apl-pill { padding: 0 6px 0 10px !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image, body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image a { width: 44px; min-height: 44px; display: flex; align-items: center; }
  body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image img { width: 40px; height: 44px; }
  body.ap-bold #et-boc .et-l .apl-header .ap-header-cta { gap: 6px; }
  body.ap-bold #et-boc .et-l .apl-header .apl-btn--header .et_pb_button, body.ap-bold #et-boc .et-l .apl-header .apl-btn--header.et_pb_button { padding: 0.5rem 0.95rem !important; font-size: 0.9rem !important; gap: 0.4rem; }
  body.ap-bold #et-boc .et-l .apl-header .ap-header-row { gap: 6px !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-brand { gap: 6px; }
}
@media (max-width: 384px) { body.ap-bold #et-boc .et-l .apl-header .ap-brand .ap-brand-name { display: none; } }
/* where the wordmark does not fit (384 px and below), its space holds a 44 px call button instead of empty silver */
@media (max-width: 384px) {
  body.ap-bold #et-boc .et-l .apl-header .ap-call { display: block; }
  body.ap-bold #et-boc .et-l .apl-header .ap-call .ap-call-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.ap-bold #et-boc .et-l .apl-header .ap-call .et_pb_text_inner a { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid var(--apl-line-strong); background: #fff; }
}
/* TOP STATE (owner, 2026-10-05): at the top of the page, over the full-height hero, the header is the old site's glass pill:
   rgba(165,158,158,.32) + 10 px blur, no border or shadow, white menu text and a white quote pill with dark text (measured on
   ap.server-1.ca; its blue #016fff phone menu icon is white here, because blue measures 1.3:1 on the glass). Once the page scrolls past 80 px (or the drawer opens) ap-bold.js
   adds .is-solid and the pill turns into the pale silver pill with dark text above. Same size in both states; colours, the
   tint and the blur fade over 250 ms. Dropdowns and the drawer stay white. */
:root { --apl-glass-top: rgba(165, 158, 158, 0.32); --apl-glass-top-blur: 10px; }
body.ap-bold #et-boc .et-l .apl-header .ap-header-row.apl-pill { transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* the blur itself is not animated: animating backdrop-filter over the video re-blurs every frame and janks slow phones */
body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_text_inner a, body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li > a, body.ap-bold #et-boc .et-l .apl-header .ap-call .et_pb_text_inner a, body.ap-bold #et-boc .et-l .apl-header .apl-btn--header .et_pb_button, body.ap-bold #et-boc .et-l .apl-header .apl-btn--header.et_pb_button, body.ap-bold #et-boc .et-l .apl-header .ap-nav .mobile_menu_bar, body.ap-bold #et-boc .et-l .apl-header .ap-nav .mobile_menu_bar::before { transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, text-decoration-color 0.2s; }
body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-header-row.apl-pill { background: var(--apl-glass-top); -webkit-backdrop-filter: blur(var(--apl-glass-top-blur)); backdrop-filter: blur(var(--apl-glass-top-blur)); border-color: transparent; box-shadow: none; }
body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-brand .et_pb_text_inner, body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-brand .et_pb_text_inner a { color: #fff; }
body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-nav .et-menu-nav > ul.et-menu > li > a, body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-nav .et-menu-nav > ul.et-menu > li:hover > a, body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-nav .et-menu-nav > ul.et-menu > li > a:focus-visible, body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-nav .et-menu-nav > ul.et-menu > li.current-menu-item > a { color: #fff; }
body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-nav .et-menu-nav > ul.et-menu > li > a::after { background: #fff; }
body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-nav .et-menu-nav > ul.et-menu > li.menu-item-has-children > a::before, body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-nav .et-menu-nav > ul.et-menu > li > a svg { color: #fff; }
body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-call .et_pb_text_inner a { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-call .et_pb_text_inner a:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .apl-btn--header .et_pb_button, body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .apl-btn--header.et_pb_button { background-color: #fff !important; border-color: #fff !important; color: var(--apl-ink) !important; }
@media (hover: hover) { body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .apl-btn--header .et_pb_button:hover, body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .apl-btn--header.et_pb_button:hover { background-color: var(--apl-blue-50) !important; border-color: var(--apl-blue-50) !important; color: var(--apl-blue-strong) !important; } }
body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) :focus-visible, body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .apl-btn--header .et_pb_button:focus-visible { outline-color: #fff; }
@media (max-width: 1239px) {
  body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-nav .mobile_menu_bar { background: transparent; border-color: transparent; color: #fff; }
  body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-nav .mobile_menu_bar::before { color: #fff; } /* the old blue #016fff icon measures 1.3:1 on the glass; white keeps it at the text's 5.8:1 */
  body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-call .et_pb_text_inner a { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { body.ap-bold #et-boc .et-l .apl-header .ap-header-row.apl-pill, body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li > a { transition: none !important; } }
body.ap-menu-open #page-container::after { content: ""; position: fixed; inset: 0; z-index: 9980; background: rgba(11, 26, 51, 0.45); pointer-events: none; }

/* ====================================================================================================================
   5. Hero (light pages): the same video stage; glass trust bar; white type
   ==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-hero .ap-hero-copy .ap-lead .et_pb_text_inner { color: #e9edf3; }
body.ap-light #et-boc .et-l .apl-hero .ap-hero-copy h1 { color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.3); }

/* Stacked hero (the old allpainting.ca composition): centred; the big two-line uppercase title beside the logo's paint mark,
   the tagline under it, a short facts line, the lead and white pills. One even overlay keeps every word AA over the
   brightest video frames (white text on at least 0.62 navy over a white pixel = 5.1:1). */
body.ap-light #et-boc .et-l .apl-hero--stack { justify-content: center; }
body.ap-light .apl-hero--stack .ap-hero-scrim { background: linear-gradient(180deg, rgba(8, 14, 28, 0.8) 0, rgba(8, 14, 28, 0.64) 130px, rgba(8, 14, 28, 0.62) 72%, rgba(8, 14, 28, 0.74) 100%) !important; }
body.ap-light #et-boc .et-l .apl-hero--stack .ap-hero-copy-row { display: flex; justify-content: center; }
body.ap-light #et-boc .et-l .apl-hero--stack .ap-hero-copy { max-width: 1040px; width: 100%; margin-left: auto !important; margin-right: auto !important; align-items: center; text-align: center; gap: 1.35rem; }
body.ap-light #et-boc .et-l .apl-hero--stack .ap-hero-copy > .et_pb_module { width: 100%; }
body.ap-light #et-boc .et-l .apl-h1-stack h1 {
  --t: clamp(2.6rem, 4.4vw + 0.7rem, 6rem);
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 0.28em; row-gap: 0;
  font-size: var(--t); line-height: 0.96; letter-spacing: -0.015em; text-align: left; text-wrap: initial; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
body.ap-light .apl-h1-stack .apl-h1-mark { grid-column: 1; grid-row: 1; display: block; height: calc(var(--t) * 1.92); line-height: 0; }
body.ap-light .apl-h1-stack .apl-h1-mark img { display: block; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.35)); }
body.ap-light .apl-h1-stack .apl-h1-mark--text { line-height: 1; height: auto; font-size: calc(var(--t) * 1.66); font-weight: 800; letter-spacing: -0.05em; color: #fff; }
body.ap-light .apl-h1-stack .apl-h1-title { grid-column: 2; grid-row: 1; display: block; text-transform: uppercase; font-weight: 800; letter-spacing: 0.005em; white-space: nowrap; }
body.ap-light .apl-h1-stack .apl-h1-tag { grid-column: 1 / -1; grid-row: 2; display: block; margin-top: 0.42em; font-size: clamp(1.35rem, 1.05vw + 0.95rem, 2.05rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; text-align: center; text-wrap: balance; }
body.ap-light .apl-h1-stack .apl-h1-tag .painted::before { bottom: -0.14em; height: 0.3em; }
body.ap-light #et-boc .et-l .apl-hero-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 0; list-style: none; margin: 0; padding: 0; font-family: var(--apl-font); font-weight: 600; font-size: 1rem; color: #fff; }
body.ap-light #et-boc .et-l .apl-hero-line li { position: relative; padding: 0 1rem; line-height: 1.4; white-space: nowrap; }
body.ap-light #et-boc .et-l .apl-hero-line li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 1em; margin-top: -0.5em; background: rgba(255, 255, 255, 0.55); }
body.ap-light #et-boc .et-l .apl-hero-lead .et_pb_text_inner { max-width: 60ch; margin: 0 auto; text-align: center; color: #e9edf3; font-size: clamp(1.0625rem, 0.35vw + 0.9rem, 1.2rem); text-wrap: balance; }
body.ap-light #et-boc .et-l .apl-hero-cta { justify-content: center; }
body.ap-light #et-boc .et-l .apl-hero--stack .apl-btn .et_pb_button, body.ap-light #et-boc .et-l .apl-hero--stack .apl-btn.et_pb_button { min-height: 54px; padding: 0.9rem 1.8rem !important; font-size: 1.05rem !important; }
/* arrow on the main pill (as on the old hero), nudged on hover */
body.ap-bold #et-boc .et-l .apl-btn--arrow .et_pb_button::after, body.ap-bold #et-boc .et-l .apl-btn--arrow.et_pb_button::after {
  display: inline-block !important; position: static !important; content: "" !important; width: 18px; height: 18px; margin: 0 !important; opacity: 1 !important; font-size: 0 !important;
  background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></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='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / 100% 100% no-repeat;
  transform: none !important; top: auto !important; right: auto !important; left: auto !important; line-height: 1 !important;
  transition: transform 0.2s var(--apl-ease) !important;
}
@media (hover: hover) { body.ap-bold #et-boc .et-l .apl-btn--arrow .et_pb_button:hover::after, body.ap-bold #et-boc .et-l .apl-btn--arrow.et_pb_button:hover::after { transform: translateX(3px) !important; } }
/* the phone pill shows where the header has no phone link (below 1240 px), as on the old hero */
@media (min-width: 1240px) { body.ap-light #et-boc .et-l .apl-hero-cta .apl-btn--hero-call, body.ap-light #et-boc .et-l .apl-hero-cta .et_pb_button_module_wrapper:has(.apl-btn--hero-call) { display: none !important; } }
@media (max-width: 640px) {
  body.ap-light #et-boc .et-l .apl-hero--stack .ap-hero-copy { gap: 1.1rem; }
  body.ap-light #et-boc .et-l .apl-hero-line { display: grid; grid-template-columns: max-content max-content; justify-content: center; column-gap: 1.1rem; row-gap: 0.4rem; font-size: 0.92rem; }
  body.ap-light #et-boc .et-l .apl-hero-line li { padding: 0 0 0 0.9rem; text-align: left; }
  body.ap-light #et-boc .et-l .apl-hero-line li::before, body.ap-light #et-boc .et-l .apl-hero-line li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--apl-red); }
  body.ap-light #et-boc .et-l .apl-hero-line li:nth-child(2)::before { background: var(--apl-green); }
  body.ap-light #et-boc .et-l .apl-hero-line li:nth-child(3)::before { background: #2f80ff; }
  body.ap-light #et-boc .et-l .apl-hero-line li:nth-child(4)::before { background: #fff; }
  body.ap-light #et-boc .et-l .apl-hero-cta { flex-direction: column; align-items: center; }
  body.ap-bold.ap-light #et-boc .et-l .apl-hero-cta .et_pb_button_module_wrapper { width: min(100%, 320px) !important; }
  body.ap-bold.ap-light #et-boc .et-l .apl-hero-cta .et_pb_button_module_wrapper > .et_pb_button { display: flex !important; width: 100% !important; max-width: none !important; }
}
@media (max-width: 380px) { body.ap-light #et-boc .et-l .apl-hero-line { grid-template-columns: max-content; } }
/* short landscape phones: compact stack so the buttons are on screen */
@media (max-height: 460px) and (orientation: landscape) {
  body.ap-light #et-boc .et-l .apl-hero--stack .ap-hero-copy { gap: 0.6rem !important; }
  body.ap-light #et-boc .et-l .apl-h1-stack h1 { --t: 2.1rem; }
  body.ap-light #et-boc .et-l .apl-h1-stack .apl-h1-tag { font-size: 1.1rem; margin-top: 0.3em; }
  body.ap-light #et-boc .et-l .apl-hero-lead { display: none; }
  body.ap-light #et-boc .et-l .apl-hero-line { font-size: 0.85rem; }
  body.ap-light #et-boc .et-l .apl-hero--stack .apl-btn .et_pb_button { min-height: 44px; padding: 0.5rem 1.2rem !important; font-size: 0.95rem !important; }
}

/* Section heads (owner, 2026-10-05): LEFT-aligned on the full-width grid everywhere (kicker, H2, lead; the hero stays centred);
   the H2 balances its lines, the lead keeps a readable measure; a section action button sits on the right of the same row on
   desktop and below the head on phones (built per section) */
body.ap-light #et-boc .et-l .apl-band .ap-shead { margin-bottom: 0 !important; }
body.ap-light #et-boc .et-l .apl-band .ap-shead > .et_pb_column { align-items: flex-start; text-align: left; max-width: none; margin-left: 0 !important; margin-right: 0 !important; }
body.ap-light #et-boc .et-l .apl-band .ap-shead .ap-kicker { align-self: flex-start; width: fit-content !important; max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; }
body.ap-light #et-boc .et-l .apl-band--blue .apl-cta-pair { justify-content: center; }
body.ap-light #et-boc .et-l .apl-band .ap-shead h2, body.ap-light #et-boc .et-l .apl-band .ap-shead p { text-align: left !important; }
body.ap-light #et-boc .et-l .apl-band .ap-shead .ap-shead-h2 h2 { text-wrap: balance; max-width: none; }
body.ap-light #et-boc .et-l .apl-band .ap-shead .ap-shead-lead .et_pb_text_inner { max-width: 72ch; margin: 0; text-wrap: pretty; }
@media (max-width: 767px) { body.ap-light #et-boc .et-l .apl-band .ap-shead { margin-bottom: -16px !important; } }

/* ====================================================================================================================
   6. Bands
   ==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-band--white { background-color: #fff; }
body.ap-light #et-boc .et-l .apl-band--tint { background-color: var(--apl-tint); }
body.ap-light #et-boc .et-l .apl-band--blue { background-color: var(--apl-blue); color: #fff; }
body.ap-light #et-boc .et-l .apl-band--blue .ap-lead .et_pb_text_inner { color: #fff; }

/* ====================================================================================================================
   7. Colour visualiser
   ==================================================================================================================== */
body.ap-light .ap-vis-stage { background: var(--apl-tint-2); border-radius: var(--apl-radius); box-shadow: var(--apl-shadow-md); }
body.ap-light .ap-vis-tag { background: rgba(255, 255, 255, 0.94); color: var(--apl-ink); font-family: var(--apl-font); font-weight: 700; box-shadow: 0 4px 14px rgba(16, 24, 40, 0.16); }
body.ap-light .ap-vis-tag i { border-color: rgba(16, 24, 40, 0.25); }
body.ap-light .ap-vis-tag.is-target { outline: 2px solid var(--apl-blue); outline-offset: 0; }
body.ap-light .ap-seg { background: var(--apl-tint-2); border: 1px solid var(--apl-line); border-radius: 999px; padding: 4px; }
body.ap-light .ap-seg button { border-radius: 999px; color: var(--apl-text); font-family: var(--apl-font); font-weight: 600; padding: 0.55rem 1.1rem; min-height: 40px; }
body.ap-light .ap-seg button[aria-pressed="true"] { background: #fff; color: var(--apl-ink); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14); }
@media (hover: hover) { body.ap-light .ap-seg button[aria-pressed="false"]:hover { color: var(--apl-blue-strong); background: rgba(255, 255, 255, 0.6); } body.ap-light .ap-seg button[aria-pressed="true"]:hover { box-shadow: 0 2px 8px rgba(16, 24, 40, 0.2); color: var(--apl-blue-strong); } }
body.ap-light .ap-swatch { border-radius: 12px; border: 0; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.12); }
body.ap-light .ap-swatch:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.12), 0 0 0 2px #fff, 0 0 0 4px var(--apl-blue-100); }
body.ap-light .ap-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.12), 0 0 0 2px #fff, 0 0 0 4px var(--apl-blue); }
body.ap-light .ap-swatch { color: var(--apl-text); }
@media (max-width: 380px) { body.ap-light .ap-swatches { gap: 0.5rem; } }
body.ap-light .ap-swatch span { color: var(--apl-text); background: #fff; padding: 0 0.2rem; border-radius: 4px; font-family: var(--apl-font); font-weight: 600; }
body.ap-light #et-boc .et-l .ap-btn-like.ap-vis-reset, body.ap-light .ap-btn-like.ap-vis-reset { min-height: 46px; padding: 0.6rem 1.3rem !important; border-radius: 999px; border: 1px solid var(--apl-line-strong) !important; background-color: #fff !important; color: var(--apl-ink) !important; font-family: var(--apl-font); font-weight: 600; background-image: none !important; transition: background-color 0.2s, border-color 0.2s, color 0.2s !important; }
@media (hover: hover) { body.ap-light #et-boc .et-l .ap-btn-like.ap-vis-reset:hover, body.ap-light .ap-btn-like.ap-vis-reset:hover { background-color: var(--apl-blue-50) !important; color: var(--apl-blue-strong) !important; border-color: var(--apl-blue) !important; } }
body.ap-light #et-boc .et-l .ap-btn-like.ap-vis-reset:focus-visible, body.ap-light .ap-btn-like.ap-vis-reset:focus-visible { background-color: #fff !important; color: var(--apl-ink) !important; outline: 3px solid var(--apl-blue); outline-offset: 3px; }
body.ap-light #et-boc .et-l .ap-vis-note .et_pb_text_inner { color: var(--apl-muted); }
body.ap-light #et-boc .et-l .ap-vis-note .et_pb_text_inner b { color: var(--apl-ink); }

/* ====================================================================================================================
   9. Why: five white cards with a blue icon in a pale-blue square (the old site's card look) beside the photo
   ==================================================================================================================== */
body.ap-light #et-boc .et-l #why .ap-why-points { gap: 10px !important; }
body.ap-light #et-boc .et-l #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 #why .ap-why-item:last-child { border-bottom: 1px solid var(--apl-line) !important; }
body.ap-light #et-boc .et-l #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 #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 #why .ap-why-item:nth-child(1) { --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 #et-boc .et-l #why .ap-why-item:nth-child(2) { --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='M9 4h6v3H9z'/><path d='M9 5.5H6.5A1.5 1.5 0 0 0 5 7v12.5A1.5 1.5 0 0 0 6.5 21h11a1.5 1.5 0 0 0 1.5-1.5V7a1.5 1.5 0 0 0-1.5-1.5H15'/><path d='M8.5 11.5h7M8.5 15h7M8.5 18h4'/></svg>"); }
body.ap-light #et-boc .et-l #why .ap-why-item:nth-child(3) { --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 20l4-1 11-11-3-3L5 16z'/><path d='M14 7l3 3'/></svg>"); }
body.ap-light #et-boc .et-l #why .ap-why-item:nth-child(4) { --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 #et-boc .et-l #why .ap-why-item:nth-child(5) { --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='M15 3l-3.5 8'/><path d='M6 12h9l2 9H4z'/><path d='M8.5 15v6M12.5 15v6'/></svg>"); }
body.ap-light #et-boc .et-l #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 #why .ap-why-item .et_pb_blurb_description, body.ap-light #et-boc .et-l #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 #et-boc .et-l .ap-media-col { border-radius: var(--apl-radius); background: var(--apl-tint-2); box-shadow: var(--apl-shadow-md); }
body.ap-light #et-boc .et-l .ap-media-caption .et_pb_text_inner { background: rgba(255, 255, 255, 0.95); color: var(--apl-ink); border-radius: 14px; padding: 0.55rem 1rem 0.55rem 0.6rem; box-shadow: 0 6px 18px rgba(16, 24, 40, 0.16); font-family: var(--apl-font); width: max-content; max-width: 100%; }
/* phones: the photo shows the brush and the trim line, and the caption sits under the photo instead of covering it */
@media (max-width: 899px) {
  body.ap-light #et-boc .et-l #why .ap-media-col { aspect-ratio: 3 / 2; overflow: visible; background: transparent; box-shadow: none; display: flex; flex-direction: column; }
  body.ap-light #et-boc .et-l #why .ap-media-col .et_pb_image { position: relative; inset: auto; height: auto; aspect-ratio: 3 / 2; border-radius: var(--apl-radius); overflow: hidden; box-shadow: var(--apl-shadow-md); }
  body.ap-light #et-boc .et-l #why .ap-media-col .et_pb_image img { object-position: 62% 45%; }
  body.ap-light #et-boc .et-l #why .ap-media-col { aspect-ratio: auto; }
  body.ap-light #et-boc .et-l #why .ap-media-caption { position: static; margin-top: 10px !important; }
  body.ap-light #et-boc .et-l #why .ap-media-caption .et_pb_text_inner { box-shadow: none; border: 1px solid var(--apl-line); width: auto; font-size: 0.88rem; }
}

body.ap-bold #et-boc .et-l .ap-media-col .ap-media-caption { width: auto !important; max-width: calc(100% - 2rem); }

/* ====================================================================================================================
   10. Process: five white cards with a blue icon in a pale-blue square and a small step label (no track); 3 + 2 below 1200 px
   ==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-steps::before, body.ap-light #et-boc .et-l .apl-steps::after { display: none; }
body.ap-light #et-boc .et-l .apl-steps { counter-reset: step; }
body.ap-light #et-boc .et-l .apl-steps .et_pb_column { counter-increment: step; background: #fff; border: 1px solid var(--apl-line); border-radius: var(--apl-radius); padding: 1.5rem 1.4rem 1.6rem; box-shadow: var(--apl-shadow-sm); grid-template-columns: 1fr !important; }
body.ap-light #et-boc .et-l .apl-steps .et_pb_column::before { content: ""; grid-row: auto !important; width: 44px; height: 44px; border-radius: 12px; background: var(--apl-blue-50) var(--ic) center / 24px 24px no-repeat; color: transparent; font-size: 0; counter-increment: none; }
body.ap-light #et-boc .et-l .apl-steps .et_pb_column > .et_pb_module { grid-column: 1 !important; }
body.ap-light #et-boc .et-l .apl-steps .et_pb_column:nth-child(1) { --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 #et-boc .et-l .apl-steps .et_pb_column:nth-child(2) { --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'/><path d='M9 12.5l2 2 4-4'/></svg>"); }
body.ap-light #et-boc .et-l .apl-steps .et_pb_column:nth-child(3) { --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 #et-boc .et-l .apl-steps .et_pb_column:nth-child(4) { --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 #et-boc .et-l .apl-steps .et_pb_column:nth-child(5) { --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 #et-boc .et-l .apl-steps .et_pb_heading { margin-top: 0.75rem !important; gap: 0.2rem !important; }
body.ap-light #et-boc .et-l .apl-steps .et_pb_heading::before { content: "Step " counter(step); display: block; margin-bottom: 0.25rem; font-family: var(--apl-font); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apl-blue); }
body.ap-light #et-boc .et-l .apl-steps h3 { margin-top: 0; color: var(--apl-ink); min-height: 0 !important; }
body.ap-light #et-boc .et-l .apl-steps .et_pb_text_inner, body.ap-light #et-boc .et-l .apl-steps .et_pb_text_inner p { color: var(--apl-text); text-wrap: pretty; }
@media (min-width: 768px) and (max-width: 1199px) {
  body.ap-light #et-boc .et-l .apl-steps { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px !important; }
  body.ap-light #et-boc .et-l .apl-steps > .et_pb_column { grid-column: span 2; width: auto !important; max-width: none !important; margin: 0 !important; flex: none !important; }
  body.ap-light #et-boc .et-l .apl-steps > .et_pb_column:nth-child(4) { grid-column: 2 / span 2; }
  body.ap-light #et-boc .et-l .apl-steps > .et_pb_column:nth-child(5) { grid-column: 4 / span 2; }
}
@media (max-width: 767px) {
  body.ap-light #et-boc .et-l .apl-steps .et_pb_column { grid-template-columns: 44px 1fr !important; column-gap: 1rem; }
  body.ap-light #et-boc .et-l .apl-steps .et_pb_column::before { grid-row: 1 / span 2 !important; }
  body.ap-light #et-boc .et-l .apl-steps .et_pb_column > .et_pb_module { grid-column: 2 !important; }
  body.ap-light #et-boc .et-l .apl-steps .et_pb_heading { margin-top: 0 !important; }
}

/* ====================================================================================================================
   11. Service area map (ap-service-map, light theme) in light tokens
   ==================================================================================================================== */
body.ap-light .ap-map-widget:not(.ap-dark) { max-width: none; font-family: var(--apl-font); }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-grid { grid-template-columns: 7fr 5fr; gap: 1.5rem; }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-stage { background: var(--apl-tint); border: 1px solid var(--apl-line); border-radius: var(--apl-radius-lg); padding: clamp(0.5rem, 2vw, 1.5rem); }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-rp { stroke: #fff; stroke-width: 2; }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-rt { fill: var(--apl-ink); font-family: var(--apl-font); font-weight: 700; font-size: 18px; }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-rt.on-paint { fill: #fff; paint-order: stroke; stroke: rgba(11, 26, 51, 0.6); stroke-width: 3px; stroke-linejoin: round; }
@media (max-height: 500px) and (orientation: landscape) { body.ap-light .ap-map-widget:not(.ap-dark) .ap-stage svg { max-height: calc(100svh - 110px); width: auto; max-width: 100%; margin: 0 auto; } }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-ml { font-family: var(--apl-font); font-weight: 700; paint-order: stroke; stroke: rgba(11, 26, 51, 0.5); stroke-width: 2.2px; stroke-linejoin: round; text-shadow: none; }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-hq-tag { fill: var(--apl-ink); font-family: var(--apl-font); }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-reset { background: #fff; color: var(--apl-ink); border: 1px solid var(--apl-line-strong); border-radius: 999px; font-family: var(--apl-font); min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) { body.ap-light .ap-map-widget:not(.ap-dark) .ap-reset:hover { border-color: var(--apl-blue); color: var(--apl-blue-strong); background: var(--apl-blue-50); } }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-panel { background: #fff; border: 1px solid var(--apl-line); border-radius: var(--apl-radius-lg); box-shadow: var(--apl-shadow-sm); }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-panel-head { padding: 26px 26px 14px; }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-panel-title { color: var(--apl-ink); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.015em; }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-panel-count { color: var(--apl-blue); font-size: 0.85rem; }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-panel-sub { color: var(--apl-text); font-size: 0.97rem; }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-region-link { color: var(--apl-blue); border-bottom: 2px solid currentColor; text-decoration: none; }
@media (hover: hover) { body.ap-light .ap-map-widget:not(.ap-dark) .ap-region-link:hover { color: var(--apl-blue-strong); text-decoration: none; } }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-panel-body { padding: 8px 26px 10px; }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-ritem { background: var(--apl-tint); border: 1px solid transparent; border-radius: 12px; min-height: 48px; }
/* desktop: the panel is as tall as the map, so the region list fills the panel instead of leaving a gap above the button */
@media (min-width: 981px) {
  body.ap-light .ap-map-widget:not(.ap-dark) .ap-panel-body:has(> .ap-rlist:not(.ap-rlist--compact):only-child) { display: flex; flex-direction: column; }
  body.ap-light .ap-map-widget:not(.ap-dark) .ap-panel-body > .ap-rlist:not(.ap-rlist--compact):only-child { flex: 1; justify-content: space-between; gap: 10px; }
  body.ap-light .ap-map-widget:not(.ap-dark) .ap-rlist:not(.ap-rlist--compact) .ap-ritem { min-height: 62px; }
}
@media (hover: hover) { body.ap-light .ap-map-widget:not(.ap-dark) .ap-ritem:hover { background: var(--apl-blue-50); border-color: var(--apl-blue-100); } }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-ritem b { color: var(--apl-ink); }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-ritem em { color: var(--apl-muted); }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-ritem .arr { color: var(--apl-blue); }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-city { background: #fff; color: var(--apl-ink); border: 1px solid var(--apl-line-strong); min-height: 40px; }
@media (hover: hover) { body.ap-light .ap-map-widget:not(.ap-dark) .ap-city:hover { background: var(--apl-tint); color: var(--apl-ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } body.ap-light .ap-map-widget:not(.ap-dark) .ap-city:hover::before { background: var(--ink); } }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-city.current { background: var(--apl-tint); color: var(--apl-ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-city.current::before { background: var(--ink); }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-panel-more { border-top-color: var(--apl-line); }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-panel-more-h { color: var(--apl-muted); }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-panel-cta { margin-top: auto; padding: 14px 26px 26px; }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-cta { background: var(--apl-blue); color: #fff !important; border-radius: 999px; min-height: 50px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1rem; }
@media (hover: hover) { body.ap-light .ap-map-widget:not(.ap-dark) .ap-cta:hover { background: var(--apl-blue-strong); } }
body.ap-light .ap-map-widget:not(.ap-dark) .ap-cta:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 3px; }
@media (max-width: 980px) { body.ap-light .ap-map-widget:not(.ap-dark) .ap-grid { grid-template-columns: 1fr; } body.ap-light .ap-map-widget:not(.ap-dark) .ap-rt { font-size: 26px; } }
/* phones: the square stage only while a region is zoomed (tall regions need it); the overview keeps the map's own shape */
@media (max-width: 560px) { body.ap-light .ap-map-widget:not(.ap-dark) .ap-stage[data-ap-stage].zoomed svg { height: min(88vw, 440px); } }
body.ap-light #et-boc .et-l .ap-map-note .et_pb_text_inner { color: var(--apl-muted); }
.apl-nw { white-space: nowrap; }
/* a sentence break used only where a split column is narrow (981 to 1199 px), e.g. the Why heading at 1024 */
.apl-br-md { display: none; }
@media (min-width: 981px) and (max-width: 1199px) { .apl-br-md { display: inline; } }
/* phones: the Toronto label sits inside its shape, and the HQ tag is readable (about 11 px) */
@media (max-width: 980px) {
  body.ap-light .ap-map-widget:not(.ap-dark) .ap-rt[data-region="toronto"] { font-size: 22px; transform: translateX(-10px); }
  body.ap-light .ap-map-widget:not(.ap-dark) .ap-hq-tag { font-size: 22px; }
}
body.ap-light #et-boc .et-l .ap-map-note a { color: var(--apl-blue); border-bottom: 1px solid currentColor; font-weight: 600; }
@media (hover: hover) { body.ap-light #et-boc .et-l .ap-map-note a:hover { color: var(--apl-blue-strong); border-bottom-width: 2px; } }

/* ====================================================================================================================
   12. Before / after and the work tiles
   ==================================================================================================================== */
/* the slider spans the full content width (header pill edges) with its tabs (owner, 2026-10-05); the stage is 16:9 (3:2 on
   phones) but never taller than the screen below the header, so on wide screens it becomes a wider crop instead of a tall one */
body.ap-light .ap-ba-wrap { width: 100%; margin-inline: 0; }
body.ap-light .ap-ba { border-radius: var(--apl-radius); background: var(--apl-tint-2); box-shadow: var(--apl-shadow-md); aspect-ratio: 16 / 9; max-height: calc(100svh - 120px); width: 100%; }
@media (max-width: 640px) { body.ap-light .ap-ba-wrap { width: 100%; } body.ap-light .ap-ba { aspect-ratio: 3 / 2; } }
body.ap-light .ap-ba .handle { background: #fff; width: 3px; box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.18); }
body.ap-light .ap-ba .knob { width: 56px; height: 56px; background: #fff; color: var(--apl-blue); box-shadow: 0 8px 24px rgba(16, 24, 40, 0.28); }
body.ap-light .ap-ba .tag { background: rgba(255, 255, 255, 0.95); color: var(--apl-ink); font-family: var(--apl-font); letter-spacing: 0.08em; box-shadow: 0 4px 12px rgba(16, 24, 40, 0.16); }
body.ap-light .ap-ba-caption { background: rgba(255, 255, 255, 0.95); color: var(--apl-ink); font-family: var(--apl-font); border-radius: 999px; padding: 0.5rem 1rem; box-shadow: 0 4px 12px rgba(16, 24, 40, 0.16); }
body.ap-light .ap-ba-tabs { gap: 0.75rem; margin-top: 0.9rem; }
body.ap-light .ap-bold .et_pb_section .ap-ba-tabs button, body.ap-light .ap-ba-tabs button { background: #fff; border: 1px solid var(--apl-line); border-radius: 14px; color: var(--apl-text); font-family: var(--apl-font); font-weight: 600; box-shadow: var(--apl-shadow-sm); min-height: 64px; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--apl-ease); }
body.ap-light .ap-ba-tabs button img { border-radius: 9px; }
/* landscape phones: the slider is narrow, so the tabs drop their thumbnails and keep the labels on one or two lines */
@media (max-height: 500px) and (orientation: landscape) { body.ap-light .ap-ba-tabs button img { display: none; } body.ap-light .ap-bold .et_pb_section .ap-ba-tabs button, body.ap-light .ap-ba-tabs button { min-height: 52px; justify-content: center; text-align: center; padding: 0.5rem 0.75rem; } }
body.ap-light .ap-bold .et_pb_section .ap-ba-tabs button[aria-selected="true"], body.ap-light .ap-ba-tabs button[aria-selected="true"] { border-color: var(--apl-blue); box-shadow: inset 0 0 0 1px var(--apl-blue), var(--apl-shadow-sm); color: var(--apl-ink); }
@media (hover: hover) { body.ap-light .ap-ba-tabs button[aria-selected="false"]:hover { border-color: var(--apl-blue-100); color: var(--apl-blue-strong); transform: translateY(-2px); box-shadow: var(--apl-shadow-md); } }

/* Photo tiles (services grid and work cards), the old site's look: the photo stays bright; a gradient sits only behind the
   label at the bottom; white label; a white check-circle on a light disc top right. */
body.ap-light #et-boc .et-l .apl-tiles .et_pb_column { display: flex; }
body.ap-light #et-boc .et-l .apl-tile { position: relative; width: 100%; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--apl-radius); overflow: hidden; isolation: isolate; background: var(--apl-navy); box-shadow: 0 6px 20px rgba(16, 24, 40, 0.12); }
body.ap-light #et-boc .et-l .apl-tile .et_pb_blurb_content { position: absolute; inset: 0; max-width: none; display: block; }
body.ap-light #et-boc .et-l .apl-tile .et_pb_main_blurb_image { position: absolute; inset: 0; margin: 0 !important; width: 100%; height: 100%; line-height: 0; z-index: 0; }
body.ap-light #et-boc .et-l .apl-tile .et_pb_main_blurb_image .et_pb_image_wrap, body.ap-light #et-boc .et-l .apl-tile .et_pb_main_blurb_image span, body.ap-light #et-boc .et-l .apl-tile .et_pb_main_blurb_image a { display: block; width: 100%; height: 100%; }
body.ap-light #et-boc .et-l .apl-tile .et_pb_main_blurb_image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
body.ap-light #et-boc .et-l .apl-tile::before { content: ""; position: absolute; top: 15px; right: 15px; z-index: 3; width: 26px; height: 26px; background: #fff; -webkit-mask: var(--apl-check) center / 100% 100% no-repeat; mask: var(--apl-check) center / 100% 100% no-repeat; }
body.ap-light #et-boc .et-l .apl-tile .et_pb_blurb_content::after { content: ""; position: absolute; top: 11px; right: 11px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(11, 26, 51, 0.3); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.ap-light #et-boc .et-l .apl-tile .et_pb_blurb_container { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; isolation: isolate; padding: 3rem 1.2rem 1.15rem; display: grid; gap: 0.3rem; text-align: left; }
body.ap-light #et-boc .et-l .apl-tile .et_pb_blurb_container::before { content: none; }  /* R8b: no gradient band; the old site's even tint over the whole photo is on the image (below) */
body.ap-light #et-boc .et-l .apl-tile h3.et_pb_module_header, body.ap-light #et-boc .et-l .apl-tile h3.et_pb_module_header a { color: #fff !important; font-family: var(--apl-font); font-size: 1.1rem; line-height: 1.25; padding: 0; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); }
body.ap-light #et-boc .et-l .apl-tile .et_pb_blurb_description, body.ap-light #et-boc .et-l .apl-tile .et_pb_blurb_description p { color: #fff !important; font-size: 0.93rem; line-height: 1.45; text-wrap: pretty; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); }
@media (max-width: 980px) { body.ap-light #et-boc .et-l .apl-tiles .apl-tile { aspect-ratio: 4 / 3; } }

/* Services: 3 large tiles, then every other service page in 5 x 2 tiles, then the services without a page as white cards */
body.ap-light #et-boc .et-l .apl-svc-grid { display: grid !important; gap: 16px; width: 100%; margin: 0; }
body.ap-light #et-boc .et-l .apl-svc-grid--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.ap-light #et-boc .et-l .apl-svc-grid--sm { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.ap-light #et-boc .et-l .apl-svc-grid > .apl-svc-tile { width: auto !important; max-width: none; margin: 0 !important; }
body.ap-light #et-boc .et-l .apl-svc-tile--lg { aspect-ratio: 4 / 3; }
body.ap-light #et-boc .et-l .apl-svc-tile--sm { aspect-ratio: 1 / 1; }
body.ap-light #et-boc .et-l .apl-svc-tile--lg .et_pb_blurb_container { padding: 3.5rem 1.5rem 1.4rem; gap: 0.4rem; }
body.ap-light #et-boc .et-l .apl-svc-tile--lg h3.et_pb_module_header, body.ap-light #et-boc .et-l .apl-svc-tile--lg h3.et_pb_module_header a { font-size: clamp(1.2rem, 0.6vw + 0.95rem, 1.6rem); letter-spacing: -0.015em; }
body.ap-light #et-boc .et-l .apl-svc-tile--lg .et_pb_blurb_description, body.ap-light #et-boc .et-l .apl-svc-tile--lg .et_pb_blurb_description p { font-size: 0.98rem; line-height: 1.5; max-width: 46ch; }
body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_container { padding: 2.75rem 1rem 1rem; }
body.ap-light #et-boc .et-l .apl-svc-tile--sm h3.et_pb_module_header, body.ap-light #et-boc .et-l .apl-svc-tile--sm h3.et_pb_module_header a { font-size: 1.04rem; line-height: 1.28; text-wrap: balance; }
body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_description, body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_description p { font-size: 0.9rem; line-height: 1.45; }
/* small tiles on desktops with a mouse: the label at rest, the one-line description with the blue hover (and on keyboard focus);
   on touch screens and below 1100 px the description is always shown */
@media (hover: hover) and (min-width: 1100px) {
  body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_description { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease-out, opacity 0.25s ease-out; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm:hover .et_pb_blurb_description, body.ap-light #et-boc .et-l .apl-svc-tile--sm:has(a:focus-visible) .et_pb_blurb_description { max-height: 9em; opacity: 1; }
}
/* the whole tile is the link; the title link carries it (one tab stop per tile) */
body.ap-light #et-boc .et-l .apl-tile--link h3.et_pb_module_header a { text-decoration: none; outline: none; }
body.ap-light #et-boc .et-l .apl-tile--link h3.et_pb_module_header a::after { content: ""; position: absolute; inset: 0; z-index: 5; }
/* The old site's tile hover (owner pick): a blue wash, 40% blue at the top to solid blue at the bottom (old: rgba(0,111,254,.4) ->
   #006ffe, instant). Here it fades in over 250 ms, the bottom stop is a touch deeper (#0062e6, white 5.4:1) and the label's own
   gradient eases to half under it, so labels stay AA; the same on keyboard focus and while a tile is pressed on touch. */
body.ap-light #et-boc .et-l .apl-tile--link { -webkit-tap-highlight-color: transparent; }
body.ap-light #et-boc .et-l .apl-tile--link .et_pb_blurb_content::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0, 111, 254, 0.4) 0%, #0062e6 100%); opacity: 0; transition: opacity 0.25s ease-out; }
@media (hover: hover) {
  body.ap-light #et-boc .et-l .apl-tile--link:hover .et_pb_blurb_content::before { opacity: 1; }
  body.ap-light #et-boc .et-l .apl-tile--link:hover .et_pb_blurb_container::before { opacity: 0.5; }
}
body.ap-light #et-boc .et-l .apl-tile--link:has(a:focus-visible) .et_pb_blurb_content::before, body.ap-light #et-boc .et-l .apl-tile--link:active .et_pb_blurb_content::before { opacity: 1; }
body.ap-light #et-boc .et-l .apl-tile--link:has(a:focus-visible) .et_pb_blurb_container::before, body.ap-light #et-boc .et-l .apl-tile--link:active .et_pb_blurb_container::before { opacity: 0.5; }
body.ap-light #et-boc .et-l .apl-tile--link:has(a:focus-visible) { outline: 3px solid var(--apl-blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { body.ap-light #et-boc .et-l .apl-tile--link .et_pb_blurb_content::before, body.ap-light #et-boc .et-l .apl-tile .et_pb_blurb_container::before, body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_description { transition: none !important; } }
body.ap-light #et-boc .et-l .apl-svc--interior img { object-position: 45% 60%; }
body.ap-light #et-boc .et-l .apl-svc--exterior img { object-position: 30% 40%; }
body.ap-light #et-boc .et-l .apl-svc--commercial img { object-position: 55% 50%; }
body.ap-light #et-boc .et-l .apl-svc--house img { object-position: 50% 55%; }
body.ap-light #et-boc .et-l .apl-svc--condo img { object-position: 58% 50%; }
body.ap-light #et-boc .et-l .apl-svc--cabinets img { object-position: 45% 50%; }
body.ap-light #et-boc .et-l .apl-svc--stairs img { object-position: 64% 55%; }
body.ap-light #et-boc .et-l .apl-svc--wallpaper img { object-position: 56% 40%; }
body.ap-light #et-boc .et-l .apl-svc--drywall img { object-position: 48% 35%; }
body.ap-light #et-boc .et-l .apl-svc--siding img { object-position: 40% 50%; }
body.ap-light #et-boc .et-l .apl-svc--brick img { object-position: 50% 45%; }
body.ap-light #et-boc .et-l .apl-svc--door img { object-position: 62% 55%; }
body.ap-light #et-boc .et-l .apl-svc--deck img { object-position: 66% 60%; }
/* Small service tiles wherever the description is always shown (touch screens of any width, and every screen below 1100 px):
   a white card, the photo on top and the label and description underneath, so no text covers the photo and every title in
   a row starts at the same height. Five across on touch screens from 1100 px, 3 + 3 + 4 from 900 to 1099 px, and below
   900 px compact cards with the photo on the left, two across, and one column on phones. The blue hover wash covers the photo only, and the title turns blue. */
@media (hover: none) and (min-width: 1100px), (max-width: 1099px) {
  body.ap-light #et-boc .et-l .apl-svc-tile--sm { aspect-ratio: auto; background: #fff; border: 1px solid var(--apl-line); box-shadow: var(--apl-shadow-sm); }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_content { position: relative; inset: auto; height: 100%; display: flex; flex-direction: column; gap: 0; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_main_blurb_image { position: relative; inset: auto; height: auto; aspect-ratio: 3 / 2; flex: none; overflow: hidden; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_main_blurb_image img { position: absolute; inset: 0; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_container { position: relative; inset: auto; padding: 0.85rem 1rem 1.05rem; gap: 0.3rem; flex: 1 1 auto; align-content: start; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_container::before { display: none; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm h3.et_pb_module_header, body.ap-light #et-boc .et-l .apl-svc-tile--sm h3.et_pb_module_header a { color: var(--apl-ink) !important; text-shadow: none; transition: color 0.2s; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_description, body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_description p { color: var(--apl-text) !important; text-shadow: none; font-size: 0.88rem; line-height: 1.5; max-height: none; opacity: 1; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_content::before { bottom: auto; aspect-ratio: 3 / 2; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm:has(a:focus-visible) h3.et_pb_module_header a, body.ap-light #et-boc .et-l .apl-svc-tile--sm:active h3.et_pb_module_header a { color: var(--apl-blue-strong) !important; }
}
@media (hover: hover) and (max-width: 1099px) { body.ap-light #et-boc .et-l .apl-svc-tile--sm:hover h3.et_pb_module_header a { color: var(--apl-blue-strong) !important; } }
/* 900 to 1099 px (iPad landscape, small laptop windows): three, three and four across on a 12-column grid */
@media (min-width: 900px) and (max-width: 1099px) {
  body.ap-light #et-boc .et-l .apl-svc-grid--sm { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  body.ap-light #et-boc .et-l .apl-svc-grid--sm > .apl-svc-tile--sm { grid-column: span 4; }
  body.ap-light #et-boc .et-l .apl-svc-grid--sm > .apl-svc-tile--sm:nth-child(n+7) { grid-column: span 3; }
}
@media (max-width: 899px) {
  body.ap-light #et-boc .et-l .apl-svc-grid--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm { border-radius: 14px; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_content { flex-direction: row; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_main_blurb_image { width: 34%; aspect-ratio: auto; align-self: stretch; min-height: 108px; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_container { flex: 1 1 0; min-width: 0; padding: 0.75rem 0.9rem 0.85rem; align-content: start; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_content::before { right: auto; bottom: 0; width: 34%; aspect-ratio: auto; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm::before, body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_content::after { display: none; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm h3.et_pb_module_header, body.ap-light #et-boc .et-l .apl-svc-tile--sm h3.et_pb_module_header a { font-size: 1rem; }
  body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_description, body.ap-light #et-boc .et-l .apl-svc-tile--sm .et_pb_blurb_description p { font-size: 0.86rem; line-height: 1.45; }
}
@media (max-width: 640px) { body.ap-light #et-boc .et-l .apl-svc-grid--sm { grid-template-columns: minmax(0, 1fr); } }
/* "Also on request": white cards with a blue icon in a pale-blue square, the whole card a link */
body.ap-light #et-boc .et-l .apl-svc-more-h { margin-top: 1.4rem !important; }
body.ap-light #et-boc .et-l .apl-svc-more-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); text-align: center; }
body.ap-light #et-boc .et-l .apl-icards { display: grid !important; gap: 16px; width: 100%; margin: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.ap-light #et-boc .et-l .apl-icards > .apl-icard { width: auto !important; max-width: none; margin: 0 !important; }
body.ap-light #et-boc .et-l .apl-icard { position: relative; background: #fff; border: 1px solid var(--apl-line); border-radius: var(--apl-radius); padding: 1.4rem 1.3rem 1.45rem; box-shadow: var(--apl-shadow-sm); transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--apl-ease); }
body.ap-light #et-boc .et-l .apl-icard .et_pb_blurb_content { max-width: none; display: grid; gap: 0.55rem; text-align: left; }
body.ap-light #et-boc .et-l .apl-icard .et_pb_main_blurb_image { display: none; }
body.ap-light #et-boc .et-l .apl-icard .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; margin-bottom: 0.35rem; }
body.ap-light #et-boc .et-l .apl-icard h3.et_pb_module_header, body.ap-light #et-boc .et-l .apl-icard h3.et_pb_module_header a { font-family: var(--apl-font); font-size: 1.06rem; line-height: 1.3; color: var(--apl-ink) !important; padding: 0; text-decoration: none; text-wrap: balance; }
body.ap-light #et-boc .et-l .apl-icard h3.et_pb_module_header a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
body.ap-light #et-boc .et-l .apl-icard .et_pb_blurb_description, body.ap-light #et-boc .et-l .apl-icard .et_pb_blurb_description p { color: var(--apl-text) !important; font-size: 0.95rem; line-height: 1.55; text-wrap: pretty; }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-icard:hover { border-color: var(--apl-blue-100); box-shadow: var(--apl-shadow-md); transform: translateY(-2px); } body.ap-light #et-boc .et-l .apl-icard:hover h3.et_pb_module_header a { color: var(--apl-blue-strong) !important; } }
body.ap-light #et-boc .et-l .apl-icard:has(a:focus-visible) { outline: 3px solid var(--apl-blue); outline-offset: 3px; }
body.ap-light #et-boc .et-l .apl-icard h3.et_pb_module_header a:focus-visible { outline: none; }
body.ap-light #et-boc .et-l .apl-ic--custom { --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 #et-boc .et-l .apl-ic--floor { --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='5' width='18' height='14' rx='1'/><path d='M3 10h18M3 15h18M9 5v5M15 10v5M7 15v4M13 15v4'/></svg>"); }
body.ap-light #et-boc .et-l .apl-ic--epoxy { --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 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z'/><path d='M9.5 15a2.5 2.5 0 0 0 2.5 2.5'/></svg>"); }
body.ap-light #et-boc .et-l .apl-ic--popcorn { --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 5h18'/><path d='M6 5v2M10 5v2M14 5v2M18 5v2'/><path d='M8 12h8l-1.5 3h-5z'/><path d='M12 15v6'/></svg>"); }
body.ap-light #et-boc .et-l .apl-ic--finishes { --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 20l6-6'/><path d='M9 9l6 6 6-6-6-6z'/></svg>"); }
@media (min-width: 1100px) and (max-width: 1299px) { body.ap-light #et-boc .et-l .apl-svc-tile--lg { aspect-ratio: 1 / 1; } }
/* desktops: the large tiles' descriptions hold three lines (ap-light.js then evens titles and descriptions per row) */
@media (min-width: 1100px) { body.ap-light #et-boc .et-l .apl-svc-tile--lg .et_pb_blurb_description { min-height: 4.5em; } }
@media (max-width: 1099px) {
  body.ap-light #et-boc .et-l .apl-svc-tile--lg { aspect-ratio: 4 / 5; }
  body.ap-light #et-boc .et-l .apl-svc-tile--lg .et_pb_blurb_description, body.ap-light #et-boc .et-l .apl-svc-tile--lg .et_pb_blurb_description p { font-size: 0.92rem; }
  body.ap-light #et-boc .et-l .apl-icards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.ap-light #et-boc .et-l .apl-icards > .apl-icard { grid-column: span 2; }
  body.ap-light #et-boc .et-l .apl-icards > .apl-icard:nth-child(4) { grid-column: 2 / span 2; }
  body.ap-light #et-boc .et-l .apl-icards > .apl-icard:nth-child(5) { grid-column: 4 / span 2; }
}
@media (max-width: 640px) {
  body.ap-light #et-boc .et-l .apl-svc-grid, body.ap-light #et-boc .et-l .apl-icards { gap: 12px; }
  body.ap-light #et-boc .et-l .apl-svc-grid--lg, body.ap-light #et-boc .et-l .apl-icards { grid-template-columns: minmax(0, 1fr); }
  body.ap-light #et-boc .et-l .apl-icards > .apl-icard, body.ap-light #et-boc .et-l .apl-icards > .apl-icard:nth-child(4), body.ap-light #et-boc .et-l .apl-icards > .apl-icard:nth-child(5) { grid-column: auto; }
  body.ap-light #et-boc .et-l .apl-svc-tile--lg { aspect-ratio: 4 / 3; }
  body.ap-light #et-boc .et-l .apl-icard { padding: 1.1rem 1.1rem 1.2rem; }
  body.ap-light #et-boc .et-l .apl-icard .et_pb_blurb_content { grid-template-columns: 44px 1fr; column-gap: 0.9rem; row-gap: 0.4rem; align-items: center; }
  body.ap-light #et-boc .et-l .apl-icard .et_pb_blurb_content::before { margin: 0; }
  body.ap-light #et-boc .et-l .apl-icard .et_pb_blurb_container { display: contents; }
  body.ap-light #et-boc .et-l .apl-icard .et_pb_blurb_description { grid-column: 1 / -1; }
  body.ap-light #et-boc .et-l .apl-svc-tile--lg .et_pb_blurb_container { padding: 3rem 1.1rem 1.05rem; }
  body.ap-light #et-boc .et-l .apl-tile::before { top: 12px; right: 12px; width: 22px; height: 22px; }
  body.ap-light #et-boc .et-l .apl-tile .et_pb_blurb_content::after { top: 8px; right: 8px; width: 30px; height: 30px; }
}

/* ====================================================================================================================
   13. Reviews on the blue band: white cards
   ==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-band--blue .ap-rv-card { background: #fff; color: var(--apl-ink); border-radius: var(--apl-radius); box-shadow: 0 10px 28px rgba(3, 28, 77, 0.22); border: 0; }
body.ap-light .apl-band--blue .ap-rv-who strong { color: var(--apl-ink); font-family: var(--apl-font); }
body.ap-light .apl-band--blue .ap-rv-who time { color: var(--apl-muted); }
body.ap-light .apl-band--blue .ap-rv-card p { color: var(--apl-text); font-family: var(--apl-font); font-size: 0.95rem; line-height: 1.6; }
body.ap-light .apl-band--blue .ap-rv-avatar { background: var(--apl-blue-strong); }
body.ap-light .apl-band--blue .ap-rv-avatar b { font-family: var(--apl-font); font-weight: 700; }
body.ap-light .apl-band--blue .ap-rv-stars svg { fill: #f5b400; }
body.ap-light .ap-rv-card.is-open p { -webkit-line-clamp: unset; display: block; overflow: visible; }
/* Masonry (as on the old site): ap-light.js gives each card a row span from its own height, so short reviews stay short, no
   card carries blank space, and "Read more" only pushes the cards below it in the same column. Without JS the grid stays as is. */
body.ap-light .ap-rv-grid.apl-masonry { grid-auto-rows: 4px; row-gap: 0; align-items: start; }
body.ap-light .ap-rv-grid.apl-masonry > .ap-rv-card { margin-bottom: 16px; }
body.ap-light .ap-rv-more-btn { align-self: flex-start; margin-top: auto; padding: 0.35rem 0; min-height: 44px; border: 0; background: none; font: inherit; font-family: var(--apl-font); font-weight: 700; font-size: 0.9rem; color: var(--apl-blue-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) { body.ap-light .ap-rv-more-btn:hover { text-decoration-thickness: 2px; color: #003c9e; } }
body.ap-light .ap-rv-more-btn:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 2px; border-radius: 4px; }

/* ====================================================================================================================
   14. FAQ: white cards, blue plus in a soft blue circle (a blue x when open)
   ==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-faq.et_pb_accordion { gap: 0.65rem; }
body.ap-light #et-boc .et-l .apl-faq .et_pb_toggle { background: #fff; border: 1px solid var(--apl-line); border-radius: 14px; box-shadow: var(--apl-shadow-sm); }
body.ap-light #et-boc .et-l .apl-faq .et_pb_toggle:hover, body.ap-light #et-boc .et-l .apl-faq .et_pb_toggle:focus-within { background: #fff; border-color: var(--apl-blue-100); box-shadow: var(--apl-shadow-md); }
body.ap-light #et-boc .et-l .apl-faq .et_pb_toggle.et_pb_toggle_open { background: #fff; border-color: var(--apl-blue-100); }
body.ap-light #et-boc .et-l .apl-faq h3.et_pb_toggle_title, body.ap-light #et-boc .et-l .apl-faq h5.et_pb_toggle_title { font-family: var(--apl-font); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.005em; color: var(--apl-ink); padding: 1.1rem 1.3rem; text-wrap: balance; }
/* the question button fills the row (the h3 keeps only the room for the icon), so the whole row is one 50 px+ target */
body.ap-light #et-boc .et-l .apl-faq h3.et_pb_toggle_title:has(> .ap-toggle-btn) { padding: 0 1.3rem 0 0; }
body.ap-light #et-boc .et-l .apl-faq .et_pb_toggle_title > .ap-toggle-btn { flex: 1 1 auto; min-width: 0; padding: 1.1rem 0 1.1rem 1.3rem; }
body.ap-light #et-boc .et-l .apl-faq .et_pb_toggle_title > .ap-toggle-btn:focus-visible { outline-offset: -3px; border-radius: 12px; }
body.ap-light #et-boc .et-l .apl-faq .et_pb_toggle_title::before { border: 0; width: 30px; height: 30px; background-color: var(--apl-blue-50); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230050c8' stroke-width='2.6' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>"); }
body.ap-light #et-boc .et-l .apl-faq .et_pb_toggle_open .et_pb_toggle_title::before { background-color: var(--apl-blue); border-color: var(--apl-blue); background-image: 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='2.6' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>"); }
body.ap-light #et-boc .et-l .apl-faq .et_pb_toggle_content { color: var(--apl-text); font-family: var(--apl-font); font-size: 1rem; line-height: 1.65; padding: 0 1.3rem 1.25rem; }
body.ap-light #et-boc .et-l .apl-faq .et_pb_toggle_content a { color: var(--apl-blue); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { body.ap-light #et-boc .et-l .apl-faq .et_pb_toggle_content a:hover { color: var(--apl-blue-strong); text-decoration-thickness: 2px; } }

@media (min-width: 1600px) {
  body.ap-light #et-boc .et-l .ap-faq-row > .et_pb_column.ap-sticky-col { flex: 0 0 38% !important; width: 38% !important; max-width: 38% !important; }
  body.ap-light #et-boc .et-l .ap-faq-row > .et_pb_column:last-child { flex: 1 1 0 !important; width: auto !important; max-width: none !important; }
}

/* ====================================================================================================================
   15. Final CTA: blue panel with the logo's speed-dash streaks
   ==================================================================================================================== */
body.ap-light #et-boc .et-l .apl-cta-panel { background-color: var(--apl-blue) !important; border: 0; border-radius: var(--apl-radius-lg); box-shadow: 0 14px 36px rgba(10, 102, 242, 0.2); }
body.ap-light #et-boc .et-l .apl-cta-panel .ap-cta-scrim { display: none; }
/* the logo's three speed dashes, sliding in at the top right corner (clear of the buttons); hidden when the panel stacks */
body.ap-light .apl-cta-panel .ap-cta-sweep { height: 8px; left: auto; right: 32px; border-radius: 999px; opacity: 1; filter: none; transform: translateX(calc(100% + 72px)); }
body.ap-light .apl-cta-panel .ap-cta-sweep.s1 { top: 26px; width: 150px; right: 56px; background: var(--apl-red); }
body.ap-light .apl-cta-panel .ap-cta-sweep.s2 { top: 42px; width: 104px; right: 44px; background: var(--apl-green); }
body.ap-light .apl-cta-panel .ap-cta-sweep.s3 { top: 58px; bottom: auto; width: 190px; right: 32px; background: #fff; }
@media (max-width: 899px) { body.ap-light .apl-cta-panel .ap-cta-sweep { display: none; } }
body.ap-light .apl-cta-panel.is-in .ap-cta-sweep, body.ap-light.no-motion .apl-cta-panel .ap-cta-sweep, .no-motion body.ap-light .apl-cta-panel .ap-cta-sweep { transform: translateX(0); }
body.ap-light #et-boc .et-l .apl-cta-panel h2 { color: #fff; }
body.ap-light #et-boc .et-l .apl-cta-panel .ap-lead .et_pb_text_inner { color: #fff; max-width: none; text-wrap: pretty; }
@media (min-width: 900px) { body.ap-light #et-boc .et-l .apl-cta-panel > .et_pb_column:last-child::before { background: rgba(255, 255, 255, 0.35); } }

/* ====================================================================================================================
   16. Footer: deep navy (every page)
   ==================================================================================================================== */
body.ap-bold #et-boc .et-l .ap-footer.apl-footer {
  --ap-text: #ffffff; --ap-soft: #c5cfdf; --ap-muted: #c5cfdf; --ap-line: rgba(255, 255, 255, 0.14); --ap-ink-3: rgba(255, 255, 255, 0.08);
  --ap-display: var(--apl-font); --ap-body: var(--apl-font); --ap-blue-on-ink: #8cc0ff;
  background: var(--apl-navy) !important; color: var(--apl-on-navy); font-family: var(--apl-font);
}
body.ap-bold #et-boc .et-l .apl-footer::before { height: 4px; }
body.ap-bold #et-boc .et-l .apl-footer .et_pb_text_inner, body.ap-bold #et-boc .et-l .apl-footer h4 { font-family: var(--apl-font); }
body.ap-bold #et-boc .et-l .apl-footer .ap-brand-name .et_pb_text_inner p a { font-family: var(--apl-font); font-weight: 700; color: #fff; display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color 0.2s; }
body.ap-bold #et-boc .et-l .apl-footer .ap-brand .et_pb_image a { display: block; transition: filter 0.25s ease; }
@media (hover: hover) {
  body.ap-bold #et-boc .et-l .apl-footer .ap-brand-name .et_pb_text_inner p a:hover { text-decoration-color: #8cc0ff; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-brand .et_pb_image a:hover { filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.45)); }
}
body.ap-bold #et-boc .et-l .apl-footer h4 { color: #fff; letter-spacing: 0.12em; }
body.ap-bold #et-boc .et-l .apl-footer h4::before { width: 16px; height: 6px; border-radius: 999px; }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-list .et_pb_text_inner ul li a, body.ap-bold #et-boc .et-l .apl-footer .ap-foot-list .et_pb_text_inner p a { color: var(--apl-on-navy); }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-list .et_pb_text_inner ul li a:hover, body.ap-bold #et-boc .et-l .apl-footer .ap-foot-list .et_pb_text_inner p a:hover { color: #fff; text-decoration: underline; text-decoration-color: #8cc0ff; text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-contact .ap-foot-phone, body.ap-bold #et-boc .et-l .apl-footer .ap-foot-list .et_pb_text_inner p a.ap-foot-phone { font-family: var(--apl-font); font-weight: 700; color: #fff; font-size: 1.45rem; letter-spacing: -0.01em; }
@media (min-width: 1100px) {
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column { flex: 0 0 auto !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(1) { width: 24% !important; max-width: 24% !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(2) { width: 38% !important; max-width: 38% !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(3) { width: 14% !important; max-width: 14% !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(4) { width: calc(24% - 96px) !important; max-width: none !important; flex: 1 1 auto !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(2) .et_pb_text_inner ul { columns: 2; column-gap: 1.5rem; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(2) .et_pb_text_inner ul li { break-inside: avoid; }
}
body.ap-bold #et-boc .et-l .apl-footer .et_pb_social_media_follow li a.icon { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.16); color: #fff !important; }
body.ap-bold #et-boc .et-l .apl-footer .et_pb_social_media_follow li a.icon:hover { background: var(--apl-blue) !important; border-color: var(--apl-blue); }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-regions a { font-family: var(--apl-font); color: #fff; letter-spacing: 0.14em; }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-regions a:hover { color: #8cc0ff; }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-line { color: var(--apl-on-navy); }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-line strong { color: #fff; }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-line a { color: #fff; text-decoration-color: #8cc0ff; }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-line a:hover { color: #8cc0ff; text-decoration-color: currentColor; }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-legal, body.ap-bold #et-boc .et-l .apl-footer .ap-foot-legal span { color: var(--apl-on-navy); }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-legal-links a { color: var(--apl-on-navy); text-decoration-color: rgba(255, 255, 255, 0.35); }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-legal-links a:hover, body.ap-bold #et-boc .et-l .apl-footer .ap-foot-legal-links a:focus-visible { color: #8cc0ff; }
body.ap-bold #et-boc .et-l .apl-footer :focus-visible { outline-color: #8cc0ff; }
@media (max-width: 980px) { body.ap-bold #et-boc .et-l .apl-footer .ap-foot-list .et_pb_text_inner ul li a, body.ap-bold #et-boc .et-l .apl-footer .ap-foot-list .et_pb_text_inner p a:not(.ap-foot-phone) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; } }
body.ap-bold #et-boc .et-l .apl-footer .et_pb_social_media_follow li a.icon { min-width: 44px; min-height: 44px; box-sizing: border-box; }
/* phones: every footer link is at least 44 px tall (regions, the call line, the legal links, the logo) */
body.ap-bold #et-boc .et-l .apl-footer .ap-brand .et_pb_image a { min-width: 44px; min-height: 44px; display: flex; align-items: center; }
@media (max-width: 980px) {
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-regions a, body.ap-bold #et-boc .et-l .apl-footer .ap-foot-legal-links a { min-height: 44px; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-line a { display: inline-block; padding: 0.7rem 0; }
}
/* 900 to 1099 px: the brand block on its own row, then services in two columns, company and contact */
@media (min-width: 900px) and (max-width: 1099px) {
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols { flex-wrap: wrap !important; row-gap: 28px !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column { flex: 0 0 auto !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(1) { width: 100% !important; max-width: 100% !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(1) .et_pb_text_inner p { max-width: 560px; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(2) { width: calc(50% - 22px) !important; max-width: none !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(3) { width: calc(20% - 22px) !important; max-width: none !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(4) { width: calc(30% - 22px) !important; max-width: none !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(2) .et_pb_text_inner ul { columns: 2; column-gap: 1.5rem; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(2) .et_pb_text_inner ul li { break-inside: avoid; }
}

/* ====================================================================================================================
   17. Reduced motion
   ==================================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.ap-bold #et-boc .et-l .apl-btn .et_pb_button, body.ap-bold #et-boc .et-l .apl-btn.et_pb_button { transition: none !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-header-row.apl-pill { transition: none; }
}

/* Read more / equal visible text (ap-light.js section 4): the clamped text fades out over its last line; the toggle is a text
   button (44 px target); a hidden placeholder keeps card bottoms aligned in rows where only some cards have the toggle. */
body.ap-light .is-clamped { overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1.6em), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 1.6em), transparent); }
body.ap-light .apl-more-btn, body.ap-light #et-boc .et-l .apl-more-btn { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; width: auto; min-height: 44px; margin: 0.15rem 0 0; padding: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; outline: none; font: inherit; font-family: var(--apl-font); font-weight: 700; font-size: 0.95rem; color: var(--apl-blue-strong); text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
body.ap-light .apl-more-btn::after { content: ""; width: 0.55em; height: 0.55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); transition: transform 0.2s ease; }
body.ap-light .apl-more-btn[aria-expanded="true"]::after { transform: translateY(0.15em) rotate(-135deg); }
body.ap-light .apl-more-btn:focus { outline: none; }
body.ap-light .apl-more-btn:focus-visible { outline: 3px solid var(--apl-blue); outline-offset: 3px; border-radius: 6px; }
@media (hover: hover) { body.ap-light .apl-more-btn:hover { color: #003c9e; text-decoration: underline; text-underline-offset: 3px; } }
body.ap-light .apl-more-ph { visibility: hidden; pointer-events: none; }
body.ap-light .apl-band--blue .apl-more-btn, body.ap-light .apl-hero .apl-more-btn { color: #fff; }
/* Hero vertical centring (owner 2026-10-05): every hero's content is centred in the space below the header pill, so the gap
   pill bottom -> first line equals the gap last line -> hero bottom; when the content is taller than that space, both gaps
   are 32 px. Pill bottom = 12 + 64 px below 1240 px, 16 + 76 px from 1240 px. */
body.ap-light #et-boc .et-l .apl-hero { justify-content: center !important; padding-top: calc(var(--apl-hero-hdr, 76px) + 32px) !important; padding-bottom: 32px !important; }
@media (min-width: 1240px) { body.ap-light #et-boc .et-l .apl-hero { --apl-hero-hdr: 92px; } }
/* Hero video first paint: the poster is the stage's own background (preloaded on the home), so the photo shows at once even
   before the video element paints, if autoplay is blocked (Low Power Mode, data saver) or if the video fails to load. */
.ap-hero-stage--video { background: var(--ap-ink-2, #0e1a2b) var(--hero-poster) center / cover no-repeat; }
@media (max-width: 699px) { .ap-hero-stage--video { background-image: var(--hero-poster-m, var(--hero-poster)); } }
.ap-hero-stage--video video { background: transparent !important; }
/* Review cards as equal rows (owner, 2026-10-06): no masonry; each card's text is clamped by the shared equal-rows component
   (ap-light.js section 4), so every card in a row shows the same number of lines, with Read more where the review is longer */
body.ap-light .ap-rv-grid.apl-eq { align-items: stretch; grid-auto-rows: auto; }
body.ap-light .ap-rv-grid.apl-eq > .ap-rv-card { display: flex; flex-direction: column; margin: 0; }
body.ap-light .ap-rv-grid.apl-eq .ap-rv-body { overflow: hidden; }
body.ap-light .ap-rv-grid.apl-eq .ap-rv-body p { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; margin: 0; }
body.ap-light .ap-rv-grid.apl-eq .ap-rv-body.is-clamped { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1.6em), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 1.6em), transparent); }
body.ap-light .ap-rv-grid.apl-eq .apl-more-btn { align-self: flex-start; margin-top: 0.4rem; }
/* nine top-level items since /projects/ joined the menu (review M6): tighter spacing on mid-width desktops so the phone link keeps clear */
@media (min-width: 1240px) and (max-width: 1599px) {
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu { gap: 1.05rem; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li > a { font-size: 0.9rem; }
}
body.ap-light .ap-rv-grid.apl-eq .ap-rv-body { font-size: 0.95rem; line-height: 1.6; }
/* Map labels (review re-check, 2026-10-06): dark town names on a white halo read on the painted region and on the pale
   background alike (white names with a thin outline faded where they crossed the region edge); the paint streaks stay on
   the overview only, where they sweep from the region's edge (zoomed in they read as stray bars) */
body.ap-light .ap-map-widget:not(.ap-dark) .ap-ml { fill: var(--apl-ink); stroke: #fff; stroke-opacity: 0.95; }
body.ap-light .ap-map-widget:not(.ap-dark) .zoomed .ap-dashgrp, body.ap-light .ap-map-widget:not(.ap-dark) .ap-stage.zoomed .ap-dashgrp { opacity: 0 !important; }

/* ==== Client round 2026-10-08 ==== */
/* 1. header: logo only (as on allpainting.ca), a little larger */
body.ap-bold #et-boc .et-l .apl-header .ap-brand-name { display: none !important; }
body.ap-bold #et-boc .et-l .apl-header .ap-brand-logo img { width: 46px !important; height: auto !important; }
/* 4. menu hover: a soft glow on the label instead of the sliding bar */
body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li > a::after { display: none !important; }
body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li > a { transition: color 0.2s ease, text-shadow 0.25s ease; }
@media (hover: hover) {
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li:hover > a { text-shadow: 0 0 14px rgba(1, 111, 255, 0.55); }
  body.ap-bold #et-boc .et-l .apl-header:not(.is-solid) .ap-nav .et-menu-nav > ul.et-menu > li:hover > a { text-shadow: 0 0 12px rgba(255, 255, 255, 0.85); }
}
body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li > a:focus-visible { text-shadow: 0 0 14px rgba(1, 111, 255, 0.55); }
/* 3. the old site's blue neon glow on card and box hover (ap.server-1.ca: 0 0 35px rgba(1,111,255,.25), blue border) */
body.ap-light #et-boc .et-l :is(.aph-card, .apl-fcard, .ap-why-item, .app-card, .ap-rv-card, .aph-cost-card, .apl-icard, .ap-local-panel, .app-glance, .ap-fact) { transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
@media (hover: hover) {
  body.ap-light #et-boc .et-l :is(.aph-card, .apl-fcard, .ap-why-item, .app-card, .ap-rv-card, .aph-cost-card, .apl-icard, .ap-local-panel, .app-glance, .ap-fact):hover {
    box-shadow: 0 0 35px 0 rgba(1, 111, 255, 0.25) !important; border-color: #016fff !important; }
  body.ap-light #et-boc .et-l .aph-tile:hover { box-shadow: 0 0 35px 0 rgba(1, 111, 255, 0.35) !important; }
}
/* 5. no Read more anywhere: every box shows all its text */
body.ap-light .apl-more-btn, body.ap-light .ap-rv-more-btn, body.ap-light .apl-more-ph { display: none !important; }
body.ap-light .is-clamped { max-height: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
body.ap-light .ap-rv-card p, body.ap-light #et-boc .et-l .ap-rv-card p { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; max-height: none !important; }
body.ap-light #et-boc .et-l .app-card__text, body.ap-light #et-boc .et-l .ap-blog .post-content-inner { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; min-height: 0 !important; }
body.ap-light #et-boc .et-l .ap-hero .ap-lead .et_pb_text_inner, body.ap-light #et-boc .et-l .app-hero-lead { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
body.ap-light #et-boc .et-l .ap-rv-track { align-items: stretch !important; }
/* reviews list header: Google's rating and count, as on allpainting.ca */
body.ap-light .ap-rv-head--count { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.65rem; margin: 0 0 1.25rem; padding: 0.85rem 1.1rem; border-radius: 14px; background: #fff; color: var(--apl-ink); font-family: var(--apl-font); font-size: 1rem; width: fit-content; box-shadow: var(--apl-shadow-sm); }
body.ap-light .ap-rv-head--count .ap-rv-word { font-weight: 800; }
body.ap-light .ap-rv-head--count strong, body.ap-light #et-boc .et-l .ap-rv-head--count strong { font-weight: 800; color: var(--apl-ink, #101828) !important; }
body.ap-light .ap-rv-head--count .ap-rv-sep { color: var(--apl-line-strong); }
body.ap-light .ap-rv-head--count a { color: var(--apl-ink) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
body.ap-light .ap-rv-head--count svg { width: 20px; height: 20px; color: #f5b301; fill: currentColor; }
/* footer: the visit-us heading is the business name with a pin */
body.ap-light #et-boc .et-l .ap-foot-visit { display: flex; align-items: center; gap: 0.45rem; }
body.ap-light #et-boc .et-l .ap-foot-visit .ap-pin-ic { flex: none; color: #8cc0ff; }
/* 10. sticky FAQ column: Get a free quote, Call and Email as tidy buttons (no "Anything else?" line); phones: quote and call */
body.ap-light #et-boc .et-l .ap-faq-contactwrap { width: 100%; }
body.ap-light .ap-faq-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 6px 0 0; padding: 0; }
body.ap-light #et-boc .et-l .ap-faq-contact a.ap-faq-btn, body.ap-light .ap-faq-contact a.ap-faq-btn { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 46px; padding: 11px 20px 11px 16px; border-radius: 999px;
  border: 1.5px solid #016fff; background: #fff; color: var(--apl-ink, #0b1a33) !important; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none !important; overflow-wrap: anywhere;
  transition: box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
body.ap-light .ap-faq-contact a.ap-faq-btn svg { flex: none; width: 18px; height: 18px; color: #016fff; }
body.ap-light #et-boc .et-l .ap-faq-contact a.ap-faq-btn--quote, body.ap-light .ap-faq-contact a.ap-faq-btn--quote { background: #0a66f2; color: #fff !important; padding: 11px 18px 11px 22px; }
body.ap-light .ap-faq-contact a.ap-faq-btn--quote svg { color: #fff; }
@media (hover: hover) { body.ap-light .ap-faq-contact a.ap-faq-btn:hover { box-shadow: 0 0 24px 0 rgba(1, 111, 255, 0.35); } }
body.ap-light .ap-faq-contact a.ap-faq-btn:focus-visible { outline: 3px solid #016fff; outline-offset: 3px; }
@media (max-width: 1024px) { body.ap-light .ap-faq-contact { flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 767px) {
  body.ap-light .ap-faq-contact a.ap-faq-btn--mail { display: none !important; }
  body.ap-light .ap-faq-contact { flex-direction: column; align-items: stretch; }
  body.ap-light #et-boc .et-l .ap-faq-contact a.ap-faq-btn, body.ap-light .ap-faq-contact a.ap-faq-btn { justify-content: center; }
}
/* 2nd video: the quote pair on the blue reviews band */
body.ap-light #et-boc .et-l .aph-cta-row--dark .apl-cta-pair { justify-content: flex-start; }
@media (max-width: 480px) {
  body.ap-light #et-boc .et-l .aph-cta-row--dark .apl-cta-pair { flex-direction: column; align-items: stretch; width: 100%; }
  body.ap-light #et-boc .et-l .aph-cta-row--dark .apl-cta-pair .et_pb_button_module_wrapper, body.ap-light #et-boc .et-l .aph-cta-row--dark .apl-cta-pair .et_pb_button { width: 100% !important; justify-content: center; }
}
/* 2nd video: phones get a slim sticky bar with Get a free quote and Call once the hero has scrolled away */
.ap-mbar { display: none; }
@media (max-width: 767px) {
  .ap-mbar { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 9970; gap: 8px; padding: 8px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 24px rgba(11, 26, 51, 0.22); border: 1px solid #dfe5ef; transform: translateY(140%); transition: transform 0.3s ease; }
  .ap-mbar.is-on { transform: none; }
  body.ap-menu-open .ap-mbar { transform: translateY(140%); }
  .ap-mbar a { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1.1;
    text-decoration: none !important; white-space: nowrap; }
  .ap-mbar .ap-mbar-quote { background: #0a66f2; color: #fff !important; }  /* 5.0:1 with white */
  .ap-mbar .ap-mbar-call { background: #fff; color: #0b1a33 !important; border: 1.5px solid #016fff; }
  .ap-mbar svg { flex: none; width: 17px; height: 17px; }
  body.ap-has-mbar #page-container { padding-bottom: 76px; }
}
/* 11. contact form: a taller message box */
body.ap-light #et-boc .et-l .apl-form textarea, body.ap-light #et-boc .et-l .apl-form .et_pb_contact_form textarea { min-height: 240px !important; resize: vertical; }
@media (max-width: 767px) { body.ap-light #et-boc .et-l .apl-form textarea, body.ap-light #et-boc .et-l .apl-form .et_pb_contact_form textarea { min-height: 200px !important; } }
/* 8. 13-inch laptops (1240 to 1599 px): the menu never wraps under itself; each item stays on one line */
@media (min-width: 1240px) {
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu { flex-wrap: nowrap !important; justify-content: center !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li, body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li > a { white-space: nowrap; }
}
@media (min-width: 1240px) {
  /* the logo-only brand no longer needs a quarter of the pill: the side columns shrink to their content, so the menu and the
     longer "Get a free quote" button keep clear of each other on 13-inch laptops */
  body.ap-bold #et-boc .et-l .apl-header .ap-header-row > .et_pb_column:first-child, body.ap-bold #et-boc .et-l .apl-header .ap-header-row > .et_pb_column:last-child { flex: 0 0 auto !important; width: auto !important; max-width: none !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-header-row > .et_pb_column:nth-child(2) { flex: 1 1 auto !important; width: auto !important; max-width: none !important; min-width: 0; align-items: center !important; }
}
@media (min-width: 1240px) { body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_pb_menu__wrap { justify-content: center !important; } body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_pb_menu__menu { flex: 0 1 auto !important; } }
/* guide and project card titles show in full (no clamp, client round 2026-10-08) */
body.ap-light #et-boc .et-l .app-card__title, body.ap-light .app-card .app-card__title { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; max-height: none !important; }
/* card rows (client round 2026-10-08): a card that ends on a quote button keeps it on the row's common bottom line
   (perf 2026-10-11: the description gets .aph-desc-quote from ap-bold.php instead of :has(.aph-card-quote); that :has made Chromium restyle
   the whole page on every Trustindex layout read, a 17 s freeze) */
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_description.aph-desc-quote { align-self: stretch; display: flex; flex-direction: column; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_description.aph-desc-quote > .et_pb_blurb_description_inner, body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card .et_pb_blurb_description.aph-desc-quote > div { display: flex; flex-direction: column; flex: 1 1 auto; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card p.aph-card-quote { margin: auto 0 0 !important; padding-top: 1rem !important; }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card a.aph-card-quote-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.25rem; border-radius: 999px; background: #0a66f2; color: #fff !important;
  font-weight: 700; font-size: 0.95rem; text-decoration: none !important; transition: box-shadow 0.25s ease, background-color 0.25s ease; }
@media (hover: hover) { body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card a.aph-card-quote-btn:hover { background: var(--apl-blue-strong, #0050c8); box-shadow: 0 0 24px 0 rgba(1, 111, 255, 0.35); } }
body.ap-light:is(.home, .ap-homelike) #et-boc .et-l .aph-card a.aph-card-quote-btn:focus-visible { outline: 3px solid #0a66f2; outline-offset: 3px; }
/* header logo, logo-only (client round 2026-10-08): desktop 46 -> 56 px wide (+22%), phones and tablets 44 -> 50 px (+14%);
   the pill keeps its height (76 / 64 px) and the logo stays centred */
@media (min-width: 1240px) {
  body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image, body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image a { width: 56px !important; max-width: none !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-brand-logo img, body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image img { width: 56px !important; max-width: none !important; height: auto !important; }
}
@media (max-width: 1239px) {
  body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image, body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image a { width: 50px !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-brand-logo img, body.ap-bold #et-boc .et-l .apl-header .ap-brand .et_pb_image img { width: 50px !important; height: auto !important; }
}
/* official Trustindex widgets render exactly as Trustindex outputs them (Mayank 2026-10-14); only the reserved space stays */
body.ap-light .ap-ti { width: 100%; min-height: 120px; }
/* UI round 17c (2026-10-09): the old site's blue hover glow also on the post cards (projects and guides on the home, the area
   pages and the blog archive) and on the "Every service we paint" link cards (calculator, visualizer) */
@media (hover: hover) {
  body.ap-light #et-boc .et-l .apl-blog article.et_pb_post:hover,
  body.ap-light #et-boc .et-l .apl-svc-links .et_pb_text_inner a:hover { box-shadow: 0 0 35px 0 rgba(1, 111, 255, 0.25) !important; border-color: #016fff !important; }
}
/* map region panel: the call button is the outline partner of the quote button (phones and tablets; client round 2026-10-08) */
body.ap-light .ap-map-widget:not(.ap-dark) .ap-cta.ap-cta--call { background: #fff; color: var(--apl-ink, #101828) !important; border: 1.5px solid var(--apl-blue); margin-top: 10px; }
@media (hover: hover) { body.ap-light .ap-map-widget:not(.ap-dark) .ap-cta.ap-cta--call:hover { background: var(--apl-blue-50, #eef4ff); } }
@media (min-width: 1240px) { body.ap-light .ap-map-widget .ap-cta.ap-cta--call { display: none; } }
/* R7 review: a guides row with 1 or 2 cards keeps the 3-up card size and is centred (no empty slot) */
@media (min-width: 1101px) {
  body.ap-light #et-boc .et-l .app-grid.ap-guides:has(> .app-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, calc((100% - 56px) / 3))); justify-content: center; }
  body.ap-light #et-boc .et-l .app-grid.ap-guides:has(> .app-card:only-child) { grid-template-columns: minmax(0, calc((100% - 56px) / 3)); justify-content: center; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  body.ap-light #et-boc .et-l .app-grid.ap-guides:has(> .app-card:only-child) { grid-template-columns: minmax(0, calc((100% - 24px) / 2)); justify-content: center; }
}
/* R7 review: on /reviews/ the "Leave a Google review" button lines up with the quote + call pair below it */
body.ap-light #et-boc .et-l .aph-reviews.apl-wall .apl-cta-pair { justify-content: flex-start !important; }
body.ap-light #et-boc .et-l .apl-reviews .aph-cta-row--dark .apl-cta-pair { justify-content: flex-start !important; }
/* R8 (client, Safari): the footer's legal row stays on one line: the copyright, then Privacy Policy, Terms of Service and AI
   Citation & Learning, starting on the grid's left edge (a global p max-width of 600 px made it wrap after the first item) */
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-legal { max-width: none !important; width: auto; margin: 0; }
@media (min-width: 768px) {
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-bottom .ap-foot-legal { flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 0 2rem !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-legal > span:first-child, body.ap-bold #et-boc .et-l .apl-footer .ap-foot-legal-links { white-space: nowrap; flex-wrap: nowrap !important; }
}
/* R8 (client): the header dropdowns are a proper vertical panel. The items were laid out as one inline row (and inherited the
   top menu's no-wrap), so they ran out of the 300 px card over the hero. Each item is now a full-width line, the card sizes to
   its content, it opens on hover and on keyboard focus, and it reads the same over the hero and on the scrolled header. */
@media (min-width: 1240px) {
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav ul.et-menu li ul.sub-menu { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch;
    width: max-content !important; min-width: 260px; max-width: 340px; height: auto !important; padding: 0.5rem !important; gap: 2px; z-index: 10000; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav ul.et-menu li ul.sub-menu li { display: block !important; float: none !important; width: 100% !important; white-space: normal !important; margin: 0 !important; padding: 0 !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav ul.et-menu li ul.sub-menu li a { display: block !important; width: 100% !important; white-space: nowrap !important; line-height: 1.3 !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et-menu-nav > ul.et-menu > li.menu-item-has-children:focus-within > ul.sub-menu { visibility: visible !important; opacity: 1 !important; pointer-events: auto; }
}
/* R8b (Mayank, from the old ap.server-1.ca tiles): at rest a soft, even dark tint over the whole photo (rgba(0,0,0,.4)), the white
   title bottom-left (22 px / 700, 20 px on phones; 20 px in from the left and bottom), the white check-circle top-right (35 px,
   30 px on phones; 20 px from the top and right, no disc), radius 15 px, shadow 0 2px 18px rgba(0,0,0,.3). The blue overlay
   stays on hover only. Our new photos are kept. */
body.ap-light #et-boc .et-l .apl-tile { border-radius: 15px !important; box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.3) !important; overflow: hidden; }
body.ap-light #et-boc .et-l .apl-tile .et_pb_main_blurb_image::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.4); pointer-events: none; }
body.ap-light #et-boc .et-l .apl-tile::before { top: 20px; right: 20px; width: 35px; height: 35px; }
body.ap-light #et-boc .et-l .apl-tile .et_pb_blurb_content::after { content: none; }
body.ap-light #et-boc .et-l .apl-tile .et_pb_blurb_container { padding: 0 20px 20px; }
body.ap-light #et-boc .et-l .apl-tile h3.et_pb_module_header, body.ap-light #et-boc .et-l .apl-tile h3.et_pb_module_header a { font-size: 22px !important; font-weight: 700 !important; line-height: 24px !important; text-shadow: none !important; }
@media (max-width: 767px) {
  body.ap-light #et-boc .et-l .apl-tile::before { width: 30px; height: 30px; }
  body.ap-light #et-boc .et-l .apl-tile h3.et_pb_module_header, body.ap-light #et-boc .et-l .apl-tile h3.et_pb_module_header a { font-size: 20px !important; }
}

/* ==== Performance (2026-10-11, BUILD-REPORT §18p) ==== */
/* Trustindex gives every review card (.ti-inner), its header and Load more a backdrop-filter: blur(0px). It draws nothing, but each one is
   a separate backdrop layer that Safari recomposites on every scroll frame (96 cards on home and area pages). */
body.ap-light .ap-ti .ti-widget .ti-inner, body.ap-light .ap-ti .ti-widget .ti-widget-header, body.ap-light .ap-ti .ti-widget .ti-load-more-reviews-button { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* the scrolled (silver) header: its 14 px backdrop blur sat under a 90% opaque fill, so it barely showed, yet Safari re-blurred the page
   under the fixed pill on every scroll frame. The fill is now 96% opaque with no blur. translateZ(0) keeps the pill the containing block
   of the phone drawer (position: fixed), which the backdrop-filter used to provide. The glass pill over the hero keeps its blur. */
body.ap-bold #et-boc .et-l .apl-header .ap-header-row.apl-pill { transform: translateZ(0); }
body.ap-bold #et-boc .et-l .apl-header.is-solid .ap-header-row.apl-pill { background: rgb(226, 224, 228); -webkit-backdrop-filter: none; backdrop-filter: none; }  /* pre-live (audit 04 F12): opaque, so page text never shows through */
/* R10 (client): the footer link columns sit together in a tight grid: the brand column takes the left, and Services (two
   short lists), Company and Talk to us follow at their own widths with one even gap, instead of being spread over fixed shares */
@media (min-width: 1200px) {
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols { display: grid !important; grid-template-columns: minmax(0, 1fr) max-content max-content max-content; column-gap: clamp(44px, 4vw, 72px) !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(n) { width: auto !important; max-width: none !important; margin: 0 !important; flex: none !important; }  /* :nth-child(n) outranks the R7 per-column widths */
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(1) .et_pb_text_inner p { max-width: 330px; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(2) .et_pb_text_inner ul { columns: auto; display: grid; grid-template-columns: max-content max-content; grid-template-rows: repeat(7, auto); grid-auto-flow: column; column-gap: 2rem; }  /* pre-live: 13 services, 7 + 6 */
}
/* R10 (client): the address (pin heading and street lines) opens Google Maps */
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-visit a.ap-foot-map { display: inline-flex; align-items: center; gap: 0.45rem; color: #fff; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color 0.2s; }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-visit a.ap-foot-map:hover, body.ap-bold #et-boc .et-l .apl-footer .ap-foot-visit a.ap-foot-map:focus-visible { text-decoration-color: #8cc0ff; }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-addr { padding-bottom: 0.35rem; }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-hours { color: var(--apl-on-navy); }
/* R10 (client, as on redstonecontracting.com): the bottom row has the copyright and legal links on the left and
   "All Painting AI Summary:" with the assistant icons on the right */
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-bottom-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px; font-size: 14px; line-height: 1.4; color: var(--apl-on-navy); }
body.ap-bold #et-boc .et-l .apl-footer .ap-foot-bottom-in .ap-foot-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 0 1.4rem; font-size: 14px; padding: 0; }
body.ap-bold #et-boc .et-l .apl-footer .ap-ai-sum { display: flex; align-items: center; gap: 12px; }
body.ap-bold #et-boc .et-l .apl-footer .ap-ai-sum-label { color: var(--apl-on-navy); font-size: 14px; white-space: nowrap; }
body.ap-bold #et-boc .et-l .apl-footer .ap-ai-sum ul { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
body.ap-bold #et-boc .et-l .apl-footer .ap-ai-sum li { list-style: none; margin: 0; padding: 0; }
body.ap-bold #et-boc .et-l .apl-footer .ap-ai-sum a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); transition: background-color 0.2s, border-color 0.2s; }
body.ap-bold #et-boc .et-l .apl-footer .ap-ai-sum a:hover, body.ap-bold #et-boc .et-l .apl-footer .ap-ai-sum a:focus-visible { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.4); }
body.ap-bold #et-boc .et-l .apl-footer .ap-ai-sum svg { width: 18px; height: 18px; display: block; }
@media (min-width: 768px) {
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-bottom-in .ap-foot-legal { flex-wrap: nowrap !important; white-space: nowrap; }
}
@media (max-width: 767px) {
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-bottom-in { flex-direction: column; align-items: flex-start; gap: 12px; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-ai-sum { flex-wrap: wrap; gap: 8px 12px; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-ai-sum a { width: 44px; height: 44px; }
}
/* pre-live (audit 03 M4): the line under the tile grid that links the five services without a tile */
body.ap-light #et-boc .et-l .aph-tiles-also-row { margin-top: 24px !important; }
body.ap-light #et-boc .et-l .aph-tiles-also { text-align: center; margin: 0 auto; max-width: 860px; }
body.ap-light #et-boc .et-l .aph-tiles-also a { color: var(--apl-ink, #0f1b2d); text-decoration: underline; text-decoration-color: var(--apl-blue, #0a6cf0); text-underline-offset: 3px; font-weight: 600; }
body.ap-light #et-boc .et-l .aph-tiles-also a:hover { color: var(--apl-blue, #0a6cf0); }
/* ====================================================================================================================
   Pre-live (audit 04): UI and accessibility fixes
   ==================================================================================================================== */
/* F4: a long review's text box scrolls on its own, but the wheel chains on to the page at its ends instead of being trapped */
body.ap-light .ap-ti .ti-widget .ti-review-content, body.ap-light .ap-ti .ti-widget .ti-review-text-container { overscroll-behavior: auto !important; }
body.ap-light .ap-ti .ti-widget [data-ap-scrollbox]:focus-visible { outline: 3px solid #0a66f2 !important; outline-offset: 2px; }
/* F8: skip link, visible on keyboard focus */
.ap-skip-link { position: absolute; left: 12px; top: -100px; z-index: 100000; padding: 10px 16px; border-radius: 10px; background: #0b1a33; color: #fff !important; font-weight: 700; text-decoration: none; }
.ap-skip-link:focus { top: 12px; }
/* F9: no heading ends on a single stranded word where the browser can balance it */
body.ap-light #et-boc .et-l h2, body.ap-light #et-boc .et-l h3, body.ap-light #et-boc .et-l .ap-h2, body.ap-light #et-boc .et-l .ap-h3 { text-wrap: balance; }
/* F6: 320 to 359 px: the header phone circle gives way (the sticky bar carries the call), and the bar's buttons may shrink */
@media (max-width: 359px) {
  body.ap-bold #et-boc .et-l .apl-header .ap-call { display: none !important; }
  .ap-mbar { left: 6px; right: 6px; gap: 6px; padding: 6px; }
  .ap-mbar a { min-width: 0; padding: 0 8px; font-size: 13.5px; gap: 6px; }
  .ap-mbar svg { width: 15px; height: 15px; }
}
/* F10: 641 to 899 px footer: the brand block on its own row, Services in two columns across the width, then Company and Talk to us */
@media (min-width: 641px) and (max-width: 899px) {
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols { flex-wrap: wrap !important; row-gap: 28px !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column { flex: 0 0 auto !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(1), body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(2) { width: 100% !important; max-width: 100% !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(1) .et_pb_text_inner p { max-width: 560px; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(3), body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(4) { width: calc(50% - 16px) !important; max-width: none !important; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(2) .et_pb_text_inner ul { columns: 2; column-gap: 1.5rem; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-cols > .et_pb_column:nth-child(2) .et_pb_text_inner ul li { break-inside: avoid; }
}
/* F11: 641 to 1199 px: the before/after tabs stack the thumbnail above a centred label, so labels do not wrap to three lines */
@media (min-width: 641px) and (max-width: 1199px) {
  body.ap-light .ap-ba-tabs button { flex-direction: column; align-items: center; text-align: center; gap: 0.45rem; padding: 0.6rem 0.5rem; }
  body.ap-light .ap-ba-tabs button img { width: 100%; max-width: 140px; }
}
/* ====================================================================================================================
   Pre-live batch 7 (audit 07, phones)
   ==================================================================================================================== */
/* M1: the page does not scroll behind the open menu (the root scroller is locked too, not only the body), and a long
   drawer scrolls inside itself without chaining to the page. ap-bold.js also pins the body at its scroll position. */
html:has(body.ap-menu-open) { overflow: hidden !important; }
body.ap-menu-open.ap-scroll-lock { position: fixed !important; left: 0; right: 0; width: 100%; overflow: hidden !important; }
@media (max-width: 1239px) {
  body.ap-bold #et-boc .et-l .apl-header .et_mobile_menu { max-height: calc(100dvh - 96px); overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* M5: the quote + call pair stays visible at the bottom of the drawer (iPhone SE) */
  body.ap-bold #et-boc .et-l .apl-header .et_mobile_menu li.ap-drawer-cta { position: sticky; bottom: 0; z-index: 2; background: #fff; padding-top: 12px !important; padding-bottom: 12px !important; box-shadow: 0 -8px 16px -12px rgba(16, 24, 40, 0.35); }
  /* M4: the current page and its section stand out in the drawer */
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu li.current-menu-item > a, body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu li.menu-item-has-children.visible > ul.sub-menu li.current-menu-item > a,
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu li.current-menu-ancestor > .ap-drawer-parent { color: var(--apl-blue, #0a66f2) !important; }
  body.ap-bold #et-boc .et-l .apl-header .ap-nav .et_mobile_menu li.current-menu-item > a { box-shadow: inset 3px 0 0 var(--apl-blue, #0a66f2); padding-left: 10px !important; }
}
/* M8: tap targets of at least 44 px on phones */
@media (max-width: 980px) {
  body.ap-light #et-boc .et-l .apl-fact .et_pb_blurb_description a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  body.ap-light .app-crumbs a, body.ap-light .app-chips a { display: inline-flex; align-items: center; min-height: 44px; }
  body.ap-light .ap-map-widget .ap-region-link, body.ap-light #et-boc .et-l .ap-map-note a { display: inline-flex; align-items: center; min-height: 44px; }
  body.ap-bold #et-boc .et-l .apl-footer .ap-foot-visit a.ap-foot-map { min-height: 44px; }
}
/* M9: body copy at 16 px on phones (cards are one column there, so no equal-height row changes) */
@media (max-width: 767px) {
  body.ap-light #main-content .et_pb_text_inner p, body.ap-light #main-content .et_pb_text_inner li, body.ap-light #main-content .et_pb_blurb_description p,
  body.ap-light #main-content .et_pb_toggle_content p, body.ap-light #main-content .app-band p, body.ap-light #main-content .app-band li { font-size: 16px !important; }
}
/* M11: viewport-fit=cover (meta in ap-bold.php), so keep the fixed header and the sticky bar inside the safe area */
.ap-mbar { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
body.ap-bold #et-boc .et-l .ap-header.apl-header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* batch 8 (live parity): the reviews band's intro links (client reviews, about our team) on the blue band */
body.ap-light #et-boc .et-l .aph-reviews .ap-shead-lead a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.ap-light #et-boc .et-l .aph-reviews .ap-shead-lead a:hover, body.ap-light #et-boc .et-l .aph-reviews .ap-shead-lead a:focus-visible { text-decoration-thickness: 2px; }