/* Design preview: the R Oliver Painting site in hiublue's design language,
   keeping the site's own navy and orange. Only applies when html.hb is set
   (see the loader at the end of assets/js/config.js). */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Inter:wght@400;500;600&display=swap");

html.hb{
  --hb-bg:#ffffff;--hb-bg2:#fafafa;--hb-bg3:#f5f5f5;
  --hb-ink:#171717;--hb-ink2:#404040;--hb-ink3:#525252;
  --hb-line:#e5e5e5;--hb-line2:#d4d4d4;
  --line:var(--hb-line);--muted:var(--hb-ink3);--ink:var(--hb-ink);
  --shadow:0 1px 2px rgba(10,13,18,.05),0 12px 32px -12px rgba(10,13,18,.12);
}
html.hb body{background:var(--hb-bg);color:var(--hb-ink2);font-family:Inter,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
html.hb h1,html.hb h2,html.hb h3,html.hb h4,html.hb .nav,html.hb .faq-q,html.hb .big-stat,html.hb .roi-mark{font-family:Manrope,Inter,sans-serif}
html.hb h1,html.hb h2{font-weight:400;letter-spacing:-.025em;color:var(--hb-ink)}
html.hb h3,html.hb h4{font-weight:500;letter-spacing:-.01em;color:var(--hb-ink)}

/* Eyebrows: quiet label, not shouting caps */
html.hb .kicker,html.hb .eyebrow{text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:600;color:var(--orange)}

/* Buttons: pills, no lift */
html.hb .btn{border-radius:9999px;padding:11px 20px;font-weight:600;font-size:.95rem;letter-spacing:0;box-shadow:none}
html.hb .btn:hover{transform:none}
html.hb .btn-orange{background:var(--orange)}
html.hb .btn-orange:hover{background:#ec4b12}
html.hb .btn-navy{background:var(--navy)}
html.hb .btn-white,html.hb .btn-ghost,html.hb .btn-outline{background:#fff;color:var(--hb-ink);border:1px solid var(--hb-line2)}
html.hb .btn-white:hover,html.hb .btn-ghost:hover,html.hb .btn-outline:hover{background:var(--hb-bg2)}

/* Utility bar + header: white, hairline borders */
html.hb .utility{background:var(--hb-bg);color:var(--hb-ink3);border-bottom:1px solid var(--hb-line)}
html.hb .utility a,html.hb .utility-links a:first-child{color:var(--navy);font-weight:600}
html.hb .header{background:rgba(255,255,255,.92);border-bottom:1px solid var(--hb-line)}
html.hb .header-inner{height:80px}
html.hb .brand img{max-height:62px}
html.hb .nav{font-weight:500;font-size:.95rem;color:var(--hb-ink2);gap:28px}
html.hb .nav a:hover{color:var(--hb-ink)}
html.hb .nav .nav-pro{color:var(--orange)}
html.hb .menu-toggle{border-radius:9999px;background:#fff;color:var(--hb-ink);border:1px solid var(--hb-line2)}
html.hb .nav.open{top:80px;background:#fff}

/* Hero: white with a faint grid, text first, photo framed underneath */
html.hb .hero,html.hb .page-hero{position:relative;background:var(--hb-bg);color:var(--hb-ink2);overflow:hidden}
html.hb .hero:before,html.hb .page-hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--hb-line) 1px,transparent 1px),linear-gradient(90deg,var(--hb-line) 1px,transparent 1px);
  background-size:96px 96px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 60% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 60% 55% at 60% 30%,#000 10%,transparent 70%);opacity:.7}
html.hb .hero-grid{position:relative;display:block;min-height:0;width:min(var(--max),calc(100% - 40px));margin:auto}
html.hb .hero-copy{padding:88px 0 40px;max-width:820px}
html.hb .hero-copy:after{display:none}
html.hb .hero h1{font-size:clamp(2.75rem,5.4vw,4.6rem);line-height:1.06;letter-spacing:-.035em;font-weight:400;margin:0 0 22px;color:var(--hb-ink);max-width:none}
html.hb .hero h1 span{color:var(--orange)}
html.hb .hero .lead{color:var(--hb-ink2);font-size:1.15rem;max-width:640px}
html.hb .trust-mini{border-top:1px solid var(--hb-line);max-width:820px}
html.hb .trust-mini strong{color:var(--hb-ink);font-weight:600}
html.hb .trust-mini span{color:var(--hb-ink3)}
html.hb .hero-media{min-height:520px;border:1px solid var(--hb-line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);margin:0 0 88px;background:var(--hb-bg3)}
html.hb .hero-media:after{display:none}
html.hb .hero-badge{background:rgba(255,255,255,.96);color:var(--hb-ink);border:1px solid var(--hb-line);border-radius:12px;box-shadow:var(--shadow)}
html.hb .hero-badge strong{font-family:Manrope,sans-serif;font-weight:500}
html.hb .hero-badge span{color:var(--hb-ink3)}
html.hb .page-hero{border-bottom:1px solid var(--hb-line)}
html.hb .page-hero .container{position:relative}
html.hb .page-hero h1{font-weight:400;letter-spacing:-.035em;line-height:1.06;font-size:clamp(2.6rem,5vw,4.4rem);color:var(--hb-ink)}
html.hb .page-hero p{color:var(--hb-ink2)}
html.hb .page-hero .aside{background:var(--hb-bg2);border:1px solid var(--hb-line);border-radius:16px}
html.hb .page-hero .aside ul{color:var(--hb-ink3)}

/* Bands and sections */
html.hb .quote-strip{background:var(--hb-bg2);border-top:1px solid var(--hb-line);border-bottom:1px solid var(--hb-line)}
html.hb .quote-grid h2{font-weight:500}
html.hb .quick-form input,html.hb .quick-form select,html.hb .form input,html.hb .form select,html.hb .form textarea{border-color:var(--hb-line2);border-radius:8px;box-shadow:0 1px 2px rgba(10,13,18,.05)}
html.hb .trustbar{border-bottom:1px solid var(--hb-line)}
html.hb .trustpoint strong{font-family:Manrope,sans-serif;font-weight:500;color:var(--hb-ink)}
html.hb .section{padding:96px 0}
html.hb .section-head h2,html.hb .title2{font-size:clamp(2rem,3.3vw,3rem);line-height:1.15;letter-spacing:-.025em;font-weight:400}
html.hb .section-head p{color:var(--hb-ink2);font-size:1.05rem}

/* Cards: soft gray, hairline, no lift */
html.hb .service-card,html.hb .card,html.hb .area,html.hb .promise-card{background:var(--hb-bg2);border:1px solid var(--hb-line);border-radius:12px;box-shadow:none}
html.hb .service-card:hover{transform:none;box-shadow:none;border-color:var(--hb-line2);background:#fff}
html.hb .service-card h3{font-size:1.2rem}
html.hb .service-card .num{color:var(--hb-ink3);font-weight:500;letter-spacing:0}
html.hb .service-card .arrow{color:var(--navy);font-size:1.2rem}
html.hb .icon-shape{width:40px;height:40px;border-radius:9999px;background:var(--orange);color:#fff;font-size:1rem;box-shadow:0 0 0 6px #fff1ea}
html.hb .check{background:var(--orange);color:#fff;box-shadow:0 0 0 5px #fff1ea;width:26px;height:26px;font-size:.8rem}
html.hb .promise-card strong{font-family:Manrope,sans-serif;font-weight:500;color:var(--hb-ink)}
html.hb .badge-panel{background:var(--hb-bg2);border:1px solid var(--hb-line);border-radius:16px}
html.hb .big-stat{font-weight:400;letter-spacing:-.04em;color:var(--navy)}
html.hb .area{font-weight:500;color:var(--hb-ink)}
html.hb .area:hover{color:var(--orange);background:#fff}
html.hb .pill{background:#fff;border-color:var(--hb-line);font-weight:500}

/* Feature band: light card, photo inside */
html.hb .visual-band{background:var(--hb-bg2);color:var(--hb-ink2);border:1px solid var(--hb-line);border-radius:16px;box-shadow:none}
html.hb .visual-band h2{font-size:clamp(2rem,3.3vw,3rem);line-height:1.12}
html.hb .visual-band p{color:var(--hb-ink2)}
html.hb .visual-band .eyebrow{color:var(--orange)}

/* Process: white, icon then connector line, like hiublue's "How it works" */
html.hb .process{background:var(--hb-bg);color:var(--hb-ink2)}
html.hb .process .section-head p{color:var(--hb-ink2)}
html.hb .steps{border:0;border-radius:0;gap:24px;overflow:visible}
html.hb .step{border:0;padding:0;min-height:0;position:relative}
html.hb .step b{width:36px;height:36px;font-size:.8rem;font-weight:600;color:#fff;box-shadow:0 0 0 6px #fff1ea;margin-bottom:28px}
html.hb .step:before{content:"";position:absolute;left:54px;right:6px;top:18px;height:1px;background:color-mix(in srgb,var(--navy) 35%,transparent)}
html.hb .step h3{font-size:1.1rem}
html.hb .step p{color:var(--hb-ink3)}

/* Pro paths, heritage, brushes */
html.hb .pro-card{border-radius:16px}
html.hb .pro-card.roi{background:var(--hb-bg2);border:1px solid var(--hb-line)}
html.hb .pro-card h3{font-weight:400;letter-spacing:-.025em}
html.hb .mini-flow span{font-weight:500;background:#fff;border:1px solid var(--hb-line)}
html.hb .builder .mini-flow span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
html.hb .truck-wrap{border-radius:16px;border:1px solid var(--hb-line)}
html.hb .truck-wrap:after{display:none}
html.hb .heritage-copy h2{font-size:clamp(2rem,3.3vw,3rem);line-height:1.15}
html.hb .script{font-family:Manrope,sans-serif;font-style:normal;font-weight:500;font-size:1rem}
html.hb .brush-banner{background:var(--hb-bg2);border:1px solid var(--hb-line);border-radius:16px}
html.hb .brush-banner h2{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.15}

/* FAQ */
html.hb .faq-item{border-color:var(--hb-line)}
html.hb .faq-q{font-weight:500;color:var(--hb-ink);font-size:1.02rem}

/* Closing CTA: calm gray band, orange stays on the button */
html.hb .cta-band{background:var(--hb-bg2);color:var(--hb-ink2);border-top:1px solid var(--hb-line)}
html.hb .cta-grid h2{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.1;color:var(--hb-ink)}
html.hb .cta-band .eyebrow{color:var(--orange)}
html.hb .cta-band .btn-white{background:var(--orange);color:#fff;border:0}
html.hb .cta-band .btn-navy{background:#fff;color:var(--hb-ink);border:1px solid var(--hb-line2)}

/* Footer: light, navy logo */
html.hb .footer{background:var(--hb-bg);color:var(--hb-ink3);border-top:1px solid var(--hb-line)}
html.hb .footer-logo{content:url("/assets/images/r-oliver-logo-navy.png");width:210px}
html.hb .footer h4{color:var(--hb-ink);font-weight:500}
html.hb .footer a{color:var(--hb-ink3)}
html.hb .footer a:hover{color:var(--hb-ink)}
html.hb .footer p{color:var(--hb-ink3)}
html.hb .footer strong,html.hb .footer b{color:var(--hb-ink)}
html.hb .footer-bottom{border-top-color:var(--hb-line);color:var(--hb-ink3)}
html.hb .mobile-cta{background:rgba(255,255,255,.96);border-top:1px solid var(--hb-line)}

/* ROI Make-Ready pages keep their slate accent */
html.hb .roi-theme .page-hero{background:var(--hb-bg)}

@media(max-width:1040px){
  html.hb .steps{grid-template-columns:1fr 1fr;row-gap:40px}
  html.hb .step:before{display:none}
}
@media(max-width:720px){
  html.hb .header-inner{height:72px}
  html.hb .nav.open{top:72px}
  html.hb .hero-copy{padding:56px 0 32px}
  html.hb .hero h1{font-size:2.7rem}
  html.hb .hero-media{min-height:380px;margin-bottom:56px}
  html.hb .steps{grid-template-columns:1fr}
}

/* Inline white text from the current design, adjusted for the light layout */
html.hb .cta-band .eyebrow[style]{color:var(--orange)!important}
html.hb .footer [style*="color:#fff"]{color:var(--hb-ink)!important}
html.hb .pro-card.builder h3,html.hb .pro-card.builder a{color:#fff}
html.hb .pro-card.builder p{color:#c9d6e2}