assets/css/sal.css
/** Variables are grabbed from a jpeg, so when the PSD is available, please replace and remove this comment :) -cw */
 
 
 
 
 
 
/** 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: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url(work-sans-300-woff2.woff2) format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url(work-sans-regular-woff2.woff2) format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(''),
       url(work-sans-500-woff2.woff2) format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url(work-sans-700-woff2.woff2) format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local(''),
       url(work-sans-900-woff2.woff2) format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(''),
       url(pt-serif-regular-woff2.woff2) format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url(pt-serif-700-woff2.woff2) format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */
}
:root {
    --bs-info-rgb: 9, 183, 255;
    --bs-info-hsl: 198 100% 51.8%;
    --bs-info-hex: #09b7ff;
    --bs-info: rgb(9, 183, 255);
    --bs-dark-rgb: 11, 14, 16;
    --bs-dark-hsl: 204 18.5% 5.3%;
    --bs-dark-hex: #0b0e10;
    --bs-dark: rgb(11, 14, 16);
    --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);
    --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: 11, 14, 16;
    --bs-black-hsl: 204 18.5% 5.3%;
    --bs-black-hex: #0b0e10;
    --bs-black: rgb(11, 14, 16);
    --bs-primary-rgb: 9, 183, 255;
    --bs-primary-hsl: 198 100% 51.8%;
    --bs-primary-hex: #09b7ff;
    --bs-primary: rgb(9, 183, 255);
    --bs-body-color-rgb: 11, 14, 16;
    --bs-body-color-hsl: 204 18.5% 5.3%;
    --bs-body-color-hex: #0b0e10;
    --bs-body-color: rgb(11, 14, 16);
    /** Generic padding values, replace with psd values */
    --pad-sm: 50px;
    --pad-md: 100px;
    --pad-lg: 150px;
    --ease-out: cubic-bezier(0.075, 0.82, 0.165, 1);
    --work-sans: 'Work Sans', var(--bs-font-sans-serif);
    text-rendering: geometricPrecision;
}

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

body{
    font-size:21px;
    line-height:calc(30 / 21);
    font-family: 'PT Serif', serif;
}
section {
    padding-block: var(--pad-md);
}
a {
    --bs-link-color-rgb: var(--bs-black-rgb);
    --bs-link-hover-color-rgb: var(--bs-info-rgb);
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
    font-family: 'Work Sans', var(--bs-font-sans-serif);
    text-wrap: balance;
}
h1, .h1{
 font-weight:300;
 text-transform:uppercase;
 font-size:40px;
 line-height:calc(60 / 50);
}
h2, .h2{
 font-weight:400;
 text-transform:uppercase;
 font-size:32px;
 line-height:calc(42 / 34); /* Original font size was 34, keeping lh ratio */
 margin-bottom:25px;
}
h3, .h3{
    font-size:24px;
    font-weight:400;
    line-height:calc(42 / 24);
    margin-bottom:12px;
}
h4, .h4{
    font-size:21px;
    line-height:calc(30 / 21);
    font-weight:400;
}
h5, .h5{
    font-weight:300;
    font-size:18px;
}
h6, .h6{
    font-weight:400;
    font-size:15px;
    letter-spacing:0.025rem;
    line-height:21px;
    margin-bottom:0;
}
.--light-gray {
    background-color: var(--bs-light);
}
.pt-serif{
    font-family: 'PT Serif', serif;
}
.work-sans{
    font-family: 'Work Sans', var(--bs-font-sans-serif);
}
.btn{
    --bs-btn-font-family: 'Work Sans', var(--bs-font-sans-serif);
    --bs-btn-font-size: 24px;
    --bs-btn-line-height:1;
    --bs-btn-border-radius:40px;
}
.btn-primary{
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 22px;
    --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{
    opacity:.8;
}
.btn-primary:disabled,
.btn-primary.disabled{
    opacity:.5;
}

[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;
}
:is(.navbar, .menu-controller) .bars {
    transform: scale(var(--ggs,1.1))
}
.menu-logo {
    position: absolute;
    top: 1rem;
    left: 0;
}
.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);
}
:is(.navbar, .menu-controller) .bars,
:is(.navbar, .menu-controller) .bars::after,
:is(.navbar, .menu-controller) .bars::before {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    width: 20px;
    height: 2px;
    border-radius: 3px;
    background: currentColor
}
:is(.navbar, .menu-controller) .bars::after,
:is(.navbar, .menu-controller) .bars::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
}
:is(.navbar, .menu-controller) .bars::after {
    top: 6px
}
.menu .btn,
.navbar .btn {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1ch;
    position: absolute;
    top: 0.5rem;
    right: 2rem;
    width: max-content;
    text-transform: uppercase;
}
.menu .grid-item--wrapper {
    height: 400px;
}
.navbar .btn {
    padding-top: 17px;
}
@media (min-width: 768px) {
    .navbar .btn {
        padding-top: 0;
    }
}
/** making the buttons position absolute messed with the top values, menu btn needs to be a little bit more */
.menu .btn {
    color: white;
    top: 1rem;
}
.menu-light .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;
}
/** Initial state for motion to work off of */
/*
#closeMenu {
    transform: translateX(100%);
    opacity: 0;
}
*/
#closeMenu {
    font-family: 'PT Serif', serif;
}
:is(.menu, .menu-controller) .close {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1.1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 4px
}

