@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body {
  overflow-x: hidden;
}
#hs-web-interactives-top-anchor,
#hs-interactives-modal-overlay {
  max-width: 100vw !important;
  overflow: hidden !important;
}
[id^="hs-"][class*="go"] {
  max-width: 100vw;
}
.header__skip{
  display:none;
}
#main-content > .container-fluid,
#main-content > .blog-post > .container-fluid,
.container-fluid.body-container.body-container--home,
.my-dnd-area{
  padding-left:0;
  padding-right:0;
}
:root {
  --main: #FFF0CB;
  --darkGreen: #003333;
  --turquoise: #2D8888;  
  --lightGreen: #9ED1A3;   
  --bs-body-font-family: 'Rajdhani', sans-serif;
  --bs-body-color: var(--main);
  --br-big:   70px;
  --br-small: 20px;
}

.br-tl { border-radius: var(--br-big) var(--br-small) var(--br-small) var(--br-small); }
.br-tr { border-radius: var(--br-small) var(--br-big) var(--br-small) var(--br-small); }
.br-br { border-radius: var(--br-small) var(--br-small) var(--br-big) var(--br-small); }
.br-bl { border-radius: var(--br-small) var(--br-small) var(--br-small) var(--br-big);   }

.br-tl-br { border-radius: var(--br-big) var(--br-small) var(--br-big) var(--br-small); }
.br-tr-bl { border-radius: var(--br-small) var(--br-big) var(--br-small) var(--br-big);   }

.br-tl-bl { border-radius: var(--br-big) var(--br-small) var(--br-small) var(--br-big);   }
.br-tr-br { border-radius: var(--br-small) var(--br-big) var(--br-big) var(--br-small); }

