@import url("settings.css");
@import url("resets.css");

/* stylelint-disable property-no-vendor-prefix */

/* ============================================================ *
   GENERIC

   The Generic layer contains styles that should be applied
   widely across the DOM, i.e. you could apply styles to the
   html, body or * selectors.
 * ============================================================ */

html {
    background: var(--color-ui-bg);
}

@media screen and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0 var(--viewport-spacing);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-base);
    letter-spacing: var(--letter-spacing-base);
    color: var(--color-content-1);
    counter-reset: heading;
}

/* ============================================================ *
   OBJECTS / LAYOUT

   The Objects layer targets elements by their class name only.
   Also, styles in this layer should only be of a layout nature
   -- such as height, width, padding, margin, etc -- and not apply
   any decoration -- such as colours, font-size, etc.
   If an object happens to add anything other than layout, then
   it would be moved to the next layer, Components.
 * ============================================================ */

/* -------------------- SITE LAYOUT -------------------- */
header {
    position: sticky;
    top: 0;
    z-index: var(--z-index-header);
    padding: 1rem 0;
    display: flex;
    gap: 1rem 5vw;
    align-items: baseline;
}

header::before {
    content: "";
    position: absolute;
    inset: 0 calc(-1* var(--viewport-spacing));
    background: var(--color-ui-navigation);
    opacity: var(--color-ui-navigation-opacity);
    z-index: var(--z-index-back);
}

main {
    display: flex;
    flex-direction: column;
    flex: 1;
}

footer {
    padding: 1em 0;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 2em 4em;
    align-items: flex-end;
    font-weight: var(--font-weight-bolder);
}

footer a {
    --link-text-decoration: none;

    font-size: 1rem;
    font-weight: inherit;
}

/* -------------------- GENERAL LAYOUT -------------------- */
section {
    margin: var(--section-margin-top) auto var(--section-margin-bottom);
    padding: var(--content-padding);
    min-width: min(var(--content-max-width), 100%);
    max-width: var(--content-max-width);
}

article {
    padding: var(--section-gap) 0;
    border-bottom: 1px solid var(--color-ui-borders);
}

article:last-child {
    border: 0;
    padding-bottom: 0;
}

/* -------------------- TYPOGRAPHY -------------------- */
p {
    font-size: var(--font-size-bodycopy);
    max-width: var(--font-max-width);
    margin: 0 0 1em;
}

ul,
ol {
    margin-top: 0;
}

strong {
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-strong);
}

a { /* stylelint-disable-line no-descending-specificity */
    position: relative;
    color: var(--link-color);
    font-weight: var(--font-weight-base);
    text-decoration: var(--link-text-decoration);
    text-decoration-color: var(--link-color-underline);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.4rem;
    transition: var(--transition-default);
    font-size: inherit;
}

p a {
    font-weight: var(--font-weight-semibold);
}

a:hover,
a.active {
    --link-color: var(--link-color-hover);
}

a:active {
    --link-color-underline: var(--link-color-active-underline);
    --link-color: var(--link-color-active);
}

h1,
h2,
h3,
h4,
h5 {
    --font-size: 1rem;
    --font-weight: var(--font-weight-light);

    position: relative;
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    line-height: 1.3;
    margin: 0 0 calc(2 * var(--font-size));
    color: var(--color-headings);
}

h1 {
    --font-size: calc(2.5rem + var(--font-size-factor));
}

h2 {
    --font-size: calc(2rem + 0.75 * var(--font-size-factor));
}

h3 {
    --font-size: calc(1.5rem + 0.75 * var(--font-size-factor));
}

h4 {
    --font-size: calc(1rem + 0.25 * var(--font-size-factor));
    --font-weight: var(--font-weight-bold);
}

h5 {
    --font-size: calc(1rem + 0.5 * var(--font-size-factor));

    margin-bottom: 0.5em;
    margin-top: 2em;
}

:is(h1, h2, h3, h4, h5, h6) strong {
    font-weight: var(--font-weight-semibold);
}

