/*
 * All-Pro shared experience layer.
 * Loaded last by the public build so legacy content keeps its SEO value while
 * every page shares one current, accessible visual language.
 */

:root {
  --future-ink: #172630;
  --future-ink-soft: #2c3b44;
  --future-paper: #fffdf8;
  --future-cream: #f7f2e7;
  --future-mist: #eaf3ef;
  --future-sky-soft: #eaf4f8;
  --future-green: #24614f;
  --future-green-bright: #2e7961;
  --future-copper: #d36224;
  --future-copper-dark: #a84416;
  --future-sky: #2d7fa3;
  --future-yellow: #f0c34d;
  --future-line: #cbd5d0;
  --future-muted: #5d696d;
  --future-shadow-sm: 0 8px 20px rgba(23, 38, 48, 0.08);
  --future-shadow-lg: 0 24px 55px rgba(23, 38, 48, 0.15);
  --future-radius: 6px;
  --future-shell: 1180px;
}

body.allpro-future-ui {
  background: var(--future-cream);
  color: var(--future-ink);
  font-family: Aptos, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0;
  margin: 0;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

body.allpro-future-ui *,
body.allpro-future-ui *::before,
body.allpro-future-ui *::after {
  box-sizing: border-box;
}

body.allpro-future-ui h1,
body.allpro-future-ui h2,
body.allpro-future-ui h3,
body.allpro-future-ui h4 {
  color: inherit;
  font-family: "Arial Black", Aptos, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1.04;
  text-wrap: balance;
}

body.allpro-future-ui h1 {
  font-size: 3.45rem;
}

body.allpro-future-ui h2 {
  font-size: 2.45rem;
}

body.allpro-future-ui h3 {
  font-size: 1.24rem;
  line-height: 1.22;
}

body.allpro-future-ui p,
body.allpro-future-ui li,
body.allpro-future-ui label,
body.allpro-future-ui input,
body.allpro-future-ui select,
body.allpro-future-ui textarea,
body.allpro-future-ui button {
  letter-spacing: 0;
}

body.allpro-future-ui img {
  max-width: 100%;
}

body.allpro-future-ui a {
  text-underline-offset: 0.18em;
}

body.allpro-future-ui a:focus-visible,
body.allpro-future-ui button:focus-visible,
body.allpro-future-ui input:focus-visible,
body.allpro-future-ui select:focus-visible,
body.allpro-future-ui textarea:focus-visible,
body.allpro-future-ui summary:focus-visible {
  outline: 3px solid var(--future-yellow);
  outline-offset: 3px;
}

body.allpro-future-ui .skip-link,
body.allpro-future-ui .ld-skip {
  background: var(--future-ink);
  border-radius: 0 0 var(--future-radius) 0;
  color: #fff;
  font-weight: 800;
  left: 0;
  padding: 10px 14px;
  position: fixed;
  top: 0;
  transform: translateY(-120%);
  z-index: 10000;
}

body.allpro-future-ui .skip-link:focus,
body.allpro-future-ui .ld-skip:focus {
  transform: translateY(0);
}

/* Shared navigation */
body.allpro-future-ui :is(.nav, .hub-nav, .pm-nav, .how-nav, .net-nav, .opp-nav, .qnav, .ld-header, .pi-site-header) {
  background: rgba(255, 253, 248, 0.96);
  border-bottom: 1px solid rgba(23, 38, 48, 0.13);
  border-top: 4px solid var(--future-green);
  color: var(--future-ink);
  position: sticky;
  top: 0;
  transition: box-shadow 180ms ease, background-color 180ms ease;
  z-index: 1000;
}

body.allpro-future-ui :is(.nav, .hub-nav, .pm-nav, .how-nav, .net-nav, .opp-nav, .qnav, .ld-header, .pi-site-header).future-nav-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 28px rgba(23, 38, 48, 0.12);
}

body.allpro-future-ui :is(.nav-inner, .hub-nav-inner, .pm-nav-inner, .how-nav-inner, .net-nav-inner, .opp-nav-inner, .qnav-inner, .ld-header-inner, .pi-nav) {
  margin-inline: auto;
  max-width: var(--future-shell);
  min-height: 72px;
  padding-inline: 22px;
}

body.allpro-future-ui :is(.nav-logo, .hub-brand, .pm-brand, .how-brand, .net-brand, .opp-brand, .qbrand, .ld-brand, .pi-brand) {
  color: var(--future-ink);
  font-weight: 900;
  text-decoration: none;
}

body.allpro-future-ui :is(.nav-logo-img, .hub-brand img, .pm-brand img, .how-brand img, .net-brand img, .opp-brand img, .qbrand img, .ld-brand img, .pi-brand img) {
  filter: drop-shadow(0 3px 4px rgba(23, 38, 48, 0.14));
}

body.allpro-future-ui :is(.nav-links, .hub-nav-links, .pm-nav-links, .how-nav-links, .net-links, .opp-nav-links, .qnav-links, .ld-nav, .pi-nav-links) a:not(.nav-cta):not(.hub-quote):not(.hub-call):not(.pm-nav-cta):not(.opp-button):not(.qnav-cta):not(.pi-nav-cta) {
  color: var(--future-ink);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  text-transform: none;
}