body{
  font-family:var(--bs-body-font-family);
  font-style:normal;
  font-weight:400;
  background-color:var(--main);
  color:var(--darkGreen);
}
h1, .h1 {
  font-size: 54px;
  font-weight: 500;
}
h2, .h2 {
  font-size: 35px;
  font-weight: 500;
}
p, .lead {
  font-size: 18px;
  font-weight: 400;
}
.img-round{
  border-radius:20px;
}
.btn{
  transition:all 200ms ease-in-out;
  border-radius: 5px;
  font-size:17px;
  text-transform:uppercase;
  font-weight:500;
  letter-spacing:15%;
  padding:10px 30px;
}
.btn:hover{
  text-decoration:none;
}
.btn-cream{
  background: var(--main);
  color:var(--darkGreen);
  &:hover{
    background:var(--darkGreen);
    color:var(--main);
  }
}
.btn-dark-green{
  background: var(--darkGreen);
  color:var(--main);
  &:hover{
    background:var(--main);
    color:var(--darkGreen);
  }
}
.btn-turquoise{
  background: var(--turquoise);
  color:var(--main);
  &:hover{
    background:var(--main);
    color:var(--turquoise);
  }
}
.btn-light-green{
  background: var(--lightGreen);
  color:var(--darkGreen);
  &:hover{
    background:var(--darkGreen);
    color:var(--lightGreen);
  }
}
.sg-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 12px 0;
  transition: all 0.3s ease;
  &.is-scrolled {
    padding: 0;
    background: linear-gradient(180deg, #000000 12.58%, rgba(0, 0, 0, 0) 100%);
  }
  .navbar-nav{
    margin-left: auto;
    margin-right:50px;
    li a.nav-link{
      text-align: center;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: #FFFFFF;
      transition:all 200ms ease-in-out;
      &.active{
        color:var(--main);
      }
      &:hover{
        color:var(--lightGreen);
      }
      &.dropdown-toggle:after{
        border:0;
        width:6px;
        height:6px;
        background-image:url('data:image/svg+xml,<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.174389 4.33813L4.32797 0.175334C4.70144 -0.198968 5.34119 0.0658886 5.34177 0.593524L5.34638 4.75171C5.34675 5.08017 5.08148 5.34603 4.75476 5.34465L0.594825 5.351C0.0671896 5.35159 -0.199084 4.71243 0.174389 4.33813Z" fill="white"/></svg>');
        background-position:bottom right;
        background-size:contain;
        position: absolute;
        bottom: 15px;
      }
    }
  }
  .sg-toggler {
    border: none;
    background: transparent;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    box-shadow: none;
    .sg-toggler-bar {
      display: block;
      width: 24px;
      height: 1px;
      background: var(--main);
      transition: transform 0.25s ease, opacity 0.2s ease;
    }
    &[aria-expanded="true"] .sg-toggler-bar:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }
    &[aria-expanded="true"] .sg-toggler-bar:nth-child(2) {
      opacity: 0;
    }
    &[aria-expanded="true"] .sg-toggler-bar:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }
  }
  @media (max-width: 991.98px) {
    #sgNavCollapse {
      background: rgba(7, 19, 26, 0.98);
      border-top: 0;
      padding: 1rem 0;
      margin-top: 0;
      .navbar-nav{
        margin-right:0;
        .dropdown-menu.show{
          background:transparent;
          li a{
            text-align:center;
          }
        }
      }
      .navbar-text{
        display:block;
        text-align:center;
        margin-top: 40px;
      }
    }
  }
}
.hero-container{
  min-height:50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  &.full{
    min-height:100vh;
  }
  background-size:cover;
  background-position:top center;
  padding-top:150px;
  padding-bottom:100px;
  h1{
    font-weight: 700;
    font-size: 165px;
    line-height: 145px;
    text-transform: uppercase;
    color: var(--main);
    max-width: 80%;
    span{
      color:var(--lightGreen);
    }
  }
  .hero-text p{
    font-weight: 400;
    font-size: 30px;
    line-height: 40px;
    color: #FFFFFF;
  }
  .buttons{
    margin-top:40px;
  }
  @media (max-width: 991.98px) {
    h1{
      font-size: 100px;
      line-height:110px;
      max-width:100%;
    }
  }
  @media (max-width: 830px) {
    h1{
      font-size: 60px;
      line-height: 64px;
      max-width: 100%;
      word-break: break-word;
    }
  }
  @media (max-width: 480px) {
    h1{
      font-size: 44px;
      line-height: 48px;
      max-width: 100%;
      word-break: break-word;
    }
  }
}
.about-module{
  padding-top:100px;
  padding-bottom:100px;
  .row{
    flex-wrap:nowrap;
    .featured-img{
      position: relative;
      z-index: 2;
      margin-right: -14%;
      img{
        border-radius:100px;
        width:100%;
      }
    }
    .about-text{
      position: relative;
      z-index: 5;
      border-radius:100px;
      background-color:var(--main);
      padding:50px;
      margin-top: 30%;
      h4{
        color:var(--darkGreen);
        text-transform:uppercase;
        font-size:20px;
      }
      h2{
        color:var(--darkGreen);
        font-size:30px;
        font-weight:800;
        margin-bottom:25px;
      }
      .button{
        display:block;
        margin-top:30px;
      }
    }
  }
  @media (max-width: 991.98px) {
    .row{
      flex-wrap:wrap;
      .about-text{
        border-radius:0;
        margin-top:0;
      }
    }
  }
}
.services{
  padding-top:100px;
  padding-bottom:100px;
  background:var(--darkGreen);
  .title{
    margin-bottom:20px;
    h4{
      color:var(--main);
      text-transform:uppercase;
      font-size:20px;
    }
    h2{
      color:var(--main);
      font-size:30px;
      font-weight:800;
      margin-bottom:25px;
    }
  }
  .sg-services-row{
    .sg-service-col {
      flex: 1 1 0;
      min-width: 0;
      .sg-service-card{
        background:transparent;
        border:1px solid var(--main);
        padding:0;
        overflow:hidden;
        border-radius:70px 20px 20px 20px;
        min-height: 500px;
        .sg-service-card__image img{
          outline:1px solid var(--main);
          border-radius: 70px 20px 70px 20px;
          width:100%;
          height:210px;
          object-fit:cover;
        }
        .sg-service-card__body{
          padding:25px;
          .sg-service-card__eyebrow{
            font-size:20px;
            color:var(--main);
            margin-bottom:20px;
            display:block;
          }
          h3{
            color:var(--main);
            font-size:25px;
            font-weight:700;
          }
          .sg-service-card__description{
            color:var(--main);
            font-size:18px;
            margin:20px 0 30px;
            display:block;
          }
        }
      }
    }
    .sg-service-col:last-child {
      flex: 0 0 auto;
      width: calc(5 / 12 * 100%);
    }
  }
  @media (max-width: 991.98px) {
    .sg-services-row .sg-service-col, .sg-services-row .sg-service-col:last-child{flex: auto; width:100%;}
  }
}
.numbers{
  padding-top:100px;
  &.no-margin{
    padding-top:0;
  }
  padding-bottom:100px;
  .title{
    margin-bottom:50px;
    h2{
      color:var(--darkGreen);
      font-size:30px;
      font-weight:800;
      margin-bottom:25px;
    }
  }
  .numbers-row{
    .card{
      background:transparent;
      border:1px solid var(--darkGreen);
      .counter{
        font-size:100px;
        font-weight:700;
        color:var(--darkGreen);
        line-height: 100px;
        &[data-prefix]::after {
          content: attr(data-prefix);
          margin-left: .25rem; 
        }
      }
      h4{
        font-size:30px;
        font-weight:700;
        color:var(--darkGreen);
      }
    }
  }
  @media (max-width: 991.98px) {
    .numbers-row .card-container{
      min-height:250px;
      margin-bottom:30px;
    }
  }
}
.testimonials{
  padding-top:100px;
  padding-bottom:100px;
  .title{
    margin-bottom:50px;
    h2{
      color:var(--darkGreen);
      font-size:30px;
      font-weight:800;
    }
  }
  .testimonial-item{
    p{
      font-size:25px;
      line-height:30px;
    }
    h5{
      font-size:18px;
      font-weight:700;
    }
    .position{
      font-size:18px;
      font-weight:400;
    }
  }
  @media (max-width: 991.98px) {
    padding-top:0;
  }
}
.cta-element{
  padding-top:55px;
  padding-bottom:55px;
  background:var(--darkGreen);
  h2{
    color:var(--main);
    font-weight:700;
    font-size:40px;
    text-transform:uppercase;
  }
  h3{
    color:var(--main);
    font-weight:500;
    font-size:30px;
  }
  @media (max-width: 830px) {
    padding-left:30px;
    padding-right:30px;
    h3{
      margin-bottom:30px;
    }
  }
}
.cards-module{
  padding-top:55px;
  padding-bottom:55px;
  background:var(--darkGreen);
  .title{
    h3{
      color:var(--main);
      font-size:30px;
      font-weight:700;
    }
    h4{
      color:var(--main);
      font-size:20px;
      text-transform:uppercase;
      font-weight:700;
    }
  }
  .cards{
    margin-top:40px;
    .card{
      background:transparent;
      border:1px solid var(--main);
      border-radius:70px 20px 20px;
      padding:45px 20px;
      .card__icon{
        display:block;
        margin:0 auto 20px;
      }
      h3{
        color:var(--main);
        font-size:28px;
        font-weight:700;
        text-align:center;
      }
      .text{
        color:var(--main);
        text-align:center;
      }
      &.card--side {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 20px;
        .card__icon {
          flex-shrink: 0;
          img {
            width: 75px;
            height: 75px;
          }
        }
        h3, .text{
          text-align:left;
        }
      }
    }
  }
}
.faq {
  padding: 100px 0;
  .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: inherit;
    .accordion-item {
      background: #fff;
      border: 0;
      border-radius: 18px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      & + .accordion-item {
        margin-top: 22px;
      }
      .accordion-header {
        margin: 0;
        .accordion-button {
          background: #fff;
          padding: 26px 70px 26px 28px; 
          font-weight: 700;
          font-size: 20px;
          color: var(--darkGreen);
          border-radius: 18px;
          box-shadow: none;
          &::after {
            width: 44px;
            height: 44px;
            margin-left: auto;
            position: absolute;
            right: 22px;
            top: 50%;
            transform: translateY(-50%) rotate(-90deg);
            border-radius: 999px;
            background-color: var(--main);
            background-size: 10px;
            background-position: center;
            background-image: url("data:image/svg+xml,<svg width='16' height='28' viewBox='0 0 16 28' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M15.02 12.7002L3.34 0.980213C2.66 0.340214 1.62 0.340214 0.98 0.980213C0.34 1.62021 0.34 2.70021 0.98 3.34021L11.5 13.8602L0.98 24.3802C0.34 25.0602 0.34 26.1002 0.98 26.7402C1.62 27.3802 2.66 27.3802 3.34 26.7402L15.02 15.0602C15.66 14.3802 15.66 13.3402 15.02 12.7002Z' fill='%239ED1A3' stroke='%239ED1A3'/></svg>");
            transition:all 200ms ease-in-out;
            transform: translateY(-50%);
          }
          &:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,<svg width='16' height='28' viewBox='0 0 16 28' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M15.02 12.7002L3.34 0.980213C2.66 0.340214 1.62 0.340214 0.98 0.980213C0.34 1.62021 0.34 2.70021 0.98 3.34021L11.5 13.8602L0.98 24.3802C0.34 25.0602 0.34 26.1002 0.98 26.7402C1.62 27.3802 2.66 27.3802 3.34 26.7402L15.02 15.0602C15.66 14.3802 15.66 13.3402 15.02 12.7002Z' fill='%23003333' stroke='%23003333'/></svg>");
            background-color: var(--main);
            transform: translateY(-50%) rotate(90deg);
          }
        }
      }
      .accordion-body {
        padding: 0 28px 26px;
        color: var(--darkGreen);
        line-height: 1.7;
        p:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
.text-block{
  padding: 100px 0;
  .title{
    margin-bottom:20px;
    h2{
      color:var(--darkGreen);
      font-size:30px;
      font-weight:700;
    }
    h3{
      color:var(--darkGreen);
      font-size:20px;
      text-transform:uppercase;
      font-weight:700;
    }
  }
}
.contact-form{
  padding: 100px 0;
  .title{
    margin-bottom:50px;
    h2{
      color:var(--darkGreen);
      font-size:40px;
      font-weight:700;
    }
    h3{
      color:var(--darkGreen);
      font-size:20px;
      font-weight:700;
    }
  }
  .form .hsfc-Step__Content{
    padding:0 !important;
  }
  .form button.hsfc-Button{
    padding: 14px 30px !important;
    line-height: 20px;
    font-size: 18px !important;
    font-weight: 400;
    text-transform: uppercase;
  }
  .cards{
    margin-top:40px;
    .card{
      background:transparent;
      border:1px solid var(--darkGreen);
      border-radius:70px 20px 20px;
      padding:45px 20px;
      margin-bottom:20px;
      .card__icon{
        display:block;
        margin:0 auto 20px;
      }
      h3{
        color:var(--darkGreen);
        font-size:28px;
        font-weight:700;
        text-align:center;
      }
      .text{
        color:var(--darkGreen);
        text-align:center;
      }
      &.card--side {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 20px;
        .card__icon {
          flex-shrink: 0;
          img {
            width: 75px;
            height: 75px;
          }
        }
        h3, .text{
          text-align:left;
        }
      }
    }
  }
}
footer{
  padding-top:55px;
  padding-bottom:55px;
  background:var(--turquoise);
  .footer-brand {
    display: flex;
    align-items: center;
    gap: 30px;
    .footer-brand__logo {
      flex-shrink: 0;
      width: auto;
    }
    .sg-social-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
      .sg-social-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--darkGreen);
        color: var(--main);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        text-decoration: none;
        transition: background 0.2s ease;
        &:hover {
          background: var(--turquoise);
        }
      }
    }
    }
  }
  .hubspot-form{
    h3{
      font-family: 'Rajdhani' !important;
      font-style: normal;
      font-weight: 700;
      font-size: 30px;
      line-height: 30px;
      color: var(--main) !important;
    }
    .hsfc-Step__Content{
      padding:0 !important;
    }
    .hsfc-Step__Content .hsfc-Row label{
      display:none !important;
    }
    .hsfc-Step__Content .hsfc-Row:nth-child(2){
      width:70%;
      float:left;
      input{
        padding:12px 20px !important;
      }
    }
    .hsfc-Step__Content .hsfc-NavigationRow{
      margin-top:0 !important;
      button.hsfc-Button{
        padding: 14px 30px !important;
        line-height: 20px;
        font-size: 18px !important;
        font-weight: 400;
        text-transform: uppercase;
      }
    }
  }
  .second-level{
    border-top:1px solid var(--main);
    padding-top:20px;
    .list-inline a{
      color:var(--main);
      text-decoration:none;
      font-size:15px;
      &:hover{
        text-decoration:underline;
      }
    }
    .text-end{
      color:var(--main);
      font-size:15px;
    }
  }
  @media (max-width: 767.98px) {
    footer .footer-brand{
      justify-content:center;
      margin-bottom:50px;
      gap: 100px;
    }
    footer .hsfc-Step__Content .hsfc-Row:nth-child(2){
      width: 100% !important;
      float: none !important;
    }
    footer .hsfc-Step__Content .hsfc-NavigationRow{
      margin-top:20px;
    }
    footer .second-level{
      .list-inline{
        text-align:center;
      }
      .text-end{
        text-align:center !important;
      }
    }
  }
}