.type-display {
    font-size: calc(1.35rem + var(--font-size-factor));
    line-height: var(--type-line-height);
    letter-spacing: var(--type-letter-spacing);
}

@media screen and (width >= 768px) {
    .type-display {
        min-width: 14em;
        max-width: 18em;
    }
}

.type-lead {
    font-size: calc(1rem + 0.5 * var(--font-size-factor));
    line-height: var(--type-line-height);
    letter-spacing: var(--type-letter-spacing);
    margin-bottom: 5em;
}

section .type-lead:last-child {
    margin-bottom: 0;
}

.type-translucent {
    color: var(--cd-purple-70);
}

.type-product {
    color: var(--cd-green-70);
}

.type-align-center {
    text-align: center;
}

.text-columns {
    column-width: 24em;
    column-gap: var(--section-gap);
}

.intermediary-warning {
    display: inline-block;
    color: var(--cd-red-80);
}

/* ============================================================ *
   COMPONENTS

   The Components layer targets elements by their class name.
   The Components layer can contain layout AND decoration styles.
 * ============================================================ */

/* -------------------- TWO COLS LAYOUT -------------------- */
.cols {
    display: flex;
    flex-wrap: wrap;
    gap: var(--section-gap);
}

@media screen and (width >= 768px) {
    .cols > * {
        flex: 1 0 calc(50% - var(--section-gap));
    }
}

.cols.full-height {
    min-height: calc(100vh - var(--full-height-shift));
}

/* -------------------- SECTION MODIFIERS -------------------- */
section.centered {
    min-width: inherit;
    max-width: max(65em, 45vw);
    width: 100%;
}

/* -------------------- BACKGROUNDS -------------------------- */
.bg-dotted {
    background: url("../img/bg.svg") repeat;
    margin: var(--section-margin-top) 0 var(--section-margin-top);
}

.bg-dotted section {
    margin-top: 0;
    margin-bottom: 0;
}

.bg-darken,
.bg-branded {
    --section-margin: calc(-1 * var(--viewport-spacing));
    --section-padding: calc(var(--viewport-spacing) + var(--content-padding));

    margin-right: var(--section-margin);
    margin-left: var(--section-margin);
    padding-right: calc(var(--section-padding)/2);
    padding-left: calc(var(--section-padding)/2);
}

.bg-darken {
    background: var(--color-content-darken);
}

.bg-lighten {
    --color-ui-bg-base: var(--color-content-lighten);
    --color-ui-inverted: var(--color-ui-bg);

    background: var(--color-ui-bg-base);
}

.bg-branded {
    --link-color: var(--color-content-branded);
    --link-color-hover: var(--color-ui-1);

    color: var(--color-content-branded);
    background: var(--color-brand-gradient);
}

/* -------------------- HEADINGS -------------------- */

h1::after {
    content: "";
    position: relative;
    width: 15rem;
    border-bottom: 1px solid var(--color-content-lighten);
    display: block;
    margin: var(--font-size) 0 calc(-1 * var(--font-size));
}

@media screen and (width >= 1024px) {
    h1::after {
        position: relative;
        transform: translateX(-50%);
    }
}

.subline {
    display: block;
    color: var(--color-content-2);
    font-weight: var(--font-weight-extra-light);
    font-size: var(--font-size-bodycopy);
}

/* -------------------- NAVIGATION -------------------- */
nav {
    --link-text-decoration: none;
    --border-radius: 0.5em;
    --navigation-border: none;
    --navigation-spacing: 0.5em;
    --navigation-display: flex;
    --navigatin-level-1-padding: 0;
    --navigatin-level-1-font-weight: inherit;
    --navigation-level-2-display: none;
    --navigation-level-2-position: absolute;
    --navigation-level-2-padding: var(--navigation-spacing);
}

nav ul,
nav ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: var(--navigation-display);
    align-self: flex-end;
    flex-wrap: wrap;
    counter-reset: number;
    gap: 0 1.75rem;
}

