:root {

    --g3-black: #1e1e1e;
    --g3-dark-grey: #2d2d2d;
    --g3-grey: #585858;
    --g3-light-grey: #c8c8c8;
    --g3-off-white: #ebebeb;
    --g3-true-white: #fff;

    /* --g3-light-grey: orange; */
    /* --g3-off-white: blue; */
    /* --g3-true-white: red; */

    --g3-green: #38f6d4;
    --g3-blue: #4fd5ff;
    --g3-purple: #eb53f8;
    --g3-pink: #ff3d8f;
    --g3-red: #f63946;
    --g3-orange: #ff5934;
    --g3-dark-yellow: #ff9900;
    --g3-yellow: #ebc500;

    --fw-normal: 400;
    --fw-medium: 500;

    --transition-timing-100: 100ms ease-in-out;
    --transition-timing-150: 150ms ease-in-out;
    --transition-timing-200: 200ms ease-in-out;
    --transition-timing-300: 300ms ease-in-out;

    --transition-opacity-100: opacity 100ms ease-in-out;
    --transition-opacity-150: opacity 150ms ease-in-out;
    --transition-opacity-200: opacity 200ms ease-in-out;
    --transition-opacity-300: opacity 300ms ease-in-out;

    --transition-transform-100: transform 100ms ease-in-out;
    --transition-transform-150: transform 150ms ease-in-out;
    --transition-transform-200: transform 200ms ease-in-out;
    --transition-transform-300: transform 300ms ease-in-out;

}


/*//////////////////////////////////////////////////////////////////////
font sizes */

@media screen and (width < 375px) {

    :root {
    --nav-padding: clamp(10px, 6.4444px + 1.4815vw, 12px);
    --grid-gap: clamp(14px, 3.3333px + 4.4444vw, 20px);
    --grid-margin: clamp(16px, -6px + 8vw, 24px);
    --logo-height: clamp(20px, -7.5px + 10vw, 30px);


    --fs-16: clamp(12px, 8.4444px + 1.4815vw, 14px);               /* site map nav */
    --fs-17: clamp(13px, 11.2222px + 0.7407vw, 14px);              /* labels text */
    --fs-18: clamp(14px, 12.2222px + 0.7407vw, 15px);              /* thumbnail caption / slide caption and counter / buttons / employee data / footer text / form text */
    --fs-20: clamp(15px, 13.2222px + 0.7407vw, 16px);              /* nav thumbnail caption / main text block / scroll-nav text / employee contact / footer header */
    --fs-24: clamp(16px, 12.4444px + 1.4815vw, 18px);              /* nav text / text block sub-header / thumbnail header / employee header / large slide counter / contact info */
    --fs-36: clamp(18px, 10.8889px + 2.963vw, 22px);               /* case studies list header */
    --fs-40: clamp(20px, 12.8889px + 2.963vw, 24px);               /* case studies arrow-nav */
    --fs-48: clamp(30px, 26.4444px + 1.4815vw, 32px);              /* text block main header / clients header */
    --fs-72: clamp(32px, 24.8889px + 2.963vw, 36px);               /* section header */
    --fs-128: clamp(36px, -2.5px + 14vw, 50px);                    /* main header */
    }


}

@media screen and (375px <= width < 1024px) {

    :root {
    --nav-padding: clamp(12px, 7.3775px + 1.2327vw, 20px);
    --grid-gap: 20px;
    --grid-margin: clamp(24px, 14.755px + 2.4653vw, 40px);
    --logo-height: clamp(30px, 24.2219px + 1.5408vw, 40px);

    --fs-16: 14px;                                                 /* site map nav */
    --fs-17: clamp(14px, 13.4222px + 0.1541vw, 15px);              /* labels text */
    --fs-18: clamp(15px, 14.4222px + 0.1541vw, 16px);              /* thumbnail caption / slide caption and counter / buttons / employee data / footer text / form text */
    --fs-20: clamp(16px, 15.4222px + 0.1541vw, 17px);              /* nav thumbnail caption / main text block / scroll-nav text / employee contact / footer header */
    --fs-24: clamp(18px, 16.8444px + 0.3082vw, 20px);              /* nav text / text block sub-header / thumbnail header / employee header / large slide counter / contact info */
    --fs-36: clamp(22px, 20.8444px + 0.3082vw, 24px);              /* case studies list header */
    --fs-40: clamp(24px, 21.6888px + 0.6163vw, 28px);              /* case studies arrow-nav */
    --fs-48: clamp(32px, 27.3775px + 1.2327vw, 40px);              /* text block main header / clients header */
    --fs-72: clamp(36px, 29.0663px + 1.849vw, 48px);               /* section header */
    --fs-128: clamp(50px, 32.6656px + 4.6225vw, 80px);             /* main header */
    }

}

@media screen and (1024px <= width < 1280px) {
    
    :root {
    --nav-padding: 20px;
    --grid-gap: 20px;
    --grid-margin: 40px;
    --logo-height: 40px;

    --fs-16: 14px;                   /* site map nav */
    --fs-17: 15px;                   /* labels text */
    --fs-18: 16px;                   /* thumbnail caption / slide caption and counter / buttons / employee data / footer text / form text */
    --fs-20: 17px;                   /* nav thumbnail caption / main text block / scroll-nav text / employee contact / footer header */
    --fs-24: 20px;                   /* nav text / text block sub-header / thumbnail header / employee header / large slide counter / contact info */
    --fs-36: 24px;                   /* case studies list header */
    --fs-40: 28px;                   /* case studies arrow-nav */
    --fs-48: 40px;                   /* text block main header / clients header */
    --fs-72: 48px;                   /* section header */
    --fs-128: 80px;                  /* main header */
    }

}

@media screen and (1280px <= width < 1920px) {
    
    :root {
    --nav-padding: 20px;
    --grid-gap: 20px;
    --grid-margin: clamp(40px, 20px + 1.5625vw, 50px);
    --logo-height: clamp(40px, 20px + 1.5625vw, 50px);

    --fs-16: clamp(14px, 10px + 0.3125vw, 16px);                   /* site map nav */
    --fs-17: clamp(15px, 11px + 0.3125vw, 17px);                   /* labels text */
    --fs-18: clamp(16px, 12px + 0.3125vw, 18px);                   /* thumbnail caption / slide caption and counter / buttons / employee data / footer text / form text */
    --fs-20: clamp(17px, 11px + 0.4688vw, 20px);                   /* nav thumbnail caption / main text block / scroll-nav text / employee contact / footer header */
    --fs-24: clamp(20px, 12px + 0.625vw, 24px);                    /* nav text / text block sub-header / thumbnail header / employee header / large slide counter / contact info */
    --fs-36: clamp(24px, 0px + 1.875vw, 36px);                     /* case studies list header */
    --fs-40: clamp(28px, 4px + 1.875vw, 40px);                     /* case studies arrow-nav */
    --fs-48: clamp(40px, 24px + 1.25vw, 48px);                     /* text block main header / clients header */
    --fs-72: clamp(48px, 0px + 3.75vw, 72px);                      /* section header */
    --fs-128: clamp(80px, -16px + 7.5vw, 128px);                   /* main header */
    }

}

@media screen and (1920px <= width) {
    
    :root {
    --nav-padding: 20px;
    --grid-gap: 20px;
    --grid-margin: clamp(50px, 35px + 0.7813vw, 55px);
    --logo-height: clamp(50px, 35px + 0.7813vw, 55px);

    --fs-16: clamp(16px, 13px + 0.1563vw, 17px);                  /* site map nav */
    --fs-17: clamp(17px, 14px + 0.1563vw, 18px);                  /* labels text */
    --fs-18: clamp(18px, 15px + 0.1563vw, 19px);                  /* thumbnail caption / slide caption and counter / buttons / employee data / footer text / form text */
    --fs-20: clamp(20px, 14px + 0.3125vw, 22px);                  /* nav thumbnail caption / main text block / scroll-nav text / employee contact / footer header */
    --fs-24: clamp(24px, 18px + 0.3125vw, 26px);                  /* nav text / text block sub-header / thumbnail header / employee header / large slide counter / contact info */
    --fs-36: clamp(36px, 24px + 0.625vw, 40px);                   /* case studies list header */
    --fs-40: clamp(40px, 28px + 0.625vw, 44px);                   /* case studies arrow-nav */
    --fs-48: clamp(48px, 30px + 0.9375vw, 54px);                  /* text block main header / clients header */
    --fs-72: clamp(72px, 48px + 1.25vw, 80px);                    /* section header */
    --fs-128: clamp(128px, 80px + 2.5vw, 144px);                  /* main header */
    }

}

/*//////////////////////////////////////////////////////////////////////
general styles */

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    font-family: 'untitled-sans', 'Helvetica', 'Arial', sans-serif;
    font-weight: var(--fw-normal);
    font-size: var(--fs-20);
    line-height: 1.2;
    color: var(--g3-off-white);
    background-color: var(--g3-black);
    margin: 0;
}

