/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme 2024
 Author:         Bright Yellow
 Author URI:     https://brightyellow.com.au/
 Template:       Divi
 Version:        1.0.0
*/
 



/* -------
🟠 Redo 
------- */

/* -------
🟣 Check
------- */

/* -------
✅ Done---
------- */



/* Fonts 
----------------------------------------------------------------------------------------- */ 
@font-face {
  font-family: "just-sans-regular";
  src:   url("Fonts/just-sans-regular.woff") format("woff"),
         url("Fonts/just-sans-regular.woff2") format("woff2");
}
@font-face {
  font-family: "just-sans-medium";
  src:   url("Fonts/just-sans-medium.woff") format("woff"),
         url("Fonts/just-sans-medium.woff2") format("woff2");
}
@font-face {
  font-family: "just-sans-semibold";
  src:   url("Fonts/just-sans-semibold.woff") format("woff"),
         url("Fonts/just-sans-semibold.woff2") format("woff2");
}


/* // ----------------------------------------------------------------------------------- */




/* Variables (global) 
----------------------------------------------------------------------------------------- */
:root {
font-size: 12px;

/* Colors -------- */
--col-green-1: #164030;
--col-green-2: #0C5C3e;
--col-green-3: #058C48;
--col-green-4: #87C05E;
--col-red: #A33019;
--col-orange: #E07C29;
--col-yellow-1: #FBB925;
--col-yellow-2: #FBD476;
--col-neutral: #F3F3F2;
--col-light: #FFFFFF;
--col-dark: #000000;

--gradient-green: linear-gradient(to right, var(--col-green-1) 0%, var(--col-green-2) 25%, var(--col-green-3) 75%, var(--col-green-4) 100%);
--gradient-green-rev: linear-gradient(to left, var(--col-green-1) 0%, var(--col-green-2) 25%, var(--col-green-3) 75%, var(--col-green-4) 100%);
--gradient-orange: linear-gradient(to right, var(--col-red) 0%, var(--col-orange) 25%, var(--col-yellow-1) 75%, var(--col-yellow-2) 100%);
--gradient-orange-2: linear-gradient(to right, var(--col-orange) 60%, var(--col-yellow-1) 100%);

/* Type -------- */

/* Family */
--type-semi: "just-sans-semibold";
--type-med: "just-sans-medium";
--type-reg: "just-sans-regular";

/* Size (body) */
--body-lrg: clamp(1.4rem, 1.5vw, 1.6rem);
--body-std: clamp(1.3rem, 1.35vw, 1.35rem);

/* Nav */
--nav-link: clamp(1.2rem, 1.25vw, 1.3rem);

/* Size (headings) */
--h1: clamp(3.5rem, 4vw, 5.5rem);
--h2: clamp(2.3rem, 2.2vmax, 2.4rem);
--h3: clamp(1.6rem, 1.8vmax, 2rem);
--h4: clamp(1.3rem, 1.3vmax, 1.7rem);
--h5: clamp(1.2rem, 1.2vmax, 1.5rem);
--h6: clamp(1.2rem, 1.35vmax, 1.4rem);

/* Misc */
--ln-ht-tight: 1.1;
--ln-ht-med: 1.2;
--ln-ht-loose: 1.4;


/* Layout -------- */
--content-width: 85%;
--content-max: 1400px;
--navigation-height: 90px;


/* Spacing -------- */
--base-grid: 15px;
--grid-puny: calc(var(--base-grid) / 3);     /* 5 */
--grid-mini: calc(var(--base-grid) / 2);     /* 7.5 */
--grid-tiny: calc(var(--base-grid) / 1.5);   /* 10 */
--grid-small: calc(var(--base-grid) * 2);    /* 30 */
--grid-med: calc(var(--base-grid) * 3);      /* 45 */
--grid-large: calc(var(--base-grid) * 4);    /* 60 */
--grid-huge: calc(var(--base-grid) * 5);     /* 75 */
--grid-enormous: calc(var(--base-grid) * 6); /* 90 */
--grid-gigantic: calc(var(--base-grid) * 7); /* 105 */


/* Transitions -------- */
--trn-short: 0.3s ease;
--trn-med: 0.5s ease;
--trn-long: 0.7s ease;
--trn-btn: 0.4s ease-out 0.1s;

/* Global misc -------- */
--border-radius: 50px;
--border-radius-pt: calc(var(--border-radius) / 2);
--stroke: 2px;
--padding: 200px;
--btn-padding: 10px 20px;
--btn-radius: 50px;
--btn-gradient-yellow: linear-gradient(to right, var(--col-orange) 0%, var(--col-yellow-1) 40%, var(--col-yellow-2) 100%);
--btn-gradient-green-1: linear-gradient(to right, var(--col-green-4) 0%, var(--col-green-3) 40%, var(--col-green-1) 100%);
--btn-gradient-green-2: linear-gradient(to right, var(--col-green-4) 0%, var(--col-green-2) 60%, var(--col-green-1) 100%);
--btn-gradient-green-3: linear-gradient(to right, var(--col-green-3) 0%, var(--col-green-2) 60%, var(--col-green-1) 100%);


}

/* // ----------------------------------------------------------------------------------- */


@media all and (max-width: 800px) {
   :root {
      --border-radius: 35px;
   }
}
@media all and (max-width: 600px) {
   :root {
      --h1: clamp(3.5rem, 3.5vw, 5.5rem);
      --h3: clamp(1.7rem, 2vmax, 2.2rem);
      --h5: clamp(1.3rem, 1.3vmax, 1.5rem);
      --h6: clamp(1.1rem, 1.1vmax, 1.3rem);
      --body-std: clamp(1.3rem, 1.4vw, 1.4rem);
   }
}




/* Layout: Global
----------------------------------------------------------------------------------------- */
/* Body -------- */
html {
   max-width: 100%;
   width: 100%;
   overflow-x: clip;
   overflow-y: visible;
}
body {
   font-family: var(--type-reg);
   width: 100%;
   max-width: 100%;
   overflow-x: clip;
   overflow-y: visible;
   background-color: var(--col-light);

   & .container---main {
      padding-top: var(--navigation-height);

      & .section {
         width: 100%;
         max-width: 100%;
         padding: var(--grid-enormous) 0 var(--grid-enormous) 0;

         @media all and (max-width: 500px) {
            padding: var(--grid-large) 0 var(--grid-large) 0;
         }

         /* Background colors */
         &.section---white {
            background-color: var(--col-light);
            --text-color: var(--col-green-1);
         }
         &.section---neutral {
            background-color: var(--col-neutral);
            --text-color: var(--col-green-1);
         }
         &.section---yellow {
            background-color: var(--col-yellow-1);
            --text-color: var(--col-green-1);
         }
         &.section---orange {
            background-color: var(--col-orange);
            --text-color: var(--col-light);
         }
         &.section---green-1 {
            background-color: var(--col-green-1);
            --text-color: var(--col-green-1);
         }
         &.section---green-2 {
            background-color: var(--col-green-2);
            --text-color: var(--col-light);
         }
         &.section---green-3 {
            background-color: var(--col-green-3);
            --text-color: var(--col-light);
         }
         &.section---green-4 {
            background-color: var(--col-green-4);
            --text-color: var(--col-green-1);
         }

         &.section---gradient-green {
            --text-color: var(--col-light);
            background-image: var(--gradient-green-rev);

            &.section---boxed {
               background-image: none;

               & .row {
                  background-image: var(--gradient-green-rev);
               }
            }
         }

         & .row {
            width: var(--content-width);
            max-width: var(--content-max);
            margin: 0 auto;

            /*& .image {
               line-height: 0;

               & .imgWrap {
                  display: flex;
                  height: 100%;
               }
            }*/
         }
      }

      & .footer---color {
         position: absolute;
         width: 100%;
         height: auto;
      }
   }
}


/* Columns -------- */

/* Multi columns */
.section---multicol {

   & .row---cols-1 {
      --grid-col-flex: repeat(1, 1fr);
      display: grid;
      grid-template-columns: var(--grid-col-flex);
      
      & .column {
         width: 100%;
      }
   }

   & .row---cols-2 {
      --grid-col-flex: repeat(2, 1fr);
      display: grid;
      grid-template-columns: var(--grid-col-flex);
      
      & .column {
         width: 100%;
      }
   }

   & .row---cols-3 {
      --grid-col-flex: repeat(3, 1fr);
      display: grid;
      grid-template-columns: var(--grid-col-flex);
      
      & .column {
         width: 100%;
      }
   }

   & .row---cols-4 {
      --grid-col-flex: repeat(4, 1fr);
      display: grid;
      grid-template-columns: var(--grid-col-flex);
      
      & .column {
         width: 100%;
      }
   }

   & .row---cols-5 {
      --grid-col-flex: repeat(5, 1fr);
      display: grid;
      grid-template-columns: var(--grid-col-flex);
      
      & .column {
         width: 100%;
      }
   }

   & .row---cols-6 {
      --grid-col-flex: repeat(6, 1fr);
      display: grid;
      grid-template-columns: var(--grid-col-flex);
      
      & .column {
         width: 100%;
      }
   }
}

/* // ----------------------------------------------------------------------------------- */






/* Style: Text
----------------------------------------------------------------------------------------- */

/* Text: heading styles -------- */
h1 {
   font-family: var(--type-med);
   font-size: var(--h1);
   color: var(--text-color);
   letter-spacing: -1px;
   line-height: 1.05;
}
h2 {
   font-family: var(--type-med);
   font-size: var(--h2);
   color: var(--text-color);
   letter-spacing: -0.5px;

   & + p {
      margin-top: var(--base-grid);
   }
}
h3 {
   font-family: var(--type-med);
   font-size: var(--h3);
   color: var(--text-color);
   line-height: var(--ln-ht-tight);
   letter-spacing: -0.4px;
   text-wrap: pretty;

   & + p {
      margin-top: var(--base-grid);
   }
}
h4 {
   font-family: var(--type-semi);
   font-size: var(--h4);
   color: var(--text-color);
}
h5 {
   font-family: var(--type-med);
   font-size: var(--h5);
   color: var(--text-color);

   & + h2 {
      margin-top: var(--grid-mini);
   }
   & + h3 {
      margin-top: var(--grid-mini);
   }
}
h6 {
   font-family: var(--type-semi);
   font-size: var(--h6);
   color: var(--text-color);

   & + h2 {
      margin-top: var(--grid-mini);
   }

   & + h3 {
      margin-top: var(--grid-mini);
   }
}
.text {
   & h1, h2, h3, h4, h5, h6 {
      padding-bottom: 0px;
   }
   & a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
   }
}

/* Text: Body -------- */
p {
   font-family: var(--type-reg);
   font-size: var(--body-std);
   color: var(--text-color);
   line-height: var(--ln-ht-loose);
   text-wrap: pretty;
   padding-bottom: 0px;

   @media all and (max-width: 500px) {
      line-height: var(--ln-ht-med);
   }

   & strong {
      font-family: var(--type-med);
      font-weight: normal;
   }

   & + p {
      padding-top: var(--base-grid);
   }

   & + ul {
      margin-top: var(--grid-mini);
   }
}


/* Text: spacing -------- */
.text---mod {

   & + .button {
      margin-top: var(--grid-med);
   }
}


/* Links -------- */
a {
   transition: var(--trn-short);

   &:hover {
      transition: var(--trn-short);
   }
}

/* Bullets -------- */
.list {
   padding: 0px!important;

   & + p {
      padding-top: var(--base-grid);
   }

   & li {
      font-size: var(--body-std);
      color: var(--text-color);
      line-height: var(--ln-ht-med);
      list-style: none;
      position: relative;

      & + li {
         margin-top: var(--grid-puny);
      }

      & strong {
         font-family: var(--type-med);
         font-weight: normal;
         line-height: var(--ln-ht-loose);
      }
   }

   &.list---ul {
      --b-size: 5px;
      --sp-size: calc(var(--b-size) * 2);
      
      & li {
         margin-left: var(--sp-size);
         
         &:before {
            content: '';
            position: relative;
            display: inline-flex;
            top: 50%;
            transform: translateY(-50%);
            width: var(--b-size);
            height: var(--b-size);
            border-radius: 50px;
            background-color: var(--text-color);
            margin-left: calc(var(--sp-size) * -1);
            margin-right: var(--b-size);
         }
      }
   }
   &.list---ol {
      --b-size: 10px;
      --sp-size: calc(var(--b-size) * 2);
      
      & li {
         counter-increment: item;
         margin-left: var(--sp-size);

         &:before {
            content: counter(item) "";
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: var(--b-size);
            font-weight: var(--semi);
            margin-left: calc(var(--sp-size) * -1);
            margin-right: var(--b-size);
            letter-spacing: -1px;
         }
      }
   }
}

/* // ----------------------------------------------------------------------------------- */







/* Style: Buttons 
----------------------------------------------------------------------------------------- */

/* General buttons -------- */
.button {
   line-height: 1;
   display: inline-flex;
   width: fit-content;

   & .btn---link {
      background-image: var(--bg-gradient);
      background-size: 150% 100%;
      background-position: left;
      color: var(--text-color);
      padding: var(--btn-padding);
      border-radius: var(--btn-radius);
      font-size: var(--body-std);
      font-family: var(--type-med);
      border: 0;
      transition: var(--trn-btn);
      cursor: pointer;

      &.btn---dark {
         --bg-gradient: var(--btn-gradient-green);
         --text-color: var(--col-light);
      }
      &.btn---light {
         --bg-gradient: var(--btn-gradient-yellow);
         --text-color: var(--col-green-1);
      }

      &:hover {
         background-position: right;
         transition: var(--trn-btn);
      }
   }
}

/* // ----------------------------------------------------------------------------------- */







/* Layout: Header/Navigation
----------------------------------------------------------------------------------------- */

