/* =========================================================
   01. DESIGN VARIABLES
========================================================= */

:root {

  /* VASPE BRAND COLOURS */

  --vaspe-green: #00833e;
  --vaspe-green-dark: #005c2d;
  --vaspe-green-deep: #003d22;

  --vaspe-gold: #d99b18;
  --vaspe-red: #c91c18;

  --charcoal: #111714;
  --dark: #0a0f0d;

  --white: #ffffff;
  --off-white: #f7f8f6;

  --text-dark: #151a17;
  --text-muted: #66706b;

  --border-light: rgba(0, 0, 0, 0.10);


  /* TYPOGRAPHY */

  --font-heading: "Manrope", sans-serif;
  --font-body: "DM Sans", sans-serif;


  /* LAYOUT */

  --container-width: 1280px;

  --nav-height: 82px;


  /* EFFECTS */

  --transition-fast: 0.25s ease;

  --transition-medium: 0.45s ease;

  --shadow-soft:
    0 10px 40px rgba(0, 0, 0, 0.08);

}


/* =========================================================
   02. RESET
========================================================= */

*,
*::before,
*::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  font-family: var(--font-body);

  color: var(--text-dark);

  background: var(--white);

  line-height: 1.6;

  overflow-x: hidden;

}


img {

  display: block;

  max-width: 100%;

}


a {

  color: inherit;

  text-decoration: none;

}


button {

  font: inherit;

}


/* =========================================================
   03. GLOBAL CONTAINER
========================================================= */

.nav-container,
.hero-container {

  width: min(calc(100% - 80px),
      var(--container-width));

  margin-inline: auto;

}


/* =========================================================
   04. HEADER
========================================================= */

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: var(--nav-height);

  z-index: 1000;

  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0));

  transition:
    background var(--transition-medium),
    box-shadow var(--transition-medium);

}


/* HEADER AFTER SCROLL */

.site-header.scrolled {

  background: rgba(7, 20, 14, 0.97);

  box-shadow:
    0 5px 30px rgba(0, 0, 0, 0.20);

}


/* =========================================================
   05. NAVIGATION
========================================================= */

.nav-container {

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

}


/* =========================================================
   LOGO
========================================================= */

.brand-logo {

  display: flex;

  align-items: center;

  flex-shrink: 0;

}


.brand-logo img {

  width: 112px;

  height: auto;

  object-fit: contain;

}


/* =========================================================
   DESKTOP NAV
========================================================= */

.main-nav {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 28px;

  margin-left: auto;

}


.nav-link {

  position: relative;

  color: var(--white);

  font-size: 13px;

  font-weight: 600;

  white-space: nowrap;

  padding: 8px 0;

  opacity: 0.92;

  transition:
    color var(--transition-fast),
    opacity var(--transition-fast);

}


.nav-link:hover,
.nav-link.active {

  color: var(--white);

  opacity: 1;

}


/* ACTIVE NAV INDICATOR */

.nav-link::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 0;

  height: 2px;

  background: var(--vaspe-green);

  transition: width var(--transition-fast);

}


.nav-link:hover::after,
.nav-link.active::after {

  width: 100%;

}


/* =========================================================
   NAV CTA
========================================================= */

.nav-cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 42px;

  padding: 0 20px;

  border-radius: 6px;

  background: var(--vaspe-green);

  color: var(--white);

  font-size: 13px;

  font-weight: 700;

  white-space: nowrap;

  transition:
    background var(--transition-fast),
    transform var(--transition-fast);

}


.nav-cta:hover {

  background: #009b4b;

  transform: translateY(-2px);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-toggle {

  display: none;

  width: 44px;

  height: 44px;

  border: 0;

  background: transparent;

  cursor: pointer;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 5px;

}


.mobile-menu-toggle span {

  display: block;

  width: 24px;

  height: 2px;

  background: var(--white);

  transition: transform var(--transition-fast);

}


/* =========================================================
   MOBILE NAV
========================================================= */

.mobile-nav {

  display: none;

}


/* =========================================================
   06. HERO
========================================================= */

.hero {

  position: relative;

  min-height: 100vh;

  height: 100svh;

  max-height: 960px;

  overflow: hidden;

  background: var(--dark);

}


/* =========================================================
   HERO SLIDER
========================================================= */

.hero-slider {

  position: absolute;

  inset: 0;

}


.hero-slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;

}


.hero-slide.active {

  opacity: 1;

  visibility: visible;

}


/* =========================================================
   HERO IMAGE
========================================================= */

.hero-slide-bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  transform: scale(1.04);

  transition:
    transform 7s ease;

}


.hero-slide.active .hero-slide-bg {

  transform: scale(1);

}


/* =========================================================
   HERO OVERLAY
========================================================= */

.hero-overlay {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.52) 40%,
      rgba(0, 0, 0, 0.16) 75%,
      rgba(0, 0, 0, 0.12) 100%),

    linear-gradient(0deg,
      rgba(0, 0, 0, 0.65) 0%,
      transparent 45%);

}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-container {

  position: relative;

  z-index: 5;

  height: 100%;

  display: flex;

  align-items: center;

}


.hero-content {

  max-width: 760px;

  padding-top: 70px;

  color: var(--white);

}


.hero-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 18px;

  color: #dce8e1;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.18em;

}


.hero-eyebrow::before {

  content: "";

  width: 32px;

  height: 2px;

  background: var(--vaspe-gold);

}


.hero-content h1 {

  max-width: 850px;

  margin-bottom: 24px;

  font-family: var(--font-heading);

  font-size: clamp(44px,
      5.2vw,
      78px);

  line-height: 1.04;

  letter-spacing: -0.045em;

  font-weight: 800;

}


.hero-content p {

  max-width: 650px;

  margin-bottom: 34px;

  color: rgba(255, 255, 255, 0.88);

  font-size: 17px;

  line-height: 1.7;

}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-actions {

  display: flex;

  align-items: center;

  gap: 14px;

}


