/* ========================================
  BASIC RESET
======================================== */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
html {
   scroll-behavior: smooth;
}
body {
   font-family: Arial, Helvetica, sans-serif;
   color: #1f1f1f;
   background-color: #ffffff;
   line-height: 1.6;
}
img {
   max-width: 100%;
}
a {
   transition: color 0.2s ease;
}

/* ========================================
  NAVIGATION
======================================== */
.navbar {
   min-height: 82px;
   padding: 0 6%;
   background-color: #171717;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.logo {
   display: flex;
   align-items: center;
   gap: 15px;
   color: white;
   text-decoration: none;
   font-size: 22px;
   font-weight: bold;
}
.logo img {
   width: 60px;
   height: 60px;
   object-fit: contain;
}
.logo span {
   white-space: nowrap;
}

.nav-links {
   display: flex;
   align-items: center;
   gap: 32px;
}
.nav-links a {
   color: white;
   text-decoration: none;
   font-size: 15px;
   font-weight: 600;
}
.nav-links a:hover {
   color: rgb(72, 3, 3);
}
.nav-links a.active {
   color: rgb(72, 3, 3);
   border-bottom: 2px solid rgb(72, 3, 3);
   padding-bottom: 5px;
}

/* ========================================
  LOGO
======================================== */
.logo {
   display: flex;
   align-items: center;
   gap: 14px;
   color: white;
   text-decoration: none;
   font-size: 21px;
   font-weight: bold;
}
.logo img {
   width: 62px;
   height: 62px;
   border-radius: 50%;
   object-fit: cover;
}
.logo span {
   white-space: nowrap;
}

/* ========================================
  HOME PAGE HERO
======================================== */
.hero {
   min-height: 680px;
   padding: 100px 8%;
   display: flex;
   align-items: center;
   background:
       linear-gradient(
           90deg,
           rgba(0, 0, 0, 0.9) 0%,
           rgba(0, 0, 0, 0.65) 50%,
           rgba(0, 0, 0, 0.25) 100%
       ),
       url("images/hero.jpg");
   background-size: cover;
   background-position: center;
}
.hero-content {
   max-width: 820px;
   color: white;
}
.eyebrow {
   margin-bottom: 18px;
   color: goldenrod;
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 2px;
   text-transform: uppercase;
}
.hero h1 {
   margin-bottom: 22px;
   font-size: clamp(48px, 7vw, 82px);
   line-height: 1.02;
   letter-spacing: -2px;
}
.hero h2 {
   margin-bottom: 22px;
   font-size: clamp(19px, 2.5vw, 27px);
   font-weight: 500;
   line-height: 1.4;
}
.hero-description {
   max-width: 700px;
   margin-bottom: 36px;
   color: #eeeeee;
   font-size: 18px;
}
.hero-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
}

/* ========================================
  TRUST STRIP
======================================== */
.trust-strip {
   padding: 30px 8%;
   background-color: goldenrod;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 25px;
}
.trust-item {
   padding: 5px 20px;
   text-align: center;
   color: #171717;
}
.trust-item:not(:last-child) {
   border-right: 1px solid rgba(0, 0, 0, 0.25);
}
.trust-item strong {
   display: block;
   font-size: 21px;
}
.trust-item span {
   display: block;
   margin-top: 3px;
   font-size: 14px;
}

/* ========================================
  SHARED SECTION TEXT
======================================== */
.section-introduction {
   max-width: 760px;
   margin: -25px auto 45px;
   color: #5c5c5c;
   font-size: 17px;
}
.card-label {
   margin-bottom: 8px;
   color: goldenrod;
   font-size: 12px;
   font-weight: bold;
   letter-spacing: 1.5px;
   text-transform: uppercase;
}

/* ========================================
  FEATURED WORK
======================================== */
.featured-work {
   padding: 95px 8%;
   text-align: center;
   background-color: #ffffff;
}
.featured-grid {
   max-width: 1200px;
   margin: 0 auto 42px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 25px;
}
.featured-card {
   overflow: hidden;
   border-radius: 10px;
   background-color: white;
   text-align: left;
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
   transition:
       transform 0.25s ease,
       box-shadow 0.25s ease;
}
.featured-card:hover {
   transform: translateY(-7px);
   box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
}
.featured-card img {
   display: block;
   width: 100%;
   height: 270px;
   object-fit: cover;
   transition: transform 0.4s ease;
}
.featured-card:hover img {
   transform: scale(1.04);
}
.featured-card-content {
   padding: 28px;
}
.featured-card-content h3 {
   margin-bottom: 11px;
   font-size: 24px;
}
.featured-card-content p:not(.card-label) {
   color: #5c5c5c;
}
.text-link {
   display: inline-block;
   margin-top: 20px;
   color: #171717;
   text-decoration: none;
   font-weight: bold;
}
.text-link:hover {
   color: goldenrod;
}

/* ========================================
  BUTTONS
======================================== */
.primary-button,
.secondary-button {
   display: inline-block;
   padding: 14px 24px;
   border-radius: 4px;
   text-decoration: none;
   font-size: 15px;
   font-weight: bold;
   transition:
       transform 0.2s ease,
       background-color 0.2s ease;
}
.primary-button {
   color: white;
   background-color: rgb(72, 3, 3);
}
.primary-button:hover {
   color: white;
   background-color: rgb(72, 3, 3);
   transform: translateY(-2px);
}
.secondary-button {
   border: 2px solid white;
   color: white;
   background-color: transparent;
}
.secondary-button:hover {
   color: #171717;
   background-color: white;
   transform: translateY(-2px);
}

/* ========================================
  HOME PAGE SERVICES
======================================== */
.services-section {
   padding: 85px 8%;
   text-align: center;
   background-color: #f5f5f5;
}
.section-label {
   margin-bottom: 8px;
   color: rgb(72, 3, 3);
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 2px;
   text-transform: uppercase;
}
.section-title {
   margin-bottom: 45px;
   font-size: clamp(30px, 4vw, 42px);
}
.service-cards {
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}
.service-card {
   padding: 35px 28px;
   border-radius: 8px;
   background-color: white;
   text-align: left;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   transition:
       transform 0.2s ease,
       box-shadow 0.2s ease;
}
.service-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 35px rgba(0, 0, 0, 0.13);
}
.service-card h3 {
   margin-bottom: 12px;
   font-size: 23px;
}
.service-card p {
   color: #5c5c5c;
}