/* Main header -------- */
.header---navigation {
   width: 100%;
   /*background-color: var(--col-light);*/
   background-color: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(30px);
   height: var(--navigation-height);
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: fixed;
   z-index: 1000;

   & .nav---container-outer {
      width: var(--content-width);
      max-width: var(--content-width);
      margin: 0 auto;

      & .nav---container {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;

         & .nav---logo-container {

            & .logo---main {

               & a {
                  display: flex;

                  & img {
                     width: clamp(150px, 15vw, 200px);
                  }
               }
            }

         }

         & .nav---text-container {
            width: 100%;
            display: flex;
            justify-content: flex-end;

            & ul.menu {
               display: flex;
               flex-direction: row;
               column-gap: clamp(var(--base-grid), 2vw, var(--grid-small));

               & li {

                  & a {
                     font-family: var(--type-med);
                     font-size: var(--nav-link);
                     color: var(--col-green-2);
                     position: relative;

                     &::after {
                        content: '';
                        width: 0px;
                        height: 2px;
                        background-color: var(--col-orange);
                        border-radius: 50px;
                        display: block;
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        transition: var(--trn-med);
                     }
                  }

                  &.nav---btn {
                     &:hover {
                        & a {
                           background-position: right;
                           color: var(--col-light);
                        }
                     }
                     & a {
                        background-image: var(--btn-gradient-green-1);g2196
                        background-size: 150% 100%;
                        background-position: left;
                        padding: 6px 13px;
                        border-radius: var(--btn-radius);
                        border: 0;
                        transition: var(--trn-btn);
                        cursor: pointer;
                        color: var(--col-light);

                        &::after {
                           display: none;
                        }
                     }
                  }

                  &:hover {
                     & a {
                        color: var(--col-orange);

                        &::after {
                           width: 100%;
                        }
                     }
                  }

                  &.current-menu-item, &.current-menu-ancestor {
                     
                     & a {
                        color: var(--col-orange);

                        &::after {
                           width: 7px;
                        }
                        & .indicator {
                           border-right: 2px solid var(--col-orange);
                           border-bottom: 2px solid var(--col-orange);
                        }
                     }

                     &:hover {
                        
                        & a {
                           
                           &::after {
                              width: 100%;
                           }
                        }
                     }

                     &.menu-item-home {
                        & a {
                           color: var(--col-green-2);

                           &::after {
                              display: none;
                           }
                        }
                     }
                  }

                  &.menu-item-has-children {
                     position: relative;
                     padding-right: 10px;
                     cursor: pointer;

                     & .indicator {
                        position: absolute;
                        border-right: 2px solid var(--col-green-2);
                        border-bottom: 2px solid var(--col-green-2);
                        right: -10px;
                        width: 7px;
                        height: 7px;
                        transform: scaleY(1) rotate(45deg) translateY(-40%);
                        transform-origin: center center;
                        top: calc(50% - 3px);
                        transition: 0.3s ease;
                     }

                     & .before---sub {
                        width: 100%;
                        height: 10px;
                        background-color: transparent;
                     }

                     & .sub-menu {
                        position: absolute;
                        width: max-content;
                        min-width: 100px;
                        overflow: hidden;                  
                        transition: height 0.3s ease-out;

                        &.sub-open {
                           overflow: visible;
                        }
                        & .wrapper---child {
                           border-radius: 10px;
                           background-color: var(--col-green-2);

                           & li.current-menu-item {
                              & a {
                                 text-decoration: 2px solid underline var(--col-green-4);
                                 text-underline-offset: 3px;
                              }
                           }
                        }
                        & li {
                           padding: 15px 15px 0px 15px;

                           & + li {
                              padding-top: 5px!important;
                           }

                           &:last-child {
                              padding-bottom: 15px;
                           }

                           & a {
                              color: var(--col-light);
                              &::after {
                                 display: none;
                              }
                           }
                           &:hover {
                              & a {
                                 color: var(--col-green-4);
                              }
                           }
                        }
                     }
                  }
                  &.item-open {
                     & .indicator {
                        transform: scaleY(-1) rotate(45deg) translateY(-40%);
                        transform-origin: center center;
                        transition: 0.3s ease;
                        border-right-color: var(--col-accent);
                        border-bottom-color: var(--col-accent);
                     }
                  }
               }
            }
            
            /* Mobile breakpoint */
            @media all and (max-width: 1050px) {
               display: none;
            }
         }

         & .mobile---hamburger-container {
            cursor: pointer;
            width: 41px;
            height: 41px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border: 1px solid var(--col-green-4);
            background-color: var(--col-green-2);
            transition: var(--trn-med);

            &:hover {
               background-color: var(--col-green-4);

               & .ham {
                  background-color: var(--col-green-2)!important;
               }
            }

            & .mobile---hamburger {
               height: 50%;
               width: 100%;

               & .hamburger {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: space-between;
                  flex-direction: column;
                  align-items: center;
                  transition: var(--trn-med);

                  & .ham {
                     width: 70%;
                     height: 2px;
                     background-color: var(--col-light);
                  }
               }
            }

            /* Mobile breakpoint */
            @media all and (min-width: 1050px) {
               display: none;
            }
         }
      }
   }
}


/* Mobile -------- */
.mobile---navigation {
   position: fixed;
   width: 100vw;
   height: 100vh;
   background-color: var(--col-green-2);
   top: 0;
   transform: translateY(-100%);
   z-index: 999;
   display: flex;
   justify-content: center;
   align-items: flex-end;
   visibility: hidden;

   @media all and (max-width: 1050px) {
      visibility: visible;
   }

   & .nav---container-outer {
      height: calc(100% - var(--navigation-height));
      width: var(--content-width);
      max-width: var(--content-width);
      display: flex;
      flex-direction: column;
      justify-content: center;

      & .nav---text-container {
         height: 90%;

         & .menu-main-menu-container {
            height: 100%;
         }

         & ul {
            --nav-link: clamp(2.3rem, 3.5vmax, 3.5rem);
            height: 85%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            & li {
               transition: var(--trn-med);

               &.nav---btn {
                  background-image: var(--btn-gradient-green-1);
                  background-size: 200%;
                  padding: 10px 20px;
                  width: fit-content;
                  border-radius: var(--border-radius);

                  & a {
                     --nav-link: clamp(2rem, 3vmax, 3rem);
                  }
               }

               & + li {
                  margin-top: 0px;
               }

               &:hover {
                  & a {
                     color: var(--col-green-4);
                  }
               }

               & a {
                  font-size: var(--nav-link);
                  color: var(--col-light);
                  line-height: 1;
               }

               &.current-menu-item {

                  & a {
                     color: var(--col-green-4);
                  }
               }
            }
         }

      }
   }
}

/* // ----------------------------------------------------------------------------------- */








/* Layout: Footer
----------------------------------------------------------------------------------------- */
.footer---main {
   position: relative;
   z-index: 1;

   & .footer---container-outer {
      background-image: var(--gradient-green);
      border-radius: var(--border-radius) var(--border-radius) 0 0;
      padding: var(--grid-large) 0px;

      & .footer---container-top {
         --grid-col-flex: repeat(2, 1fr);
         width: 100%;
      

         & .footer---top-inner {
            width: var(--content-width);
            max-width: var(--content-width);
            margin: 0 auto;
            display: grid;
            grid-template-columns: var(--grid-col-flex);
            color: var(--col-light);

            @media all and (max-width: 650px) {
               --grid-col-flex: 100%;
               grid-row-gap: var(--grid-small);
            }

            & .footer---column {
               align-self: center;

               &:last-child {
                  justify-self: end;

                  @media all and (max-width: 650px) {
                     justify-self: start;
                  }
               }
               & img {
                  max-width: clamp(250px, 30vmax, 350px);

                  @media all and (max-width: 800px) {
                     max-width: clamp(200px, 20vmax, 250px);
                  }
                  @media all and (max-width: 500px) {
                     max-width: clamp(200px, 80vw, 300px);
                  }
               }
            }
         }
      }

      & .footer---container-bottom {
         --grid-col-flex: repeat(2, 1fr);
         width: 100%;

         & .footer---bottom-inner {
            width: var(--content-width);
            max-width: var(--content-width);
            margin: 0 auto;
            display: grid;
            grid-template-columns: var(--grid-col-flex);
            color: var(--col-light);
            border-top: 1px solid var(--col-light);
            margin-top: var(--grid-small);
            padding-top: var(--grid-small);

            & .footer---column {
               align-self: center;
               
               &:last-child {
                  justify-self: end;

                  & p {
                     & a {
                        transition: var(--trn-med);
                        text-decoration: 1px underline;
                        text-underline-offset: 2px;

                        &:hover {
                           color: var(--col-green-2);
                        }
                        
                        & + a {
                           margin-left: var(--grid-mini);
                        }
                     }
                  }
               }
            }
         }
      }

      & p {
         font-size: var(--h6);
         color: var(--col-light);
      }
      & a {
         font-size: var(--h6);
         color: var(--col-light);
      }
   }
   &.footer---small {
      width: 100%;
      position: absolute;
      bottom: 0;
   }
}
.svg-shapes {
   position: fixed;

   & svg {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
   }
}

/* // ----------------------------------------------------------------------------------- */



/* Preloader 
----------------------------------------------------------------------------------------- */ 
.preload-box {
   width: 100vw;
   height: 100vh;
   position: fixed;
   z-index: 999999;
   top: 0;
   left: 0;
   pointer-events: none;
   background-image: var(--gradient-green);
   background-size: 250%;
   background-position-x: 0%;
   background-repeat: no-repeat;
   display: flex;
   justify-content: center;
   align-items: center;
   

   & svg {
      max-width: 200px;
      filter: blur(0px);
      & path {
         fill: var(--col-light);
      }
   }
}

/* // ----------------------------------------------------------------------------------- */