main {
    position: relative;
    background: var(--g3-black);
    overflow-x: hidden;
    z-index: 1;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

ol {
    padding: 0;
    margin: 0;
}

button {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
}

:focus-visible {    /* keyboard navigation style */
    outline: 3px solid var(--g3-off-white);
    outline-offset: 3px;
}

* {
    -webkit-tap-highlight-color: transparent;   /* remove chrome button tap highlight */
    box-sizing: border-box;
}

/*//////////////////////////////////////////////////////////////////////
text styles */

h1, h2, h3, h4, h5, h6, p, a {
    margin: 0px;
    padding: 0px;
    font-weight: var(--fw-normal);
}

/* Main Header */
h1 {
    color: var(--g3-true-white);
    font-size: var(--fs-128);
    line-height: 1;
    letter-spacing: -0.08em;
    font-variant-numeric: slashed-zero;
}

/* Expert Header */
h2 {
    color: var(--g3-off-white);
    font-size: var(--fs-72);
    line-height: 1;
    letter-spacing: -0.08em;
    font-variant-numeric: slashed-zero;
}

/* Block Header */
h3 { 
    color: var(--g3-off-white);
    font-size: var(--fs-48);
    line-height: 1.167;
    letter-spacing: -0.06em;
    font-variant-numeric: slashed-zero;
}

/* Case Study Arrow-Nav */
h4 {
    font-size: var(--fs-40);
    line-height: 1.2;
    letter-spacing: -0.04em;
}

/* Case Study List Header */
.text-36 {
    font-size: var(--fs-36);
    line-height: 1.11;
    letter-spacing: -0.04em;
}

/* Text Nav */
.text-24 {
    font-size: var(--fs-24);
    line-height: 1.25;
    letter-spacing: -0.04em;
}

/* Paragraph / Nav Thumbnail (true-white) */
.text-20 {
    font-size: var(--fs-20);
    line-height: 1.2;
    letter-spacing: -0.04em;
}

/* Button / img caption */
.text-18 {
    font-size: var(--fs-18);
    line-height: 1.33;
    letter-spacing: -0.03em;
}

/* Label */
.text-17 {
    font-size: var(--fs-17);
    line-height: 1.176;
    letter-spacing: -0.02em;
}

/* Site map nav  */
.text-16 {
    font-size: var(--fs-16);
    line-height: 1.176;
    letter-spacing: -0.02em;
}

/* Utilities */
.medium {
    font-weight: var(--fw-medium);
}

.text-block {
    white-space: pre-line;
}

.uppercase {
    text-transform: uppercase;
}

.no-wrap {
    white-space: nowrap;
}

.tabular {
    font-variant-numeric: lining-nums tabular-nums;
}

/*//////////////////////////////////////////////////////////////////////
image styles */

.cover {
    position: absolute;
    display: block;
    width: 100%;
    height: 75vh;
    height: 75svh;
    object-fit: cover;
    opacity: 0.5;
    z-index: -1;
}

.cover-placeholder {
    position: absolute;
    width: 100%;
    height: 75vh;
    height: 75svh;
    background: var(--g3-dark-grey);
}

img:not(.cover) {
    display: block;
    font-style: italic;
    font-size: var(--fs-20);
    font-weight: var(--fw-normal);
    object-fit: cover;
    max-width: 100%;
}

/*//////////////////////////////////////////////////////////////////////
svg styles */

svg {
    fill: var(--g3-off-white);
}

/*//////////////////////////////////////////////////////////////////////
grid */

.grid {
    display: grid;
    column-gap: var(--grid-gap);
    padding-inline: calc(var(--grid-margin) * 2);
    grid-template-columns: repeat(12, 1fr);
}

/*//////////////////////////////////////////////////////////////////////
nav*/

nav {
    position: fixed;
    width: 100%;
    height: calc(var(--logo-height) * 2); /* 100px */
    align-items: center;  /* center vertically */
    transition: var(--transition-transform-300);
    z-index: 3;
}

nav.hidden {
    transform: translateY(-100%);
}

#nav-background {
    background: var(--g3-black);
    position: absolute;
    top: -100vh;
    left: 0;
    width: 100%;
    height: 100vh;
    transition: var(--transition-transform-200);
    z-index: -1;
}

.logo {
    grid-column: 1 / span 2;
    width: max-content; /* prevent clickable area stretching inside grid */
    z-index: 1;
}

.logo > svg {display: block; height: var(--logo-height);} /* 50px */
.logo svg > path:nth-last-child(2) {fill: var(--g3-blue);} /* bottom blue circle */
.logo svg > path:last-child {transition: var(--transition-opacity-200);} /* top circle white */
a:hover svg > path:last-child {opacity: 0;} /* circle animation */

/*//////////////////////////////////////////////////////////////////////
nav desktop */

#nav-desktop {
    grid-column: 8 / span 3;
    display: flex;
    gap: calc(var(--fs-24) * 2); /* 48px */
    z-index: 0;
}

#nav-desktop .dropdown-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;

    padding-top: calc(var(--grid-margin) * 2 + var(--fs-24) * 2); /* 100px + 48px */
    padding-bottom: calc(var(--fs-24) * 3); /* 72px */
    padding-inline: calc(var(--grid-margin) * 2); /* 100px */
    
    display: flex;
    gap: var(--grid-gap);
    justify-content: end;
    flex-wrap: wrap;
    z-index: -1;

    opacity: 0;
    pointer-events: none;
    user-select: none;              /* prevent selecting when invisible */
    -webkit-user-select: none;      /* prevent safari selecting when invisible */

    transition: var(--transition-opacity-200);
}

#nav-desktop .dropdown.active .dropdown-content {
    opacity: 1;
    pointer-events: auto;
    user-select: auto;          /* toggle off preventing selecting when invisible */
    -webkit-user-select: auto;  /* toggle off preventing safari selecting when invisible */
}

#nav-desktop .dropdown li {
    width: calc((100% - var(--grid-gap) * 5) / 6); /* two grid columns */
}

#nav-desktop .dropdown img {
    aspect-ratio: 1.5 / 1;  
    width: 100%;
}

#nav-desktop .dropdown-content h6 {
    margin-top: calc(var(--fs-20) * 0.6);
    display: inline;
}

body > *:not(nav) {
    transition: filter var(--transition-timing-200);
}

body > *:not(nav).dropdown-active {
    filter: blur(20px) brightness(0.8);
}

/*//////////////////////////////////////////////////////////////////////
nav desktop language selection */

#nav-lang-desktop {
    grid-column: 11 / span 2;
    position: absolute;
    right: 0;
}

#nav-lang-desktop button {
    display: flex;
    gap: calc(var(--fs-24) * 0.42); /* 10px */
}

#nav-lang-desktop ul {
    position: absolute;
    display: flex;
    gap: var(--fs-24); /* 24px */
    padding-right: var(--fs-24); /* 24px */
    opacity: 0;
    transition: var(--transition-transform-200), var(--transition-opacity-200);
    pointer-events: none;
    user-select: none;              /* prevent selecting when invisible */
    -webkit-user-select: none;      /* prevent safari selecting when invisible */
}

#nav-lang-desktop:hover ul,
#nav-lang-desktop:focus-within ul {
    transform: translateX(-100%);
    opacity: 1;
    pointer-events: auto;
    user-select: auto;          /* toggle off preventing selecting when invisible */
    -webkit-user-select: auto;  /* toggle off preventing safari selecting when invisible */

}

#nav-lang-desktop svg {
    fill: var(--g3-true-white);
    width: calc(var(--fs-24) * 0.75); /* 18px */
    transition: var(--transition-transform-200);
}

#nav-lang-desktop:hover svg,
#nav-lang-desktop button:focus svg {
    transform: rotate(-180deg);
}

/*//////////////////////////////////////////////////////////////////////
nav mobile */

#hamb {
    display: none;
    grid-column: 12;
    width: var(--fs-72);
    height: var(--fs-72);
    margin-left: auto;
    z-index: 2;
}

#hamb > svg {
    display: block;
    pointer-events: none;
}

#hamb > svg > rect {
    transform-origin: center;
    transition: var(--transition-transform-300), var(--transition-opacity-150);
}

#nav-mobile {
    display: none;
    background: var(--g3-black);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding-inline: var(--grid-margin); /* 40px */
    padding-block: calc(var(--grid-margin) * 4.5) calc(var(--grid-margin) * 1.5); /* 180px 60px */

    transform: translateY(-100%);
    transition: var(--transition-transform-300); /* Transition same as in js */
    pointer-events: none;
    user-select: none;                  /* prevent selecting when invisible */
    -webkit-user-select: none;          /* prevent safari selecting when invisible */
    overflow-y: auto;                   /* allow scrolling inside nav */
    z-index: -2;
}

#nav-mobile > ul {
    width: 100%;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--grid-margin);
    
    opacity: 0;
    transform: translateY(75vh);
    transition: var(--transition-transform-300), var(--transition-opacity-300);
}

#nav-mobile > ul > li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
    border-top: 1px solid var(--g3-true-white);
    padding-top: var(--nav-padding);
}

#nav-mobile > ul > li > ul {
    display: flex;
    flex-direction: column;
    gap: var(--nav-padding);
}

#nav-mobile > ul > li:last-child {
    display: flex;
    border-top: 0;
    gap: var(--nav-padding);
    padding-top: calc(var(--grid-margin) * 2.5); /* 100px */
}

#nav-mobile > ul > li:last-child > ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--nav-padding);
}

#nav-mobile > ul > li > a {
    height: max-content;
    max-width: max-content;
    font-size: var(--fs-48);
    overflow: hidden;            /* Hides overflow */
    text-overflow: ellipsis;     /* Adds "..." when text is cut off */
}

#nav-mobile > ul > li > ul a,
#nav-mobile p {
    font-size: var(--fs-20);
}


/*//////////////////////////////////////////////
nav active styles */

body.nav-active {
    overflow: hidden;
    position: fixed;
    touch-action: none;
}

#nav-mobile.nav-active {
    transform: translateY(0px);
    pointer-events: auto;
    user-select: auto;          /* toggle off preventing selecting when invisible */
    -webkit-user-select: auto;  /* toggle off preventing safari selecting when invisible */
}

#nav-mobile.nav-active > ul {
    opacity: 1;
    transform: translateY(0px);
}