.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding: 0 24px;

  border-radius: 5px;

  font-size: 13px;

  font-weight: 700;

  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);

}


.btn:hover {

  transform: translateY(-2px);

}


.btn-primary {

  background: var(--vaspe-green);

  color: var(--white);

}


.btn-primary:hover {

  background: #009b4b;

}


.btn-outline {

  border: 1px solid rgba(255, 255, 255, 0.7);

  color: var(--white);

  background: rgba(255, 255, 255, 0.03);

}


.btn-outline:hover {

  border-color: var(--white);

  background: rgba(255, 255, 255, 0.10);

}


/* =========================================================
   HERO ARROWS
========================================================= */

.hero-arrow {

  position: absolute;

  top: 50%;

  z-index: 20;

  transform: translateY(-50%);

  width: 48px;

  height: 48px;

  border: 1px solid rgba(255, 255, 255, 0.45);

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.18);

  color: var(--white);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  backdrop-filter: blur(5px);

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);

}


.hero-arrow:hover {

  background: var(--vaspe-green);

  border-color: var(--vaspe-green);

}


.hero-arrow span {

  font-size: 20px;

  line-height: 1;

}


.hero-arrow-prev {

  left: 30px;

}


.hero-arrow-next {

  right: 30px;

}


/* =========================================================
   HERO BOTTOM
========================================================= */

.hero-bottom {

  position: absolute;

  left: 50%;

  bottom: 0;

  z-index: 30;

  width: min(calc(100% - 80px),
      var(--container-width));

  transform: translateX(-50%);

  padding-bottom: 28px;

}


/* =========================================================
   SLIDE LABELS
========================================================= */

.hero-slide-labels {

  display: grid;

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

  gap: 0;

}


.hero-slide-label {

  position: relative;

  min-height: 54px;

  padding: 12px 20px;

  border: 0;

  border-top: 1px solid rgba(255, 255, 255, 0.28);

  background: transparent;

  color: rgba(255, 255, 255, 0.62);

  text-align: left;

  font-size: 11px;

  line-height: 1.35;

  cursor: pointer;

  transition: color var(--transition-fast);

}


.hero-slide-label span {

  display: inline-block;

  margin-right: 10px;

  color: var(--vaspe-gold);

  font-weight: 700;

}


.hero-slide-label.active {

  color: var(--white);

}


.hero-slide-label.active::before {

  content: "";

  position: absolute;

  top: -2px;

  left: 0;

  width: 42px;

  height: 3px;

  background: var(--vaspe-green);

}


/* =========================================================
   HERO PROGRESS
========================================================= */

.hero-progress {

  position: relative;

  width: 100%;

  height: 2px;

  background: rgba(255, 255, 255, 0.12);

  overflow: hidden;

}


.hero-progress-bar {

  display: block;

  width: 20%;

  height: 100%;

  background: var(--vaspe-green);

  transition: width 0.5s ease;

}


/* =========================================================
   FUTURE SECTION PLACEHOLDERS
========================================================= */

.page-section-placeholder {

  min-height: 1px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  :root {

    --nav-height: 74px;

  }


  .nav-container,
  .hero-container {

    width: min(calc(100% - 48px),
        var(--container-width));

  }


  .main-nav {

    gap: 17px;

  }


  .nav-link {

    font-size: 12px;

  }


  .nav-cta {

    padding-inline: 15px;

  }


  .hero-content h1 {

    font-size: clamp(42px,
        6vw,
        64px);

  }


  .hero-slide-label {

    padding-inline: 10px;

  }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

  .main-nav {

    display: none;

  }


  .nav-cta {

    display: none;

  }


  .mobile-menu-toggle {

    display: flex;

  }


  /* MOBILE NAV */

  .mobile-nav {

    position: absolute;

    top: var(--nav-height);

    left: 0;

    width: 100%;

    display: flex;

    flex-direction: column;

    padding: 15px 24px 25px;

    background: rgba(4, 20, 12, 0.98);

    transform:
      translateY(-120%);

    opacity: 0;

    pointer-events: none;

    transition:
      transform var(--transition-medium),
      opacity var(--transition-medium);

  }


  .mobile-nav.open {

    transform: translateY(0);

    opacity: 1;

    pointer-events: auto;

  }


  .mobile-nav-link {

    padding: 14px 0;

    color: var(--white);

    font-size: 15px;

    font-weight: 600;

    border-bottom:
      1px solid rgba(255, 255, 255, 0.08);

  }


  .mobile-nav-mobile-cta {

    margin-top: 18px;

    padding: 13px 20px;

    border-radius: 5px;

    background: var(--vaspe-green);

    color: var(--white);

    text-align: center;

    font-size: 14px;

    font-weight: 700;

  }


  .hero-slide-labels {

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

  }


  .hero-slide-label:nth-child(n+4) {

    display: none;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  :root {

    --nav-height: 68px;

  }


  .nav-container {

    width: calc(100% - 36px);

  }


  .brand-logo img {

    width: 76px;

  }


  .hero {

    min-height: 760px;

    height: 100svh;

  }


  .hero-container {

    width: calc(100% - 36px);

    align-items: center;

  }


  .hero-content {

    padding-top: 50px;

    padding-bottom: 145px;

  }


  .hero-eyebrow {

    margin-bottom: 15px;

    font-size: 10px;

    letter-spacing: 0.14em;

  }


  .hero-eyebrow::before {

    width: 22px;

  }


  .hero-content h1 {

    margin-bottom: 18px;

    font-size: clamp(38px,
        11vw,
        52px);

    line-height: 1.05;

    letter-spacing: -0.04em;

  }


  .hero-content p {

    margin-bottom: 25px;

    font-size: 14px;

    line-height: 1.65;

  }


  .hero-actions {

    flex-direction: column;

    align-items: stretch;

    gap: 10px;

    max-width: 230px;

  }


  .btn {

    width: 100%;

    min-height: 46px;

  }


  .hero-arrow {

    width: 40px;

    height: 40px;

  }


  .hero-arrow-prev {

    left: 12px;

  }


  .hero-arrow-next {

    right: 12px;

  }


  .hero-bottom {

    width: calc(100% - 36px);

    padding-bottom: 18px;

  }


  .hero-slide-labels {

    display: flex;

  }


  .hero-slide-label {

    flex: 1;

    min-height: 42px;

    padding:
      10px 5px;

    font-size: 0;

    text-align: center;

  }


  .hero-slide-label span {

    margin: 0;

    font-size: 11px;

  }


  .hero-slide-label:nth-child(n+4) {

    display: none;

  }


  .hero-slide-label.active::before {

    left: 50%;

    transform: translateX(-50%);

    width: 25px;

  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

  .hero-content h1 {

    font-size: 36px;

  }


  .hero-content p {

    font-size: 13px;

  }


  .hero-arrow {

    display: none;

  }

}

/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section {
    position: relative;
    background: #f5f5f2;
    padding: 130px 0 120px;
    overflow: hidden;
}


.about-container {
    width: min(1400px, 90%);
    margin: 0 auto;
}



/* =========================================================
   SECTION INTRO
========================================================= */

.about-intro {
    display: grid;
    grid-template-columns: 0.9fr 1.5fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 90px;
}


.section-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8c7a35;
    margin-bottom: 20px;
}


.about-title {
    margin: 0;
    font-size: clamp(42px, 5vw, 76px);
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -0.045em;
    color: #171717;
}


.about-title span {
    color: #777;
}


.about-description {
    max-width: 680px;
}


.about-description p {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.75;
    color: #555;
}


.about-description p:last-child {
    margin-bottom: 0;
}



/* =========================================================
   VASPE GROUP MARK
========================================================= */

.about-group-mark {
    margin-bottom: 55px;
}


.group-mark-inner {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}


.group-mark-letter {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 130px;

    font-size: clamp(45px, 6vw, 82px);
    font-weight: 800;

    color: #171717;
    background: #ffffff;

    border-right: 1px solid #deded9;
}


.group-mark-letter:first-child {
    border-radius: 8px 0 0 8px;
}


.group-mark-letter:last-child {
    border-right: none;
    border-radius: 0 8px 8px 0;
}


.group-mark-caption {
    margin-top: 14px;

    text-align: center;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #888;
}



/* =========================================================
   COMPANY GRID
========================================================= */

.company-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}