body.allpro-future-ui :is(.nav-links, .hub-nav-links, .pm-nav-links, .how-nav-links, .net-links, .opp-nav-links, .qnav-links, .ld-nav, .pi-nav-links) a[aria-current="page"] {
  color: var(--future-copper-dark);
  text-decoration: underline;
  text-decoration-color: var(--future-yellow);
  text-decoration-thickness: 3px;
}

body.allpro-future-ui :is(.nav-cta, .hub-quote, .pm-nav-cta, .header-cta, .qnav-cta, .pi-nav-cta) {
  background: var(--future-copper);
  border: 2px solid var(--future-copper);
  border-radius: var(--future-radius);
  box-shadow: 0 5px 0 var(--future-copper-dark);
  color: #fff;
  font-weight: 900;
  min-height: 42px;
  padding: 9px 15px;
  text-decoration: none;
}

body.allpro-future-ui :is(.nav-phone, .hub-call, .ld-call-link) {
  color: var(--future-green);
  font-weight: 900;
}

body.allpro-future-ui :is(.nav-phone, .hub-call, .ld-call-link) a {
  color: inherit;
}

body.allpro-future-ui a.hub-call {
  background: var(--future-copper-dark) !important;
  color: #fff !important;
}

body.allpro-future-ui .future-menu-toggle {
  align-items: center;
  background: var(--future-paper);
  border: 2px solid var(--future-green);
  border-radius: var(--future-radius);
  color: var(--future-green);
  cursor: pointer;
  display: none;
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  gap: 8px;
  justify-content: center;
  min-height: 46px;
  padding: 8px 11px;
}

body.allpro-future-ui .future-menu-toggle__icon {
  display: grid;
  gap: 4px;
  width: 18px;
}

body.allpro-future-ui .future-menu-toggle__icon span {
  background: currentColor;
  border-radius: 999px;
  display: block;
  height: 2px;
  transition: opacity 160ms ease, transform 160ms ease;
  width: 18px;
}

body.allpro-future-ui .future-menu-toggle[aria-expanded="true"] .future-menu-toggle__icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

body.allpro-future-ui .future-menu-toggle[aria-expanded="true"] .future-menu-toggle__icon span:nth-child(2) {
  opacity: 0;
}