#hamb > svg.nav-active #rec1 {
    opacity: 0;
    transform: translateY(24%);
}

#hamb > svg.nav-active #rec4 {
    opacity: 0;
    transform: translateY(-24%);
}

#hamb > svg.nav-active #rec2 {
    transform: rotate(-45deg);
}

#hamb > svg.nav-active #rec3 {
    transform: rotate(-135deg);
}

/*//////////////////////////////////////////////////////////////////////
header */

header {
    position: relative;
    height: 75vh;
    height: 75svh;
    overflow: hidden;
    z-index: 0;
}

#header-content {
    position: absolute;
    bottom: calc(var(--grid-margin) * 2); /* 100px */
    padding-top: calc(var(--grid-margin) * 4); /* 200px */
    align-items: end; /* align bottom */
    width: 100%;
    z-index: -1;
}

#header-content h1 {
    grid-column: 1 / span 8;
    transform: translateY(0.11em); /* move to the baseline */
}

#header-content.contact h1 {
    grid-column: 1 / span 7;
}

.header-contact-info {
    grid-column: 8 / span 5;
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-margin) * 0.75); /* 40px / 30px */
}

.header-contact-info > *:nth-child(2) {
    display: flex;
    gap: var(--grid-gap);
}

.header-contact-info > *:nth-child(2) > * {
    width: calc(40% - var(--grid-gap) * 0.6);
}

.header-caption {
    grid-column: 11 / span 2;
    display: flex;
    flex-direction: column;
    gap: var(--fs-24);
    align-items: end;
    transform: translateY(0.2em); /* move to the baseline */
}

.header-caption > .cs-slider-caption > * {
    text-align: right; /* justify right */
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--fs-16) * 0.45); /* 7px */
    margin-inline: calc(var(--grid-margin) * 2); /* 100px */
    padding-top: calc(var(--grid-margin) * 2.6); /* 130px */
}

.breadcrumbs > a:first-child {
    text-transform: uppercase;
}

/*//////////////////////////////////////////////////////////////////////
footer */

footer {
    padding-block: var(--grid-margin) calc(var(--grid-margin) * 2); /* 50px 100px */
}

footer > * {
    grid-column: span 2;
}

footer > :first-child {
    grid-column: span 6;
    display: flex;
    flex-direction: column;
    gap: var(--grid-margin);
    justify-content: space-between;
}

footer > :last-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-dropdown {
    display: flex;
    flex-direction: column;
}

.footer-dropdown > li {
    display: flex;
    justify-content: space-between;
    align-items: center;  /* center vertically */
}

.footer-dropdown > li > a {      /* footer dropdown header */
    overflow: hidden;            /* Hides overflow */
    text-overflow: ellipsis;     /* Adds "..." when text is cut off */
}

.footer-dropdown > li > button {
    display: none;
    width: calc(var(--fs-24) * 2); /* 36px on mobile */
    height: calc(var(--fs-24) * 1.2); /* 18px on mobile */
}

.footer-dropdown svg {
    fill: var(--g3-true-white);
    width: calc(var(--fs-24) * 1); /* 18px on mobile */
    margin-left: auto;
    pointer-events: none;
    transition: var(--transition-transform-200);
}

/* top margin added on first child instead of dropdown content 
instead of other padding methods to prevent double margin when dropdown collapsed
(due to the way dropdown scrollHeight is calculated by js */
.footer-dropdown-content > :first-child {
    margin-top: var(--grid-margin);
}

.footer-dropdown-content,
.footer-lang {
    display: flex;
    flex-direction: column;
    gap: calc(var(--fs-18) * 0.667); /* 12px */
}

.footer-lang {
    flex-wrap: wrap;
    margin-top: calc(var(--fs-18) * 1.333); /* 24px */
}

.footer-lang > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(var(--nav-padding) * 0.5);
}

/*//////////////////////////////////////////////////////////////////////
blocks left / right / full-width */

/* Catch-all class for content blocks defining padding and border */
.block {
    border-bottom: 1px solid var(--g3-off-white);
    background: var(--g3-black);
    padding-block: calc(var(--grid-margin) * 1.6) calc(var(--grid-margin) * 2); /* 80px 100px */
}

.block-header {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--grid-margin) * 0.6); /* 30px */
    padding-bottom: calc(var(--grid-margin) * 2); /* 100px */
}

.block-text {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-self: end;
    gap: calc(var(--grid-margin) * 1.2); /* 60px */
}

.block-img {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-gap) * 0.6);  /* 12px */
}

/* block left */
.block-left > .block-header,
.block-left > .block-text {
    grid-column: 1 / span 4;
}

.block-left > .block-img {
    grid-column: 8 / span 5;
    grid-row: 1 / span 2;
}   

/* block right */
.block-right > .block-header,
.block-right > .block-text {
    grid-column: 8 / span 4;
}

.block-right > .block-img {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
}

/* block full width */
.block-full-width > .block-header {
    grid-column: 1 / span 4;
}

.block-full-width > .block-text {
    grid-column: 8 / span 4;
    grid-row: 1 / span 2;
    align-self: start;
}

.block-full-width > .content-block-image,
.block-full-width > .content-block-video,
.block-full-width > .content-block-wiper {
    grid-column: 1 / span 12;
    grid-row: 3;
    max-height: calc(100vh - var(--grid-margin) * 5);
    margin-top: calc(var(--grid-margin) * 0.8); /* 40px */
}

.block-full-width > .carousel-footer {
    grid-column: 1 / span 4;
    grid-row: 2;
    align-self: end;
}

/* block timeline */
.block-timeline {
    grid-auto-rows: min-content 1fr;
}

.block-timeline > .block-header {
    grid-column: 1 / span 4;
    padding-bottom: var(--grid-margin); /* 50px */
}

.block-timeline > .content-block-image {
    grid-column: 6 / span 7;
    grid-row: 1 / span 2;
    height: max-content;
    align-self: center;
}

.block-timeline > .carousel-footer {
    grid-column: 1 / span 4;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.block-timeline > .carousel-footer > div:first-child { /* counter and navigation container */
    display: flex;
    gap: var(--grid-gap);
    padding-bottom: var(--grid-margin); /* 50px */
}

.timeline-captions {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.slide-long-caption-container p {
    padding-top: var(--fs-24);
}

/* block section pages list */
.block-section-pages-list > *:first-child {
    grid-column: 1 / span 12;
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-margin) * 2); /* 100px */
}

.section-pages-list-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: calc(var(--grid-margin) * 1.5) var(--grid-gap);
}

.section-pages-list-container > a {
    border-top: 1px solid var(--g3-off-white);
    padding-top: calc(var(--fs-18) * 0.5);
    display: grid;
    grid-template-rows: calc(var(--grid-margin) * 2.5) auto 1fr;
    align-items: start;
}

.section-pages-list-container h6 {
    display: inline;
}

.section-pages-list-container p {
    margin-top: var(--fs-18);
    place-self: start;
}

.section-pages-list-container img {
    aspect-ratio: 1 / 1;  
    width: 100%;
}

/* block expert */
.block-expert {
    background: var(--g3-dark-grey);
}

.block-expert > h2 {
    grid-column: 1 / span 7;
    padding-bottom: calc(var(--grid-gap) * 2); /* 40px */;
}

.block-expert > .button {
    grid-column: 1 / span 7;
    grid-row: 2;
    align-self: end; /* align bottom */
}

.block-expert > *:last-child { /* expert data + image */
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);    
}

.block-expert > *:last-child > *:first-child { /* expert data */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.block-expert h5 {
    padding-bottom: calc(var(--fs-24) / 3);
}

/* block clients */
.block-clients {
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-margin) * 2); /* 100px */
    align-items: center;
}

.block-clients > h3 {
    text-align: center;    
}

.block-clients > *:nth-child(2) {
    display: flex;
    justify-content: center;
    align-self: stretch;
    place-content: center;
    flex-wrap: wrap;
    gap: var(--grid-margin) calc(var(--grid-margin) * 1.5); /* 50px / 75px */
}

.block-clients img {
    height: calc(var(--grid-margin) * 2.5); /* 125px */
}

/* block team */
.block-team > .grid {
    row-gap: calc(var(--grid-gap) * 2);
}

.block-team > .grid > * {
    grid-column: span 3;
}

.block-team h3 {
    padding-inline: calc(var(--grid-margin)* 2);
    padding-bottom: calc(var(--grid-margin) * 1.5); /* 75px */
}

.block-team h5 {
    padding-top: var(--fs-20);
    padding-bottom: calc(var(--fs-24) / 3);
}

.block-team img {
    aspect-ratio: 1 / 1;
    width: 100%;
}

/*//////////////////////////////////////////////////////////////////////
Case Studies */

.block-cs-index {
    border-bottom: 1px solid var(--g3-off-white);
    background: var(--g3-black);
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-margin) * 1.6); /* 80px */
    padding-inline: calc(var(--grid-margin) * 2); /* 100px */
    padding-block: calc(var(--grid-margin) * 1.6) calc(var(--grid-margin) * 4); /* 80px 200px */
}

/* index header */
.block-cs-index > *:first-child {
    display: flex;
    justify-content: space-between;
    gap: var(--grid-gap);
}

/* index header text */
.block-cs-index h4 {
    max-width: 60%;
}

/* index tile grid */
.block-cs-index > *:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: calc(var(--grid-margin)* 1.2);
    column-gap: var(--grid-gap);
}

.block-cs-index a {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
}

.block-cs-index img {
    aspect-ratio: 1.5 / 1;
    width: 100%;
}

.block-cs-index a > *:last-child {
    display: flex;
    justify-content: space-between;
    gap: var(--grid-gap);
}

