*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
}

html {
  font-size: 16px;
}


body {
  font: 500 clamp(0.98rem, 1.85vw, 1.09rem) / 1.5 Roboto, Arial, sans-serif;
  color: #1d1800;
  background: #1d1800;
}
        @media (max-width: 600px) {
        
          body {
            font: 500 clamp(1.05rem, 4vw, 1.4rem) / 1.5 Roboto, Arial, sans-serif;
          }
        }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

section.squeeze {
  padding: clamp(3rem, 9vw, 8rem) 0;
  margin: clamp(-4rem, -6.5vw, -6rem) auto;
}
        @media (max-width: 600px) {
  
          section {
            flex-direction: column;
          }
        }

.max1200 {
  max-width: clamp(640px, 85vw, 1000px);
}

        @media (min-width: 1300px) {

          .max1200 {
            max-width: 960px;
          }
        }

.half {
  width: 50%;
}      
        @media (max-width: 600px) {

          .half {
            width: 100%;
          }
        }


.light {
  background: #efe5da;
}

.sand {
  background: #9a6c2e;
}

.brown {
  background: #624414;
}


/* header */

.header {
    display: flex;
    position: sticky;
    background: #1d1800;
    align-items: center;
    justify-content: space-between;
    top: 0;
    z-index: 1000;
    min-height: 14vw;
}

        @media (min-width: 1300px) {

          .header {
            padding: 0 8vw;
            min-height: 12vw;
          }
        }


.header-logo,
.header-phone,
.header-estimate {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-logo {
  flex: 2;
  padding: 0 0 0 clamp(3rem, 6vw, 8rem);
}

.header-phone {
  flex: 1.2;
  font: 700 clamp(1.75rem, 3.25vw, 2.5rem) / 1.7 Battambang, Georgia, "Times New Roman", serif;
}

.header-estimate {
  flex: 0.8;
  font: 700 clamp(0.75rem, 2.25vw, 1.6rem) / 1.35 Battambang, Georgia, "Times New Roman", serif;
  text-align: center;
  padding: 0 clamp(3rem, 6vw, 8rem) 0 0;
}

.header-logo img {
  width: 100%;
}

.header-phone a,
.header-estimate a {
  color: #fff;
  text-decoration: none;
}

.header-estimate a {
  display: inline-block;
  background: #ff7525;
  border: clamp(0.3rem, 0.5vw, 3rem) solid #ffffff;
  padding: clamp(0.6rem, 1vw, 2rem);
  transform: translateZ(0);
  transition: transform .2s ease;
}

.header-estimate a:hover {
  transform: scale(1.08);
}

        @media (max-width: 600px) {
          
          .header {
            flex-direction: column;
            min-height: auto;
          }
          
          .header-logo  {
            padding: clamp(1.5rem, 3vw, 3rem);
            padding-bottom: 0;
          }
          
          .header-phone  {
            font-size: clamp(2rem, 11vw, 3rem);
          }          

          .header-estimate  {
            font-size: 1.4rem;
            padding: clamp(1.5rem, 3vw, 3rem);
            padding-top: 0;
          }
          
          .header-estimate a {
            padding: 0.7rem 1rem;
          }
        }

/* header */



/* hero */

.hero {
  display: flex;
  margin-bottom: -2.25rem;
}

.hero-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-right {
  color: #1d1800;
  padding: clamp(3rem, 6vw, 5rem);
}

  ul.checklist {
    list-style: none;
    padding-left: 0;
    margin-top: clamp(1rem, 2vw, 4rem);
  }

  ul.checklist li {
    position: relative;
    padding-left: clamp(2rem, 4vw, 4rem);
    font-size: clamp(1rem, 3vw, 2.25rem);
  }

  ul.checklist li::before {
    content: "\2714\FE0E";
    color: #ff7525;
    position: absolute;
    left: 0;
  }

        @media (min-width: 1250px) {
          
          .hero-left {
            height: clamp(320px, 45vw, 700px);
          }
        }

        @media (max-width: 600px) {
          
          .hero-left img {
            margin-top: -10vw;
          }
          
          ul.checklist li {
            font-size: 1.5rem;
          }
        }

/* hero */



/* paint edges */

.paint-band-edge svg {
  display: block;
  position: relative;
  z-index: 10;
  width: 100%;
  height: 4rem;
  margin-bottom: -0.25rem;
}

.pb-edge-light path, .pb-edge-light rect {
  fill: #9a6c2e;
}

.pb-edge-dark path, .pb-edge-dark rect {
  fill: #624414;
}

.pb-edge-bottom svg {
  transform: rotate(180deg);
}

/* paint edges */



/* skills */

.skills {
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 3rem) 0;
}