body.allpro-future-ui .future-menu-toggle[aria-expanded="true"] .future-menu-toggle__icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Buttons and commands */
body.allpro-future-ui :is(
  .btn,
  .ld-btn,
  .pi-btn,
  .opp-button,
  .hub-button,
  .hub-btn,
  .list-btn,
  .pm-button,
  .how-btn,
  .qbtn,
  .remodel-btn,
  .net-btn,
  .sidebar-btn,
  .cta-inline
) {
  align-items: center;
  border-radius: var(--future-radius) !important;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  letter-spacing: 0;
  min-height: 48px;
  padding: 11px 18px;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

body.allpro-future-ui :is(
  .btn-primary,
  .btn-red,
  .ld-btn-primary,
  .pi-primary,
  .opp-button-primary,
  .hub-button-primary,
  .hub-btn-primary,
  .list-btn-primary,
  .pm-button-primary,
  .how-btn-primary,
  .qbtn-primary,
  .remodel-btn-primary,
  .net-btn-primary,
  .sidebar-btn
) {
  background: var(--future-copper);
  border: 2px solid var(--future-copper);
  box-shadow: 0 6px 0 var(--future-copper-dark);
  color: #fff;
}

body.allpro-future-ui :is(
  .btn-secondary,
  .btn-outline,
  .ld-btn-secondary,
  .pi-secondary,
  .hub-button-secondary,
  .hub-btn-secondary,
  .list-btn-secondary,
  .pm-button-secondary,
  .pm-button-light,
  .how-btn-secondary,
  .qbtn-secondary,
  .remodel-btn-secondary,
  .net-btn-secondary
) {
  background: var(--future-paper);
  border: 2px solid var(--future-green);
  box-shadow: 0 5px 0 rgba(36, 97, 79, 0.24);
  color: var(--future-green);
}

body.allpro-future-ui :is(
  .btn,
  .ld-btn,
  .pi-btn,
  .opp-button,
  .hub-button,
  .hub-btn,
  .list-btn,
  .pm-button,
  .how-btn,
  .qbtn,
  .remodel-btn,
  .net-btn,
  .sidebar-btn,
  .cta-inline
):hover {
  box-shadow: 0 3px 0 rgba(23, 38, 48, 0.35);
  transform: translateY(2px);
}

/* Page heroes */
body.allpro-future-ui :is(.page-hero, .service-hero, .guide-hero, .opp-hero, .qhero, .ld-hero, .pi-hero) {
  background-color: var(--future-ink);
  border-bottom: 8px solid var(--future-copper);
  color: #fff;
  overflow: hidden;
  position: relative;
}

body.allpro-future-ui :is(.page-hero, .service-hero, .guide-hero, .opp-hero, .qhero, .ld-hero, .pi-hero) h1,
body.allpro-future-ui :is(.page-hero, .service-hero, .guide-hero, .opp-hero, .qhero, .ld-hero, .pi-hero) h2 {
  color: #fff;
}

body.allpro-future-ui :is(.page-hero-inner, .service-hero-grid, .guide-hero-inner, .opp-hero-grid, .qhero-grid, .ld-hero-grid, .pi-hero-content) {
  margin-inline: auto;
  max-width: var(--future-shell);
}

body.allpro-future-ui :is(.eyebrow, .section-tag, .ld-eyebrow, .pi-eyebrow, .opp-kicker, .qeyebrow, .pm-eyebrow, .list-badge, .hub-badge, .how-eyebrow) {
  color: var(--future-copper-dark);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.allpro-future-ui :is(.page-hero, .service-hero, .guide-hero, .opp-hero, .qhero, .ld-hero, .pi-hero) :is(.eyebrow, .section-tag, .ld-eyebrow, .pi-eyebrow, .opp-kicker, .qeyebrow) {
  color: var(--future-yellow);
}

/* The shared dark hero overrides the light legacy landing-page palette. Keep
   supporting copy and compact proof points readable after that theme change. */
body.allpro-future-ui .ld-hero :is(.ld-sub, .ld-quick-facts) {
  color: #f2f7f4;
}

/* Homepage */
body.home-page.allpro-future-ui .home-hero {
  background: var(--future-cream);
  border-bottom: 8px solid var(--future-green);
}

body.home-page.allpro-future-ui .home-eyebrow {
  color: var(--future-sky);
  font-weight: 900;
}

body.home-page.allpro-future-ui .home-title-accent {
  color: var(--future-green);
  text-decoration: underline;
  text-decoration-color: var(--future-yellow);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.07em;
}

body.home-page.allpro-future-ui .home-photo-stack,
body.home-page.allpro-future-ui .home-hero-media img {
  border-radius: var(--future-radius);
}

body.home-page.allpro-future-ui .home-photo-stack {
  border: 4px solid var(--future-paper);
  box-shadow: var(--future-shadow-lg);
}

body.home-page.allpro-future-ui .home-media-caption {
  background: var(--future-ink);
  border-left: 6px solid var(--future-yellow);
  color: #fff;
}

body.home-page.allpro-future-ui .home-quick-facts > * {
  background: var(--future-paper);
  border: 1px solid var(--future-line);
  border-radius: var(--future-radius);
}

body.home-page.allpro-future-ui .home-quick-facts > *:nth-child(1) {
  border-top: 4px solid var(--future-sky);
}

body.home-page.allpro-future-ui .home-quick-facts > *:nth-child(2) {
  border-top: 4px solid var(--future-yellow);
}

body.home-page.allpro-future-ui .home-quick-facts > *:nth-child(3) {
  border-top: 4px solid var(--future-green);
}

body.home-page.allpro-future-ui .home-proof-strip {
  background: var(--future-paper);
  border-color: var(--future-line);
}

body.home-page.allpro-future-ui .home-proof-strip > *:nth-child(1) {
  box-shadow: inset 0 5px 0 var(--future-copper);
}

body.home-page.allpro-future-ui .home-proof-strip > *:nth-child(2) {
  box-shadow: inset 0 5px 0 var(--future-sky);
}

body.home-page.allpro-future-ui .home-proof-strip > *:nth-child(3) {
  box-shadow: inset 0 5px 0 var(--future-green);
}

body.home-page.allpro-future-ui .home-proof-strip > *:nth-child(4) {
  box-shadow: inset 0 5px 0 var(--future-yellow);
}

body.home-page.allpro-future-ui :is(.services, .photo-section, .process-section, .testimonials, .service-area) {
  border-bottom: 1px solid var(--future-line);
}

body.home-page.allpro-future-ui .home-lane-card {
  background: var(--future-paper);
  border: 1px solid var(--future-line);
  border-radius: var(--future-radius);
  box-shadow: var(--future-shadow-sm);
}

body.home-page.allpro-future-ui .home-lane-card:nth-child(1) {
  border-top: 7px solid var(--future-copper);
}

body.home-page.allpro-future-ui .home-lane-card:nth-child(2) {
  border-top: 7px solid var(--future-sky);
}

body.home-page.allpro-future-ui .home-lane-card:nth-child(3) {
  border-top: 7px solid var(--future-green);
}

body.home-page.allpro-future-ui .home-service-chips a:nth-child(4n + 1) {
  border-color: var(--future-copper);
}

body.home-page.allpro-future-ui .home-service-chips a:nth-child(4n + 2) {
  border-color: var(--future-sky);
}

body.home-page.allpro-future-ui .home-service-chips a:nth-child(4n + 3) {
  border-color: var(--future-green);
}

body.home-page.allpro-future-ui .home-service-chips a:nth-child(4n) {
  border-color: var(--future-yellow);
}

body.home-page.allpro-future-ui .why {
  background: var(--future-green);
  color: #fff;
}

body.home-page.allpro-future-ui .why h2,
body.home-page.allpro-future-ui .why h3 {
  color: #fff;
}

body.home-page.allpro-future-ui .work-photo-card {
  border-radius: var(--future-radius);
  box-shadow: var(--future-shadow-sm);
  overflow: hidden;
}

body.home-page.allpro-future-ui .work-photo-card:nth-child(2) {
  box-shadow: 0 12px 26px rgba(45, 127, 163, 0.18);
}

body.home-page.allpro-future-ui .work-photo-card:nth-child(3) {
  box-shadow: 0 12px 26px rgba(36, 97, 79, 0.18);
}

/* Shared content surfaces */
body.allpro-future-ui :is(.content-section, .service-content, .highlights-section, .proof-section, .facts-section, .qsection, .opp-section, .ld-section, .pm-section, .how-section, .list-section) {
  border-bottom: 1px solid rgba(23, 38, 48, 0.1);
}

body.allpro-future-ui :is(.content-section, .service-content, .proof-section, .facts-section, .qsection, .opp-section, .ld-section, .pm-section, .how-section, .list-section):nth-of-type(even) {
  background-color: var(--future-paper);
}

body.allpro-future-ui :is(.container, .content-inner, .facts-shell, .opp-shell, .ld-shell, .pm-shell, .how-shell, .list-shell, .hub-shell, .qcontainer, .shell) {
  margin-inline: auto;
  max-width: var(--future-shell);
}

body.allpro-future-ui :is(
  .service-card,
  .faq-card,
  .content-block,
  .sidebar-card,
  .highlight-box,
  .facts-card,
  .proof-card,
  .opp-card,
  .ld-step,
  .ld-trust-item,
  .pi-card,
  .ba-card,
  .how-link,
  .how-faq-card,
  .list-card,
  .hub-card,
  .pm-plan,
  .pm-process-step,
  .review-card,
  .qproof-card
) {
  background: var(--future-paper);
  border: 1px solid var(--future-line);
  border-radius: var(--future-radius) !important;
  box-shadow: var(--future-shadow-sm) !important;
}

body.allpro-future-ui :is(
  .service-card,
  .faq-card,
  .content-block,
  .sidebar-card,
  .highlight-box,
  .facts-card,
  .proof-card,
  .opp-card,
  .ld-step,
  .ld-trust-item,
  .pi-card,
  .ba-card,
  .how-link,
  .how-faq-card,
  .list-card,
  .hub-card,
  .pm-plan,
  .pm-process-step,
  .review-card,
  .qproof-card
):nth-child(4n + 1) {
  border-top: 5px solid var(--future-green);
}

body.allpro-future-ui :is(
  .service-card,
  .faq-card,
  .content-block,
  .sidebar-card,
  .highlight-box,
  .facts-card,
  .proof-card,
  .opp-card,
  .ld-step,
  .ld-trust-item,
  .pi-card,
  .ba-card,
  .how-link,
  .how-faq-card,
  .list-card,
  .hub-card,
  .pm-plan,
  .pm-process-step,
  .review-card,
  .qproof-card
):nth-child(4n + 2) {
  border-top: 5px solid var(--future-copper);
}

body.allpro-future-ui :is(
  .service-card,
  .faq-card,
  .content-block,
  .sidebar-card,
  .highlight-box,
  .facts-card,
  .proof-card,
  .opp-card,
  .ld-step,
  .ld-trust-item,
  .pi-card,
  .ba-card,
  .how-link,
  .how-faq-card,
  .list-card,
  .hub-card,
  .pm-plan,
  .pm-process-step,
  .review-card,
  .qproof-card
):nth-child(4n + 3) {
  border-top: 5px solid var(--future-sky);
}

body.allpro-future-ui :is(
  .service-card,
  .faq-card,
  .content-block,
  .sidebar-card,
  .highlight-box,
  .facts-card,
  .proof-card,
  .opp-card,
  .ld-step,
  .ld-trust-item,
  .pi-card,
  .ba-card,
  .how-link,
  .how-faq-card,
  .list-card,
  .hub-card,
  .pm-plan,
  .pm-process-step,
  .review-card,
  .qproof-card
):nth-child(4n) {
  border-top: 5px solid var(--future-yellow);
}

body.allpro-future-ui :is(.section-head, .section-header, .facts-section-head, .how-section-head, .pm-section-head) {
  position: relative;
}

body.allpro-future-ui :is(.section-head, .section-header, .facts-section-head, .how-section-head, .pm-section-head)::after {
  background: var(--future-sky);
  content: "";
  display: block;
  height: 5px;
  margin-top: 16px;
  width: 54px;
}

body.allpro-future-ui :is(.callout-box, .estimate-banner, .cta-box, .notice, .ld-local-note, .pm-disclosure, .list-warning) {
  background: var(--future-sky-soft);
  border: 1px solid rgba(45, 127, 163, 0.34);
  border-left: 6px solid var(--future-sky);
  border-radius: var(--future-radius);
  color: var(--future-ink);
}

body.allpro-future-ui :is(.check-list, .sidebar-list) li::marker {
  color: var(--future-green);
}

body.allpro-future-ui table {
  background: var(--future-paper);
  border: 1px solid var(--future-line);
  border-collapse: collapse;
  border-radius: var(--future-radius);
  overflow: hidden;
}

body.allpro-future-ui th {
  background: var(--future-ink);
  color: #fff;
}

body.allpro-future-ui th,
body.allpro-future-ui td {
  border-bottom: 1px solid var(--future-line);
  padding: 12px 14px;
  text-align: left;
}

body.allpro-future-ui details {
  background: var(--future-paper);
  border: 1px solid var(--future-line);
  border-radius: var(--future-radius);
  margin-bottom: 10px;
  padding: 14px 16px;
}

body.allpro-future-ui summary {
  color: var(--future-ink);
  cursor: pointer;
  font-weight: 900;
}

/* Forms */
body.allpro-future-ui form {
  color: var(--future-ink);
}

body.allpro-future-ui :is(input, select, textarea) {
  background: #fff;
  border: 1.5px solid #aebdb6;
  border-radius: 4px !important;
  color: var(--future-ink);
  font: inherit;
  min-height: 48px;
  padding: 11px 12px;
  width: 100%;
}

body.allpro-future-ui textarea {
  min-height: 132px;
  resize: vertical;
}

body.allpro-future-ui :is(input, select, textarea):focus {
  border-color: var(--future-sky);
  box-shadow: 0 0 0 4px rgba(45, 127, 163, 0.14);
  outline: none;
}

body.allpro-future-ui :is(input, select, textarea).future-has-value {
  border-color: var(--future-green);
}

body.allpro-future-ui :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--future-green);
  min-height: 18px;
  padding: 0;
  width: 18px;
}