/* cs index sort form */
.cs-index-sort {
    height: max-content;
}

#sort-trigger {
    display: flex;
    align-items: center;
    height: max-content;
    gap: calc(var(--fs-24) * 0.42); /* 10px */
}

.cs-index-sort ul {
    position: absolute;
    display: flex;
    gap: calc(var(--fs-24) * 1); /* 24px */
    padding-right: calc(var(--fs-24) * 1); /* 24px */
    opacity: 0;
    transition: var(--transition-transform-200), var(--transition-opacity-200);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.cs-index-sort.dropdown-active ul {
    transform: translateX(-100%);
    opacity: 1;
    pointer-events: auto;
    user-select: auto;
    -webkit-user-select: auto;
}

#sort-trigger svg {
    fill: var(--g3-true-white);
    width: calc(var(--fs-24) * 0.75); /* 18px */
    transition: var(--transition-transform-200);
}

.cs-index-sort.dropdown-active svg {
    transform: rotate(-180deg);
}

.cs-sort-button {
    opacity: 0.5;
    transition: var(--transition-opacity-200);
}

.cs-sort-button:not(.current-sort):hover {
    opacity: 1;
}

.current-sort {
    cursor: auto;
    opacity: 1;
}

/* cs cover slider */
#cs-cover-slider {
    position: absolute;
    width: 100%;
    display: flex;
    gap: 4px;

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

#cs-cover-slider::-webkit-scrollbar {    /* Hide scrollbar in Safari */
    display: none;
}

#cs-cover-slider .cover {
    position: relative;
    scroll-snap-align: center;
    min-width: 100vw;
}

.cover-index-container {
    user-select: none;
}

.cs-slider-arrow-left,
.cs-slider-arrow-right {
    cursor: pointer;
}

.cs-slider-caption,
.cs-cover-index {
    display: none;
}

.cs-current {
    display: inline;
}

/*//////////////////////////////////////////////////////////////////////
Case Study detail */

.block-cs {
    border-bottom: 1px solid var(--g3-off-white);
    background: var(--g3-black);
    row-gap: var(--grid-margin); /* 50px */
    padding-block: var(--grid-margin) calc(var(--grid-margin) * 2); /* 50px 100px */
}

/* Key Data Block */
.block-cs > h3 {
    grid-column: 1 / span 4;
    grid-row: 1;
}

.block-cs > .cs-key-data {
    grid-column: 1 / span 4;
    grid-row: 2;
}

.block-cs > .tinymce {
    grid-column: 8 / span 4;
    grid-row: 2;
}

.cs-key-data ul {
    border-top: 1px solid var(--g3-true-white);
}

.cs-key-data li {
    border-bottom: 1px solid var(--g3-true-white);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
    padding-block: calc(var(--fs-24) * 0.5);
}

.cs-key-data h5 {
    padding-block: calc(var(--grid-margin) * 1.2) calc(var(--fs-24) * 0.85) ; /* 60px 20px */
}

/* CS Content Sections */
.cs-content > .cs-section-text {
    grid-column: span 12;
    display: grid;
    column-gap: var(--grid-gap);
    grid-template-columns: repeat(12, 1fr);
    padding-block: var(--grid-margin) calc(var(--grid-margin) * 2);
}

.cs-section-text > h3 {
    grid-column: 1 / span 4;
}

.cs-section-text > .tinymce {
    grid-column: 8 / span 4;
}

.cs-content > .cs-image-tile {
    grid-column: span 6;
}

.cs-content > .cs-image-tile.full-width {
    grid-column: span 12;
}

.cs-content img {
    aspect-ratio: 1.5 / 1;
    height: max-content;
    width: 100%;
}

.cs-content .lightbox-trigger {
    cursor: pointer;
}

.cs-image-tile p {
    max-width: calc(100% * 2/3 - var(--grid-gap) * 1/3); /* 4 grid columns */
    padding-top: calc(var(--fs-20) * 0.5);
}

.cs-image-tile.full-width p {
    max-width: calc(100% / 3 - var(--grid-gap) * 2/3); /* 4 grid columns */
}

/* Prev / Next */
.cs-prev {
    grid-column: 1 / span 4;
    grid-row: 1;
}

.cs-next {
    grid-column: 9 / span 4;
    grid-row: 1;
    text-align: right;
}

.cs-prev img,
.cs-next img {
    aspect-ratio: 1.5 / 1;
    width: 100%;
    padding-block: calc(var(--fs-40) * 0.75) calc(var(--fs-24) * 0.42); /* 30px 10px */
}

.block-cs a h6 {
    display: inline;
}


/*//////////////////////////////////////////////////////////////////////
utilities */

#map {
    display:block;
    height: 50vh;
    height: 50svh;
    width: 100%;
    border: 0px;
    filter: grayscale(1) brightness(0.5) contrast(1.05);
}

#map:focus {
    outline: none;
}

.label {
    display: inline-block;
    padding: calc(var(--fs-17) * 0.29) calc(var(--fs-17) * 0.88); /* 5px 15px */
    border-radius: calc(var(--fs-17) * 2.2);
    background: var(--g3-light-grey);
    width: max-content;
    height: max-content;
}

.button {
    padding: calc(var(--fs-18) * 0.55) calc(var(--fs-18) * 1.11); /* 10px 20px */
    border-radius: calc(var(--fs-18) * 2.2);
    border: 1px solid var(--g3-off-white);
    white-space: nowrap;
    text-decoration: none;
    transition: all var(--transition-timing-150);
    width: max-content;
    height: max-content;
}

.header-contact-info .button {
    border: 1px solid var(--g3-black);
}

.button:hover {
    color: var(--g3-black);
    background: var(--g3-off-white);
}

.header-contact-info .button:hover {
    color: var(--g3-blue);
    background: var(--g3-black);
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--grid-gap) * 0.5);  /* 10px */
}


/*//////////////////////////////////////////////////////////////////////
Carousel and Lightbox */

/* general */
.content-block-image,
.content-block-wiper {
    display: flex;
    height: 100%;
}

.content-block-image > img,
.content-block-wiper > img,
.lightbox-image > img {
    aspect-ratio: 1.5 / 1;
    min-height: 100%;
    min-width: 100%;
}

/* slider */
.carousel-slider {
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.carousel-slider::-webkit-scrollbar {    /* Hide scrollbar in Safari */
    display: none;
}

.carousel-slider > img {
    scroll-snap-align: center;
}

/* video */
.content-block-video {
    display: flex;
    height: 100%;
}

.content-block-video > video {
    aspect-ratio: 1.5 / 1;
    height: 100%;
    min-width: 100%;
    object-fit: cover;
}

/* image wiper */
.image-wiper {
    position: relative;
    width: 100%;
}

.image-wiper img { /* both images */
    aspect-ratio: 1.5 / 1;
    height: 100%;
    width: 100%;
    pointer-events: none;
    user-select: none;
    filter: brightness(0.9);
}

.wiper-left {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    transition: width 100ms ease;
}

.divider {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(var(--fs-18) * 3);
    transform: translateX(-50%);
    cursor: ew-resize;
    user-select: none;
    transition: left 100ms ease;
}

.divider-line {
    width: 1px;
    min-width: 1px;
    margin-inline: calc(var(--fs-18) / 2);
    background: var(--g3-true-white);
    pointer-events: none;
    user-select: none;
}

.divider svg {
    fill: var(--g3-true-white);
    width: var(--fs-18);
    pointer-events: none;
}

.divider svg:first-child {
    transform: rotate(180deg);
}

/* carousel nav */
.carousel-arrow-left,
.carousel-arrow-right {
    width: var(--fs-18);
    padding-block: 0.2em;
    transition: var(--transition-opacity-100);
}

.carousel-arrow-left > svg,
.carousel-arrow-right > svg {
    pointer-events: none;
}

.carousel-arrow-left > svg {
    transform: rotate(180deg);
}

.arrow-hidden {     /* class added by js on extremes of slider scrolling */
    opacity: 0.5;
    pointer-events: none;
}

.carousel-nav {
    display: flex;
    gap: var(--grid-gap);
    align-items: start;
}

/* carousel footer (captions and counter) */
.carousel-footer {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--grid-gap) * 1.2); /* 24px */
}

.carousel-counter {
    display: flex;
}

.slide-index-container {
    position: relative;
    width: fit-content;
}

.slide-index,
.slide-caption {
    display: none;
}

.current-slide,
.current-caption {    /* class added by js */
    display: block;
}


/*//////////////////////////////////////////////////////////////////////
Lightbox */

.lightbox {
    background: var(--g3-black);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    user-select: none;                  /* prevent selecting when invisible */
    -webkit-user-select: none;          /* prevent safari selecting when invisible */
    pointer-events: none;
    opacity: 0;
    transition: var(--transition-opacity-200);
    overflow: hidden;
    z-index: 5;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: calc(var(--grid-gap) * 1.5);
    padding-inline: calc(var(--grid-margin) * 2);
    padding-block: calc(var(--grid-margin) * 1) calc(var(--grid-margin) * 2);
}

.lightbox-image {
    display: flex;
    max-height: 100%;
    place-self: center;
    aspect-ratio: 1.5 / 1;
    cursor: pointer; /* for closing lightbox */    
}

.lightbox-image:has(.lightbox-single-image) {
    overflow: hidden;
}

.lightbox .carousel-footer {
    flex-direction: column;
    gap: calc(var(--grid-gap) * 0.75); /* 20px */
}

.lightbox .carousel-nav {
    align-items: end;
}

.lightbox .carousel-footer > :last-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--grid-gap) * 1.2); /* 24px */
}

