/* Master */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}
body {margin: 0;}

/* General */

.grid-x.equal-height {
  align-items: stretch; /* make children equal height */
}

.grid-x.equal-height > .cell {
  display: flex; /* so inner content can grow properly */
}

.grid-x.custom-gutters {
  margin-left: var(--sp-medium);
  margin-right: var(--sp-medium);
}

.grid-x.custom-gutters > .cell {
  padding-left:var(--sp-medium);
  padding-right:var(--sp-medium);
}

.grid-x {border: 2px solid r ed}
.cell {border: 2px solid bl ue}

/* Structure */

header {}
  a.logo {margin: 0;}
  .logo {
    width: auto;
    height: var(--sp-large);;
  }

main {}

  section {}
    .wide-container {
      position: relative;
      overflow: hidden;
      width: 100%;
    }
    .narrow-container {
      max-width: 110rem;
      margin-left: auto;
      margin-right: auto;
    }
      .content-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
      }
        .content-wrap-gap-x-large {
          display: flex;
          flex-direction: column; /* stack children vertically */
          gap: var(--sp-x-large); /* vertical spacing */
        }
        .content-wrap-gap-large {
          display: flex;
          flex-direction: column; /* stack children vertically */
          gap: var(--sp-medium); /* vertical spacing */
        }
        .content-wrap-gap-small {
          display: flex;
          flex-direction: column; /* stack children vertically */
          gap: var(--sp-mini); /* vertical spacing */
        }
          .hero .content-wrap-gap-large {gap: var(--sp-large);}
        
footer {
  margin-top: 0 !important;
}
  .footer-content {
    padding-top: var(--sp-xx-large);
    padding-bottom: calc(var(--sp-xx-large) - var(--sp-large));
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  }
    .footer-column {margin-bottom: var(--sp-large)}

/* - SECTIONS - */

.bg-white {background-color: var(--black-00);}
.bg-green {background-color: var(--novo-green-100);}
.bg-beige {background-color: var(--novo-beige-100);}
.bg-gray {background-color: var(--black-10);}

/* -------------------------------------------- Hero */

.hero {}

  .hero-background {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
    .hero-background::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 2;
    }
    .hero-background img,
    .hero-background video {
      width: 100%;
      height: 70vh;
      object-fit: cover;
    }
  .hero-content {
    position: relative;
    z-index: 3;
    height: 70vh; /* adjust */
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  } 

/* -------------------------------------------- List */

.list {}

  .list-columns {
    padding-top: var(--sp-xx-large);
    padding-bottom: calc(var(--sp-xx-large) - var(--sp-large));
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
    align-items: stretch; /* makes all cells equal height */
  }
  .list-columns-item {
    padding-bottom: var(--sp-large);
    display: flex;
    margin-bottom: var(--sp-large);
  }
    .bg-white .list-columns-item {background-color: var(--black-30);}
    .bg-green .list-columns-item {background-color: var(--black-00);}
    .bg-beige .list-columns-item {background-color: var(--black-00);}
    .bg-gray .list-columns-item {background-color: var(--black-00);}
    .list-columns-item div div:nth-child(1) {
      padding-top: var(--sp-large);
    }
      .list-columns-item img {margin-bottom: 1rem;}
      .list-columns-item-group {
        padding-left: var(--sp-medium);
        padding-right: var(--sp-medium);
      }
        .list-columns-item-group.tertiary-button-wrap {
          margin-top: auto;
        }
    

/* -------------------------------------------- topic */

.topic {}

  .topic-content {
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  }
    .connectedabove {
      padding-top: 0;
      padding-bottom: var(--sp-xx-large);
    }
    .standalone {
      padding-top: var(--sp-xx-large);
      padding-bottom: var(--sp-xx-large);
    }
    .connectedbelow {
      padding-top: var(--sp-xx-large);
      padding-bottom: 0;
    }


/* -------------------------------------------- basic */

