/** These are generated based on the colors gotten from https://hihayk.github.io/scale/#0/11/14/99/-360/360/100/-99/0d0d0d/13/13/13/white */
 
 
 
 
 
 
 
 
 
    @font-face {
font-family:'EB Garamond';
font-display:swap;
font-style:italic;
font-weight:400 800;
src:url(https://johnmcdonaldco.com/assets/fonts/ebgaramond-italic-variablefont-wght.ttf) format('truetype');
}
    @font-face {
font-family:'Montserrat';
font-display:swap;
font-style:normal;
font-weight:100 900;
src:url(https://johnmcdonaldco.com/assets/fonts/montserrat-variablefont-wght.ttf) format('truetype');
}
    @font-face {
font-family:'Montserrat';
font-display:swap;
font-style:italic;
font-weight:100 900;
src:url(https://johnmcdonaldco.com/assets/fonts/montserrat-italic-variablefont-wght.ttf) format('truetype');
}
:root {
    --bs-info-rgb: 6, 33, 46;
    --bs-info-hsl: 200 76.9% 10.2%;
    --bs-info-hex: #06212e;
    --bs-info: rgb(6, 33, 46);
    --bs-dark-rgb: 35, 31, 32;
    --bs-dark-hsl: 345 6.1% 12.9%;
    --bs-dark-hex: #231f20;
    --bs-dark: rgb(35, 31, 32);
    --bs-white-rgb: 255, 255, 255;
    --bs-white-hsl: 0 0% 100%;
    --bs-white-hex: #fff;
    --bs-white: rgb(255, 255, 255);
    --bs-black-rgb: 35, 31, 32;
    --bs-black-hsl: 345 6.1% 12.9%;
    --bs-black-hex: #231f20;
    --bs-black: rgb(35, 31, 32);
    --bs-primary-rgb: 118, 139, 155;
    --bs-primary-hsl: 206 15.6% 53.5%;
    --bs-primary-hex: #768b9b;
    --bs-primary: rgb(118, 139, 155);
    --bs-body-color-rgb: 77, 74, 75;
    --bs-body-color-hsl: 340 2% 29.6%;
    --bs-body-color-hex: #4d4a4b;
    --bs-body-color: rgb(77, 74, 75);
    --bs-light-rgb: 242, 242, 242;
    --bs-light-hsl: 0 0% 94.9%;
    --bs-light-hex: #f2f2f2;
    --bs-light: rgb(242, 242, 242);
    --bs-danger-rgb: 35, 31, 32;
    --bs-danger-hsl: 345 6.1% 12.9%;
    --bs-danger-hex: #231f20;
    --bs-danger: rgb(35, 31, 32);
    --bs-gray-100-rgb: 239, 239, 239;
    --bs-gray-100-hsl: 0 0% 93.7%;
    --bs-gray-100-hex: #efefef;
    --bs-gray-100: rgb(239, 239, 239);
   --bs-gray-200-rgb: 187, 187, 187;
    --bs-gray-200-hsl: 0 0% 73.3%;
    --bs-gray-200-hex: #bbb;
    --bs-gray-200: rgb(187, 187, 187);
   --bs-gray-300-rgb: 166, 166, 166;
    --bs-gray-300-hsl: 0 0% 65.1%;
    --bs-gray-300-hex: #a6a6a6;
    --bs-gray-300: rgb(166, 166, 166);
  --bs-gray-400-rgb: 129, 136, 152;
    --bs-gray-400-hsl: 222 10% 55.1%;
    --bs-gray-400-hex: #818898;
    --bs-gray-400: rgb(129, 136, 152);
   --bs-gray-500-rgb: 122, 122, 122;
    --bs-gray-500-hsl: 0 0% 47.8%;
    --bs-gray-500-hex: #7a7a7a;
    --bs-gray-500: rgb(122, 122, 122);
  --bs-gray-600-rgb: 100, 100, 100;
    --bs-gray-600-hsl: 0 0% 39.2%;
    --bs-gray-600-hex: #646464;
    --bs-gray-600: rgb(100, 100, 100);
  --bs-gray-700-rgb: 78, 78, 78;
    --bs-gray-700-hsl: 0 0% 30.6%;
    --bs-gray-700-hex: #4e4e4e;
    --bs-gray-700: rgb(78, 78, 78);
 --bs-gray-800-rgb: 57, 57, 57;
    --bs-gray-800-hsl: 0 0% 22.4%;
    --bs-gray-800-hex: #393939;
    --bs-gray-800: rgb(57, 57, 57);
   --bs-gray-900-rgb: 35, 35, 35;
    --bs-gray-900-hsl: 0 0% 13.7%;
    --bs-gray-900-hex: #232323;
    --bs-gray-900: rgb(35, 35, 35);
    /** Generic padding values, replace with psd values */
    --pad-sm: 50px;
    --pad-md: 100px;
    --pad-lg: 150px;
    --pad-xl: 200px;
    --ease-out: cubic-bezier(0.075, 0.82, 0.165, 1);
    --montserrat: 'Montserrat', var(--bs-font-sans-serif);
    --bs-heading-color: var(--bs-dark);
    --bs-border-color: rgb(145, 153, 160);
    text-rendering: geometricPrecision;
}

::selection {
    background-color: var(--bs-info);
    color: var(--bs-black);
}

body{
    font-size:21px;
    line-height:calc(30 / 21);
    font-family: 'EB Garamond', serif;
    overflow-x:hidden;
}
section {
    padding-block: var(--pad-sm);
    @media (min-width:768px){
        padding-block: var(--pad-md);
    }
}
a {
    --bs-link-color-rgb: var(--bs-black-rgb);
    --bs-link-hover-color-rgb: var(--bs-primary-rgb);
    text-decoration:none;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
    text-wrap: balance;
}
h1, .h1{
 font-weight:400;
 font-size:48px;
 line-height:1;
 @media (min-width:768px){
     font-size:60px;
 }
}
h2, .h2{
 font-weight:400;
 font-size:34px;
 line-height:calc(42 / 34);
 margin-bottom:25px;
}
h3, .h3{
    font-size:24px;
    font-weight:600;
    line-height:calc(42 / 24);
    margin-bottom:12px;
    font-family: var(--montserrat);
    & i{
        color: var(--bs-primary);
        font-weight:400;
        /* font-family: 'EB Garamond', serif; */
        display:block;
    }
}
h4, .h4{
    font-size:21px;
    line-height:calc(30 / 21);
    font-weight:600;
    font-family: var(--montserrat);
}
h5, .h5{
    font-weight:600;
    font-size:18px;
    font-family: var(--montserrat);
}
h6, .h6{
    font-weight:400;
    font-size:15px;
    letter-spacing:0.025rem;
    line-height:21px;
    margin-bottom:0;
    font-family: var(--montserrat);
}
.--light-gray {
    background-color: var(--bs-light);
}
.garamond{
    font-family: 'EB Garamond', serif;
}
.montserrat{
    font-family: var(--montserrat);
}
.btn{
    --bs-btn-font-family: var(--montserrat);
    --bs-btn-font-size: 18px;
    --bs-btn-line-height:20px;
    --bs-btn-border-radius:4px;
    --bs-btn-padding-y: .875rem;
    --bs-btn-font-weight: 600;
    transition: opacity 300ms ease, color 300ms ease;
}
.btn-primary{
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-light:hover,
.btn-light:focus,
.btn-link:hover,
.btn-link:focus,
.btn-outline-dark:hover,
.btn-outline-dark:focus{
    opacity:.65;
}
.btn-primary:disabled,
.btn-primary.disabled,
.btn-light:disabled,
.btn-light.disabled,
.btn-link:disabled,
.btn-link.disabled,
.btn-outline-dark:disabled,
.btn-outline-dark.disabled{
    opacity:.65;
}
.btn-light{
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--bs-white);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-border-color: var(--bs-white);
    --bs-btn-focus-shadow-rgb: 255,255,255;
    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: var(--bs-white);
    --bs-btn-active-border-color: var(--bs-white);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.125);
    --bs-btn-disabled-color: var(--bs-dark);
    --bs-btn-disabled-bg: var(--bs-white);
    --bs-btn-disabled-border-color: var(--bs-white);
}
.btn-outline-dark {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--bs-dark);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-dark-rgb), 0.125);
    --bs-btn-disabled-color: var(--bs-dark);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-dark);
    --bs-gradient: none
}
.btn-link{
    text-decoration:none;
    --bs-btn-font-size: 21px;
    --bs-btn-line-height:1;
    --bs-btn-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-primary);
    & svg{
        fill: var(--bs-primary);
        height:18px;
    }
}
[data-focal-point] {
    object-position: var(--y, center) var(--x, center) !important;
}

