/* ===== TrueView site r3 (Oct 30 2026): the landed look. Linked last on every page.
   Palette: charcoal #343E44 text and buttons, robin's egg #5DB1CA rules and icons, mist #E9F5F8, sky #A8D5E3,
   Burnished Gold #AF946A small accents (stars), Rosy Coral #BA6D72 only as a soft pastel. No old accent, no navy.
   Clean, lots of white, smooth blue watercolor fading to white. ===== */
:root{--r3-ink:#343E44;--r3-egg:#5DB1CA;--r3-egg-d:#2F6F82;--r3-mist:#E9F5F8;--r3-sky:#A8D5E3;--r3-gold:#AF946A;--r3-coral:#BA6D72;--r3-coral-soft:#F3E3E4;--r3-line:#E3EFF3}
body{color:var(--r3-ink)}
/* blue watercolor wash fading to white, used as a quiet ground */
.r3wash,.r3home .r3hero{background:radial-gradient(70% 90% at 92% 0%,rgba(168,213,227,.38) 0,rgba(233,245,248,.55) 38%,rgba(255,255,255,0) 72%)}
/* header: white, quiet */
.top{background:rgba(255,255,255,.94)!important;border-bottom:1px solid var(--r3-line)!important}
/* buttons: charcoal pills, no colored glow */
.btn:not(.ghost),.sticky{background:var(--r3-ink)!important;color:#fff!important;box-shadow:0 10px 24px -14px rgba(52,62,68,.55)!important}
.btn:not(.ghost):hover{background:#252D32!important}
.btn.ghost{background:#fff!important;color:var(--r3-ink)!important;border:2px solid var(--r3-ink)!important;box-shadow:none!important}
/* headings and kickers */
h1,h2{color:var(--r3-ink);letter-spacing:-.025em}
.eyebrow{color:var(--r3-egg-d)!important}
/* review stars in burnished gold */
.stars{color:var(--r3-gold)!important;letter-spacing:.08em}
/* cards: thin line, faint shadow, roomy */
.card{border:1px solid var(--r3-line)!important;border-radius:14px!important;box-shadow:0 10px 30px -18px rgba(52,62,68,.25)!important;background:#fff!important}
/* footer: mist wash fading up into white */
footer{background:linear-gradient(180deg,#fff 0,var(--r3-mist) 100%)!important;border-top:0!important}

/* ===== homepage hero (approved short layout) ===== */
.r3home .bostrip{display:none!important}
.r3hero{position:relative;overflow:hidden;min-height:540px;display:flex;align-items:center;max-width:none!important;margin:0!important;padding:0!important}
.r3art{position:absolute;right:max(0px,calc((100vw - 1440px)/2));top:0;bottom:0;width:min(58vw,820px);pointer-events:none;display:flex;align-items:center}
.r3art img{display:block;width:100%;height:auto;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(0deg,transparent 0,#000 14%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(0deg,transparent 0,#000 14%,#000 90%,transparent 100%);mask-composite:intersect}
.r3ctas#heroctas{display:block!important}
html:not(.bo-ended) .r3story .ctas{display:none!important}
.r3copy{position:relative;z-index:1;width:100%;max-width:1344px;margin:0 auto;padding:34px clamp(20px,4vw,48px) 44px}
.r3copy>*{max-width:560px}
.r3logo{display:block;width:270px;height:auto;margin:0 0 26px -5px}
.r3hero h1{text-wrap:balance;margin:0 0 14px;font-size:clamp(2.4rem,4.6vw,4rem);line-height:1.03;letter-spacing:-.037em;font-weight:800;color:var(--r3-ink)}
.r3sub{margin:0 0 28px;font-size:clamp(1.1rem,1.6vw,1.45rem);font-weight:500;color:var(--r3-egg-d)}
.r3sub b{font-weight:700;color:var(--r3-ink)}
.r3book{min-height:58px!important;padding:0 44px!important;font-size:1.12rem!important}
.r3badges{list-style:none;max-width:1100px;margin:0 auto;padding:18px 24px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 34px;border-top:1px solid var(--r3-line);border-bottom:1px solid var(--r3-line);background:#fff;position:relative;z-index:1}
.r3badges li{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:#4C575D}
.r3badges svg{width:18px;height:18px;flex:none}
/* header logo is in the hero on the homepage */
@media (min-width:901px){.r3home .top .brand{visibility:hidden}}
.r3home .top{position:sticky}
/* old photo hero -> story band with the Style 1 squeegee */
.r3home .r3story{display:grid!important;grid-template-columns:minmax(0,420px) minmax(0,560px);justify-content:center;align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(40px,6vw,80px) 20px!important;background:radial-gradient(60% 80% at 20% 50%,rgba(233,245,248,.9) 0,rgba(255,255,255,0) 70%)}
.r3home .r3story .bg.r3sq{position:static!important;width:100%!important;height:auto!important;min-height:0!important;max-width:420px;object-fit:contain!important;mix-blend-mode:multiply}
.r3home .r3story .herocard{position:static!important;margin:0!important;max-width:560px;box-shadow:none!important;background:transparent!important;padding:0!important;animation:none!important}
.r3home .r3story h2{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.1;margin:.3em 0 .5em}
/* door hanger page: squeegee art small and centered */
.dl-art.r3sqart{display:block;width:200px!important;height:auto!important;margin:0 auto 10px!important;mix-blend-mode:multiply;border-radius:0!important}
/* Fall Sale band: smooth blue fading to white */
.fallhero,.promo{background:linear-gradient(180deg,var(--r3-mist) 0,#fff 100%)!important}
/* a little Rosy Coral, soft pastel only */
.boc-eye,.bostrip b{color:#8E4F55!important}
.boc-eye::before{background:var(--r3-coral)!important}

@media (max-width:900px){
 .r3hero{display:block;min-height:0;background:radial-gradient(120% 60% at 100% 0,rgba(226,241,246,.9) 0,rgba(255,255,255,0) 62%)}
 .r3copy{padding:22px 20px 22px;text-align:center}
 .r3copy>*{max-width:none}
 .r3logo{width:176px;margin:0 auto 16px}
 .r3hero h1{font-size:2.5rem;margin-bottom:10px;text-wrap:balance}
 .r3sub{font-size:1.12rem;margin-bottom:20px}
 .r3ctas .btn{display:flex!important;width:100%}
 .r3art{position:relative;right:auto;top:auto;width:100%;margin-top:6px}
 .r3art{display:block;bottom:auto}
 .r3art img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
 .r3hero{display:flex;flex-direction:column}
 .r3copy{order:1}.r3art{order:3}
 .r3badges{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;padding:14px 16px;margin:0 16px;border:0;background:#F6FAFC;border-radius:14px}
 .r3badges li{font-size:.88rem}
 .r3home .r3story{grid-template-columns:1fr;text-align:left}
 .r3home .r3story .bg.r3sq{max-width:240px;margin:0 auto}
 .r3home .top .mbook{display:none!important}
}
/* mobile: main is a flex column in style.css with the old hero pulled up; keep the r3 order */
.r3home main>.hero.r3story{order:0!important}
.r3badges{box-sizing:border-box}
@media (max-width:900px){.r3badges{width:auto!important;max-width:calc(100% - 32px)!important;margin:0 auto!important}}
/* Adobe only visuals: empty labeled slots wait for Illustrator exports (see REPORT/slots.json); they take no space */
.r3slot{display:none!important}
.r3home .top .brand{visibility:hidden}
.r3badges{gap:10px 28px}
/* business hero with the approved Style 5 storefront painting */
.bzhero .bhero-in.r3bz{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,540px)!important;gap:40px;align-items:center;max-width:1200px!important}
.r3bzart{width:100%;height:auto;display:block;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 88%,transparent 100%);mask-composite:intersect}
@media (max-width:900px){.bzhero .bhero-in.r3bz{grid-template-columns:1fr!important;gap:8px}.r3bzart{max-width:520px;margin:0 auto}}
/* water fed pole scene (Oct 30): the pole tip sits near the top edge, so the top fade is short; Bryan sits ~27% from the left */
.r3art img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(0deg,transparent 0,#000 12%,#000 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(0deg,transparent 0,#000 12%,#000 97%,transparent 100%)}
.r3bzart{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 3%,#000 88%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 3%,#000 88%,transparent 100%)}
@media (max-width:900px){.r3art img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 84%,transparent 100%)}}