/* =========================================================
   COMPANY CARD
========================================================= */

.company-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 430px;

    padding: 25px;

    background: #ffffff;

    border: 1px solid #e3e3df;
    border-radius: 8px;

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.company-card:hover {
    transform: translateY(-8px);

    border-color: #c5b56b;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.08);
}



/* =========================================================
   CARD TOP
========================================================= */

.company-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    min-height: 90px;
}


.company-letter {
    font-size: 54px;
    line-height: 1;
    font-weight: 800;
    color: #ded7b7;
}


.company-logo {
    width: 90px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.company-logo img {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}



/* =========================================================
   CARD CONTENT
========================================================= */

.company-card-content {
    margin-top: 30px;
}


.company-index {
    margin-bottom: 12px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;

    color: #9b8a48;
}


.company-card h3 {
    margin: 0 0 16px;

    font-size: 22px;
    line-height: 1.15;

    letter-spacing: -0.025em;

    color: #171717;
}


.company-card p {
    margin: 0;

    font-size: 14px;
    line-height: 1.65;

    color: #666;
}



/* =========================================================
   CARD FOOTER
========================================================= */

.company-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: auto;
    padding-top: 25px;

    border-top: 1px solid #eeeeea;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;

    color: #999;
}


.company-arrow {
    font-size: 18px;
    color: #9b8a48;

    transition: transform 0.3s ease;
}


.company-card:hover .company-arrow {
    transform: translate(3px, -3px);
}



/* =========================================================
   CLOSING STATEMENT
========================================================= */

.about-closing {
    display: grid;
    grid-template-columns: 80px 1fr;

    gap: 30px;

    max-width: 850px;

    margin: 80px auto 0;
}


.about-closing-line {
    width: 50px;
    height: 2px;

    margin-top: 12px;

    background: #9b8a48;
}


.about-closing p {
    margin: 0;

    font-size: 18px;
    line-height: 1.7;

    color: #555;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .about-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }


    .about-description {
        max-width: 800px;
    }


    .company-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .company-card {
        min-height: 390px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .about-section {
        padding: 85px 0 80px;
    }


    .about-container {
        width: 88%;
    }


    .about-intro {
        margin-bottom: 60px;
    }


    .about-title {
        font-size: clamp(42px, 12vw, 58px);
    }


    .about-description p {
        font-size: 15px;
        line-height: 1.7;
    }


    /* GROUP LETTERS */

    .group-mark-inner {
        max-width: 100%;
    }


    .group-mark-letter {
        min-height: 75px;

        font-size: 30px;
    }


    .group-mark-caption {
        font-size: 8px;
    }


    /* COMPANY GRID */

    .company-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    .company-card {
        min-height: 360px;
        padding: 22px;
    }


    .company-card-top {
        min-height: 80px;
    }


    .company-letter {
        font-size: 46px;
    }


    .company-card h3 {
        font-size: 21px;
    }


    .company-card p {
        font-size: 14px;
    }


    /* CLOSING */

    .about-closing {
        grid-template-columns: 40px 1fr;
        gap: 15px;

        margin-top: 60px;
    }


    .about-closing-line {
        width: 30px;
    }


    .about-closing p {
        font-size: 16px;
        line-height: 1.65;
    }

}



/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 400px) {

    .about-section {
        padding-top: 70px;
    }


    .group-mark-letter {
        min-height: 65px;
        font-size: 25px;
    }


    .company-card {
        min-height: 340px;
    }

}

/* =========================================================
   GROUP CEO SECTION
========================================================= */