[data-focal-point][data-focal-bg] {
  background-position: var(--y, center) var(--x, center) !important;
}

[data-focal-point^=top i] {
  --y: top;
}

[data-focal-point^=bottom i] {
  --y: bottom;
}

[data-focal-point$=left i] {
  --x: left;
}

[data-focal-point$=right i] {
  --x: right;
}

hr{
    opacity:1;
    border-color:var(--bs-gray-100);
}

/** Icons source: https://css.gg/close-r  */
.navbar {
    position: absolute;
    z-index: 4;
    --bs-btn-hover-color: var(--bs-primary);
    --bs-navbar-brand-padding-y: 0;
    --bs-navbar-brand-margin-end: 0;
    & .btn-link{
        --bs-btn-font-size: 18px;
        --bs-btn-line-height:20px;
        --bs-btn-color: var(--bs-dark);
        --bs-btn-hover-color: var(--bs-dark);
        --bs-btn-active-color: var(--bs-dark);
    }
    &:is(.navbar--, .navbar--white){
        & .btn-link{
            --bs-btn-color: var(--bs-white);
            --bs-btn-hover-color: var(--bs-white);
            --bs-btn-active-color: var(--bs-white);
        }
        & button.btn{
            --bs-btn-hover-color: var(--bs-white);
            --bs-btn-active-color: var(--bs-white);
            --bs-btn-active-border-color: var(--bs-white);
            &:hover{
                opacity:.65;
            }
            &:focus{
                opacity:.65;
            }
        }
    }
}
.menu-logo {
    position: absolute;
    top: 1rem;
    left: .75rem;
}
.menu-controller,
.menu-color--light {
    --menu-icon-color: var(--bs-white);
}
.menu-color--dark,
.menu-color--color {
    --menu-icon-color: var(--bs-black);
}
.menu-controller .btn {
    color: var(--menu-icon-color);
}
.menu .btn {
    font-size: 18px;
    display: block;
    position: absolute;
    top: 1rem;
    right: .75rem;
    width: max-content;
    text-transform: uppercase;
    z-index:10;
    --bs-btn-color:#fff;
    --bs-btn-hover-color: var(--bs-primary);
    & svg{
        font-size:28px;
        vertical-align:-.25em;
    }
    &:hover{
        opacity:1;
    }
    &:focus{
        opacity:1;
    }
}
.navbar .mobile-icon{
    font-size:30px;
}
.navbar button.btn {
    gap: 1ch;
    position:relative;
    text-transform: uppercase;
    & svg{
        font-size:28px;
        vertical-align:-.25em;
    }
}
.menu .grid-item--wrapper {
    height: 400px;
}
/** making the buttons position absolute messed with the top values, menu btn needs to be a little bit more */
.menu-light .btn {
    --bs-btn-color:var(--bs-black);
}
.menu-controller {
    position: absolute;
    top: 1.5rem;
    width: 100%;
}
.menu-controller > div {
    display: grid;
    position: relative;
    z-index: 10000;
    align-content: center;
    justify-content: end;
}
.menu-controller .btn {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    gap: 1ch;
    align-items: center;
    --bs-btn-active-color: rgba(var(--bs-white-rgb), 0.75);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
}
#closeMenu {
    font-family: var(--montserrat);
}
.menu {
    width: 100%;
    height: 100vh;
    background-color: var(--bs-black);
    color: white;
    position: fixed;
    z-index: 1100;
    clip-path: circle(0px at 0px 0px);
    font-family: var(--montserrat);
}
.menu-light {
    background-color: white;
    color: var(--bs-black);
}
.menu a {
    text-decoration: none;
    --bs-link-hover-color-rgb: var(--bs-primary-rgb);
    --bs-link-color-rgb: var(--bs-gray-400);
}
.menu a:hover, .menu a:focus {
    --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
    opacity:1;
}
.menu-light a {
    --bs-link-color-rgb: var(--bs-body-color);
}
.menu:not(.is-open) {
    pointer-events: none;
}
.menu p {
    margin: 0;
    font-size: 21px;
    margin-bottom: 10px;
    font-weight: 500;
    color: white;
}
.menu-light p {
    color: var(--bs-black);
}
.menu .list-main-links p {
    margin-bottom: 0;
}
.menu ul {
    list-style-type: none;
    padding-left: 0;
}
.menu li {
    font-size: 18px;
    line-height: calc(21 / 18);
    color: var(--bs-gray-500);
}
.menu-light li {
    color: var(--bs-gray-700);
}
.menu :is([class*="container-"], .container, .row) {
    height: 100%;
}
.menu .list-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    @media (min-width:576px){
        flex-direction: row;
    }
    @media (min-width:768px){
        flex-direction: column;
    }
}
.menu .list-group {
    gap: 10px;
    font-family: 'EB Garamond', serif;
}

.menu .list-item {
    display: flex;
    gap: 1ch;
    align-items: center;
    font-size: 21px;
    line-height: calc(28 / 21);
}
.menu .list-main-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.menu .list-item > a {
    display: flex;
    gap: 0.5ch;
    align-items: center;
    &.active{
        font-weight:700;
    }
}

.menu svg:is([data-ref="icon"]) {
    font-size: 0.75em;
    transform: translateX(-100%);
}
.menu a:hover + svg {
    color: rgb(var(--bs-link-hover-color-rgb));
}
.menu .swiper-container {
    --bs-link-color-rgb: var(--bs-info-rgb);
    display: none;
}
.menu .list-group a {
    text-wrap: balance;
}