/* ========================================
  INNER PAGE HERO
======================================== */
.page-hero {
   padding: 90px 8%;
   color: white;
   background-color: #242424;
   text-align: center;
}
.page-hero h1 {
   margin-bottom: 18px;
   font-size: clamp(40px, 6vw, 64px);
   line-height: 1.15;
}
.page-hero p {
   max-width: 750px;
   margin: 0 auto;
   color: #dddddd;
   font-size: 18px;
}

/* ========================================
  ABOUT PAGE
======================================== */
.about-section {
   max-width: 1200px;
   margin: 0 auto;
   padding: 85px 8%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 55px;
   align-items: center;
}
.about-text h2 {
   margin-bottom: 18px;
   font-size: 36px;
}
.about-text p {
   margin-bottom: 18px;
   color: #555555;
}
.about-image img {
   display: block;
   width: 100%;
   border-radius: 8px;
}
.values-section {
   padding: 80px 8%;
   background-color: #f5f5f5;
   text-align: center;
}
.values-section h2 {
   font-size: 36px;
}
.value-cards {
   max-width: 1200px;
   margin: 40px auto 0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 25px;
}
.value-card {
   padding: 32px;
   border-radius: 8px;
   background-color: white;
   text-align: left;
   box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.value-card h3 {
   margin-bottom: 10px;
   font-size: 22px;
}
.value-card p {
   color: #5c5c5c;
}

/* ========================================
  SERVICES SECTION
======================================== */
.services-section {
   padding: 95px 8%;
   text-align: center;
   background-color: #f5f5f5;
}
.service-cards {
   max-width: 1200px;
   margin: 0 auto 42px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}
.service-card {
   position: relative;
   padding: 38px 30px;
   overflow: hidden;
   border-radius: 8px;
   background-color: white;
   text-align: left;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   transition:
       transform 0.25s ease,
       box-shadow 0.25s ease;
}
.service-card::before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   height: 4px;
   background-color: goldenrod;
}
.service-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 38px rgba(0, 0, 0, 0.14);
}
.service-number {
   margin-bottom: 18px;
   color: goldenrod;
   font-size: 14px;
   font-weight: bold;
   letter-spacing: 2px;
}
.service-card h3 {
   margin-bottom: 12px;
   font-size: 24px;
}
.service-card p {
   color: #5c5c5c;
}
.dark-button {
   display: inline-block;
   padding: 14px 25px;
   border-radius: 4px;
   color: white;
   background-color: #171717;
   text-decoration: none;
   font-size: 15px;
   font-weight: bold;
   transition:
       transform 0.2s ease,
       background-color 0.2s ease;
}
.dark-button:hover {
   background-color: #333333;
   transform: translateY(-2px);
}