/* stylelint-disable no-descending-specificity */
nav a {
    display: block;
}

nav li {
    position: relative;
    word-break: initial;
    white-space: nowrap;
}

nav > ol > li > a::before {
    counter-increment: number;
    content: counter(number, decimal-leading-zero) "\a0";
}

nav * ul {
    position: var(--navigation-level-2-position);
    display: var(--navigation-level-2-display);
    padding: var(--navigation-level-2-padding);
    background: var(--color-ui-navigation);
    border-radius: var(--border-radius);
}

nav .service {
    flex-wrap: nowrap;
}

nav li:hover ul {
    display: block;
}

nav > li > a {
    font-weight: var(--navigatin-level-1-font-weight);
    margin-top: var(--navigatin-level-1-padding);
}

nav li a {
    padding: var(--navigatin-level-1-padding);
}

nav li li a {
    display: block;
    padding: var(--navigation-spacing) calc(var(--navigation-spacing) * 2);
    border-radius: var(--border-radius);
}

nav .icon {
    display: flex;
    align-items: center;
    justify-content: end;
    height: calc(1em * var(--line-height-base));
}

nav .material-icon {
    font-size: 2em;
}

/* Icon navigation */
nav img {
    height: 2rem;
    width: auto;
}

nav:last-child > ul:last-child > li:last-child {
    text-align: right;
}

nav:last-child > ul:last-child > li:last-child ul {
    right: 0;
}

/* stylelint-enable no-descending-specificity */

nav li li a:hover {
    background: var(--cd-black);
}

/* -------------------- LINKS -------------------- */
.links {
    --icon-size: 0.5em;
    --icon-shift: 0;
    --icon-spacing: 1rem;
    --icon-color: var(--color-content-1);
    --icon-border-size: 2px;
    --icon-line-length: 1em;

    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-bodycopy);
}

.links.secondary {
    --link-text-decoration: none;
    --link-color: var(--color-brand-dark);

    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
}

.links a { /* stylelint-disable-line no-descending-specificity */
    --icon-color: currentColor; /* stylelint-disable-line value-keyword-case */

    display: inline-flex;
    align-items: center;
}

.links a:hover {
    --icon-shift: calc(var(--icon-size) / 2);
    --icon-color: var(--link-color-hover);
}

.links a::before {
    content: "";
    position: relative;
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: var(--icon-spacing);
    left: var(--icon-shift);
    box-shadow: var(--icon-border-size) calc(-1 * var(--icon-border-size)) 0 var(--icon-border-size) var(--icon-color);
    -webkit-box-shadow: var(--icon-border-size) calc(-1 * var(--icon-border-size)) var(--icon-color);
    transform: rotate(45deg);
    transition: var(--transition-default);
    border-radius: var(--icon-border-size);
}

.links a::after {
    content: "";
    order: -1;
    width: var(--icon-line-length);
    border-top: calc(var(--icon-border-size) / 2) solid var(--icon-color);
    margin-right: calc(-1 * (var(--icon-size) + var(--icon-border-size)));
    border-radius: var(--icon-border-size);
}

/* -------------------- TOP-LINK -------------------- */
.top-link-wrapper {
    position: sticky;
    top: 100vh;
    right: 0;
    height: 0;
    transform: translateY(calc(-100% - 2rem));
    z-index: var(--z-index-front);
}

.top-link {
    --link-text-decoration: none;
    --link-color: var(--color-brand-dark);

    position: absolute;
    bottom: 0;
    left: calc(100% + 0.75em);
    width: 15em;
    margin-left: auto;
    color: var(--color-brand-dark);
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    transform: rotate(-90deg);
    transform-origin: 0 bottom 0;
}