/* caption for slider and single photo */
.lightbox .carousel-footer .slide-caption-container,
.lightbox .carousel-footer > p {
    width: calc(50vw - var(--grid-margin) * 2 - var(--grid-gap) / 2);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

/* .lightbox .carousel-footer .slide-caption-container > p {
    max-height: 8em;
} */

.lightbox-close-button {
    width: var(--grid-margin);
    height: var(--grid-margin);
    margin-left: auto;
}

.lightbox-close-button > svg {
    display: block;
    pointer-events: none;
}

.lightbox-close-button rect {
    transform-origin: center;
}

.lightbox-close-button .close-button-rec-1 {transform: rotate(-45deg);}
.lightbox-close-button .close-button-rec-2 {transform: rotate(45deg);}



/*//////////////////////////////////////////////
/* lightbox active styles */

body.lightbox-active {
    overflow: hidden;
    position: fixed;
    touch-action: none;
}

nav.lightbox-active {
    transform: translateY(-100%);
}

.lightbox.lightbox-active {
    opacity: 1;
    pointer-events: auto;
    user-select: auto;          /* toggle off preventing selecting when invisible */
    -webkit-user-select: auto;  /* toggle off preventing safari selecting when invisible */
}


/*//////////////////////////////////////////////////////////////////////
Contact Form */

#contact-form form {
    color: var(--g3-off-white);
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-margin));
}

#contact-form form > div {
    position: relative;
}

#contact-form input,
#contact-form textarea {
    color: var(--g3-true-white);
    font-family: 'untitled-sans', 'Helvetica', 'Arial', sans-serif;
    font-weight: var(--fw-normal);
    font-size: var(--fs-18);
    line-height: 1.33;
    letter-spacing: -0.03em;

    width: 100%;
    background: var(--g3-black);
    border: none;
    border-bottom: 1px solid var(--g3-true-white);
    padding-bottom: 0.2em;
}

#contact-form textarea {
    field-sizing: content;
    max-height: 9em;
    resize: none;
}

#contact-form input:focus-visible,
#contact-form textarea:focus-visible {
    outline: none;
}

#contact-form input:placeholder-shown,
#contact-form textarea:placeholder-shown {
    color: var(--g3-grey);
    opacity: 1;
}

#contact-form input:user-invalid,
#contact-form textarea:user-invalid {
    color: var(--g3-red);
}

#contact-form .block-img button {
    margin-top: calc(var(--grid-margin) * 1/5);
}

.form-error-message {
    color: var(--g3-red);
}

.field-error-message {
    color: var(--g3-red);
    opacity: 0.54;
    text-align: end;
    position: absolute;
    right: 0;
    top: 0;
}


/*//////////////////////////////////////////////////////////////////////
Privacy Policy */

.privacy-policy {
    margin-block: calc(var(--grid-margin) * 2);
}

.privacy-policy > * {
    grid-column: 1 / span 4;
}

.privacy-policy > h2 {
    padding-bottom: calc(var(--grid-margin) * 2);
}

.privacy-policy > .button-container {
    padding-top: calc(var(--grid-margin) * 1.2);
}

/*//////////////////////////////////////////////////////////////////////
404 */

.page-not-found,
.coming-soon {
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: calc(var(--grid-margin) * 2);
}

.page-not-found h1 {
    font-size: calc(var(--fs-128) * 2);
}

.coming-soon h1 {
    font-size: calc(var(--fs-128) * 1.2);
}

.page-not-found p,
.coming-soon p {
    font-size: var(--fs-40);
    line-height: 1.2;
    letter-spacing: -0.04em;
}


/*//////////////////////////////////////////////////////////////////////
Cookies Dialog */

#cookie-dialog {
    background: var(--g3-dark-grey);
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-block: var(--grid-gap); /* 20px */    
    gap: var(--grid-gap); /* 20px */
    align-items: center;
    z-index: 2;
    transform: translateY(100%);
    transition: var(--transition-transform-300);
}

#cookie-dialog p {
    grid-column: 1 / span 6;
}

#cookie-dialog > p > a {
    box-shadow: inset 0 -0.05em currentcolor;
}

#cookie-dialog .button-container {
    grid-column: 8 / span 5;
    justify-content: end;
}

#cookie-dialog.visible {
    transform: translateY(0);

}

/*//////////////////////////////////////////////////////////////////////
Anchors */

a {
    color: inherit;
    text-decoration: none;
}

/* Underline style */

/* Larger underline distance from text baseline */
#nav-desktop > li > a,
#nav-desktop .dropdown-content a h6,
.section-pages-list-container a h6,
.block-cs-index a h6,
.block-cs a h6,
.breadcrumbs a,
#nav-mobile > ul > li:last-child > ul p,
.footer-lang p {
    padding-bottom: 0.075em;
}

/* nav desktop dropdown content compensation for bottom padding */
#nav-desktop .dropdown-content a h6 {
    line-height: 1.125;
}

#nav-desktop > li > a,
#nav-desktop .dropdown-content a h6,
.block-cs-index a h6,                       /* cs index tile */
.block-cs a h6,                             /* cs previous / next tile */
.section-pages-list-container a h6,         /* section pages list tile */
.footer-dropdown a,                         /* footer links */
.breadcrumbs a,
.header-caption a {                         /* read more */
    box-shadow: inset 0 -0.05em transparent;
    transition: box-shadow var(--transition-timing-200);
}

#nav-desktop > li > a:hover,
#nav-desktop > li > a.current-section,      /* nav-desktop current section */
#nav-desktop .dropdown-content a:hover h6,  /* nav-desktop tile */
.page-not-found a,                          /* page not found */
.coming-soon a,                             /* coming soon link */
.block-cs-index a:hover h6,                 /* cs index tile */
.block-cs a:hover h6,                       /* cs previous / next tile */
.section-pages-list-container a:hover h6,   /* section pages list tile */
#nav-mobile > ul > li:last-child > ul p,    /* nav-mobile current language */
.footer-lang p,                             /* footer current language */
.footer-dropdown a:hover,                   /* footer links */
.breadcrumbs a:hover,
.header-caption a:hover {                   /* read more */
    box-shadow: inset 0 -0.05em currentcolor;
}

/* Grayed-out Style */

#nav-lang-desktop a,                        /* lang selection desktop */
#nav-mobile > ul > li:last-child a,         /* lang selection mobile */
.footer-lang a,                             /* lang selection footer */
.carousel-arrow-left > svg,                 /* carousel arrows */
.carousel-arrow-right > svg {               /* carousel arrows */  
    opacity: 0.7;
    transition: var(--transition-opacity-200);
}

#nav-lang-desktop a:hover,                  /* lang selection desktop */
#nav-mobile > ul > li:last-child a:hover,   /* lang selection mobile */
.footer-lang a:hover,                       /* lang selection footer */
.carousel-arrow-left:hover > svg,           /* carousel arrows */
.carousel-arrow-right:hover > svg {         /* carousel arrows */
    opacity: 1;
}

/* image link hover */

a img {
    transition: var(--transition-opacity-200);
}

a:hover img {
    opacity: 0.8;
}

/*//////////////////////////////////////////////////////////////////////
TinyMCE styles */

.tinymce > ul {
    padding-left: 1em;
    list-style: disc;
}

.tinymce > ol {
    padding-left: 1em;
}

.tinymce a:not(footer .tinymce a) {
    box-shadow: inset 0 -0.05em currentcolor;
}

.tinymce strong {
    font-weight: var(--fw-medium);
}

/*//////////////////////////////////////////////////////////////////////
color classes */

.black {color: var(--g3-black);}
.bg-black {background: var(--g3-black);}
.dark-grey {color: var(--g3-dark-grey);}
.bg-dark-grey {background: var(--g3-dark-grey);}
.grey {color: var(--g3-grey);}
.bg-grey {background: var(--g3-grey);}
.light-grey {color: var(--g3-light-grey);}
.bg-light-grey {background: var(--g3-light-grey);}
.off-white {color: var(--g3-off-white);}
.bg-off-white {background: var(--g3-off-white);}
.true-white {color: var(--g3-true-white);}
.bg-true-white {background: var(--g3-true-white);}
.green {color: var(--g3-green);}
.bg-green {background: var(--g3-green);}
.blue {color: var(--g3-blue);}
.bg-blue {background: var(--g3-blue);}
.purple {color: var(--g3-purple);}
.bg-purple {background: var(--g3-purple);}
.pink {color: var(--g3-pink);}
.bg-pink {background: var(--g3-pink);}
.red {color: var(--g3-red);}
.bg-red {background: var(--g3-red);}
.orange {color: var(--g3-orange);}
.bg-orange {background: var(--g3-orange);}
.dark-yellow {color: var(--g3-dark-yellow);}
.bg-dark-yellow {background: var(--g3-dark-yellow);}
.yellow {color: var(--g3-yellow);}
.bg-yellow {background: var(--g3-yellow);}



/*////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////
@media */


/*//////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
@media small desktop */