/* ========================================
  PROJECTS PAGE
======================================== */
.projects-grid {
   max-width: 1200px;
   margin: 0 auto;
   padding: 70px 8%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 25px;
}
.project-card {
   overflow: hidden;
   border-radius: 8px;
   background-color: white;
   box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.project-card img {
   display: block;
   width: 100%;
   height: 280px;
   object-fit: cover;
}
.project-info {
   padding: 25px;
}
.project-info h2 {
   margin-bottom: 10px;
   font-size: 24px;
}
.project-info p {
   color: #5c5c5c;
}
.project-type {
   margin-bottom: 8px;
   color: rgb(71, 0, 0);
   font-size: 13px;
   font-weight: bold;
   letter-spacing: 1.5px;
   text-transform: uppercase;
}
.before-after {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
}
.before-after img {
   width: 100%;
   border-radius: 6px;
}

/* ========================================
  CONTACT PAGE
======================================== */
.contact-layout {
   max-width: 1200px;
   margin: 0 auto;
   padding: 85px 8%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 55px;
   align-items: start;
}
.contact-information h2 {
   margin-bottom: 18px;
   font-size: 36px;
}
.contact-information p {
   margin-bottom: 18px;
   color: #555555;
}
.contact-information a {
   color: rgb(71, 0, 0);
   text-decoration: none;
}
.contact-information a:hover {
   text-decoration: underline;
}
.contact-form {
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.contact-form label {
   margin-top: 8px;
   font-weight: bold;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
   width: 100%;
   padding: 13px;
   border: 1px solid #cccccc;
   border-radius: 4px;
   background-color: white;
   font: inherit;
}
.contact-form textarea {
   resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
   border-color: rgb(71, 0, 0);
   outline: none;
   box-shadow: 0 0 0 3px rgba(242, 140, 40, 0.15);
}
.contact-form button {
   margin-top: 15px;
   border: none;
   cursor: pointer;
}

/* ========================================
  RECLAIMED MATERIALS PREVIEW
======================================== */
.reclaimed-preview {
   padding: 95px 8%;
   background-color: #f4f1eb;
}
.reclaimed-preview-heading {
   max-width: 1200px;
   margin: 0 auto 42px;
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 50px;
   align-items: end;
}
.reclaimed-preview-heading h2 {
   max-width: 700px;
   font-size: clamp(34px, 4.5vw, 52px);
   line-height: 1.1;
}
.reclaimed-preview-heading > p {
   color: #5c5c5c;
   font-size: 17px;
}
.reclaimed-preview-grid {
   max-width: 1200px;
   height: 630px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1.35fr 1fr;
   grid-template-rows: repeat(2, 1fr);
   gap: 18px;
}
.reclaimed-preview-card {
   position: relative;
   overflow: hidden;
   min-height: 0;
   border-radius: 10px;
   background-color: #222222;
   box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
}
.reclaimed-large {
   grid-row: 1 / 3;
}
.reclaimed-preview-card img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition:
       transform 0.45s ease,
       filter 0.45s ease;
}
.reclaimed-preview-card:hover img {
   transform: scale(1.045);
   filter: brightness(0.8);
}
.image-overlay {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   padding: 65px 25px 25px;
   color: white;
   background:
       linear-gradient(
           transparent,
           rgba(0, 0, 0, 0.88)
       );
}
.image-overlay p {
   margin-bottom: 5px;
   color: goldenrod;
   font-size: 12px;
   font-weight: bold;
   letter-spacing: 1.5px;
   text-transform: uppercase;
}
.image-overlay h3 {
   font-size: 25px;
}
.reclaimed-button-wrapper {
   margin-top: 38px;
   text-align: center;
}

/* ========================================
  WHY CHOOSE US
======================================== */
.why-us-section {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 700px;
   background-color: #ffffff;
}
.why-us-image {
   min-height: 600px;
}
.why-us-image img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.why-us-content {
   padding: 90px 9%;
   align-self: center;
}
.why-us-content > h2 {
   margin-bottom: 22px;
   font-size: clamp(34px, 4vw, 50px);
   line-height: 1.1;
}
.why-us-content > p:not(.section-label) {
   margin-bottom: 38px;
   color: #5c5c5c;
   font-size: 17px;
}
.why-us-list {
   display: flex;
   flex-direction: column;
   gap: 27px;
}
.why-us-item {
   display: grid;
   grid-template-columns: 55px 1fr;
   gap: 18px;
   align-items: start;
}
.why-us-item > span {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   color: #171717;
   background-color: goldenrod;
   font-size: 13px;
   font-weight: bold;
}
.why-us-item h3 {
   margin-bottom: 5px;
   font-size: 20px;
}
.why-us-item p {
   color: #5c5c5c;
}

/* ========================================
  FINAL CALL TO ACTION
======================================== */
.home-cta {
   padding: 78px 8%;
   color: white;
   background-color: #171717;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 45px;
}
.home-cta > div {
   max-width: 850px;
}
.home-cta h2 {
   margin-bottom: 12px;
   font-size: clamp(32px, 4vw, 48px);
   line-height: 1.15;
}
.home-cta p:not(.section-label) {
   color: #dddddd;
   font-size: 17px;
}


/* ========================================
  FOOTER
======================================== */
.site-footer {
   padding: 0;
   color: #cccccc;
   background-color: #0f0f0f;
   text-align: left;
}
.footer-content {
   max-width: 1300px;
   margin: 0 auto;
   padding: 65px 8%;
   display: grid;
   grid-template-columns: 1.6fr 0.7fr 1fr;
   gap: 55px;
}
.footer-brand {
   display: flex;
   gap: 18px;
   align-items: center;
}
.footer-brand img {
   width: 90px;
   height: 90px;
   border-radius: 50%;
   object-fit: cover;
}
.footer-brand h2 {
   color: white;
   font-size: 24px;
}
.footer-brand p {
   margin-top: 5px;
   color: #aaaaaa;
}
.footer-links,
.footer-contact {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}
.footer-links h3,
.footer-contact h3 {
   margin-bottom: 15px;
   color: white;
   font-size: 17px;
}
.footer-links a,
.footer-contact a {
   margin-bottom: 8px;
   color: #cccccc;
   text-decoration: none;
}
.footer-links a:hover,
.footer-contact a:hover {
   color: goldenrod;
}
.footer-contact p {
   margin-bottom: 12px;
   color: #aaaaaa;
}
.footer-bottom {
   padding: 22px 8%;
   border-top: 1px solid #292929;
   text-align: center;
   font-size: 13px;
}


/* ========================================
  TABLET AND PHONE
======================================== */
@media (max-width: 900px) {
   .logo span {
       white-space: normal;
   }
   .trust-strip {
       grid-template-columns: 1fr;
   }
   .trust-item:not(:last-child) {
       padding-bottom: 18px;
       border-right: none;
       border-bottom: 1px solid rgba(0, 0, 0, 0.25);
   }
   .featured-grid,
   .service-cards {
       grid-template-columns: 1fr;
   }
   .featured-card {
       max-width: 680px;
       margin: 0 auto;
   }
   .reclaimed-preview-heading {
       grid-template-columns: 1fr;
       gap: 18px;
   }
   .reclaimed-preview-grid {
       height: auto;
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: auto;
   }
   .reclaimed-large {
       grid-column: 1 / 3;
       grid-row: auto;
       height: 470px;
   }
   .reclaimed-preview-card:not(.reclaimed-large) {
       height: 330px;
   }
   .why-us-section {
       grid-template-columns: 1fr;
   }
   .why-us-image {
       min-height: 500px;
   }
   .home-cta {
       flex-direction: column;
       align-items: flex-start;
   }
   .footer-content {
       grid-template-columns: 1fr 1fr;
   }
   .footer-brand {
       grid-column: 1 / 3;
   }
}

@media (max-width: 600px) {
   .hero {
       min-height: 620px;
       padding: 75px 6%;
       background-position: 58% center;
   }
   .hero h1 {
       font-size: 43px;
       letter-spacing: -1px;
   }
   .hero-description {
       font-size: 16px;
   }
   .hero-buttons {
       flex-direction: column;
   }
   .hero-buttons a {
       width: 100%;
       text-align: center;
   }
   .featured-work,
   .services-section,
   .reclaimed-preview {
       padding: 70px 6%;
   }
   .section-introduction {
       margin-top: -27px;
       font-size: 16px;
   }
   .reclaimed-preview-grid {
       grid-template-columns: 1fr;
   }
   .reclaimed-large {
       grid-column: auto;
       height: 390px;
   }
   .reclaimed-preview-card:not(.reclaimed-large) {
       height: 300px;
   }
   .why-us-image {
       min-height: 400px;
   }
   .why-us-content {
       padding: 70px 6%;
   }
   .why-us-item {
       grid-template-columns: 48px 1fr;
       gap: 14px;
   }
   .home-cta {
       padding: 65px 6%;
   }
   .home-cta .primary-button {
       width: 100%;
       text-align: center;
   }
   .footer-content {
       padding: 55px 6%;
       grid-template-columns: 1fr;
   }
   .footer-brand {
       grid-column: auto;
       align-items: flex-start;
   }
   .footer-brand img {
       width: 75px;
       height: 75px;
   }
}
/* ========================================
  SMALL PHONE STYLES
======================================== */
@media (max-width: 500px) {
   .navbar {
       align-items: flex-start;
   }
   .nav-links {
       justify-content: flex-start;
       gap: 12px 18px;
   }
   .hero {
       padding: 60px 6%;
   }
   .hero h1 {
       font-size: 40px;
   }
   .hero-description,
   .page-hero p {
       font-size: 16px;
   }
   .hero-buttons {
       flex-direction: column;
       align-items: flex-start;
   }
   .primary-button,
   .secondary-button {
       width: 100%;
       text-align: center;
   }
   .page-hero {
       padding: 70px 6%;
   }
   .services-section,
   .values-section {
       padding: 65px 6%;
   }
   .about-section,
   .contact-layout,
   .services-page-grid,
   .projects-grid {
       padding-left: 6%;
       padding-right: 6%;
   }
}
  /* ========================================

   SHARED INNER-PAGE HEROES

======================================== */

.inner-hero {

    min-height: 540px;

    padding: 100px 8%;

    display: flex;

    align-items: center;

    color: white;

    background-size: cover;

    background-position: center;

}

.inner-hero-content {

    max-width: 850px;

}

.inner-hero h1 {

    max-width: 850px;

    margin-bottom: 22px;

    font-size: clamp(48px, 7vw, 78px);

    line-height: 1.03;

    letter-spacing: -2px;

}

.inner-hero-content > p:not(.eyebrow) {

    max-width: 700px;

    color: #eeeeee;

    font-size: 19px;

}

.about-hero {

    background:

        linear-gradient(

            90deg,

            rgba(0, 0, 0, 0.9),

            rgba(0, 0, 0, 0.38)

        ),

        url("images/commercial4.jpg");

    background-size: cover;

    background-position: center;

}

.services-hero {

    background:

        linear-gradient(

            90deg,

            rgba(0, 0, 0, 0.9),

            rgba(0, 0, 0, 0.38)

        ),

        url("images/commercial3.jpg");

    background-size: cover;

    background-position: center;

}

.projects-hero {

    background:

        linear-gradient(

            90deg,

            rgba(0, 0, 0, 0.9),

            rgba(0, 0, 0, 0.35)

        ),

        url("images/commercial1.jpg");

    background-size: cover;

    background-position: center;

}

.contact-hero {

    background:

        linear-gradient(

            90deg,

            rgba(0, 0, 0, 0.92),

            rgba(0, 0, 0, 0.42)

        ),

        url("images/hero.jpg");

    background-size: cover;

    background-position: center;

}


/* ========================================

   SHARED HEADINGS

======================================== */

.section-heading-centered {

    max-width: 850px;

    margin: 0 auto 45px;

    text-align: center;

}

.section-heading-centered h2 {

    margin-bottom: 14px;

    font-size: clamp(34px, 4.5vw, 50px);

    line-height: 1.15;

}

.section-heading-centered > p:not(.section-label) {

    color: #5c5c5c;

    font-size: 17px;

}

.check-list {

    margin: 25px 0;

    padding: 0;

    list-style: none;

}

.check-list li {

    position: relative;

    margin-bottom: 13px;

    padding-left: 28px;

}

.check-list li::before {

    content: "✓";

    position: absolute;

    top: 0;

    left: 0;

    color: goldenrod;

    font-weight: bold;

}


/* ========================================

   ABOUT PAGE

======================================== */

.about-introduction {

    max-width: 1300px;

    margin: 0 auto;

    padding: 100px 8%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;

}

.about-introduction-content h2 {

    margin-bottom: 22px;

    font-size: clamp(36px, 4.5vw, 52px);

    line-height: 1.1;

}

.about-introduction-content p {

    margin-bottom: 18px;

    color: #5c5c5c;

    font-size: 17px;

}

.about-introduction-content .primary-button {

    margin-top: 12px;

}

.about-introduction-image {

    position: relative;

}

.about-introduction-image > img {

    display: block;

    width: 100%;

    height: 610px;

    border-radius: 10px;

    object-fit: cover;

}

.image-stat-card {

    position: absolute;

    right: -20px;

    bottom: 30px;

    width: 220px;

    padding: 24px;

    color: white;

    background-color: #171717;

    border-left: 5px solid goldenrod;

    border-radius: 6px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22);

}