/* Section: Hero (home page) 
----------------------------------------------------------------------------------------- */ 
/* All hero sections */
.section---hero {
   padding: 0px!important;
   padding-top: var(--grid-large)!important;

   & .row {
      width: 100%!important;
      max-width: 100%!important;
      grid-template-columns: 100%;
      position: relative;
      overflow: hidden;

      @media all and (max-width: 900px) {
         grid-row-gap: var(--grid-huge);
         padding-top: var(--grid-med);
      }
      @media all and (max-width: 500px) {
         padding-top: 0px;
         grid-row-gap: var(--grid-small);
      }

      & .column {

         &.column---col-1 {
            align-self: center;
            position: absolute;
            width: var(--content-width);
            max-width: var(--content-width);
            left: 50%;
            transform: translate(-50%, -15%);

            @media all and (max-width: 900px) {
               position: relative;
               transform: translate(-50%, 0%);
            }

            & .text---mod {
               width: clamp(30vw, 600px, 40vw);

               & h1 {
                  --text-color: var(--col-green-3);
                  & + p {
                     margin-top: var(--grid-med);

                     @media all and (max-width: 500px) {
                        margin-top: var(--grid-small);
                     }
                  }
               }
               & p {
                  --text-color: var(--col-green-2);
                  font-family: var(--type-med);
                  font-size: calc(var(--h4) * 1.3);
               }
               & h5 {
                  & + h1 {
                     margin-top: var(--base-grid);
                  }  
               }

               @media all and (max-width: 900px) {
                  width: 100%;
/*                  --h1: clamp(3rem, 4vw, 5rem);*/
               }
            }
            & .button {
               margin-top: var(--grid-small);
            }
         }
         &.column---col-2 {
            position: relative;
            width: clamp(45vw, 700px, 55vw);
            justify-self: end;
            overflow: hidden!important;

            @media all and (max-width: 900px) {
               width: clamp(45vw, 700px, 85vw);
            }


            & .image {
               line-height: 0;

               & .imgWrap {
                  display: block;
                  height: 100%;

                  & img {
                     mask-image: url('/wp-content/themes/Divi-child/svg/masks/home-hero.svg');
                     -webkit-mask-image: url('/wp-content/themes/Divi-child/svg/masks/home-hero.svg');
                     mask-mode: luminance;
                     webkit-mask-mode: luminance;
                     mask-repeat: no-repeat;
                     webkit-mask-repeat: no-repeat;
                     mask-size: cover;
                     webkit-mask-size: cover;
                     mask-position: left top;
                     webkit-mask-position: left top;
                     min-height: clamp(50vh, 700px, 95vh);
                     height: 100%;
                     object-fit: cover;

                     @media all and (max-width: 900px) {
                        min-height: clamp(25vh, 450px, 35vh);
                     }

                     @media all and (max-width: 600px) {
                        min-height: clamp(30vh, 450px, 40vh);
                     }
                  }
               }
            }
            & #hero-shapes {
               position: absolute;
               top: 0;
               left: 0;
               height: 100%;

               & .circle-1 {
                  fill: url(#green-radial);
               }
               & .circle-2 {
                  fill: url(#yellow-linear);
               }
            }
         }

      }
      & #extra-shape-1 {
         position: absolute;
         width: clamp(15vw, 400px, 30vw);
         bottom: -10%;
         left: clamp(-15vw, -200px, -30vw);

         & .extra-inner {
            fill: var(--col-neutral);
         }
      }
   }

   /* Sub-page hero sections */
   &.section---smaller {

      & .row {

         & .column {

            &.column---col-2 {
               width: clamp(45vw, 700px, 55vw);

               @media all and (max-width: 900px) {
                  width: clamp(45vw, 700px, 85vw);
               }
            }

            & .image {

               & .imgWrap {
                  
                  & img {
                     mask-image: url('/wp-content/themes/Divi-child/svg/masks/heros.svg');
                     -webkit-mask-image: url('/wp-content/themes/Divi-child/svg/masks/heros.svg');
                     min-height: clamp(40vh, 500px, 65vh);

                     @media all and (max-width: 900px) {
                        min-height: clamp(25vh, 450px, 35vh);
                     }

                     @media all and (max-width: 600px) {
                        min-height: clamp(25vh, 350px, 35vh);
                     }
                  }
               }
            }
            & #hero-shapes-2 {
               position: absolute;
               top: 0;
               left: 0;
               height: 100%;

               & .circ-1 {
                  fill: url(#green-radial);
               }
               & .circ-2 {
                  fill: url(#green-linear-2);
               }
            }
         }
      }
   }
}

/* // ----------------------------------------------------------------------------------- */




/* Contact form
----------------------------------------------------------------------------------------- */ 
.section---form {

   & .row {
      grid-template-columns: 40% auto;

      & .column---col-1 {

         & .text---mod {

            & h6 {
               color: var(--col-green-3);
            }
            & p {
               color: var(--col-green-2);
               font-size: var(--body-lrg);

               & a {
                  color: var(--col-green-2);
                  font-size: var(--body-lrg);
                  text-decoration: underline 1px;
                  text-underline-offset: 3px;
                  transition: var(--trn-short);
                  cursor: pointer;

                  &:hover {
                     color: var(--col-green-3);
                  }
               }

               & + h6 {
                  margin-top: var(--grid-small);
               }
            }
         }
      }

      & form.wpcf7-form {
         --abs-pos: 4px;
         --abs-pos-2: calc(var(--abs-pos) * 2);

         & .form---container {
            --grid-col-flex: repeat(2, 1fr);
            display: grid;
            grid-template-columns: var(--grid-col-flex);
            grid-row-gap: var(--grid-small);
            grid-column-gap: var(--grid-small);

            & .form---field {

               & p {
                  font-family: var(--type-reg);
                  font-size: var(--body-std);
                  color: var(--col-green-3);
                  padding-bottom: 0px;

                  & span {
                     display: block;
                     width: 100%;
                     margin-top: var(--grid-puny);
                     position: relative;

                     & input, textarea {
                        width: 100%;
                        border: 1px solid var(--col-green-2);
                        font-size: var(--body-std);
                        padding: var(--grid-tiny) var(--base-grid);
                        border-radius: var(--border-radius);
                        background-color: var(--col-light);
                     }

                     & .required---text {
                        position: absolute;
                        right: 0;
                        top: 0;
                        height: 100%;
                        
                        & .star {
                           position: absolute;
                           right: var(--abs-pos);
                           top: 50%;
                           transform: translateY(-50%);
                           height: calc(100% - var(--abs-pos-2));
                           background-color: var(--col-yellow-2);
                           background-image: url('/wp-content/themes/Divi-child/svg/icon---required.svg');
                           background-size: 50%;
                           background-position: center;
                           background-repeat: no-repeat;
                           border-radius: var(--border-radius);
                           aspect-ratio: 1 / 1;
                           z-index: 1;
                        }

                        & .error---tip {
                           height: calc(100% - var(--abs-pos-2));
                           right: var(--abs-pos);
                           display: flex;
                           align-items: center;
                           top: 50%;
                           transform: translateY(-50%);
                           position: relative;
                           background-color: var(--col-orange);
                           border-radius: var(--border-radius);
                           transition: width 0.4s ease-out;

                           & span {
                              opacity: 0;
                              width: fit-content;
                              font-size: var(--body-std);
                              color: var(--col-light);
                              padding: 0 40px 0 15px;
                              margin-top: 0;
                           }
                        }
                     }

                     & .wpcf7-not-valid-tip {
                        display: none;
                     }
                  }
               }

               &.field---full {
                  grid-column: span 2;

                  & textarea {
                     border-radius: calc(var(--border-radius) / 2.5);
                  }

                  & .required---text {
                     transform: translateY(0);
                  }
               }
               &.field---file {
                  & input {
                     border: 0px;
                     padding: 0px;
                     border-radius: 0px;
                     background-color: transparent;
                  }
               }
            }
            & .button---submit {
               line-height: 1;
               display: inline-flex;
               width: fit-content;

               & .btn---link {
                  background-image: var(--btn-gradient-green-1);
                  background-size: 150% 100%;
                  background-position: left;
                  color: var(--col-light);
                  padding: var(--btn-padding);
                  border-radius: var(--btn-radius);
                  font-size: var(--body-std);
                  font-family: var(--type-med);
                  border: 0;
                  transition: var(--trn-btn);
                  cursor: pointer;

                  &:hover {
                     background-position: right;
                     transition: var(--trn-btn);
                  }
               }
            }

            & .wpcf7-spinner {
               display: none!important;
            }
         }

         & .required---key {
            margin-top: var(--grid-small);

            & p {
               font-size: var(--body-std);
               font-weight: var(--semi);
               display: flex;
               align-items: center;
               column-gap: var(--grid-mini);

               & span {
                  width: 23px;
                  height: 23px;
                  display: flex;
                  background-color: var(--col-green-2);
                  background-image: url('/wp-content/themes/Divi-child/svg/icon---required.svg');
                  background-size: 60%;
                  background-position: center center;
                  background-repeat: no-repeat;
                  border-radius: var(--border-radius);
               }
            }
         }

         &.invalid {
            --output-bg: var(--col-orange);
            --output-text: var(--col-light);

            & .wpcf7-response-output {
               display: flex;
               align-items: center;

               &::before {
                  background-image: url('/wp-content/themes/Divi-child/svg/icon---required.svg');
               }
            }
         }
         &.sent {
            --output-bg: var(--col-green-4);
            --output-text: var(--col-green-2);

            & .wpcf7-response-output {
               display: flex;
               align-items: center;

               &::before {
                  background-image: url('/wp-content/themes/Divi-child/svg/icon---success.svg');
               }
            }
         }

         & .wpcf7-response-output {
            font-family: var(--type-body);
            line-height: 1.2;
            font-weight: var(--semi);
            font-size: var(--body-std);
            border: 0;
            padding: var(--base-grid);
            border-radius: var(--border-radius);
            background-color: var(--output-bg);
            color: var(--output-text);
            display: flex;
            column-gap: var(--grid-tiny);

            &::before {
               content:'';
               width: 30px;
               height: 30px;
               display: block;
               background-repeat: no-repeat;
               background-size: 75%;
               background-position: center;
            }
         }
      }
   }

   & + .section---green-4 {
      & .button {
         & .btn---link {
            --text-color: var(--col-light);
            --bg-gradient: var(--btn-gradient-green-3);
         }
      }
   }
}

/* // ----------------------------------------------------------------------------------- */



/* Layout: custom ACF modules 
----------------------------------------------------------------------------------------- */ 
.module---custom {

   /* Projects */
   &.module---projects {
      --grid-content: repeat(1, 1fr);
      --text-color: var(--col-light);
      --module-bg: var(--col-green-2);
      --module-padding: var(--grid-med);
      --module-radius: var(--border-radius);
      --img-radius: var(--border-radius-pt);

      & .container---custom-post {
         grid-row-gap: var(--grid-small);

         & article {

            & .article---inner {
               grid-template-columns: 50% auto;
               grid-column-gap: var(--grid-large);

               @media all and (max-width: 750px) {
                  grid-row-gap: var(--grid-med);
               }

               & .pt---details {
                  align-self: center;

                  & .tag {
                     border: 0px;
                     padding: 0px;
                     column-gap: var(--grid-mini);

                     & span {
                        color: var(--text-color);
                        font-size: var(--h6);
                        border: 1px solid var(--col-green-4);
                        padding: 2px 10px;
                        border-radius: var(--border-radius);
                        margin-bottom: var(--grid-mini);
                     }
                  }

                  & h3 {
                     &:hover {
                        color: var(--col-green-4);
                     }
                  }

                  & .button {
                     margin-top: var(--grid-med);

                     @media all and (max-width: 750px) {
                        margin-top: var(--base-grid);
                     }
                  }
               }
               & .pt---image {
                  margin-bottom: 0px;

                  & img {
                     width: 100%;
                     aspect-ratio: 1 / 0.65;
                     object-fit: cover;
                     height: 100%;
                  }
               }
            }
         }
      }
   }
   
   /* Programs */
   &.module---programs {
      --grid-content: repeat(2, 1fr);
      --text-color: var(--col-light);
      --module-bg: var(--col-green-2);
      --module-padding: var(--grid-med) var(--grid-med) var(--grid-large) var(--grid-med);
      --module-radius: var(--border-radius);
      --img-radius: 0px;
      margin: var(--grid-small) 0 var(--grid-med) 0;


      & .container---custom-post {
         grid-gap: var(--grid-small);

         @media all and (max-width: 750px) {
            --grid-content: repeat(1, 1fr);
         }

         & article {
            cursor: pointer;
            transition: var(--trn-med);

            &:hover {
               background-color: var(--col-green-3);

               & a {
                  text-decoration-color: var(--col-light)!important;
               }
            }

            & .article---inner {

               @media all and (max-width: 750px) {
                  grid-template-columns: auto 25%!important;
                  grid-column-gap: var(--grid-small);
               }
               & .pt---icon {
                  width: clamp(70px, 10vw, 80px);
                  margin-bottom: var(--grid-tiny);

                  @media all and (max-width: 750px) {
                     grid-column: 2;
                     grid-row: 1;
                  }
               }

               & .pt---title {

                  & .tag {
                     color: var(--text-color);
                     font-size: var(--h6);
                     border: 1px solid var(--col-green-4);
                     display: inline-flex;
                     padding: 2px 10px;
                     border-radius: var(--border-radius);
                     margin-bottom: var(--base-grid);
                     margin-top: var(--grid-mini);
                  }
                  & h3 {
                     --text-color: var(--col-light);

                     @media all and (max-width: 750px) {
                        text-wrap: pretty;
                     }
                  }

                  @media all and (max-width: 750px) {
                     grid-column: 1;
                     grid-row: 1;
                  }
               }
               & .pt---snippet {
                  @media all and (max-width: 750px) {
                     grid-column: 1 / span 2;
                     margin-top: var(--base-grid);
                  }
               }
               & .pt---read-more {
                  margin-top: var(--grid-small);

                  @media all and (max-width: 750px) {
                     grid-column: 1;
                  }
                  
                  & a {
                     color: var(--text-color);
                     text-decoration: underline;
                     text-decoration-color: var(--col-green-3);
                     text-underline-offset: 4px;
                     transition: var(--trn-med);

                     &:hover {
                        text-decoration-color: var(--col-green-4)!important;
                     }
                  }
               }
            }
         }
      }
   }
   
   /* People */
   &.module---people {
      --grid-content: repeat(auto-fit, minmax(225px, auto));
      --text-color: var(--col-light);
      --module-padding: var(--grid-small);
      --module-radius: var(--border-radius-pt);
      --img-radius: calc(var(--border-radius) / 3);
      --module-gap: var(--base-grid);
      --module-ratio: 1 / 0.8;

      @media all and (min-width: 1000px) {
         --grid-content: repeat(3, 1fr);
      }

      margin-top: var(--grid-med);

      &.group---leadership {
         --grid-content: repeat(auto-fit, minmax(250px, auto));
      }
      &.group---program_lead {
         --grid-content: repeat(auto-fit, minmax(250px, auto));
      }
      &.group---advisory_committee {
         --grid-content: repeat(auto-fit, minmax(250px, auto));
      }
      &.module---people-single {
         --grid-content: repeat(auto-fill, minmax(250px, 300px));
      }

      & .container---custom-post {
         grid-gap: var(--module-gap);

         & article {
            --module-padding: var(--grid-small);
            background-color: var(--module-bg);

            &.group---board {
               --module-bg: var(--col-green-2);
            }
            &.group---leadership {
               --module-bg: var(--col-green-2);

               & .pt---links {
                  justify-content: flex-end!important;

                  & .pt---read-more {
                     display: none;
                  }
               }
            }
            &.group---program_lead {
               --text-color: var(--col-light);
               --module-bg: var(--col-green-2);

               & .pt---links {
                  justify-content: flex-end!important;

                  & .pt---read-more {
                     display: none;
                  }
               }
            }
            &.group---advisory_committee {
               --text-color: var(--col-light);
               --module-bg: var(--col-green-3);
               --module-padding: var(--grid-med) var(--grid-small);

               & .article---inner {
                  grid-template-rows: 1fr auto;

                  & .pt---image {
                     display: none;
                  }
                  & .pt---linkedin {
                     display: none;
                  }
                  & .pt---read-more {
                     & a {
                        &:hover {
                           color: var(--col-green-1)!important;
                        }
                     }
                  }
               }
            }
            &.group---media_contact {
               --grid-content: repeat(3, 1fr);
               --text-color: var(--col-light);
               --module-bg: var(--col-green-2);

               & .pt---read-more {
                  display: none;
               }
               & .pt---media-email {
                  display: block!important;
               }
            }

            & .article---inner {
               grid-template-rows: minmax(75px, 1fr) minmax(150px, auto) minmax(25px, auto);

               & .pt---title {
                  padding-bottom: var(--base-grid);
                  & h3 {
                     padding-bottom: 0px;
                  }
                  & p {
                     margin-top: var(--grid-puny);
                     font-size: var(--body-std);
                  }
               }
               & .pt---image {
                  aspect-ratio: var(--module-ratio);
                  margin-top: var(--base-grid)!important;
                  margin-bottom: var(--base-grid)!important;

                  & img {
                     width: 100%!important;
                  }
               }
               & .pt---links {
                  display: flex;
                  justify-content: space-between;
                  align-items: flex-end;

                  & .pt---read-more {
                     line-height: 1;

                     & a {
                        color: var(--text-color);
                        font-size: var(--body-std);
                        text-decoration: underline;
                        text-underline-offset: 3px;
                        transition: var(--trn-short);
                        cursor: pointer;

                        &:hover {
                           color: var(--col-green-4);
                        }
                     }               
                  }
                  & .pt---linkedin {

                     & a {
                        transition: var(--trn-short);
                        display: flex;

                        & img {
                           width: 22px;
                           aspect-ratio: 1 / 1;
                        }
                        &:hover {
                           opacity: 0.6;
                        }
                     }
                  }
                  & .pt---media-email {
                     line-height: 1;

                     & a {
                        color: var(--text-color);
                        font-size: var(--body-std);
                        text-decoration: underline 1px;
                        text-underline-offset: 3px;
                        transition: var(--trn-short);
                        cursor: pointer;

                        &:hover {
                           color: var(--col-green-4);
                        }
                     }               
                  }
               }
            }
         }
      }

   }

   /* News */
   &.module---news {
      --grid-content: repeat(auto-fit, minmax(250px, 1fr));
      --text-color: var(--col-green-1);
      --module-bg: transparent;
      --module-padding: 0px;
      --img-radius: var(--border-radius-pt);

      @media all and (min-width: 1300px) {
         --grid-content: repeat(3, 1fr);
      }

      /* Featured article */
      &.news---feature {
         --module-padding: var(--grid-med)!important;
         --module-radius: var(--border-radius-pt);
         --img-radius: calc(var(--border-radius) / 3);
         
         & .container---custom-post {
            grid-template-columns: 100%;

            & article {
               background-color: var(--col-neutral);

               & .article---inner {
                  grid-template-columns: 55% auto;
                  grid-column-gap: var(--grid-med);
                  grid-row-gap: var(--grid-small);

                  & .pt---image {
                     margin-bottom: 0px;

                     & .tag {
                        display: none;
                     }
                     
                     & img {
                        width: 100%!important;
                     }

                  }
                  & .pt---details {
                     align-self: center;
                     grid-auto-rows: 1fr auto auto;

                     & .pt---title {

                        & h3 {
                           --h3: clamp(1.6rem, 1.8vmax, 2rem)!important;
                        }
                        & .date {
                           display: none;
                        }

                        & .tag {
                           display: inline-flex!important;
                           & + .tag {
                              margin-left: var(--grid-mini);
                           }
                        }
                     }
                     & .pt---snippet {
                        display: block!important;
                     }
                     & .pt---read-more {
                        margin-top: var(--base-grid);
                     }
                  }
               }
            }
         }
      }
      &.news---grid {

         & .container---custom-post {
            grid-row-gap: var(--grid-huge);

            & article {
               --module-padding: 0px!important;
            }
         }
      }

      /* All other articles */
      & article {

         & .article---inner {
            grid-auto-rows: auto 1fr!important;

            & .pt---image {
               position: relative;
               margin-bottom: var(--base-grid)!important;

               & .tag {
                  position: absolute;
                  bottom: var(--base-grid);
                  left: var(--base-grid);
                  color: var(--col-light);
                  font-size: var(--h6);
                  border: 1px solid var(--col-light);
                  background-color: transparent;
                  display: inline-flex;
                  padding: 2px 10px;
                  border-radius: var(--border-radius);
               }

               & img {
                  width: 100%!important;
                  height: 100%;
                  aspect-ratio: 2 / 1.3;
               }
            }
            & .pt---details {
               display: grid;
               grid-auto-rows: 1fr auto;
               grid-row-gap: var(--grid-mini);

               & .pt---title {
                  & h3 {
                     --h3: clamp(1.3rem, 1.4vmax, 1.5rem);
                     text-wrap: pretty!important;
                     line-height: var(--ln-ht-med);

                     @media all and (max-width: 500px) {
                        --h3: clamp(1.5rem, 1.6vmax, 1.7rem);
                     }

                     &:hover {
                        color: var(--col-green-4);
                     }
                  }
                  & .tag {
                     display: none!important;
                  }
                  & .date {
                     --text-color: var(--col-green-3);
                     font-size: var(--h6);
                     font-family: var(--type-semi);
                     margin-bottom: var(--grid-mini);
                  }
               }
               & .pt---snippet {
                  display: none;
               }
               & .pt---read-more {
                  margin-top: 0px;
                  position: relative;

                  & a {
                     
                  }
               }
            }
         }
      }
   }

   /* Events */
   &.module---events {
      --grid-content: repeat(1, 1fr);
      --text-color: var(--col-light);
      --module-bg: var(--col-green-3);
      --module-padding: var(--grid-med);
      --module-radius: var(--border-radius);
      --img-radius: var(--border-radius-pt);

      & .container---custom-post {

         & article {

            & .article---inner {
               grid-template-columns: 50% auto!important;
               grid-column-gap: var(--grid-med);
               grid-row-gap: var(--grid-small);

               @media all and (max-width: 600px) {
                  grid-template-columns: 100%!important;
               }

               & .pt---image {
                  margin-bottom: 0px;
                  aspect-ratio: 1 / 0.65;

                  & img {
                     width: 100%;
                     object-fit: cover;
                     height: 100%;
                  }

               }

               & .pt---details {
                  align-self: center;

                  & .pt---title {

                     & .tag {

                     }
                  }
                  & .pt---read-more {
                     & .btn---link {
                        --bg-gradient: var(--btn-gradient-green-2);
                     }
                  }

               }
            }
         }
      }

   }

   /* All */
   & .container---custom-post {
      display: grid;
      grid-template-columns: var(--grid-content);
      grid-column-gap: var(--grid-med);
      grid-row-gap: var(--grid-large);
      align-items: stretch;

      @media all and (max-width: 850px) {
         grid-column-gap: var(--grid-small);
      }

      & article {
         display: flex;
         flex-direction: column;
         background-color: var(--module-bg);
         border-radius: var(--module-radius);
         padding: var(--module-padding);

         @media all and (max-width: 750px) {
            --module-padding: var(--grid-med) var(--grid-small);
         }

         & .article---inner {
            display: grid;
            height: 100%;

            @media all and (max-width: 900px) {
               grid-column-gap: var(--grid-small);
            }

            @media all and (max-width: 750px) {
               grid-template-columns: 100%!important;
            }

            & .pt---title {

               & h3 {
                  text-wrap: balance;

                  @media all and (max-width: 900px) {
                     text-wrap: pretty;
                  }
               }
               & .pt---tags {
                  & .tag {
                     border: 1px solid var(--col-green-4)!important;
                     padding: 2px 10px!important;
                     border-radius: var(--border-radius)!important;
                  }   
               }
               & .tag {
                  color: var(--text-color);
                  font-size: var(--h6);
                  border: 1px solid var(--col-green-4);
                  display: inline-flex;
                  padding: 2px 10px;
                  border-radius: var(--border-radius);
                  margin-bottom: var(--grid-mini);
               }

            }
            & .pt---snippet {
               & p {
                  text-wrap: balance;
               }
            }
            & .pt---image {
               margin-bottom: var(--grid-small);
               border-radius: var(--img-radius);
               overflow: hidden;

               & img {
                  width: clamp(200px, 90%, 275px);
                  height: 100%;
                  object-fit: cover;
                  /*border-radius: var(--border-radius-pt);
                  overflow: hidden;*/
               }
            }
            & .button {
               margin-top: var(--base-grid);

               @media all and (max-width: 750px) {
                  
               }

               & .btn---link {
                  --bg-gradient: var(--btn-gradient-green-1);
                  --text-color: var(--col-light);
               }
            }

         }
      }
   }
}

.home {
   & .module---programs {
      & .article---inner {
         grid-auto-rows: auto auto auto 1fr;

         & .pt---snippet {
            display: none;
         }
         & .pt---read-more {
            margin-top: var(--base-grid);
         }
      }
   }
   & .section---news {

      & .row {
         & .column {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-between;

            @media all and (max-width: 600px) {
               flex-direction: column;
               align-items: flex-start;

               & .button {
                  margin-top: var(--base-grid);
               }
            }

            & .container---custom-post {

               @media all and (max-width: 750px) {
/*                  --grid-content: 100%;*/

                  & .article---inner {
                     grid-template-columns: 40% auto;
                     grid-column-gap: var(--grid-small);

                     & .pt---image {
                        margin-bottom: 0;
                     }
                     & .pt---details {
                        grid-auto-rows: max-content max-content;
                     }
                  }
               }
               
               @media all and (max-width: 500px) {

                  & .article---inner {
                     grid-template-columns: 100%;
                  }
               }
            }
         }
      }
   }
}
.page---our-research {
   & .module---programs {
      & .article---inner {
         grid-template-rows: max-content max-content 1fr max-content;
      }
   }
}

/* // ----------------------------------------------------------------------------------- */



/* Page: custom singles 
----------------------------------------------------------------------------------------- */ 

.single {

   /* ALL: Heading section */
   & .section---custom-heading {
      padding-bottom: 0px!important;
      position: relative;

      & .row {

         & .column {

            & h1 {
               margin-bottom: var(--grid-med);

               @media all and (max-width: 500px) {
                  --h1: clamp(2.8rem, 2.8vw, 4rem);
                  margin-bottom: var(--grid-small);
                  margin-top: var(--base-grid);
               }
            }

            & .tag {
               color: var(--text-color);
               font-size: var(--body-std);
               font-family: var(--type-reg);
               border: 1px solid var(--col-green-4);
               display: inline-flex;
               padding: 6px 15px;
               border-radius: var(--border-radius);
               margin-bottom: var(--grid-mini);

               &.tag---link {
                  cursor: pointer;
                  transition: background-color 0.3s ease;

                  &:hover {
                     background-color: var(--col-green-2);
                     color: var(--col-light);
                  }
                  & a {
                     text-decoration: none;
                  }
               }
               & + .tag {
                  margin-left: var(--grid-mini);
               }
               &.tag---date {
                  background-color: var(--col-green-4);
               }
            }

            & .image {

               & img {
                  border-radius: var(--border-radius);
                  object-fit: cover;
                  max-height: 400px;

                  @media all and (min-width: 1300px) {
                     max-height: 500px;
                  }
                  @media all and (max-width: 550px) {
                     min-height: 250px;
                  }
               }

               &.img---icon {
                  & img {
                     border-radius: 0px;
                  }
               }
            }
         }
      }
      & .btn---single-back {
         width: fit-content;
         height: fit-content;
         background-image: var(--btn-gradient-green-1);
         background-size: 200%;
         background-position: 0% 50%;
         position: fixed;
         top: 50%;
         border-radius: 0 50px 50px 0;
         cursor: pointer;
         transform: translateX(-100%);
         opacity: 0;
         box-shadow: 1px 0px 1px rgba(255, 255, 255, 0.3);
         z-index: 9;

         @media all and (max-width: 850px) {
            top: 25%;
         }
         
         &:hover {
            background-position: 100% 50%;
            transition: var(--trn-long);
         }

         & p {
            display: flex;
            align-items: center;
            padding: 5px 15px 5px 5px;
            color: var(--col-light);

            & span {
               display: block;
               width: 25px;
               height: 10px;
               background-image: url('/wp-content/themes/Divi-child/svg/icon---arrow.svg');
               background-repeat: no-repeat;
            }
         }
      }
   }

   /* ALL: Content section */
   & .section---content {

      & .row {
         grid-template-columns: var(--grid-col-flex);
         grid-column-gap: var(--grid-gap-flex);

         @media all and (max-width: 850px) {
            grid-template-columns: 100%;
         }

         & .column {

            &.col---summary {
               display: grid;
               grid-row-gap: var(--grid-small);
               background-color: var(--col-green-2);
               height: fit-content;
               padding: var(--grid-med) var(--grid-small);
               border-radius: var(--border-radius);
               position: sticky;
               top: calc(var(--navigation-height) + var(--grid-large));
               transform: translateY(-45px);

               @media all and (max-width: 850px) {
                  position: relative;
                  top: 0;
                  transform: translateY(0px);
               }

               & .text {

                  & h3 {
                     color: var(--col-green-4);
                     margin-bottom: 0px;

                     @media all and (max-width: 550px) {
                        --h3: clamp(2rem, 2.2vmax, 2.4rem);
                     }
                  }

                  & h6 {
                     color: var(--col-light);
                     font-family: var(--type-reg);
                     border: 1px solid var(--col-green-4);
                     border-radius: 50px;
                     padding: 5px 15px;
                     display: inline-flex;
                     margin-bottom: var(--grid-tiny);
                  }

                  & p {
                     color: var(--col-light);
                     font-size: var(--body-lrg);

                     & + p {
                        @media all and (max-width: 550px) {
                           padding-top: var(--grid-mini);
                        }
                     }

                     @media all and (max-width: 550px) {
                        line-height: var(--ln-ht-loose);
                     }

                     &.program-lead-toggle-text {
                        text-decoration: underline;
                        text-decoration-color: var(--col-green-4);
                        text-underline-offset: 3px;
                        transition: var(--trn-short);
                        cursor: pointer;

                        &:hover {
                           color: var(--col-green-3);
                        }
                     }

                     & a {
                        color: inherit;
                        text-decoration: underline;
                        text-decoration-color: var(--col-green-4);
                        text-underline-offset: 3px;
                        transition: var(--trn-short);
                        cursor: pointer;

                        &:hover {
                           color: var(--col-green-4);
                        }
                     }
                  }
                  & li {
                     color: var(--col-light);
                     font-size: var(--body-lrg);
                     &::before {
                        background-color: var(--col-light);
                     }
                  }

                  & .program-lead-dropdown {
                     --module-bg: var(--col-neutral);
                     max-height: 0px;
                     transition: max-height 0.5s ease-out;
                     overflow: hidden;

                     & .module---people {
                        margin-top: 0px;

                        & .container---custom-post {
                           grid-template-columns: 100%;

                           & article {

                              @media all and (max-width: 950px) {
                                 --module-padding: var(--base-grid);   
                              }
                              @media all and (max-width: 850px) {
                                 --module-padding: var(--grid-small);   
                              }

                              & .article---inner {
                                 grid-template-rows: auto;

                                 @media all and (max-width: 850px) {
                                    grid-template-columns: 40% auto!important;
                                    grid-template-rows: max-content max-content max-content;
                                    
                                    & .pt---image {
                                       grid-row: 1 / span 3;
                                       margin-bottom: 0px;
                                    }
                                    & .pt---title {
                                       grid-column: 2;
                                    }
                                    & .pt---snippet {
                                       grid-column: 2;
                                    }
                                    & .pt---links {
                                       grid-column: 2;
                                    }
                                 }
                                 @media all and (max-width: 750px) {
                                    grid-template-columns: 40% auto!important;;
                                 }
                                 @media all and (max-width: 550px) {
                                    grid-template-columns: 100%!important;

                                    & .pt---image {
                                       grid-row: auto;
                                    }
                                    & .pt---title {
                                       grid-column: 1;
                                    }
                                    & .pt---snippet {
                                       grid-column: 1;
                                    }
                                    & .pt---links {
                                       grid-column: 1;
                                    }
                                 }

                                 & .pt---image {
                                    margin-top: 0px!important;
                                 }
                                 & .pt---title {

                                    & p {
                                       display: none;
                                    }
                                    & h3 {
                                       color: var(--col-green-3);
                                    }
                                 }
                                 & .pt---snippet {
                                    & p {
                                       color: var(--col-green-2);
                                       font-size: var(--body-std);
                                    }
                                 }
                                 & .pt---links {
                                    margin-top: var(--base-grid);
                                    justify-content: flex-start;
                                    column-gap: var(--base-grid);

                                    & a {
                                       font-size: var(--body-std);
                                       color: var(--col-green-3);
                                       font-family: var(--type-med);
                                    }
                                 }
                              }
                           }
                        }
                     }
                  }
               }
            }

            & p {
               & strong {
                  line-height: 2;
               }
               @media all and (max-width: 550px) {
                  line-height: var(--ln-ht-loose);
               }
            }
         }
      }
   }

   /* Projects */
   &.single-research_project {

      & .section---custom-heading {

         & .row {

            & .column {
               

               & .text---mod {

               }
               
               & .image {

               }
            }
         }
      }

      & .section---content {

         @media all and (max-width: 850px) {
            padding-top: 0px!important;
         }

         & .row {
            --grid-col-flex: 35% auto;
            --grid-gap-flex: var(--grid-large);

            & .column {

               & h3 {
                  --text-color: var(--col-green-3);
                  margin-bottom: var(--grid-small);

                  @media all and (max-width: 550px) {
                     margin-bottom: var(--base-grid);
                  }

                  & + p {
                     margin-top: 0px!important;
                  }
               }

               & .text---overview {

                  & p {
                     font-size: var(--body-lrg);
                  }
               }

               & .program---link {
                  margin-top: var(--grid-large);
                  padding-bottom: var(--grid-large);
                  margin-bottom: var(--grid-large);
                  border-bottom: 1px solid var(--col-green-3);

                  @media all and (max-width: 850px) {
                     --grid-large: calc(var(--base-grid) * 2);
                  }

                  & > div {
                     display: grid;
                     grid-template-columns: max-content auto;
                     grid-column-gap: var(--base-grid);

                     & > div {
                        align-self: center;
                        display: flex;

                        & img {
                           max-width: clamp(55px, 7vmax, 70px);

                           @media all and (max-width: 550px) {
                              max-width: clamp(55px, 10vmax, 80px);
                           }
                        }
                     }
                     & p {
                        & a {
                           color: inherit;
                           text-decoration: underline 1px;
                           text-underline-offset: 2px;
                           transition: var(--trn-short);

                           &:hover {
                              color: var(--col-green-4);
                           }
                        }
                        & strong {
                           color: var(--col-green-3);
                           line-height: 2;
                        }
                        align-self: center;
                     }
                  }
               }

               &.col---summary {
                  @media all and (max-width: 950px) {
                     padding: var(--grid-small) var(--base-grid);
                  }
                  @media all and (max-width: 850px) {
                     display: grid;
                     grid-template-columns: repeat(2, 1fr);
                     grid-column-gap: var(--grid-med);
                     padding: var(--grid-small);
                     margin-top: var(--base-grid);
                     margin-bottom: var(--grid-med);

                     & .text---mod {
                        &:first-child {
                           grid-column: 1 / span 2;

                           @media all and (max-width: 600px) {
                              grid-column: 1;
                           }
                        }
                     }

                     & .text---project-objective {
                        grid-column: 1;
                        grid-row: 2 / span 2;
                     }
                     & .text---project-timeline {
                        grid-column: 2;
                     }
                     & .text---project-investment {
                        grid-column: 2;
                     }
                     & .text---project-lead {
                        grid-column: 1 / span 2;
                        grid-row: 4;
                     }
                  }

                  @media all and (max-width: 600px) {
                     grid-template-columns: 100%;
                     
                     & .text---mod {
                        grid-column: 1;
                        grid-row: auto;
                     }
                  }

               }
            }

         }
      }

   }

   /* Programs */
   &.single-program {

      /* Heading section */
      & .section---custom-heading {

         & .row:first-child {
            margin-bottom: var(--grid-med);

            & .column {
               display: grid;
               grid-template-columns: 80% auto;

               & .text---mod {
                  grid-column: 1;
                  align-self: start;

                  & h1 {
                     --text-color: var(--col-green-3);
                     margin-bottom: 0px!important;
                  }

                  &:first-child {
                     align-self: end;
                  }
               }
               & .image {
                  grid-column: 2;
                  grid-row: 1 / span 2;
                  align-self: center;
                  justify-self: end;
                  max-width: 85px;
                  border-radius: 0px;

                  & img {

                  }
               }
            }
         }
      }

      /* Body section */
      & .section---content {

         & h3 {
            margin-top: var(--grid-mini);
         }

         &.section---white {
            & .row---has-shape {
               & svg {
                  z-index: 0;
                  @media all and (max-width: 900px) {
                     top: calc((var(--shape-width) / 6) * -0.5);
                  }
                  @media all and (max-width: 600px) {
                     top: calc((var(--shape-width) / 6) * 0.5);
                  }
                  @media all and (max-width: 500px) {
                     top: calc((var(--shape-width) / 6) * 1.5);
                  }
               }
               & .column {
                  z-index: 1;
                  position: relative;
               }
            }
            & h4 {
               --text-color: var(--col-green-2);
            }
            & h3 {
               --text-color: var(--col-green-3);
               max-width: 85%;
            }
         }
         &.section---green-2 {
            & h4 {
               --text-color: var(--col-green-4);
            }
         }
      }

      & .section---program-projects {
         
         & .row {
            --grid-col-flex: 30% auto;
            grid-column-gap: var(--grid-small);

            @media all and (max-width: 850px) {
               --grid-col-flex:100%;
               grid-row-gap: var(--grid-med);
            }
         
            & .column {

               &.column---col-1 {
                  & .code---mod {
                     position: sticky;
                     top: calc(var(--navigation-height) + var(--grid-med));
                  }
               }

               & .module---people {
                  --module-radius: var(--border-radius);
                  --img-radius: calc(var(--border-radius) / 2);
                  --module-bg: var(--col-green-2);
                  margin-top: 0px;

                  & .container---custom-post {
                     --grid-content: 100%!important;


                     & article {

                        & .article---inner {
                           --module-ratio: auto;

                           @media all and (max-width: 850px) {
                              grid-template-columns: 40% auto!important;
                              grid-template-rows: auto;

                              & .pt---image {
                                 grid-column: 1;
                                 grid-row: 1 / span 3;
                                 max-height: 200px;
                              }
                              & .pt---title {
                                 grid-column: 2;
                              }
                              & .pt---snippet {
                                 grid-column: 2;
                              }
                              & .pt---links {
                                 grid-column: 2;
                              }
                           }
                           @media all and (max-width: 500px) {
                              grid-template-columns: 100%!important;

                              & .pt---image {
                                 grid-column: auto;
                                 grid-row: auto;
                                 max-height: 250px;
                              }
                              & .pt---title {
                                 grid-column: 1;
                              }
                              & .pt---snippet {
                                 grid-column: 1;
                              }
                              & .pt---links {
                                 grid-column: 1;
                              }
                           }
                        }
                        & .pt---title {
                           margin-top: var(--base-grid);
                           & p {
                              font-size: var(--h6);
                           }
                        }
                        & .pt---image {
                           margin-top: 0px!important;
                           margin-bottom: 0px!important;
                        }
                        & .pt---links {
                           margin-top: var(--grid-small);
                           justify-content: flex-start;
                           column-gap: var(--base-grid);

                           & a {
                              color: var(--text-color);
                           }
                        }
                     }
                  }
               }

               & .module---projects {
                  --module-bg: var(--col-neutral);
                  --module-padding: var(--grid-small);
                  --text-color: var(--col-green-2);

                  & .container---custom-post {
                     grid-row-gap: var(--grid-small);

                     & article {
                        --module-padding: var(--grid-small);

                        & .article---inner {
                           grid-template-columns: 40% auto;
                           grid-column-gap: var(--grid-small);

                           & .pt---title {
                              & h3 {
                                 font-size: calc(var(--h4) * 1.2);
                              }
                           }
                           & .button {
                              margin-top: var(--grid-small);
                           }
                           & .pt---image {
                              & img {
                                 aspect-ratio: 1 / 0.75;
                              }
                           }
                        }
                     }
                  }

               }
            }
         }
      }

      & .module---programs {

         & .container---custom-post {
            --grid-content: repeat(auto-fit, minmax(250px, 1fr));
            grid-gap: var(--base-grid);
            
            & article {
               --module-padding: var(--grid-med) var(--grid-small) var(--grid-med) var(--grid-small);

               & .article---inner {
                  grid-auto-rows: auto 1fr auto;

                  & .pt---icon {
                     width: clamp(60px, 8vw, 70px);
                  }
                  & .pt---title {

                     & h3 {
                        font-size: var(--h3);
                        text-wrap: auto;
                        padding-top: var(--grid-mini);
                     }
                  }
                  & .pt---snippet {
                     display: none;
                  }
                  & .pt---read-more {
                     margin-top: var(--base-grid);
                  }

                  @media all and (max-width: 750px) {
                     grid-template-columns: 100%!important;

                     & div {
                        grid-row: auto;
                        grid-column: auto;
                     }                     
                  }
               }
            }
         }
      }
   }

   /* People */
   &.single-people {

      & .section---custom-heading {
         padding-bottom: var(--grid-enormous)!important;

         @media all and (max-width: 850px) {
            --grid-enormous: calc(var(--base-grid) * 4);
         }

         & .row {
            --grid-col-flex: auto minmax(100px, 350px);
            grid-column-gap: var(--grid-large);

            @media all and (max-width: 850px) {
               grid-column-gap: var(--grid-med);
            }
            @media all and (max-width: 650px) {
               grid-template-columns: 100%;
               grid-row-gap: var(--grid-med);
            }

            & .column {
               align-self: center;

               & .text---mod {

                  & .text {

                     & h1 {
                        margin-bottom: var(--base-grid)!important;

                        @media all and (max-width: 800px) {
                           font-size: calc(var(--h1) * 0.9);
                        }
                     }
                     & p {
                        text-wrap: balance;
                     }
                  }
               }
               & .container---links {
                  display: inline-flex;
                  column-gap: var(--grid-mini);
                  margin-top: var(--grid-small);

                  & a {
                     display: flex;

                     & img {
                        width: 25px;
                        height: 25px;
                     }
                  }
               }

               & .image {
                  
                  & .imgWrap {
                     display: flex;
                     flex-direction: column;

                     & img {
                        aspect-ratio: 1 / 0.8;
                        object-fit: cover;
                     }
                  }
               }
            }
         }
      }

      & .section---content {

         & .row---cols-2 {
            --grid-col-flex: auto minmax(70px, 350px);
            --grid-gap-flex: var(--grid-large);

            @media all and (max-width: 850px) {
               grid-template-columns: var(--grid-col-flex);
               --grid-gap-flex: var(--grid-med);
            }
            @media all and (max-width: 650px) {
               grid-template-columns: 100%;
            }

            & .column {

               &.column---col-1 {
                  & .text---mod {
                     &:last-child {
                     }
                     & p {
                        text-wrap: pretty;
                        line-height: var(--ln-ht-loose);
                     }
                     & + .text---mod {
                        margin-top: var(--grid-med);
                     }
                  }
               }

               &.column---col-2 {
                  --module-radius: var(--border-radius);
                  background-color: var(--col-green-2);
                  border-radius: var(--module-radius);
                  padding: var(--grid-med) var(--grid-small);
                  height: fit-content;

                  @media all and (max-width: 650px) {
                     margin-top: var(--grid-small);
                     padding: var(--grid-small);
                  }

                  & .code---inner {
                     font-size: var(--body-std);
                     font-family: var(--type-med);
                     color: var(--col-light);

                     & .people-group-list {
                        margin-top: var(--base-grid);

                        @media all and (max-width: 650px) {
                           display: grid;
                           grid-template-columns: repeat(2, 1fr);
                           grid-column-gap: var(--grid-small);
                        }
                        @media all and (max-width: 450px) {
                           grid-template-columns: 100%;
                        }

                        & .person {
                           border-bottom: 1px solid var(--col-green-4);
                           margin-bottom: var(--grid-puny);
                           padding-bottom: var(--grid-puny);

                           &.current-person {
                              & a {
/*                                 opacity: 0.5;*/
                                 pointer-events: none;
                                 color: var(--col-green-4);
                                 font-family: var(--type-med);
                              }
                           }

                           & a {
                              font-size: var(--body-std);
                              font-family: var(--type-reg);
                              color: var(--col-light);

                              &:hover {
                                 color: var(--col-green-4);
                              }
                           }
                        }
                     }
                  }
                  & .button {
                     margin-top: var(--grid-small);

                     & .btn---link {
                        --bg-gradient: var(--btn-gradient-green-1);
                        --text-color: var(--col-light);
                     }
                  }

               }
            }
         }
      }
   }

   /* Events */
   &.single-events {

      & .section---content {

         & .row {
            --grid-col-flex: 35% auto!important;
            --grid-gap-flex: var(--grid-large);

            & .col---summary {
               background-color: transparent;
               padding: 0px;
               grid-row-gap: 0px;

               & .wrapper---summary {
                  background-color: var(--col-green-2);
                  display: flex;
                  flex-direction: column;
                  row-gap: var(--grid-small);
                  border-radius: var(--border-radius);
                  padding: var(--grid-med) var(--grid-small);

                  @media all and (max-width: 850px) {
                     display: grid;
                     grid-template-columns: repeat(2, 1fr);
                     grid-column-gap: var(--grid-small);

                     & .text---event-date {
                        grid-column: 1;
                     }
                     & .text---event-time {
                        grid-column: 1;
                     }
                     & .text---event-location {
                        grid-column: 1;
                     }
                     & .text---event-attend {
                        grid-column: 2;
                        grid-row: 1 / span 4;
                     }
                     & .button {
                        grid-column: 1;
                     }
                  }
                  @media all and (max-width: 600px) {
                     grid-template-columns: 100%;

                     & .text---mod {
                        grid-row: auto;
                        grid-column: auto;
                     }
                  }

                  & .button {
                     margin-top: 0px;
                  }
               }
               & .text---info {
                  background-color: var(--col-green-3);
                  border-radius: 0 0 var(--border-radius) var(--border-radius);
                  padding:var(--grid-huge) var(--grid-small) var(--grid-med) var(--grid-small);
                  position: relative;
                  top: calc(var(--grid-med) * -1);
                  z-index: -1;
               }
            }
            
            & .column---col-2 {

               & h3 {
                  --text-color: var(--col-green-3);
               }
            
               & .text---overview {
                  margin-bottom: var(--grid-small);

                  & p {
                     font-size: var(--body-lrg);
                     
                     &:nth-child(2) {
                        font-family: var(--type-med);
                     }

                     & img {
                        width: 100%;
                        border-radius: var(--border-radius-pt);
                        margin-top: var(--grid-small);
                        margin-bottom: var(--base-grid);
                     }
                  }
               }
               
               & .text---mod {
                  & h3 {
                     margin-top: var(--grid-small);
                     margin-bottom: var(--base-grid);
                  }
                  & h2 {
                     --text-color: var(--col-green-2);
                     font-size: var(--body-lrg);
                     font-family: var(--type-semi);
                     & + p {
                        margin-top: var(--grid-tiny);
                     }
                     & + ul {
                        margin-top: var(--grid-tiny);
                     }
                  }
                  & p {
                     & img {
                        width: 100%;
                        border-radius: var(--border-radius-pt);
                        margin-top: var(--grid-small);
                        margin-bottom: var(--base-grid);
                     }

                     & a {
                        &:hover {
                           color: var(--col-green-4);
                        }
                     }

                     & + h2 {
                        margin-top: var(--grid-small);
                     }
                     & + p {
                        padding-top: var(--grid-mini);
                     }
                  }
                  & ul {
                     & + h2 {
                        margin-top: var(--grid-small);
                  }
               }

                  &.text---sponsor-logos {
                     margin-top: var(--grid-small);

                     & .text {
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(100px, 175px));
                        grid-column-gap: var(--grid-med);

                        & p {
                           padding-top: 0px;

                           & img {
                              margin: 0px;
                           }
                        }
                     }
                  }
               }            
            }
         }
      }
   }

   /* News */
   &.single-news {

      & .section---custom-heading {
         & .row {
            & .column {
               & h1 {
                  @media all and (max-width: 650px) {
                     font-size: calc(var(--h1) * 0.8);
                  }
               }
            }
         }
      }
      & .section---news {
         @media all and (max-width: 650px) {
            --grid-enormous: calc(var(--base-grid) * 4);
         }
         & .row {
            &.row---news {
               --grid-col-flex:auto 40%;
               grid-column-gap: var(--grid-large);
               margin-top: var(--grid-med);

               @media all and (max-width: 650px) {
                  --grid-col-flex: 100%;

                  & .column---col-2 {
                     margin-top: var(--grid-small);

                     & .module---news {
                        margin-top: var(--base-grid);
                     }
                  }
               }

               & .column {

                  & blockquote {
                     border: 1px solid var(--col-green-3);
                     background-color: transparent;
                     padding: var(--grid-small);
                     border-radius: var(--border-radius-pt);

                     & p {
                        --text-color: var(--col-green-3);
                        font-family: var(--type-med);
                        font-size: var(--body-lrg);

                     }
                  }
                  
                  &.column---col-2 {
                     --text-color: var(--col-green-2);
                     background-color: var(--col-neutral);
                     height: max-content;
                     padding: var(--grid-med) var(--grid-small);
                     border-radius: var(--border-radius);

                     @media all and (max-width: 700px) {
                        padding: var(--grid-small);
                     }

                     & p {
                        --text-color: var(--col-green-3);
                     }

                     & .button {
                        margin-top: var(--base-grid);
                        & .btn---link {
                           --bg-gradient: var(--btn-gradient-green-1);
                           --text-color: var(--col-light);
                        }
                     }
                  }
                  
                  /* News module */
                  & .module---news {

                     & .container---custom-post {
                        display: flex;
                        flex-direction: column;
                        grid-row-gap: 0px;
                        
                        & article {
                           padding: 0 0 var(--base-grid) 0;
                           margin-bottom: var(--base-grid);
                           background-color: transparent;
                           border-bottom: 1px solid var(--col-green-4);
                           border-radius: 0px;

                           & .article---inner {
                              grid-template-columns: 100%;

                              & .pt---image {
                                 display: none;
                              }

                              & .pt---details {
                                 & .pt---title {
                                    & p {
                                       display: none!important;
                                    }
                                    & h3 {
                                       --text-color: var(--col-green-2);
                                       font-size: var(--h4);
                                       padding-bottom: 0px;
                                    }
                                 }

                                 & .pt---snippet {
                                    display: none!important;
                                 }

                                 & .pt---read-more {
                                    display: none;
                                 }
                              }
                           }
                        }
                     }
                  }
               }
            }
         }
      }
   }

}