.basic {
  border: 1px solid var(--blac k-60);
}

  .basic-background {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
    .basic-background img,
    .basic-background video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  .basic-content {
    position: relative;
    z-index: 3;
    height: 60vh; /* adjust */
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  }
    .basic-content-column {}
      .align-left .basic-content-column {
        padding-right: var(--sp-x-large);
      }
      .align-right .basic-content-column {
        padding-left: var(--sp-x-large);
      }

/* -------------------------------------------- promo */

.promo {}

  .promo-background {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
    .promo-background img,
    .promo-background video {
      width: 100%;
      height: 60vh;
      object-fit: cover;
    }
    .promo-background::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 2;
    }
  .promo-content {
    position: relative;
    z-index: 3;
    height: 60vh; /* adjust */
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  } 

/* -------------------------------------------- quotes */

.quotes {}
 .quotes-content {
    padding-top: var(--sp-xx-large);
    padding-bottom: calc(var(--sp-xx-large) - var(--sp-large));
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  }
  .quotes-columns {
    padding-top: 0;
    padding-bottom: var(--sp-xx-large);
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  }
    .quote-item {
      background-color: var(--black-10);
      padding: var(--sp-large);
      margin-bottom: var(--sp-large);
    }

/* -------------------------------------------- quick links */

.quick-links {}

  /* content */
  .quick-links-content {
    padding-top: var(--sp-xx-large);
    padding-bottom: var(--sp-xx-large);
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  }

  /* list */
  .quick-links-columns {
    padding-top: 0;
    padding-bottom: calc(var(--sp-xx-large) - var(--sp-large));
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  }
    .link-item {
      position: relative;
      overflow: hidden;
      background-color: var(--novo-green-100);
      margin-bottom: var(--sp-large);
      padding: var(--sp-large);
    }
      .link-inner {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column; /* stack children vertically */
        gap: var(--sp-medium);  /* vertical spacing between items */
        align-items: center;    /* center all children horizontally */
      }
        .link-inner .link-symbol {
          width: auto;          /* keep natural width */
          height: auto;         /* keep natural height */
          max-width: 100%;      /* optional size limit */
          object-fit: contain;  /* preserve aspect ratio */
          align-self: center;   /* center symbol horizontally */
          flex-shrink: 0;       /* prevent shrinking */

        }
      .link-overlay {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: rgba(0, 0, 0, 0.55);
        background-blend-mode: multiply;
        text-decoration: none;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }
        .link-item:hover .link-overlay {
          opacity: 1;
          pointer-events: auto;
        }

/* -------------------------------------------- global-delivery */

.global-delivery {}

  /* map */
  .global-delivery-map {
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  }

  /* countries */
  .global-delivery-countries {
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
    padding-bottom: var(--sp-xx-large);
  }
    .global-delivery-country {
      margin-bottom: var(--sp-small);
      border-bottom: 1px solid var(--black-40);
    }

  /* content */
  .global-delivery-content {
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  }


/* -------------------------------------------- coworkers */

.coworkers {}

  .coworkers-columns {
    padding-top: var(--sp-xx-large);
    padding-bottom: calc(var(--sp-xx-large) - var(--sp-large));
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  }
    .coworker-item {
      padding-left: var(--sp-large);
      padding-right: var(--sp-large);
      margin-bottom: var(--sp-large);
    }
      .coworker-item-group-1 {}
      .coworker-item-group-2 {}

/* -------------------------------------------- contact */

.contact {}

  .contact-columns {
    padding-top: calc(var(--sp-xx-large) - var(--sp-large));
    padding-bottom: calc(var(--sp-xx-large) - var(--sp-large));
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  }

/* n-video */
.contact-background {
  position: relative;
  padding-bottom: var(--sp-large);
}
  .contact-background-inner {
    position: relative;
  }
    .contact-media {
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    .media-overlay {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 3;
      pointer-events: none;
      width: 100%;
      height: 100%;
    }
      .media-overlay img {
        width: 100%;
        height: 100%;
      }
      .media-video video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

/* address */
.contact-content {
  padding-top: var(--sp-large);
  padding-bottom: var(--sp-large);
}
  .contact-content-group {}
    .contact-content-group-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
      .contact-content-group-symbol {
        width: 1.4rem;
        height: auto;
        flex-shrink: 0;
      }

/* contact form */
.contact-form  {
  padding-top: var(--sp-large);
}

/* ARCHIVES */

/* -------------------------------------------- archive news */

.news {}

  .news-columns {
    padding-top: var(--sp-xx-large);
    padding-bottom: calc(var(--sp-xx-large) - var(--sp-medium));
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  }
    .news-list-item {
      background-color: var(--black-30);
      padding-bottom: var(--sp-large);
      margin-bottom: var(--sp-large);
    }
      .news-list-item img {margin-bottom: 1rem;}
      .news-list-item-group {
        padding-left: var(--sp-large);
        padding-right: var(--sp-large);
      }





/* CUSTOM POSTS */

/* -------------------------------------------- news */

.news-article {}

  .news-article-content {
    padding-top: var(--sp-xx-large);
    padding-bottom: var(--sp-xx-large);
    padding-left: var(--sp-xx-large);
    padding-right: var(--sp-xx-large);
  }

















/* Featured/latest team members + news */

.single-item {
    padding-top: 0;
  }
  .single-item:nth-child(n+4) {
    padding-top: var(--sp-large);
  }

  .single-item-wrap {
    display: flex;
    flex-direction: column; /* stack children vertically */
    gap: var(--sp-medium); /* vertical spacing between thumbnail and case-name */
  }

    .single-item-wrap img {
        transition: transform 0.3s ease;
    }

    .single-item-wrap:hover img {
        transform: scale(1.03); /* Slight zoom in */
    }




/* Media Queries - X-Large 1440px -> ---------- */
@media screen and (min-width: 90.01em) {



}





/* Media Queries - Large 1024px -> 1440px --- */
@media screen and (max-width: 90em) {

  /* hero */
  .hero-background img,
  .hero-background video {
      height: 50vh;
    }
  .hero-content {
    height: 50vh; /* adjust */
  } 

  /* basic */
  .basic-content {
    height: 50vh; /* adjust */
  }

  /* promo */
  .promo-background img,
  .promo-background video {
    height: 50vh;
  }
  .promo-content {
    height: 50vh; /* adjust */
  } 

}

/* Media Queries - Medium 800px -> 1024px --- */
@media screen and (max-width: 64em) {

  

}

/* Media Queries - Small 640px -> 800px --- */
@media screen and (max-width: 50em) {



}


/* Media Queries - X-Small -> 640px ----------- */
@media screen and (max-width: 40em) {

  .footer-content,
  .list-columns,
  .topic-content,
  .basic-content,
  .quotes-content,
  .quotes-columns,
  .quick-links-content,
  .quick-links-columns,
  .global-delivery-map,
  .global-delivery-content,
  .global-delivery-ccountries,
  .coworkers-columns,
  .contact-columns,
  .news-columns,
  .news-article-content {
    padding-left: var(--sp-x-large);
    padding-right: var(--sp-x-large);
  }

  /* basic */
  .basic-background {
    position: relative;
    inset: 0;
    z-index: 1;
  }



}