/* ================================================================
   Header / nav enhancements — ported from local prototype
   • Hide hamburger on desktop (overrides the bare .sg-toggler rule).
   • Desktop dropdown: cream rounded panel, dark items, hover invert,
     hover-bridge, caret rotates 180°. Works alongside Bootstrap's
     data-bs-toggle (click also opens; .show class respected).
   • Mobile: drop panel that pulls UP behind the logo + hamburger
     (-85px margin-top, 115px padding-top, z-index -1) for a single
     continuous dark-green block.
   ================================================================ */

/* 1) Hide the hamburger on desktop. The bare `.sg-toggler{display:flex}`
   rule above this file ties on specificity with Bootstrap's hide rule
   inside the lg breakpoint — this !important media block makes it
   unambiguous. */
@media (min-width: 992px) {
  .sg-header .sg-toggler {
    display: none !important;
  }
}

/* 2) Desktop dropdown panel */
@media (min-width: 992px) {
  .sg-header .navbar-nav .nav-item.dropdown {
    position: relative;
  }
  .sg-header .navbar-nav .dropdown-menu {
    background: var(--main);
    border: 0;
    border-radius: 14px;
    padding: 10px 0;
    min-width: 230px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
    margin-top: 14px;
    z-index: 60;

    position: absolute;
    top: 100%;
    left: 50%;

    /* keep mounted so we can animate visibility */
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  }
  /* invisible hover bridge so the cursor can cross the gap to the panel */
  .sg-header .navbar-nav .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 18px;
  }
  .sg-header .navbar-nav .dropdown:hover > .dropdown-menu,
  .sg-header .navbar-nav .dropdown:focus-within > .dropdown-menu,
  .sg-header .navbar-nav .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .sg-header .navbar-nav .dropdown-menu li {
    list-style: none;
  }
  .sg-header .navbar-nav .dropdown-menu li a.dropdown-item {
    display: block;
    padding: 11px 26px;
    font-size: 13px;
    color: var(--darkGreen);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    transition: background-color 0.22s ease, color 0.22s ease;
    white-space: nowrap;
    background: transparent;
  }
  .sg-header .navbar-nav .dropdown-menu li a.dropdown-item:hover,
  .sg-header .navbar-nav .dropdown-menu li a.dropdown-item:focus,
  .sg-header .navbar-nav .dropdown-menu li a.dropdown-item.active {
    background: var(--darkGreen);
    color: var(--main);
  }
  /* caret rotation on the parent when open / hovered */
  .sg-header .navbar-nav .dropdown-toggle::after {
    transition: transform 0.25s ease;
  }
  .sg-header .navbar-nav .dropdown:hover .dropdown-toggle::after,
  .sg-header .navbar-nav .dropdown:focus-within .dropdown-toggle::after,
  .sg-header .navbar-nav .dropdown-toggle.show::after {
    transform: rotate(180deg);
  }
}