/* -------------------- GRID -------------------- */
[class*="grid"] {
    --grid-columns: repeat(2, 1fr);
    --grid-column-end: initial;
    --grid-row-end: initial;
    --grid-item-padding: min(4.25vw, 2.5rem) min(var(--spacing-offset, 4vw), 3rem);
    --grid-gap: 4px;
    --grid-border: 1px solid var(--color-ui-borders);

    display: grid;
    grid-template-columns: var(--grid-columns);
    grid-gap: var(--grid-gap);
    grid-auto-flow: row dense;
}

/* Set all grid items to full-width on mobile */
.grid-facts,
.grid-principles,
.grid-services {
    --grid-column-end: span 2;
}

.grid-services {
    @media screen and (width >= 768px) {
        --grid-columns: repeat(2, 1fr);
        --grid-column-end: initial;
    }

    @media screen and (width >= 1400px) {
        --grid-columns: repeat(3, 1fr);
    }

    @media screen and (width >= 1800px) {
        --grid-columns: repeat(4, 1fr);
    }
}

@media screen and (width >= 768px) {
    .grid-facts,
    .grid-principles {
        --grid-columns: repeat(2, 1fr);
        --grid-column-end: initial;
    }

    .grid-principles {
        --grid-columns: repeat(3, 1fr);
    }

    .grid-facts {
        --grid-columns: repeat(2, 1fr);
    }

    .grid-clients {
        --grid-columns: repeat(4, 1fr);
    }
}

@media screen and (width >= 1024px) {
    .grid-principles,
    .grid-about {
        --grid-columns: repeat(4, 1fr);
        --grid-column-end: initial;
    }
}

@media screen and (width >= 1700px) {
    .grid-principles,
    .grid-facts {
        --grid-columns: repeat(4, 1fr);
    }
}

@media screen and (width <= 1024px) {
    [class*="grid"].mobile-full {
        --spacing-offset: calc(var(--viewport-spacing) + var(--content-padding));

        margin: 0 calc(-1 * var(--spacing-offset));
    }

    .grid-about {
        --grid-item-padding: 2em 0;
    }
}

[class*="grid"] > * {
    background: var(--color-content-darken);
    padding: var(--grid-item-padding);
    justify-items: center;
    grid-column-end: var(--grid-column-end);
    grid-row-end: var(--grid-row-end);
}

[class*="grid"] > * [class*="__copy"] {
    min-width: 10em;
}

[class*="grid"] > .medium {
    --grid-column-end: span 2;
}

[class*="grid"] > .large {
    --grid-column-end: span 2;
    --grid-row-end: span 2;
}

[class*="grid"] > .high {
    --grid-row-end: span 2;
}

[class*="grid"] img {
    width: 100%;
    display: block;
}

[class*="grid"] > img {
    padding: 0;
    object-fit: cover;
}

/* -------------------- LOGO -------------------- */
.header-logo {
    flex: 1;
}

.header-logo img {
    display: flex;
    height: 1.5rem;
}

/* -------------------- NAVIGATION TARGET -------------------- */
.navigation-target {
    scroll-margin-top: 3.5em;
}

/* -------------------- OVERLAY --------- -------------------- */
.overlay-wrapper {
    --overlay-wrapper-overflow: hidden;
    --overlay-content-display: flex;
    --overlay-content-visibility: hidden;
    --overlay-content-opacity: 0;

    overflow: var(--overlay-wrapper-overflow);
    display: flex;
    flex-direction: row-reverse;
}

@media screen and (width >= 768px) {
    .overlay-wrapper {
        --overlay-wrapper-overflow: visible;
        --overlay-content-visibility: visible;
        --overlay-content-opacity: 1;
        --button-display: none;
    }
}

/* Overlay button */
.overlay-button {
    --button-line-color: var(--color-content-1);
    --button-line-width: 1.5rem;
    --button-line-height: 2px;
    --button-line-offset: 0.5rem;
    --button-line-padding-horizontal: 1.5rem;
    --button-line-padding-vertical: 1rem;
    --button-line-border-radius: 2px;

    display: var(--button-display, block);
    position: relative;
    background: var(--color-ui-navigation);
    align-self: baseline;
    margin-top: calc(-1 * var(--button-line-padding-horizontal) - var(--button-line-height));
    margin-right: calc(-1 * var(--button-line-padding-vertical));
    bottom: calc(-1 * var(--button-line-padding-horizontal) + var(--button-line-offset));
    padding: var(--button-line-padding-horizontal) var(--button-line-padding-vertical);
    z-index: var(--z-index-hybrid-button);
    cursor: pointer;
    user-select: none;
}

