/* Black/white design: artwork the recolour script can't reach. Photos and videos stay in colour. */
img[src*="logo" i],img[alt*="logo" i],img[src*=".svg" i],img[src*="/assets/cares/" i],img[src*="/icons/" i],svg image{filter:grayscale(1)}
/* Buttons and eyebrows that sit on black panels must flip to white. */
.v3-viz-cta{background:#fff!important;color:#000!important;border-color:#fff!important}
.v3-viz-cta *{color:#000!important}
.v3-hero-links .v3-btn{background-color:#fff!important;color:#000!important}
.v3-hero-links .v3-btn:hover{background-color:#e5e5e5!important}
.text-white .text-jdi-accent{color:#fff!important}
.text-white .bg-jdi-accent:not(a):not(button){background-color:#fff!important}
/* Review stars and third-party platform logos */
.v3-stars,.v3-rv-stars,.jdi-pf-stars{color:#111!important}
:has(>.v3-badge-swap)>img,img[alt="Google" i],img[alt="Yelp" i],img[alt="Facebook" i],img[alt="Angi" i],img[alt="Houzz" i],img[alt="GuildQuality" i],img[alt="HomeAdvisor" i],img[alt="BBB" i]{filter:grayscale(1)}
/* Primary buttons on black panels and photo heroes go white */
.v3t-btns .v3-btn,.v3-tp-cta .v3-btn,[class*="hero" i] .v3-btn,[class*="hero" i] a.bg-jdi-accent,.text-white a.bg-jdi-accent,.text-white .v3-btn,.v3pl-video .v3-btn,a.a1{background-color:#fff!important;color:#000!important}
.v3t-btns .v3-btn:hover,.v3-tp-cta .v3-btn:hover,[class*="hero" i] .v3-btn:hover,[class*="hero" i] a.bg-jdi-accent:hover,.text-white a.bg-jdi-accent:hover,.text-white .v3-btn:hover,.v3pl-video .v3-btn:hover,a.a1:hover{background-color:#e5e5e5!important}
.v3t-btns .v3-btn *,.v3-tp-cta .v3-btn *,[class*="hero" i] .v3-btn *,[class*="hero" i] a.bg-jdi-accent *,.text-white a.bg-jdi-accent *,.text-white .v3-btn *,.v3pl-video .v3-btn *,a.a1 *{color:#000!important}
/* Hero stars: white on a photo, black inside the home page's white rating pill */
.v3-rating .v3-stars{color:#fff!important}
.v3-rating:has(.v3-g-mark) .v3-stars,.v3-hero--video .v3-rating .v3-stars{color:#111!important}
.jdi-awards-cell img,.jdi-awards-cell:hover img{filter:grayscale(1)!important}

/* ---- Logo-led shapes ---- */
/* Corner tokens used by the calculators */
:root,.jdi-calc,[class*="jdi-calc"]{--jc-r:2px 10px 10px 2px;--jc-r-sm:2px 6px 6px 2px}
/* Controls and badges that were circles take the D corner too. Tiny dots stay round. */
.v3-viz-handle:after,.jdi-ba-knob,.jdi-est-x,.jdi-est-done .jdi-est-tick,.v3-vfeat-play,.v3-vitem-play,.v3-team-arrows button,.v3i-projs-nav button,.v3-rv-av,.v3-next-n,.v3-float-x,.v3i-tl-n,.v3t-stack a:after,.v3b-by-item img,.v3b-meet-faces img,.v3b-meet-faces span,.v3b-team img,.v3pl-player .rounded-full,.v3-xp-cta i,.v3a-std-card i,.v3a-cred li:before,.v3pl-why div:before{border-radius:2px 6px 6px 2px!important}
.v3-vfeat-play:before,.v3-vfeat-play:after{border-radius:2px 10px 10px 2px!important}
.v3-checks li:before,.v3i-trust li::before,.v3i-why li:before,.v3pd-feats li:before,.v3-step-node{border-radius:1px 3px 3px 1px!important}

/* Roofline from the logo in front of every section label */
.v3-eyebrow{display:inline-flex!important;align-items:center;gap:9px}
.jdi-ba-eyebrow{display:flex!important;align-items:center;gap:9px}
.v3-eyebrow:before,.v3-hero .v3-eyebrow:before,.jdi-ba-eyebrow:before{content:""!important;display:block!important;flex:none;width:18px!important;height:11px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;animation:none!important;background:currentColor!important;-webkit-mask:url(/assets/mono/jdi-roof.svg) center/contain no-repeat;mask:url(/assets/mono/jdi-roof.svg) center/contain no-repeat}

/* The JDI house mark, oversized and faint, on black panels */
.v3-videos,.v3-viz{background-color:#0a0a0a!important;background-image:url(/assets/mono/jdi-mark-ghost.svg)!important;background-repeat:no-repeat!important}
.v3-videos{background-size:620px auto!important;background-position:right -90px top -60px!important}
.v3-viz{background-size:auto 165%!important;background-position:58% 30%!important}
/* Blurred circles from the old design become the mark */
.v3t-hero:before,.v3i-trust:before,.v3i-why:before,.v3a-quote:before{border-radius:0!important;filter:none!important;background:url(/assets/mono/jdi-mark-ghost.svg) center/contain no-repeat!important;opacity:1!important}

/* Closing panel carries the roof pitch */
.v3-close{clip-path:polygon(0 44px,50% 0,100% 44px,100% 100%,0 100%);padding-top:calc(44px + 56px)!important}
@media (max-width:640px){.v3-close{clip-path:polygon(0 20px,50% 0,100% 20px,100% 100%,0 100%);padding-top:calc(20px + 44px)!important}}
/* Ticker separators use the roofline too */
.v3-ticker-track span:after{width:14px!important;height:8px!important;border-radius:0!important;background:currentColor!important;-webkit-mask:url(/assets/mono/jdi-roof.svg) center/contain no-repeat;mask:url(/assets/mono/jdi-roof.svg) center/contain no-repeat}
/* Small status dots in hero labels become the roofline */
span.w-2.h-2.rounded-full.bg-green-400{width:18px!important;height:11px!important;border-radius:0!important;background:currentColor!important;-webkit-mask:url(/assets/mono/jdi-roof.svg) center/contain no-repeat;mask:url(/assets/mono/jdi-roof.svg) center/contain no-repeat}