.menu .card {
    font-family: 'EB Garamond', serif;
    background-color:var(--bs-black);
    font-size: 1.5rem;
    max-width: 708px;
    outline: 0 solid var(--bs-info);
    overflow: hidden;
    position: relative;
    z-index: 0;
}
.menu .card a {
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
    /* font-size: 18px; */
    /** Minimum is 12px, Maximum is 18px, Relative value is 12px + 10% of the card's width */
    font-size: clamp(12px, 12px + 10%, 18px);
    --bs-link-color-rgb: var(--bs-info-rgb);
}
.menu .card svg {
    margin-left: 0.5ch;
}
.menu .list-item-link {
    display: inline;
    &.active{
        font-weight:700;
    }
}
.menu .list-item-link svg {
    font-size: 17px;
    margin-left: 0.5ch;
}
.menu .card img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    overflow: hidden;
    z-index: -1;
    outline: 2px solid var(--bs-info);
    transition: outline-color 0.25s;
    outline-offset: -2px;
}
.menu .card:not(:hover) img {
    outline-color: transparent;
}
.social-list,
.menu .copy {
    font-size: 21px;
    color: var(--bs-gray-400);
}
.menu-light :is(.copy, .social-list) {
    color: var(--bs-gray-700);
}
.menu .copy {
    font-size: 11px;
}
scroll-to-top {
    transition: opacity 0.25s ease;
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1;
    position: fixed;
    z-index:2;
    right: 2rem;
    bottom: 2rem;
}
scroll-to-top:not([active]) {
    opacity: 0;
}

scroll-to-top .btn {
    position: relative;
    display: block;
    transform: scale(var(--ggs,2));
    background-color:#fff;
    font-size: 14px;
    width: 22px;
    height: 22px;
    border: 1px solid;
    border-radius: 50rem;
    padding: 0;
    transition: all 0.25s var(--ease-out);
    transition-property: transform, color;
}

/** Disabled to use font awesome instead */
scroll-to-top .btn::after {
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    border-top: 1px solid;
    border-right: 1px solid;
    transform: rotate(-45deg);
    left: 6px;
    bottom: 4px;
}

scroll-to-top:hover .btn {
    color: var(--bs-white);
    background-color: var(--bs-info);
    border: 1px solid var(--bs-info);
    transform: scale(var(--ggs, 2.1)) translateY(-2px);
}
.min-h-1500 {
    min-height: 1500px;
}
.home-hero-carousel{
    position:relative;
}
.home-hero-carousel .carousel{
    position:relative;
    z-index:1;
}
.home-hero-carousel .carousel-indicators{
    margin-left:0;
    margin-right:0;
    padding-left:0.75rem;
    padding-right:0.75rem;
    @media (min-width:1200px){
        margin-left:calc((100% - 1140px) / 2);
        margin-right:calc((100% - 1140px) / 2);
    }
    @media (min-width:1400px){
        margin-left:calc((100% - 1320px) / 2);
        margin-right:calc((100% - 1320px) / 2);
    }
}
.carousel-item,
.carousel-inner,
.carousel {
    width: 100%;
    height: 100vh;
}
.carousel-md,
.carousel-md .carousel-item,
.carousel-md .carousel-inner {
    height: clamp(500px, 75vh, 700px);
}
.carousel-lg,
.carousel-lg .carousel-item,
.carousel-lg .carousel-inner {
    height: clamp(600px, 90vh, 850px);
}
.menu :is(.carousel, .carousel-inner, .carousel-item) {
    height: 400px;
}
.menu .carousel-indicators {
    justify-content: flex-end;
    row-gap: 10px;
    margin-right: 12px;
}
.menu .carousel-indicators > * {
    margin: 0;
    margin-bottom: 1ch;
}
.menu .carousel-indicators [data-bs-target] {
    margin-bottom: 0;
}
.menu .grid-item--wrapper {
    position: relative;
}
.menu .grid-item--wrapper:not(:hover) .grid-caption {
    transform: translateY(1ch);
}
.menu .grid-item--wrapper::after {
    content: '';
    transition: opacity 0.25s ease;
    background-color: var(--bs-black);
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.menu .grid-item--wrapper:hover::after {
    opacity: 0.25;
}
.carousel-caption {
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    --bs-heading-color: var(--bs-fff);
}
.caption-text {
    width: 100%;
}
.caption-text :is(h2,.h3){
    line-height:calc(34 / 24);
}
.caption-title {
    line-height: calc(34 / 32);
    font-size: 32px;
}
.caption-lead{
    font-weight:400;
    font-family: var(--montserrat);
}
.carousel-item{
    background-color:var(--bs-dark);
}
.carousel-item > picture > img {
    transform: scale(1);
    object-fit: cover;
    width: 100%;
    opacity:.8;
    min-height: var(--carousel-height, 100vh);
}

.carousel-indicators [data-bs-target] {
    height: 10px;
    width: 10px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 30px;
    background-color: transparent;
    border:1px solid #FFF;
    opacity: 1;
}

.carousel-indicators [data-bs-target].active {
   background-color: #FFF;;
}
[data-sal] {
    --sal-duration: .5s;
}

.link {
    --bs-link-color-rgb: var(--bs-black-rgb);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 16px;
}

.link > svg{
   margin-left: 5px;
   transition: margin-left .1s;
}

.link:hover > svg{
    margin-left: 10px;
}
footer address, footer p{
    font-family: var(--montserrat);
    font-weight:600;
    color:var(--bs-dark);
    font-size:15px;
    line-height:21px;
    letter-spacing:0.025em;
    margin-bottom:0;
}
footer .copy{
    font-size:12px;
    & a{
        text-decoration:underline;
    }
}
footer .social-list {
    list-style: none;
    padding-left: 0;
}

footer .social-list > li {
    margin-right: 15px;
}

footer .social-list svg {
    font-size: 21px; 
    color: currentcolor;
}

footer .social-list a {
    --bs-link-color-rgb: var(--bs-black-rgb);
}
footer .social-list a:hover {
    --bs-link-color-rgb: var(--bs-primary-rgb);
}
html:not(.nojs) .scroll-slider {
    display: grid;
    scroll-snap-type: y mandatory;
    
}
.scroll-slider > * {
    scroll-snap-align: center;
    grid-column: 1 / -1;
    grid-row: var(--i, 1);
}
.scroll-slide > * {
    grid-column: 1 / -1;
    grid-row: 1;
}
.scroll-slide {
    height: 100vh;
    width: 100%;
    display: grid;
    align-items: center;
}

html:not(.nojs) .scroll-images {
    position: sticky;
    top: 0;
    display: grid;
    grid-row: 1;
    height: 100vh;
    z-index: -1;
}
html:not(.nojs) .scroll-background-image {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: opacity 0.5s ease;
    background-color:var(--bs-dark);
    position:relative;
}
.scroll-background-image img{
    opacity:.7;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scroll-background-image .overlay--25 img {
    opacity: 0.25;
}
.scroll-background-image .overlay--50 img {
    opacity: 0.5
}
.scroll-background-image .overlay--70 img {
    opacity: 0.7
}
html:not(.nojs) .scroll-background-image:not(:first-child) {
    opacity: 0;
}
/** This the noscript fixes a side effect of the fallback noscript messing with the direct sibling combinator (+) */
html:not(.nojs) .is-out-top + noscript + .scroll-background-image {
    opacity: 1;
}
.scroll-slide .link{
    color:#fff;
    font-family: var(--montserrat);
}
.scroll-slide .link svg{
    fill:#fff;
}
.lion-section{
    position:relative;
    overflow:hidden;
    & .lion-top{
        z-index:10;
        position:relative;
    }
    & .lion-icon-wrapper{
        position:absolute;
        z-index:5;
        opacity:.2;
        bottom:-200px;
        left:-150px;
        & .lion-icon{
            width:500px;
            @media (min-width:1400px){
                width:600px;
            }
            @media (min-width:1700px){
                width:700px;
            }
        }
        @media (min-width:1400px){
            bottom:-250px;
            left:-250px;
        }
        @media (min-width:1700px){
            bottom:-300px;
            left:-200px;
        }
    }
}
.dark-header{
    padding-top:var(--pad-lg);
    @media (min-width:768px){
        padding-top:var(--pad-xl);
    }
}
.about-container{
    position:relative;
}
.about-container img,
.about-container video{
    z-index:1;
    position:relative;
    width:100%;
    height:auto;
}
.about-container .glightbox{
    z-index:3;
    position:absolute;
    text-transform:uppercase;
    font-family:var(--montserrat);
    top:calc(50% - 15px);
    left:calc(50% - 55px);
    text-decoration:none;
    color:#fff;
    font-size:24px;
    line-height:calc(30 / 24);
}
.goverlay{
    background:var(--bs-primary);
}
.content :last-child{
    margin-bottom:0;
}
.background-image-holder{
    position:relative;
}
.mid-hero{
    height:clamp(300px, 65vh, 600px);
}
.background-image-holder picture{
    position:absolute;
    z-index:1;
    top:0;
    left:0;
    right:0;
    left:0;
    width:100%;
    height:100%;
}
.background-image-holder picture img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.community-logos img {
    display:block;
    min-width: 100px;
    margin:0 auto;
}
.design-hero{
    position:relative;
    display:grid;
    grid-template-columns: 1fr;
}
.design-hero .carousel{
    z-index:1;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
}
.design-hero .container{
    z-index:2;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    align-self: center;
}
.design-hero .carousel .hero-picture{
    width:100%;
    height:100vh;
    display:block;
    background-color:var(--bs-dark);
    position:relative;
}
.design-hero .carousel .hero-picture img {
    transform: scale(1);
    object-fit: cover;
    width: 100%;
    height:100%;
    opacity:.8;
}
.design-hero .container .h3{
    line-height:calc(34 / 24);
}
.scroll-down-btn{
    transition: opacity 0.25s var(--ease-out);
}
.scroll-down-btn span:not(.visually-hidden) {
  position: absolute;
  bottom: var(--pad-sm);
  right: 12px;
  width: 44px;
  height: 44px;
  margin-left: 0;
  border: 1px solid #fff;
  border-radius: 100%;
  box-sizing: border-box;
  background-color:#fff;
  text-align:center;
  color:var(--bs-dark);
  font-size:14px;
  padding-top:10px;
}
.scroll-down-btn span:not(.visually-hidden)::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 44px;
  height: 44px;
  box-shadow: 0 0 0 0 rgba(255,255,255,.1);
  border-radius: 100%;
  opacity: 0;
  -webkit-animation: sdb03 3s infinite;
  animation: sdb03 3s infinite;
  box-sizing: border-box;
  
}
@-webkit-keyframes sdb03 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255,255,255,.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb03 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255,255,255,.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.scroll-down-btn:hover,
.scroll-down-btn:focus{
    opacity:.8;
}
.home-hero-carousel .scroll-to{
    z-index:10;
    position:relative;
}
.site-plan-img{
    position:relative;
}
.construct-tpl{
    position:relative;
    background:var(--bs-dark);
}
.construct-tpl img{
    position:relative;
    transition: opacity 0.25s var(--ease-out);
}
.construct-tpl:has(a:hover) img,
.construct-tpl:has(a:focus) img{
    opacity:.8;
}

.card{
    border:none;
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-card-spacer-y: 0;
    --bs-card-spacer-x: 0;
}
.card-title.h2{
    margin-bottom:15px;
}
.mb-pad-sm{
    margin-bottom:var(--pad-sm);
}
.mt-pad-sm{
    margin-top:var(--pad-sm);
}

.contact-grid .form-control{
    --bs-border-color: var(--bs-light);
    --bs-body-color: var(--bs-black);
    --bs-border-radius:0;
    background-color:var(--bs-light);
    font-family: var(--montserrat);
    font-weight:600;
    &:focus{
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb),.25);
    }
}
.contact-grid label{
    font-family: var(--montserrat);
    font-weight:600;
    color:rgba(var(--bs-dark-rgb),.5);
}