/* // ----------------------------------------------------------------------------------- */



/* Layout: Text modules within sections
----------------------------------------------------------------------------------------- */ 
/* News */
.section---news {

   & .row {

      &.row---filter {
         position: sticky;
         top: var(--navigation-height);
         z-index: 1;
      }

      & .text---mod {
         & h3 {
            --text-color: var(--col-green-3);
         }
         & h2 {
            --text-color: var(--col-green-3);
         }
      }

      & .bar---filter {
         background-color: var(--col-neutral);

         & .code---inner {
            outline: var(--col-neutral) solid 10px;
         }
      }

      & .module---news {
         margin-top: var(--grid-small);

         @media all and (max-width: 600px) {
            margin-top: var(--grid-med);
         }
      }
   }

}

/* Events */
.section---events {

   & .row {

      & .column {

         & .module---events {
            margin-top: var(--grid-small);
         }
      }
   }
}

/* Programs */
.section---programs {

   & .text---mod {
      & h3 {
         --text-color: var(--col-green-3);
      }
   }

}

/* Media contacts */

/* // ----------------------------------------------------------------------------------- */



/* Layout: Toggles/Accordions 
----------------------------------------------------------------------------------------- */ 
.section---toggle {

   & .toggle {
      background-color: transparent;
      padding: 0px;
      border: 0px;
      margin-bottom: 0px;

      &.et_pb_toggle_open {
         & .toggle---title {
            &::before {
               content: '–';
               display: block;
               position: absolute;
               border-radius: var(--border-radius);
               font-family: var(--type-body)!important;
               color: var(--col-primary);
               background-color: var(--col-secondary);
               padding: 3px 9px 6px 9px;
               font-size: 20px;
               transition: var(--trn-short);
            }
         }
      }

      & .toggle---title {
         font-size: var(--body-std);
         font-weight: var(--semi);
         color: var(--col-secondary);
         transition: var(--trn-short);

         &::before {
            content: '+';
            border-radius: var(--border-radius);
            font-family: var(--type-body)!important;
            color: var(--col-secondary);
            background-color: var(--col-primary);
            padding: 3px 9px 6px 9px;
            font-size: 20px;
            transition: var(--trn-short);
         }

         &:hover {
            color: var(--col-accent);
            transition: var(--trn-short);

            &::before {
               background-color: var(--col-accent);
               color: var(--col-light);
               transition: var(--trn-short);
            }
         }
      }

      & .toggle---content {
         padding-top: var(--base-grid);
         & p {

         }
      }

      & + .toggle {
         margin-top: var(--grid-small);
         padding-top: var(--grid-small);
         border-top: 1px solid var(--col-secondary);
      }
   }
}