.skills-icon-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;         /* keep them on one row on desktop */
  padding: clamp(1rem, 2vw, 2rem) 0 0;
}

.skills-icons {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}

  .skills-icons svg {
    width: clamp(64px, 12vw, 110px);
    height: clamp(64px, 12vw, 110px);
    margin: 0 0 clamp(0.5rem, 2vw, 1rem) 0;
  }

        @media (max-width: 600px) {

          .skills {
            padding: 1rem 2rem;
          }

          .skills-icon-row {
            flex-wrap: wrap;
            row-gap: 1rem;
            padding: 2rem 0 0;
          }

          .skills-icons {
            flex: 0 0 50%;
          }
          
          .skills-icons svg {
            width: 24vw;
            height: 24vw;
            margin: 0 0 0.5rem 0;
          }

        }

/* skills */



/* photos */

.photos {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}  

.photos-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  gap: 2rem;
  padding: clamp(1rem, 2vw, 2rem) 0 0;
}

  .pics  {
    width: 40%;
    min-width: 40%;
    cursor: pointer;
  }

/* lightbox w/ bkg blur */

    .photo-modal {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(40,40,40,.38);
      backdrop-filter: blur(14px) saturate(110%);
      -webkit-backdrop-filter: blur(14px) saturate(110%);
      opacity: 0;
      visibility: hidden;
      transition: opacity .25s ease, visibility .25s ease;
      z-index: 5000;
    }

    .photo-modal.open {
      opacity: 1;
      visibility: visible;
    }

    .photo-modal-inner {
      position: relative;
      display: inline-block;
    }

    .photo-modal img {
      max-width: 80vw;
      max-height: 80vh;
      object-fit: contain;
    }

    .photo-modal-close {
      position: absolute;
      top: -1.2rem;
      right: -1.2rem;
      width: 2.5rem;
      height: 2.5rem;
      border: 0;
      border-radius: 50%;
      background: rgba(0,0,0,.7);
      color: #fff;
      font: 400 1.75rem/1 Jost, Arial, sans-serif;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5001;
    }

    .photo-modal-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 3rem;
      height: 3rem;
      border: 0;
      border-radius: 50%;
      background: rgba(0,0,0,.7);
      color: #fff;
      font: 400 2rem/1 Jost, Arial, sans-serif;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5001;
    }

    .photo-modal-prev {
      left: -1.5rem;
    }

    .photo-modal-next {
      right: -1.5rem;
    }

    .photo-modal-close:hover,
    .photo-modal-nav:hover {
      background: #ff7525;
    }

    /* lightbox w/ bkg blur */


    .photos h2 {
      max-width: 48ch;
    }

        @media (max-width: 600px) {
          
          .photos {
            padding: 1rem 2rem;
          }
          
          .photos-row {
            gap: 1.5rem;
          }
          
          .pics  {
            width: 80%;
            min-width: 80%;
            cursor: default;
          }

          .photos h2 {
            max-width: 100%;
          }
          
          .photo-modal,
          .photo-modal-nav,
          .photo-modal-close {
            display: none !important;
          }
        }

/* photos */



/* reviews */

.reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 3rem) 0;
}

.reviews-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: clamp(1rem, 2vw, 1.5rem) 0 0;
}

  .review {
    background: rgba(225,210,185,0.85);
    padding: clamp(1.8rem, 3vw, 3rem);
    font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  }

  .review blockquote {
    margin: 0 0 0.5rem;
    font-weight: 400;
  }

  .review figcaption {
    font-weight: 600;
  }

    .reviews h1 {
      max-width: 48ch;
    }

        @media (max-width: 600px) {
          
          .reviews {
            padding: 1rem 2rem;
          }
          
          .reviews-grid {
            grid-template-columns: 1fr;
          }
          
          .review {
            font-size: clamp(1rem, 2vw, 2rem);
          }

          .reviews h2 {
            max-width: 100%;
          }          
        }

/* reviews */



/* trust */

.trust {
  display: flex;
  margin: 0 auto;
}

.trust-half {
  padding: 0 1rem;
}

