/* CSS custom properties */

:root {

/* Typography */
--font-family-default: "obviously-variable", sans-serif;

--font-size-2xs: 11px;
--font-size-xs: clamp(0.7813rem, 0.7511rem + 0.151vi, 0.8681rem);
--font-size-s: clamp(0.9375rem, 0.9013rem + 0.1812vi, 1.0417rem);
--font-size-r: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
--font-size-m: clamp(1.35rem, 1.2978rem + 0.2609vi, 1.5rem);
--font-size-l: clamp(1.62rem, 1.5574rem + 0.313vi, 1.8rem);
--font-size-xl: clamp(1.944rem, 1.8689rem + 0.3757vi, 2.16rem);
--font-size-2xl: clamp(2.3328rem, 2.2426rem + 0.4508vi, 2.592rem);
--font-size-3xl: clamp(2.3328rem, 2.2426rem + 0.4508vi, 2.592rem);

--font-weight-l: 200;
--font-weight-r: 400;
--font-weight-m: 500;
--font-weight-bd: 900;
--lineheight-r: 1.6;
--lineheight-s: 1.2;

/* UI colours */
--color-accent: #439dd6;
--color-background-default: #212E45;
--color-base: #364461;
--color-border: #425b8a;
--color-light: #d3d5da;
--color-mid: #7a828f;
--color-text-default: #d3d5da;
--color-text-alt: #fff;
--color-text-link: var(--color-accent);
--color-button: var(--color-base);

/* Borders */
--border-width-r: 1px;
--border-width-l: 5px;
--border-width-xl: 10px;
--border-width-2xl: 2.5vw;
--border-width-3xl: 5vw;
--border-radius-r: 10px;
--border-radius-l: 20px;
--border-radius-xl: 60px;

/* Layout */
--grid-12-col: repeat(12, 1fr);
--grid-compound: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr;
--grid-column-gap: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
--grid-row-gap: clamp(1.00rem, calc(0.89rem + 0.54vw), 1.31rem);
--max-width: 105rem;

/* Spacing */
--spacing-s: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
--spacing-r: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
--spacing-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
--spacing-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
--spacing-xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);

/* Sizing */
--svg-width: clamp(1.50rem, calc(1.34rem + 0.80vw), 2.06rem);

/* Duration */
--animate-duration: 1s;
--animate-duration-fast: .5s;
--animate-duration-faster: .25s;
--animate-delay: 1s;
--animate-function: ease-in;
--animate-repeat: 1;

/* Scale */
--scale-up: 1.1;
--scale-down: .98;

/* Filters */
--brightness-up: 1.15;
--brightness-down: .85;
--saturate-up: 1.25;
--saturate-down: .85;
}

/* P3 colour space */

@media (color-gamut: p3) {
@supports (color: color(display-p3 0 0 0 / 1)) {
:root {
--color-accent: color(display-p3 0.262745 0.615686 0.839216 / 1.000000);
--color-background-default: color(display-p3 0.129412 0.180392 0.270588 / 1.000000);
--color-base: color(display-p3 0.211765 0.266667 0.380392 / 1.000000);
--color-border: color(display-p3 0.28 0.35 0.53);
--color-light: color(display-p3 0.827451 0.835294 0.854902 / 1.000000);
--color-mid: color(display-p3 0.478431 0.509804 0.560784 / 1.000000);
--color-text-default: color(display-p3 0.827451 0.835294 0.854902 / 1.000000);
--color-text-alt: color(display-p3 1.000000 1.000000 1.000000 / 1.000000);
--color-text-link: color(display-p3 0.262745 0.615686 0.839216 / 1.000000);
--color-button: color(display-p3 0.211765 0.266667 0.380392 / 1.000000); }
}
}

/* UTILITIES    ---------------------------------------- */

@-ms-viewport {
width: device-width; }

@-o-viewport {
width: device-width; }

@viewport {
width: device-width; }

::-moz-selection {
background-color: var(--color-base);
text-shadow: none; }

::selection {
background-color: var(--color-base);
text-shadow: none; }

::-webkit-scrollbar {
height: 3px;
width: 3px; }

::-webkit-scrollbar-thumb {
width: 3px;
background-color: rgba(255,255,255,.25);
border-radius: 3px; }

::-webkit-scrollbar-track {
background-color: rgba(255,255,255,.25);
border-radius: 0; }

[id] {
scroll-margin-top: var(--spacing-l); }

[data-visibility="hidden"],
.visually-hidden {
position: absolute;
margin: -1px;
padding: 0;
height: 1px;
width: 1px;
overflow: hidden;
border: 0;
-webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
white-space: nowrap; }

[data-visibility="large"] {
display: none; }

@media screen and (min-width: 64em) {
[data-visibility="large"] {
display: block; }
}

[data-align="center"] {
text-align: center;
text-wrap: balance; }

[data-align="right"] {
text-align: right; }

time {
display: block;
margin-block-end: 0;
font-family: var(--font-family-default);
font-size: var(--font-size-xs);
font-variation-settings: "ital" 0, "wdth" 75, "wght" 500;
text-transform: uppercase; }

code {
padding: 0;
background-color: var(--color-base);
font-size: var(--font-size-xs);
line-height: 1.8;
vertical-align: middle; }

p code {
font-size: var(--font-size-xs);
line-height: inherit; }

pre {
margin: var(--spacing-m) 0;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word; }

sup {
font-size: 10px; }

.alt-lede {
font-size: var(--font-size-l);
font-family: var(--font-family-default);
font-variation-settings: "ital" 0, "wdth" 100, "wght" 500;
line-height: var(--lineheight-s); }

.alt-figures h2 {
margin-block: 0;
font-size: var(--font-size-2xl); }

.alt-figures h2 span {
margin-block: 0;
font-size: var(--font-size-m); }

.alt-figures p {
font-family: var(--font-family-default);
font-variation-settings: "ital"0, "wdth"100, "wght"500; }

/* HTML/BODY   ---------------------------------------- */

html {
background-color: var(--color-background-default);
-moz-text-size-adjust: none;
-webkit-text-size-adjust: 100%;
text-size-adjust: none;
overflow-x: hidden;
scroll-behavior: smooth; }

@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important; }
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}

body {
margin: 0 auto;
padding: 0;
max-inline-size: var(--max-width);
background-color: var(--color-background-default);
color: var(--color-text-default);
font-family: var(--font-family-default);
font-optical-sizing: auto;
font-size: .9em;
font-feature-settings: liga 1;
font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;
font-variation-settings: "ital" 0, "wdth" 100, "wght" 400;
font-kerning: normal;
font-weight: var(--font-weight-l);
line-height: var(--lineheight-r);
-webkit-font-smoothing: auto;
cursor: url("/img/cursor-pointer.svg"),auto; }

/* ANCHORS   ---------------------------------------- */

a,
a:visited {
color: var(--color-text-link);
text-decoration: none;
text-decoration-color: var(--color-text-link-hover);
text-decoration-thickness: .5px;
text-underline-offset: .15em;
transform: translateY(0);
filter: saturate(1);
transition: all var(--animate-duration-faster) var(--animate-function);
cursor: url("/img/cursor-hand.svg"),auto; }

a:hover {
color: var(--color-text-link);
filter: saturate(var(--saturate-up)); }

a:active,
a:focus-visible {
color: var(--color-text-link);
outline: none; }