@media screen and (1280px <= width < 1500px) {

    /*//////////////////////////////////////////////////////////////////////
    nav */

    #nav-desktop {
        grid-column: 7 / span 4;
    }

    #nav-desktop .dropdown-content {
        padding-top: calc(var(--grid-margin) * 2 + var(--fs-24) * 2.4); /* 100px + 48px */
        padding-bottom: calc(var(--fs-24) * 3.6); /* 72px */
    }

    /*//////////////////////////////////////////////////////////////////////
    header */ 

    #header-content.contact h1 {
        grid-column: 1 / span 6;
    }
    
    .header-contact-info {
        grid-column: 7 / span 6;
    }
    
    .header-contact-info > *:nth-child(2) > * {
        width: calc((100% - var(--grid-gap) * 2) * 1/3);
    } 

    /*//////////////////////////////////////////////////////////////////////
    footer */   

    /* All footer columns set equal */
    footer > *,
    footer > :first-child {
        grid-column: span 3;
    }

    /*//////////////////////////////////////////////////////////////////////
    blocks left / right / full-width */

    .block-header {
        gap: calc(var(--grid-margin) * 0.5); /* 20px */
        padding-bottom: calc(var(--grid-margin) * 1.75); /* 70px */
    }
    
    .block-text {
        gap: calc(var(--grid-margin) * 1.5); /* 60px (visually equals block vertical padding) */
    }
    
    /* block left */
    .block-left > .block-header,
    .block-left > .block-text {
        grid-column: 1 / span 5;
    }
    
    .block-left > .block-img {
        grid-column: 7 / span 6;
    }
    
    /* block right */
    .block-right > .block-header,
    .block-right > .block-text {
        grid-column: 8 / span 5;
    }
    
    .block-right > .block-img {
        grid-column: 1 / span 6;
    }
    
    /* block full width */
    .block-full-width > .block-header {
        grid-column: 1 / span 5;
    }
    
    .block-full-width > .block-text {
        grid-column: 7 / span 6;
    }
    
    .block-full-width > .carousel-footer {
        grid-column: 1 / span 5;
    }

    /* block timeline */
    .block-timeline > .block-header {
        grid-column: 1 / span 5;
    }

    .block-timeline > .content-block-image {
        grid-column: 7 / span 6;
    }

    .block-timeline > .carousel-footer {
        grid-column: 1 / span 5;
    }

    /* block section pages list */
    .block-section-pages-list > *:first-child {
        grid-column: 1 / span 9;
        gap: calc(var(--grid-margin) * 2.5); /* 100px */
    }

    .section-pages-list-container {
        grid-template-columns: repeat(3, 1fr);
    }

    /* block expert */
    .block-expert > h2 {
        grid-column: 1 / span 6;
    }
    
    .block-expert > .button {
        grid-column: 1 / span 6;
    }
    
    .block-expert > *:last-child { /* expert data + image */
        grid-column: 7 / span 6; 
    }

    /* block clients */
    .block-clients {
        gap: calc(var(--grid-margin) * 2.5); /* 100px */
    }

    /* block team */
    .block-team h3 {
        padding-bottom: calc(var(--grid-margin) * 1.25); /* 50px */
    }

    .block-team h5 {
        padding-top: var(--fs-18);
        padding-bottom: calc(var(--fs-18) / 3);
    }

    /*//////////////////////////////////////////////////////////////////////
    Case Studies */

    .block-cs-index {
        gap: calc(var(--grid-margin) * 1.6); /* 60px */
        padding-block: calc(var(--grid-margin) * 1.5) calc(var(--grid-margin) * 3.5); /* 60px 140px */
    }

    /* index tile grid */
    .block-cs-index > *:last-child {
        row-gap: calc(var(--grid-margin)* 1.5); /* 60px */
    }

    .block-cs-index a {
        gap: calc(var(--grid-gap) * 0.6); /* 12px */
    }

    /*//////////////////////////////////////////////////////////////////////
    Case Study Detail */

    .block-cs {
        row-gap: calc(var(--grid-margin) * 1.25); /* 50px */
        padding-block: calc(var(--grid-margin) * 1.25) calc(var(--grid-margin) * 2); /* 50px 80px */
    }

    /* Key Data Block */
    .block-cs > h3 {
        grid-column: 1 / span 5;
    }

    .block-cs > .cs-key-data {
        grid-column: 1 / span 5;
    }

    .block-cs > .tinymce {
        grid-column: 7 / span 6;
    }

    .cs-key-data h5 {
        padding-block: calc(var(--grid-margin) * 1) calc(var(--fs-24) * 0.85) ; /* 40px 20px */
    }

    /* CS Content Sections */
    .cs-content > .cs-section-text {
        padding-block: calc(var(--grid-margin) * 1.25) calc(var(--grid-margin) * 2); /* 50px 80px */
    }

    .cs-section-text > h3 {
        grid-column: 1 / span 5;
    }

    .cs-section-text > .tinymce {
        grid-column: 7 / span 6;
    }

    /* regular image caption */
    .cs-image-tile p {
        max-width: calc(100% * 5/6 - var(--grid-gap) * 1/6); /* 5 grid columns */
    }

    /* full width image caption */
    .cs-image-tile.full-width p {
        max-width: calc(100% * 5/12 - var(--grid-gap) * 7/12); /* 5 grid columns */
    }

    /* prev / next */
    .cs-prev img,
    .cs-next img {
        padding-block: calc(var(--fs-40) * 1) calc(var(--fs-24) * 0.5); /* 30px 10px */
    }

    /*//////////////////////////////////////////////////////////////////////
    Lightbox */

    .lightbox {
        padding-inline: calc(var(--grid-margin) * 1.5);
        padding-block: calc(var(--grid-margin) * 1) calc(var(--grid-margin) * 1.5);
    }

    /*//////////////////////////////////////////////////////////////////////
    Privacy Policy */

    .privacy-policy > * {
        grid-column: 1 / span 6;
    }

    .privacy-policy > .button-container {
        padding-top: calc(var(--grid-margin) * 1.5);
    }

    /*//////////////////////////////////////////////////////////////////////
    Contact Form */

    #contact-form .block-img button {
        margin-top: 0;
    }

}

/*//////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
@media tablet */