.contact-grid .form-floating>.form-control:focus~label::after,.contact-grid  .form-floating>.form-control:not(:placeholder-shown)~label::after,.contact-grid  .form-floating>.form-select~label::after{
    background-color:var(--bs-light);
}
.contact-grid .form-floating>.form-control:focus~label,.contact-grid  .form-floating>.form-control:not(:placeholder-shown)~label,.contact-grid  .form-floating>.form-select~label{
    color:rgba(var(--bs-black-rgb), .65);  
}

.form-floating>.form-control{
    height:70px;
    padding: 1.25rem 0.75rem;
}
.form-floating>label{
    padding: 1.25rem 0.75rem;
}
.form-floating>textarea.form-control{
    height:150px;
}
.form-floating>textarea.form-control:not(:placeholder-shown){
    padding-top:2rem;
}
.video-modal {
    display: grid;
    place-items: center;
    background:var(--bs-dark);
    & img{
        opacity:.6;
        position:Relative;
    }
    & .stretched-link::after{
        z-index:5;
    }
}
.video-modal > :not(a) {
    grid-column: 1;
    grid-row: 1;
}
.video-modal-play {
    color: white;
    background-color: transparent;
    border:3px solid #fff;
    border-radius: 500000em;
    display: grid;
    z-index:4;
    position:relative;
    place-items: center;
    font-size:44px;
    line-height:1;
    width: 94px;
    height: 94px;
    aspect-ratio: 1;
    transition:transform 300ms ease;
}
.video-modal:has(a:hover)>.video-modal-play,
.video-modal:has(a:focus)>.video-modal-play{
    transform:scale(.85);
}
.quote-text{
    color:var(--bs-primary);
    font-size:44px;
    font-style:italic;
    line-height:52px;
}
.quote-author{
    color:var(--bs-primary);
    font-weight:600;
    font-family:var(--montserrat);
    margin-bottom:0;
    font-size:18px;
    line-height:30px;
}
.bg-primary{
    & .quote-text{
        color:#fff;
    }
    & .quote-author{
        color:#fff;
    }
}
.community-box{
    border:2px solid var(--bs-primary);
    padding-block:var(--pad-sm);
    & h3{
        color: var(--bs-dark);
    }
    & .comm-logo{
        transition:opacity 300ms ease;
        &:has(a:hover){
            opacity:.5;
        }
        &:has(a:focus){
            opacity:.5;
        }
    }
}
.card.team-card{
    & .card-body{
        padding-top:.75rem;
        & .h5{
            font-weight:600;
        }
    }
}
.modal{
    --bs-modal-border-radius: 0;
    --bs-modal-header-border-color: var(--bs-border-color);
    & .btn-close{
        --bs-btn-close-color: var(--bs-dark);
        --bs-btn-close-opacity: 1;
        --bs-btn-close-hover-opacity: 0.5;
        --bs-btn-close-focus-opacity: .5;
        --bs-btn-close-bg:;
        --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    }
    & .h5{
        font-weight:600;
    }
}
.card.article-card{
    & .card-title{
        margin-bottom:0;
        transition:opacity 300ms ease;
    }
    & .card-text{
        color:var(--bs-dark);
        font-size:18px;
        margin-bottom:0;
        font-style:italic;
        transition:opacity 300ms ease;
    }
    & img{
        transition:opacity 300ms ease;
    }
    &:has(a:hover){
        & img{
            opacity:.5;
        }
        & .card-title{
            opacity:.5;
        }
        & .card-text{
            opacity:.5;
        }
    }
    &:has(a:focus){
        & img{
            opacity:.5;
        }
        & .card-title{
            opacity:.5;
        }
        & .card-text{
            opacity:.5;
        }
    }
}
.insurance-logos {
    --border-color: transparent;
    display: flex;
    flex-wrap: wrap;
}
.insurance-logos.sal-complete {
    --border-color: var(--bs-border-color);
}
.insurance-logo {
    /** whatever would go on a .col-* class */
    --columns: 6;
    border-width: 0;
    --dimensions: 50px 1rem;
    --image-size: calc(var(--dimensions) * 2);
    flex: 0 1 auto;
    flex-basis: 50%;
    width: 50%;
    padding: var(--dimensions);
    aspect-ratio: 1;
    background-color: var(--bs-white);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items:center;
    transition: border-color 0.25s ease 0.1s;
    position:relative;
    &:has(a:hover){
        & img{
            opacity:.5;
        }
    }
    &:has(a:focus){
        & img{
            opacity:.5;
        }
    }
}
.insurance-logo[data-final-row="overflow"],
.insurance-logo:not([data-row-end]) {
    border-right: 1px solid var(--border-color);
}
.insurance-logo:first-child, .insurance-logo:nth-child(2){
    border-top: 1px solid var(--border-color);
}
.insurance-logo:nth-child(2n+0){
    border-right:none;
}
.insurance-logo img {
    display:block;
    min-width: 100px;
    margin:0 auto;
    opacity 300ms ease
}
.contact-grid{
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    position: relative;
    grid-template-rows: auto;
    display: grid;
    overflow:hidden;
    padding-top: var(--md);
    padding-bottom: var(--md);
    & .image-box{
        position: relative;
        grid-column: 1 / span 1;
        grid-row: span 1;
        z-index: 1;
        @media (min-width: 768px) {
            grid-column: 2 / span 12;
        }
        @media (min-width: 992px) {
            grid-row: 1 / span 1;
            grid-column: 1 / span 7;
        }
    }
    & .form-box{
        position: relative;
        grid-column: 1 / span 1;
        grid-row: span 1;
        z-index: 2;
        & .h4{
            font-weight:600;
            margin-bottom:0;
        }
        & .btn{
            font-size:24px;
            --bs-btn-padding-y: 1.5rem;
        }
        & .error{
            color:var(--bs-info);
        }
        @media (min-width: 768px) {
            grid-column: 1 / span 14;
        }
        @media (min-width: 992px) {
            grid-row: 1 / span 1;
            grid-column: 8 / span 7;
            align-self:center;
            
        }
        @media (min-width:1200px) {
            grid-column: 8 / span 6;
        }
    }
    @media (min-width: 768px) {
        grid-template-columns: 1fr repeat(12, calc((720px / 12) - 1.5rem)) 1fr;
    }
    @media (min-width: 992px) {
        grid-template-columns: 1fr repeat(12, calc((960px / 12) - 1.5rem)) 1fr;
    }
    @media (min-width: 1200px) {
        grid-template-columns: 1fr repeat(12, calc((1140px / 12) - 1.5rem)) 1fr;
    }
    @media (min-width: 1400px) {
        grid-template-columns: 1fr repeat(12, calc((1320px / 12) - 1.5rem)) 1fr;
        
    }
}
.instagram-footer h2{
    font-size:32px;
}
.background-image-grid{
    height:600px;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow:hidden;
    position:relative;
    width:100%;
    padding-top:0;
    padding-bottom:0;
    & h1, .h1, h2, .h2{
        color:#fff;
    }
    & p {
        color:#fff;
        font-weight:400;
        font-family: var(--montserrat);
    }
    & .container-lg{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:end;
        padding-block:var(--pad-md);
    }
    & .container-xl{
        position:relative;
        z-index:3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:center;
        padding-block:var(--pad-md);
        @media (min-width:768px){
            padding-block:0;
        }
        @media(min-width:1400px){
            padding-top:var(--pad-sm);
        }
        @media (min-width:1700px){
            padding-top:0;
        }
    }
    & .hero-picture{
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        height:100%;
        width:100%;
        position:relative;
        z-index:1;
        top:0;
        background:#000;
        & .bg-image{
            width:100% !important;
            height:100% !important;
            object-fit:cover;
            object-position:center;
            position:relative;
            opacity:.8;
        }
        @media (min-width: 768px) {
            height:100vh;
        }
    }
    & .scroll-to{
        position:relative;
        z-index:10;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self:end;
        margin-bottom:0;
    }
    @media (min-width: 576px) {
        height:500px;
    }
    @media (min-width: 768px) {
        height:100vh;
    }
}

