/* Heritage Roofing & Restoration — shared styles for the 2026 redesign.
   Design tokens: green #14211A/#0D170F/#15241B/#1E3326 · bone #F4EFE5/#FBF7EE/#FFFDF8
   gold #D7A24B (hover #E0AE58) · copper #B27636/#8A5A28.
   Component styling is inline per the hi-fi handoff; this file carries the
   resets, keyframes, hover/interaction classes, and responsive nav shared by
   every page. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#14211A;font-family:'Hanken Grotesk',system-ui,sans-serif;color:#1B1A16;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}

@keyframes hrPulse{0%,100%{box-shadow:0 0 0 0 rgba(215,162,75,.45)}50%{box-shadow:0 0 0 8px rgba(215,162,75,0)}}
@keyframes hrMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hrUp{from{transform:translateY(20px)}to{transform:translateY(0)}}
.hrUp{animation:hrUp .7s cubic-bezier(.2,.7,.2,1) both}
.hrD1{animation-delay:.08s}.hrD2{animation-delay:.16s}.hrD3{animation-delay:.24s}.hrD4{animation-delay:.32s}

.hrLink{transition:color .2s}.hrLink:hover{color:#C68A3E}
.hrBtnA{transition:transform .15s,box-shadow .2s,background .2s}.hrBtnA:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.28);background:#E0AE58}
.hrBtnG{transition:background .2s,border-color .2s,color .2s}.hrBtnG:hover{background:#F4EFE5;color:#15241B;border-color:#F4EFE5}
.hrCard{transition:transform .25s,box-shadow .25s,border-color .25s}.hrCard:hover{transform:translateY(-4px);box-shadow:0 22px 50px -24px rgba(15,30,20,.45);border-color:#C68A3E}
.hrArrow{transition:gap .2s}.hrCard:hover .hrArrow{gap:14px}
.hrChip{transition:background .2s,border-color .2s,color .2s}.hrChip:hover{background:#15241B;color:#F4EFE5;border-color:#15241B}
.hrCopperLink{color:#B27636;font-weight:600;text-decoration:none;transition:color .2s}.hrCopperLink:hover{color:#C68A3E;text-decoration:underline}

/* header nav — collapses to a dropdown at ≤1000px via checkbox toggle */
.hr-nav a{white-space:nowrap}
.hr-burger{display:none}
#hr-navtoggle{display:none}
@media(max-width:1000px){
 .hr-nav{position:absolute;top:100%;left:0;right:0;display:none!important;flex-direction:column;align-items:stretch!important;gap:0!important;background:#0D170F;border-bottom:1px solid rgba(244,239,229,.12);padding:8px 18px 18px;box-shadow:0 24px 40px -20px rgba(0,0,0,.6)}
 .hr-nav a{padding:14px 6px;border-bottom:1px solid rgba(244,239,229,.07)}
 #hr-navtoggle:checked~.hr-nav{display:flex!important}
 .hr-burger{display:inline-flex!important}
}

/* photo placeholder — brand tile shown until real project photos are added */
.hrPhoto{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 70% 15%,#1E3326 0%,#0D170F 70%);display:grid;place-items:center}
.hrPhoto>img{width:min(46%,180px);height:auto;opacity:.5;filter:saturate(.9)}
.hrPhoto.hrPhotoWarm{background:radial-gradient(120% 90% at 30% 15%,#3A2E1E 0%,#171310 70%)}

/* before/after slider — stop native image drag from hijacking the pointer */
[data-ba]{-webkit-user-select:none;user-select:none}
[data-ba] img{pointer-events:none;-webkit-user-drag:none;user-select:none}

/* FAQ accordion */
.faq-a[hidden]{display:none}

/* forms */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:#D7A24B;color:#15241B;font-weight:700;padding:10px 16px;border-radius:0 0 9px 0;z-index:100;text-decoration:none}
.skip-link:focus{left:0}

@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}