body.allpro-future-ui :is(.ld-form-card, .pi-form-card, .opp-form-card, .list-form-grid, .qform-card, .contact-form-card, .review-form-card) {
  background: var(--future-paper);
  border: 1px solid var(--future-line);
  border-radius: var(--future-radius) !important;
  box-shadow: var(--future-shadow-lg);
}

body.allpro-future-ui :is(.ld-submit, .pi-form button[type="submit"], .opp-form-card button[type="submit"], .list-submit, form button[type="submit"], form input[type="submit"]) {
  background: var(--future-copper);
  border: 2px solid var(--future-copper);
  border-radius: var(--future-radius) !important;
  box-shadow: 0 6px 0 var(--future-copper-dark);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  min-height: 52px;
  padding: 12px 18px;
}

/* Metro East Project Match by Bill */
body.project-match-future-ui {
  --future-green: #176b67;
  --future-green-bright: #21877e;
  --future-sky: #267ba0;
  --future-mist: #e7f4f1;
  background: #f3f0e7;
}

body.project-match-future-ui :is(.hub-nav, .pm-nav, .how-nav) {
  border-top-color: var(--future-sky);
}

body.project-match-future-ui :is(.hub-brand, .pm-brand, .how-brand) {
  color: var(--future-green);
}

body.project-match-future-ui :is(.hub-hero, .list-hero, .pm-hero, .how-hero) {
  background: var(--future-mist);
  border-bottom: 8px solid var(--future-yellow);
  color: var(--future-ink);
  overflow: hidden;
  position: relative;
}

