/* PREVIEW-ACCESS-20261101: a regular menu link and a glowing rainbow invitation on every page. */
:root {
  --pp-rainbow: linear-gradient(110deg, #ff8f9e 0%, #ffb374 16.67%, #ffe783 33.33%, #96e2b1 50%, #91ceff 66.67%, #b4b0ff 83.33%, #e2a9ef 100%);
  --pp-rainbow-ink: #082b4b;
}
@property --pp-rainbow-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* PREVIEW-MENU-RAINBOW-WHITE-20261101: preserve the existing menu typography. */
html body > header #navigation > a.pp-menu-link,
html body > header #nav-links.nav-links > a.pp-menu-link,
html body.skyline > header #nav-links.nav-links > a.pp-menu-link,
html body.pp-preview-page[data-brand] > .pp-site-header #pp-navigation.pp-site-nav > a.pp-menu-link,
html body.patios.inner:has(.inner-head.with-photo) > header #nav-links.nav-links > a.pp-menu-link,
html body.painting.inner:has(.inner-head.with-photo) > header #nav-links.nav-links > a.pp-menu-link,
html body.skyline:is(.home, .onsite-page, .inner:has(.inner-head.with-photo)) > header #nav-links.nav-links > a.pp-menu-link {
  color: #1e4ca4 !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #ffffffd9) drop-shadow(0 0 12px #ffffffa6) !important;
  white-space: nowrap;
  transition: filter .25s ease;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
html body > header #navigation > a.pp-menu-link,
html body > header #nav-links.nav-links > a.pp-menu-link,
html body.skyline > header #nav-links.nav-links > a.pp-menu-link,
html body.pp-preview-page[data-brand] > .pp-site-header #pp-navigation.pp-site-nav > a.pp-menu-link,
html body.patios.inner:has(.inner-head.with-photo) > header #nav-links.nav-links > a.pp-menu-link,
html body.painting.inner:has(.inner-head.with-photo) > header #nav-links.nav-links > a.pp-menu-link,
html body.skyline:is(.home, .onsite-page, .inner:has(.inner-head.with-photo)) > header #nav-links.nav-links > a.pp-menu-link {
    background-image: linear-gradient(90deg, #d51d3c 0%, #c65308 16.67%, #9a7400 33.33%, #087c3c 50%, #1557cf 66.67%, #4930b5 83.33%, #942bb6 100%) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
}
html body > header :is(#navigation, #nav-links, #pp-navigation) > a.pp-menu-link:is(:hover, :focus-visible) {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #ffffffd9) !important;
}
html body > header :is(#navigation, #nav-links, #pp-navigation) > a.pp-menu-link:focus-visible {
  outline: 2px solid #1e4ca4;
  outline-offset: 4px;
  text-decoration: underline;
  text-decoration-color: #1e4ca4;
  text-underline-offset: .22em;
}
@media (min-width: 721px) {
  html body > header #navigation { flex-wrap: wrap; min-width: 0; row-gap: 12px; }
}
@media (min-width: 901px) {
  html body > header #nav-links.nav-links { flex-wrap: wrap; min-width: 0; row-gap: 12px; }
}
@media (max-width: 900px) {
  html body > header #nav-links.nav-links.open { flex-wrap: nowrap !important; overflow-y: auto; }
}

/* Keep the existing hero wrapper and its prompt clear; paint only the button label. */
html body a.pp-launch:has(> .pp-hero-button-label) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body a.pp-launch > .pp-hero-button-label,
html body[data-mobile-hero] a.pp-hero-link > .pp-hero-button-label,
html body.pp-preview-page a.pp-top-hero-button > .pp-hero-button-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  padding: 13px 18px !important;
  border: 1px solid #ffffffc9 !important;
  border-radius: 12px !important;
  background-image: var(--pp-rainbow) !important;
  background-size: 220% 220% !important;
  background-position: var(--pp-rainbow-x, 0%) 50% !important;
  color: var(--pp-rainbow-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  font: inherit;
  line-height: 1.25 !important;
  white-space: nowrap;
  text-shadow: 0 0 5px #ffffffed, 0 0 11px #e6f4ffcc !important;
  box-shadow: 0 0 0 3px #a9d9ff2b, 0 0 15px #8ecfff99, 0 0 27px #cfb4ff66 !important;
  animation: pp-rainbow-drift 11s ease-in-out infinite alternate;
}
html body a.pp-launch:hover > .pp-hero-button-label,
html body a.pp-launch:focus-visible > .pp-hero-button-label {
  box-shadow: 0 0 0 4px #cde7ff4d, 0 0 20px #a0d8ffbf, 0 0 32px #d7b8ff8c !important;
}
html body a.pp-launch > .pp-hero-prompt {
  text-shadow: 0 2px 5px #08233c, 0 0 9px #c6e8ffb3, 0 0 19px #92d1ff99 !important;
}
@keyframes pp-rainbow-drift {
  from { --pp-rainbow-x: 0%; }
  to { --pp-rainbow-x: 100%; }
}

.pp-page-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin: 24px 0 0;
  max-width: 100%;
  position: relative;
  z-index: 1;
}
html body .pp-page-cta > .pp-page-prompt {
  margin: 0;
  padding: 0;
  max-width: 100%;
  font: 400 22px/1.4 'PP Hero Script', 'Brush Script MT', cursive;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  text-shadow: 0 0 7px #90cbff9e, 0 0 15px #8ccaff66;
  overflow-wrap: anywhere;
}
html body .inner-head.with-photo .pp-page-cta > .pp-page-prompt {
  color: #fff;
  text-shadow: 0 2px 5px #08233c, 0 0 9px #c6e8ffb3, 0 0 19px #92d1ff99;
}
html body a.pp-page-preview-link { position: relative !important; max-width: 100%; }
html body .inner-head:has(.pp-page-cta) { height: auto; }
.page-hero p.pp-page-intro { font-size: 20px; max-width: 740px; margin-bottom: 0; }
@media (max-width: 760px) {
  html body a.pp-launch > .pp-hero-button-label,
  html body[data-mobile-hero] a.pp-hero-link > .pp-hero-button-label,
  html body.pp-preview-page a.pp-top-hero-button > .pp-hero-button-label {
    padding: 12px 15px !important;
    white-space: normal !important;
    text-align: center;
  }
  html body .pp-page-cta > .pp-page-prompt { font-size: 20px; }
}
@media (max-width: 720px) {
  .page-hero p.pp-page-intro { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html body a.pp-launch > .pp-hero-button-label { animation: none !important; --pp-rainbow-x: 50% !important; }
  html body > header a.pp-menu-link { transition: none; }
}