/* // ----------------------------------------------------------------------------------- */



/* Layout: Boxed section 
----------------------------------------------------------------------------------------- */ 
.section---boxed {

   & .row {
      width: 95%!important;
      max-width: 95%!important;
      border-radius: var(--border-radius);
      padding: var(--padding) 0;

      & .column {
         width: var(--content-width);
         max-width: var(--content-max);
         margin: 0 auto;

         & .text---mod {
            text-align: center;
         }

      }
   }
}

/* // ----------------------------------------------------------------------------------- */



/* Layout: Numbers 
----------------------------------------------------------------------------------------- */ 
.section---numbers {
   padding-top: 0px!important;
   z-index: -1;

   @media all and (max-width: 550px) {
      padding-bottom: 0px!important;
   }

   & .row {
      padding: var(--grid-gigantic);

      @media all and (max-width: 800px) {
         padding: var(--grid-huge);
      }
      @media all and (max-width: 650px) {
         padding: var(--grid-large) var(--grid-med);
      }

      & .column {

         @media all and (max-width: 800px) {
            width: 100%;
            max-width: 100%;
         }

         & h2 {
            @media all and (max-width: 550px) {
               text-align: left;
            }
         }
         & p {
            @media all and (max-width: 550px) {
               text-align: left;
            }
         }

         & .wrapper---numbers {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            max-width: 85%;
            margin: 0 auto;
            padding-top: var(--grid-med);
            padding-bottom: var(--grid-large);

            @media all and (max-width: 800px) {
               max-width: 100%;
            }
            @media all and (max-width: 550px) {
               grid-template-columns: 100%;
               grid-row-gap: var(--base-grid);
               padding-top: var(--grid-small);
               padding-bottom: var(--grid-small);
            }

            & .text---number {

               & .text {

                  @media all and (max-width: 550px) {
                     display: grid;
                     grid-template-columns: minmax(100px, max-content) auto;
                  }

                  & h1 {
                     --text-color: var(--col-yellow-1);
                     font-family: var(--type-semi);
                     margin-bottom: var(--base-grid);

                     @media all and (max-width: 550px) {
                        grid-column: 1;
                        grid-row: 1 / span 2;
                        text-align: left;
                        align-self: center;
                        margin-bottom: 0;
                     }

                     & strong {
                        font-weight: normal;
                     }
                  }

                  & h3 {
                     @media all and (max-width: 550px) {
                        grid-column: 2;
                        text-align: left;
                        height: max-content;
                     }
                  }

                  & p {
                     margin-top: var(--grid-puny);

                     @media all and (max-width: 550px) {
                        grid-column: 2;
                        text-align: left;
                        height: max-content;
                        margin-top: 0px;
                     }
                  }
               }

            }
         }
      }
   }
}