.image-stat-card strong {

    display: block;

    margin-bottom: 4px;

    color: goldenrod;

    font-size: 29px;

}

.image-stat-card span {

    font-size: 14px;

}

.company-values {

    padding: 95px 8%;

    background-color: #f5f5f5;

}

.values-grid {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;

}

.modern-value-card {

    position: relative;

    padding: 35px 28px;

    background-color: white;

    border-radius: 8px;

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);

    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease;

}

.modern-value-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.14);

}

.value-number {

    display: block;

    margin-bottom: 25px;

    color: goldenrod;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 2px;

}

.modern-value-card h3 {

    margin-bottom: 11px;

    font-size: 22px;

}

.modern-value-card p {

    color: #5c5c5c;

}

.about-reclamation {

    padding: 100px 8%;

    display: grid;

    grid-template-columns: 1.15fr 1fr;

    gap: 70px;

    align-items: center;

}

.about-reclamation-images {

    height: 620px;

    display: grid;

    grid-template-columns: 1.15fr 1fr;

    grid-template-rows: repeat(2, 1fr);

    gap: 15px;

}

.about-reclamation-images img {

    display: block;

    width: 100%;

    height: 100%;

    border-radius: 9px;

    object-fit: cover;

}

.reclamation-tall {

    grid-row: 1 / 3;

}

.about-reclamation-content h2 {

    margin-bottom: 22px;

    font-size: clamp(36px, 4.5vw, 52px);

    line-height: 1.1;

}

.about-reclamation-content > p:not(.section-label) {

    color: #5c5c5c;

    font-size: 17px;

}

.credential-strip {

    padding: 36px 8%;

    background-color: goldenrod;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

}

