@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/roboto-v29-latin-regular.woff2') format('woff2'),
       url('/assets/fonts/roboto-v29-latin-regular.woff') format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-v29-latin-700.woff2') format('woff2'),
       url('/assets/fonts/roboto-v29-latin-700.woff') format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/roboto-v29-latin-900.woff2') format('woff2'),
       url('/assets/fonts/roboto-v29-latin-900.woff') format('woff');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('/assets/fonts/oswald-v5-latin-variable.woff2') format('woff2');
}

:root {
  /* World of Painting Plus LLC brand kit: ribbon red #cc0404, globe blue
     #0454ac, deep navy #042464, dark red #840404 (documents/colors.json) */
  --primary: #cc0404;
  --primaryLight: #e6eef8;
  /* red for text on navy or dark surfaces: brand red there is ~2.5:1, this is 4.8:1 on navy and 6.2:1 on --dark */
  --primaryOnDark: #ff5c5c;
  --secondary: #042464;
  --secondaryLight: #0454ac;
  --headerColor: #0d1b3e;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #fafbfc;
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  --headerFontSize: clamp(2.3rem, 4.9vw, 3.375rem);
  --bodyFontSize: 1rem;
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
  --headerFont: "Oswald", Arial, sans-serif;
  --bodyFont: "Roboto", Arial, sans-serif;
  --interiorPadding: clamp(14.375rem, 29vw, 18.75rem);
  --dark: #121212;
  --medium: #282828;
  --accent: #404040;
  --primaryDark: #840404;
  --primaryDarker: #5c0303;
  --secondaryDark: #070707;
  --light: #fcfcfc;
  --lightGrey: #f0f1f2;
  --accentColor: #042464;
  --tertiary: #e6eef8;
  --primaryShade: #a30303;
  --secondaryShade: #021338;
  --darkPrimary: #840404;
  --accessible: #0454ac;
  --accessible2: #021338;
  --primaryAccessible: #a30303;
  --headerColorWhite: #fcfcfc;
  --darkText: #0d1b3e;
  --pb-body-font: 'Roboto', 'Roboto', Arial, sans-serif;
  --pb-heading-font: 'Oswald', 'Roboto', Arial, sans-serif;
}

.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  overflow: visible;
  z-index: 99999;
  padding: 0.75rem 1rem;
  background: var(--primary, #000);
  color: #fff;
  text-decoration: none;
}

body{font-family:"Roboto","Arial",sans-serif;margin:0;padding:0}

*,*:before,*:after{box-sizing:border-box}

.cs-topper{font-size:var(--topperFontSize);line-height:1.2em;text-transform:uppercase;text-align:inherit;letter-spacing:.1em;font-weight:700;color:var(--primary);margin-bottom:0.25rem;display:block}

.cs-title{font-size:var(--headerFontSize);font-weight:900;line-height:1.2em;text-align:inherit;max-width:43.75rem;margin:0 0 1rem 0;color:var(--headerColor);position:relative}

.cs-text{font-size:var(--bodyFontSize);line-height:1.5em;text-align:inherit;width:100%;max-width:40.625rem;margin:0;color:var(--bodyTextColor)}