/* // ----------------------------------------------------------------------------------- */



/* Layout: Values 
----------------------------------------------------------------------------------------- */ 
.section---values {

   & .row {

      @media all and (max-width: 650px) {
         --grid-col-flex: 100%;
         grid-row-gap: var(--grid-small);
      }

      & .column {

         & .text---mod {

            & h2 {
               --text-color: var(--col-green-3);
            }
            & h3 {
               --text-color: var(--col-green-4);
               font-family: var(--type-semi);
               & + p {
                  margin-top: var(--base-grid);
               }
            }

            & p {
               border-bottom: 1px solid var(--col-green-3);
               padding-bottom: var(--grid-small);
               margin-bottom: var(--grid-small);
               &:last-child {
                  border-bottom: 0px;
               }
            }
         }
      }
   }
}
/* // ----------------------------------------------------------------------------------- */



/* Layout: Map section 
----------------------------------------------------------------------------------------- */ 
.section---map {

   & .row {

      @media all and (max-width: 800px) {
         grid-template-columns: 100%;
      }

      &:first-child {
         grid-column-gap: var(--grid-med);

         & .column {
            
            &:nth-child(2) {
               padding-top: var(--h3);
            }
         }

         & .text---mod {

            & .text {
               & h2 {
                  --text-color: var(--col-green-4)!important;
               }

               & h5 {
                  --text-color: var(--col-green-3)!important;
               }

               & p {
                  --text-color: var(--col-green-2);
               }
            }
         }
      }

      & .column {

         & .text-container---map {
            margin-top: var(--grid-small);

            & .text {
               display: grid;
               grid-template-columns: 60% auto;
               grid-column-gap: var(--grid-small);

               @media all and (max-width: 1000px) {
                  grid-template-columns: 100%;
                  grid-row-gap: var(--grid-small);
               }

               & > p {
                  display: none;
               }

               & .main-map-wrapper {
                  background-color: var(--col-green-2);
                  border-radius: var(--border-radius);
                  padding: var(--grid-large);
                  height: fit-content;
                  
                  @media all and (max-width: 1000px) {
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                  }

                  @media all and (max-width: 750px) {
                     padding: var(--grid-small);
                  }
                  @media all and (max-width: 500px) {
                     padding: var(--grid-med) var(--grid-small);
                  }

                  & .project-map-container {

                     @media all and (max-width: 1000px) {
                     }

                     & img {
                        @media all and (max-width: 1000px) {
                           min-height: 35vh;
                        }
                        @media all and (max-width: 650px) {
                           min-height: auto;
                        }
                     }

                     & .project-map-points-layer {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;

                        .project-map-point {
                           position: absolute;
                           transform: translate(-50%, -50%);
                           
                           &.active {
                              & .dot {
                                 transform: scale(1.3);
                                 background-color: var(--col-green-3);
                                 border: 8px solid var(--col-light);

                                 &:hover {
                                    border: 3px solid var(--col-light);
                                 }
                              }
                           }

                           & .dot {
                              width: 20px;
                              height: 20px;
                              border-radius: 50%;
                              display: block;
                              border: 8px solid var(--col-green-3);
                              background: var(--col-light);
                              cursor: pointer;
                              transition: var(--trn-med);

                              @media all and (max-width: 500px) {
                              }

                              &:hover {
                                 transform: scale(1.3);
                                 border: 3px solid var(--col-green-3);
                              }
                           }
                        }
                     }
                  }
               }

               & .interactive---map-locations {
                  background-color: var(--col-green-2);
                  border-radius: var(--border-radius);
                  display: grid;
                  grid-row-gap: var(--base-grid);
                  padding: var(--base-grid);
                  position: relative;
                  overflow-y: scroll;

                  & .map-location-entry {
                     --text-color: var(--col-green-2);
                     background-color: var(--col-neutral);
                     width: 100%;
                     margin:0 auto;
                     border-radius: calc(var(--border-radius) / 1.5);
                     padding: var(--grid-small);
                     display: grid;
                     grid-template-columns: 100%;
                     grid-row-gap: 20px;
                     cursor: pointer;
                     transition: var(--trn-med);

                     @media all and (max-width: 1000px) {
                           grid-template-columns: repeat(auto-fit, minmax(33%, auto));

                           & .map-location-site {
                              grid-column: 1 / span all;
                           }  
                     }
                     @media all and (max-width: 500px) {
                        grid-template-columns: 100%;

                        & .map-location-site {
                           grid-column: 1;
                        }  
                     }

                     &:hover {
                        background-color: var(--col-green-4);
                     }

                     &.active {
                        background-color: var(--col-green-4);
                     }

                     & .map-location-site {
                        height: max-content;

                        & p {
                           font-size: var(--h3);
                        }
                     }
                     & .map-location-projects {
                        height: max-content;
                     }

                     & h6 {
                        --text-color: var(--col-green-3);
                        padding-bottom: var(--grid-mini);
                     }

                     & p {
                        font-size: var(--body-lrg);

                        & a {
                           color: inherit;
                           text-decoration: underline;

                           &:hover {
                              color: var(--col-green-3);
                           }
                        }
                     }
                  }
               }
            }
         }

      }
   }
}

