@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;
  }
}


@supports selector(label:has(> input)) {
  body:not(.pb-floating-labels-off) form label:has(> input:not([type="checkbox"]):not([type="radio"])),
  body:not(.pb-floating-labels-off) form label:has(> textarea),
  body:not(.pb-floating-labels-off) form label:has(+ input:not([type="checkbox"]):not([type="radio"])),
  body:not(.pb-floating-labels-off) form label:has(+ textarea) {
    display: block;
    color: var(--bodyTextColor, #4e4b66);
    transition: color 180ms ease, font-size 180ms ease, transform 180ms ease;
  }

  body:not(.pb-floating-labels-off) form label:has(> input[placeholder]:not(:focus):placeholder-shown),
  body:not(.pb-floating-labels-off) form label:has(> textarea[placeholder]:not(:focus):placeholder-shown),
  body:not(.pb-floating-labels-off) form label:has(+ input[placeholder]:not(:focus):placeholder-shown),
  body:not(.pb-floating-labels-off) form label:has(+ textarea[placeholder]:not(:focus):placeholder-shown) {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  body:not(.pb-floating-labels-off) form label:has(> input:focus),
  body:not(.pb-floating-labels-off) form label:has(> input:not(:placeholder-shown)),
  body:not(.pb-floating-labels-off) form label:has(> input:not([placeholder])),
  body:not(.pb-floating-labels-off) form label:has(> textarea:focus),
  body:not(.pb-floating-labels-off) form label:has(> textarea:not(:placeholder-shown)),
  body:not(.pb-floating-labels-off) form label:has(> textarea:not([placeholder])),
  body:not(.pb-floating-labels-off) form label:has(+ input:focus),
  body:not(.pb-floating-labels-off) form label:has(+ input:not(:placeholder-shown)),
  body:not(.pb-floating-labels-off) form label:has(+ input:not([placeholder])),
  body:not(.pb-floating-labels-off) form label:has(+ textarea:focus),
  body:not(.pb-floating-labels-off) form label:has(+ textarea:not(:placeholder-shown)),
  body:not(.pb-floating-labels-off) form label:has(+ textarea:not([placeholder])) {
    color: var(--primary, #ff6a3e) !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    transform: translateY(-0.125rem);
  }

  body:not(.pb-floating-labels-off) form label:has(> :is(input, textarea):focus) > :is(input, textarea)::placeholder,
  body:not(.pb-floating-labels-off) form label:has(+ :is(input, textarea):focus) + :is(input, textarea)::placeholder {
    opacity: 0.18;
  }

  body:not(.pb-floating-labels-off) form input:not([type="checkbox"]):not([type="radio"])::placeholder,
  body:not(.pb-floating-labels-off) form textarea::placeholder {
    transition: opacity 180ms ease, color 180ms ease;
  }

  @media (prefers-reduced-motion: reduce) {
    body:not(.pb-floating-labels-off) form label,
    body:not(.pb-floating-labels-off) form input::placeholder,
    body:not(.pb-floating-labels-off) form textarea::placeholder {
      transition-duration: 0s !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;
  }
}