.credential-strip div {

    padding: 5px 25px;

    text-align: center;

}

.credential-strip div:not(:last-child) {

    border-right: 1px solid rgba(0, 0, 0, 0.25);

}

.credential-strip span {

    display: block;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 1.4px;

}

.credential-strip strong {

    display: block;

    margin-top: 5px;

    font-size: 18px;

}


/* ========================================

   SERVICES PAGE

======================================== */

.services-introduction {

    max-width: 850px;

    margin: 0 auto;

    padding: 95px 8% 45px;

    text-align: center;

}

.services-introduction h2 {

    margin-bottom: 17px;

    font-size: clamp(36px, 5vw, 54px);

    line-height: 1.1;

}

.services-introduction > p:not(.section-label) {

    color: #5c5c5c;

    font-size: 17px;

}

.premium-services-grid {

    max-width: 1300px;

    margin: 0 auto;

    padding: 45px 8% 100px;

    display: flex;

    flex-direction: column;

    gap: 42px;

}

.premium-service-card {

    overflow: hidden;

    display: grid;

    grid-template-columns: 1fr 1fr;

    background-color: white;

    border-radius: 11px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.11);

}

.reverse-service .premium-service-image {

    order: 2;

}

.reverse-service .premium-service-content {

    order: 1;

}

.premium-service-image {

    position: relative;

    min-height: 470px;

}

.premium-service-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.premium-service-image > span {

    position: absolute;

    top: 25px;

    left: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 55px;

    height: 55px;

    color: #171717;

    background-color: goldenrod;

    border-radius: 50%;

    font-weight: bold;

}

.premium-service-content {

    padding: 55px;

    align-self: center;

}

.premium-service-content h2 {

    margin-bottom: 15px;

    font-size: clamp(30px, 3.5vw, 42px);

    line-height: 1.15;

}

.premium-service-content > p:not(.card-label) {

    color: #5c5c5c;

    font-size: 17px;

}

.premium-service-content ul {

    margin-top: 22px;

    padding-left: 20px;

}

.premium-service-content li {

    margin-bottom: 8px;

}

.service-process {

    padding: 95px 8%;

    background-color: #f5f5f5;

}

.process-grid,

.expectations-grid {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;

}

.process-grid article,

.expectations-grid article {

    padding: 32px 26px;

    background-color: white;

    border-radius: 8px;

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);

}

.process-grid span,

.expectations-grid span {

    display: block;

    margin-bottom: 22px;

    color: goldenrod;

    font-weight: bold;

    letter-spacing: 2px;

}

.process-grid h3,

.expectations-grid h3 {

    margin-bottom: 9px;

    font-size: 21px;

}

.process-grid p,

.expectations-grid p {

    color: #5c5c5c;

}


/* ========================================

   PROJECTS PAGE

======================================== */

.project-showcase {

    padding: 100px 8%;

}

.project-dark-section {

    color: white;

    background-color: #171717;

}

.project-heading {

    max-width: 1200px;

    margin: 0 auto 42px;

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 55px;

    align-items: end;

}

.project-heading h2 {

    font-size: clamp(36px, 5vw, 54px);

    line-height: 1.1;

}

.project-summary {

    color: #5c5c5c;

    font-size: 17px;

}

.project-dark-section .project-summary {

    color: #cccccc;

}

.modern-project-collage {

    max-width: 1200px;

    height: 680px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.45fr 1fr 1fr;

    grid-template-rows: repeat(2, 1fr);

    gap: 15px;

}

.project-gallery-main {

    grid-row: 1 / 3;

}

.project-gallery-item {

    position: relative;

    overflow: hidden;

    min-height: 0;

    background-color: #222222;

    border-radius: 10px;

    box-shadow: 0 13px 32px rgba(0, 0, 0, 0.14);

}

.project-gallery-item img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform 0.4s ease,

        filter 0.4s ease;

}

.project-gallery-item:hover img {

    transform: scale(1.04);

    filter: brightness(0.82);

}

.project-gallery-item figcaption {

    position: absolute;

    right: 0;

    bottom: 0;

    left: 0;

    padding: 55px 20px 20px;

    color: white;

    font-weight: bold;

    background:

        linear-gradient(

            transparent,

            rgba(0, 0, 0, 0.88)

        );

}

.two-project-collage {

    max-width: 1200px;

    height: 580px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

}

.project-details-strip {

    max-width: 1200px;

    margin: 28px auto 0;

    padding: 25px 30px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    background-color: #f5f5f5;

    border-radius: 8px;

}

.project-details-strip div {

    padding: 0 25px;

}

.project-details-strip div:not(:last-child) {

    border-right: 1px solid #cccccc;

}

.project-details-strip span {

    display: block;

    color: #777777;

    font-size: 12px;

    letter-spacing: 1.3px;

    text-transform: uppercase;

}

.project-details-strip strong {

    display: block;

    margin-top: 5px;

}

.dark-details {

    color: #171717;

    background-color: goldenrod;

}

.dark-details span {

    color: #3b2a18;

}

.smokestack-layout {

    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 65px;

    align-items: center;

}

.smokestack-image {

    height: 650px;

}

.smokestack-image img {

    display: block;

    width: 100%;

    height: 100%;

    border-radius: 10px;

    object-fit: cover;

}

.smokestack-content h3 {

    margin-bottom: 18px;

    font-size: clamp(34px, 4vw, 48px);

    line-height: 1.12;

}

.smokestack-content > p:not(.section-label) {

    color: #5c5c5c;

    font-size: 17px;

}

.reclaimed-project-section {

    padding: 100px 8%;

    background-color: #f4f1eb;

}

.reclaimed-project-grid {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}

.reclaimed-project-grid article {

    overflow: hidden;

    background-color: white;

    border-radius: 10px;

    box-shadow: 0 13px 32px rgba(0, 0, 0, 0.1);

}

.reclaimed-project-grid img {

    display: block;

    width: 100%;

    height: 330px;

    object-fit: cover;

}

.reclaimed-project-grid article > div {

    padding: 28px;

}

.reclaimed-project-grid h3 {

    margin-bottom: 10px;

    font-size: 24px;

}

