/* generated interaction styles */
.hv1:hover{background:#48521f;color:#fff}
.hv2:hover{background:#5f6b34;color:#fff}
.hv3:hover{background:#48521f}
.fc4:focus{border-color:#5f6b34}
.hv5:hover{background:#5f6b34;color:#fff;border-color:#5f6b34}
.hv6:hover{box-shadow:0 16px 40px rgba(31,31,31,.09);transform:translateY(-4px)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.acc-panel[hidden]{display:none}
button.acc-btn,button.tabjump{font-family:inherit}
img{max-width:100%}
@media(prefers-reduced-motion:reduce){.fade{opacity:1!important;transform:none!important;transition:none!important}html{scroll-behavior:auto}}
/* ---------- responsive corrections ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.acc-panel[hidden]{display:none}
button.acc-btn,button.tabjump{font-family:inherit}
img{max-width:100%}
@media(prefers-reduced-motion:reduce){
  .fade{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* contact page: side panel stacks under the form on small screens */
.split{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) !important}
@media(max-width:900px){.split{grid-template-columns:1fr !important;gap:32px !important}}

/* footer columns stack on phones */
.footcols{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) !important}
@media(max-width:760px){.footcols{grid-template-columns:1fr !important;gap:28px !important}}

/* form fields must be able to shrink */
form label{min-width:0}
form input,form select,form textarea{min-width:0;max-width:100%}
@media(max-width:560px){
  form div[style*="grid-template-columns"]{grid-template-columns:1fr !important}
}

/* menu cards wrap their price block rather than clipping it */
@media(max-width:640px){
  button.menu-btn{flex-wrap:wrap !important;gap:10px}
  button.menu-btn>*{min-width:0}
  button.menu-btn>span:last-child{width:100%;flex-direction:row !important;
    align-items:center;justify-content:space-between;gap:12px}
}

/* narrow phones: auto-fit grids keep a track wider than the screen */
@media(max-width:400px){
  [style*="repeat(auto-fit"],[style*="repeat(auto-fill"]{grid-template-columns:1fr !important}
  [style*="min-width:300px"]{min-width:0 !important}
  a[style*="white-space:nowrap"]{white-space:normal !important}
}

/* ---------- mobile navigation ---------- */
.navtoggle,.mobile-quote{display:none}
@media(max-width:833px){
  header nav{display:none !important;width:100%;flex-direction:column;align-items:stretch !important;
             gap:0 !important;margin:0 !important;padding:4px 0 8px}
  header nav.open{display:flex !important}
  header nav a{min-height:50px !important;display:flex !important;align-items:center;
               justify-content:flex-start !important;border-top:1px solid #ededea;
               font-size:16px !important;border-radius:0 !important}
  header nav a.hv1{display:none !important}
  .mobile-quote{display:inline-flex;align-items:center;margin-left:auto;background:#5f6b34;
                color:#fff;font-size:14px;font-weight:600;padding:11px 16px;border-radius:4px;
                white-space:nowrap;flex:none}
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
             background:none;border:1px solid #dcdcd4;border-radius:4px;cursor:pointer;padding:0;flex:none}
}
@media(max-width:360px){.mobile-quote{font-size:13px;padding:10px 12px}}

/* without JavaScript the toggle can't work, so show the links instead */
@media(max-width:833px){
  html:not(.js) header nav{display:flex !important}
  html:not(.js) .navtoggle{display:none !important}
}

/* ---------- requested layout adjustments ---------- */
/* photo + text sections: stack with the photo on top on smaller screens */
@media(max-width:900px){
  .stackpic{grid-template-columns:1fr !important;gap:28px !important}
  .stackpic-img{order:-1;min-height:300px}
}
/* any two-column section is too tight on a phone */
@media(max-width:760px){
  section div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
}
/* homepage hero: the sticky Call/Text bar already covers this on phones */
@media(max-width:760px){
  a.hero-dup{display:none !important}
}
/* date fields sit 2px taller than the rest because of the native control */
form input[type="date"]{-webkit-appearance:none;appearance:none;height:46px}

/* ---------- mobile hero: show the photo properly ----------
   On a phone the hero is ~1400px tall, so a full-bleed background gets
   blown up and you only see a narrow vertical strip of the picture.
   Below 760px the photo becomes a banner at the top instead, at its
   natural shape, with the words underneath on a dark panel. */
@media(max-width:760px){
  section.hero{display:block !important;min-height:0 !important;background:#191c12}
  .hero-photo{position:relative !important;inset:auto !important;width:100% !important;
              height:330px !important;background-position:center 34% !important}
  .hero-overlay{display:none !important}
  .hero-content{padding-top:36px !important;padding-bottom:44px !important}
}

/* "Contact" shows in the navigation at every screen size */
@media(max-width:833px){header nav a.nav-contact{display:flex !important}}

/* tablet widths: tighten the nav so all items stay on one line */
@media(min-width:834px) and (max-width:1200px){
  header nav{gap:10px 15px !important}
  header nav a{font-size:13.5px !important}
  header nav a.hv1{padding:10px 15px !important}
}
/* keep the wordmark hidden until there is room for it alongside the nav */
@media(max-width:1150px){.lockup{display:none !important}}
@media(min-width:834px) and (max-width:900px){
  header nav{gap:8px 11px !important}
  header nav a{font-size:13px !important}
  header nav a.hv1{padding:9px 13px !important}
}

/* long URLs in the legal pages must wrap on narrow phones */
.legal a{word-break:break-word;overflow-wrap:anywhere}