.overlay-icon,
.overlay-icon::before,
.overlay-icon::after {
    position: relative;
    display: block;
    height: var(--button-line-height);
    width: var(--button-line-width);
    border-radius: var(--button-line-border-radius);
    background-color: var(--button-line-color);
    transition: var(--transition-default);
}

.overlay-icon::before,
.overlay-icon::after {
    --transform-size: calc(var(--button-line-offset) * 0.75);
    --transform: inherit;
    --top: auto;

    content: "";
    position: absolute;
    transform: var(--transform);
    top: var(--top);
}

.overlay-icon::before {
    --top: calc(-1 * var(--button-line-offset));
}

.overlay-icon::after {
    --top: var(--button-line-offset);
}

.overlay-button:hover {
    --button-line-color: var(--link-color-active);
}

.overlay-wrapper[overlay-visible] .overlay-icon {
    background: transparent;
}

.overlay-wrapper[overlay-visible] .overlay-icon::before {
    --transform: rotate(45deg);
    --top: 0;
}

.overlay-wrapper[overlay-visible] .overlay-icon::after {
    --transform: rotate(-45deg);
    --top: 0;
}

/* -------------------- OVERLAY CONTENT -------------------- */
.overlay-content {
    display: var(--overlay-content-display);
    visibility: var(--overlay-content-visibility);
    opacity: var(--overlay-content-opacity);
    height: 0;
    transition: opacity var(--transition-duration) var(--transition-timing-function);
    gap: 1rem 5vw;
}

/* -------------------- OVERLAY NAVIGATION -------------------- */
@media screen and (width <= 768px) {
    .overlay-wrapper[overlay-visible] .overlay-content {
        --overlay-content-display: flex;
        --overlay-content-visibility: visible;
        --overlay-content-opacity: 1;

        position: fixed;
        left: 0;
        top: 0;
        overflow: auto;
        height: 100vh;
        width: 100vw;
        padding: var(--viewport-spacing);
        background: var(--color-ui-navigation);
        z-index: var(--z-index-overlay);

        /* Overwrite initial / default navigation state */
        flex-flow: column;
    }

    .overlay-wrapper[overlay-visible] nav {
        --navigation-display: block;
        --navigatin-level-1-padding: var(--navigation-level-2-padding);
        --navigatin-level-1-font-weight: var(--font-weight-bold);
        --navigation-level-2-display: block;
        --navigation-level-2-position: relative;

        margin: 2em;
    }
}

/* -------------------- MANTRA -------------------- */
.mantra-wrapper {
    align-self: flex-end;
}

@media screen and (width >= 768px) {
    .mantra-wrapper {
        min-width: 30rem;
        margin-left: auto;
        flex-grow: 0;
    }
}

.mantra {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: calc(1.5rem + 1.5 * var(--font-size-factor));
}

.mantra li { /* stylelint-disable-line no-descending-specificity */
    width: auto;
    background: var(--color-brand-gradient);
    float: left;
    clear: both;
    margin-bottom: 2px;
    padding: 0 0.5em;
}

/* -------------------- CAPTION -------------------- */
[class*="caption"] {
    --caption-display: flex;
    --caption-height: 15vw;
    --caption-max-height: calc(10rem + var(--content-padding));
    --caption-color: var(--color-brand-light);
    --caption-border: 1px solid var(--caption-color);
    --caption-max-width: 18em;
    --caption-arrow-size: 1em;
    --caption-arrow-border-size: 1px;
    --caption-arrow-color: var(--caption-color);

    position: relative;
    display: var(--caption-display);
    flex-direction: column;
    align-items: center;
    color: var(--caption-color);
    background: var(--caption-background);
    background-size: 1.3em;
}