.link-arrow {
display: inline-block;
padding-inline-start: 20px;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSAxMiI+PHBhdGggZmlsbD0iIzAwOUZEQiIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMjEuNzU3IDBhLjk5OS45OTkgMCAwIDEgLjUyMi4xNjVjLjM3Mi4yNDYuNzI5LjUxNCAxLjA2OS44MDNsMy4yOTcgMi43NmMuNDExLjMwOS43NzkuNjc0IDEuMDkxIDEuMDg2LjIwNC4zMTMuMjk0LjY4OC4yNTUgMS4wNjFhMi4yMTIgMi4yMTIgMCAwIDEtLjM5NC44OTcgOC43OSA4Ljc5IDAgMCAxLTEuMDY5IDEuMThjLS41NDQuNTE0LTEuMTE3Ljk5NC0xLjcxNyAxLjQ0LS41OTkuNDM4LTEuMjI3LjgzMi0xLjg4MSAxLjE3OS0yLjMxOSAxLjI5NC0yLjI4IDEuNjEzLTIuNTcyIDEuMzM3bC0uMDY0LS4wNjNhLjUwMS41MDEgMCAwIDEtLjA4MS0uNjcyYy4xMzUtLjE4MS4zLS4zMzcuNDg4LS40NmwxLjYzNy0xLjE4Yy41NjktLjM4NyAxLjExMi0uODEzIDEuNjI1LTEuMjc0YTE2LjAwNSAxNi4wMDUgMCAwIDAgMS40ODYtMS40NjNjLjE3NC0uMTc3LjQ0MS0uNDI1LjY3My0uNjk2YTEuNTggMS41OCAwIDAgMCAuMzE0LS40NzJjLjEwNC0uMDEyLS4wMTItLjA3MS0uMjEtLjI4My0uMTk3LS4yMTMtLjQxNy0uMzktLjU1Ny0uNTMxbC0yLjk3Mi0zLjA5MUMyMS40NjUuNTAzIDIxLjM3LjcgMjEuMzYzLjQ2OVYuNDAxYzAtLjEwNi4wNC0uMjA4LjExNS0uMjgzQS4zOTEuMzkxIDAgMCAxIDIxLjc1NyAwWm0tNi4yMTEgNS4zNDVjMy40ODMuMDcgNi40Mi4yNDcgOC4xMjcuMzY1LjEwNiAwIC4yMDguMDQ0LjI4My4xMjJhLjQwNS40MDUgMCAwIDEgLjExMS4yOTEuMzk0LjM5NCAwIDAgMS0uMDg5LjMxNS4zOC4zOCAwIDAgMS0uMjk0LjEzNGMtMS43NzYuMDM1LTQuNjQ0LjIxMi04LjEyNy4zMThIOC41OTJjLTIuODEtLjAzNS01LjU5Ni0uMTY1LTguMTI3LS4xNjVhLjQzNy40MzcgMCAwIDEtLjMyOC0uMTIzQS40NTMuNDUzIDAgMCAxIDAgNi4yNzZhLjQ1Ny40NTcgMCAwIDEgLjQ1My0uNDcxYzIuNTc4LS4xMyA1LjM2NC0uMjgzIDguMTI3LS4zNzggMS4xNjEtLjA4MiAyLjMyMi0uMDgyIDMuNDgzLS4wODJaIi8+PC9zdmc+");
background-position: 0 50%;
background-repeat: no-repeat;
background-size: 15px 5px; }

/* HEADLINES   ---------------------------------------- */

h1, h2, h3, h4 {
font-family: var(--font-family-default);
font-style: normal;
font-variant-numeric: lining-nums;
font-weight: normal;
line-height: var(--lineheight-s);
text-wrap: balance; }

h1 {
font-size: var(--font-size-3xl);
font-variant-ligatures: discretionary-ligatures;
font-variation-settings: "ital"0, "wdth"90, "wght"500; }

h2 {
font-size: var(--font-size-xl);
font-variation-settings: "ital"0, "wdth"90, "wght"500; }

h3 {
font-size: var(--font-size-l);
font-variation-settings: "ital" 0, "wdth" 100, "wght" 500; }

.alt-featured {
display: flex;
align-items: center;
gap: var(--grid-column-gap);
padding-inline: var(--spacing-m); }

.alt-featured:before,
.alt-featured:after {
content: "";
display: block;
flex: 1;
height: 1px;
border-block-end: var(--border-width-r) solid var(--color-border); }

.content .alt-featured {
padding-inline: 0; }

/* PARAGRAPHS   ---------------------------------------- */

p {
font-family: var(--font-family-light);
orphans: 3; }

.alt-dropcap::first-letter {
float: left;
margin-block-start: 5px;
margin-inline-end: 0;
padding-block: 0 10px;
padding-inline: 10px;
font-family: var(--font-family-default);
font-size: 75px;
font-variation-settings: "ital" 0, "wdth" 75, "wght" 600;
line-height: 75px;
text-align: center;
color: var(--color-accent);
box-sizing: border-box; }

.alt-firstline::first-line {
font-family: var(--font-family-default);
font-variation-settings: "ital" 0, "wdth" 100, "wght" 500; }

.alt-uppercase {
font-family: var(--font-family-default);
font-style: normal;
font-variation-settings: "ital" 0, "wdth" 75, "wght" 500 !important;
text-transform: uppercase;
--opentype-case: "case" on; }

.alt-lede {
font-family: var(--font-family-default);
font-size: var(--font-size-xl);
font-variation-settings: "ital" 0, "wdth" 100, "wght" 500 !important; }

p:has(.alt-sign) {
display: flex;
justify-content: center;
align-items: center;
gap: 10px; }

p:has(.alt-sign) > * {
display: inline-block; }

/* DETAILS */

details {
margin-top: var(--spacing-m); }

details > summary {
margin: 0 0 var(--spacing-r);
font-family: var(--font-family-default);
font-style: normal;
font-variation-settings: "ital" 0, "wdth" 75, "wght" 500;
text-transform: uppercase;
border: none;
cursor: pointer; }

details > summary:focus {
outline: none; }

/* QUOTES   ---------------------------------------- */

blockquote {
position: relative;
margin: 0;
margin-block: 0;
margin-inline: 0;
padding: 0; }

blockquote p {
margin-block: 0 var(--spacing-xs);
padding: 0;
font-family: var(--font-family-default);
font-variation-settings: "ital" 0, "wdth" 100, "wght" 500; }

blockquote cite {
display: flex;
align-items: start;
gap: var(--spacing-s);
margin-block-start: var(--spacing-r);
font-family: var(--font-family-default);
font-style: normal;
font-variation-settings: "ital" 0, "wdth" 75, "wght" 500;
text-transform: uppercase; }

blockquote svg {
margin: 0; }

.alt-medium {
margin-block: var(--spacing-m); }

.alt-medium p {
font-size: var(--font-size-l);
font-variation-settings: "ital"0, "wdth"90, "wght"500;
line-height: var(--lineheight-s); }

.alt-large {
margin-block: var(--spacing-l); }

.alt-large p {
font-size: var(--font-size-xl);
font-variation-settings: "ital"0, "wdth"90, "wght"500;
line-height: var(--lineheight-s); }

@media screen and (min-width: 64em) {

.alt-medium p {
font-size: var(--font-size-l); }

.alt-large p {
font-size: var(--font-size-2xl); }
}

/* alt-inline */

.quote-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-inline: auto;
overflow: hidden; }

.quote-container blockquote {
position: absolute;
opacity: 0;
transition: opacity 1s; }

.quote-container blockquote.active {
position: relative;
opacity: 1; }

.quote-container button.arrow {
display: none; }

@media screen and (min-width: 48em) {

.quote-container blockquote {
padding-inline: 75px; }

.quote-container button.arrow {
display: block;
position: absolute;
top: 100px;
z-index: 100;
user-select: none;
padding-block: 15px 10px;
padding-inline: var(--spacing-s);
transform: translateY(-50%);
border: none;
outline: none;
cursor: pointer; }

.quote-container button.left-arrow {
left: 10px; }

.quote-container button.right-arrow {
right: 10px; }


}

/* LISTS   ---------------------------------------- */

ul {
list-style-type: none;
margin-block: var(--spacing-r);
margin-inline: 0;
padding-inline-start: 0; }

ul li:before {
content: "• ";
color: var(--color-text-default); }

ol {
margin-block: var(--spacing-r);
margin-inline: 0;
padding-inline-start: 0; }

ol li {
margin-block-end: var(--spacing-s); }

/* ALT LISTS */

ul[class*="alt-"] li:before,
ol[class*="alt-"] li:before {
content: "";
display: none; }

/* alt-fade */