.trust-icons-row {
  display: flex;
  flex-direction: column;   /* stack vertically */
  padding: clamp(1rem, 2vw, 2rem) 0 0;
}

.trust-icons {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1vw;
}

.trust-icons svg {
  width: clamp(20px, 4vw, 80px);
  height: clamp(20px, 4vw, 80px);
}

        @media (max-width: 600px) {
          
          .trust {
            display: flex;
            flex-direction: column;
            padding: 1rem 2.5rem;
          }
          
          .trust-half {
            width: 100%;
            padding: 0;
          }
          
          .trust-half:last-child {
            padding-top: 9vw;
          }
          
          .trust-icons-row {
            padding: 2vw 0 0 0;
          }
          
          .trust-icons{
            gap: 1rem;
          }
          
          .trust-icons svg{
            width: clamp(20px, 10vw, 80px);
            height: clamp(20px, 10vw, 80px);
            margin: 0 0 2vw 1vw;
          }
        
        }

/* trust */



/* contact */

.contact {
  margin: 0 auto;
  text-align: center;
  padding: clamp(1.5rem, 3.5vw, 4rem) 0 clamp(4rem, 5vw, 5rem);
}

.contact form {
  width: clamp(320px, 50%, 600px);
  margin: 1rem auto 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;  
}

.contact input,
.contact textarea {
  font-size: 1rem;
  font-family: inherit;
  padding: 0.8rem;
  width: 100%;
  border: 1px solid #9a6c2e;
  resize: vertical;
}

.contact textarea {
  min-height: clamp(110px, 12vw, 240px);
}

.contact input:focus,
.contact textarea:focus {
  outline: none;
  border-color: #ff7525;
}

.contact input[type="submit"] {
  width: 50%;
  margin: 1rem auto;
  background-color: #ff7525;
  color: #fff;
  border: clamp(0.3rem, 0.5vw, 3rem) solid #ffffff;
  padding: clamp(0.6rem, 1vw, 2rem);
  font: 600 clamp(0.75rem, 2.25vw, 2rem) / 1.35 Battambang, Georgia, "Times New Roman", serif;
  cursor: pointer;
  transform: translateZ(0); /* helps smooth hover */
  transition: transform .2s ease;
}

.contact input[type="submit"]:hover {
  transform: scale(1.08);
}

.contact-success {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3.5vw, 4rem) 0 clamp(4rem, 5vw, 5rem);
  min-height: 500px;
}

.contact-success a {
  color: #ff7525;
}

.contact p {
  font-size: 0.9rem;
  padding-top: 1.4vw;
}

#contact_form { scroll-margin-top: 120px; }


        @media (max-width: 600px) {
          
          .contact {
            padding: 1rem 2.5rem;
          }
          
          .contact form {
            width: 80vw;
          }
          
          .contact input[type="submit"] {
            width: 70%;
            font-size: 1.4rem;
          }
          
          .contact-success {
              padding: 0 2rem;
          }
          
        }

/* contact */



/* footer */

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(10rem, 18vw, 18rem);
    padding: 3rem 1.25rem;
    text-align: center;
}

footer p, footer .credit {
    font: 400 clamp(0.85rem, 1.5vw, 1.1rem) Roboto, Arial, sans-serif;
    color: #999;
}

footer .credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

footer img {
    width: clamp(8rem, 13vw, 25rem);
    height: auto;
    opacity: 0.6;
}

    @media (max-width: 600px) {
        
        footer img {
            width: 8rem;
        }
    }

/* footer */



/* text */

p {
  margin: 0 0 1rem 0;
}

h1, h2, ul.checklist {
  font: 700 clamp(1.375rem, 2.5vw, 2rem) / 1.4 Battambang, Georgia, "Times New Roman", serif;
}
      @media (max-width: 600px) {
        
        h1, h2 {
          font-size: clamp(1.25rem, 3vw, 3rem);
        }
      }

h1 {
  color: #fff;
}

h2 {
  color: #1d1800;
}

h1, h2 {
  text-align: center;
}

h3 {
    font-size: clamp(1rem, 1.9vw, 1.5rem);
    font-weight: 500;
}

/* text */


/* shut off zoom on mobile */

@media (hover: none) and (pointer: coarse) {
  .header-estimate a,
  .contact input[type="submit"] {
    transform: none;
    transition: none;
  }
}