/* pb-logo-runtime-v2 */
.logo,.cs-logo,.navbar-brand,.brand,.footer-logo{--pb-logo-hover-scale:1;--pb-logo-hover-y:0rem;--pb-logo-hover-rotate:0deg;--pb-logo-hover-filter:none;--pb-logo-hover-opacity:1}
.logo-slot{position:relative;display:inline-block;--pb-logo-tx-active:var(--pb-logo-tx,0);--pb-logo-ty-active:var(--pb-logo-ty,0);--pb-logo-tx-pct-active:var(--pb-logo-tx-pct,0%);--pb-logo-ty-pct-active:var(--pb-logo-ty-pct,0%);--pb-logo-scale-active:var(--pb-logo-scale,1);--pb-logo-slot-width-active:var(--pb-logo-slot-width,100%);--pb-logo-slot-height-active:var(--pb-logo-slot-height,100%);width:var(--pb-logo-slot-width-active,100%);max-width:100%;height:var(--pb-logo-slot-height-active,100%);aspect-ratio:var(--pb-logo-aspect-ratio,auto);flex-shrink:0;transition:width .2s ease,height .2s ease}
.logo-slot>img,.logo-slot>svg,.logo-slot>picture{display:block;width:100%!important;height:100%!important;object-fit:contain;object-position:center;transform-origin:center center;transform:translate(var(--pb-logo-tx-pct-active,0%),var(--pb-logo-ty-pct-active,0%)) translateY(var(--pb-logo-hover-y,0rem)) rotate(var(--pb-logo-hover-rotate,0deg)) scale(var(--pb-logo-scale-active,1)) scale(var(--pb-logo-hover-scale,1));filter:var(--pb-logo-hover-filter,none);opacity:var(--pb-logo-hover-opacity,1);transition:transform .25s ease,filter .25s ease,opacity .25s ease}
.logo-slot>img:not(:first-child),.logo-slot>svg:not(:first-child),.logo-slot>picture:not(:first-child){position:absolute!important;inset:0}
.logo-slot>picture>img{width:100%!important;height:100%!important;object-fit:contain;object-position:center}
.logo-slot[data-logo-sized="true"]>img,.logo-slot[data-logo-sized="true"]>svg,.logo-slot[data-logo-sized="true"]>picture,.logo-slot[data-logo-sized="true"]>picture>img{max-height:none!important}
.logo-slot[data-logo-replacing]>img,.logo-slot[data-logo-replacing]>svg,.logo-slot[data-logo-replacing]>picture{animation:pb-logo-replace .2s ease-out}
.logo:hover,.cs-logo:hover,.navbar-brand:hover,.brand:hover,.footer-logo:hover{cursor:pointer}
.logo[data-logo-hover="scale"]:hover,.cs-logo[data-logo-hover="scale"]:hover,.navbar-brand[data-logo-hover="scale"]:hover,.brand[data-logo-hover="scale"]:hover,.footer-logo[data-logo-hover="scale"]:hover{--pb-logo-hover-scale:1.05}
.logo[data-logo-hover="lift"]:hover,.cs-logo[data-logo-hover="lift"]:hover,.navbar-brand[data-logo-hover="lift"]:hover,.brand[data-logo-hover="lift"]:hover,.footer-logo[data-logo-hover="lift"]:hover{--pb-logo-hover-y:-.125rem;--pb-logo-hover-filter:drop-shadow(0 .5rem .75rem rgba(0,0,0,.18))}
.logo[data-logo-hover="rotate"]:hover,.cs-logo[data-logo-hover="rotate"]:hover,.navbar-brand[data-logo-hover="rotate"]:hover,.brand[data-logo-hover="rotate"]:hover,.footer-logo[data-logo-hover="rotate"]:hover{--pb-logo-hover-rotate:-3deg}
.logo[data-logo-hover="shimmer"]:hover .logo-slot>img,.logo[data-logo-hover="shimmer"]:hover .logo-slot>svg,.logo[data-logo-hover="shimmer"]:hover .logo-slot>picture,.cs-logo[data-logo-hover="shimmer"]:hover .logo-slot>img,.cs-logo[data-logo-hover="shimmer"]:hover .logo-slot>svg,.cs-logo[data-logo-hover="shimmer"]:hover .logo-slot>picture,.navbar-brand[data-logo-hover="shimmer"]:hover .logo-slot>img,.navbar-brand[data-logo-hover="shimmer"]:hover .logo-slot>svg,.navbar-brand[data-logo-hover="shimmer"]:hover .logo-slot>picture,.brand[data-logo-hover="shimmer"]:hover .logo-slot>img,.brand[data-logo-hover="shimmer"]:hover .logo-slot>svg,.brand[data-logo-hover="shimmer"]:hover .logo-slot>picture,.footer-logo[data-logo-hover="shimmer"]:hover .logo-slot>img,.footer-logo[data-logo-hover="shimmer"]:hover .logo-slot>svg,.footer-logo[data-logo-hover="shimmer"]:hover .logo-slot>picture{animation:pb-logo-shimmer .8s ease-in-out}
.logo[data-logo-hover="color-shift"]:hover,.cs-logo[data-logo-hover="color-shift"]:hover,.navbar-brand[data-logo-hover="color-shift"]:hover,.brand[data-logo-hover="color-shift"]:hover,.footer-logo[data-logo-hover="color-shift"]:hover{--pb-logo-hover-filter:hue-rotate(24deg)}
@media (max-width:47.999rem){.logo-slot{--pb-logo-tx-active:var(--pb-logo-tx-mobile,var(--pb-logo-tx,0));--pb-logo-ty-active:var(--pb-logo-ty-mobile,var(--pb-logo-ty,0));--pb-logo-tx-pct-active:var(--pb-logo-tx-pct-mobile,var(--pb-logo-tx-pct,0%));--pb-logo-ty-pct-active:var(--pb-logo-ty-pct-mobile,var(--pb-logo-ty-pct,0%));--pb-logo-scale-active:var(--pb-logo-scale-mobile,var(--pb-logo-scale,1));--pb-logo-slot-width-active:var(--pb-logo-slot-width-mobile,var(--pb-logo-slot-width,100%));--pb-logo-slot-height-active:var(--pb-logo-slot-height-mobile,var(--pb-logo-slot-height,100%))}}
@media (min-width:48rem) and (max-width:63.999rem){.logo-slot{--pb-logo-tx-active:var(--pb-logo-tx-tablet,var(--pb-logo-tx,0));--pb-logo-ty-active:var(--pb-logo-ty-tablet,var(--pb-logo-ty,0));--pb-logo-tx-pct-active:var(--pb-logo-tx-pct-tablet,var(--pb-logo-tx-pct,0%));--pb-logo-ty-pct-active:var(--pb-logo-ty-pct-tablet,var(--pb-logo-ty-pct,0%));--pb-logo-scale-active:var(--pb-logo-scale-tablet,var(--pb-logo-scale,1));--pb-logo-slot-width-active:var(--pb-logo-slot-width-tablet,var(--pb-logo-slot-width,100%));--pb-logo-slot-height-active:var(--pb-logo-slot-height-tablet,var(--pb-logo-slot-height,100%))}}
@media (min-width:64rem){.logo-slot{--pb-logo-tx-active:var(--pb-logo-tx-desktop,var(--pb-logo-tx,0));--pb-logo-ty-active:var(--pb-logo-ty-desktop,var(--pb-logo-ty,0));--pb-logo-tx-pct-active:var(--pb-logo-tx-pct-desktop,var(--pb-logo-tx-pct,0%));--pb-logo-ty-pct-active:var(--pb-logo-ty-pct-desktop,var(--pb-logo-ty-pct,0%));--pb-logo-scale-active:var(--pb-logo-scale-desktop,var(--pb-logo-scale,1));--pb-logo-slot-width-active:var(--pb-logo-slot-width-desktop,var(--pb-logo-slot-width,100%));--pb-logo-slot-height-active:var(--pb-logo-slot-height-desktop,var(--pb-logo-slot-height,100%))}}
@keyframes pb-logo-shimmer{0%,100%{opacity:1}50%{opacity:.68}}
@keyframes pb-logo-replace{from{opacity:0}to{opacity:var(--pb-logo-hover-opacity,1)}}
@media (prefers-reduced-motion:reduce){.logo,.logo:hover,.logo[data-logo-hover]:hover,.cs-logo,.cs-logo:hover,.cs-logo[data-logo-hover]:hover,.navbar-brand,.navbar-brand:hover,.navbar-brand[data-logo-hover]:hover,.brand,.brand:hover,.brand[data-logo-hover]:hover,.footer-logo,.footer-logo:hover,.footer-logo[data-logo-hover]:hover{--pb-logo-hover-scale:1;--pb-logo-hover-y:0rem;--pb-logo-hover-rotate:0deg;--pb-logo-hover-filter:none}.logo-slot{transition:none!important}.logo-slot>img,.logo-slot>svg,.logo-slot>picture{animation:none!important;transition:none!important}}