.alt-fade > * {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.alt-fade .fade-in {
opacity: 1; }

/* alt-inline */

.alt-inline li {
display: inline-block; }

.alt-inline li:not(:last-child) {
margin-inline-end: var(--spacing-r); }

/* alt-nav */

.alt-nav {
display: flex;
justify-content: center;
gap: var(--grid-column-gap);
margin-block: 0;
margin-inline: auto; }

.alt-nav li {
display: block;
font-family: var(--font-family-default);
font-size: var(--font-size-s);
font-style: normal;
font-variation-settings: "ital" 0, "wdth" 80, "wght" 400;
text-align: center;
text-transform: uppercase;  }

/* alt-newsletter */

.alt-newsletter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-s) 0;
margin-block: var(--spacing-l); }

.alt-newsletter li {
display: block; }

.alt-newsletter span {
display: inline-block;
padding-block: 15px 10px;
padding-inline: 15px;
background-color: var(--color-base);
border-radius: var(--border-radius-r);
font-family: var(--font-family-default);
font-size: var(--font-size-s);
font-style: normal;
font-variation-settings: "ital" 0, "wdth" 80, "wght" 500;
text-align: center;
text-transform: uppercase; }

.alt-newsletter a,
.alt-newsletter a:hover {
color: var(--color-text-default); }

/* alt-social */

.alt-social {
margin-block: 0;
text-align: center; }

.alt-social li {
display: inline-block;
margin-inline-end: 5px; }

.alt-social li:last-of-type {
margin-inline-end: 0; }

.alt-social a {
display: block;
transform: scale(1); }

.alt-social a:hover {
transform: scale(var(--scale-up)); }

.alt-social a:active,
.alt-social a:focus {
transform: scale(var(--scale-down)); }

.alt-social svg {
block-size: 32px;
inline-size: 32px; }

.alt-social svg path {
fill: var(--color-base); }

@media screen and (min-width: 64em) {

.alt-social {
text-align: left; }
}

/* alt-topics */

.alt-topics {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(16rem,1fr));
grid-column-gap: var(--grid-column-gap);
margin-inline: 0; }

.alt-topics li {
display: flex;
align-items: flex-start;
margin-block-end: 5px;
padding-block-start: 5px;
border-block-start: var(--border-width-r) solid var(--color-border);
font-size: var(--font-size-xs); }

.alt-topics li a {
display: block;
flex: 1 }

.alt-topics li span {
display: block;
width: 1em;
text-align: right; }

.alt-topics li .tertiary {
width: 7em; }

/* alt-timeline */

.alt-timeline {
list-style-type: none;
display: flex;
height: 13rem;
margin: var(--spacing-m) 0;
padding: 0;
overflow-x: auto;
overflow-y: hidden;
padding-block-end: 8px;
scroll-snap-type: x mandatory; }

.alt-timeline__item {
margin-inline-end: var(--spacing-l);
margin-inline-start: 0;
flex: 1 0 16rem;
scroll-snap-align: start; }

.alt-timeline__item p {
margin-block: 0;
font-size: var(--font-size-xs);
line-height: var(--lineheight-r); }

.alt-timeline__item ul {
margin: 0;
padding: 0; }

.alt-timeline__item li {
margin: 0;
padding: 0; }

.alt-timeline__item li::before {
content: "";
display: none; }

.alt-timeline__item img {
margin: var(--spacing-s) var(--spacing-s) 0 0;
inline-size: 18px; }

.alt-timeline__item svg {
float: left;
margin-inline-end: 15px;
inline-size: 18px;
transform: translateY(4px); }

.alt-timeline__item svg path {
stroke: var(--color-text-default); }

.alt-timeline__item a,
.alt-timeline__item a:visited {
text-decoration: none; }

.alt-timeline__item li:not(.alt-timeline__name) {
font-size: var(--font-size-xs); }

.alt-timeline__date {
margin-block-end: var(--spacing-s);
font-family: var(--font-family-default);
font-size: var(--font-size-s);
font-variation-settings: "ital" 0, "wdth" 75, "wght" 500; }

.alt-timeline__name {
margin-block-end: var(--spacing-s);
font-family: var(--font-family-default);
font-size: var(--font-size-m);
font-variation-settings: "ital" 0, "wdth" 75, "wght" 500; }

.alt-timeline__title {
margin-block: 0; }

@media screen and (min-width: 64em) {

.alt-timeline {
position: relative;
display: block;
margin: var(--spacing-medium) auto;
padding: 0;
height: auto;
max-height: 36rem;
background-image: url(/img/bg-timeline.webp);
background-position: 50% 50%;
background-repeat: repeat-y;
border-left-width: 0;
overflow-x: hidden;
overflow-y: auto;
scroll-snap-type: x none;
scroll-snap-type: y mandatory; }

.alt-timeline__item {
float: left;
clear: both;
margin-block-end: 0;
margin-inline-end: 0;
padding: 20px;
width: calc(50% - 80px);
text-align: right; }

.alt-timeline__item:not(:first-child) {
margin-top: -60px; }

.alt-timeline__item:nth-child(2n) {
float: right;
text-align: left; }

.alt-timeline__title {
position: relative; }

.alt-timeline__title:before {
content: "";
position: absolute;
top: 50%;
right: -55px;
z-index: 1000;
inline-size: 8px;
block-size: 8px;
background-color: var(--color-background-default);
border: 4px solid var(--color-base);
border-radius: 100%;
transform: translateY(-50%); }

.alt-timeline__title.lg:before {
inline-size: 24px;
block-size: 24px;
background-color: var(--color-base);
transform: translate(8px, -50%); }

.alt-timeline__item:nth-child(2n) .alt-timeline__title:before {
left: -81px; }

.alt-timeline__item:nth-child(2n) .alt-timeline__title.lg:before {
transform: translate(-8px, -50%); }

.alt-timeline__item svg {
transform: translateY(0); }

.alt-timeline__item:nth-child(2n) svg {
float: right;
margin-inline-end: 0;
margin-inline-start: 15px;
transform: translateY(0); }
}

dl {
margin-block: var(--spacing-r) 0;
margin-inline: 0;
padding: 0;
line-height: 2; }

dt {
margin: 0;
padding: 0;
font-family: var(--font-family-default);
font-size: var(--font-size-s);
font-variation-settings: "ital" 0, "wdth" 100, "wght" 500;
text-transform: uppercase; }

dd {
margin: -5px 0 0 0;
padding: 0;
font-family: var(--font-family-default);
font-size: var(--font-size-xs);
font-variation-settings: "ital" 0, "wdth" 100, "wght" 400; }

/* CLIENTS */

.alt-brands {
text-align: center; }

.alt-brands li {
display: inline-block;
vertical-align: middle; }

.alt-brands li:not(:last-child) {
margin-inline-end: var(--spacing-r); }

.alt-clients {
text-align: center; }

.alt-clients li {
display: inline-block;
vertical-align: middle; }

.alt-clients li:not(:last-child) {
margin-inline-end: var(--spacing-r); }

.alt-clients li:not(:has(a)) {
opacity: .5; }

/* SMALL */

small {
display: block;
line-height: var(--lineheight-r);
font-size: var(--font-size-xs); }

/* TIME */

time {
display: block;
margin-block-end: 0;
font-size: var(--font-size-xs);
text-transform: uppercase; }

/* RULES   ---------------------------------------- */

hr {
clear: both;
display: block;
height: 1px;
margin-block: var(--spacing-m);
margin-inline: 0;
padding: 0;
border: 0;
border-block-start: var(--border-width-r) solid var(--color-border); }

[data-function="spacer"] {
grid-column: 1 / -1;
margin-block: var(--spacing-l);
margin-inline: 0;
border-block-start: 0; }

/* IMAGES   ---------------------------------------- */

rect,
path,
polygon,
use,
g,
ellipse {
transform-box: fill-box;
transform-origin: 50% 50%; }

img {
border-width: 0;
/* content-visibility: auto; */
max-inline-size: 100%;
inline-size: 100%;
block-size: auto; }

video {
margin-bottom: var(--spacing-r);
max-inline-size: 100%;
inline-size: 100%;
block-size: auto;
border-radius: var(--border-radius-r); }