@media screen and (600px <= width < 1280px) {
    
    /*//////////////////////////////////////////////////////////////////////
    grid */

    .grid {
        padding-inline: var(--grid-margin); /* 40px */
        grid-template-columns: repeat(8, 1fr);
    }

    /*//////////////////////////////////////////////////////////////////////
    nav */

    #hamb {
        grid-column: 8;
    }

    /*//////////////////////////////////////////////////////////////////////
    header */

    #header-content {
        bottom: calc(var(--grid-margin) * 1.5); /* 60px */
    }

    #header-content h1 {
        grid-column: 1 / span 7;
    }
    
    .header-caption {
        grid-column: 1 / span 8;
        padding-top: calc(var(--grid-margin) * 1); /* 40px */
    }

    #header-content.contact h1 {
        grid-column: 1 / span 7;
    }

    .header-contact-info {
        grid-column: 1 / span 8;
        margin-top: calc(var(--grid-margin) * 1.5); /* 60px */
    }

    .header-contact-info > *:nth-child(2) > * {
        width: max-content;
    }

    /*//////////////////////////////////////////////////////////////////////
    footer */

    /* Logo and address */
    footer > :first-child {
        grid-row: span 4;
        gap: calc(var(--grid-margin) * 1.2); /* 48px */
        justify-content: flex-start;
    }

    /* Margin between dropdown sections */
    .footer-dropdown {
        margin-bottom: var(--grid-margin);
    }

    /*//////////////////////////////////////////////////////////////////////
    blocks left / right / full-width */

    .block {
        padding-block: var(--grid-margin) calc(var(--grid-margin) * 1.5); /* 40px 60px*/
    }

    .block-header {
        gap: calc(var(--grid-margin) * 0.5); /* 20px */
        padding-bottom: var(--grid-margin); /* 40px */
    }

    .block-text {
        gap: var(--grid-margin); /* 40px */
        padding-top: var(--grid-margin); /* 40px */
    }

    /* block left and right */
    .block-left > .block-header,
    .block-right > .block-header {
        grid-column: 1 / span 6;
    }

    .block-left > .block-text,
    .block-right > .block-text {
        grid-column: 1 / span 6;
        grid-row: 3;
    }
    
    .block-left > .block-img,
    .block-right > .block-img {
        grid-column: 1 / span 6;
        grid-row: 2 / span 1;
    }

    /* block full width */
    .block-full-width > .block-header {
        grid-column: 1 / span 6;
    }

    .block-full-width > .block-text {
        grid-column: 1 / span 6;
        grid-row: 4;
    }

    .block-full-width > .content-block-image,
    .block-full-width > .content-block-video,
    .block-full-width > .content-block-wiper {
        grid-column: 1 / span 8;
        grid-row: 2;
    }

    .block-full-width > .carousel-footer {
        grid-column: 1 / span 8;
        grid-row: 3;
    }

    /* block timeline */
    .block-timeline > .block-header {
        grid-column: 1 / span 6;
    }

    .block-timeline > .content-block-image {
        grid-column: 1 / span 8;
        grid-row: 2;
    }

    .block-timeline > .carousel-footer {
        grid-column: 1 / span 8;
        grid-row: 3;
        flex-direction: row-reverse;
        gap: var(--grid-gap);
        padding-top: var(--grid-margin); /* 40px */
    }

    .block-timeline > .carousel-footer > div:last-child { /* captions max width to fit 6 grid columns */
        width: calc(75% - var(--grid-gap) / 7);
    }

    /* block section pages list */
    .block-section-pages-list > *:first-child {
        grid-column: 1 / span 6;
        gap: calc(var(--grid-margin) * 2.5); /* 100px */
    }

    .section-pages-list-container {
        grid-template-columns: repeat(2, 1fr);
    }

    /* block expert */
    .block-expert > h2 {
        grid-column: 1 / span 4;
    }
    
    .block-expert > .button {
        grid-column: 1 / span 4;
    }

    .block-expert > *:last-child { /* expert data + image */
        grid-column: 5 / span 3;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column-reverse;
        gap: var(--grid-margin);    
    }
    
    .block-expert > *:last-child > *:first-child { /* expert data */
        gap: calc(var(--grid-margin) * 0.6); /* 24px */
    }

    .block-expert img {
        width: calc(2/3 * 100% + 2/3 * var(--grid-gap));
    }

    /* block clients */
    .block-clients {
        gap: calc(var(--grid-margin) * 2.5); /* 100px */
    }

    /* block team */
    .block-team h3 {
        padding-inline: var(--grid-margin);
        padding-bottom: var(--grid-margin); /* 40px */
    }
    
    .block-team h5 {
        padding-top: var(--fs-18);
        padding-bottom: calc(var(--fs-18) / 3);
    }

    /*//////////////////////////////////////////////////////////////////////
    Case Studies */

    .block-cs-index {
        gap: calc(var(--grid-margin) * 2); /* 80px */
        padding-inline: var(--grid-margin); /* 40px */
        padding-block: var(--grid-margin) calc(var(--grid-margin) * 3.5); /* 40px 140px */
    }

    /* index tile grid */
    .block-cs-index > *:last-child {
        row-gap: var(--grid-margin); /* 40px */
    }

    .block-cs-index a {
        gap: calc(var(--grid-gap) * 0.5); /* 10px */
    }

    /*//////////////////////////////////////////////////////////////////////
    Case Study Detail */

    .block-cs {
        padding-block: calc(var(--grid-margin) * 1) calc(var(--grid-margin) * 1.5); /* 40px 60px */
    }
    
    /* Key Data Block */
    .block-cs > h3 {
        grid-column: 1 / span 6;
    }

    .block-cs > .cs-key-data {
        grid-column: 1 / span 6;
        padding-top: calc(var(--grid-margin) * 0.25); /* 10px (50px collectively with grid row-gap) */
    }

    .block-cs > .tinymce {
        grid-column: 1 / span 6;
        grid-row: 3;
        padding-top: var(--fs-24); /* 20px (60px collectively with grid row-gap) */
    }

    .cs-key-data h5 {
        padding-block: calc(var(--grid-margin) * 1) var(--fs-24); /* 40px 20px */
    }
    
    /* CS Content Sections */
    .cs-content > .cs-section-text {
        grid-column: span 8;
        grid-template-columns: repeat(8, 1fr);
        row-gap: calc(var(--grid-margin) * 1.5); /* 60px */
        padding-block: calc(var(--grid-margin) * 1.25) calc(var(--grid-margin) * 1.5); /* 50px 60px */
    }

    .cs-section-text > h3 {
        grid-column: 1 / span 6;
    }

    .cs-section-text > .tinymce {
        grid-column: 1 / span 6;
        grid-row: 2;
    }

    .cs-content > .cs-image-tile {
        grid-column: span 4;
    }

    .cs-content > .cs-image-tile.full-width {
        grid-column: span 8;
    }

    .cs-image-tile p {
        max-width: 100%;
        padding-top: calc(var(--fs-20) * 0.5);
    }

    /* full width image caption */
    .cs-image-tile.full-width p {
        max-width: calc(100% * 3/4 - var(--grid-gap) * 1/4); /* 6 grid columns */
    }

    /* previous / next */
    .cs-prev {
        grid-column: 1 / span 3;
    }
    
    .cs-next {
        grid-column: 6 / span 3;
    }
    
    .cs-prev img,
    .cs-next img {
        padding-block: calc(var(--fs-40) * 1) calc(var(--fs-24) * 0.5); /* 30px 10px */
    }

    /*//////////////////////////////////////////////////////////////////////
    Lightbox */
    
    .lightbox {
        padding-inline: calc(var(--grid-margin) * 1);
        padding-block: calc(var(--grid-margin) * 1) calc(var(--grid-margin) * 1.5);
    }

    .lightbox .carousel-footer .slide-caption-container,
    .lightbox .carousel-footer > p { /* caption for slider and single photo */
        width: calc(75vw - var(--grid-margin) * 1 - var(--grid-gap));
    }

    /*//////////////////////////////////////////////////////////////////////
    Privacy Policy */

    .privacy-policy > * {
        grid-column: 1 / span 6;
    }

    .privacy-policy > h2 {
        padding-bottom: calc(var(--grid-margin) * 1.5);
    }

    .privacy-policy > .button-container {
        padding-top: var(--grid-margin);
    }

    /*//////////////////////////////////////////////////////////////////////
    Contact Form */

    #contact-form form {
        gap: calc(var(--grid-margin));
    }

    #contact-form .block-img button {
        margin-top: 0;
    }

    /*//////////////////////////////////////////////////////////////////////
    Cookies Dialog */

    #cookie-dialog .button-container {
        grid-column: 7 / span 2;
    }

}

/*//////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
@media mobile and tablet */

@media screen and (width < 1280px) {

    /*//////////////////////////////////////////////////////////////////////
    nav */

    #nav-desktop,
    #nav-lang-desktop {
        display: none;
    }

    #hamb {
        display: block;
    }

    #nav-mobile {
        display: flex;
    }

    /*//////////////////////////////////////////////////////////////////////
    header */

    .header-caption {
        flex-direction: row;
        justify-content: space-between;
    }

    .header-caption > .cs-slider-caption > * {
        text-align: left; /* justify left */
    }

    .breadcrumbs {
        margin-inline: var(--grid-margin); /* 24px / 40px */
    }

    /*//////////////////////////////////////////////////////////////////////
    footer */

    /* All footer elements span 4 columns on both mobile and tablet */
    footer > *,
    footer > :first-child {
        grid-column: span 4;
    }

    /* Dropdowns top border and padding below border */
    .footer-dropdown {
        border-top: 1px solid var(--g3-true-white);
        padding-top: calc(var(--grid-gap) * 0.5);
    }

    /* Show arrow button on mobile and tablet */
    .footer-dropdown > li > button {
        display: flex;
    }

    /* Active dropdown arrow rotation */
    .footer-dropdown.active svg {
        transform: rotate(-180deg);
    }
    
    /* Collapsed dropdown */
    .footer-dropdown-content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 300ms ease-out, opacity 200ms ease-out;
    }
    
    /* Expanded dropdown */
    .footer-dropdown.active > .footer-dropdown-content {
        max-height: 200px; /* placeholder value, actual value calculated in js and added as style */
        opacity: 1;
    }

    /* larger headers for mobile and tablet footer */
    .footer-dropdown > li > a {
        font-size: var(--fs-24);
    }

    /* Lang selection inline */
    footer > :last-child {
        justify-content: flex-start;
    }

    /* Lang selection inline */
    .footer-lang {
        flex-direction: row;
        gap: var(--nav-padding);
        margin-top: 0; /* padding replaced by dropdown element bottom margin */
    }

    /*//////////////////////////////////////////////////////////////////////
    blocks left / right / full-width */ 

    .block-full-width > .content-block-image,
    .block-full-width > .content-block-video,
    .block-full-width > .content-block-wiper {
        margin-top: 0;
    }

    .block-full-width > .carousel-footer {
        padding-top: calc(var(--grid-gap) * 0.6); /* 12px */
    }

    /* block timeline */
    .timeline-captions {
        justify-content: flex-start;
    }

}

/*//////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
@media mobile */