.ind-project-grid{
    display:grid;
    grid-template-columns: 1fr;
    grid-auto-rows:300px;
    overflow:hidden;
    position:relative;
    column-gap:1.5rem;
    row-gap: 1.5rem;
    & .proj-item{
        overflow:hidden;
        grid-column: span 1;
        grid-row: span 1;
        position:relative;
        background-color:var(--bs-dark);
        & img{
            width:100%;
            height:100%;
            object-fit:cover;
            opacity:1;
            transition: opacity 500ms ease;
        }
        &:has(a:hover){
            & img{
                opacity:.5;
            }
        }
        &:has(a:focus){
            & img{
                opacity:.5;
            }
        }
        @media (min-width:576px){
            &:nth-child(6n+2){
                grid-row: span 2;
            }
            &:nth-child(6n+3){
                grid-row: span 2;
            }
        }
    }
    @media (min-width:576px){
        grid-template-columns: 1fr 1fr;
        grid-auto-rows:200px;
    }
    @media (min-width:768px){
        grid-auto-rows:250px;
    }
    @media (min-width:992px){
        grid-auto-rows:350px;
    }
    @media (min-width:1200px){
        grid-auto-rows:400px;
    }
    @media (min-width:1400px){
        grid-auto-rows:450px;
    }
}
article{
    & time{
        font-family: var(--montserrat);
        color:var(--bs-dark);
        font-weight:600;
        font-size:16px;
        line-height:1;
    }
    & .publication{
        font-family: var(--montserrat);
        color:var(--bs-dark);
        font-weight:600;
        font-size:16px;
        line-height:1;
    }
}
@media (min-width:576px){
    .scroll-down-btn span:not(.visually-hidden){
        right:.75rem;
    }
    .display-1{
        font-size: calc(1.625rem + 3vw);
    }
    .instagram-footer h2{
        font-size:34px;
    }
}
@media (min-width: 768px) {
    .insurance-logo {
        flex-basis: calc(100% / 12 * var(--columns));
        --columns: 4; /* 3 items */
    }
    .insurance-logo:nth-child(3){
        border-top: 1px solid var(--border-color);
    }
    .insurance-logo:nth-child(2n+0){
        border-right:1px solid var(--border-color);
    }
    .insurance-logo:nth-child(3n+0){
        border-right:none;
    }
    .display-1{
        font-size: calc(1.625rem + 4.5vw);
    }
}
@media(min-width:769px){
    .goverlay{
        background:rgba(var(--bs-black-rgb), 0.92);
    }
}
@media (min-width: 992px) {
    .scroll-down-btn span:not(.visually-hidden){
        right:calc(50% - 468px);
    }
}
@media (min-width: 1200px) {
    .insurance-logo {
        --columns: 3; 
    }
    .insurance-logo:nth-child(4){
        border-top: 1px solid var(--border-color);
    }
    .insurance-logo:nth-child(3n+0){
        border-right:1px solid var(--border-color);
    }
    .insurance-logo:nth-child(4n+0){
        border-right:none;
    }
    .scroll-down-btn span:not(.visually-hidden){
        right:calc(50% - 558px);
    }
}
@media (min-width: 1400px) {
    .scroll-down-btn span:not(.visually-hidden){
        right:calc(50% - 648px);
    }
}
@media (min-width: 1750px){
    scroll-to-top {
        right: 4rem;
        bottom: 4rem;
    }
    .display-1{
        font-size: calc(1.625rem + 3.5vw);
    }
}