figure {
margin-block: var(--spacing-m);
margin-inline: 0;
padding: 0; }

figure img {
margin-block: 0 var(--spacing-s); }

figcaption {
font-family: var(--font-family-default);
font-size: var(--font-size-xs);
font-variation-settings: "ital" 0, "wdth" 75, "wght" 500;
font-style: normal;
text-transform: uppercase; }

.alt-avatar {
float: right;
width: 150px;
height: 150px;
clip-path: circle(50% at 50% 50%);
shape-outside: circle(50%);
margin-inline-start: 20px;
margin-block-end: 10px; }

.alt-circle {
margin-block-end: var(--spacing-m);
clip-path: circle(50% at 50% 50%); }

@keyframes sign-wobble {
0%, 80%, 100% { transform: rotate(0deg); }
10% { transform: rotate(5deg); }
20% { transform: rotate(-5deg); }
30% { transform: rotate(3deg); }
40% { transform: rotate(-3deg); }
50% { transform: rotate(1deg); }
60% { transform: rotate(-1deg); }
70% { transform: rotate(0deg); } }

.alt-sign {
transform-origin: 50% 50%;
animation: sign-wobble 3s ease-in-out infinite; }

.logo-ext path {
fill: var(--color-light); }

.embed-container {
position: relative;
margin-block-end: 1rem;
padding-block-end: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%; }

.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }

/* FORMS   ---------------------------------------- */

form {
margin: 0;
padding: 0; }

label {
display: block;
margin-block-start: 0;
margin-block-end: var(--spacing-s);
margin-inline: 0;
font-family: var(--font-family-default);
font-size: var(--font-size-s);
font-variation-settings: "ital" 0, "wdth" 75, "wght" 500;
line-height: 1;
color: var(--color-text-default);
text-transform: uppercase; }

[type="email"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="url"],
textarea {
-webkit-appearance: none;
appearance: none;
display: inline-block;
margin: 0;
padding: var(--spacing-s);
inline-size: 100%;
background-color: var(--color-background-default);
border: var(--border-width-r) solid var(--color-border);
border-radius: 0;
box-shadow: none;
box-sizing: border-box;
font-family: var(--font-family-default);
font-size: var(--font-size-xs);
color: var(--color-text-default);
transition: all var(--animate-duration-faster) var(--animate-function);
caret-color: var(--color-accent); }

[type="email"]:focus,
[type="password"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="text"]:focus,
[type="url"]:focus,
textarea:focus {
outline: 0;
accent-color: var(--color-accent); }

textarea {
min-block-size: 17rem;
resize: vertical;
transition: min-height .5s ease-in-out; }

input[type]::placeholder {
font-family: var(--font-family-default);
font-size: var(--font-size-xs);
color: var(--color-text-default);
opacity: .5; }

input:focus::-webkit-input-placeholder {
transition: opacity .5s .25s ease !important;
opacity: 0; }

input:focus::placeholder {
transition: opacity .5s .25s ease !important;
opacity: 0; }

[data-function="search"] form {
display: flex;
align-items: center;
gap: var(--grid-column-gap);
margin: 0 auto;
padding: 0; }

.form-row {
margin-block-end: var(--spacing-r); }

.form-survey form > div {
margin-block-end: var(--spacing-r); }

.form-survey form span {
display: block;
margin-block-start: var(--spacing-s); }

/* BUTTONS   ---------------------------------------- */

button {
inline-size: fit-content;
margin-inline: auto;
padding-block: 15px 10px;
padding-inline: var(--spacing-r);
background-color: var(--color-button);
border: none;
border-radius: 0;
box-shadow: none;
font-family: var(--font-family-default);
font-size: var(--font-size-s);
font-variation-settings: "ital" 0, "wdth" 75, "wght" 500;
line-height: 1;
text-align: center;
text-transform: uppercase;
color: var(--color-text-alt);
-webkit-appearance: none;
appearance: none;
scale: 1;
transition: scale var(--animate-duration-faster) var(--animate-function);
cursor: url("/img/cursor-hand.svg"),auto;
-webkit-user-select: none;
user-select: none; }

button:hover {
scale: var(--scale-up); }

button:active,
button:focus {
scale: var(--scale-down); }

.btn,
.btn:visited {
inline-size: fit-content;
margin-inline: auto;
padding-block: 20px 15px;
padding-inline: var(--spacing-m);
background-color: var(--color-button);
border: none;
box-shadow: none;
border-radius: var(--border-radius-r);
font-family: var(--font-family-default);
font-size: var(--font-size-s);
font-variation-settings: "ital" 0, "wdth" 75, "wght" 500;
line-height: 1;
text-align: center;
text-transform: uppercase;
color: var(--color-text-alt);
scale: 1;
transition: scale var(--animate-duration-faster) var(--animate-function);
cursor: url("/img/cursor-hand.svg"),auto;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none; }

.btn:hover {
color: var(--color-text-alt);
scale: var(--scale-up); }

.btn:active,
.btn:focus {
color: var(--color-text-alt);
scale: var(--scale-down); }

.btn-large {
padding-block-start: 22px;
padding-block-end: 20px;
padding-inline: var(--spacing-m); }

.btn-group {
display: flex;
align-items: center;
gap: var(--grid-column-gap);
padding-inline: var(--spacing-m); }

.btn-group:before,
.btn-group:after {
content: "";
display: block;
flex: 1;
height: 1px;
border-block-end: var(--border-width-r) solid var(--color-border); }

[data-offer="true"] {
background-color: var(--color-accent) !important; }

/* TABLE */

table {
margin: 0 0 var(--spacing-r);
width: 100%;
background-color: transparent;
border-collapse: collapse;
font-family: inherit; }

th, td {
padding:var(--spacing-s) var(--spacing-m) var(--spacing-s) 0;
font-size: var(--font-size-xs);
text-align: left;
vertical-align: middle; }

th {
font-family: var(--font-family-default);
font-variation-settings: "ital" 0, "wdth" 100, "wght" 500;
white-space: nowrap; }

td:first-of-type {
padding-left: var(--spacing-s); }

thead th,thead td {
border-bottom: var(--border-width-l) solid var(--color-border); }

tbody th,tbody td {
border-bottom: var(--border-width-r) solid var(--color-border); }

table h3,
table h4 {
margin: 0;
font-size: var(--font-size-r); }

.table--responsive {
display: inline-block;
max-width: 100%;
overflow-x:auto;
-webkit-overflow-scrolling: touch;
vertical-align:top;
border-spacing: 0; }

/* Table details (Critical: All) */

.table__icons a {
text-decoration: none; }

.table__icons img {
display: inline-block;
margin-right: 5px;
width: 18px; }

.table__icons,.table__numeral {
padding-right: 0;
width: 50px; }

.td--dots {
font-size: 28px;
color: var(--color-accent); }

.td--divider {
border-left: var(--border-width-r) solid var(--color-border);
padding-left: var(--spacing-m); }

/* FONT SIZES */

[data-size="2xs"] { font-size: var(--font-size-2xs); }
[data-size="xs"] { font-size: var(--font-size-xs); }
[data-size="s"] { font-size: var(--font-size-s); }
[data-size="r"] { font-size: var(--font-size-r); }
[data-size="m"] { font-size: var(--font-size-m); }
[data-size="l"] { font-size: var(--font-size-l); }
[data-size="xl"] { font-size: var(--font-size-xl); }
[data-size="2xl"] { font-size: var(--font-size-2xl); }
[data-size="3xl"] { font-size: var(--font-size-3xl); }

@media screen and (min-width: 64em) {

[data-size="3xl"] {
margin-block: 0 var(--spacing-r);
font-size: 5cqi;
line-height: 1; }
}

/* SCROLL  ---------------------------------------- */

[data-scroll="scroll-v"] {
margin-block: 0 var(--spacing-m);
max-block-size: 200px;
overflow-y: auto; }

[data-scroll="scroll-v"]:last-of-type {
margin-block: 0; }

/* NAV  ---------------------------------------- */

nav {
display: flex;
flex-wrap: wrap;
gap: 5px 20px;
justify-content: center; }

nav a,
nav a:visited,
nav a:hover {
display: block;
padding-block: 10px 8px;
font-family: var(--font-family-default);
font-size: var(--font-size-xs);
font-variation-settings: "ital" 0, "wdth" 90, "wght" 500;
color: var(--color-text-default); }

@media screen and (min-width: 48em) {

nav {
gap: 0 var(--spacing-r);
justify-content: flex-end; }
}

/* HEADER  ---------------------------------------- */

[role="banner"] {
margin-block: var(--spacing-r);
padding-inline: var(--spacing-m); }

[role="banner"] > div {
text-align: center; }

[role="banner"] > div:nth-of-type(1) svg {
width: 120px; }

@media screen and (min-width: 64em) {

[role="banner"] {
display: grid;
grid-template-columns: var(--grid-compound);
align-items: center;
gap: var(--grid-row-gap) var(--grid-column-gap);
margin-block-end: 0;  }

[role="banner"] > div {
text-align: left; }

[role="banner"] > div:nth-of-type(1) {
grid-column: 1; }

[role="banner"] > div:nth-of-type(1) svg {
width: 100%; }

[role="banner"] > div:nth-of-type(2) {
grid-column: 4  / -1; }
}

[data-theme="nutty-boys"] {
--banner-block: 450px; }

[data-theme="scooter-boys"] {
--banner-block: 700px; }

#banner {
position: relative;
display: grid;
grid-template-columns: var(--grid-compound);
margin-block-end: var(--spacing-m);
/* new */ block-size: var(--banner-block); }

#banner > div:nth-of-type(1) {
grid-column: 1 / -1;
grid-row: 1;
z-index: 1;
inline-size: 100%;
max-inline-size: 100%;
/* new */ block-size: var(--banner-block); }

#banner > div:nth-of-type(2) {
grid-column: 1 / -1;
grid-row: 1;
z-index: 2;
block-size: var(--banner-block);
overflow: hidden; }

#banner > div:nth-of-type(3) {
display: none; }

#banner p:nth-of-type(1),
#banner p:nth-of-type(3) {
display: block;
font-family: var(--font-family-default);
font-style: normal;
font-variation-settings: "ital" 0, "wdth" 75, "wght" 500;
text-transform: uppercase; }

#banner p:nth-of-type(2) {
display: block;
margin-block: 0;
font-family: var(--font-family-default);
font-size: var(--font-size-2xl);
font-variation-settings: "ital" 0, "wdth" 75, "wght" 600;
line-height: 1.2; }

#banner button {
position: absolute;
bottom: 0;
left: var(--spacing-r);
z-index: 10;
padding-block: 10px 5px;
padding-inline: 15px;
font-size: var(--font-size-r);
line-height: 1; }

@media screen and (min-width: 64em) {

:root {
--banner-block: 100%; }

[data-theme="nutty-boys"] {
--banner-block: 600px; }

#banner > div:nth-of-type(2) {
padding-inline: var(--spacing-l); }

#banner > div:nth-of-type(3) {
display: block;
grid-column: 1 / 5;
grid-row: 1;
z-index: 3;
padding-block-start: var(--spacing-r);
padding-inline-start: var(--spacing-r); }
}

/* FOOTER  ---------------------------------------- */

#footer-img {
margin-inline: auto;
padding-inline: var(--spacing-m);
max-width: 640px;
box-sizing: border-box;
text-align: center;
transform: translateY(10px); }

[role="contentinfo"] > div {
margin-block-end: var(--spacing-r);
padding-inline: var(--spacing-m);
text-align: center; }

[role="contentinfo"] > div:nth-of-type(2) li {
display: block;
text-align: center; }

@media screen and (min-width: 64em) {

[role="contentinfo"] {
display: grid;
grid-template-columns: var(--grid-compound);
margin-block-end: var(--spacing-l); }

[role="contentinfo"] > div {
margin-block-end: 0;
text-align: left; }

[role="contentinfo"] > div:nth-of-type(1) {
grid-column: 1 / 4;
grid-row: 1; }

[role="contentinfo"] > div:nth-of-type(2) {
grid-column: 4 / 9;
grid-row: 1;
margin-trim: block; }

[role="contentinfo"] > div:nth-of-type(2) li {
display: inline;
text-align: left; }

[role="contentinfo"] > div:nth-of-type(3) {
grid-column: 9 / -1;
grid-row: 1; }

[role="contentinfo"] p:has(.alt-sign) {
translate: -47px 0;
justify-content: flex-start; }
}

/* ABOUT  ---------------------------------------- */

#about {
padding-inline: var(--spacing-m); }

#about h2 {
margin-block-end: var(--spacing-s); }

/* BLOG */

.alt-blogroll {
margin-block: var(--spacing-r); }

.alt-blogroll li {
margin-block-end: var(--spacing-s); }

.alt-blogroll a {
display: flex;
align-items: center;
gap: var(--spacing-s);
font-size: var(--font-size-xs);
text-decoration: none; }

.alt-blogroll svg {
max-inline-size: 18px; }

.alt-blogroll svg path {
fill: var(--color-accent); }

.alt-blogroll svg .background {
fill: var(--color-background-default); }

.alt-blogroll svg circle,
.alt-blogroll svg ellipse {
fill: var(--color-accent); }

.custom__page {
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 3;
-webkit-hyphenate-limit-lines: 2;
hyphens: auto;
hyphenate-limit-chars: 7 4 3;
hyphenate-limit-lines: 2;
hyphenate-limit-zone: 8%;
hyphenate-limit-last: always;
font-variant-numeric: oldstyle-nums proportional-nums;
text-wrap: pretty; }

.custom__page pre,
.custom__page code,
.custom__page var,
.custom__page samp,
.custom__page kbd,
.custom__page h1,
.custom__page h2,
.custom__page h3,
.custom__page h4 {
-webkit-hyphens: manual;
hyphens: manual; }

/* BOOKS  ---------------------------------------- */

[itemtype] {
margin-block: var(--spacing-l);
margin-trim: block-start;
padding: var(--spacing-m) var(--spacing-l);
border-radius: var(--border-radius-xl);
border: var(--border-width-xl) solid var(--color-border); }

[itemtype] h2 {
margin-block: 0;
font-size: var(--font-size-2xl); }

[itemtype] blockquote {
margin-block: var(--spacing-m); }

[itemtype] figure {
margin-block-end: var(--spacing-r); }

@media (min-width: 64em) {

[itemtype] {
display: grid;
grid-template-columns: var(--grid-12-col);
gap: var(--grid-row-gap) var(--spacing-l); }

[itemtype] > *:nth-child(1) {
grid-column: 1 / 9; }

[itemtype] > *:nth-child(2) {
grid-column: 9 / -1; }

.product-item {
display: grid;
grid-template-columns: var(--grid-12-col);
gap: var(--grid-row-gap) var(--spacing-l);
margin-block-end: var(--spacing-l); }

.product-item > *:nth-child(1) {
grid-column: 1 / 4; }

.product-item > *:nth-child(2) {
grid-column: 4 / -1; }
}

/* BOXES */

/* PANELS */

.alt-panel {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
margin-trim: block-start;
padding: var(--spacing-r);
border-radius: var(--border-radius-xl);
border: var(--border-width-xl) solid var(--color-border);
text-align: center; }

