/* Effects adapted from the user-provided Meu Plano América reference. */

/* Compact global header with the colors of the current market. */
.site-header{--hp-header-top:#389dff;--hp-header-bottom:#f23550;border-bottom-width:1px!important;isolation:isolate}
.site-header[data-header-country="CA"]{--hp-header-top:#fff;--hp-header-bottom:#ed2939}





.site-header::before,.site-header::after{content:"";position:absolute;left:0;right:0;height:2px;pointer-events:none;z-index:2;background-repeat:no-repeat;background-size:28% 100%;filter:brightness(1.22);animation:hp-header-light-travel 5.6s linear infinite}
.site-header::before{top:0;background-color:color-mix(in srgb,var(--hp-header-top) 40%,transparent);background-image:linear-gradient(90deg,transparent,var(--hp-header-top) 35%,#fff 65%,transparent);box-shadow:0 0 9px color-mix(in srgb,var(--hp-header-top) 65%,transparent)}
.site-header::after{bottom:0;background-color:color-mix(in srgb,var(--hp-header-bottom) 40%,transparent);background-image:linear-gradient(90deg,transparent,var(--hp-header-bottom) 35%,#fff 65%,transparent);animation-delay:-2.8s;box-shadow:0 0 9px color-mix(in srgb,var(--hp-header-bottom) 65%,transparent)}
@keyframes hp-header-light-travel{from{background-position:-40% 0}to{background-position:140% 0}}


@media(prefers-reduced-motion:reduce){.site-header::before,.site-header::after{animation:none;background-position:50% 0}}


/* A separate border layer preserves every existing hover shadow and transform. */
.hp-travel-frame{--hp-frame-blue:#369cff;--hp-frame-blue-light:#e8f5ff}
.hp-ray-canada>.hp-travel-frame{--hp-frame-blue:#fff;--hp-frame-blue-light:#ffe8eb}
@property --hp-frame-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.hp-ray-surface{position:relative}
.hp-ray-surface>.hp-travel-frame{position:absolute!important;inset:0;display:block!important;margin:0!important;padding:2px!important;border:0!important;border-radius:inherit;pointer-events:none;z-index:2;background:conic-gradient(from var(--hp-frame-angle),transparent 0deg,var(--hp-frame-blue) 55deg,var(--hp-frame-blue-light) 85deg,transparent 120deg,transparent 180deg,#f02f4f 235deg,#fff0f2 265deg,transparent 300deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;filter:brightness(1.22);animation:hp-frame-orbit 5.6s linear infinite}



@keyframes hp-frame-orbit{to{--hp-frame-angle:360deg}}
@media(prefers-reduced-motion:reduce){.hp-travel-frame{animation:none;--hp-frame-angle:35deg}}


/* Moving tricolor light stays precisely within the existing two-pixel course divider. */

.hp-banner-divider::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:4;pointer-events:none;background-color:#cf2449;background-image:linear-gradient(90deg,transparent 0%,#f23650 20%,#fff 47%,#fff 55%,#389dff 78%,transparent 100%);background-size:28% 100%;background-repeat:no-repeat;filter:brightness(1.22);box-shadow:0 0 7px #ed38565c;animation:hp-course-divider-travel 5.6s linear infinite}
.hp-banner-divider:nth-child(even)::after{animation-delay:-2.8s}
@keyframes hp-course-divider-travel{from{background-position:-40% 0}to{background-position:140% 0}}
@media(prefers-reduced-motion:reduce){.hp-banner-divider::after{animation:none;background-position:50% 0}}


/* Approved option 2: shared country-specific light band on flag images only. */
[data-hp-flag-country]{position:relative;isolation:isolate;overflow:hidden;--hp-flag-reflection-inset:0px}
.hp-flag-reflection-image{display:inline-flex;vertical-align:middle;line-height:0;flex-shrink:0;border-radius:3px}
.hp-flag-reflection-image>img{display:block}
.city-municipal-flag-frame[data-hp-flag-country]{--hp-flag-reflection-inset:8px}
[data-hp-flag-country]::after{content:"";position:absolute;z-index:2;inset:var(--hp-flag-reflection-inset);border-radius:3px;pointer-events:none;background-image:linear-gradient(105deg,#ffffff14,#ffffff66 48%,#ffffff24 60%,#ffffff0a),var(--hp-country-reflection-image,none);background-size:100% 100%,contain;background-repeat:no-repeat;background-position:center;opacity:0;clip-path:polygon(-55% 0,-18% 0,-38% 100%,-75% 100%);filter:brightness(1.12) drop-shadow(0 0 3px #fff);animation:hp-country-flag-light 4.6s ease-in-out infinite}
@keyframes hp-country-flag-light{
 0%,12%{opacity:0;clip-path:polygon(-55% 0,-18% 0,-38% 100%,-75% 100%)}
 18%{opacity:.88}
 48%{opacity:.88;clip-path:polygon(125% 0,162% 0,142% 100%,105% 100%)}
 52%,100%{opacity:0;clip-path:polygon(125% 0,162% 0,142% 100%,105% 100%)}
}
@media(prefers-reduced-motion:reduce){[data-hp-flag-country]::after{animation:none;display:none}}


/* Shared action polish. Status colours retain their meaning; primary actions retain the brand. */
@keyframes hp-action-sweep {0%,60%{transform:translateX(-145%)}100%{transform:translateX(145%)}}
:is(.button,.slot-status,.mkt-button,.mkt-nav-link){position:relative;isolation:isolate;overflow:hidden}
:is(.button,.slot-status,.mkt-button,.mkt-nav-link):not(:disabled)::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(105deg,transparent 28%,#ffffff08 40%,#ffffff65 50%,#ffffff08 60%,transparent 72%);transform:translateX(-145%);animation:hp-action-sweep 5.8s ease-in-out infinite}
:is(.slot-status)::before{background:linear-gradient(105deg,transparent 28%,#2d72c40b 41%,#ffffffef 50%,#2d72c40b 59%,transparent 72%);animation-duration:4.8s}
:is(.service-card,.company-card,.category-card,.resource-card,.official-social-card,.paint-service-card,.mkt-card,.mkt-output,.purpose-card){transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
:is(.estimate-form,.advertise-form){border:1px solid #c5d7ef;box-shadow:0 12px 30px #102c5312;border-radius:18px}


@media(hover:hover) and (pointer:fine){
 :is(.service-card,.company-card,.category-card,.resource-card,.official-social-card,.paint-service-card,.mkt-card,.mkt-output,.purpose-card):hover{transform:translateY(-3px);box-shadow:0 18px 38px #102c5324;border-color:#9fbce2}
 
}
:is(.button,.mkt-button,.filter-button):focus-visible{outline:3px solid #3584db;outline-offset:4px}
@media(prefers-reduced-motion:reduce){
 :is(.button,.slot-status,.mkt-button,.mkt-nav-link)::before{animation:none!important;display:none}
 :is(.service-card,.company-card,.category-card,.resource-card,.official-social-card,.paint-service-card,.mkt-card,.mkt-output,.purpose-card){transition:none!important;transform:none!important}
}

/* ORIGINAL: background-motion.css — mapped to existing image layers. */
@keyframes hp-background-slow-zoom{0%{transform:scale(1)}35.714%,42.857%{transform:scale(1.035)}92.857%,100%{transform:scale(1)}}
:is(.paint-hero-image>img,.paint-color-story-photo>img,.hero>.hero-photo,.mkt-visual>img){animation:hp-background-slow-zoom 28s linear infinite;transform-origin:center center}
@media(prefers-reduced-motion:reduce){:is(.paint-hero-image>img,.paint-color-story-photo>img,.hero>.hero-photo,.mkt-visual>img){animation:none!important;transform:none}}
/* Preserve structure; keep image, shade, copy, and divider in independent layers. */
:root{--navy:#0c2546;--ink:#102d53;--paper:#f6f8fb;--hp-red:#cf2449;--hp-blue:#389dff}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.site-header{background:#fff;--hp-header-top:#389dff;--hp-header-bottom:#f23550}
.site-header::before{bottom:auto}.site-header::after{top:auto}
.painting-landing{--paint-navy:#0c2546}
.paint-hero{overflow:hidden;isolation:isolate;background:var(--paint-navy,#0c2546)}
.painting-landing .paint-hero-image{z-index:0;inset:0 0 0 30%;overflow:hidden}
.painting-landing .paint-hero::before{z-index:1;background:linear-gradient(90deg,var(--paint-navy,#0c2546) 0%,var(--paint-navy,#0c2546) 29%,color-mix(in srgb,var(--paint-navy,#0c2546) 96%,transparent) 42%,color-mix(in srgb,var(--paint-navy,#0c2546) 63%,transparent) 60%,color-mix(in srgb,var(--paint-navy,#0c2546) 12%,transparent) 85%)}
.paint-hero-layout{position:relative;z-index:2}.paint-hero-copy{max-width:530px}.paint-image-caption{z-index:3}
.painting-landing .paint-color-story{isolation:isolate;overflow:hidden;background:var(--paint-navy,#0c2546)}
.painting-landing .paint-color-story-photo{position:absolute;inset:0 36% 0 0;z-index:0;overflow:hidden;height:auto}
.painting-landing .paint-color-story::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent 0%,transparent 25%,color-mix(in srgb,var(--paint-navy,#0c2546) 40%,transparent) 39%,color-mix(in srgb,var(--paint-navy,#0c2546) 94%,transparent) 51%,var(--paint-navy,#0c2546) 56%,var(--paint-navy,#0c2546) 100%)}
.paint-color-story>.container{position:relative;z-index:2}
.painting-landing .paint-color-story-copy{width:42%;padding:58px 0 58px 24px;text-align:left}
.painting-landing .paint-color-story-copy :is(h2,p){max-width:100%;overflow-wrap:break-word}
.hero>.hero-photo{background-image:url('/assets/optimized-v23/56259c1c9a45b655.webp')}.hero::after{z-index:1}.hero-inner{z-index:2}
.hp-banner-divider{position:relative}.hp-banner-divider::after{top:auto}
.paint-primary::after{display:none}
.button>.hp-travel-frame,.filter-button>.hp-travel-frame{background:conic-gradient(from var(--hp-frame-angle),transparent 0deg,var(--hp-frame-blue) 55deg,var(--hp-frame-blue-light) 85deg,transparent 120deg,transparent 180deg,#f02f4f 235deg,#fff0f2 265deg,transparent 300deg)!important}
:is(.service-card,.company-card,.paint-service-card,.category-card,.resource-card,.official-social-card,.catalog-search,.catalog-sidebar,.mkt-card,.purpose-card,.advertise-form,.estimate-form){box-shadow:0 12px 30px #102c5312}
.hp-ray-surface>.hp-travel-frame{white-space:normal}
.hp-flag-reflection-image img{margin:0;max-width:100%;object-fit:contain}
:is(.hp-fx-offscreen,.hp-fx-offscreen *,html.hp-fx-hidden *,html.hp-fx-hidden)::before,
:is(.hp-fx-offscreen,.hp-fx-offscreen *,html.hp-fx-hidden *,html.hp-fx-hidden)::after,
:is(.hp-fx-offscreen,.hp-fx-offscreen *,html.hp-fx-hidden *){animation-play-state:paused!important}
@media(max-width:900px){
 .painting-landing .paint-color-story-copy{width:47%;padding-left:25px}
 .painting-landing .paint-color-story::before{background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--paint-navy,#0c2546) 40%,transparent) 30%,var(--paint-navy,#0c2546) 54%)}
 .painting-landing .paint-hero-copy{max-width:64%}
}
@media(max-width:540px){
 .painting-landing .paint-hero-image{inset:0}
 .painting-landing .paint-hero::before{background:linear-gradient(90deg,color-mix(in srgb,var(--paint-navy,#0c2546) 98%,transparent),color-mix(in srgb,var(--paint-navy,#0c2546) 90%,transparent) 65%,color-mix(in srgb,var(--paint-navy,#0c2546) 78%,transparent))}
 .painting-landing .paint-hero-copy{max-width:100%}
 .painting-landing .paint-color-story-photo{position:relative;inset:auto;height:230px}
 .painting-landing .paint-color-story-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,var(--paint-navy,#0c2546) 100%)}
 .painting-landing .paint-color-story::before{display:none}
 .painting-landing .paint-color-story-copy{width:100%;padding:24px 0 40px}
}
/* Keep the Home shade separate from the two-pixel divider. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0c2546 0%,#0c2546f5 32%,#0c2546ac 56%,#0c254620 85%)}
.painting-landing :is(.paint-hero-image>img,.paint-color-story-photo>img){animation:hp-background-slow-zoom 28s linear infinite;transform-origin:center center}
@media(prefers-reduced-motion:reduce){.painting-landing :is(.paint-hero-image>img,.paint-color-story-photo>img){animation:none!important;transform:none}}
.painting-landing{--paint-navy:#0c2546!important}
:is(.button,.mkt-button){font-weight:750;letter-spacing:normal}
/* Reset the former flag decoration completely: this layer owns the full Home shade. */
.hero{background:#0c2546;isolation:isolate}
.hero::before{
 content:"";position:absolute;inset:0;width:auto;height:auto;max-width:none;max-height:none;
 opacity:1;transform:none;filter:none;border:0;border-radius:0;z-index:1;pointer-events:none;animation:none;
 background:linear-gradient(90deg,#0c2546 0%,#0c2546 28%,#0c2546f7 43%,#0c2546c9 58%,#0c254670 73%,#0c254614 100%);
}
.hero h1{max-width:min(760px,100%)}.hero p{max-width:min(480px,100%)}
/* Explicit complete shade geometry also protects every service template from inherited decoration. */
.painting-landing .paint-hero::before,
.painting-landing .paint-color-story::before{
 inset:0;width:auto;height:auto;max-width:none;max-height:none;opacity:1;transform:none;filter:none;
 border-radius:0;pointer-events:none;animation:none;
}
@media(max-width:540px){
 .hero::before{background:linear-gradient(90deg,#0c2546f7 0%,#0c2546e8 60%,#0c2546b8 100%)}
 .hero h1,.hero p{max-width:100%}
}

/* Park decorative animation work outside the viewport and in background tabs. */
:is(.hp-fx-offscreen,.hp-fx-offscreen *)::before,
:is(.hp-fx-offscreen,.hp-fx-offscreen *)::after,
html.hp-fx-hidden *::before,html.hp-fx-hidden *::after{animation-play-state:paused!important}

@media(max-width:820px){.hero>.hero-photo{background-image:url('/assets/optimized-v23/56259c1c9a45b655-960.webp')}}