body.project-match-future-ui :is(.hub-hero, .list-hero, .pm-hero, .how-hero) h1 {
  color: var(--future-ink);
}

body.project-match-future-ui .pm-hero :is(p, li) {
  color: var(--future-ink-soft);
}

body.project-match-future-ui :is(.hub-hero, .list-hero, .pm-hero, .how-hero)::before {
  background: var(--future-sky);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 10px;
}

body.project-match-future-ui :is(.hub-hero-grid, .list-hero-grid, .how-hero-grid) {
  position: relative;
  z-index: 1;
}

body.project-match-future-ui :is(.hub-badge, .list-badge, .pm-eyebrow, .how-eyebrow) {
  background: var(--future-yellow);
  border-radius: 4px;
  color: var(--future-ink);
  display: inline-block;
  padding: 5px 8px;
}

body.project-match-future-ui :is(.hub-panel, .list-panel, .how-panel) {
  background: var(--future-paper);
  border: 1px solid var(--future-line);
  border-left: 7px solid var(--future-sky);
  border-radius: var(--future-radius);
  box-shadow: var(--future-shadow-lg);
}

body.project-match-future-ui :is(.hub-section, .list-section, .pm-section, .how-section) {
  border-bottom: 1px solid var(--future-line);
}

body.project-match-future-ui :is(.hub-section, .list-section, .pm-section, .how-section):nth-of-type(odd) {
  background: var(--future-paper);
}

body.project-match-future-ui .pm-plan-featured {
  background: var(--future-ink);
  border: 3px solid var(--future-yellow);
  color: #fff;
  transform: translateY(-8px);
}

body.project-match-future-ui .pm-plan-featured h3,
body.project-match-future-ui .pm-plan-featured .pm-price {
  color: #fff;
}

body.project-match-future-ui .pm-section.pm-section-dark {
  background: #12383a;
  color: #fff;
}

body.project-match-future-ui .pm-section.pm-section-dark :is(h2, h3, p) {
  color: #fff;
}

body.project-match-future-ui :is(.hub-footer, .list-footer, .pm-footer, .how-footer) {
  background: #122d31;
  border-top: 8px solid var(--future-sky);
  color: #fff;
}

/* Opportunity, quote, review, and legal pages */
body.opportunity-page.allpro-future-ui .opp-hero {
  background-color: var(--future-green);
}