[data-variant="recommended"] {
border-color: #fff; }

.alt-panel > .panel-icon {
position: absolute;
top: -2rem;
right: -2rem;
inline-size: 80px; }

.alt-panel > h2,
.alt-panel > h3 {
margin-block: 0 var(--spacing-s); }

.alt-panel > p {
margin-block: 0 var(--spacing-r); }

.alt-panel > ul {
margin-block: 0 var(--spacing-r); }

.alt-panel div {
margin-block: 0;
padding-block: var(--spacing-s); }

/* PRICING */

.alt-pricing > * {
margin-block-end: var(--spacing-r); }

@media (min-width: 64em) {

.alt-pricing {
display: flex;
gap: var(--grid-column-gap);
margin-block: var(--spacing-m); }

.alt-pricing > * {
margin-block-end: 0; }

.alt-pricing > div {
flex: 1;
margin-block-end: 0;
margin-trim: block; }

.alt-pricing > p {
align-self: center;
inline-size: 1em;
margin-block: 0;
font-family: var(--font-family-default);
font-size: var(--font-size-s);
font-variation-settings: "ital" 0, "wdth" 75, "wght" 500;
text-align: center;
text-transform: uppercase; }
}

/* TEMPLATES */

.alt-templates > * {
margin-block-end: var(--spacing-r); }

@media (min-width: 64em) {

.alt-templates {
margin-block: var(--spacing-m);
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: var(--grid-column-gap) var(--grid-column-gap); }

.alt-templates > * {
margin-block-end: 0; }

.alt-templates > :nth-child(1) {
grid-column: 1;
grid-row: 1 / 3; }
}

/* RESULTS */

.alt-results {
border-bottom: var(--border-width-l) solid var(--color-border); }

.alt-results h3 {
margin-block: 0;
font-size: var(--font-size-m); }

.alt-results p {
margin-block: 0 var(--spacing-l);
font-size: var(--font-size-xs); }

/* CARDS */

.cards {
position: relative;
display: flex;
margin-block-end: var(--spacing-r);
padding: 0 0 var(--spacing-m);
overflow-x: scroll;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; }

.cards > article {
overflow: hidden;
display: flex;
flex-direction: column;
min-inline-size: 20rem;
min-block-size: 340px;
margin-trim: block;
padding: var(--spacing-r);
box-sizing: border-box;
background-color: var(--color-background-default);
border: var(--border-width-r) solid var(--color-border);
border-radius: var(--border-radius-r);
scroll-snap-align: start;
transition: all var(--animate-duration-faster) var(--animate-function); }

.cards > article h2 {
margin-block-end: var(--spacing-s);
font-size: var(--font-size-m);
hyphens: auto; }

.cards > article p {
font-size: var(--font-size-xs); }

.cards > article small {
display: block;
margin-block-start: auto;
font-family: var(--font-family-default);
font-size: var(--font-size-xs);
font-variation-settings: "ital" 0, "wdth" 75, "wght" 500;
text-transform: uppercase; }

@media (hover) and (min-width: 64em) {

.cards {
padding: 0 var(--spacing-r) var(--spacing-m); }

.cards > article:not(:first-child) {
margin-left: -50px;
box-shadow: -1rem 0 1.5rem -1rem rgba(0,0,0,.25); }

.cards > article:focus-within,
.cards > article:hover {
transform: translateY(-2px) rotate(1deg); }

.cards > article:focus-within ~ article,
.cards > article:hover ~ article {
transform: translateX(50px); }
}

/* COLUMNS  ---------------------------------------- */

@media (min-width: 64em) {

.alt-columns {
margin-trim: block;
margin-block-end: var(--spacing-l);
column-width: 32em;
column-gap: var(--spacing-l); }

.alt-columns p {
margin-block: 0; }

.alt-columns p + p {
text-indent: 3ch; }
}

/* CONTENT  ---------------------------------------- */

.content {
max-inline-size: 85rem;
margin-inline: auto;
padding-inline: var(--spacing-l);
box-sizing: border-box; }

/* CTA */

#cta {
margin-trim: block;
margin-block-end: var(--spacing-l);
margin-inline: var(--spacing-m);
padding-block: var(--spacing-r);
border-block-start: var(--border-width-r) solid var(--color-border);
border-block-end: var(--border-width-r) solid var(--color-border);
text-align: center; }

#cta p {
font-family: var(--font-family-default);
font-size: var(--font-size-xs);
font-variation-settings: "ital" 0, "wdth" 100, "wght" 500; }

#design-cta {
text-align: center; }

#design-cta h3 {
margin-block-end: 0;
font-family: var(--font-family-default);
font-size: var(--font-size-s);
font-variation-settings: "ital" 0, "wdth" 95, "wght" 500; }

@media screen and (min-width: 64em) {

#cta {
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-r);
text-align: unset; }
}

/* HERO */

#hero {
background-image: url("/img/hero-bg.svg");
background-repeat: repeat-x;
background-position: 0 0; }

#hero > *:nth-child(1) {
position: relative; /* Needed for the animation */
overflow: hidden;
padding-block-start: var(--spacing-m); }

#hero > *:nth-child(2) {
padding-inline: var(--spacing-m); }

#hero p,
#hero li {
font-family: var(--font-family-default);
font-variation-settings: "ital"0, "wdth"100, "wght"400; }

#hero [data-size="xs"] {
padding-block-start: var(--spacing-s);
font-size: 11px; }

@media screen and (min-width: 64em) {

#hero {
display: grid;
grid-template-columns: var(--grid-compound); }

#hero > *:nth-child(1) {
grid-column: 1 / 6;
padding-block-start: var(--spacing-xl); }

#hero > *:nth-child(2) {
grid-column: 6 / -1; }

.fade-in-left {
opacity: 0;
transform: translateX(-100%);
transition: opacity 1s ease-in-out, transform 1s ease-in-out; }

.fade-in-left.animate {
opacity: 1;
transform: translateX(0); }
}

/* INTRODUCTION */

#introduction {
margin-block: 0 var(--spacing-l);
margin-trim: block;
padding-inline: var(--spacing-m);
container-type: inline-size; }

#introduction[data-content="home"] .alt-brands {
text-align: center; }

#introduction[data-content="home"] .btn-group {
margin-block-end: var(--spacing-m);
padding-inline: 0; }

@media screen and (min-width: 64em) {

#introduction[data-content="home"] {
display: grid;
grid-template-columns: var(--grid-compound);
gap: 0 var(--grid-column-gap); }

#introduction[data-content="home"] h1 {
grid-column: 1 / -1; }

#introduction[data-content="home"] > div:nth-of-type(1) {
grid-column: 1 / 5; }

#introduction[data-content="home"] > div:nth-of-type(2) {
grid-column: 6 / -1; }

#introduction[data-content="home"] > div:nth-of-type(3) {
grid-column: 1 / -1;
margin-block-start: var(--spacing-l); }

#introduction[data-content="home"] .alt-brands {
text-align: left; }
}

/* design */

#introduction[data-content="design"] {
margin-block: var(--spacing-r) 4rem; }

#introduction[data-content="design"] h1 {
margin-block: 0 var(--spacing-s);
text-align: center; }

#introduction[data-content="design"] p {
margin-block: 0 var(--spacing-r);
margin-inline: auto;
max-inline-size: 80ch;
text-align: center; }

/* MAGAZINES  ---------------------------------------- */

[data-itemtype="magazine"] {
display: flex;
flex-direction: column;
font-size: var(--font-size-r);
margin-block-end: var(--spacing-xl); }

[data-itemtype="magazine"] h3 {
margin-block-end: 0;
font-size: var(--font-size-r); }

[data-itemtype="magazine"] p {
font-size: var(--font-size-xs); }

[data-itemtype="magazine"] a {
display: block;
margin: auto 0 0 0; }

@media (min-width: 64em) {

[data-itemtype="magazine"] {
margin-block-end: 0; }
}

/* PROMO */

.promo-item {
container-name: promo-item;
container-type: inline-size; }

.promo-item p {
margin-block: 0;
font-size: var(--font-size-xs); }

.promo-item svg {
display: block;
margin-block-end: var(--spacing-r);
margin-inline: auto; }


@container promo-item (width > 32em) {

.promo-item > div {
display: grid;
grid-template-columns: 180px 1fr;
gap: var(--grid-column-gap);
align-items: center; }
}

/* PORTFOLIO  ---------------------------------------- */

section:has([data-content="portfolio"]) {
margin-block-end: var(--spacing-l);
margin-inline: var(--spacing-m); }

section:has([data-content="portfolio"]):not(:first-of-type) {
padding-block-start: var(--spacing-l);
border-top: var(--border-width-l) solid var(--color-border); }

[data-content="portfolio"] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-block-end: var(--spacing-l); }

@media (min-width: 64em) {

[data-content="portfolio"] {
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 15vw 15vw; }

[data-content="portfolio"] > div {
display: flex;
justify-content: center;
align-items: center; }

[data-content=portfolio] > div:not([data-variant=l1]>div:nth-of-type(5)) {
transform: scale(1);
transition: all var(--animate-duration-faster) var(--animate-function); }

[data-content=portfolio] > div:not([data-variant=l1]>div:nth-of-type(5)):hover {
transform: scale(1.015); }

[data-content="portfolio"][data-variant="l1"]>div:nth-of-type(5) {
position: relative;
overflow: visible; }

[data-content="portfolio"][data-variant="l1"] > div:nth-of-type(5):before {
content: "scroll";
display: block;
position: absolute;
top: -20px;
left: calc(50% - 50px);
z-index: 100;
padding: 10px 15px 5px;
width: 100px;
background-color: var(--color-base);
border-radius: var(--border-radius-l);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.25);
box-sizing: border-box;
color: var(--color-text-default);
font-family: var(--font-family-default);
font-size: var(--font-size-xs);
font-variation-settings: "ital"0, "wdth"80, "wght"500;
text-align: center;
text-transform: uppercase;
opacity: 0;
transition: var(--animate-duration-faster) opacity var(--animate-function); }

[data-content="portfolio"][data-variant="l1"]:hover>div:nth-of-type(5):before {
opacity: 1; }
}

/* POSTS */

.h-entry time {
display: flex;
align-items: center;
gap: var(--grid-column-gap); }

.h-entry time:after {
content: "";
display: block;
flex: 1;
height: 1px;
border-block-end: var(--border-width-r) solid var(--color-border); }

.h-entry h2 {
margin-block: var(--spacing-s) 0; }

.h-entry p {
font-size: var(--font-size-xs); }

/* REEL  ---------------------------------------- */

[data-function="reel"] {
display: flex;
height: 410px;
margin-block-end: var(--spacing-m);
overflow-x: auto;
overflow-y: hidden;
padding-block-end: var(--spacing-r); }

[data-function="reel"] div {
flex: 0 0 500px;
height: 100%;
border: var(--border-width-r) solid var(--color-accent);
border-radius: var(--border-radius-l);
overflow: hidden;
scroll-snap-align: start; }

[data-function="reel"] img {
margin: 0;
object-fit: contain; }

[data-function="reel"] div:not(:last-of-type) {
margin-inline-end: var(--spacing-r); }

[data-function="reel"]::-webkit-scrollbar {
height: 5px; }

[data-layout="hank"] [data-function="reel"] {
height: 500px; }

[data-layout="hank"] [data-function="reel"] div {
flex: 0 0 860px; }

[data-layout="megan"] [data-function="reel"] {
height: 500px; }

[data-layout="megan"] [data-function="reel"] div {
flex: 0 0 860px; }

/* LAYOUTS  ---------------------------------------- */

[data-variant="l1"] > div {
display: flex;
justify-content: center;
align-items: center;
min-height: 100px;
background-color: var(--color-base);
border-radius: var(--border-radius-l);
overflow: hidden; }

[data-variant="l1"] > div:nth-of-type(1) {
grid-column: 1;
grid-row: 1; }

[data-variant="l1"] > div:nth-of-type(2) {
grid-column: 1 / -1;
grid-row: 2; }

[data-variant="l1"] > div:nth-of-type(3) {
grid-column: 1 / -1;
grid-row: 4; }

[data-variant="l1"] > div:nth-of-type(4) {
grid-column: 2;
grid-row: 1; }

[data-variant="l1"] > div:nth-of-type(5) {
grid-column: 1 / -1;
grid-row: 3;
max-height: 400px; }

[data-variant="l1"] [data-function="scroll"] {
padding-inline-end: 5px;
height: 100%;
overflow-y: auto;
border-radius: var(--border-radius-l);
cursor: url("/img/cursor-scroll.svg"),auto;
mask-image: linear-gradient(180deg, #000 75%, transparent 100%); }

@media (min-width: 64em) {

[data-variant="l1"] > div:nth-of-type(1) {
grid-column: 1;
grid-row: 1; }

[data-variant="l1"] > div:nth-of-type(2) {
grid-column: 2 / 4;
grid-row: 1; }

[data-variant="l1"] > div:nth-of-type(3) {
grid-column: 1 / 3;
grid-row: 2; }

[data-variant="l1"] > div:nth-of-type(4) {
grid-column: 3;
grid-row: 2; }

[data-variant="l1"] > div:nth-of-type(5) {
grid-column: 4 / 6;
grid-row: 1 / 3;
height: 100%;
max-height: 600px; }
}





/* GRID  ---------------------------------------- */

[class*="flex"] > * {
margin-trim: block;
margin-block-end: var(--spacing-r); }

@media (min-width: 64em) {

[class*="flex"] {
display: flex;
gap: var(--grid-column-gap); }

[class*="flex"] > * {
flex: 1;
margin-block: 0; }

[data-borders="inline-start"] > div:not(:first-of-type) {
padding-inline-start: var(--spacing-r);
border-inline-start: var(--border-width-l) solid var(--color-border); }

[data-borders="block-start"] > div {
padding-block-start: var(--spacing-r);
border-block-start: var(--border-width-l) solid var(--color-border); }
}

[data-layout="blake"] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px; }

[data-layout="blake"] > * {
text-align: center; }

[data-layout="dolly"] {
margin-block-end: var(--spacing-l); }

[data-layout="dolly"] main {
padding-inline-start: var(--spacing-m);
padding-inline-end: var(--spacing-m); }

[data-layout="hank"] {
margin-block-end: var(--spacing-l);
padding-inline: var(--spacing-m); }

[data-layout="hank"] > div:nth-of-type(1) {
margin-trim: block;
margin-block-end: var(--spacing-r);
text-align: center; }

[data-layout="hank"] > div:nth-of-type(1) p {
margin-block: 0;
font-family: var(--font-family-default);
font-size: var(--font-size-m);
font-variation-settings: "ital" 0, "wdth" 100, "wght" 500;
line-height: var(--lineheight-r); }

[data-layout="hank"] > div:nth-of-type(1) svg {
inline-size: 200px; }

[data-layout="hank"] [data-function="scroll"] {
overflow-y: auto;
block-size: 500px;
border: var(--border-width-r) solid var(--color-accent);
border-radius: var(--border-radius-l); }

[data-layout="kacey"] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--grid-column-gap); }

[data-layout="miranda"] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--grid-column-gap); }

[data-layout="miranda"] img {
border: var(--border-width-r) solid var(--color-accent); }

[data-layout="patsy"] > *:nth-child(2) {
container-type: inline-size; }

[data-layout="patsy"] h3 {
margin-block: 0;
font-size: var(--font-size-r); }

[data-layout="patsy"] p {
font-size: var(--font-size-xs); }

[data-layout="patsy"] .alt-circle {
margin-inline: auto;
max-width: 50cqi; }

[data-layout="kenny"] {
margin-block-end: var(--spacing-l); }

[data-layout="willy"] {
margin-block-end: var(--spacing-xl); }

[data-layout="shania"] {
margin: var(--spacing-l); }

[data-layout="shania"] > *:nth-child(2) {
display: none; }

[data-layout="tammy"] {
padding-inline: var(--spacing-m); }

