/* Homepage card interaction system. Loaded last so new sections share the same feedback. */
.home-page{--hover-card-bg:#fff1e4;--hover-card-edge:#df9966;--hover-card-shadow:0 12px 26px #b65c2217,inset 0 0 0 1px #e8ad7c70}
.home-page :is(.strength-grid>div,.service-card,.content-service-card,.work-card,.quality-grid>article,.plan,.process-grid>article,.guarantees>article,.feedback-card,.article-card,.faq-intro,.faq-list>details,.contact-method,.quick-service-choice>span,.contact-next>div,.footer-nav-card,.consult-channel){transition:transform .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.home-page .strength-grid>div{border-radius:8px}
.home-page .quality-grid>article{border-radius:6px;padding:17px 14px 14px}
.home-page .guarantees>article{border-radius:6px}
.home-page .faq-list>details{border-radius:5px}
.home-page .work-card{border-radius:8px}
.home-page .contact-next>div{border-radius:7px}
.home-page .work-caption{transition:background-color .2s ease;border-radius:0 0 8px 8px}
/* Important feedback properties override earlier section-specific hover rules only. */
@media(hover:hover) and (pointer:fine){
 .home-page :is(.strength-grid>div,.service-card,.content-service-card,.work-card,.quality-grid>article,.plan,.process-grid>article,.guarantees>article,.feedback-card,.article-card,.faq-intro,.faq-list>details,.contact-method,.quick-service-choice>span,.contact-next>div,.footer-nav-card,.consult-channel):hover{
  transform:translateY(-4px)!important;
  background:var(--hover-card-bg)!important;
  border-color:var(--hover-card-edge)!important;
  box-shadow:var(--hover-card-shadow)!important;
  --service-tone:#ba602f!important;--service-soft:#ffe5cc!important;
 }
 .home-page .work-card:hover .work-caption{background:var(--hover-card-bg)}
 .home-page .work-card:hover .design-cover{transform:none}
 .home-page .footer-nav-card>a:hover :is(strong,b){color:#ba602f}
 .home-page :is(.service-card,.content-service-card,.work-card,.article-card):active{transform:translateY(-2px)!important}
}
.home-page :is(.service-card,.content-service-card,.work-card,.article-card):focus-visible,
.home-page :is(.plan,.faq-list>details,.contact-method,.footer-nav-card,.consult-channel):has(:focus-visible){
 transform:translateY(-4px)!important;background:var(--hover-card-bg)!important;
 border-color:var(--hover-card-edge)!important;box-shadow:var(--hover-card-shadow)!important;
 outline:2px solid #b9602c;outline-offset:3px;
 --service-tone:#ba602f!important;--service-soft:#ffe5cc!important;
}
@media(prefers-reduced-motion:reduce){
 .home-page :is(.strength-grid>div,.service-card,.content-service-card,.work-card,.quality-grid>article,.plan,.process-grid>article,.guarantees>article,.feedback-card,.article-card,.faq-intro,.faq-list>details,.contact-method,.quick-service-choice>span,.contact-next>div,.footer-nav-card,.consult-channel){transition:none!important;transform:none!important}
 .home-page :is(.strength-grid>div,.service-card,.content-service-card,.work-card,.quality-grid>article,.plan,.process-grid>article,.guarantees>article,.feedback-card,.article-card,.faq-intro,.faq-list>details,.contact-method,.quick-service-choice>span,.contact-next>div,.footer-nav-card,.consult-channel):hover,.home-page :is(.strength-grid>div,.service-card,.content-service-card,.work-card,.quality-grid>article,.plan,.process-grid>article,.guarantees>article,.feedback-card,.article-card,.faq-intro,.faq-list>details,.contact-method,.quick-service-choice>span,.contact-next>div,.footer-nav-card,.consult-channel):focus-visible,
 .home-page :is(.strength-grid>div,.service-card,.content-service-card,.work-card,.quality-grid>article,.plan,.process-grid>article,.guarantees>article,.feedback-card,.article-card,.faq-intro,.faq-list>details,.contact-method,.quick-service-choice>span,.contact-next>div,.footer-nav-card,.consult-channel):has(:focus-visible),.home-page .quick-service-choice input:focus-visible+span{transform:none!important}
}

/* Keep outline button labels legible over the filled interaction state.
   This overrides section-specific resting text colors, including the process CTA. */
body.home-page .btn.btn-outline:hover:not(:disabled),
body.home-page .btn.btn-outline:focus-visible:not(:disabled){
 background:#b74e23;border-color:#b74e23;color:#fff;
}
body.home-page .btn.btn-outline:focus-visible{outline:2px solid #b74e23;outline-offset:4px}
body.home-page .btn.btn-outline:active:not(:disabled){background:#963b18;border-color:#963b18;color:#fff}

/* Keep compact mobile groups together without shrinking their labels. */
@media(max-width:650px){
 #work .work-filters{flex-wrap:nowrap;overflow-x:auto;width:100%;min-width:0;max-width:100%;padding:3px 1px 9px;scrollbar-width:thin;scrollbar-color:#d8b99f transparent;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 #work .work-filters button{flex:0 0 auto;white-space:nowrap}
 #services .content-card-tags,#work .work-includes{flex-wrap:nowrap;overflow-x:auto;min-width:0;max-width:100%;scrollbar-width:thin}
 #services .content-card-tags span,#work .work-includes span{flex:0 0 auto;white-space:nowrap}
 #contact .contact-next{display:grid;grid-template-columns:repeat(3,minmax(95px,1fr));gap:15px 10px;padding:22px 12px;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
 #contact .contact-next>div{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
 #contact .contact-next>div>span{width:32px;height:32px;font-size:19px}
 #contact .contact-next strong{font-size:14px;white-space:nowrap}
 #contact .contact-next p small{font-size:10.5px;white-space:nowrap;line-height:1.9}
 #contact .contact-next>b{display:none}
 #contact .contact-next>.contact-note{grid-column:1/-1;min-width:0;width:auto;margin:0;text-align:left;white-space:nowrap;font-size:11px}
}

@media(max-width:650px){
 .hero h1 .hero-service-title{font-size:clamp(22px,6.8vw,33px);white-space:nowrap;letter-spacing:-.7px}
 .hero .title-star{right:0;top:-23px;font-size:28px}
}

/* Break mobile headings by phrase, not by the final character. */
.mobile-title-break{display:none}
@media(max-width:650px){
 #services .mobile-balanced-title,#plans .mobile-balanced-title,#feedback #feedback-title{font-size:clamp(22px,6.2vw,26px);line-height:1.55;letter-spacing:0}
 .mobile-title-break{display:block}
 #feedback #feedback-title>span{display:block}
}