body.quote-page.allpro-future-ui .qhero {
  background-color: var(--future-ink);
}

body.review-hub.allpro-future-ui .service-hero,
body.review-page.allpro-future-ui .service-hero {
  background-color: var(--future-green);
}

body.contact-page.allpro-future-ui .service-hero-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.contact-page.allpro-future-ui .contact-quote-card {
  background: var(--future-green) url("/images/deck-build-metro-east-il.webp") center / cover no-repeat !important;
  border: 4px solid var(--future-paper) !important;
  border-left: 8px solid var(--future-yellow) !important;
  box-shadow: var(--future-shadow-lg) !important;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

body.contact-page.allpro-future-ui .contact-quote-card::before {
  background: rgba(23, 38, 48, 0.84);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 0;
}

body.contact-page.allpro-future-ui .contact-quote-card > * {
  position: relative;
  z-index: 1;
}

body.contact-page.allpro-future-ui .contact-quote-card :is(h2, p) {
  color: #fff;
}

body.contact-page.allpro-future-ui .contact-quote-label {
  color: var(--future-yellow);
}

body.contact-page.allpro-future-ui .contact-quote-card .btn-secondary {
  background: var(--future-paper) !important;
  border-color: var(--future-paper) !important;
  color: var(--future-ink) !important;
}

/* One older homeowner guide carries its original colors in inline styles. */
body.legacy-guide-future-ui {
  --dark: var(--future-cream);
  --dark2: var(--future-paper);
  --dark3: var(--future-sky-soft);
  --gray2: var(--future-muted);
  --red: var(--future-copper);
  background: var(--future-cream);
}

body.legacy-guide-future-ui > section {
  border-bottom: 1px solid var(--future-line) !important;
  color: var(--future-ink);
}

body.legacy-guide-future-ui > section:first-of-type {
  background: var(--future-sky-soft) !important;
  border-bottom: 8px solid var(--future-yellow) !important;
}

body.legacy-guide-future-ui > section:not(:last-of-type) [style*="color:#fff"] {
  color: var(--future-ink) !important;
}

body.legacy-guide-future-ui > section:not(:last-of-type) [style*="color:#999"],
body.legacy-guide-future-ui > section:not(:last-of-type) [style*="color:var(--gray2)"] {
  color: var(--future-muted) !important;
}

body.legacy-guide-future-ui > section:not(:last-of-type) > div > div[style*="background:var(--dark3)"],
body.legacy-guide-future-ui > section:not(:last-of-type) [style*="background:var(--dark3)"] {
  border: 1px solid var(--future-line) !important;
  border-radius: var(--future-radius) !important;
  box-shadow: var(--future-shadow-sm);
}

body.legacy-guide-future-ui > section:last-of-type {
  background: var(--future-copper) !important;
  color: #fff;
}

body.legacy-guide-future-ui > section:last-of-type :is(h2, p) {
  color: #fff !important;
}

body.utility-future-ui {
  background: var(--future-sky-soft);
}

body.utility-future-ui > :is(.shell, main.shell) {
  padding-block: 36px 64px;
}

body.utility-future-ui :is(.card, .topbar) {
  background: var(--future-paper);
  border: 1px solid var(--future-line);
  border-radius: var(--future-radius);
  box-shadow: var(--future-shadow-sm);
}

/* Images and galleries */
body.allpro-future-ui :is(.service-card, .work-photo-card, .proof-card, .pi-photo, .ld-project-photo, .ba-card) img {
  transition: transform 260ms ease;
}

body.allpro-future-ui :is(.service-card, .work-photo-card, .proof-card, .pi-photo, .ld-project-photo, .ba-card):hover img {
  transform: scale(1.015);
}

body.allpro-future-ui :is(.pi-photo, .ld-project-photo, .service-card img, .proof-card img) {
  border-radius: 4px;
}

/* Calls to action and footer */
body.allpro-future-ui :is(.cta, .opp-cta, .ld-cta, .pm-section-dark, .how-band, .final-cta) {
  background: var(--future-copper);
  color: #fff;
}

body.allpro-future-ui :is(.cta, .opp-cta, .ld-cta, .pm-section-dark, .how-band, .final-cta) h2,
body.allpro-future-ui :is(.cta, .opp-cta, .ld-cta, .pm-section-dark, .how-band, .final-cta) h3 {
  color: #fff;
}

body.allpro-future-ui :is(.footer, .opp-footer, .ld-footer, .pi-footer, .qfooter) {
  background: #111a20;
  border-top: 8px solid var(--future-copper);
  color: rgba(255, 255, 255, 0.84);
}

body.allpro-future-ui :is(.footer, .opp-footer, .ld-footer, .pi-footer, .qfooter) a {
  color: rgba(255, 255, 255, 0.88);
}

body.allpro-future-ui :is(.footer, .opp-footer, .ld-footer, .pi-footer, .qfooter) a:hover {
  color: var(--future-yellow);
}

/* Desktop project launcher */
.future-project-launcher {
  bottom: 20px;
  position: fixed;
  right: 20px;
  z-index: 1400;
}

.future-project-launcher__trigger {
  background: var(--future-ink);
  border: 2px solid #fff;
  border-radius: var(--future-radius);
  box-shadow: 0 8px 0 rgba(23, 38, 48, 0.24), var(--future-shadow-lg);
  color: #fff;
  cursor: pointer;
  font: 900 0.92rem/1 Aptos, "Segoe UI", Arial, sans-serif;
  min-height: 50px;
  padding: 12px 17px;
}

.future-project-launcher__trigger:hover {
  background: var(--future-green);
}

.future-project-launcher__mobile-call {
  display: none;
}

.future-project-launcher__panel {
  background: var(--future-paper);
  border: 1px solid var(--future-line);
  border-top: 7px solid var(--future-sky);
  border-radius: var(--future-radius);
  bottom: 66px;
  box-shadow: var(--future-shadow-lg);
  color: var(--future-ink);
  padding: 20px;
  position: absolute;
  right: 0;
  width: min(370px, calc(100vw - 40px));
}

.future-project-launcher__panel[hidden] {
  display: none;
}

.future-project-launcher__head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.future-project-launcher__head strong {
  display: block;
  font-size: 1.1rem;
  line-height: 1.2;
}

.future-project-launcher__head span {
  color: var(--future-muted);
  display: block;
  font-size: 0.82rem;
  margin-top: 4px;
}

.future-project-launcher__close {
  align-items: center;
  background: transparent;
  border: 1px solid var(--future-line);
  border-radius: 4px;
  color: var(--future-ink);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 36px;
  font-size: 1.25rem;
  height: 36px;
  justify-content: center;
  padding: 0;
}

.future-project-launcher__links {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.future-project-launcher__links a {
  background: var(--future-sky-soft);
  border: 1px solid rgba(45, 127, 163, 0.28);
  border-radius: 4px;
  color: var(--future-ink);
  font-size: 0.82rem;
  font-weight: 900;
  padding: 11px;
  text-decoration: none;
}

.future-project-launcher__links a:nth-child(2) {
  background: var(--future-mist);
  border-color: rgba(36, 97, 79, 0.28);
}

.future-project-launcher__links a:nth-child(3) {
  background: #fff7da;
  border-color: rgba(240, 195, 77, 0.52);
}

.future-project-launcher__links a:last-child {
  background: #fbece3;
  border-color: rgba(211, 98, 36, 0.32);
}

.future-project-launcher__call {
  border-top: 1px solid var(--future-line);
  color: var(--future-green);
  display: block;
  font-weight: 900;
  margin-top: 14px;
  padding-top: 12px;
  text-align: center;
}

/* Motion is progressive: content remains visible if JavaScript never runs. */
body.future-motion-ready .future-reveal-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms ease;
}

body.future-motion-ready .future-reveal-item.future-is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  body.allpro-future-ui *,
  body.allpro-future-ui *::before,
  body.allpro-future-ui *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }

  body.future-motion-ready .future-reveal-item {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 980px) {
  body.allpro-future-ui h1 {
    font-size: 2.75rem;
  }

  body.allpro-future-ui h2 {
    font-size: 2rem;
  }

  body.allpro-future-ui :is(.nav-inner, .hub-nav-inner, .pm-nav-inner, .how-nav-inner, .net-nav-inner, .opp-nav-inner, .qnav-inner, .ld-header-inner, .pi-nav) {
    min-height: 64px;
    padding-inline: 16px;
  }

  body.project-match-future-ui :is(.hub-nav, .pm-nav, .how-nav, .net-nav) :is(.hub-nav-inner, .pm-nav-inner, .how-nav-inner, .net-nav-inner) {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    justify-content: space-between;
    min-height: 72px;
    position: relative;
  }

  body.project-match-future-ui :is(.hub-brand, .pm-brand, .how-brand, .net-brand) {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 9px;
    min-width: 0;
  }

  body.project-match-future-ui :is(.hub-brand, .pm-brand, .how-brand, .net-brand) img {
    flex: 0 0 44px;
    height: 44px;
    object-fit: contain;
    width: 44px;
  }

  body.project-match-future-ui :is(.hub-brand, .pm-brand, .how-brand, .net-brand) :is(div, span) {
    min-width: 0;
  }

  body.project-match-future-ui :is(.hub-brand, .pm-brand, .how-brand, .net-brand) strong {
    display: -webkit-box;
    font-size: 0.9rem;
    line-height: 1.12;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.project-match-future-ui :is(.hub-brand, .pm-brand, .how-brand, .net-brand) small {
    display: none;
  }

  body.project-match-future-ui.future-mobile-nav-ready .future-menu-toggle {
    display: inline-flex;
  }

  body.project-match-future-ui.future-mobile-nav-ready :is(.hub-nav-links, .pm-nav-links, .how-nav-links, .net-links) {
    align-items: stretch !important;
    background: var(--future-paper);
    border: 1px solid var(--future-line);
    border-radius: var(--future-radius);
    box-shadow: var(--future-shadow-lg);
    display: none !important;
    gap: 0 !important;
    grid-template-columns: 1fr;
    left: 12px;
    margin: 0;
    max-height: calc(100vh - 98px);
    overflow-y: auto;
    padding: 8px;
    position: absolute;
    right: 12px;
    top: calc(100% + 1px);
    width: auto !important;
    z-index: 1100;
  }

  body.project-match-future-ui.future-mobile-nav-ready :is(.hub-nav, .pm-nav, .how-nav, .net-nav).future-menu-open :is(.hub-nav-links, .pm-nav-links, .how-nav-links, .net-links) {
    display: grid !important;
  }

  body.project-match-future-ui.future-mobile-nav-ready :is(.hub-nav-links, .pm-nav-links, .how-nav-links, .net-links) a {
    align-items: center;
    border-bottom: 1px solid rgba(23, 38, 48, 0.1);
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    font-size: 0.92rem !important;
    justify-content: flex-start;
    min-height: 46px;
    padding: 10px 12px !important;
    width: 100%;
  }

  body.project-match-future-ui.future-mobile-nav-ready :is(.hub-nav-links, .pm-nav-links, .how-nav-links, .net-links) a:last-child {
    border-bottom: 0;
  }

  body.project-match-future-ui.future-mobile-nav-ready :is(.hub-nav-links, .pm-nav-links, .how-nav-links, .net-links) :is(.hub-call, .hub-quote, .pm-nav-cta) {
    border-radius: var(--future-radius) !important;
    justify-content: center;
    margin-top: 6px;
  }

  body.project-match-future-ui .pm-plan-featured {
    transform: none;
  }
}

@media (max-width: 760px) {
  body.allpro-future-ui {
    font-size: 16px;
  }

  body.allpro-future-ui h1 {
    font-size: 2.18rem;
    line-height: 1.02;
  }

  body.allpro-future-ui h2 {
    font-size: 1.72rem;
    line-height: 1.08;
  }

  body.allpro-future-ui h3 {
    font-size: 1.13rem;
  }

  body.allpro-future-ui :is(.container, .content-inner, .facts-shell, .opp-shell, .ld-shell, .pm-shell, .how-shell, .list-shell, .hub-shell, .qcontainer, .shell) {
    padding-inline: 18px;
  }

  body.allpro-future-ui :is(.nav, .hub-nav, .pm-nav, .how-nav, .net-nav, .opp-nav, .qnav, .ld-header, .pi-site-header) {
    border-top-width: 3px;
  }

  body.allpro-future-ui :is(.nav-inner, .hub-nav-inner, .pm-nav-inner, .how-nav-inner, .net-nav-inner, .opp-nav-inner, .qnav-inner, .ld-header-inner, .pi-nav) {
    min-height: 60px;
    padding-inline: 12px;
  }

  body.allpro-future-ui :is(.btn, .ld-btn, .pi-btn, .opp-button, .hub-button, .hub-btn, .list-btn, .pm-button, .how-btn, .qbtn, .remodel-btn, .net-btn) {
    max-width: 100%;
    min-height: 48px;
    white-space: normal;
  }

  body.allpro-future-ui :is(.hero-actions, .home-hero-actions, .ld-actions, .pi-actions, .opp-actions, .hub-actions, .list-actions, .pm-actions, .how-actions, .qactions) {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
  }

  body.allpro-future-ui :is(.hero-actions, .home-hero-actions, .ld-actions, .pi-actions, .opp-actions, .hub-actions, .list-actions, .pm-actions, .how-actions, .qactions) > * {
    width: 100%;
  }

  body.allpro-future-ui :is(input, select, textarea) {
    font-size: 16px;
  }

  body.allpro-future-ui table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  body.project-match-future-ui :is(.hub-hero, .list-hero, .pm-hero, .how-hero)::before {
    height: 8px;
    width: 100%;
  }

  body.future-launcher-ready {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  body.allpro-future-ui :is(.sticky-call, .ld-mobile-bar, .pi-mobile-bar, .facts-mobile-bar, .mobile-action-bar, .opp-mobile-actions),
  body.allpro-future-ui #ap-float,
  body.allpro-future-ui #ap-float-dismiss {
    display: none !important;
  }

  .future-project-launcher {
    background: var(--future-paper);
    border-top: 1px solid var(--future-line);
    bottom: 0;
    box-shadow: 0 -10px 28px rgba(23, 38, 48, 0.16);
    display: grid;
    grid-template-columns: 1fr 1fr;
    left: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    right: 0;
  }

  .future-project-launcher__trigger,
  .future-project-launcher__mobile-call {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.86rem;
    min-height: 64px;
    padding: 10px 8px;
  }

  .future-project-launcher__trigger {
    background: var(--future-ink);
  }

  body.allpro-future-ui .future-project-launcher__mobile-call {
    align-items: center;
    background: var(--future-copper-dark);
    color: #fff !important;
    display: flex;
    font-weight: 900;
    justify-content: center;
    text-decoration: none;
  }

  .future-project-launcher__panel {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    right: 12px;
    width: auto;
  }
}

@media (max-width: 390px) {
  body.allpro-future-ui h1 {
    font-size: 1.95rem;
  }

  body.allpro-future-ui h2 {
    font-size: 1.58rem;
  }

  body.allpro-future-ui :is(.container, .content-inner, .facts-shell, .opp-shell, .ld-shell, .pm-shell, .how-shell, .list-shell, .hub-shell, .qcontainer, .shell) {
    padding-inline: 14px;
  }
}