/* pb-image-runtime-v1 */
img[data-image-edit]{--pb-image-tx-pct:0%;--pb-image-ty-pct:0%;--pb-image-scale:1;--pb-image-hover-scale:1;--pb-image-hover-y:0rem;--pb-image-hover-rotate:0deg;--pb-image-static-filter:brightness(1);--pb-image-hover-filter:brightness(1);--pb-image-hover-opacity:1;transform-origin:center center;transform:translate(var(--pb-image-tx-pct,0%),var(--pb-image-ty-pct,0%)) translateY(var(--pb-image-hover-y,0rem)) rotate(var(--pb-image-hover-rotate,0deg)) scale(var(--pb-image-scale,1)) scale(var(--pb-image-hover-scale,1));filter:var(--pb-image-static-filter,brightness(1)) var(--pb-image-hover-filter,brightness(1));opacity:var(--pb-image-hover-opacity,1);transition:transform .25s ease,filter .25s ease,opacity .25s ease}
img[data-image-dragging]{transition:none!important}
img[data-image-effect="dim"]{--pb-image-static-filter:brightness(.6)}
img[data-image-effect="darken"]{--pb-image-static-filter:brightness(.42)}
img[data-image-effect="grayscale"]{--pb-image-static-filter:grayscale(1)}
img[data-image-effect="warm"]{--pb-image-static-filter:saturate(1.25) sepia(.35) hue-rotate(-10deg)}
img[data-image-effect="cool"]{--pb-image-static-filter:saturate(1.15) hue-rotate(12deg) brightness(1.02)}
img[data-image-hover="scale"]:hover{--pb-image-hover-scale:1.05}
img[data-image-hover="lift"]:hover{--pb-image-hover-y:-.25rem;--pb-image-hover-filter:drop-shadow(0 .5rem .75rem rgba(0,0,0,.18))}
img[data-image-hover="rotate"]:hover{--pb-image-hover-rotate:-2deg}
img[data-image-hover="shimmer"]:hover{animation:pb-image-shimmer .8s ease-in-out}
img[data-image-hover="color-shift"]:hover{--pb-image-hover-filter:hue-rotate(24deg)}
@keyframes pb-image-shimmer{0%,100%{opacity:1}50%{opacity:.68}}
@media (prefers-reduced-motion:reduce){img[data-image-edit],img[data-image-hover]:hover{--pb-image-hover-scale:1;--pb-image-hover-y:0rem;--pb-image-hover-rotate:0deg;--pb-image-hover-filter:brightness(1)}img[data-image-edit]{animation:none!important;transition:none!important}}