.ceo-section {
    position: relative;

    padding: 140px 0;

    background: #171717;

    color: #ffffff;

    overflow: hidden;
}


.ceo-container {
    width: min(1400px, 90%);

    margin: 0 auto;
}



/* =========================================================
   SECTION LABEL
========================================================= */

.ceo-section-label {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 75px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: #a9a9a9;
}


.ceo-section-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border: 1px solid #555;

    border-radius: 50%;

    font-size: 9px;

    color: #c8b66c;
}



/* =========================================================
   MAIN LAYOUT
========================================================= */

.ceo-layout {

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 110px;

    align-items: center;
}



/* =========================================================
   CEO IMAGE
========================================================= */

.ceo-image-wrapper {

    position: relative;

    padding-bottom: 45px;
}


.ceo-image {

    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #292929;
}


.ceo-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,0.35),
            transparent 35%
        );

    pointer-events: none;
}


.ceo-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}



/* =========================================================
   IMAGE CAPTION
========================================================= */

.ceo-image-caption {

    position: absolute;

    bottom: 0;

    left: 0;

    display: flex;

    align-items: center;

    gap: 14px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.18em;

    color: #888;
}


.ceo-caption-line {

    display: block;

    width: 42px;

    height: 1px;

    background: #a8924a;
}



/* =========================================================
   CEO CONTENT
========================================================= */

.ceo-content {

    max-width: 720px;
}


.ceo-eyebrow {

    margin-bottom: 28px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.18em;

    color: #a8924a;
}


.ceo-title {

    margin: 0;

    max-width: 650px;

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

    line-height: 0.98;

    letter-spacing: -0.045em;

    font-weight: 700;
}


.ceo-title span {

    color: #a8924a;
}



/* =========================================================
   QUOTE
========================================================= */

.ceo-quote-mark {

    margin-top: 45px;

    margin-bottom: -5px;

    font-family: Georgia, serif;

    font-size: 80px;

    line-height: 0.5;

    color: #a8924a;

    opacity: 0.8;
}


.ceo-message {

    max-width: 650px;
}


.ceo-message p {

    margin: 0 0 20px;

    font-size: 16px;

    line-height: 1.8;

    color: #b8b8b8;
}


.ceo-message p:last-child {

    margin-bottom: 0;

    color: #ffffff;

}



/* =========================================================
   CEO SIGNATURE
========================================================= */

.ceo-signature {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 45px;
}


.ceo-signature-line {

    width: 45px;

    height: 1px;

    background: #a8924a;
}


.ceo-signature strong {

    display: block;

    margin-bottom: 5px;

    font-size: 11px;

    letter-spacing: 0.15em;

    color: #ffffff;
}


.ceo-signature span {

    display: block;

    font-size: 9px;

    letter-spacing: 0.14em;

    color: #777;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .ceo-section {

        padding: 110px 0;

    }


    .ceo-layout {

        grid-template-columns: 0.8fr 1.2fr;

        gap: 60px;

    }


    .ceo-title {

        font-size: clamp(42px, 6vw, 64px);

    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .ceo-section {

        padding: 85px 0;

    }


    .ceo-container {

        width: 88%;

    }


    .ceo-section-label {

        margin-bottom: 50px;

    }


    .ceo-layout {

        grid-template-columns: 1fr;

        gap: 55px;

    }


    /* IMAGE */

    .ceo-image-wrapper {

        width: 88%;

        padding-bottom: 35px;

    }


    .ceo-image {

        aspect-ratio: 4 / 5;

    }


    /* CONTENT */

    .ceo-content {

        max-width: none;

    }


    .ceo-eyebrow {

        font-size: 9px;

        margin-bottom: 20px;

    }


    .ceo-title {

        font-size: clamp(42px, 12vw, 58px);

        line-height: 0.98;

    }


    .ceo-quote-mark {

        margin-top: 38px;

        font-size: 65px;

    }


    .ceo-message p {

        font-size: 15px;

        line-height: 1.75;

    }


    .ceo-signature {

        margin-top: 35px;

    }

}



/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 400px) {

    .ceo-section {

        padding: 70px 0;

    }


    .ceo-image-wrapper {

        width: 100%;

    }


    .ceo-title {

        font-size: 40px;

    }

}

/* =========================================================
   SUSTAINABILITY / ESG
========================================================= */

.sustainability-section {
    position: relative;

    /*
       Compact band — NOT a full-height section
    */
    min-height: 175px;

    padding: 24px 0 28px;

    background:
        linear-gradient(
            rgba(5, 48, 31, 0.88),
            rgba(5, 48, 31, 0.88)
        ),
        url("assets/hompage/vaspe-sustainability-background.webp") center / cover no-repeat;

    color: #ffffff;

    overflow: hidden;
}


/*
   Subtle green texture when no background image
   is available yet.
*/
.sustainability-section::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(40, 100, 65, 0.35),
            transparent 45%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(40, 100, 65, 0.25),
            transparent 40%
        );

    pointer-events: none;
}


.sustainability-container {
    position: relative;

    z-index: 2;

    width: min(1400px, 90%);

    margin: 0 auto;
}



/* =========================================================
   HEADER
========================================================= */

.sustainability-header {
    text-align: center;

    margin-bottom: 17px;
}


.sustainability-eyebrow {
    margin-bottom: 4px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #c9ad43;
}


.sustainability-title {
    margin: 0;

    font-size: clamp(23px, 2.2vw, 31px);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -0.025em;

    color: #ffffff;
}



/* =========================================================
   ESG GRID
========================================================= */

.esg-grid {
    display: grid;

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

    max-width: 1100px;

    margin: 0 auto;
}



/* =========================================================
   ESG CARD
========================================================= */

