*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ECEBE7; }
img { max-width: 100%; }
a { color: #2E2F2C; }
a:hover { color: #6E5427; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #8B6A32; outline-offset: 3px; }
#quote-form { position: relative; }
#quote-form button[disabled] { opacity: .6; cursor: wait; }
#form-status.error { color: #A3161C !important; }

/* reviews carousel */
.rv-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.rv-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 8px; flex: 1; min-width: 0; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-card { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: 14px; background: #ECEBE7; border: 1px solid #D6D3CB; border-top: 4px solid #8B6A32; padding: 26px; min-height: 240px; }
.rv-stars { color: #8B6A32; letter-spacing: 3px; }
.rv-text { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; flex: 1; }
.rv-clamp { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.rv-more { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: #6E5427; font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.rv-by { color: #4F504A; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.rv-nav { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #C4C0B6; background: #F7F6F3; color: #2E2F2C; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rv-nav:hover { background: #8B6A32; color: #FFFFFF; border-color: #8B6A32; }
.rv-count { margin: 12px 0 0; text-align: center; color: #4F504A; font-size: 13px; letter-spacing: .1em; font-weight: 700; }
@media (max-width: 1000px) { .rv-card { flex-basis: calc((100% - 16px) / 2); } }

/* phones */
@media (max-width: 700px) {
  .hdr { padding: 10px 16px !important; gap: 8px !important; }
  .hdr-logo img { height: 44px !important; }
  .hdr > a:last-child { min-height: 42px !important; padding: 0 16px !important; font-size: 14px !important; }
  .hdr-nav { order: 3; width: calc(100% + 32px); margin: 0 -16px; padding: 2px 12px; justify-content: center; gap: 0 22px !important; font-size: 15px !important; border-top: 1px solid #D6D3CB; }
  .hdr-nav a { padding: 9px 0 !important; }
  #top > div { padding-top: 48px !important; padding-bottom: 48px !important; gap: 32px !important; }
  #top h1 { font-size: 40px !important; }
  #top p { font-size: 16px !important; }
  #top a { min-height: 48px !important; padding: 0 20px !important; font-size: 15px !important; }
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; padding: 20px 16px !important; }
  .creds span:first-child { font-size: 21px !important; }
  .creds span + span { font-size: 11px !important; }
  section h2 { font-size: 32px !important; }
  #services, #projects, #contact, section > div[style*="padding: 96px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  .hdr-nav { gap: 0 16px !important; font-size: 14px !important; }
  #services > div:last-child, #projects > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  #services article > div:last-child { padding: 12px !important; }
  #services h3 { font-size: 17px !important; line-height: 1.15; }
  #services article p { font-size: 13px !important; line-height: 1.4; }
  .rv-wrap { gap: 0; }
  .rv-card { flex-basis: 86%; padding: 22px; min-height: 0; }
  .rv-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; font-size: 22px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
  .rv-prev { left: -8px; } .rv-next { right: -8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }