@import url("/css/fonts.css");
@import url("/css/colors.css");
@import url("/css/position.css");
@import url("/css/grid.css");
@import url("/css/case.css");

html {
    font-size: 62.5%; /* =10px */
    font-family: var(--sans);
}

body {
    font-size: var(--base-16);
    line-height: 1.5;
    font-feature-settings: "liga", "clig", "zero", "ss02";
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: var(--gray-200);
    color: var(--text);
}

:root {
    /* scale in 4px steps with html font-size:62.5% => 1rem = 10px */
    --base-4: 0.4rem;   /* 4px */
    --base-6: 0.6rem;   /* 8px */
    --base-8: 0.8rem;   /* 8px */
    --base-10: 1rem;  /* 10px */
    --base-12: 1.2rem;  /* 12px */
    --base-14: 1.4rem;  /* 14px */
    --base-16: 1.6rem;  /* 16px */
    --base-18: 1.8rem;  /* 18px */
    --base-20: 2.0rem;  /* 20px */
    --base-22: 2.2rem;  /* 22px */
    --base-24: 2.4rem;  /* 24px */
    --base-28: 2.8rem;  /* 28px */
    --base-32: 3.2rem;  /* 32px */
    --base-36: 3.6rem;  /* 36px */
    --base-40: 4.0rem;  /* 40px */
    --base-44: 4.4rem;  /* 44px */
    --base-48: 4.8rem;  /* 48px */
    --base-52: 5.2rem;  /* 52px */
    --base-56: 5.6rem;  /* 56px */
    --base-60: 6.0rem;  /* 60px */
    --base-64: 6.4rem;  /* 64px */
    --base-72: 7.2rem;  /* 72px */
    --base-80: 8.0rem;  /* 80px */
    --base-96: 9.6rem;  /* 96px */
    --base-100: 10.0rem;/* 100px */
    --base-120: 12.0rem;/* 120px */
    --base-140: 14.0rem;/* 140px */
    --base-150: 15.0rem;/* 150px */
    --base-156: 15.6rem;/* 156px */
    --base-160: 16.0rem;/* 160px */
    --base-180: 18.0rem;/* 180px */
    --base-200: 20.0rem;/* 200px */
    --base-240: 24.0rem;/* 240px */
    --base-280: 28.0rem;/* 240px */
    --base-300: 30.0rem;/* 300px */
    --base-310: 31.0rem;/* 310px */
    --base-320: 32.0rem;/* 320px */
    --base-360: 36.0rem;/* 360px */
    --base-400: 40.0rem;/* 400px */
    --base-420: 42.0rem;/* 420px */
    --base-450: 45.0rem;/* 450px */
    --base-460: 46.0rem;/* 460px */
    --base-480: 48.0rem;/* 480px */
    --base-500: 50.0rem;/* 500px */
    --base-520: 52.0rem;/* 520px */
    --base-560: 56.0rem;/* 560px */
    --base-600: 60.0rem;/* 600px */
    --base-620: 62.0rem;/* 620px */
    --base-640: 64.0rem;/* 640px */
    --base-720: 72.0rem;/* 720px */
    --base-760: 76.0rem;/* 760px */
    --base-800: 80.0rem;/* 800px */
    --base-820: 82.0rem;/* 820px */
    --base-840: 84.0rem;/* 840px */
    --base-860: 86.0rem;/* 860px */
    --base-920: 92.0rem;/* 920px */
    --base-960: 96.0rem;/* 960px */

    --r-4: var(--base-4);
    --r-8: var(--base-8);
    --r-10: var(--base-10);
    --r-12: var(--base-12);
    --r-16: var(--base-16);
    --r-20: var(--base-20);
    --r-24: var(--base-24);
    --r-32: var(--base-32);
    --r-40: var(--base-40);
    --r-100: var(--base-100);
    --r-100p: 100%;

    --bw-05: 0.03125rem;
    --bw-10: 0.0625rem;
    --bw-20: 0.125rem;

    --container-margin: var(--base-40);
    --grid-gap: var(--base-8);
    --grid-gap-1: 1px;
    --grid-gap-4: var(--base-4);
    --grid-gap-16: var(--base-16);
    --global-radius: var(--r-20);
    --b-br: var(--r-24);
    --negative-b-br: -2.4rem;

    --box-border: var(--bw-05) solid rgba(0,0,0,0.09);
    --box-border-medium: var(--bw-10) solid rgba(0,0,0,0.1);
    --box-border-strong: var(--bw-10) solid rgba(0,0,0,0.25);
    --box-border-strong-white: var(--bw-20) solid rgba(176, 124, 124, 0.24);
    --box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.05);
    --box-shadow-medium: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    --box-shadow-inset: inset 0 2px 0px rgba(255, 255, 255, 0.1);

    --l-s-sm: -0.0067em;

    --scroll-30: var(--base-30);
    --scroll-20: var(--base-20);
    --scroll-10: var(--base-10);
    --scroll--10: (-(var(--base-10)));
    --scroll--20: (-(var(--base-20)));
    --scroll--30: (-(var(--base-30)));

    --text: var(--black);
    --text-light: var(--gray-900);
    --text-inversed: var(--gray-100);

    --spring-easing: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938, 1.077 20.4%, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.006 85.5%, 1.004 91.3%, 1);
    --spring-duration: 1.333s;

    --custom-easing: linear(0, 0.01 3.6%, 0.034, 0.074 9.1%, 0.128 11.4%, 0.194 13.4%, 0.271 15%, 0.544 18.3%, 0.66 20.6%, 0.717 22.4%, 0.765 24.6%, 0.808 27.3%, 0.845 30.4%, 0.883 35.1%, 0.916 40.6%, 0.942 47.2%, 0.963 55%, 0.979 64%, 0.991 74.4%, 0.998 86.4%, 1);
}

.bg-blur-light {
    backdrop-filter: blur(16px);
    background-color: rgba(255, 255, 255, 0.4);
}
.text-white { color: var(--white); }
.text-light { color: var(--text-light); }
.text-inversed { color: var(--text-inversed); }
.text-black { color: var(--black); }
.text-green { color: var(--green-600);}
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-red-600 { color: var(--red-600); }
.text-shadow-xs-on-light {text-shadow: 0px 0.5px black;}
.text-shadow-xs-on-dark {text-shadow: 0px 0.5px white;}
.bg-white { background-color: var(--white); }
.bg-black { background-color: var(--black); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-900 { background-color: var(--gray-900); }
.bg-gray-1000 { background-color: var(--gray-1000); }
.bg-cyan-100 { background-color: var(--cyan-100); }
.bg-cyan-200 { background-color: var(--cyan-200); }
.bg-green-200 { background-color: var(--green-200); }
.bg-yellow-200 { background-color: var(--yellow-200); }
.bg-cool-gray-200 { background-color: var(--cool-gray-200); }
.g-br-100 { border-radius: var(--r-100); }
.g-br { border-radius: var(--global-radius); }
.g-br-b { border-bottom-left-radius: var(--global-radius); border-bottom-right-radius: var(--global-radius); }
.g-br-t { border-top-left-radius: var(--global-radius); border-top-right-radius: var(--global-radius); }

.italic {
    font-family: var(--serif);
    font-style: italic;
}

.serif {
    font-family: var(--serif);
}

.monospace {
    font-family: var(--monospace);
}

header a.logo-link,
footer a.logo-link {
    text-decoration: none !important;
}

header a.logo-link {
    color: var(--black);
}

footer a.logo-link {
    color: var(--gray-100);
}

header a.logo-link:hover,
footer a.logo-link:hover {
    color: var(--red-600);
}

footer nav a,
footer nav a:visited {
    color: var(--gray-100);
    text-decoration: none;
}

footer nav a:hover {
    color: var(--red-700) !important;
    text-decoration-color: var(--red-400);
    text-decoration-thickness: 0.75px;
    text-underline-offset: 25%;
}

p {
    position: relative;
    margin-block-end: var(--base-12);
    margin-block-start: var(--base-16);
}

.t-display-large {
    font-size: var(--base-64);
    line-height: 1.25;
    letter-spacing: var(--l-s-sm);
}

.t-display-quote {
    font-size: var(--base-48);
    line-height: 1.25;
    letter-spacing: var(--l-s-sm);
    margin: 0;
}

.t-display-quote-small {
    font-size: var(--base-32);
    line-height: 1.25;
    letter-spacing: var(--l-s-sm);
    margin: 0;
}

.t-display-quote-xsmall {
    font-size: var(--base-20);
    line-height: 1.25;
    letter-spacing: var(--l-s-sm);
    margin: 0;
}

.t-body-thin {
    font-weight: 300;
}

.t-body {
    font-size: var(--base-14);
}

.t-body-small {
    font-size: var(--base-12);
    letter-spacing: var(--l-s-sm);
}

.t-body-large,
.case p.t-body-large {
    font-size: var(--base-24);
    letter-spacing: var(--l-s-sm);
}

small,
.small-text,
.t-body-xsmall {
    font-size: var(--base-10);
    letter-spacing: var(--l-s-sm);
}

.hpquote {
  margin-left: -1rem;
}

.heading {
    font-family: var(--heading);
}


h1,
h2 {
    font-weight: 204;
}

h3,
h4,
h5,
h6 {
    font-weight: 304;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading);
}

p + p,
p + h1, p + .h1,
p + h2, p + .h2,
p + h3, p + .h3,
p + h4, p + .h4,
p + h5, p + .h5,
p + h6, p + .h6,
h1 + p, .h1 + p,
h2 + p, .h2 + p,
h3 + p, .h3 + p,
h4 + p, .h4 + p,
h5 + p, .h5 + p,
h6 + p, .h6 + p {
    margin-top: 0 !important;
}

h1, .h1 {
    font-size: var(--base-56);
    line-height: 1.2;
    margin: var(--base-32) 0 var(--base-24);
    letter-spacing: -0.024em;
}

h2, .h2 {
    font-size: var(--base-40);
    line-height: 1.2;
    margin: var(--base-40) 0 var(--base-24);
    letter-spacing: -0.018em;
}

h3, .h3, .md-h3, .lg-h3 {
    font-size: var(--base-28);
    line-height: 1.2;
    margin: var(--base-28) 0 var(--base-14);
    letter-spacing: -0.015em;
}

h4, .h4 {
    font-size: var(--base-22);
    line-height: 1.2;
    margin: var(--base-22) 0 var(--base-10);
    letter-spacing: -0.0109em;
}

h5, .h5 {
    font-size: var(--base-18);
    line-height: 1.333;
    margin: var(--base-18) 0 var(--base-8);
    letter-spacing: -0.0067em;
}

h6, .h6 {
    font-size: var(--base-16);
    line-height: 1.2;
    margin: var(--base-16) 0 var(--base-8);
    letter-spacing: -0.0067em;
}

dl {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    margin: 0;
    padding: 0;
}

dl dt {
    font-weight: var(--weight-semibold);
    color: var(--indigo-700);
}

dl dd {
    margin-inline-start: 0;
}

.display-small {
    font-size: var(--base-36);
    line-height: 1.1;
    letter-spacing: -0.018em;
}

.sans {
    font-family: var(--sans);
}

.weight-thin {
    font-weight: var(--weight-thin);
}

.weight-thinner {
    font-weight: var(--weight-thinner);
}

.weight-regular {
    font-weight: var(--weight-regular);
}

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

.weight-semibold {
    font-weight: var(--weight-semibold);
}

.text-caption {
    margin-bottom: var(--base-8);
    margin-top: 0;
    font-family: var(--monospace);
    text-transform: uppercase;
    font-size: var(--base-10);
    line-height: 1.6;
    color: var(--cool-gray-700);
    letter-spacing: 0.0082em;
}

a.on-dark,
a.on-dark:visited,
.case-top.case-preview-card-dark .breadcrumbs a,
.case-top.case-preview-card-dark .breadcrumbs a:visited {
    color: var(--indigo-500);
    text-decoration-color: var(--indigo-400);
}

a.on-dark:hover,
.case-top.case-preview-card-dark .breadcrumbs a:hover {
    color: var(--red-600) !important;
    text-decoration-color: var(--red-500);
}

a,
a:visited {
    color: var(--indigo-700);
    text-decoration-color: var(--indigo-400);
    text-decoration-thickness: 0.75px;
    text-decoration-line: underline;
    text-underline-offset: 25%;
}

a.text, a.text:visited {
    color: var(--text);
    text-decoration: none;
}

a:hover, a.text:hover {
    color: var(--red-700);
    text-decoration-color: var(--red-400) !important;
}

a.no-decoration {
    text-decoration: none !important;
}

.top-section {
    padding: var(--base-40) var(--container-margin);
    background-position: center;
    background-size: cover;
}

hr {
    font-size: 0;
    border: 0;
}

.line-sm {
    margin: var(--base-40) 0;
}

.line-lg {
    margin: var(--base-120) 0 var(--base-64);
}


.line-light {
    color: var(--gray-400);
    background: var(--gray-400);
    height: 0.5px;
}

.line-bold {
    color: var(--gray-1000);
    background: var(--gray-1000);
    height: 4px;
}

.container {
    max-width: 1564px;
    box-sizing: border-box;
    margin: 0 auto;
}

.container-wide {
    box-sizing: border-box;
    /* max-width: 1564px; */
    margin: 0 auto;
    padding: var(--container-margin) calc(2 * var(--container-margin));
}

.case-in-press {
    margin: var(--container-margin) calc(2 * var(--container-margin));
}

figure {
    padding: 0;
    margin: 0;
}

figcaption {
    font-style: italic;
    font-family: var(--serif);
    text-align: center;
    font-size: var(--base-14);
    line-height: 1.5;
    margin: var(--base-16) 0 0 0;
}

.logo-title {
    margin: 0 !important;
    font-weight: var(--weight-semibold);
    font-family: var(--heading);
}

.contacts-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 60px;
    gap: calc(var(--grid-gap-4) * 4);
    background-color: var(--gray-200);
}

.cases-period-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 calc(2 * var(--container-margin));
}

.segmented-controls {
    align-items: center;
    justify-content: center;
}

.segmented-controls button {
    min-width: var(--base-120);
    justify-content: center;
    background-color: transparent;
}

.segmented-controls button:hover {
    background-color: var(--gray-200);
}

.segmented-controls button:focus {
    outline: none;
}

.segmented-controls button:focus-visible {
    outline: 2px solid var(--indigo-700);
    outline-offset: 2px;
}

.segmented-controls button[aria-pressed="true"],
.segmented-controls button.active {
    background: var(--black);
    color: var(--white);
    font-weight: 500;
}

.scroll-mimic-left {
	animation: scroll-mimic-left 10s cubic-bezier(.7,.2,.3,1) infinite alternate;
}

.scroll-mimic-down {
	animation: scroll-mimic-down 10s cubic-bezier(.7,.2,.3,1) infinite alternate;
}

.scroll-mimic-down-slow {
	animation: scroll-mimic-down-slow 20s cubic-bezier(.7,.2,.3,1) infinite alternate;
}

.scroll-mimic-up {
	animation: scroll-mimic-up 15s cubic-bezier(.7,.2,.3,1) infinite alternate;
}

.scroll-mimic-up--10 {
	animation: scroll-mimic-up--10 10s cubic-bezier(.7,.2,.3,1) infinite alternate;
}

.scroll-mimic-up--20 {
	animation: scroll-mimic-up--20 10s cubic-bezier(.7,.2,.3,1) infinite alternate;
}

.zoom-in-out {
    animation: zoom-in-out 8s cubic-bezier(.7,.2,.3,1) infinite alternate;
}

.delay-1s {
    animation-delay: 1s;
}
.delay-2s {
    animation-delay: 2s;
}
.delay-3s {
    animation-delay: 3s;
}
.delay-4s {
    animation-delay: 4s;
}
.delay-5s {
    animation-delay: 5s;
}
.delay-6s {
    animation-delay: 6s;
}

@keyframes scroll-mimic-left {
	0% { transform: translateX(0); }
	50% { transform: translateX(var(--base-30)); }
	100% { transform: translateX(0); }
}
@keyframes scroll-mimic-down {
	0% { transform: translateY(0); }
	50% { transform: translateY(var(--base-300)); }
	100% { transform: translateY(0); }
}

@keyframes scroll-mimic-down-slow {
	0% { transform: translateY(0); }
	50% { transform: translateY(var(--base-200)); }
	100% { transform: translateY(0); }
}

@keyframes scroll-mimic-up {
	0% { transform: translateY(0); }
	50% { transform: translateY(-40.0rem); }
	100% { transform: translateY(0); }
}

@keyframes scroll-mimic-up--10 {
	10% { transform: translateY(0); }
	50% { transform: translateY(-10rem); }
	90% { transform: translateY(0); }
}

@keyframes scroll-mimic-up--20 {
	10% { transform: translateY(0); }
	50% { transform: translateY(-20rem); }
	90% { transform: translateY(0); }
}

@keyframes auto-scroll-down {
	0% { transform: translateY(0); }
	100% { transform: translateY(var(--scroll-distance)); }
}

@keyframes auto-scroll-up {
	0% { transform: translateY(0); }
	100% { transform: translateY(var(--scroll-distance)); }
}

@keyframes zoom-in-out {
    0% { transform: scale(1); }
    50% { transform: scale(4); }
    100% { transform: scale(1); }
}

.grid-index-avatar {
    margin: 0 auto;
    align-self: center;
}
.grid-index-action { align-self: end; }

img {
    display: block;
}

.case img {
	display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

.elevation-00 {
  border: var(--box-border-medium);
}

.elevation-01 {
    border: var(--box-border);
    box-shadow: var(--box-shadow);
}


ul {
    padding: 0;
    margin: 0;
}

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

.list-style-inline-dotted {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.list-style-inline-dotted li:first-child {
    list-style-type: none;
}

.content-comfortable {
    max-width: var(--base-720);
}

.intro .grid-index-avatar img {
    transition: transform var(--custom-easing) 1s;
}

.intro:hover .grid-index-avatar img {
    transform: scale(1.05);
}

.avatar {
    border-radius: 100%;
    min-width: var(--base-80);
    min-height: var(--base-80);
    width: var(--base-80);
    height: var(--base-80);
    background: url('/pictures/avatar.jpeg') no-repeat center;
    background-size: cover;
    box-shadow: var(--box-shadow-inset);
}

.scroll-allow-x {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.5) transparent;
    border-radius: var(--global-radius);
}
.scroll-allow-y {
    overflow-y: visible;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.5) transparent;
    border-radius: var(--global-radius);
}

.button {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.42s var(--custom-easing), color 0.42s var(--custom-easing);
}

.button-connect-floating {
  position: fixed;
  bottom: var(--container-margin);
  right: var(--container-margin);
  z-index: 1000;
}

.connect-large {
  display: flex;
  flex-direction: row;
}

.button-medium {
  height: 40px;
  gap: var(--base-12);
  text-decoration: none !important;
  padding: 0 var(--base-16);
  border-radius: var(--base-12);
}

a.button-on-dark,
a.button-on-dark:visited {
  color: var(--white);
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

a.button-on-dark:hover,
a.button-on-dark:focus-visible {
    background-color: var(--red-600);
    color: var(--gray-100) !important;
    text-decoration-color: rgba(255, 255, 255, 0.75) !important;
}

a.button-linkedin {
    background-color: var(--indigo-700);
}

a.button-primary,
a.button-primary:visited {
    background-color: var(--black);
    color: var(--white);
    text-decoration: none !important;
}

a.button-primary:hover {
    background-color: var(--red-600);
}

a.home-link,
a.home-link:visited {
    text-decoration: none;
    color: var(--yellow-200);
    width: 40px;
    height: 40px;
    background-color: var(--green-600);
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
    font-weight: 700;
    padding: var(--base-4) var(--base-8);
    font-size: var(--base-12);
    outline: 1px solid var(--green-600);
    border: 2px solid var(--yellow-200);
}

a.home-link:hover {
    background-color: var(--red-600);
    color: var(--yellow-200) !important;
    outline: 1px solid var(--red-600);
}

main {
    padding-bottom: var(--base-20);
}

*::selection {
  background: var(--gray-900);
  color: #ffffff;
}

mark {
  background-color: var(--yellow-300);
}

.case-logo {
    display: block;
}

.case-logo-square {
    width: var(--base-60);
    height: var(--base-60);
    object-fit: contain;
}

.case-logo-landscape {
    width: var(--base-120);
    height: var(--base-60);
    object-fit: contain;
}

@media screen and (max-width: 639px) {
    :root {
        --container-margin: var(--base-16);
        --grid-gap: var(--base-4);
        --global-radius: var(--r-4);
    }

    h1, .h1, .t-display-large {
        font-size: var(--base-40);
        line-height: 1.1;
        margin: var(--base-32) 0 var(--base-24);
        letter-spacing: -0.024em;
    }

    h2, .h2 {
        font-size: var(--base-32);
        line-height: 1.2;
        margin: var(--base-28) 0 var(--base-20);
        letter-spacing: -0.018em;
    }

    h3, .h3, .sm-h3 {
        font-size: var(--base-24);
        line-height: 1.2;
        margin: var(--base-16) 0 var(--base-12);
        letter-spacing: -0.015em;
    }

    h4, .h4 {
        font-size: var(--base-20);
        line-height: 1.4;
        margin: var(--base-16) 0 var(--base-8);
        letter-spacing: -0.0109em;
    }

    h5, .h5 {
        font-size: var(--base-16);
        line-height: 1.5;
        margin: var(--base-12) 0 var(--base-8);
        letter-spacing: -0.0067em;
    }

    h6, .h6 {
        font-size: var(--base-14);
        line-height: 1.4;
        margin: var(--base-8) 0 var(--base-4);
        letter-spacing: -0.0067em;
    }

    .t-display-quote {
        font-size: var(--base-32);
        line-height: 1.25;
        letter-spacing: var(--l-s-sm);
        margin: 0;
    }

    .case p {
        font-size: var(--base-16);
    }

    .padded {
        padding: var(--container-margin);
    }

    .padded-v-2x {
        padding: calc(var(--container-margin) * 2) var(--container-margin);
    }

    .container-wide {
        padding: var(--base-16);
    }

    .case-in-press {
        margin: var(--container-margin);
    }

    .cases-period-wrapper {
        margin: 0 var(--container-margin) var(--base-16);
    }

    .display-small {
        font-size: 2.8rem;
        line-height: 3.6rem;
        margin: 2rem 0 1.2rem;
        letter-spacing: -0.015em;
    }

    .segmented-controls {
        gap: var(--base-12);
        width: 100%;
    }

    .segmented-controls button {
        min-width: unset;
        width: 100%;
    }
    

    .sm-elevation-none {
        border: unset;
        box-shadow: unset;
    }

    .sm-border-transparent {
        border-color: transparent !important;
    }

    .sm-bg-white {
        background-color: var(--white) !important;
    }

    .sm-bg-transparent {
        background-color: transparent !important;
    }

    main {
        border-bottom-left-radius: var(--global-radius);
        border-bottom-right-radius: var(--global-radius);
        padding-bottom: 1px;
    }

    .sm-g-br { border-radius: var(--global-radius); }

    .sm-logo-title {
        font-size: var(--base-24);
        line-height: var(--base-40);
    }

    .sm-logo {
        height: var(--base-36);
        width: var(--base-36);
    }

    .sm-t-body-medium {
        font-size: var(--base-14) !important;
    }
}

@media screen and (max-width: 420px) {
    .sm-logo {
        height: var(--base-24);
        width: var(--base-24);
    }
    .sm-logo-title {
        font-size: var(--base-16);
        line-height: var(--base-40);
    }
}


@media screen and (min-width: 640px) {
    :root {
        --container-margin: var(--base-24);
        --grid-gap: var(--base-4);
        --global-radius: var(--r-4);
    }

    .padded {
        padding: var(--container-margin);
    }

    .padded-v-2x {
        padding: calc(var(--container-margin) * 2) var(--container-margin);
    }

    .container-wide {
        padding: var(--container-margin);
    }

    .case-in-press {
        margin: var(--container-margin);
    }

    .cases-period-wrapper {
        margin: 0 var(--container-margin);
    }

    .display-small {
        font-size: 3.5rem;
        line-height: 4rem;
        margin: 3rem 0 2.4rem;
        letter-spacing: -0.018em;
    }

    .md-elevation-none {
        border: unset;
        box-shadow: unset;
    }
    
    .md-bg-white {
        background-color: var(--white) !important;
    }

    .md-g-br { border-radius: var(--global-radius); }

    .md-logo-title {
        font-size: var(--base-24);
        line-height: var(--base-36);
    }

    .md-logo {
        height: var(--base-36);
        width: var(--base-36);
    }
}

@media screen and (min-width: 960px) {
    :root {
        --container-margin: var(--base-40);
        --grid-gap: var(--base-20);
        --global-radius: var(--r-16);
    }

    .lg-image-4-3 { aspect-ratio: 4 / 3; }
    .lg-image-3-4 { aspect-ratio: 3 / 4; }
    .lg-image-3-5 { aspect-ratio: 3 / 5; }
    .lg-image-4-8 { aspect-ratio: 4 / 8; }
    .lg-image-5-3 { aspect-ratio: 5 / 3; }
    .lg-image-8-4 { aspect-ratio: 8 / 4; }


    .lg-logo-title {
        font-size: var(--base-28);
        line-height: var(--base-40);
    }

    .lg-logo {
        height: var(--base-40);
        width: var(--base-40);
    }
}

/* Logo Grid */
.logo-grid {
    list-style: none;
    padding: 0;
    margin: 0;
}

.case-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--base-40);
    border-right: 1px solid var(--gray-300);
    border-bottom: 1px solid var(--gray-300);
}

/* Desktop: 3 columns, 4 rows (12 items total) */
/* Remove right border from items in the last column (3n) */
.case-logo:nth-child(3n) {
    border-right: none;
}

/* Remove bottom border from items in the last row (items 10, 11, 12) */
.case-logo:nth-child(n + 10) {
    border-bottom: none;
}

@media (max-width: 639px) {
    .case-logo:nth-child(3n) {
        border-right: 1px solid var(--gray-300);
    }
    
    /* Remove right border from items in the last column (2n) */
    .case-logo:nth-child(2n) {
        border-right: none;
    }
    
    /* Reset desktop bottom border rule */
    .case-logo:nth-child(n + 10) {
        border-bottom: 1px solid var(--gray-300);
    }
    
    /* Remove bottom border from items in the last row (items 11, 12) */
    .case-logo:nth-child(n + 11) {
        border-bottom: none;
    }
}