.caption p {
    min-width: initial;
    max-width: var(--caption-max-width);
}

.caption::before {
    --border-size: var(--caption-arrow-border-size);
    --color: var(--caption-arrow-color);

    content: "";
    display: block;
    position: absolute;
    bottom: var(--caption-arrow-border-size);
    width: var(--caption-arrow-size);
    height: var(--caption-arrow-size);
    box-shadow: var(--border-size) calc(-1 * var(--border-size)) 0 var(--border-size) var(--color);
    -webkit-box-shadow: var(--border-size) calc(-1 * var(--border-size)) var(--color);
    transform: rotate(135deg);
}

.caption::after {
    content: "";
    display: block;
    height: var(--caption-height);
    max-height: var(--caption-max-height);
    width: auto;
    border-left: var(--caption-border);
    margin: 0 auto;
}

.caption-mantra {
    --caption-max-width: 28em;
    --caption-background: none;
    --caption-display: block;
}

.caption-mantra::before {
    --spacing: calc(2 * var(--section-margin-top) + var(--content-padding) * 2);
    --caption-section-spacing: calc(-1 * (var(--spacing)));

    content: "";
    display: block;
    position: relative;
    height: var(--caption-height);
    max-height: var(--caption-max-height);
    width: 100%;
    border-left: var(--caption-border);
    margin-top: calc(var(--caption-section-spacing) + 1px);
    margin-bottom: 1rem;
    box-shadow: none;
    transform: none;
}

.caption-mantra::after {
    display: none;
}

/* -------------------- ABOUT ---------------------- */
.grid-about {
    --grid-border: 0;

    grid-auto-flow: unset;
}

.grid-about > * {
    background: transparent;
}

.grid-about .type-lead { /* stylelint-disable-line no-descending-specificity */
    margin: 0;
}

@media screen and (width >= 1024px) {
    .position-1 {
        grid-column-start: 3;
    }

    .position-5 {
        grid-column-start: 3;
    }

    .position-6 {
        grid-row-start: 8;
        padding-bottom: 0;
        padding-left: 0;
    }

    .position-6 .heading {
        margin-bottom: 0;
    }
}

@media screen and (width <= 1024px) {
    .grid-about img {
        grid-column-end: span 1;
        grid-row-end: span 1;
    }
}

/* -------------------- CLIENTS -------------------- */
.grid-clients > * {
    --client-max-width: 13em;
    --client-max-height: 3.5em;
    --client-logo-spacing: 4em;
    --client-quote-spacing: 2em;
    --grid-item-padding: min(4.25vw, 5rem) min(var(--spacing-offset, 4vw), 3rem);

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 0;
}

.grid-clients img {
    max-width: var(--client-max-width);
    max-height: var(--client-max-height);
    display: block;
}

/* -------------------- PRINCIPLES -------------------- */
.grid-principles > [class*="principle"] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 2em 1.5em;
}

.principle-1 {
    --principle-color: var(--cd-sea-green-50);
}

.principle-2 {
    --principle-color: var(--cd-blue-50);
}

.principle-3 {
    --principle-color: var(--cd-olive-60);
}

.principle-4 {
    --principle-color: var(--cd-fuchsia-50);
}

.principle-5 {
    --principle-color: var(--cd-violet-50);
}

[class*="principle"] .number {
    color: var(--principle-color);
    font-size: calc(3rem + 1vw);
    font-weight: var(--font-weight-semibold);
    flex: 0;
}

[class*="principle"] .image {
    flex: 1;
    max-width: 15em;
    align-self: center;
}

[class*="principle"] img {
    width: auto;
    max-width: 100%;
    min-width: 5em;
}

[class*="principle"] .copy {
    flex: 1 0 100%;
}

@media screen and (width >= 1024px) {
    [class*="principle"].medium .number {
        min-width: 100%;
    }

    [class*="principle"] > .medium .copy {
        flex: 1;
    }
}