.text-bg-grey {
    color: white !important;
    background-color: rgb(118, 139, 155) !important;
}

/** Had to do a quick alias for the $spacing-utils -cw */
:root {
    --sm: var(--pad-sm);
    --md: var(--pad-md);
    --lg: var(--pad-lg);
}
.pt-sm,
.py-sm {
    padding-top: var(--sm);
}
.pb-sm,
.py-sm {
    padding-bottom: var(--sm);
}
.pt-md,
.py-md {
    padding-top: var(--md);
}
.pb-md,
.py-md {
    padding-bottom: var(--md);
}
.pt-lg,
.py-lg {
    padding-top: var(--lg);
}
.pb-lg,
.py-lg {
    padding-bottom: var(--lg);
}
.mt-sm,
.my-sm {
    margin-top: var(--sm);
}
.mb-sm,
.my-sm {
    margin-bottom: var(--sm);
}    
.mt-md,
.my-md {
    margin-top: var(--md);
}
.mb-md,
.my-md {
    margin-bottom: var(--md);
}
.mt-lg,
.my-lg {
    margin-top: var(--lg);
}
.mb-lg,
.my-lg {
    margin-bottom: var(--lg);
}
@media (min-width: 576px) {
    .pt-sm-mob,
    .py-sm-mob {
        padding-top: var(--sm);
    }
    .pb-sm-mob,
    .py-sm-mob {
        padding-bottom: var(--sm);
    }
    .pt-md-mob,
    .py-md-mob {
        padding-top: var(--md);
    }
    .pb-md-mob,
    .py-md-mob {
        padding-bottom: var(--md);
    }
    .pt-lg-mob,
    .py-lg-mob {
        padding-top: var(--lg);
    }
    .pb-lg-mob,
    .py-lg-mob {
        padding-bottom: var(--lg);
    }
    .mt-sm-mob,
    .my-sm-mob {
        margin-top: var(--sm);
    }
    .mb-sm-mob,
    .my-sm-mob {
        margin-bottom: var(--sm);
    }    
    .mt-md-mob,
    .my-md-mob {
        margin-top: var(--md);
    }
    .mb-md-mob,
    .my-md-mob {
        margin-bottom: var(--md);
    }
    .mt-lg-mob,
    .my-lg-mob {
        margin-top: var(--lg);
    }
    .mb-lg-mob,
    .my-lg-mob {
        margin-bottom: var(--lg);
    }
}
@media (min-width: 768px) {
    .pt-sm-tab,
    .py-sm-tab {
        padding-top: var(--sm);
    }
    .pb-sm-tab,
    .py-sm-tab {
        padding-bottom: var(--sm);
    }
    .pt-md-tab,
    .py-md-tab {
        padding-top: var(--md);
    }
    .pb-md-tab,
    .py-md-tab {
        padding-bottom: var(--md);
    }
    .pt-lg-tab,
    .py-lg-tab {
        padding-top: var(--lg);
    }
    .pb-lg-tab,
    .py-lg-tab {
        padding-bottom: var(--lg);
    }
    .mt-sm-tab,
    .my-sm-tab {
        margin-top: var(--sm);
    }
    .mb-sm-tab,
    .my-sm-tab {
        margin-bottom: var(--sm);
    }    
    .mt-md-tab,
    .my-md-tab {
        margin-top: var(--md);
    }
    .mb-md-tab,
    .my-md-tab {
        margin-bottom: var(--md);
    }
    .mt-lg-tab,
    .my-lg-tab {
        margin-top: var(--lg);
    }
    .mb-lg-tab,
    .my-lg-tab {
        margin-bottom: var(--lg);
    }
}
@media (min-width: 992px) {
    .pt-sm-lap,
    .py-sm-lap {
        padding-top: var(--sm);
    }
    .pb-sm-lap,
    .py-sm-lap {
        padding-bottom: var(--sm);
    }
    .pt-md-lap,
    .py-md-lap {
        padding-top: var(--md);
    }
    .pb-md-lap,
    .py-md-lap {
        padding-bottom: var(--md);
    }
    .pt-lg-lap,
    .py-lg-lap {
        padding-top: var(--lg);
    }
    .pb-lg-lap,
    .py-lg-lap {
        padding-bottom: var(--lg);
    }
    .mt-sm-lap,
    .my-sm-lap {
        margin-top: var(--sm);
    }
    .mb-sm-lap,
    .my-sm-lap {
        margin-bottom: var(--sm);
    }    
    .mt-md-lap,
    .my-md-lap {
        margin-top: var(--md);
    }
    .mb-md-lap,
    .my-md-lap {
        margin-bottom: var(--md);
    }
    .mt-lg-lap,
    .my-lg-lap {
        margin-top: var(--lg);
    }
    .mb-lg-lap,
    .my-lg-lap {
        margin-bottom: var(--lg);
    }
}
@media (min-width: 1200px) {
    .pt-sm-desk,
    .py-sm-desk {
        padding-top: var(--sm);
    }
    .pb-sm-desk,
    .py-sm-desk {
        padding-bottom: var(--sm);
    }
    .pt-md-desk,
    .py-md-desk {
        padding-top: var(--md);
    }
    .pb-md-desk,
    .py-md-desk {
        padding-bottom: var(--md);
    }
    .pt-lg-desk,
    .py-lg-desk {
        padding-top: var(--lg);
    }
    .pb-lg-desk,
    .py-lg-desk {
        padding-bottom: var(--lg);
    }
    .mt-sm-desk,
    .my-sm-desk {
        margin-top: var(--sm);
    }
    .mb-sm-desk,
    .my-sm-desk {
        margin-bottom: var(--sm);
    }    
    .mt-md-desk,
    .my-md-desk {
        margin-top: var(--md);
    }
    .mb-md-desk,
    .my-md-desk {
        margin-bottom: var(--md);
    }
    .mt-lg-desk,
    .my-lg-desk {
        margin-top: var(--lg);
    }
    .mb-lg-desk,
    .my-lg-desk {
        margin-bottom: var(--lg);
    }
}
[v-cloak] {
    display: none;
}
body {
    min-height: 100vh;
    display: flex;
    flex-flow: column;
}
body > main {
    flex-grow: 1;
}
ul[role="list"] {
    list-style-type: none;
    padding-left: 0;
}
ul[role="list"] li {
    margin-bottom: 0.5ch;
}