@media screen and (width < 600px) {

    /*//////////////////////////////////////////////////////////////////////
    grid*/
    
    .grid {
        padding-inline: calc(var(--grid-margin) * 2/3); /* 16px */
        grid-template-columns: repeat(4, 1fr);
    }

    /*//////////////////////////////////////////////////////////////////////
    nav */

    nav {
        height: calc(var(--logo-height) * 2); /* 60px */
    }

    .logo > svg {height: var(--logo-height);} /* 30px */

    #hamb {
        grid-column: 4;
    }

    #nav-mobile {
        padding-inline: calc(var(--grid-margin) * 2/3); /* 16px */
        padding-block: calc(var(--grid-margin) * 6) calc(var(--grid-margin) * 2); /* 144px 48px */
    }

    #nav-mobile > ul > li:last-child {
        display: flex;
        border-top: 0;
        gap: var(--nav-padding);
        padding-top: calc(var(--grid-margin) * 2); /* 48px */
    }

    #nav-mobile > ul > li > a {
        font-size: var(--fs-40);
    }
    
    #nav-mobile > ul > li > ul a,
    #nav-mobile p {
        font-size: var(--fs-18);
    }

    /*//////////////////////////////////////////////////////////////////////
    header */

    #header-content {
        bottom: calc(var(--grid-margin) * 1.67); /* 40px */
    }

    #header-content h1 {
        grid-column: 1 / span 4;
    }
    
    .header-caption {
        grid-column: 1 / span 4;
        padding-top: calc(var(--grid-margin) * 1.25); /* 30px */
    }

    .breadcrumbs {
        margin-inline: calc(var(--grid-margin) * 2/3); /* 16px */
        padding-top: calc(var(--grid-margin) * 3.33); /* 80px */
    }

    #header-content.contact h1 {
        grid-column: 1 / span 4;
    }

    .header-contact-info {
        grid-column: 1 / span 4;
        gap: calc(var(--grid-margin) * 1.25); /* 30px */
        margin-top: calc(var(--grid-margin) * 1.67); /* 40px */
        transform: translateY(0.3em); /* move to the baseline */
    }

    .header-contact-info > *:nth-child(2) > * {
        width: auto;
        max-width: max-content;
    }

    .header-contact-info > .button-container {
        display: none; /* hide header buttons on mobile (too little room) */
    }

    /*//////////////////////////////////////////////////////////////////////
    footer */

    /* Unique padding for mobile */
    footer {
        padding-block: calc(var(--grid-margin) * 1.25) calc(var(--grid-margin) * 2.5); /* 30px 60px */
    }

    /* Logo and address is inline and has bottom margin */
    footer > :first-child {
        flex-direction: row;
        gap: var(--grid-margin);
        margin-bottom: calc(var(--grid-margin) * 2.5); /* 60px */
    }

    /* logo and address equal widths */
    footer > :first-child > * {
        flex: 1;
        width: max-content;         /* prevent links stretching inside flex container */
        height: max-content;
    }

    /* Recalculation of margin to keep ~40px */
    .footer-dropdown {
        margin-bottom: calc(var(--grid-margin) * 1.667); /* 40px */
    }

    /* top margin added on first child instead of dropdown content 
    Recalculation of margin to keep ~30px */
    .footer-dropdown-content > :first-child {
        margin-top: calc(var(--grid-margin) * 1.25); /* 30px */
    }

    /*//////////////////////////////////////////////////////////////////////
    blocks left / right / full-width */ 

    .block {
        padding-block: calc(var(--grid-margin) * 1.25) calc(var(--grid-margin) * 2); /* 30px 50px*/
    }

    .block-header {
        gap: calc(var(--grid-margin) * 0.67); /* 16px */
        padding-bottom: calc(var(--grid-margin) * 1.67); /* 40px */
    }

    .block-text {
        gap: calc(var(--grid-margin) * 1.67); /* 40px */
        padding-top: calc(var(--grid-margin) * 1.67); /* 40px */
    }

    /* block left and right */
    .block-left > .block-header,
    .block-right > .block-header {
        grid-column: 1 / span 4;
    }

    .block-left > .block-text,
    .block-right > .block-text {
        grid-column: 1 / span 4;
        grid-row: 3;
    }
    
    .block-left > .block-img,
    .block-right > .block-img {
        grid-column: 1 / span 4;
        grid-row: 2 / span 1;
    }

    /* block full width */
    .block-full-width > .block-header {
        grid-column: 1 / span 4;
    }

    .block-full-width > .block-text {
        grid-column: 1 / span 4;
        grid-row: 4;
    }

    .block-full-width > .content-block-image,
    .block-full-width > .content-block-video,
    .block-full-width > .content-block-wiper {
        grid-column: 1 / span 4;
        grid-row: 2;
    }

    .block-full-width > .carousel-footer {
        grid-column: 1 / span 4;
        grid-row: 3;
    }
    
    /* block timeline */
    .block-timeline > .block-header {
        grid-column: 1 / span 4;
        padding-bottom: calc(var(--grid-margin) * 1.67); /* 40px */
    }

    .block-timeline > .content-block-image {
        grid-column: 1 / span 4;
        grid-row: 2;
    }

    .block-timeline > .carousel-footer {
        grid-column: 1 / span 4;
        grid-row: 3;
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--grid-gap);
        padding-top: calc(var(--grid-margin) * 1.67); /* 40px */
    }

    .block-timeline > .carousel-footer > div:first-child { /* counter and navigation container */
        padding-bottom: 0; /* reset to 0 */
    }
    
    /* block section pages list */
    .block-section-pages-list > *:first-child {
        grid-column: 1 / span 3;
        gap: calc(var(--grid-margin) * 4); /* 100px */
    }

    .section-pages-list-container {
        grid-template-columns: 1fr;
        gap: calc(var(--grid-margin) * 2) var(--grid-gap);
    }

    .section-pages-list-container > a {
        grid-template-rows: auto auto 1fr;
    }

    .section-pages-list-container img {
        margin-top: calc(var(--fs-18) * 1.5);
    }
    
    /* block expert */
    .block-expert {
        row-gap: calc(var(--grid-margin) * 2); /* 50px */
    }

    .block-expert > h2 {
        grid-column: 1 / span 4;
        grid-row: 1;
    }
    
    .block-expert > .button {
        grid-column: 1 / span 4;
        grid-row: 3;
    }

    .block-expert > *:last-child { /* expert data + image */
        grid-column: 1 / span 3;
        grid-row: 2 / span 1;
        display: flex;
        flex-direction: column-reverse;
        gap: calc(var(--grid-margin) * 1.5);    
    }
    
    .block-expert > *:last-child > *:first-child { /* expert data */
        gap: var(--grid-margin); /* 24px */
    }

    /* block clients */
    .block-clients {
        gap: calc(var(--grid-margin) * 3.33); /* 80px */
    }

    .block-clients > *:nth-child(2) {
        gap: calc(var(--grid-margin) * 1.67); /* 40px */
    }

    /* block team */
    .block-team h3 {
        padding-inline: var(--grid-margin);
        padding-bottom: calc(var(--grid-margin) * 1.67); /* 40px */
    }
    
    .block-team h5 {
        padding-top: calc(var(--fs-18) * 0.75);
        padding-bottom: calc(var(--fs-18) / 3);
    }

    /* map */    
    #map {
        height: auto;
        width: 100%;
        aspect-ratio: 1 / 1;
    }

    /*//////////////////////////////////////////////////////////////////////
    Case Studies */

    .block-cs-index {
        gap: calc(var(--grid-margin) * 1.67); /* 40px */
        padding-inline: var(--grid-margin); /* 24px */
        padding-block: calc(var(--grid-margin) * 1.25) calc(var(--grid-margin) * 4); /* 30px 100px */
    }

    /* index header */
    .block-cs-index > *:first-child {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: calc(var(--grid-margin) * 1.67); /* 40px */
    }

    /* index header text */
    .block-cs-index h4 {
        max-width: 100%;
    }

    /* index tile grid */
    .block-cs-index > *:last-child {
        grid-template-columns: 1fr;
        row-gap: calc(var(--grid-margin)* 1.67); /* 40px */
    }

    .block-cs-index a {
        gap: calc(var(--grid-gap)* 0.4); /* 8px */
    }

    /* cs index sort form */
    #sort-trigger {
        display: flex;
        align-items: center;
        height: max-content;
        gap: calc(var(--fs-24) * 0.42); /* 10px */
    }

    .cs-index-sort {
        width: max-content;
    }

    .cs-index-sort ul {
        padding-right: 0;
        padding-left: var(--fs-24); /* 24px */
    }

    .cs-index-sort.dropdown-active ul {
        transform: translateX(100%);
    }


    /*//////////////////////////////////////////////////////////////////////
    Case Study Detail */

    .block-cs {
        row-gap: calc(var(--grid-margin) * 1.67); /* 40px */
        padding-block: calc(var(--grid-margin) * 1.25) calc(var(--grid-margin) * 2); /* 30px 50px */
    }
        
    /* Key Data Block */
    .block-cs > h3 {
        grid-column: 1 / span 4;
    }

    .block-cs > .cs-key-data {
        grid-column: 1 / span 4;
    }

    .cs-key-data h5 {
        padding-block: calc(var(--grid-margin) * 1.67) var(--fs-24); /* 40px 20px */
    }

    .block-cs > .tinymce {
        grid-column: 1 / span 4;
        grid-row: 3;
    }

    
    /* CS Content Sections */
    .cs-content > .cs-section-text {
        grid-column: span 4;
        row-gap: calc(var(--grid-margin) * 2.5); /* 60px */
        grid-template-columns: repeat(4, 1fr);
        padding-block: calc(var(--grid-margin) * 1.25) calc(var(--grid-margin) * 2); /* 30px 50px */
    }

    .cs-section-text > h3 {
        grid-column: 1 / span 4;
    }

    .cs-section-text > .tinymce {
        grid-column: 1 / span 4;
    }

    .cs-content > .cs-image-tile {
        grid-column: span 4;
    }

    .cs-content > .cs-image-tile.full-width {
        grid-column: span 4;
    }

    .cs-image-tile p {
        max-width: 100%;
        padding-top: calc(var(--fs-20) * 0.4);
    }

    /* full width image caption */
    .cs-image-tile.full-width p {
        max-width: 100%;
    }

    /* previous / next */
    
    .cs-prev {
        grid-column: 1 / span 4;
        grid-row: 2;
    }
    
    .cs-next {
        grid-column: 1 / span 4;
        grid-row: 1;
        text-align: left;
    }
    
    .cs-prev img,
    .cs-next img {
        padding-block: calc(var(--grid-margin) * 1.25) calc(var(--grid-margin) / 3); /* 30px 8px */
    }

    /*//////////////////////////////////////////////////////////////////////
    Lightbox */
    
    .lightbox {
        padding-inline: calc(var(--grid-margin) * 1);
        padding-block: calc(var(--grid-margin) * 1.25) calc(var(--grid-margin) * 2);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .lightbox-image {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100vw;
        max-height: 50vh;
        transform: translateY(-60%);
    }

    /* caption for slider and single photo */
    .lightbox .carousel-footer .slide-caption-container,
    .lightbox .carousel-footer > p { 
        width: auto;
    }

    /*//////////////////////////////////////////////////////////////////////
    Privacy Policy */

    .privacy-policy > * {
        grid-column: 1 / span 4;
    }

    .privacy-policy > .button-container {
        padding-top: calc(var(--grid-margin) * 1.667);
    }

    /*//////////////////////////////////////////////////////////////////////
    Contact Form */

    #contact-form form {
        gap: calc(var(--grid-margin) * 1.25);
    }

    #contact-form .block-img button {
        margin-top: 0;
    }

    /*//////////////////////////////////////////////////////////////////////
    Cookies Dialog */

    #cookie-dialog {
        padding-block: calc(var(--grid-gap) * 1);
        gap: calc(var(--grid-gap) * 1);
    }

    #cookie-dialog p {
        grid-column: 1 / span 4;
    }

    #cookie-dialog .button-container {
        grid-column: 1 / span 4;
        grid-row: 2;
        justify-content: start;
    }

}