/* pb-font-runtime-v1 */

/* Page Builder CodeStitch baseline */


/* Template buttons: the pill with an arrow chip. The baseline above loads after
   each page's critical CSS and reset these to square inline-blocks, which
   pushed the arrow chip onto its own line. */


body.dark-mode{background-color:var(--dark, #121212)}
body.dark-mode p,body.dark-mode li,body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,body.dark-mode h4,body.dark-mode h5,body.dark-mode h6{color:#fff}
body.dark-mode .cs-topper{color:var(--bodyTextColorWhite)}
.cs-dark,.dark{display:none}
body.dark-mode .cs-light,body.dark-mode .light{display:none}
body.dark-mode .cs-dark,body.dark-mode .dark{display:block!important}

@media only screen and (min-width:0em){
  body.dark-mode [id^="dark-mode-toggle"] .cs-sun{transform:translate(-50%,-50%);opacity:1}
  body.dark-mode [id^="dark-mode-toggle"] .cs-moon{transform:translate(-50%,-150%);opacity:0;fill:#fff}
  [id^="dark-mode-toggle"]{display:block;position:absolute;top:50%;right:3.75rem;transform:translateY(-50%);width:3rem;height:3rem;background:transparent;border:none;overflow:hidden;padding:0;z-index:1000}
  [id^="dark-mode-toggle"] img,[id^="dark-mode-toggle"] svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1.5625rem;height:1.5625rem;pointer-events:none}
  [id^="dark-mode-toggle"] .cs-moon{z-index:2;transition:transform .3s,opacity .3s,fill .3s}
  [id^="dark-mode-toggle"] .cs-sun{z-index:1;transform:translate(-50%,100%);opacity:0;transition:transform .3s,opacity .3s}
  .cs-hide-on-mobile{display:none!important}
}
@media only screen and (min-width:64rem){
  [id^="dark-mode-toggle"]{position:relative;top:auto;right:auto;transform:none;margin-left:1.875rem;margin-bottom:0}
  [id^="dark-mode-toggle"]:hover{cursor:pointer}
  .cs-hide-on-mobile{display:initial!important}
  .cs-hide-on-desktop{display:none!important}
}


body { font-family: 'Roboto', Arial, sans-serif; }


.pb-inline-color-accent {
  color: var(--primary, #ff6a3e) !important;
}
.pb-inline-color-heading {
  color: var(--headerColor, #1a1a1a) !important;
}
.pb-inline-color-body {
  color: var(--bodyTextColor, #4e4b66) !important;
}


/* pb-font-runtime-v1 */

@media (hover: none), (pointer: coarse) {
  :is(a[href], button, .cs-button-solid, .cs-li-link, .hamburger-menu, .theme-toggle, #dark-mode-toggle, #go-top, #pb-go-top, [data-press]) {
    transform-origin: center;
    transition: transform 160ms ease, filter 160ms ease, background-color 160ms ease, color 160ms ease;
  }

  :is(a[href], button, .cs-button-solid, .cs-li-link, .hamburger-menu, .theme-toggle, #dark-mode-toggle, #go-top, #pb-go-top, [data-press]).is-pressed {
    transform: translateY(1px) scale(0.985);
    filter: brightness(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(a[href], button, .cs-button-solid, .cs-li-link, .hamburger-menu, .theme-toggle, #dark-mode-toggle, #go-top, #pb-go-top, [data-press]) {
    transition-duration: 0s;
  }
}


html.pb-theme-transition-active::view-transition-old(root),
html.pb-theme-transition-active::view-transition-new(root) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}

html.pb-theme-transition-active::view-transition-old(root) {
  animation-name: none;
}

html.pb-theme-transition-active::view-transition-new(root) {
  animation-name: pb-theme-wipe-in;
}

@keyframes pb-theme-wipe-in {
  from {
    clip-path: var(--pb-theme-clip-from);
  }
  to {
    clip-path: var(--pb-theme-clip-to);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.pb-theme-transition-active::view-transition-old(root),
  html.pb-theme-transition-active::view-transition-new(root) {
    animation: none !important;
  }
}


.pb-go-top-progress {
  --pb-scroll-progress: 0;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 3rem;
  height: 3rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.5rem) scale(0.96);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 9999;
}

.pb-go-top-progress.pb-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.pb-progress-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pb-progress-ring-track,
.pb-progress-ring-fill {
  fill: none;
  stroke-width: 2.5;
}

.pb-progress-ring-track {
  stroke: rgba(0, 0, 0, 0.16);
}

.pb-progress-ring-fill {
  stroke: var(--primary, #ff6a3e);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--pb-scroll-progress, 0));
  stroke-linecap: round;
}

#pb-go-top {
  position: absolute;
  inset: 0.375rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--headerColor, #1a1a1a);
  color: var(--bodyTextColorWhite, #fff);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18);
}

#pb-go-top svg {
  width: 1.125rem;
  height: 1.125rem;
}

#pb-go-top path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .pb-go-top-progress {
    transition-duration: 0s !important;
  }

  #pb-go-top {
    scroll-behavior: auto;
  }
}


@view-transition {
  navigation: auto;
}

main {
  view-transition-name: pb-main;
}

header {
  view-transition-name: pb-header;
}

footer {
  view-transition-name: pb-footer;
}

::view-transition-old(pb-main) {
  animation: pb-fade-out 250ms ease both;
}

::view-transition-new(pb-main) {
  animation: pb-slide-up-fade 300ms ease both;
}

@keyframes pb-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes pb-slide-up-fade {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* When a theme toggle is animating, collapse named per-element snapshots into
   the single viewport-sized root snapshot. Otherwise the browser snapshots
   full-height <main> twice per toggle, freezing the page; the wipe is also
   invisible because content lives in the pb-main group instead of root. */
html.pb-theme-transition-active main,
html.pb-theme-transition-active header,
html.pb-theme-transition-active footer {
  view-transition-name: none;
}


/* Form submit feedback — see /assets/js/form-submit.js */
.pb-form-status {
    width: 100%;
    margin: 1rem 0 0;
    padding: 0.85rem 1.1rem;
    border-radius: 0.5rem;
    border: 1px solid currentColor;
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    line-height: 1.5;
    color: var(--primary, currentColor);
}
.pb-form-status[hidden] { display: none; }
.pb-form-status--error { color: currentColor; }
/* Success is carried by the button morph; the text still needs to reach a
   screen reader through the live region, so it is hidden visually only. */
.pb-form-status--sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pb-is-busy,
.pb-is-done { pointer-events: none; position: relative; }
/* Kept in the layout, not removed, so the button width never jumps. */
.pb-is-busy .pb-btn-label,
.pb-is-done .pb-btn-label { opacity: 0; }
.pb-btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.15rem;
    height: 1.15rem;
    margin: -0.575rem 0 0 -0.575rem;
    opacity: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
}
.pb-is-busy .pb-btn-spinner {
    opacity: 1;
    animation: pb-btn-spin 0.7s linear infinite;
}
/* Same box redrawn as a check mark, so success needs no extra element. */
.pb-is-done .pb-btn-spinner {
    opacity: 1;
    width: 0.55rem;
    height: 1.05rem;
    margin: -0.6rem 0 0 -0.275rem;
    border-radius: 0;
    border-width: 0 2px 2px 0;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
}
@keyframes pb-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .pb-is-busy .pb-btn-spinner { animation-duration: 1.8s; }
}

/*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/
/* Shared chrome: moved from local.css, which only the home page loads. */
@media only screen and (min-width:0rem){#footer{padding:var(--sectionPadding);padding-bottom:2rem}#footer .cs-container{width:100%;max-width:80rem;margin:auto;display:flex;flex-direction:column;align-items:center}#footer .cs-logo-wrapper{width:100%}#footer .cs-logo{width:50%;max-width:11rem;height:auto;margin-right:auto;display:block;margin-bottom:3.75rem}#footer .cs-logo img{width:100%;height:auto}#footer .cs-top{width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;column-gap:clamp(4rem,9vw,6.25rem);row-gap:2rem;margin-bottom:4rem}#footer .cs-ul{margin:0;padding:0;width:auto;display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem;flex:none}#footer .cs-contact-ul{width:100%;max-width:100%;gap:0.75rem}#footer .cs-contact-ul .cs-link:hover{text-decoration:underline}#footer .cs-contact-ul .cs-link:before{display:none}#footer .cs-li{list-style:none;margin:0;display:block}#footer .cs-header{font-family:var(--headerFont);font-size:1.5625rem;line-height:1.2em;margin:0 0 1.5rem 0;font-weight:bold;color:var(--headerColor);display:block}#footer .cs-link{font-size:clamp(0.875rem,1.5vw,1rem);line-height:1.5em;text-decoration:none;margin:0;color:var(--bodyTextColor);display:flex;justify-content:flex-start;align-items:flex-start;position:relative}#footer .cs-link:hover:before{width:100%}#footer .cs-link:before{content:"";width:0%;height:1px;background:currentColor;opacity:1;position:absolute;display:block;bottom:0;left:0;transition:width 0.3s}#footer .cs-block{display:block}#footer .cs-icon{width:1.5rem;height:auto;margin:-0.0625rem 0.75rem 0 0}#footer .cs-middle{width:100%;max-width:28.125rem;margin:clamp(3.75rem,8vw,6.25rem)0 0 0;padding-bottom:clamp(1.25rem,5vw,2.5rem);display:flex;flex-direction:column;align-items:center;gap:1.5rem}#footer .cs-nav{margin:0;padding:0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;column-gap:2.5rem;row-gap:0.5rem}#footer .cs-nav-li{list-style:none}#footer .cs-nav-link{font-family:var(--headerFont);font-size:clamp(1rem,1.5vw,1.5rem);line-height:1em;text-decoration:none;margin:0;color:var(--headerColor);position:relative}#footer .cs-nav-link:hover:before{width:100%}#footer .cs-nav-link:before{content:"";width:0%;height:1px;background:currentColor;opacity:1;position:absolute;display:block;bottom:0;left:0;transition:width 0.3s}#footer .cs-social{margin:0;padding:0;display:flex;justify-content:flex-start;align-items:flex-start;gap:0.5rem}#footer .cs-social-li{list-style:none}#footer .cs-social-link{width:2rem;height:2rem;background-color:transparent;border:1px solid var(--bodyTextColor);border-radius:50%;display:flex;justify-content:center;align-items:center;transition:background-color 0.3s,border-color 0.3s}#footer .cs-social-link:hover{background-color:var(--primary);border-color:var(--primary)}#footer .cs-social-link:hover .cs-social-icon{filter:grayscale(1) brightness(2000%)}#footer .cs-social-icon{width:0.75rem;height:auto;display:block}#footer .cs-hover{display:none}#footer .cs-bottom{width:100%;margin:0;padding:clamp(1.25rem,5vw,2.5rem)0 0 0;border-top:1px solid rgba(186,186,186,0.2);display:flex;justify-content:center;align-items:center}#footer .cs-copyright{font-size:clamp(0.875rem,1.5vw,1rem);line-height:1.5em;text-align:center;width:70%;margin:0;color:var(--bodyTextColor);display:block}#footer .cs-copyright-link{font-size:inherit;line-height:inherit;text-decoration:none;margin:0;color:inherit;display:inline-block}#footer .cs-copyright-link:hover{text-decoration:underline}}
@media only screen and (min-width:37.5rem){#footer .cs-top{justify-content:flex-end}#footer .cs-ul{width:auto}#footer .cs-contact-ul{width:15rem}}
@media only screen and (min-width:48rem){#footer .cs-top{flex-wrap:nowrap}#footer .cs-logo-wrapper{width:auto;margin-right:auto}#footer .cs-middle{max-width:100%}}
@media only screen and (min-width:64rem){#footer .cs-logo{width:100%}#footer .cs-middle{flex-direction:row;align-items:center;justify-content:space-between}}
@media only screen and (min-width:0rem){body.dark-mode #footer{background-color:rgba(0,0,0,0.2)}body.dark-mode #footer .cs-header,body.dark-mode #footer .cs-link,body.dark-mode #footer .cs-social-link,body.dark-mode #footer .cs-nav-link,body.dark-mode #footer .cs-copyright{color:var(--bodyTextColorWhite)}body.dark-mode #footer .cs-social-link{border-color:var(--bodyTextColorWhite)}body.dark-mode #footer .cs-social-link:hover{background-color:var(--primary);border-color:var(--primary)}body.dark-mode #footer .cs-social-icon,body.dark-mode #footer .cs-icon{filter:grayscale(1) brightness(1000%)}}


/*-- -------------------------- -->
<---           Buttons          -->
<--- -------------------------- -*/
/* The site's one button, .cs-button-solid: the label in white caps over a brush stroke in the logo
   red (from the cornerstonepaintingsd.netlify.app CTA, cta-1291). The :before draws the stroke and
   the :after is a blurred copy that shows as a shadow on hover. nav-critical.html inlines a copy of
   this block so the header and hero buttons are right at first paint; keep the two identical. */
@media only screen and (min-width: 0rem) {
  .cs-button-solid {
    font-family: var(--headerFont);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.875rem 2.125rem;
    background: none;
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s;
  }
  .cs-button-solid:before,
  .cs-button-solid:after {
    content: "";
    width: 140%;
    height: 500%;
    background: url("/assets/images/btn-brush-red.webp") center / 100% 100% no-repeat;
    pointer-events: none;
    position: absolute;
    top: 60%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%) rotate(12deg) scaleX(-1);
  }
  /* soft shadow that appears on hover */
  .cs-button-solid:after {
    opacity: 0;
    filter: blur(0.75rem) brightness(0.7);
    z-index: -2;
    transform: translate(-50%, -50%) rotate(12deg) scaleX(-1) translateY(0.25rem) scale(0.95);
    transition: opacity 0.35s, transform 0.35s;
  }
  .cs-button-solid:hover {
    filter: brightness(0.9);
    transform: scale(1.06) rotate(-1deg);
  }
  .cs-button-solid:hover:after {
    opacity: 0.35;
    transform: translate(-50%, -50%) rotate(12deg) scaleX(-1) translateY(0.375rem) scale(1);
  }
  .cs-button-solid:focus-visible {
    /* dark ring for light sections; sections on navy/photo backgrounds switch it to white */
    outline: 2px solid var(--headerColor);
    outline-offset: 0.5rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode .cs-button-solid:focus-visible {
    outline-color: var(--bodyTextColorWhite);
  }
}

/* CTA: cta-1291, adapted from cornerstonepaintingsd.netlify.app. A rounded card with a paint-on-wood
   photo (orange recoloured to the logo blue) and a brush-stroke call button in the logo red.
   Used on home, about, and reviews, so it lives here. */
@media only screen and (min-width: 0rem) {
  #cta-1291 {
    padding: var(--sectionPadding);
    padding-top: 0;
  }
  #cta-1291 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    /* 40px - 80px */
    padding: clamp(2.5rem, 5vw, 5rem);
    box-sizing: border-box;
    border-radius: 0 1.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #cta-1291 .cs-content {
    width: 100%;
    max-width: 25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* room for the brush stroke around the button */
    gap: 2.5rem;
  }
  #cta-1291 .cs-title {
    /* 28px - 44px. Override: at the default --headerFontSize this sentence runs 4 lines on desktop
       and 7 on phones; sized down it stays at ~3 inside the card */
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    max-width: 46rem;
    margin: 0;
    color: var(--bodyTextColorWhite);
    text-wrap: pretty;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  }
  #cta-1291 .cs-button-solid:focus-visible {
    /* Override: the default dark focus ring would vanish on the blue photo */
    outline-color: var(--bodyTextColorWhite);
  }
  #cta-1291 .cs-background {
    width: 100%;
    height: 100%;
    background-color: var(--secondaryLight);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-1291 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media only screen and (min-width: 48rem) {
  #cta-1291 .cs-title {
    /* keep the copy clear of the brush head on the right of the photo */
    max-width: min(46rem, 72%);
  }
  #cta-1291 .cs-content {
    max-width: 100%;
    text-align: left;
    align-items: flex-start;
    justify-content: space-between;
  }
}
@media only screen and (min-width: 81.25rem) {
  #cta-1291 .cs-content {
    flex-direction: row;
    align-items: center;
  }
}


/*-- -------------------------- -->
<---        Footer wave         -->
<--- -------------------------- -*/

/* A curve in the footer's colour that rises out of the footer into the bottom of whichever
   section comes last, from CodeStitch 1388's wave (first tried on the contact page). It lives in
   footer.html so every page gets it. From tablet up the footer takes a top margin of the wave's
   height (12.5vw, from the 1920x240 viewBox) less 3rem, so the curve overlaps the last section's
   bottom padding (60px minimum) by at most 48px and never its content. pointer-events: none so
   the overlap never blocks a click. Hidden on phones, as in the stitch. */
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #footer {
    background-color: #f7f7f7;
    position: relative;
  }
  #footer .cs-wave {
    width: 100%;
    height: auto;
    display: none;
    pointer-events: none;
    position: absolute;
    /* 1px overlap so no hairline shows between the curve and the footer */
    bottom: calc(100% - 1px);
    left: 0;
    z-index: 1;
  }
  #footer .cs-wave path {
    fill: #f7f7f7;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #footer {
    margin-top: calc(12.5vw - 3rem);
  }
  #footer .cs-wave {
    display: block;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #footer .cs-wave path {
    /* the dark footer: rgba(0,0,0,0.2) over --dark (#121212). Recompute if --dark changes. */
    fill: #0e0e0e;
  }
}


/*-- -------------------------- -->
<---    Footer column wrapping    -->
<--- -------------------------- -*/

/* Override: the generated footer sets .cs-top to flex-wrap: nowrap from 768px, but the logo plus
   the link lists only fit side by side from about 1300px. Between those widths the row overflowed
   to the LEFT (it is justify-content: flex-end), pushing the logo off screen even with three
   lists, and Quick Links too once Service Areas was added. Keep wrapping, with the logo on its
   own row, until there is room for everything in one row. */
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #footer .cs-top {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  #footer .cs-logo-wrapper {
    width: 100%;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #footer .cs-top {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  #footer .cs-logo-wrapper {
    width: auto;
  }
}