/* // ----------------------------------------------------------------------------------- */



/* Layout: Images 
----------------------------------------------------------------------------------------- */ 
.section---image-only {
   padding: 0px!important;

   & .row {
      width: 100%!important;
      max-width: 100%!important;

      & .image {
         

         & .imgWrap {
            height: 100%;
            width: 100%;
            display: flex;

            & img {
               width: 100%;
               height: 100%;
               object-fit: cover;
            }
         }
      }
   }

   &.section---image-footer {
      & .image {
         @media all and (max-width: 550px) {
            min-height: clamp(500px, 75vh, 650px);
         }
      }
   }
}

/* // ----------------------------------------------------------------------------------- */




/* Layout: Foundation partners 
----------------------------------------------------------------------------------------- */ 
.section---foundation {

   & .row {

      &:nth-child(2) {
         margin-top: var(--grid-med)!important;
         margin-bottom: var(--grid-med)!important;

         & .column {
            --grid-logo: repeat(auto-fit, minmax(100px, 150px));
            
            display: grid;
            grid-template-columns: var(--grid-logo);
            grid-column-gap: var(--grid-med);
            grid-row-gap: var(--grid-small);
            
            & .image {
            }
         }
      }
      &:nth-child(3) {
         
         & .column {
            display: grid;
            grid-template-columns: auto max-content max-content;

            @media all and (max-width: 750px) {
               grid-template-columns: min-content auto auto;
               grid-row-gap: var(--base-grid);
            }

            & .text---mod {
               max-width: clamp(50%, 550px, 85%);

               @media all and (max-width: 750px) {
                  grid-column: 1 / span 3;
                  max-width: 100%;
               }
            }

            & .button {
               @media all and (max-width: 750px) {
                  grid-row: 2;
                  min-width: max-content;

                  &:last-child {
                     grid-row: 3;
                     margin-left: 0px!important;
                  }
               }
            }
         }
      }

      & .column {

         & .button {
            margin-top: 0px!important;

            & .btn---link {
               height: fit-content;
            }
            
            & + .button {
               margin-left: var(--base-grid);
               & .btn---link {
                  --text-color: var(--col-light);
                  --bg-gradient: var(--btn-gradient-green-1);
               }
            }
         }
      }
   }
}


/* // ----------------------------------------------------------------------------------- */



/* Layout: Partnerships (logos) 
----------------------------------------------------------------------------------------- */ 
.section---partners {

   & .row {
      display: grid;
      grid-template-columns: 100%;

      & + .row {
         margin-bottom: var(--grid-large)!important;
         padding-bottom: var(--grid-large)!important;
         border-bottom: 1px solid var(--col-orange);
      }
      &:last-child {
         border-bottom: 0px;
         padding-bottom: 0px!important;
         margin-bottom: 0px!important;
      }

      & .column {
         width: 100%;

         &.column---col-1 {
            margin-bottom: var(--grid-small);
         }
         &.column---col-2 {
            --grid-col-flex: repeat(6, 1fr);
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, auto));
            grid-gap: clamp(50px, 5vw, 100px);

            & .image {
               border-radius: var(--border-radius-pt);
               overflow: hidden;

               & .imgWrap {

                  & img {
                     height: 100%;
                     object-fit: contain;
                  }
               }
            }
         }

      }
   }
}

/* // ----------------------------------------------------------------------------------- */



/* Layout: Partnerships (tiers) 
----------------------------------------------------------------------------------------- */ 
.section---partner-tiers {
   background-image: var(--gradient-orange-2);

   & .row {

      &.row---cols-4 {
         grid-gap: var(--base-grid);
         padding: var(--grid-med) 0;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         grid-auto-rows: 1fr;

         @media all and (max-width: 550px) {
            grid-auto-rows: auto;
         }
         
         & .column {
            --text-color: var(--col-green-2);
            background-color: var(--col-neutral);
            border-radius: var(--border-radius-pt);
            padding: var(--grid-small);

            & .text---mod {

               & .text {

                  & h2 {
                     --text-color: var(--col-green-3);
                     font-size: calc(var(--h2) * 1.3);
                     font-family: var(--type-reg);
                     margin-bottom: var(--grid-small);
                     margin-top: var(--grid-tiny);
                  }

                  & p {
                     padding-bottom: var(--grid-mini);
                     border-bottom: 1px solid var(--col-yellow-1);

                     &:first-child {
                        border-bottom: 0px;
                     }
                     &:nth-child(3) {
                        border-bottom: 0px;
                     }
                     &:last-child {
                        border-bottom: 0px;
                     }

                     & em {
                        --text-color: var(--col-green-3);
                        font-style: normal;
                        border: 1px solid var(--col-green-3);
                        border-radius: var(--border-radius);
                        padding: var(--grid-puny) var(--grid-tiny);
                     }
                  }
               }
            }
         }
      }

      & .column {

      }
   }
}

/* // ----------------------------------------------------------------------------------- */




/* Layout: Tools and Calc links 
----------------------------------------------------------------------------------------- */ 
.page---tools-and-calculators {

   & .section---neutral {
      & .text---mod {
         & h3 {
            --text-color: var(--col-green-3);
         }
         & a {
            color: inherit;
            text-decoration: underline;
            text-decoration-color: var(--col-green-3);
            text-underline-offset: 3px;
            transition: var(--trn-short);

            &:hover {
               color: var(--col-green-4);
            }
         }
         & ul {
            & li {
               &::before {
                  --text-color: var(--col-green-3);
               }
            }
         }
      }
   }
}
.section---tools {

   & .row {

      & .column {

         & .text---mod {

            & h3 {
               --text-color: var(--col-green-3);
            }

            & p {

               & br {
                  display: none;

                  @media all and (max-width: 750px) {
                     display: block;
                  }
               }

               & strong {
                  font-size: var(--body-std);
                  font-style: normal;
                  color: var(--col-green-2);
                  padding-bottom: var(--grid-mini);
               }
               & a {
                  font-size: var(--body-std);
                  font-family: var(--type-med);
                  color: var(--col-green-2);
                  text-decoration: underline;
                  text-decoration-color: var(--col-green-3);
                  text-underline-offset: 3px;
                  margin-right: var(--base-grid);
                  transition: var(--trn-short);

                  &:hover {
                     color: var(--col-green-4);
                  }

                  & em {
                     font-style: normal;
                  }
               }
               & + p {
                  padding-top: var(--base-grid);

                  @media all and (max-width: 750px) {
                     padding-top: var(--base-grid);
                  }
               }

               @media all and (max-width: 750px) {
                  line-height: 1.6;
               }
            }

            & + .text---mod {
               margin-top: var(--grid-med);
            }

         }
      }
   }
}

/* // ----------------------------------------------------------------------------------- */





/* Layout: Publications 
----------------------------------------------------------------------------------------- */ 
.page---publications {

   & .section---publications {
      --grid-pub: repeat(4, 1fr);

      & .row {

         & .column {
            display: grid;
            grid-template-columns: var(--grid-pub);
            grid-auto-rows: 1fr;
            grid-gap: var(--base-grid);

            & .text {
               --text-color: var(--col-light);

               background-color: var(--col-green-3);
               padding: var(--grid-small);
               border-radius: var(--border-radius-pt);
               display: grid;
               grid-template-rows: 1fr auto;
               height: 100%;

               & p {
                  font-size: var(--h4);

                  & a {

                  }
               }
            }
         }
      }

      @media all and (max-width: 950px) {
         --grid-pub: repeat(3, 1fr);
      }
      @media all and (max-width: 650px) {
         --grid-pub: repeat(2, 1fr);
      }
      @media all and (max-width: 500px) {
         --grid-pub: repeat(1, 1fr);
      }
   }
}
/* // ----------------------------------------------------------------------------------- */






/* Page: Contact (no form) 
----------------------------------------------------------------------------------------- */ 
.page---contact {

   & .section---details {
      
      & .row {
         grid-template-columns: 30% auto;
         grid-column-gap: var(--grid-med);

         @media all and (max-width: 800px) {
            grid-template-columns: 100%;
            grid-row-gap: var(--grid-small);
         }
         
         & .column {
            
            & .text---mod {

               & .text {
                  & h6 {
                     color: var(--col-green-3);
                     font-size: var(--h5);
                     margin-bottom: 5px;
                  }
                  & p {
                     color: var(--col-green-2);
                     font-size: var(--h4);

                     & a {
                        color: var(--col-green-2);
                        font-size: var(--body-lrg);
                        text-decoration: underline 1px;
                        text-underline-offset: 3px;
                        transition: var(--trn-short);
                        cursor: pointer;

                        &:hover {
                           color: var(--col-green-3);
                        }
                     }

                     & + h6 {
                        margin-top: var(--grid-small);
                     }
                  }
               }
            }
            &.column---col-2 {
               display: grid;
               grid-template-columns: max-content max-content max-content;
               grid-column-gap: var(--grid-med);

               @media all and (max-width: 650px) {
                  grid-template-columns: 100%;
                  grid-row-gap: var(--base-grid);
               }
            }
         }
      }
   }


}
/* // ----------------------------------------------------------------------------------- */