.reclaimed-project-grid article > div > p:not(.card-label) {

    color: #5c5c5c;

}


/* ========================================

   CONTACT PAGE

======================================== */

.premium-contact-section {

    max-width: 1300px;

    margin: 0 auto;

    padding: 100px 8%;

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 75px;

}

.premium-contact-information h2,

.form-heading h2 {

    margin-bottom: 14px;

    font-size: clamp(34px, 4vw, 48px);

    line-height: 1.12;

}

.contact-introduction,

.form-heading > p:not(.section-label) {

    margin-bottom: 30px;

    color: #5c5c5c;

    font-size: 17px;

}

.contact-method {

    padding: 20px 0;

    border-top: 1px solid #dddddd;

}

.contact-method:last-of-type {

    border-bottom: 1px solid #dddddd;

}

.contact-method span {

    display: block;

    color: #777777;

    font-size: 12px;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}

.contact-method a,

.contact-method p {

    display: inline-block;

    margin-top: 5px;

    color: #171717;

    text-decoration: none;

    font-size: 19px;

    font-weight: bold;

}

.contact-method a:hover {

    color: goldenrod;

}

.contact-photo {

    height: 300px;

    margin-top: 35px;

}

.contact-photo img {

    display: block;

    width: 100%;

    height: 100%;

    border-radius: 9px;

    object-fit: cover;

}

.estimate-form-wrapper {

    padding: 48px;

    background-color: #f5f5f5;

    border-radius: 11px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

}

.premium-contact-form {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.form-row {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

}

.form-group {

    display: flex;

    flex-direction: column;

}

.form-group label {

    margin-bottom: 7px;

    font-weight: bold;

}

.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 14px;

    border: 1px solid #c8c8c8;

    border-radius: 5px;

    background-color: white;

    font: inherit;

}

.form-group textarea {

    resize: vertical;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    border-color: goldenrod;

    outline: none;

    box-shadow:

        0 0 0 3px rgba(242, 140, 40, 0.16);

}

.form-group small {

    margin-top: 7px;

    color: #666666;

}

.form-submit-button {

    width: 100%;

    border: none;

    cursor: pointer;

}

.contact-expectations {

    padding: 95px 8%;

    background-color: #f5f5f5;

}


/* ========================================

   INNER PAGE TABLET STYLES

======================================== */