scroll-to-top .scroll-down-btn span:not(.visually-hidden) {
    display: block;
    position: static;
}
.display-1 {
    font-size: min(92px, 2.5rem + 4vw);
}
.video-modal {
    border-radius: 10px;
    overflow: hidden;
    & img {
        opacity: 1;
    }
}
/* .video-transition {
    position: fixed;
    z-index: 1110;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.25s ease;
}
.video-transition[active] {
    opacity: 1;
    pointer-events: initial;
} */

.menu .carousel-item {
    overflow: hidden;
    border-radius: 10px;
}
.vstack:has( .map) {
    height: 100%;
}
.map {
    height: 100%;
    min-height: 200px;
    width: 100%;
}
.navbar {
    --menu-icon-color: var(--bs-white);
    width: 100%;
}

/* .navbar .btn {
    position: absolute;
} */

.navbar:is([data-menu-color="dark"], [data-menu-color="color"]),
.navbar.navbar--color, .navbar.navbar--dark{
    --menu-icon-color: var(--bs-black);
}

.navbar button {
    color: var(--menu-icon-color);
    font-family: var(--montserrat);
}
.btn-text {
    color: #768b9b;
}
.projects-filter .btn {
    text-transform: uppercase;
}
.content-wrapper {
}
.content-wrapper ul {
    margin-bottom: 2rem;
}
.content-wrapper a {
    --bs-link-color-rgb: var(--bs-info-rgb);
    text-decoration: none;
}
.content-wrapper a svg {
    margin-left: 0.5em;
}
.projects {
    min-height: 50vh;
}
.projects-grid {
    --gap: 18px;
    --column-count: 3;
    --column-width: calc(50% - var(--gap));
    --column-width-2: calc(100% - var(--gap));
    --column-width-4: calc(100% - var(--gap));
    --row-height: calc(200px + var(--gap));
    --row-height-2: calc(200px + var(--gap));
    --row-height-4: calc(200px + var(--gap));
    
}
.no-results-message + .projects-grid .grid-item {
    transition-duration: 0s;
    transition-delay: 0s;
    opacity: 0 !important;
}
.gutter-sizer {
    width: var(--gap);
}
.grid-sizer,
.grid-item {
    width: var(--column-width);
    height: var(--row-height);
}
.grid-item {
    background-color: var(--bs-black);
}


.grid-item--2,
.grid-item--2h {
    height: var(--row-height-2);
}
.grid-item--2h{
    width: var(--column-width);
}

.grid-item--2,
.grid-item--2w {
    width: var(--column-width-2);
}
.grid-item--4w2h {
    width: var(--column-width-4);
    height: var(--row-height-2);
}