@media (min-width: 64em) {

/* blake */

[class*="grid"] {
display: grid;
grid-template-columns: var(--grid-compound);
gap: var(--grid-row-gap) var(--grid-column-gap); }

/* dolly */

[data-layout="dolly"] {
align-items: start; }

[data-layout="dolly"] > *:nth-child(1) {
grid-column: 1 / 5; }

[data-layout="dolly"] > *:nth-child(2) {
grid-column: 5 / -1; }

[data-layout="dolly"] > *:nth-child(2) blockquote {
padding-block-start: var(--spacing-l); }

[data-layout="dolly"] main {
padding-inline-start: 0;
padding-inline-end: var(--spacing-m); }

[data-layout="dolly"] main > .alt-uppercase:first-of-type + h1 {
margin-block: 0; }

/* hank */

[data-layout="hank"] {
grid-template-columns: repeat(12, 1fr);
gap: var(--spacing-l) var(--spacing-m);
padding-inline: 0; }

[data-layout="hank"] > * {
grid-column: 2 / 12; }

[data-layout="hank"] > .inner {
grid-column: 3 / 11; }

[data-layout="hank"] [data-function="scroll"] {
block-size: 650px; }

/* johnny */

[data-layout="johnny"] {
grid-template-columns: repeat(6, 1fr);
gap: var(--spacing-l) var(--spacing-m); }

/* june */

[data-layout="june"] {
grid-template-columns: 1fr 1fr;
gap: var(--spacing-l) var(--spacing-m); }

/* kenny */

[data-layout="kenny"] > *:nth-child(1),
[data-layout="kenny"] > *:nth-child(3) {
grid-column: 1 / 5; }

[data-layout="kenny"] > *:nth-child(2),
[data-layout="kenny"] > *:nth-child(4) {
grid-column: 5 / -1; }

/* megan */

[data-layout="megan"] {
grid-template-columns: 1fr 1fr;
gap: 0 var(--spacing-m);
margin-block: var(--spacing-m); }

/* miranda */

[data-layout="miranda"] {
grid-template-columns: repeat(4, 1fr); }

/* patsy */

[data-layout="patsy"] {
gap: var(--grid-row-gap) var(--spacing-xl); }

[data-layout="patsy"] > *:nth-child(1) {
grid-column: 3 / 7;
grid-row: 1; }

[data-layout="patsy"] > *:nth-child(2) {
grid-column: 1 / 3;
grid-row: 1; }

[data-layout="patsy"] > *:nth-child(3) {
grid-column: 7 / -1;
grid-row: 1; }

/* shania */

[data-layout="shania"] {
grid-template-columns: var(--grid-12-col);
padding-block-end: var(--spacing-l);
border-block-end: var(--border-width-r) solid var(--color-border); }

[data-layout="shania"] > *:nth-child(1) {
grid-column: 2 / 9;
padding-inline-end: var(--grid-column-gap);
border-right: var(--border-width-r) solid var(--color-border);  }

[data-layout="shania"] > *:nth-child(1) h2 {
margin-block: 0; }

[data-layout="shania"] > *:nth-child(2) {
display: block;
grid-column: 9 / 11; }

/* tammy */

[data-layout="tammy"] {
margin-inline: auto;
padding-inline: 0;
max-inline-size: 80ch; }

/* willy */

[data-layout="willy"] > *:nth-child(1) {
grid-column: 1 / 5; }

[data-layout="willy"] > *:nth-child(2) {
grid-column: 5 / -1;
align-self: end; }

/* waylon */

[data-layout="waylon"] {
margin-block-end: var(--spacing-l); }

[data-layout="waylon"] > *:nth-child(1) {
grid-column: 1 / 8; }

[data-layout="waylon"] > *:nth-child(2) {
grid-column: 8 / -1; }
}

/* OUR HOUSE  ---------------------------------------- */

@keyframes our-house-bg {
0% { background-position: 0 0; }
50% { background-position: -10000px 0; }
100% { background-position: 0 0; }
}

[data-theme="nutty-boys"] #our-house {
block-size: var(--banner-block);
inline-size: 100%;
background-image: url(/img/img-banner-bg.svg);
background-repeat: repeat-x;
background-size: cover;
transform: translateX(0);
animation-direction: normal;
animation-duration: 2000s;
animation-fill-mode: revert;
animation-iteration-count: infinite;
animation-name: our-house-bg;
animation-timing-function: linear; }

[data-theme="scooter-boys"] #our-house {
block-size: var(--banner-block);
inline-size: 100%;
background-image: url(/img/img-banner-bg.svg);
background-repeat: repeat-x;
background-size: cover;
transform: translateX(0);
animation-direction: normal;
animation-duration: 2000s;
animation-fill-mode: revert;
animation-iteration-count: infinite;
animation-name: our-house-bg;
animation-timing-function: linear; }

@media screen and (min-width: 64em) {

[data-theme="nutty-boys"] #our-house {
background-size: contain; }
}

/* ARTICLES  ---------------------------------------- */

[data-article] {
display: grid;
margin-block-end: var(--spacing-r); }

[data-article] #our-house {
grid-column: 1;
grid-row: 1;
background-size: cover;
box-sizing: border-box; }

@media (min-width: 64em) {

[data-article] #our-house {
padding-inline-end: 30px;
background-size: cover;
background-clip: content-box; }
}

[data-article] #nutty-boy {
grid-column: 1;
grid-row: 1;
z-index: 2;
justify-self: center;
align-self: end; }

[data-article="article-dali"] #nutty-boy svg {
width: 375px; }

[data-article="article-benn"] #nutty-boy svg {
width: 355px; }

[data-article="article-marx"] #nutty-boy svg {
width: 365px; }

[data-article="article-lennon"] #nutty-boy svg {
width: 315px; }

[data-article="article-marv"] #nutty-boy svg {
width: 375px; }

[data-article="article-ursus"] #nutty-boy svg {
width: 375px; }

[data-article="article-andy"] #nutty-boy svg {
width: 290px; }

@media (min-width: 64em) {

[data-article="article-dali"] #nutty-boy svg {
width: 440px; }

[data-article="article-marv"] #nutty-boy svg {
width: 415px; }

[data-article="article-ursus"] #nutty-boy svg {
width: 485px; }
}

/* THIRD-PARTY */

.calendly-inline-widget,
.calendly-inline-widget *,
.calendly-badge-widget,
.calendly-badge-widget *,
.calendly-overlay,
.calendly-overlay * {
font-size: 16px;
line-height: 1.2em; }

.calendly-inline-widget iframe,
.calendly-badge-widget iframe,
.calendly-overlay iframe {
display: inline;
width: 100%;
height: 100%; }

.calendly-popup-content{
position: relative; }

.calendly-popup-content.calendly-mobile {
-webkit-overflow-scrolling: touch;
overflow-y: auto; }

.calendly-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 9999;
background-color: #a5a5a5;
background-color: rgba(31, 31, 31, .4); }

.calendly-overlay .calendly-close-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; }

.calendly-overlay .calendly-popup {
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 80%;
min-width: 900px;
max-width: 1000px;
height: 90%;
max-height: 680px; }

@media(max-width:975px) {

.calendly-overlay .calendly-popup {
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
transform: none;
width: 100%;
height: auto;
min-width: 0;
max-height: none; }
}

.calendly-overlay .calendly-popup .calendly-popup-content {
height: 100%; }

.calendly-overlay .calendly-popup-close {
position: absolute;
top: 25px;
right: 25px;
color: #fff;
width: 19px;
height: 19px;
cursor: pointer;
background: url(/assets/external/close-icon.svg) no-repeat;
background-size: contain; }

@media(max-width:975px) {

.calendly-overlay .calendly-popup-close {
top: 15px;
right: 15px; }
}

.calendly-badge-widget {
position: fixed;
right: 20px;
bottom: 15px;
z-index: 9998; }

.calendly-badge-widget .calendly-badge-content {
display: table-cell;
width: auto;
height: 45px;
padding: 0 30px;
border-radius: 25px;
box-shadow: rgba(0, 0, 0, .25) 0 2px 5px;
font-family: sans-serif;
text-align: center;
vertical-align: middle;
font-weight: 700;
font-size: 14px;
color: #fff;
cursor: pointer; }

.calendly-badge-widget .calendly-badge-content.calendly-white {
color: #666a73; }

.calendly-badge-widget .calendly-badge-content span {
display: block;
font-size: 12px; }

.calendly-spinner {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
z-index: -1; }

.calendly-spinner>div {
display: inline-block;
width: 18px;
height: 18px;
background-color: #e1e1e1;
border-radius: 50%;
vertical-align: middle;
animation: calendly-bouncedelay 1.4s infinite ease-in-out;
animation-fill-mode: both; }

.calendly-spinner .calendly-bounce1 {
animation-delay: -.32s; }

.calendly-spinner .calendly-bounce2 {
animation-delay: -.16s; }

@keyframes calendly-bouncedelay {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}