@media (max-width: 950px) {

    .about-introduction,

    .about-reclamation,

    .premium-contact-section,

    .smokestack-layout {

        grid-template-columns: 1fr;

    }

    .about-introduction-image > img {

        height: 520px;

    }

    .image-stat-card {

        right: 20px;

    }

    .values-grid,

    .process-grid,

    .expectations-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .credential-strip {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px 0;

    }

    .credential-strip div:nth-child(2) {

        border-right: none;

    }

    .premium-service-card {

        grid-template-columns: 1fr;

    }

    .reverse-service .premium-service-image,

    .reverse-service .premium-service-content {

        order: initial;

    }

    .premium-service-image {

        min-height: 430px;

    }

    .project-heading {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .modern-project-collage {

        height: auto;

        grid-template-columns: repeat(2, 1fr);

        grid-template-rows: auto;

    }

    .project-gallery-main {

        grid-column: 1 / 3;

        grid-row: auto;

        height: 470px;

    }

    .modern-project-collage

    .project-gallery-item:not(.project-gallery-main) {

        height: 290px;

    }

    .two-project-collage {

        height: auto;

        grid-template-columns: 1fr;

    }

    .two-project-collage .project-gallery-item {

        height: 520px;

    }

    .reclaimed-project-grid {

        grid-template-columns: 1fr;

    }

    .reclaimed-project-grid article {

        max-width: 720px;

        margin: 0 auto;

    }

    .reclaimed-project-grid img {

        height: 430px;

    }

}


/* ========================================

   INNER PAGE PHONE STYLES

======================================== */

@media (max-width: 650px) {

    .inner-hero {

        min-height: 500px;

        padding: 75px 6%;

    }

    .inner-hero h1 {

        font-size: 44px;

        letter-spacing: -1px;

    }

    .inner-hero-content > p:not(.eyebrow) {

        font-size: 17px;

    }

    .about-introduction,

    .about-reclamation,

    .premium-contact-section {

        padding: 70px 6%;

    }

    .about-introduction-image > img {

        height: 410px;

    }

    .image-stat-card {

        position: relative;

        right: auto;

        bottom: auto;

        width: 100%;

        margin-top: 12px;

    }

    .values-grid,

    .process-grid,

    .expectations-grid,

    .credential-strip {

        grid-template-columns: 1fr;

    }

    .credential-strip div:not(:last-child) {

        padding-bottom: 22px;

        border-right: none;

        border-bottom: 1px solid rgba(0, 0, 0, 0.22);

    }

    .about-reclamation-images {

        height: auto;

        grid-template-columns: 1fr;

        grid-template-rows: auto;

    }

    .about-reclamation-images img {

        height: 320px;

    }

    .reclamation-tall {

        grid-row: auto;

    }

    .premium-services-grid {

        padding: 35px 6% 75px;

    }

    .premium-service-image {

        min-height: 330px;

    }

    .premium-service-content {

        padding: 32px 25px;

    }

    .service-process,

    .contact-expectations,

    .project-showcase,

    .reclaimed-project-section {

        padding: 70px 6%;

    }

    .modern-project-collage {

        grid-template-columns: 1fr;

    }

    .project-gallery-main {

        grid-column: auto;

        height: 350px;

    }

    .modern-project-collage

    .project-gallery-item:not(.project-gallery-main) {

        height: 280px;

    }

    .two-project-collage .project-gallery-item {

        height: 370px;

    }

    .project-details-strip {

        grid-template-columns: 1fr;

    }

    .project-details-strip div {

        padding: 15px 0;

    }

    .project-details-strip div:not(:last-child) {

        border-right: none;

        border-bottom: 1px solid #cccccc;

    }

    .smokestack-image {

        height: 500px;

    }

    .reclaimed-project-grid img {

        height: 330px;

    }

    .premium-contact-section {

        gap: 45px;

    }

    .estimate-form-wrapper {

        padding: 30px 22px;

    }

    .form-row {

        grid-template-columns: 1fr;

    }

}
/* ========================================
  PROJECTS PAGE HERO
======================================== */
.projects-page-hero {
   min-height: 650px;
   padding: 100px 8%;
   display: flex;
   align-items: center;
   color: white;
   background:
       linear-gradient(
           90deg,
           rgba(0, 0, 0, 0.92) 0%,
           rgba(0, 0, 0, 0.68) 52%,
           rgba(0, 0, 0, 0.25) 100%
       ),
       url("images/churchDemo2.jpg");
   background-size: cover;
   background-position: center;
}
.projects-hero-content {
   max-width: 850px;
}
.projects-page-hero h1 {
   margin-bottom: 24px;
   font-size: clamp(52px, 8vw, 90px);
   line-height: 0.98;
   letter-spacing: -3px;
}
.projects-page-hero
.projects-hero-content > p:not(.eyebrow) {
   max-width: 700px;
   margin-bottom: 35px;
   color: #eeeeee;
   font-size: 19px;
}
/* ========================================
  PORTFOLIO INTRODUCTION
======================================== */
.portfolio-introduction {
   max-width: 900px;
   margin: 0 auto;
   padding: 100px 8% 75px;
   text-align: center;
}
.portfolio-introduction h2 {
   margin-bottom: 20px;
   font-size: clamp(38px, 5vw, 58px);
   line-height: 1.08;
}
.portfolio-introduction > p:not(.section-label) {
   color: #5c5c5c;
   font-size: 18px;
}
/* ========================================
  SHARED PROJECT SECTIONS
======================================== */
.portfolio-project {
   padding: 100px 8%;
   background-color: #ffffff;
}
.portfolio-project:nth-of-type(even) {
   background-color: #f6f6f6;
}
.dark-project {
   color: white;
   background-color: #171717 !important;
}
.project-title-row {
   max-width: 1250px;
   margin: 0 auto 45px;
   display: grid;
   grid-template-columns: 1.15fr 0.85fr;
   gap: 65px;
   align-items: end;
}
.project-title-row h2 {
   max-width: 750px;
   font-size: clamp(36px, 5vw, 58px);
   line-height: 1.08;
}
.project-number {
   margin-bottom: 9px;
   color: #888888;
   font-size: 13px;
   font-weight: bold;
   letter-spacing: 2px;
   text-transform: uppercase;
}
.dark-project .project-number {
   color: #999999;
}
.project-description > p {
   color: #5c5c5c;
   font-size: 17px;
}
.dark-project .project-description > p {
   color: #cccccc;
}
.project-tags {
   margin-top: 22px;
   display: flex;
   flex-wrap: wrap;
   gap: 9px;
}
.project-tags span {
   display: inline-block;
   padding: 7px 12px;
   border: 1px solid #dddddd;
   border-radius: 100px;
   color: #555555;
   background-color: white;
   font-size: 12px;
   font-weight: bold;
}
.dark-project .project-tags span {
   border-color: #444444;
   color: #dddddd;
   background-color: #242424;
}
/* ========================================
  PROJECT MEDIA
======================================== */
.project-media {
   position: relative;
   overflow: hidden;
   min-height: 0;
   border-radius: 10px;
   background-color: #222222;
   box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15);
}
.project-media img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition:
       transform 0.45s ease,
       filter 0.45s ease;
}
.project-media:hover img {
   transform: scale(1.04);
   filter: brightness(0.82);
}
.project-media figcaption {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   padding: 55px 20px 18px;
   color: white;
   font-size: 14px;
   font-weight: bold;
   background:
       linear-gradient(
           transparent,
           rgba(0, 0, 0, 0.88)
       );
}
/* ========================================
  THREE-PHOTO COLLAGE
======================================== */
.project-collage-three {
   max-width: 1250px;
   height: 650px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1.45fr 1fr;
   grid-template-rows: repeat(2, 1fr);
   gap: 16px;
}
.project-collage-three
.project-media-featured {
   grid-row: 1 / 3;
}
/* ========================================
  FOUR-PHOTO COLLAGE
======================================== */
.project-collage-four {
   max-width: 1250px;
   height: 680px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr;
   grid-template-rows: repeat(2, 1fr);
   gap: 15px;
}
.project-collage-four
.project-media-featured {
   grid-row: 1 / 3;
}
/* =========================================
SILO PROJECT
========================================= */
.silo-project-layout {
max-width: 1250px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 22px;
align-items: start;
}
.silo-cover {
min-height: 670px;
}
.project-video-grid {
display: flex;
flex-direction: column;
gap: 22px;
align-self: start;
}
.video-card {
position: relative;
width: 100%;
min-height: 260px;
overflow: hidden;
border-radius: 10px;
background-color: #242424;
box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25);
}

.video-card > video {
position: absolute;
left: 0;
top: 50%;
width: 62.5%;
height: auto;
transform: translateY(-50%);
background-color: black;
}

.video-information {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 37.5%;
padding: 28px;

display: flex;
flex-direction: column;
justify-content: center;

color: white;
background-color: #242424;
}

.video-information h3 {
color: white;
font-size: 21px;
}