.esg-card {
    display: grid;

    grid-template-columns: 48px 1fr;

    column-gap: 14px;

    align-items: center;

    min-height: 65px;

    padding: 0 28px;

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


.esg-card:first-child {
    padding-left: 0;
}


.esg-card:last-child {
    border-right: none;

    padding-right: 0;
}



/* =========================================================
   ICON
========================================================= */

.esg-icon {
    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(201, 173, 67, 0.75);

    border-radius: 50%;
}


.esg-icon svg {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: #d2b84d;

    stroke-width: 1.35;

    stroke-linecap: round;

    stroke-linejoin: round;
}



/* =========================================================
   CARD CONTENT
========================================================= */

.esg-card-content {
    min-width: 0;
}


.esg-card h3 {
    margin: 0 0 4px;

    font-size: 13px;

    line-height: 1.2;

    font-weight: 700;

    color: #ffffff;
}


.esg-card p {
    margin: 0;

    max-width: 270px;

    font-size: 9px;

    line-height: 1.45;

    color: rgba(255, 255, 255, 0.78);
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .sustainability-section {
        min-height: auto;

        padding: 30px 0;
    }


    .esg-card {
        padding: 0 18px;
    }


    .esg-card:first-child {
        padding-left: 0;
    }


    .esg-card:last-child {
        padding-right: 0;
    }


    .esg-card p {
        font-size: 10px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .sustainability-section {
        padding: 35px 0 32px;
    }


    .sustainability-container {
        width: 88%;
    }


    .sustainability-header {
        margin-bottom: 28px;
    }


    .sustainability-eyebrow {
        font-size: 8px;
    }


    .sustainability-title {
        font-size: 25px;
    }


    /*
       Stack the three pillars on mobile.
    */

    .esg-grid {
        display: flex;

        flex-direction: column;

        gap: 0;

        max-width: 100%;
    }


    .esg-card,
    .esg-card:first-child,
    .esg-card:last-child {
        display: grid;

        grid-template-columns: 48px 1fr;

        min-height: 80px;

        padding: 16px 0;

        border-right: none;

        border-bottom: 1px solid
            rgba(255, 255, 255, 0.2);
    }


    .esg-card:last-child {
        border-bottom: none;
    }


    .esg-icon {
        width: 42px;
        height: 42px;
    }


    .esg-icon svg {
        width: 21px;
        height: 21px;
    }


    .esg-card h3 {
        font-size: 13px;
    }


    .esg-card p {
        max-width: none;

        font-size: 10px;

        line-height: 1.5;
    }

}

/* =========================================================
   RECENT PROJECT SHOWCASE HEADING
========================================================= */

.recent-project-heading {

    width: calc(100% - 80px);

    max-width: 1400px;

    margin-left: auto;
    margin-right: auto;

    margin-bottom: 55px;

}

/* =========================================================
   TOP LINE
========================================================= */

.recent-project-heading-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom:
        20px;

    margin-top:
        20px;

    border-bottom:
        1px solid
        rgba(16, 41, 29, 0.15);

}


.recent-project-count {

    color:
        #718078;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

}


/* =========================================================
   MAIN HEADING
========================================================= */

.recent-project-heading-main {

    display: grid;

    grid-template-columns:
        1.2fr 0.8fr;

    gap:
        80px;

    align-items:
        end;

    padding-top:
        38px;

}


.recent-project-heading h2 {

    margin: 0;

    max-width:
        720px;

    color:
        #10291d;

    font-size:
        clamp(48px, 6vw, 88px);

    font-weight:
        500;

    line-height:
        0.95;

    letter-spacing:
        -0.05em;

}


.recent-project-heading h2 span {

    display: block;

    color:
        #168344;

}


.recent-project-heading p {

    margin: 0 0 6px;

    max-width:
        400px;

    color:
        #68736c;

    font-size:
        15px;

    line-height:
        1.8;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .recent-project-heading-main {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .recent-project-heading,
    .project-showcase {

        width: calc(100% - 40px);

    }

}

/* =========================================================
   INTERACTIVE PROJECT SHOWCASE
========================================================= */

.project-showcase {

    position: relative;

    width: calc(100% - 80px);

    max-width: 1400px;

    margin-left: auto;
    margin-right: auto;

}



/* =========================================================
   FEATURED IMAGE
========================================================= */

.project-featured {
    position: relative;

    width: 100%;

    height: min(65vw, 720px);

    min-height: 520px;

    overflow: hidden;

    background: #10291d;

    border-radius: 4px;
}


.project-featured-image {
    display: block;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.project-featured-image img {
    transition:
        opacity 0.35s ease,
        transform 0.7s cubic-bezier(
            0.2,
            0.65,
            0.3,
            1
        );
}


.project-featured-image img.is-changing {
    opacity: 0;
}


.project-featured:hover
.project-featured-image img {
    transform: scale(1.02);
}



/* =========================================================
   IMAGE OVERLAY
========================================================= */

.project-featured::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.25),
            transparent 35%,
            transparent 55%,
            rgba(0, 0, 0, 0.55)
        );
}



/* =========================================================
   FEATURED IMAGE INFO
========================================================= */

.featured-image-info {
    position: absolute;

    z-index: 3;

    left: 28px;
    bottom: 28px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: #ffffff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.14em;
}


.featured-image-line {
    width: 40px;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.7);
}



/* =========================================================
   VIEW IMAGE BUTTON
========================================================= */

.featured-view-button {
    position: absolute;

    z-index: 4;

    right: 28px;
    bottom: 28px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 15px;

    border: 1px solid
        rgba(255, 255, 255, 0.45);

    background:
        rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(8px);

    color: #ffffff;

    cursor: pointer;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.12em;

    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}


.featured-view-button:hover {
    background:
        #ffffff;

    border-color:
        #ffffff;

    color:
        #10291d;
}


.featured-view-icon {
    font-size: 15px;

    line-height: 1;
}



/* =========================================================
   FEATURED NAVIGATION
========================================================= */

