/* hp-fix.css: Renton QA gate fixes (Boss 2026-10-16 "fix renton gate"). Loaded last on every page. */
/* e) text contrast: faded white on dark heroes, orange accent on dark, dark footer text on dark footer */
.breadcrumb,.breadcrumb a{color:rgba(255,255,255,.86)!important}
.breadcrumb span{color:#ffd3b3!important}
h1 em,h1 span{color:rgba(255,255,255,.86)!important}
.hero-desc,.page-hero-desc{color:rgba(255,255,255,.9)!important}
.footer-about,.footer-lic,.footer-col h4{color:#a09488!important}
.svc-arr{color:#6b6258!important}
.footer-col li,.footer-col span,.footer-col a{color:#c2b8ad!important}
.footer-col a:hover{color:#fdfaf6!important}
main > h1{color:#1e1c1a!important}
.footer-bottom span,.footer-bottom a,a.hp-own{color:#a09488!important}
.before-after .sec-kicker{color:#a09488!important}
.ba-sub{color:#c2b8ad!important}
.page-hero-overlay,.hero-overlay,.page-hero-photo > .overlay,.hero-photo > .overlay,.page-hero-photo .overlay{background:linear-gradient(to top,rgba(20,16,12,.94) 0%,rgba(20,16,12,.78) 50%,rgba(20,16,12,.3) 100%)!important}
/* e) hover contrast: orange buttons darken on hover instead of lightening; footer and service-row hovers stay readable */
.btn-warm:hover,.btn-cta:hover,.submit-btn:hover,.hrb a:hover,.side-cta:hover,.sidebar-btn:hover{background:#9a4a1e!important;color:#fdfaf6!important}
.hp-own:hover{color:#f5f1eb!important}
.svc-row:hover,.svc-row:hover *{color:#1e1c1a!important}
/* h) phones: every text >= 16px, every tap target >= 44px tall (exact elements measured too small by the phone scan) */
@media (max-width:767px){
 div.about > div.about-content > a.btn-solid,
 div.about > div.about-content > div.sec-kicker,
 div.about > div.about-content > p.about-body,
 div.about-content > ul.check-list > li,
 div.area-box > div.area-tags > span.area-tag,
 div.area-grid > div.area-card > p,
 div.areas > div.areas-wrap > div.area-chip,
 div.areas > div.sec-kicker,
 div.areas > p.areas-sub,
 div.ba-grid > div > div.ba-col-label.ba-col-label-aged,
 div.ba-grid > div > div.ba-col-label.ba-col-label-new,
 div.ba-photos > div.ba-photo > div.ba-photo-cap,
 div.before-after > div.ba-head > div.sec-kicker,
 div.before-after > div.ba-head > p.ba-sub,
 div.contact-block > ul.services-list > li,
 div.contact-form-col > form > button.submit-btn,
 div.contact-form-col > form > p.form-note,
 div.contact-info-col > div.contact-block > div.contact-label,
 div.contact-info-col > div.contact-block > div.contact-sub,
 div.contact-info-col > div.contact-block > div.contact-value,
 div.contact-wrap > div.contact-form-col > div.sec-kicker,
 div.contact-wrap > div.contact-info-col > div.sec-kicker,
 div.content-main > p > strong,
 div.content-sidebar > div.area-box > h4,
 div.content-sidebar > div.related > a.rel-link,
 div.content-sidebar > div.related > h4,
 div.content-sidebar > div.related-services > a.related-link,
 div.content-sidebar > div.related-services > h4,
 div.content-sidebar > div.sidebar-areas > h4,
 div.content-sidebar > div.sidebar-cta-box > a.sidebar-btn,
 div.content-sidebar > div.sidebar-cta-box > h3,
 div.content-sidebar > div.sidebar-cta-box > p,
 div.content-sidebar > ul.check-list > li,
 div.content-sidebar > ul.sidebar-checklist > li,
 div.content-wrap > div.content-main > div.sec-kicker,
 div.content-wrap > div.content-main > h3,
 div.content-wrap > div.content-main > p,
 div.content-wrap > h3,
 div.content-wrap > p,
 div.creds > div.cred > div.cred-l,
 div.creds > div.cred > div.cred-n,
 div.cta-band > div > p.cta-sub,
 div.cta-band > div.cta-right > a.btn-warm,
 div.cta-band > div.cta-right > div.cta-hours,
 div.damage-grid > div.damage-card > div.damage-card-name,
 div.damage-grid > div.damage-card > p.damage-card-desc,
 div.damage-grid > div.damage-card.urgent > div.damage-card-name,
 div.damage-grid > div.damage-card.urgent > p.damage-card-desc,
 div.faq > div.sec-kicker,
 div.faq > p.faq-intro,
 div.faq-grid > div.faq-item > div.faq-q,
 div.faq-grid > div.faq-item > p.faq-a,
 div.faq-list > div.faq-item > div.faq-a,
 div.faq-list > div.faq-item > div.faq-q,
 div.faq-list > div.faq-item > p.faq-a,
 div.faq-section > div.faq-item > div.faq-q,
 div.faq-section > div.faq-item > p.faq-a,
 div.faq-section > div.sec-kicker,
 div.faq-section > p.faq-intro,
 div.finish-grid > div.finish-card > div.finish-name,
 div.finish-grid > div.finish-card > div.finish-tag,
 div.finish-grid > div.finish-card > p.finish-desc,
 div.finish-grid > div.finish-card.popular > div.finish-name,
 div.finish-grid > div.finish-card.popular > div.finish-tag,
 div.finish-grid > div.finish-card.popular > p.finish-desc,
 div.footer-grid > div > div.footer-lic,
 div.footer-grid > div > p.footer-about,
 div.footer-grid > div.footer-col > h4,
 div.form-row > div.form-group > label,
 div.geo > div.geo-inner > div.sec-kicker,
 div.geo > div.geo-inner > p,
 div.geo > p,
 div.hero-content > div.breadcrumb > a,
 div.hero-content > div.breadcrumb > span,
 div.hero-content > div.hero-btns > a.btn-warm,
 div.hero-content > div.hero-btns > a.btn-wire,
 div.hero-photo > div.hero-content > div.hero-tag,
 div.hero-photo > div.hero-content > p.hero-desc,
 div.hero-right > div.hrb > a,
 div.hero-right > div.hrb > p,
 div.hero-right > div.hrh > div.hrh-eyebrow,
 div.hero-side > div.info-block > div.info-label,
 div.hero-side > div.info-block > div.info-value,
 div.more-svcs > div.more-inner > a.more-tag,
 div.more-svcs > div.more-inner > span.more-label,
 div.options-grid > div.option-card > div.option-name,
 div.options-grid > div.option-card > div.option-tag,
 div.options-grid > div.option-card > p.option-desc,
 div.options-grid > div.option-card.popular > div.option-name,
 div.options-grid > div.option-card.popular > div.option-price,
 div.options-grid > div.option-card.popular > div.option-tag,
 div.options-grid > div.option-card.popular > p.option-desc,
 div.page-header > div.breadcrumb,
 div.page-header > div.breadcrumb > a,
 div.page-header > p.page-sub,
 div.page-hero > div.hero-side > a.side-cta,
 div.page-hero > div.page-hero-side > a.side-cta,
 div.page-hero-content > div.breadcrumb > a,
 div.page-hero-content > div.breadcrumb > span,
 div.page-hero-content > div.hero-btns > a.btn-warm,
 div.page-hero-content > div.hero-btns > a.btn-wire,
 div.page-hero-photo > div.hero-content > div.hero-tag,
 div.page-hero-photo > div.hero-content > p.hero-desc,
 div.page-hero-photo > div.page-hero-content > p.page-hero-desc,
 div.page-hero-side > div.info-block > div.info-label,
 div.page-hero-side > div.info-block > div.info-value,
 div.photo-row > div.photo-item > div.photo-cap,
 div.photo-row > div.photo-row-item > div.photo-row-cap,
 div.services > div.sec-kicker,
 div.services > p.services-intro,
 div.sidebar-areas > div.area-tags > span.area-tag,
 div.svc-card > div.svc-card-body > a.svc-card-link,
 div.svc-card > div.svc-card-body > div.svc-card-name,
 div.svc-card > div.svc-card-body > div.svc-card-tag,
 div.svc-card > div.svc-card-body > p.svc-card-desc,
 div.svc-left > div > div.svc-desc,
 div.svc-left > div > div.svc-name,
 div.topbar > div.topbar-right > span,
 div.topbar > span,
 div.trust-bar > div.trust-item,
 div.wall-types > div.wall-card > div.wall-name,
 div.wall-types > div.wall-card > div.wall-tag,
 div.wall-types > div.wall-card > p.wall-desc,
 div.why-grid > div.why-card > h3,
 div.why-grid > div.why-card > p,
 footer > div.footer-bottom > a.hp-own,
 footer > div.footer-bottom > span,
 form > div.form-group > label,
 form > label.hp-consent > span,
 li.step > div > div.step-desc,
 li.step > div > div.step-title,
 nav > a.nav-cta,
 nav > div > div.nav-logo-sub,
 section.alt-sec > div.container > p.sec-sub,
 section.cta-band > div.container > a.btn-cta,
 section.cta-band > div.container > div.cta-text,
 section.page-hero > div.hero-side > a.side-cta,
 section.why-sec > div.container > p.sec-sub,
 ul > li > a{font-size:16px!important}
 footer > div.footer-bottom > a.hp-own,
 div.content-sidebar > div.related-services > a.related-link,
 div.content-sidebar > div.related > a.rel-link{min-height:44px!important}
 div.topbar > div.topbar-right > a,
 nav > a.nav-cta,
 ul > li > a,
 div.topbar > div.topbar-right > a.topbar-phone,
 div.page-hero-content > div.hero-btns > a.btn-warm,
 div.page-hero-content > div.hero-btns > a.btn-wire,
 div.page-hero > div.page-hero-side > a.side-cta,
 div.content-sidebar > div.sidebar-cta-box > a.sidebar-phone,
 div.content-sidebar > div.sidebar-cta-box > a.sidebar-btn,
 div.cta-band > div.cta-right > a.btn-warm,
 div.hero-content > div.hero-btns > a.btn-warm,
 div.hero-content > div.hero-btns > a.btn-wire,
 section.page-hero > div.hero-side > a.side-cta,
 div.form-row > div.form-group > input,
 form > div.form-group > input,
 form > div.form-group > select,
 div.hero-right > div.hrb > a,
 div.about > div.about-content > a.btn-solid,
 div.more-svcs > div.more-inner > a.more-tag,
 div.page-hero > div.hero-side > a.side-cta{min-height:44px!important;display:flex!important;align-items:center;justify-content:center}
 div.page-hero-content > div.breadcrumb > a,
 div.area-card > h3 > a,
 div.page-header > div.breadcrumb > a,
 div.contact-block > div.contact-value.big > a,
 div.svc-card > div.svc-card-body > a.svc-card-link,
 div.hero-content > div.breadcrumb > a{display:inline-flex!important;align-items:center;min-height:44px!important}
}

/* h) phones: one 16px side gutter on every page; filled/bordered cards run edge to edge and keep 16px inside */
@media (max-width:767px){
 main,.geo,.faq,.page-header,.hero-content,.page-hero-content,.container,.faq-section,.content-main,.content-sidebar,.before-after,.services,.about-content,.contact-info-col,.contact-form-col,.areas,.cta-band{padding-left:16px!important;padding-right:16px!important}
 .content-wrap,.cta-band > .container{padding-left:0!important;padding-right:0!important}
 .content-main .area-card,.container .why-card,.content-main .finish-card,.content-sidebar .sidebar-cta-box,.faq-section > .cta-band{margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important;border-left:0!important;border-right:0!important;border-radius:0!important}
 .about{grid-template-columns:1fr!important}
 .about-photo,.about-content{width:auto!important;max-width:100%!important;min-width:0!important}
 .footer-bottom{flex-wrap:wrap!important;gap:8px!important}
 .hp-own{max-width:100%!important;flex-wrap:wrap!important}
 select,input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea{min-height:44px!important}
}
/* h) + e) phones: hero text sits inside the photo (the photo grows with the text) instead of spilling onto the light page; grids that do not fit go to one column */
@media (max-width:767px){
 .page-hero-photo,.hero-photo{display:grid!important}
 .page-hero-photo > img,.hero-photo > img,.page-hero-photo > .page-hero-content,.hero-photo > .hero-content,.page-hero-photo > .hero-content{grid-area:1/1!important}
 .page-hero-photo > img,.hero-photo > img{height:100%!important;min-height:100%;align-self:stretch}
 .page-hero-photo > .page-hero-content,.hero-photo > .hero-content,.page-hero-photo > .hero-content{position:relative!important;align-self:end;z-index:1}
 .faq-grid,.creds{grid-template-columns:1fr!important}
 select{height:44px!important;line-height:normal}
}
/* reviewer fixes: stray content-wrap text gets the 16px gutter; footer/menu links stay left-aligned; the logo tagline is hidden on phones so the sticky nav stays one row; phone heroes keep the darker top (text fills the photo there) */
@media (max-width:767px){
 .content-wrap > p,.content-wrap > h2,.content-wrap > h3,.content-wrap > ul{margin-left:16px!important;margin-right:16px!important}
 nav{gap:6px!important}
 nav > a.nav-cta{padding-left:10px!important;padding-right:10px!important;letter-spacing:0!important}
 ul > li > a{justify-content:flex-start!important}
 .nav-logo-sub{display:none!important}
 .page-hero-overlay,.hero-overlay,.page-hero-photo > .overlay,.hero-photo > .overlay,.page-hero-photo .overlay{background:linear-gradient(to top,rgba(20,16,12,.94) 0%,rgba(20,16,12,.8) 55%,rgba(20,16,12,.62) 100%)!important}
}