/* 3) Mobile drop panel: continuous dark green that pulls up behind
   the logo + hamburger for a single visual block. */
@media (max-width: 991.98px) {
  .sg-header .navbar-brand,
  .sg-header .sg-toggler {
    position: relative;
    z-index: 3;
  }

  /* Override the earlier .sg-header @media block which painted a near-black
     rgba bg on the collapse. We want the brand --darkGreen. */
  .sg-header #sgNavCollapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--darkGreen);
    border-top: 0;

    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 0 44px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    z-index: 1;
    transition: max-height 0.35s ease, opacity 0.25s ease,
                padding 0.3s ease, margin-top 0.3s ease;
  }
  .sg-header #sgNavCollapse.show {
    max-height: 100vh;
    opacity: 1;
    padding: 115px 44px 24px;
    margin-top: -85px;
    z-index: -1;
  }
  /* keep Bootstrap's inline height transitions out of our way */
  .sg-header #sgNavCollapse.collapsing {
    height: auto !important;
    transition: max-height 0.35s ease, opacity 0.25s ease,
                padding 0.3s ease, margin-top 0.3s ease;
  }

  /* stacked nav with thin cream-alpha dividers */
  .sg-header #sgNavCollapse .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    width: 100%;
    margin: 0 !important;
  }
  .sg-header #sgNavCollapse .navbar-nav > li {
    width: 100%;
  }
  .sg-header #sgNavCollapse .navbar-nav > li > a.nav-link {
    display: flex;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255, 240, 203, 0.18);
    font-size: 16px;
    letter-spacing: 0.18em;
    color: var(--main);
  }

  /* sub-menu rendered inline beneath the parent, collapsed by default */
  .sg-header #sgNavCollapse .dropdown-menu {
    position: static;
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 0 0 18px;
    min-width: 0;

    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: max-height 0.3s ease, padding 0.25s ease;

    /* keep our display:block so collapse via max-height works */
    display: block;
  }
  .sg-header #sgNavCollapse .dropdown-menu.show {
    max-height: 320px;
    padding: 4px 0 8px;
  }
  .sg-header #sgNavCollapse .dropdown-menu a.dropdown-item {
    padding: 10px 4px;
    color: var(--main);
    background: transparent;
    border-bottom: 1px solid rgba(255, 240, 203, 0.08);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
  }
  .sg-header #sgNavCollapse .dropdown-menu a.dropdown-item:hover,
  .sg-header #sgNavCollapse .dropdown-menu a.dropdown-item:focus {
    color: var(--lightGreen);
    background: transparent;
  }
  /* caret rotation on the parent when open on mobile */
  .sg-header #sgNavCollapse .dropdown.show .dropdown-toggle::after,
  .sg-header #sgNavCollapse .dropdown .dropdown-toggle.show::after {
    transform: rotate(180deg);
  }
  .sg-header #sgNavCollapse .dropdown-toggle::after {
    transition: transform 0.25s ease;
  }

  /* CTA pinned at the bottom of the panel, full width, same dark shade */
  .sg-header #sgNavCollapse .navbar-text {
    width: 100%;
    margin-top: 18px !important;
    display: block;
    text-align: stretch;
  }
  .sg-header #sgNavCollapse .navbar-text .btn {
    width: 100%;
    height: 44px;
  }
}