:is(.menu, .menu-controller) .close::after,
:is(.menu, .menu-controller) .close::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 12px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
    border-radius: 5px;
    top: 8px;
    left: 3px
}
:is(.menu, .menu-controller) .close::after {
    transform: rotate(-45deg)
}
.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: 'Work Sans', sans-serif;
}
.menu-light {
    background-color: white;
    color: var(--bs-black);
}
.menu a {
    text-decoration: none;
    --bs-link-hover-color-rgb: var(--bs-info-rgb);
    --bs-link-color-rgb: var(--bs-gray-400);
}
.menu a:hover {
    --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}
.menu-light a {
    --bs-link-color-rgb: var(--bs-gray-700);
}

.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: 50px;
}
.menu .list-group {
    gap: 10px;
    font-family: 'PT Serif', 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;
}

.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;
}
@media (min-width: 768px) {
    
}
.menu .list-group a {
    text-wrap: balance;
}

.menu .card {
    font-family: 'PT Serif', sans-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;
}
.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;
}
.accordion-header {
    text-wrap: balance;
}
.accordion-button{
    font-size:inherit;
}
.accordion-button .plus,
.accordion-button .plus::after {
    display: block;
    box-sizing: border-box;
    background: currentColor;
    border-radius: 10px;
}

.accordion-button .plus {
    margin-top: -2px;
    position: relative;
    transform: scale(var(--ggs,1));
    width: 16px;
    height: 2px;
}

.accordion-button .plus::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 16px;
    top: -7px;
    left: 7px;
    transition: transform 0.25s var(--ease-out);
}
.accordion-button:not(.collapsed) .plus::after {
    transform: rotate(90deg);
}
.accordion-button {
    display: flex;
    justify-content: space-between;
}
.accordion-button::after {
    content: none;
}

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;
}
.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: 0;
}
.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;
}
.caption-text {
    width: 100%;
}
.caption-text :is(p,.h5) {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 18px;
}
.caption-text :is(h2,.h3){
    line-height:calc(34 / 24);
}
.caption-title {
    text-transform: uppercase;
    line-height: calc(34 / 32);
    font-size: 32px;
}
.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;;
}

.accordion-item {
    padding-left: 0;
    padding-right: 0;
    border-top: none;
    border-right: none;
    border-left: none;
}

.accordion-item button {
    padding-left: 0;
    padding-right: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-focus-border-color: var(--bs-accordion-btn-border-color);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--bs-black);
}

.accordion-item button:not(.collapsed) {
    padding-left: 0;
    padding-right: 0;
}

.accordion-item button:focus,
.accordion-item button:hover,
.accordion-item button {
    box-shadow: none;
}

[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-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start
}

footer address {
    margin-right: 2.5em;
}

footer address > span {
    display: flex;
    width: 100%;
    font-size: 15px;
}

footer address > .name {
   text-transform: uppercase;
}

footer .info {
    font-size: 11px;
    padding-block: 15px;
}

footer .info > .links a {
    margin-right: 10px;
}

footer .info > span {
    display:inline-block;
    margin-inline:10px;
}
footer .info > span:first-child{
    margin-left:0;
}
footer .info > span:last-child{
    margin-right:0;
}
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-info-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: 'Work Sans', var(--bs-font-sans-serif);
}
.scroll-slide .link svg{
    fill:#fff;
}
.dark-header{
    padding-top:var(--pad-lg);
}
.about-container{
    position:relative;
}
.about-container img,
.about-container video{
    z-index:1;
    position:relative;
    width:100%;
    height:auto;
    opacity:.8;
}
.about-container .glightbox{
    z-index:3;
    position:absolute;
    text-transform:uppercase;
    font-family:var(--work-sans);
    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;
}
.insurance-logos {
    --border-color: transparent;
    display: flex;
    flex-wrap: wrap;
}
.insurance-logos.sal-complete {
    --border-color: var(--bs-gray-100);
}