.grid-item--2w4h {
    height: var(--row-height-4);
    width: var(--column-width-2);
}
.grid-item img {
    transition: opacity 0.25s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.projects-grid > .grid-item {
    
    transition: opacity 0.75s ease-out;
    transition-delay: calc(5ms + var(--i, 0s) * 15ms);
}

.projects-grid:is(.arranged.loaded) > .grid-item {
    /* opacity: 1 !important; */
}

@media (min-width: 576px) {
    .projects-grid {
        --column-count: 4;
        --column-width: calc(25% - var(--gap));
        --column-width-2: calc(50% - var(--gap));
        --column-width-4: calc(100% - var(--gap));
        --row-height: 100px;
        --row-height-2: calc(200px + var(--gap));
        --row-height-4: var(--row-height-2);
    }
    .grid-item--2h {
        width: var(--column-width);
    }
}
@media (min-width: 768px) {
    .projects-grid {
        /*
        --column-count: 5;
        --column-width: calc(20% - var(--gap));
        --column-width-2: calc(40% - var(--gap));
        --column-width-4: calc(60% - var(--gap));
        */
        --column-count: 6;
        --column-width: calc(16.6666666667% - var(--gap));
        --column-width-2: calc(33.333334% - var(--gap));
        --column-width-4: calc(66.66666% - var(--gap));
        --row-height: 150px;
        --row-height-2: calc(300px + var(--gap));
        --row-height-4: var(--row-height-2);
    }
}
@media (min-width: 1200px) {
    .projects-grid {
        /*
        --row-height: 150px;
        --row-height-2: calc(300px + var(--gap));
        --row-height-4: calc(450px + var(--gap));
        */
    }
}
.grid-item--wrapper {
    --bs-link-color-rgb: var(--bs-white-rgb);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr min-content;
    height: 100%;
    width: 100%;
    will-change: transform;
    position: relative;
}
.grid-item--wrapper img {
    width: 100%;
}
.grid-item--wrapper > *:not(.stretched-link) {
    grid-column: 1 / -1;
    position: absolute;
}
.grid-item--wrapper > img {
    grid-row: 1 / span 2;
    height: 100%;
    transition: opacity 0.5s var(--ease-out);
    object-fit: cover;
}
.grid-item:focus-within img {
    opacity: 0.75;
}
.grid-caption {
    grid-row: 2;
    transition: transform 0.35s var(--ease-out);
    transform: translateY(-100%);
    padding: 1ch 2ch 3.5ch;
    color: var(--bs-white);
    
    z-index: 1;
    width:100%;
    background-image:linear-gradient(rgba(var(--bs-black-rgb), 0) 0.5%, rgba(var(--bs-black-rgb), .75) 93%);
}
.swiper-slide:not(:hover, :focus-within) .grid-caption,
.grid-item:not(:hover, :focus-within) .grid-caption {
    transform: translateY(0);
    transition-delay: 0.05s;
}
.menu .swiper-slide .grid-item--wrapper::after {
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    background: rgba(0,0,0,0.25);
    position: absolute;
    transition: opacity 0.25s ease;
}
.menu .swiper-slide:hover .grid-item--wrapper::after {
    opacity: 1;
}
.menu .carousel-indicators {
    pointer-events: none;
}
.menu .carousel-indicators > * {
    pointer-events: auto;
}
/*
.grid-item:hover .grid-caption,
.grid-item:focus-within .grid-caption {
}*/
.grid-item--wrapper a {
    text-decoration: none;
}

.projects-grid--indiv {
    --gap: 18px;
    --column-count: 2;
    --column-width: calc(100% - var(--gap));
    --column-width-2: var(--column-width);
    --row-height: 300px;
    --row-height-2: 600px;
}
@media (min-width: 576px) {
    .projects-grid--indiv {
        --column-width: calc(50% - var(--gap));
        --column-width-2: var(--column-width);
        --column-width-4: var(--column-width);
        --row-height: 350px;
        --row-height-2: 700px;
    }
}
@media (min-width: 768px) {
    .projects-grid--indiv {
        --column-count: 3;
        --column-width: calc(33% - var(--gap));
        --column-width-2: calc(66% - var(--gap)); 
        --row-height: 400px;
        --row-height-2: calc(800px + var(--gap));
    }
}
.projects-grid--indiv::after {
    content: '';
    display: block;
    clear: both;
}
.projects-grid--indiv .grid-item {
    float: left;
    /*
    margin-bottom: var(--gap);
    margin-left: calc(var(--gap) / 2);
    margin-right: calc(var(--gap) / 2);
    */
}
.scroll-down-btn {
    display: inline-block;
    width: inherit;
    height: inherit;
}
.carousel .scroll-to {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    place-content: end;
}


.architect-profile .icon-wrapper {
    position: absolute;
    top: 1em;
    right: 1em;
}
.floating-icon-wrapper,
.architect-profile .icon-wrapper {
    width: 2.5em;
    height: 2.5em;
    aspect-ratio: 1;
    background-color: var(--bs-black);
    color: white;
    border-radius: 1000000em;
    display: grid;
    place-content: center;
    transition: transform 0.25s ease;
}
.img-grid-center {
    position: relative;
    display: grid;
    place-items: center;
}
.img-grid-center > * {
    grid-row: 1;
    grid-column: 1;
}
.architect-profile:not(:hover) .icon-wrapper {
    transform: scale(1.1);
}
.cabinet {
    --container-width: calc(100% - 15px);
    --column-count: 2;
    --gap: 15px;
    padding-inline:var(--gap);
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(var(--column-count), calc(var(--container-width) / var(--column-count)));
    gap: var(--gap);
}
.item {
    grid-column: var(--column);
    overflow: hidden;
    /* aspect-ratio: 270 / 396; */
    container-type: inline-size;
}
.item:nth-child(odd) {
    --column: 1;
}
.item:nth-child(even) {
    --column: 2;
}
.item .h4 {
    font-size: clamp(12px, 10cqi, 21px);
}
.item .h5 {
    font-size: clamp(10px, 10cqi, 18px);
}
.item .card {
    --bs-card-border-width: 0;
    --bs-card-border-color: transparent;
    --bs-card-spacer-x: 0;
    --bs-card-cap-padding-x: 0;
    --bs-card-bg: white;
}
.card-img-wrapper {
    overflow: hidden;
}
.item--lead .card {
    --bs-card-bg: transparent;
}
.item img {
    transition: transform 0.5s ease;
    position: relative;
    z-index: 0;
}
.item--content:not(:hover) img {
    transform: scale(1.1);
}
.item--content:hover img {
    transform: scale(1);
}
.item .card-body {
    position: relative;
    z-index: 1;
}
@media (min-width: 576px) {
    .cabinet {
        --container-width: calc(540px - (var(--gap) * 3));
        --column-count: 2;
        grid-template-columns: minmax(1px, 1fr) repeat(var(--column-count), calc(var(--container-width) / var(--column-count))) minmax(1px, 1fr);
    }
    .item {
        grid-column: var(--column, 2);
    }
    div.item:nth-of-type(2n + 1) {
        --column: 2;
    }
    div.item:nth-of-type(2n + 2) {
        --column: 3;
    }
}
@media (min-width: 992px) {
    .cabinet {
        --container-width: calc(960px - (var(--gap) * 4));
        --column-count: 3
    }
    div.item:nth-of-type(3n + 1) {
        --column: 2;
    }
    div.item:nth-of-type(3n + 2) {
        --column: 3;
    }
    div.item:nth-of-type(3n + 3) {
        --column: 4;
    }
}
@media (min-width: 1200px) {
    .cabinet {
        --container-width: calc(1140px - (var(--gap) * 4));
    }
}
.drawer {
    grid-column: 1 / -1;
    display: grid;
    gap: inherit;
    grid-template-columns: inherit;
    height: auto;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
    background-color: var(--bs-black);
    color: var(--bs-white);
    position: relative;
}
.drawer > .drawer--wrapper {
    grid-column: 2;
    display: grid;
    /* grid-template-columns: repeat(3, calc(1140px / 3)); */
}
@media (min-width: 576px) {
    .drawer > .drawer--wrapper {
        grid-column: 2 / calc(var(--column-count) + 2);
    }
}
.drawer > .drawer--wrapper > .row {
    grid-column: 1 / -1;
}
.drawer.open .drawer--arrow-up[key="1"] {
    grid-column: 1;
    justify-self: center;
}
.drawer.open {
    transition-duration: 0.4s;
    max-height: var(--d-height, 300px);
    overflow: visible;
}
.drawer--arrow-up {
    content: '';
    position: absolute;
    top: calc(var(--size) * -1);
    width: 0;
    height: 0;
    --size: 26px;
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-bottom: var(--size) solid var(--bs-black);
}


.projects-filter .btn {
    --bs-btn-active-border-color: var(--bs-white);
}
.projects-filter .dropdown-toggle {
    border-radius:0;
}
.projects-filter .dropdown-toggle:is(:hover, :focus) {
    background-color: var(--bs-tertiary-bg);
}
.projects-filter .dropdown-menu:where(.show) {
    --bs-dropdown-border-color: transparent;
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-item-padding-y: 0.75rem;
    --bs-dropdown-padding-y: 0;
    display: flex;
    flex-flow: column;
    row-gap: 0.5ch;
}

@media (min-width: 1400px) {
    .count-rows--awards .insurance-logo {
        --columns: 3
    }
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.article-item {
    position: relative;
    grid-column: span 1;
    display: grid;
    grid-template-rows: auto min-content;
    background-color: var(--bs-black);
    font-family: var(--montserrat);
}
.article-item--2 {
    grid-column: span 2;
}
.article-item > * {
    grid-column: 1;
}
.article-img,
.article-item img {
    opacity: 0.5;
    width: 100%;
    grid-row: 1 / 3;
}
.article-item .article-caption {
    grid-row: 2;
    padding: 0.5rem;
    --bs-link-color-rgb: var(--bs-white-rgb);
}
.article-caption a {
    text-decoration: none;
    display: inline;
    gap: 0.5ch;
    align-items: center;
    text-transform: uppercase;
}
.article-caption [data-icon] {
    margin-left: 0.5ch;
    font-size: 18px;
}
:is(
    .article-item,
    .article-content 
) time {
    font-family: var(--montserrat);
    font-size: 15px;
}

[data-add-arrow] svg {
    margin-left: 0.25ch;
}
.carousel-item {
    container-type: inline-size;
}
.carousel-item .quote-text {
    font-size: clamp(1.25rem, 1rem + 1cqi, 3.5rem);
    /* The calc'ed line height from the original quote-text class */
    line-height: calc(52 / 44);
}