.featured-nav {
    position: absolute;

    z-index: 4;

    top: 50%;

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid
        rgba(255, 255, 255, 0.4);

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(6px);

    color: #ffffff;

    cursor: pointer;

    font-size: 20px;

    transform:
        translateY(-50%);

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.featured-nav:hover {
    background:
        rgba(255, 255, 255, 0.18);
}


.featured-nav-prev {
    left: 25px;
}


.featured-nav-next {
    right: 25px;
}



/* =========================================================
   THUMBNAILS
========================================================= */

.project-thumbnails {
    display: grid;

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

    gap: 8px;

    margin-top: 10px;
}


.project-thumbnail {
    position: relative;

    height: 140px;

    padding: 0;

    border: 0;

    overflow: hidden;

    background: #dfe3de;

    cursor: pointer;

    opacity: 0.65;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


.project-thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


.project-thumbnail::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        rgba(16, 41, 29, 0.25);

    transition:
        background 0.3s ease;
}


.project-thumbnail:hover {
    opacity: 1;

    transform:
        translateY(-3px);
}


.project-thumbnail:hover img {
    transform:
        scale(1.06);
}


.project-thumbnail.active {
    opacity: 1;

    outline:
        3px solid #168344;

    outline-offset: -3px;
}


.project-thumbnail.active::after {
    background:
        rgba(16, 41, 29, 0);
}



/* =========================================================
   THUMBNAIL NUMBER
========================================================= */

.thumbnail-number {
    position: absolute;

    z-index: 2;

    left: 10px;
    bottom: 9px;

    color: #ffffff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.1em;
}



/* =========================================================
   PROJECT FOOTER
========================================================= */

.project-gallery-end {
    display: grid;

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

    align-items: center;

    gap: 20px;

    margin-top: 20px;

    padding-top: 17px;

    border-top:
        1px solid rgba(
            16,
            41,
            29,
            0.15
        );

    color: #747b76;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.16em;
}


.project-gallery-end span:last-child {
    text-align: right;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .project-featured {
        min-height: 460px;
    }


    .project-thumbnails {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .project-thumbnail {
        height: 180px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .project-featured {
        height: 65vh;

        min-height: 430px;

        max-height: 600px;

        border-radius: 2px;
    }


    .featured-image-info {
        left: 18px;
        bottom: 18px;
    }


    .featured-view-button {
        right: 18px;
        bottom: 18px;

        padding: 11px 12px;
    }


    .featured-nav {
        width: 42px;
        height: 42px;

        font-size: 16px;
    }


    .featured-nav-prev {
        left: 12px;
    }


    .featured-nav-next {
        right: 12px;
    }



    /* -----------------------------------------
       HORIZONTAL THUMBNAIL SCROLL
    ----------------------------------------- */

    .project-thumbnails {

        display: flex;

        overflow-x: auto;

        gap: 7px;

        padding-bottom: 5px;

        scrollbar-width: none;
    }


    .project-thumbnails::-webkit-scrollbar {
        display: none;
    }


    .project-thumbnail {

        flex:
            0 0 135px;

        height: 100px;
    }


    .project-gallery-end {

        grid-template-columns:
            1fr auto;

        margin-top: 15px;

        font-size: 7px;
    }


    .project-gallery-end span:nth-child(2) {
        display: none;
    }

}

/* =========================================================
   PROJECT LIGHTBOX
========================================================= */

.project-lightbox {
    position: fixed;

    z-index: 9999;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    visibility: hidden;

    opacity: 0;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.project-lightbox.open {
    visibility: visible;

    opacity: 1;
}


.project-lightbox-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(5, 12, 8, 0.94);

    backdrop-filter:
        blur(8px);
}


.project-lightbox-content {
    position: relative;

    z-index: 2;

    width: min(
        1200px,
        90vw
    );

    height: min(
        800px,
        85vh
    );

    display: flex;

    align-items: center;
    justify-content: center;
}


.lightbox-image-wrap {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;
}


.lightbox-image-wrap img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    transition:
        opacity 0.25s ease;
}



/* =========================================================
   CLOSE BUTTON
========================================================= */

.lightbox-close {
    position: fixed;

    z-index: 5;

    top: 28px;
    right: 32px;

    width: 48px;
    height: 48px;

    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.3
        );

    border-radius: 50%;

    background:
        transparent;

    color: #ffffff;

    cursor: pointer;

    font-size: 30px;

    line-height: 1;

    transition:
        background 0.25s ease;
}


.lightbox-close:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.12
        );
}



/* =========================================================
   LIGHTBOX NAVIGATION
========================================================= */

.lightbox-nav {
    position: fixed;

    z-index: 5;

    top: 50%;

    width: 55px;
    height: 55px;

    border: 1px solid
        rgba(
            255,
            255,
            255,
            0.3
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    color: #ffffff;

    cursor: pointer;

    font-size: 22px;

    transform:
        translateY(-50%);

    transition:
        background 0.25s ease;
}


.lightbox-nav:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.15
        );
}


.lightbox-prev {
    left: 30px;
}


.lightbox-next {
    right: 30px;
}



/* =========================================================
   LIGHTBOX COUNTER
========================================================= */

.lightbox-counter {
    position: fixed;

    z-index: 5;

    left: 50%;
    bottom: 28px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #ffffff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.16em;

    transform:
        translateX(-50%);
}


.lightbox-counter-line {
    width: 30px;
    height: 1px;

    background:
        rgba(
            255,
            255,
            255,
            0.45
        );
}



/* =========================================================
   MOBILE LIGHTBOX
========================================================= */

@media (max-width: 700px) {

    .project-lightbox-content {

        width: 100vw;

        height: 75vh;
    }


    .lightbox-close {

        top: 18px;
        right: 18px;

        width: 42px;
        height: 42px;

        font-size: 25px;
    }


    .lightbox-nav {

        width: 42px;
        height: 42px;

        font-size: 17px;
    }


    .lightbox-prev {
        left: 12px;
    }


    .lightbox-next {
        right: 12px;
    }


    .lightbox-counter {

        bottom: 22px;
    }

}


/* =========================================================
   WHO WE SERVE / CLIENTS
========================================================= */