/* ================================================================
   Header nav — hotfix v2
   1) Force-hide hamburger on desktop. Bumps specificity by chaining
      .sg-toggler.navbar-toggler so it beats the bare .sg-toggler rule
      higher in the file even before !important.
   2) Tighten the mobile open panel — pull further up over the logo,
      drop side padding so dividers reach the edge.
   3) Bring the dropdown caret inline on mobile. The base rule positions
      `::after` absolutely with `bottom:15px`, which floats the caret to
      a weird spot inside the collapsed panel. Re-render it as an inline
      flex item next to the text.
   ================================================================ */
@media (min-width: 992px) {
  .sg-header .sg-toggler.navbar-toggler {
    display: none !important;
  }
}

.sg-header #sgNavCollapse.show {
  padding: 115px 10px 24px;
  margin-top: -110px;
}

@media (max-width: 991.98px) {
  .sg-header #sgNavCollapse .navbar-nav > li > a.nav-link {
    align-items: center;
  }
  .sg-header #sgNavCollapse .navbar-nav li a.nav-link.dropdown-toggle::after {
    position: static;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 10px;
    bottom: auto;
    vertical-align: middle;
  }
}

/* ================================================================
   Language switcher — sits between the menu and the CTA
   ================================================================ */
.sg-lang-switcher {
  position: relative;
  margin-left: 16px;
}
.sg-lang-current {
  background: transparent;
  border: 1.5px solid var(--main);
  color: var(--main);
  padding: 0 16px;
  height: 38px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.sg-lang-switcher:hover .sg-lang-current,
.sg-lang-switcher:focus-within .sg-lang-current,
.sg-lang-current:hover {
  background: var(--main);
  color: var(--darkGreen);
}
.sg-lang-caret {
  font-size: 10px;
  line-height: 1;
  transition: transform 0.25s ease;
}
.sg-lang-switcher:hover .sg-lang-caret,
.sg-lang-switcher:focus-within .sg-lang-caret,
.sg-lang-switcher.is-open .sg-lang-caret {
  transform: rotate(180deg);
}

/* Desktop dropdown: cream rounded panel, dark items, invert on hover */
@media (min-width: 992px) {
  .sg-lang-menu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--main);
    border-radius: 14px;
    min-width: 130px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
    margin-top: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    z-index: 60;
  }
  /* hover-bridge so the cursor can travel from the button to the panel */
  .sg-lang-menu::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
  }
  .sg-lang-switcher:hover .sg-lang-menu,
  .sg-lang-switcher:focus-within .sg-lang-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .sg-lang-menu li {
    list-style: none;
  }
  .sg-lang-menu li a {
    display: block;
    padding: 10px 22px;
    font-size: 13px;
    color: var(--darkGreen);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.22s ease, color 0.22s ease;
    white-space: nowrap;
    background: transparent;
  }
  .sg-lang-menu li a:hover,
  .sg-lang-menu li a:focus {
    background: var(--darkGreen);
    color: var(--main);
  }
}