/* -------------------- JOBS -------------------- */
.jobs {
    --spacing-offset: calc(var(--viewport-spacing) + var(--content-padding));
    --spacing-offset-outer: calc(-1 * var(--spacing-offset));

    margin: 3em var(--spacing-offset-outer) 0;
}

@media screen and (width >= 1024px) {
    .jobs {
        --spacing-offset: 0rem; /* stylelint-disable-line length-zero-no-unit */
    }
}

.jobs details {
    position: relative;
    padding: 1rem max(var(--spacing-offset), 2rem);
    background: var(--color-content-darken);
}

.jobs details:not(:last-child) {
    margin-bottom: 2px;
}

.jobs summary {
    position: relative;
    padding: 1rem max(var(--spacing-offset), 2rem);
    margin: -1rem calc(-1 * max(var(--spacing-offset), 2rem));
    list-style: none;
    display: flex;
    flex-flow: row-reverse;
    justify-content: space-between;
    align-items: center;
}

.jobs summary:hover {
    cursor: pointer;
}

.jobs summary h4 {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    vertical-align: middle;
    font-weight: var(--font-weight-base);
}

.job {
    padding: 2.5em 0 1em;
}

.job p {
    font-size: inherit;
}

/* -------------------- JOBS TOGGLE ARROW -------------------- */
details summary::-webkit-details-marker {
    display: none;
}

.jobs summary::before {
    --arrow-color: var(--color-content-1);
    --arrow-size: 1em;
    --arrow-shift: calc(var(--arrow-size) / 2);
    --arrow-bd-size: 2px;

    content: "";
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: var(--arrow-size);
    height: var(--arrow-size);
    right: 0;
    top: calc(var(--arrow-shift) * -1);
    box-shadow: var(--arrow-bd-size) calc(-1 * var(--arrow-bd-size)) 0 var(--arrow-bd-size) var(--arrow-color);
    -webkit-box-shadow: var(--arrow-bd-size) calc(-1 * var(--arrow-bd-size)) var(--arrow-color);
    transform: rotate(135deg);
}

.jobs details[open] summary::before {
    top: var(--arrow-shift);
    transform: rotate(-45deg);
}

/* -------------------- FACTS -------------------- */
.grid-facts {
    --fact-color: var(--cd-green-50);

    word-break: initial;
}

.grid-facts .number {
    color: var(--fact-color);
    font-size: calc(3rem + 1vw);
    font-weight: 200;
    white-space: nowrap;
    margin-top: -0.5rem;
}

/* stylelint-disable no-descending-specificity */
.grid-facts ul,
.grid-facts ol {
    min-width: 20em;
    margin-top: 1em;
}

.grid-facts li {
    margin-top: 0.25em;
}

/* stylelint-enable no-descending-specificity */

/* -------------------- CONTACT -------------------- */
.contact {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--section-gap);
}

.contact > div {
    flex: 1 1 auto;
}

.contact img {
    margin: 0 auto;
    display: block;
    max-width: 50vw;
}

/* -------------------- SOCIAL LINKS -------------------- */
.social-links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 1em;
}

.social-links img {
    width: 2em;
}

/* ============================================================ *
   UTILITIES

   The Utilities layer contains utility and helper classes that
   can override individual styles, for example a hidden class.
 * ============================================================ */
.no-spacing {
    margin-top: 0;
    margin-bottom: 0;
}

.align-center {
    align-self: center;
    margin: 0 auto;
}

.align-bottom {
    margin-top: auto;
}

.align-right {
    margin-left: auto;
}

.collapse {
    padding-bottom: 0;
}

@media screen {
    .print-only {
        display: none;
    }
}

/* -------------------- MATERIAL ICONS  ----------------------- */
@font-face {
    font-family: "Material Icons";
}

[class*="material-"] {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-size: 3em;  /* Preferred icon size */
    font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' -25,
    'opsz' 24;
}