/* ========================================
  SINGLE IMAGE + TEXT PROJECT
======================================== */
.image-text-project {
   display: grid;
   grid-template-columns: 1.15fr 0.85fr;
   min-height: 700px;
   padding: 0;
}
.single-project-image {
   min-height: 700px;
}
.single-project-image img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.single-project-content {
   padding: 90px 12%;
   align-self: center;
}
.single-project-content h2 {
   margin-bottom: 20px;
   font-size: clamp(38px, 5vw, 58px);
   line-height: 1.08;
}
.single-project-content > p:not(
   .project-number,
   .section-label
) {
   color: #5c5c5c;
   font-size: 17px;
}
.single-project-content .dark-button {
   margin-top: 28px;
}
/* ========================================
  FEATURED WATER-TOWER VIDEO
======================================== */
.featured-video-card {
   max-width: 1150px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1.4fr 0.6fr;
}
.featured-video-wrapper {
   min-height: 600px;
   background-color: black;
}
.featured-video-information {
   padding: 45px;
   align-self: center;
}
.featured-video-information h3 {
   margin-bottom: 15px;
   color: white;
   font-size: clamp(29px, 3.5vw, 42px);
   line-height: 1.12;
}
.featured-video-information
p:not(.card-label) {
   color: #cccccc;
}
/* ========================================
  CHURCH STORY GRID
======================================== */
.church-story-grid {
   max-width: 1250px;
   height: 780px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: repeat(2, 1fr);
   gap: 15px;
}
.church-before {
   grid-row: 1 / 3;
}
.church-after {
   grid-row: 1 / 3;
   grid-column: 3;
}
/* ========================================
  TIMBER ROOF PROJECT
======================================== */
.timber-project {
   display: grid;
   grid-template-columns: 0.85fr 1.15fr;
   gap: 75px;
   align-items: center;
   background-color: #f4f1eb !important;
}
.timber-project-content {
   max-width: 600px;
   justify-self: end;
}
.timber-project-content h2 {
   margin-bottom: 20px;
   font-size: clamp(38px, 5vw, 58px);
   line-height: 1.08;
}
.timber-project-content
> p:not(.project-number, .section-label) {
   color: #5c5c5c;
   font-size: 17px;
}
.project-feature-list {
   margin-top: 28px;
   padding: 0;
   list-style: none;
}
.project-feature-list li {
   position: relative;
   margin-bottom: 12px;
   padding-left: 28px;
}
.project-feature-list li::before {
   content: "✓";
   position: absolute;
   left: 0;
   color: #f28c28;
   font-weight: bold;
}
.timber-project-images {
   height: 680px;
   display: grid;
   grid-template-columns: 1.2fr 0.8fr;
   grid-template-rows: repeat(2, 1fr);
   gap: 15px;
}
.timber-overview {
   grid-row: 1 / 3;
}
/* ========================================
  PROJECTS CALL TO ACTION
======================================== */
.projects-cta {
   padding: 85px 8%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 45px;
   color: white;
   background-color: #171717;
}
.projects-cta > div {
   max-width: 850px;
}
.projects-cta h2 {
   margin-bottom: 14px;
   font-size: clamp(34px, 4.5vw, 52px);
   line-height: 1.12;
}
.projects-cta p:not(.section-label) {
   color: #cccccc;
   font-size: 17px;
}
/* ========================================
  PROJECTS TABLET
======================================== */
@media (max-width: 1000px) {
   .project-title-row,
   .silo-project-layout,
   .image-text-project,
   .featured-video-card,
   .timber-project {
       grid-template-columns: 1fr;
   }
   .project-title-row {
       gap: 20px;
   }
   .project-collage-three,
   .project-collage-four {
       height: auto;
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: auto;
   }
   .project-collage-three
   .project-media-featured,
   .project-collage-four
   .project-media-featured {
       grid-column: 1 / 3;
       grid-row: auto;
       height: 480px;
   }
   .project-collage-three
   .project-media:not(.project-media-featured),
   .project-collage-four
   .project-media:not(.project-media-featured) {
       height: 300px;
   }
   .silo-cover {
       min-height: 520px;
   }
   .video-card {
       grid-template-columns: 1fr;
   }
   .video-wrapper {
       min-height: 380px;
   }
   .single-project-image {
       min-height: 550px;
   }
   .featured-video-wrapper {
       min-height: 520px;
   }
   .church-story-grid {
       height: auto;
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: auto;
   }
   .church-before,
   .church-after {
       grid-column: auto;
       grid-row: auto;
       height: 480px;
   }
   .church-story-grid
   .project-media:not(.church-before):not(.church-after) {
       height: 330px;
   }
   .timber-project-content {
       max-width: none;
       justify-self: stretch;
   }
   .timber-project-images {
       height: 600px;
   }
   .projects-cta {
       flex-direction: column;
       align-items: flex-start;
   }
}
/* ========================================
  PROJECTS PHONE
======================================== */
@media (max-width: 650px) {
   .projects-page-hero {
       min-height: 600px;
       padding: 75px 6%;
   }
   .projects-page-hero h1 {
       font-size: 49px;
       letter-spacing: -1px;
   }
   .projects-page-hero
   .projects-hero-content > p:not(.eyebrow) {
       font-size: 17px;
   }
   .portfolio-introduction {
       padding: 75px 6% 55px;
   }
   .portfolio-project {
       padding: 72px 6%;
   }
   .project-collage-three,
   .project-collage-four {
       grid-template-columns: 1fr;
   }
   .project-collage-three
   .project-media-featured,
   .project-collage-four
   .project-media-featured {
       grid-column: auto;
       height: 360px;
   }
   .project-collage-three
   .project-media:not(.project-media-featured),
   .project-collage-four
   .project-media:not(.project-media-featured) {
       height: 280px;
   }
   .silo-cover {
       min-height: 430px;
   }
   .project-video-grid {
       grid-template-rows: auto;
   }
   .video-wrapper {
       min-height: 300px;
   }
   .single-project-image {
       min-height: 430px;
   }
   .single-project-content {
       padding: 65px 6%;
   }
   .featured-video-wrapper {
       min-height: 400px;
   }
   .featured-video-information {
       padding: 30px 24px;
   }
   .church-story-grid {
       grid-template-columns: 1fr;
   }
   .church-before,
   .church-after,
   .church-story-grid
   .project-media:not(.church-before):not(.church-after) {
       height: 340px;
   }
   .timber-project {
       gap: 45px;
   }
   .timber-project-images {
       height: auto;
       grid-template-columns: 1fr;
       grid-template-rows: auto;
   }
   .timber-overview,
   .timber-detail {
       grid-row: auto;
       height: 360px;
   }
   .projects-cta {
       padding: 65px 6%;
   }
   .projects-cta .primary-button {
       width: 100%;
       text-align: center;
   }
}  
video {
   display: block;
   width: 100%;
   height: auto;
   background-color: black;
}