/* Mobile: switcher stacks above the CTA inside the dropped panel,
   sub-menu collapses inline below the chip until tapped open. */
@media (max-width: 991.98px) {
  .sg-header #sgNavCollapse .sg-lang-switcher {
    margin-left: 0;
    margin-top: 14px;
    width: 100%;
  }
  .sg-header #sgNavCollapse .sg-lang-current {
    width: 100%;
    justify-content: center;
    height: 44px;
  }
  .sg-header #sgNavCollapse .sg-lang-menu {
    list-style: none;
    margin: 0 0 0 18px;
    padding: 0;
    position: static;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: max-height 0.3s ease, padding 0.25s ease;
  }
  .sg-header #sgNavCollapse .sg-lang-switcher.is-open .sg-lang-menu {
    max-height: 200px;
    padding: 4px 0 8px;
  }
  .sg-header #sgNavCollapse .sg-lang-menu li {
    list-style: none;
  }
  .sg-header #sgNavCollapse .sg-lang-menu li a {
    display: block;
    padding: 10px 4px;
    color: var(--main);
    background: transparent;
    border-bottom: 1px solid rgba(255, 240, 203, 0.08);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
    text-decoration: none;
  }
  .sg-header #sgNavCollapse .sg-lang-menu li a:hover,
  .sg-header #sgNavCollapse .sg-lang-menu li a:focus {
    color: var(--lightGreen);
    background: transparent;
  }
  /* hover doesn't apply on touch — don't paint the chip hover on tap */
  .sg-header #sgNavCollapse .sg-lang-switcher:hover .sg-lang-current,
  .sg-header #sgNavCollapse .sg-lang-switcher:focus-within .sg-lang-current {
    background: transparent;
    color: var(--main);
  }
  .sg-header #sgNavCollapse .sg-lang-switcher.is-open .sg-lang-current {
    background: var(--main);
    color: var(--darkGreen);
  }
}