.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;
}

.insurance-logo[data-final-row="overflow"],
.insurance-logo:not([data-row-end]) {
    border-right: 1px solid var(--border-color);
}
.insurance-logo[data-row-index="0"] {
    border-top: 1px solid var(--border-color);
}
.insurance-logo 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;
}
@supports not selector(*:has(*)) {
    .construct-tpl:hover img,
    .construct-tpl:focus-within img {
        opacity: 0.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);
}


.form-box{
    --bs-gutter-x: 1.5rem;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}
.contact-grid{
    padding: var(--pad-md) 30px 0;
}
.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);
}
.form-select {
    --bs-form-select-bg-img: '';
    --bs-border-color: var(--bs-light);
    --bs-body-color: var(--bs-black);
    --bs-border-radius: 0;
    background-color: var(--bs-light);
}
.form-floating > .form-select {
    min-height: 70px;
}
.select-arrow-wrapper {
    position: absolute;
    right: 1em;
    top: calc(50% - 1ch);
}
.form-floating .form-select + label {}
.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);  
}
.contact-grid .form-check-input{
    --bs-form-check-bg: var(--bs-white);
    --bs-border-color: var(--bs-black);
}
.contact-grid .form-check-input:checked{
    border-color:var(--bs-black);
}
.form-check-input{
    width:28px;
    height:28px;
    margin-top:3px;
}
.form-check-label{
    font-size:21px;
    text-transform:uppercase;
    padding-left:10px;
}
.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;
}
.video-modal > :not(a) {
    grid-column: 1;
    grid-row: 1;
}
.video-modal-play {
    color: white;
    background-color: var(--bs-black);
    border-radius: 500000em;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    aspect-ratio: 1;
}
@media (min-width:576px){
    .scroll-down-btn span:not(.visually-hidden){
        right:calc(50% - 258px);
    }
    .display-1{
        font-size: calc(1.625rem + 3vw);
    }
}
@media (min-width: 768px) {
    .insurance-logo {
        flex-basis: calc(100% / 12 * var(--columns));
        --columns: 4; /* 3 items */
    }
    .scroll-down-btn span:not(.visually-hidden){
        right:calc(50% - 348px);
    }
    .display-1{
        font-size: calc(1.625rem + 4.5vw);
    }
    h1, .h1{
     font-size:50px;
    }
    h2, .h2{
     font-size:42px;
    }
    footer .info > span {
        margin-inline:20px;
    }
}
@media(min-width:769px){
    .goverlay{
        background:rgba(var(--bs-black-rgb), 0.92);
    }
}
@media (min-width: 992px) {
    
    .contact-grid {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr repeat(12, calc(960px / 12)) 1fr;
    }
    .video-box{
        grid-row: 1 / span 1;
        grid-column: 1 / span 7;
    }
    .form-box{
        grid-row: 1 / span 1;
        grid-column: 8 / span 6;
    }
    .scroll-down-btn span:not(.visually-hidden){
        right:calc(50% - 468px);
    }
}
@media (min-width: 1200px) {
    .contact-grid{
        grid-template-columns: 1fr repeat(12, calc(1140px / 12)) 1fr;
    }
    .insurance-logo {
        --columns: 3; 
    }
    .scroll-down-btn span:not(.visually-hidden){
        right:calc(50% - 558px);
    }
}
@media (min-width: 1400px) {
    .contact-grid{
        grid-template-columns: 1fr repeat(12, calc(1320px / 12)) 1fr;
    }
    .video-box{
        grid-column: 1 / span 8;
    }
    .form-box{
        grid-column: 9 / span 5;
    }
    .insurance-logo {
        --columns: 2.4; /* 5 / 12, 5 items should fit per row, so we have to math it */
    }
    .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);
    }
}

/** 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;
}
.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;
}
.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"]) {
    --menu-icon-color: var(--bs-black);
}

.navbar :is(.btn, .bars) {
    color: var(--menu-icon-color);
    font-family: 'PT Serif', var(--bs-font-serif);
}
.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(--work-sans);
}
.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(--work-sans);
    font-size: 15px;
}

[data-add-arrow] svg {
    margin-left: 0.25ch;
}