.clients-section {

    position: relative;

    padding:
        140px 0;

    background:
        #f5f6f2;

    overflow: hidden;

}


.clients-container {

    width:
        min(1320px, calc(100% - 80px));

    margin:
        0 auto;

}



/* =========================================================
   HEADER
========================================================= */

.clients-header {

    margin-bottom:
        70px;

}


.clients-header-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom:
        22px;

    border-bottom:
        1px solid
        rgba(16, 41, 29, 0.14);

}


.clients-count {

    color:
        #718078;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

}


.clients-heading-row {

    display: grid;

    grid-template-columns:
        1.4fr 0.6fr;

    gap:
        80px;

    align-items:
        end;

    padding-top:
        40px;

}


.clients-title {

    margin: 0;

    max-width:
        760px;

    color:
        #10291d;

    font-size:
        clamp(
            48px,
            6vw,
            92px
        );

    font-weight:
        500;

    line-height:
        0.95;

    letter-spacing:
        -0.05em;

}


.clients-title span {

    display: block;

    color:
        #168344;

}


.clients-intro-text {

    margin: 0 0 8px;

    max-width:
        400px;

    color:
        #667069;

    font-size:
        15px;

    line-height:
        1.8;

}



/* =========================================================
   CLIENT SECTORS GRID
========================================================= */

.client-sectors {

    display: grid;

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

    border-top:
        1px solid
        rgba(16, 41, 29, 0.15);

    border-left:
        1px solid
        rgba(16, 41, 29, 0.15);

}



/* =========================================================
   CLIENT CARD
========================================================= */

.client-sector {

    position: relative;

    min-height:
        390px;

    display: flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        30px;

    border-right:
        1px solid
        rgba(16, 41, 29, 0.15);

    border-bottom:
        1px solid
        rgba(16, 41, 29, 0.15);

    background:
        transparent;

    overflow: hidden;

    transition:
        background 0.4s ease,
        color 0.4s ease;

}



/* GREEN HOVER BACKGROUND */

.client-sector::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        #10291d;

    transform:
        translateY(101%);

    transition:
        transform
        0.5s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.client-sector:hover::before {

    transform:
        translateY(0);

}



/* Keep content above background */

.client-sector > * {

    position: relative;

    z-index: 2;

}



/* =========================================================
   NUMBER
========================================================= */

.client-sector-number {

    color:
        #8a948e;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    transition:
        color 0.3s ease;

}


.client-sector:hover
.client-sector-number {

    color:
        rgba(255,255,255,0.55);

}



/* =========================================================
   CONTENT
========================================================= */

.client-sector-content {

    max-width:
        430px;

}


.client-sector-icon {

    width:
        42px;

    height:
        42px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom:
        35px;

    border:
        1px solid
        rgba(16, 41, 29, 0.2);

    border-radius:
        50%;

    color:
        #168344;

    font-size:
        18px;

    transition:
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

}


.client-sector:hover
.client-sector-icon {

    border-color:
        rgba(255,255,255,0.4);

    color:
        #ffffff;

    transform:
        rotate(45deg);

}


.client-sector h3 {

    margin:
        0 0 18px;

    color:
        #10291d;

    font-size:
        clamp(
            28px,
            3vw,
            46px
        );

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -0.04em;

    transition:
        color 0.3s ease;

}


.client-sector p {

    margin: 0;

    max-width:
        380px;

    color:
        #6d7770;

    font-size:
        14px;

    line-height:
        1.7;

    transition:
        color 0.3s ease;

}


.client-sector:hover h3 {

    color:
        #ffffff;

}


.client-sector:hover p {

    color:
        rgba(255,255,255,0.65);

}



/* =========================================================
   LOGO AREA
========================================================= */

..client-sector-logos {
    display: flex;
    align-items: center;
    min-height: 35px;
    margin-top: 30px;
}

.client-sector-logos img {
    width: 100px !important;
    max-width: none !important;
    height: auto !important;
}

.client-sector-logos span {

    color:
        #8a948e;

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    transition:
        color 0.3s ease;

}


.client-sector:hover
.client-sector-logos span {

    color:
        rgba(255,255,255,0.5);

}



/* =========================================================
   LAST CARD
========================================================= */

.client-sector--wide {

    grid-column:
        span 2;

    min-height:
        330px;

}


.client-sector--wide
.client-sector-content {

    max-width:
        600px;

}



/* =========================================================
   CLIENT FOOTER
========================================================= */

.clients-footer {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        80px;

    margin-top:
        70px;

}


.clients-footer-line {

    width:
        100%;

    height:
        1px;

    margin-top:
        14px;

    background:
        rgba(16, 41, 29, 0.2);

}


.clients-footer p {

    margin: 0;

    max-width:
        560px;

    color:
        #566159;

    font-size:
        17px;

    line-height:
        1.7;

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .clients-section {

        padding:
            100px 0;

    }


    .clients-heading-row {

        grid-template-columns:
            1fr;

        gap:
            30px;

    }


    .client-sector {

        min-height:
            350px;

    }


    .clients-footer {

        gap:
            40px;

    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .clients-section {

        padding:
            80px 0;

    }


    .clients-container {

        width:
            min(
                calc(100% - 40px),
                1320px
            );

    }


    .clients-header {

        margin-bottom:
            45px;

    }


    .clients-heading-row {

        padding-top:
            28px;

    }


    .clients-title {

        font-size:
            clamp(
                42px,
                13vw,
                64px
            );

    }


    .clients-intro-text {

        font-size:
            14px;

    }



    /* ONE COLUMN */

    .client-sectors {

        grid-template-columns:
            1fr;

    }


    .client-sector {

        min-height:
            310px;

        padding:
            25px;

    }


    .client-sector--wide {

        grid-column:
            auto;

        min-height:
            310px;

    }


    .client-sector-icon {

        margin-bottom:
            25px;

    }


    .client-sector h3 {

        font-size:
            36px;

    }



    /* FOOTER */

    .clients-footer {

        grid-template-columns:
            1fr;

        gap:
            25px;

        margin-top:
            50px;

    }


    .clients-footer-line {

        display:
            none;

    }


    .clients-footer p {

        font-size:
            15px;

    }

}

/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-section {

    position: relative;

    padding:
        110px 0 45px;

    background:
        #10291d;

    color:
        #ffffff;

    overflow: hidden;

}


.contact-container {

    width:
        min(1320px, calc(100% - 80px));

    margin:
        0 auto;

}



/* =========================================================
   TOP BAR
========================================================= */

.contact-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom:
        22px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.16);

}