/* ================================================================
   Services — wide card on the FIRST column (was last), columns
   stretch to equal height regardless of card content length.
   ================================================================ */
.services .sg-services-row .sg-service-col {
  display: flex;
}
.services .sg-services-row .sg-service-col:last-child {
  flex: 1 1 0;
  width: auto;
}
.services .sg-services-row .sg-service-col:first-child {
  flex: 0 0 auto;
  width: calc(5 / 12 * 100%);
}
.services .sg-services-row .sg-service-card {
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
}

@media (max-width: 991.98px) {
  .services .sg-services-row .sg-service-col:first-child {
    flex: auto;
    width: 100%;
  }
}

/* ================================================================
   Rich-text links — contextual colouring across modules.
   Brand dark-green on cream/light surfaces; brand light-green on
   dark surfaces so links remain visible.
   Buttons (.btn) are excluded so styled CTAs keep their own palette.
   ================================================================ */
.about-module .about-text a:not(.btn),
.text-block a:not(.btn),
.testimonials .testimonial-item a:not(.btn),
.faq .accordion-body a:not(.btn),
.contact-form .form a:not(.btn),
.contact-form .cards .card a:not(.btn),
.numbers .title a:not(.btn) {
  color: var(--darkGreen);
  text-decoration: underline;
  font-weight: 700;
  transition: color 0.2s ease;
}
.about-module .about-text a:not(.btn):hover,
.text-block a:not(.btn):hover,
.testimonials .testimonial-item a:not(.btn):hover,
.faq .accordion-body a:not(.btn):hover,
.contact-form .form a:not(.btn):hover,
.contact-form .cards .card a:not(.btn):hover,
.numbers .title a:not(.btn):hover {
  color: var(--turquoise);
}