/* Layout: Filter bars 
----------------------------------------------------------------------------------------- */ 
.page-has-filter {
   --widget-width: clamp(225px, 50%, 275px)!important;
   & .wpc-edit-filter-set {
      display: none;
   }

   .bar---filter {
      background-color: var(--col-light);
      margin-bottom: var(--grid-large);
      position: sticky;
      top: var(--navigation-height);
      padding: var(--grid-small) 0 10px 0;

      @media all and (max-width: 850px) {
         margin-bottom: var(--grid-med);
      }
      @media all and (max-width: 550px) {
         padding: var(--base-grid) 0 10px 0;
      }

      & .code---inner {
         background-color: var(--col-green-3);
         border-radius: var(--border-radius);
         display: flex;
         justify-content: center;
         align-items: center;
         column-gap: var(--base-grid);
         padding-top: var(--base-grid);
         padding-bottom: var(--base-grid);
         outline: var(--col-light) solid 10px;
         outline-offset: 10px;

         @media all and (max-width: 850px) {
            flex-direction: column;
            align-items: flex-start;
            row-gap: var(--base-grid);
            padding: var(--grid-med);
         }
         @media all and (max-width: 550px) {
            padding: var(--grid-small);
         }

         /* Filter by text */
         & p {
            --text-color: var(--col-light);
            font-size: var(--body-std);
            margin-right: var(--grid-mini);
         }
         
         /* Widgets (filter + sorting) */
         & .widget_wpc_filters_widget, .widget_wpc_sorting_widget {
            width: var(--widget-width);

            @media all and (max-width: 850px) {
               width: 100%;
            }

            & .select2-container {
               width: var(--widget-width);

               @media all and (max-width: 850px) {
                  width: 100%!important;
               }

               & .selection {

                  & .select2-selection {
                     background-color: var(--col-green-3);
                     border: 1px solid var(--col-light);
                     border-radius: 50px;

                     & .select2-selection__rendered {
                        color: var(--col-light);
                        width: var(--widget-width);
                        display: block;
                        min-height: auto;

                        & .wpc-dropdown-default {
                           font-size: var(--body-std);
                        }
                        & > span {
                           width: var(--widget-width);
                           display: contents;
                           font-size: var(--body-std);
                        }
                     }
                     & .select2-selection__arrow {
                        background-color: transparent;

                        & b {
                           border-left: 2px solid var(--col-light);
                           border-top: 2px solid var(--col-light);
                           right: 14px;
                        }
                     }
                  }
               }  
            }

            & .wpc-sorting-form {
               position: relative;
               z-index: 2;

               & .select2-selection__rendered {
                  font-size: var(--body-std);
               }
            }
            & .wpc-after-sorting-form {
               & .select2-container--open {
                  z-index: 1;
               }
            }

            & .select2-container--open {
               z-index: 3;

               & .select2-dropdown {
                  background-color: var(--col-green-2);
                  border: 1px solid var(--col-green-3);
                  border-radius: 20px 20px var(--border-radius-pt) var(--border-radius-pt);
                  padding-top: var(--grid-small);
                  top: calc(var(--grid-small) * -1);

                  & .select2-search {
                     display: none;
                  }
                  & .select2-results {
                     display: flex;

                     & ul {
                        padding: var(--base-grid);
                        max-height: max-content;
                        display: flex;
                        flex-direction: column;
                        row-gap: var(--grid-mini);

                        & li {
                           padding: 0px;
                           transition: var(--trn-med);

                           &.select2-results__option--highlighted {
                              background-color: transparent!important;

                              & span {
                                 color: var(--col-green-4);
                              }
                           }
                           &.select2-results__option--selected {
                              background-color: transparent!important;

                              & span {
                                 color: var(--col-green-4);
                                 font-family: var(--type-med);
                              }
                           }

                           & span {
                              color: var(--col-light);
                              font-size: var(--body-std);
                              line-height: var(--ln-ht-loose);
                           }
                        }
                     }
                  }
               }
            }
         }
         
         /* Filter widget only extra styles */
         & .wpc-filters-main-wrap {

               & .wpc-filters-widget-content {

                  & .wpc-filters-widget-containers-wrapper {
                     position: relative;
                     z-index: 4;

                     & .wpc-filters-section {
                        margin-bottom: 0px;

                        & .wpc-filter-header {
                           display: none;
                        }
                     }
                  }
               }
            }
      }
   }
}

/* // ----------------------------------------------------------------------------------- */





/* SHAPES: All 
----------------------------------------------------------------------------------------- */ 
.section---has-shape {
   position: relative;
   
   & .row---has-shape {
      position: relative;

      & .shape---svg {
         position: absolute;
         width: var(--shape-width);
         height: auto;
      }

   }

   /* Home: programs (green circle) */
   &.section---programs {
      --shape-width: clamp(10vw, 200px, 15vw);
      
      & .module---programs {
         z-index: 1;
         position: relative;
      }

      & .shape---svg {
/*         right: calc(var(--shape-width) * -1.2);*/
         bottom: calc(var(--shape-width) * 0.5);
         right: -50%;
         z-index: 0;

         & circle {
            fill: url(#green-linear-3);
         }
      }
   }

   /* About: numbers (green blob)  */
   &.section---numbers {
      --shape-width: clamp(40vw, 700px, 50vw);
      
      & .row---has-shape {
         z-index: 1;
         overflow: hidden;

         & .shape---svg {
            left: calc((var(--shape-width) / 1.9) * -1);
            top: calc((var(--shape-width) / 4) * -1);
            transform: rotate(180deg);

            & path {
               fill: url(#green-linear-2);
            }
         }
      }
   }

   /* About: values (yellow circle) + green blobby in CTA */
   &.section---values {
      --shape-width: clamp(20vmax, 350px, 35vmax);
      --x-pos: clamp(-25%, -30vw, -40%);
      --y-pos: -50%;
      position: relative;
      z-index: -2;

      @media all and (max-width: 750px) {
         --shape-width: clamp(20vmax, 250px, 30vmax);
         --y-pos: -30%;
      }
      
      & .shape---svg {
         right: var(--x-pos);
         top: var(--y-pos);
         z-index: -2;

         & circle {
            fill: url(#yellow-linear);
         }
      }

      & + .section---has-shape {
         --shape-width: clamp(20vw, 400px, 30vw);

         & .shape---svg {
            transform: rotate(90deg);
            left: calc((var(--shape-width) / 1.5) * -1);
            top: calc((var(--shape-width) / 1.4) * -1);

            & path {
               fill: url(#green-linear-2);
            }
         }
      }
   }

   /* About: Fullwidth image (yellow blobby) */
   &.section---image-only.section---about {
      --shape-width: clamp(80vw, 1500px, 90vw);
      
      & .row---has-shape {
         z-index: 1;
         overflow: hidden;

         & .shape---svg {
            left: calc((var(--shape-width) / 1.6) * -1);
            top: calc((var(--shape-width) / 4) * -1);
            transform: rotate(180deg);

            & path {
               fill: url(#yellow-linear-2);
            }
         }
      }
   }

   /* Partnerships: Full width image */ 
   &.section---image-only.section---partnerships {
      --shape-width: clamp(80vw, 1500px, 90vw);

      & .row---has-shape {
         z-index: 1;
         overflow: hidden;

         & .shape---svg {
            left: calc((var(--shape-width) / 1.6) * -1);
            top: calc((var(--shape-width) / 4) * -1);
            transform: rotate(180deg);

            & path {
               fill: url(#yellow-linear);
            }
         }
      }

   }

   &.section---content {
      --shape-width: clamp(40vw, 900px, 80vw);

      & .shape---svg {
         right: clamp(-60%, -1700px, -100%);
         top: calc((var(--shape-width) / 6) * -1);

         & path {
            fill: url(#yellow-linear-2);
         }
      }

      & + .section---content {
         position: relative;
         z-index: 1;

         & + .section---white {
            position: relative;
            z-index: 1;
         }
      }

   }

   
}


/* // ----------------------------------------------------------------------------------- */















/* MASKS: ALL 
----------------------------------------------------------------------------------------- */ 
/* ALL -------- */
.section---split-image {
   padding: 0px!important;

   @media all and (min-width: 1350px) {
      max-height: 800px;
   }
   @media all and (max-width: 700px) {
      height: fit-content!important;
      max-height: fit-content!important;
   }

   &.section---orange {
      & .col---text {
         & h3 {
            --text-color: var(--col-light)!important;
         }
      }
   }

   & .row {
      width: 100%!important;
      max-width: 100%!important;
      height: 100%;
      grid-template-columns: var(--grid-col-shapes);

      @media all and (max-width: 700px) {
         --grid-col-shapes: 100%;
      }

      & .col---has-image {
         position: relative;
         justify-self: var(--grid-col-pos);
         grid-column: var(--col-number-img);
         
         @media all and (min-width: 1350px) {
            max-width: clamp(400px, 40vw, 800px);
            max-height: fit-content;
         }

         @media all and (max-width: 700px) {
            --col-number-img: 1;
            width: clamp(40vw, 600px, 50vw);
            height: fit-content;
         }
         @media all and (max-width: 600px) {
            width: 75%;
         }

         & .image {
            line-height: 0;
            height: 100%;
            mask-image: var(--mask-image);
            -webkit-mask-image: var(--mask-image);
            mask-mode: luminance;
            webkit-mask-mode: luminance;
            mask-repeat: no-repeat;
            webkit-mask-repeat: no-repeat;
            mask-position: var(--mask-pos);
            mask-size: 100%;
            -webkit-mask-size: 100%;

            & .imgWrap {
               display: block;
               height: 100%;

               & img {
                  aspect-ratio: 0.9 / 1;
                  object-fit: cover;
                  object-position: 50% 100%;
               }
            }
         }
         & #home-shape-other {
            position: absolute;
            top: 0;
            left: 0;

            & .other-circle {
               fill: url(#yellow-radial);
            }
            & .other-blob-1 {
               fill: var(--col-neutral);
            }
            & .other-blob-2 {
               fill: var(--col-neutral);
            }
         }
         & #about-shape {
            position: absolute;
            top: 0;
            right: 0;

            & .blob {
               fill: url(#green-linear-3);
            }
         }
         & #research-shape {
            position: absolute;
            top: 0;
            right: 0;

            & .semi-1 {
               fill: url(#yellow-linear);
            }
            & .semi-2 {
               fill: url(#green-linear-3);
            }
         }
         & #research-shape-other {
            position: absolute;
            top: 0;
            right: 0;

            & .blob {
               fill: url(#green-linear-3);
            }
         }
      }

      & .col---text {
         display: flex;
         flex-direction: column;
         justify-content: center;
         max-width: calc(var(--content-max) / 2);
         width: var(--content-width);
         justify-self: var(--grid-col-pos);
         grid-column: var(--col-number-text);

         @media all and (max-width: 700px) {
            --col-number-text: 1;
            width: var(--content-width);
            margin: 0 auto;
            padding: var(--text-padding);
         }

         & h3 {
            --text-color: var(--col-green-3);
         }
      }
   }
}


/* HOME -------- */
.home {
   --mask-image: url('/wp-content/themes/Divi-child/svg/masks/home-other.svg');
   --mask-pos: right top;
   --mask-min-height: clamp(35vh, 550px, 65vh);
   --grid-col-pos: start;
   --col-number-text: 3;
   --col-number-img: 1;
   --grid-col-shapes: 45% 5% 50%;
   --text-padding: 0 0 var(--grid-huge) 20vw;

   @media all and (max-width: 600px) {
      & .section---split-image {
         & .col---text {
            --text-padding: var(--grid-huge) 0;
         }
      }
   }
}

/* RESEARCH -------- */
.page---our-research {
   --mask-image: url('/wp-content/themes/Divi-child/svg/masks/research-other.svg');
   --mask-pos: right top;
   --grid-col-pos: start;
   --col-number-text: 3;
   --col-number-img: 1;
   --grid-col-shapes: 45% 5% 50%;
   --text-padding: 0 0 var(--grid-huge) 0;

   & .section---indigenous {
      --mask-image: url('/wp-content/themes/Divi-child/svg/masks/about-other.svg');
      --mask-pos: right top;
      --mask-min-height: clamp(50vh, 750px, 95vh);
      --grid-col-pos: end;
      --col-number-text: 1;
      --col-number-img: 3;
      --grid-col-shapes: 50% 5% 45%;
      --text-padding: 0 20vw var(--grid-huge) 0;

      @media all and (max-width: 700px) {
         & .row {
            & .col---text {
               --text-padding: 0 0 var(--grid-huge) 0;
               grid-row: 2;

               & h6, & h3 {
                  padding-right: var(--grid-huge);
               }
            }
            & .col---has-image {
               grid-row: 1;
            }
         }
      }
      @media all and (min-width: 1350px) {
         & .col---has-image {
            max-width: clamp(400px, 35vw, 700px);
         }
      }
   }
}

/* ABOUT -------- */
.page---about {
   --mask-image: url('/wp-content/themes/Divi-child/svg/masks/about-other.svg');
   --mask-pos: left top;
   --mask-min-height: clamp(50vh, 750px, 95vh);
   --grid-col-pos: end;
   --col-number-text: 1;
   --col-number-img: 3;
   --grid-col-shapes: 50% 5% 45%;
   --text-padding: 0 20vw var(--grid-huge) 0;

   & .row {
      @media all and (max-width: 700px) {
         
         & .col---has-image {
            grid-row: 1;
         }
         & .col---text {
            grid-row: 2;
            --text-padding: 0 0 var(--grid-large) 0;

            & h3 {
               padding-right: var(--grid-med);
            }
            & h6 {
               padding: var(--grid-large) var(--grid-huge) 0 0;
            }
         }
      }
      @media all and (min-width: 1350px) {
         & .col---has-image {
            max-width: clamp(400px, 35vw, 700px);
         }
      }
   }
}


/* // ----------------------------------------------------------------------------------- */
















/* Template page: Legal
----------------------------------------------------------------------------------------- */
.page---legal {

   & .section {
      & .row {
         & .column {
            & h1 {
               --text-color: var(--col-green-3);
               margin-bottom: var(--grid-med);
            }
            & h3 {
               font-style: normal;
               font-size: calc(var(--h3) * 0.9);
               color: var(--col-green-3);
               & b {
                  font-weight: normal;
               }
               & + ul {
                  margin-top: var(--base-grid);
               }
            }
            & ul {
               & li {
                  &::before {
                     --text-color: var(--col-green-3);
                  }
               }
               & + h3 {
                  margin-top: var(--grid-small);
               }
            }
            & p {
               & + h3 {
                  margin-top: var(--grid-small);
               }
            }
         }
      }
   }
}

/* // ----------------------------------------------------------------------------------- */








/* Template page: 404
----------------------------------------------------------------------------------------- */
.error404 {
   background-color: var(--col-primary);

   & .section {
      padding-top: var(--grid-gigantic);

      & .row {

         & .column {
            display: flex;
            flex-direction: column;
            align-items: center;

            & h1 {
               font-size: calc(var(--h1) * 4);
               color: var(--col-secondary);
               text-align: center;
            }

            & p {
               color: var(--col-secondary);
               font-size: var(--body-std);
               text-align: center;
            }

            & .button {
               margin-top: var(--grid-small);
            }
         }
      }
   }
}

/* // ----------------------------------------------------------------------------------- */








/* // End of document        ----------------------------------------------------------------- */