.contact-eyebrow,
.contact-status {

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

}


.contact-eyebrow {

    color:
        #ffffff;

}


.contact-status {

    display: flex;

    align-items: center;

    gap:
        9px;

    color:
        rgba(255, 255, 255, 0.55);

}


.contact-status::before {

    content: "";

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #37a764;

    box-shadow:
        0 0 0 5px
        rgba(55, 167, 100, 0.12);

}



/* =========================================================
   MAIN AREA
========================================================= */

.contact-main {

    display: grid;

    grid-template-columns:
        1.25fr 0.75fr;

    gap:
        100px;

    padding:
        90px 0;

    align-items:
        end;

}


.contact-heading h2 {

    margin: 0;

    max-width:
        850px;

    font-size:
        clamp(58px, 8vw, 120px);

    font-weight:
        500;

    line-height:
        0.88;

    letter-spacing:
        -0.06em;

}


.contact-heading h2 span {

    display: block;

    color:
        #37a764;

}



/* =========================================================
   CONTACT INTRO
========================================================= */

.contact-intro {

    max-width:
        420px;

}


.contact-intro p {

    margin:
        0 0 35px;

    color:
        rgba(255, 255, 255, 0.65);

    font-size:
        15px;

    line-height:
        1.8;

}



/* =========================================================
   PRIMARY BUTTON
========================================================= */

.contact-primary-button {

    display: inline-flex;

    align-items: center;

    gap:
        35px;

    padding:
        18px 22px;

    background:
        #37a764;

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    transition:
        background 0.3s ease,
        transform 0.3s ease;

}


.contact-primary-button:hover {

    background:
        #ffffff;

    color:
        #10291d;

    transform:
        translateY(-3px);

}


.contact-button-icon {

    font-size:
        18px;

}



/* =========================================================
   CONTACT OPTIONS
========================================================= */

.contact-options {

    border-top:
        1px solid
        rgba(255, 255, 255, 0.16);

}


.contact-option {

    position: relative;

    display: grid;

    grid-template-columns:
        0.7fr 1fr auto;

    align-items: center;

    gap:
        30px;

    min-height:
        100px;

    padding:
        0 20px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.16);

    color:
        #ffffff;

    text-decoration:
        none;

    overflow:
        hidden;

    transition:
        color 0.3s ease;

}


.contact-option::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        #ffffff;

    transform:
        translateX(-101%);

    transition:
        transform
        0.45s cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.contact-option:hover::before {

    transform:
        translateX(0);

}


.contact-option > * {

    position: relative;

    z-index: 2;

}


.contact-option:hover {

    color:
        #10291d;

}


.contact-option-label {

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    color:
        rgba(255, 255, 255, 0.5);

    transition:
        color 0.3s ease;

}


.contact-option:hover
.contact-option-label {

    color:
        #657069;

}


.contact-option-value {

    font-size:
        18px;

    font-weight:
        400;

}


.contact-option-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        42px;

    height:
        42px;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    border-radius:
        50%;

    font-size:
        18px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;

}


.contact-option:hover
.contact-option-arrow {

    transform:
        rotate(45deg);

    border-color:
        rgba(16, 41, 29, 0.3);

}



/* =========================================================
   BOTTOM
========================================================= */

.contact-bottom {

    display: grid;

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

    align-items:
        end;

    gap:
        40px;

    padding-top:
        80px;

}


.contact-group-name {

    display: flex;

    flex-direction:
        column;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.18em;

}


.contact-group-name span:last-child {

    color:
        #37a764;

}


.contact-tagline {

    margin: 0;

    max-width:
        260px;

    color:
        rgba(255, 255, 255, 0.45);

    font-size:
        11px;

    line-height:
        1.6;

}


.back-to-top {

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        52px;

    height:
        52px;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    border-radius:
        50%;

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        20px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

}


.back-to-top:hover {

    background:
        #37a764;

    border-color:
        #37a764;

    transform:
        translateY(-4px);

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .contact-main {

        grid-template-columns:
            1fr;

        gap:
            45px;

        padding:
            75px 0;

    }


    .contact-intro {

        max-width:
            520px;

    }


    .contact-heading h2 {

        font-size:
            clamp(60px, 10vw, 100px);

    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .contact-section {

        padding:
            75px 0 35px;

    }


    .contact-container {

        width:
            calc(100% - 40px);

    }


    .contact-status {

        font-size:
            7px;

    }


    .contact-main {

        padding:
            55px 0;

        gap:
            35px;

    }


    .contact-heading h2 {

        font-size:
            clamp(48px, 15vw, 72px);

        line-height:
            0.92;

    }


    .contact-intro p {

        font-size:
            14px;

    }



    /* CONTACT OPTIONS */

    .contact-option {

        grid-template-columns:
            1fr auto;

        gap:
            10px;

        padding:
            22px 0;

        min-height:
            auto;

    }


    .contact-option-label {

        grid-column:
            1 / -1;

    }


    .contact-option-value {

        font-size:
            15px;

    }


    .contact-option-arrow {

        width:
            38px;

        height:
            38px;

    }



    /* BOTTOM */

    .contact-bottom {

        grid-template-columns:
            1fr auto;

        gap:
            30px;

        padding-top:
            60px;

    }


    .contact-tagline {

        display:
            none;

    }

}