.hero-container .hero-text a:not(.btn),
.services .sg-service-card__description a:not(.btn),
.cards-module .card .text a:not(.btn) {
  color: var(--lightGreen);
  text-decoration: underline;
  transition: color 0.2s ease;
}
.hero-container .hero-text a:not(.btn):hover,
.services .sg-service-card__description a:not(.btn):hover,
.cards-module .card .text a:not(.btn):hover {
  color: var(--main);
}

/* ================================================================
   Mobile-only typography & layout refinements (≤ 991.98px)
   Selectors match the nesting depth of the source rules so they
   actually win the cascade.
   ================================================================ */
@media (max-width: 991.98px) {
  /* Hero copy + chips */
  .hero-container .hero-text p {
    font-size: 20px;
    line-height: 30px;
  }
  /* Force the d-grid container to a single 1fr column so chip widths
     stretch — without this the grid track auto-sizes to the widest
     item and `.btn { width: 100% }` resolves to that auto width. */
  .hero-container .buttons {
    grid-template-columns: 1fr;
  }
  .hero-container .buttons .btn {
    width: 100%;
  }

  /* All buttons span full column width on mobile */
  .btn {
    width: 100%;
  }

  /* About card padding tightened on mobile */
  .about-module .row .about-text {
    padding: 20px;
  }

  /* Numbers — counter + label sizing */
  .numbers .numbers-row .card .counter {
    font-size: 70px;
    line-height: 70px;
  }
  .numbers .numbers-row .card h4 {
    font-size: 25px;
  }
  /* Spacing: only the DIRECT .card-container child of .numbers-row
     (the tall 20+ card) gets margin-bottom — inner cards inside
     .row.g-4 rely on the row gutter for the 30px gap, otherwise the
     two stack and we end up with 60px between inner cards vs 30px
     between the outer and the first inner one. */
  .numbers .numbers-row .card-container {
    margin-bottom: 0;
  }
  .numbers .numbers-row > .card-container {
    margin-bottom: 30px;
  }
  .numbers .numbers-row > .col-lg-8 > .row.g-4 {
    --bs-gutter-y: 30px;
  }

  /* Testimonials body */
  .testimonials .testimonial-item p {
    font-size: 18px;
    line-height: 21px;
  }

  /* FAQ — flush accordion to the screen edges.
     The source markup is .container-fluid.faq > .container > .row > .row > .accordion,
     so we have Bootstrap container padding (12px) + TWO nested rows each
     contributing -12px negative margin / +12px col padding which combine
     to push the accordion inward. Zero them out so the accordion fills. */
  .faq > .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
  }
  .faq > .container > .row {
    margin-left: 0;
    margin-right: 0;
  }
  .faq > .container > .row > .row {
    margin-left: 0;
    margin-right: 0;
  }
  .faq .accordion {
    padding-left: 8px;
    padding-right: 8px;
  }
  /* Keep the title block centred and gutter-aware */
  .faq > .container > .row.title {
    padding-left: 8px;
    padding-right: 8px;
  }
  .faq .accordion .accordion-item .accordion-header .accordion-button {
    font-size: 20px;
    padding: 20px 60px 20px 20px;
  }
  .faq .accordion .accordion-item .accordion-header .accordion-button::after {
    width: 36px;
    height: 36px;
    right: 14px;
  }
  .faq .accordion .accordion-item .accordion-body {
    font-size: 15px;
    padding: 0 20px 20px;
  }
}

/* ================================================================
   About Module — reversed layout (text left, image right).
   Toggled via the "Image on right" boolean in the editor; on mobile
   both variants collapse with the image on top because the image
   stays first in source order and we restore flex-direction:row so
   the existing flex-wrap:wrap stacks them image → text.
   ================================================================ */
.about-module--reverse .row {
  flex-direction: row-reverse;
}
.about-module--reverse .featured-img {
  margin-right: 0;
  margin-left: -14%;
}
@media (max-width: 991.98px) {
  .about-module--reverse .row {
    flex-direction: row;
  }
  .about-module--reverse .featured-img {
    margin-left: 0;
  }
}