@font-face { font-family: "PP Telegraf"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/PPTelegraf-Regular.woff2?v=1791563557") format("woff2"); }
@font-face { font-family: "PP Telegraf"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/PPTelegraf-UltraBold.woff2?v=1791563557") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/IBMPlexMono-Regular.woff2?v=1791563557") format("woff2"); }
@layer base, patterns, components, utilities;
@layer base {
:root {
--light-100: #ffffff;
--light-200: #f0f0f0;
--light-300: #ffffff;
--dark-700: #2b2b2b;
--dark-800: #1a1a1a;
--dark-900: #000000;
--brand-500: #46aa28;
--brand-text: var(--dark-900);
--orange-500: #ff6c28; 
--orange-text: #5a1d00;
--petrol-500: #33afcd;
--petrol-text: #0b3540;
--violet-500: #b274e4; 
--violet-text: #3a1356;
--violet-100: #f5d6ff; 
--green-text: #1f5410;
--green-600: #3c9022; 
--red-500: #c8322a; 
--accent-500: var(--brand-500); 
--green-light: #daeed4; 
--primary-family: "PP Telegraf", "Plus Jakarta Sans", system-ui, sans-serif;
--primary-regular: 400;
--primary-medium: 400;
--primary-bold: 800;
--secondary-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
--secondary-trim-top: 0.323em; 
--secondary-trim-bottom: 0.375em;
--primary-trim-top: 0.385em; 
--primary-trim-bottom: 0.28em;
--letter-spacing-tight: 0em;
--letter-spacing-normal: 0em;
--line-height-small: 1.1;
--line-height-medium: 1.2;
--line-height-large: 1.3;
--line-height-huge: 1.5;
--border-width: 0.0625rem;
--focus-width: 0.125rem;
--focus-offset: 0.1827rem;
--focus-offset-inner: calc(var(--focus-width) * -1);
--hover-duration: 200ms;
--hover-ease: ease;
--open-duration: var(--hover-duration);
--open-ease: var(--hover-ease);
--radius-small: 0.5rem;
--radius-main: 1rem;
--radius-round: 100vw;
--viewport-min: 320;
--viewport-max: 1920;
--max-width-small: 70rem;
--max-width-main: calc(var(--viewport-max) / 16 * 1rem);
--max-width-full: 100%;
--nav-height: clamp(var(--nav-height-min) / 16 * 1rem, ((var(--nav-height-min) - ((var(--nav-height-max) - var(--nav-height-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--nav-height-max) - var(--nav-height-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--nav-height-max) / 16 * 1rem);
--nav-height-min: 72;
--nav-height-max: 179;
--display: clamp(var(--display-min) / 16 * 1rem, ((var(--display-min) - ((var(--display-max) - var(--display-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--display-max) - var(--display-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--display-max) / 16 * 1rem);
--display-min: 40;
--display-max: 96;
--display-line-height: var(--line-height-small);
--display-letter-spacing: var(--letter-spacing-tight);
--display-text-transform: none;
--display-margin-top: var(--space-7);
--display-margin-bottom: var(--space-6);
--display-font-family: var(--primary-family);
--display-font-weight: var(--primary-medium);
--display-trim-top: var(--primary-trim-top);
--display-trim-bottom: var(--primary-trim-bottom);
--display-text-wrap: balance;
--h1: clamp(var(--h1-min) / 16 * 1rem, ((var(--h1-min) - ((var(--h1-max) - var(--h1-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--h1-max) - var(--h1-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--h1-max) / 16 * 1rem);
--h1-min: 36;
--h1-max: 84;
--h1-line-height: var(--line-height-small);
--h1-letter-spacing: var(--letter-spacing-tight);
--h1-text-transform: none;
--h1-margin-top: var(--space-7);
--h1-margin-bottom: var(--space-6);
--h1-font-family: var(--primary-family);
--h1-font-weight: var(--primary-bold);
--h1-trim-top: var(--primary-trim-top);
--h1-trim-bottom: var(--primary-trim-bottom);
--h1-text-wrap: balance;
--h2: clamp(var(--h2-min) / 16 * 1rem, ((var(--h2-min) - ((var(--h2-max) - var(--h2-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--h2-max) - var(--h2-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--h2-max) / 16 * 1rem);
--h2-min: 30;
--h2-max: 54;
--h2-line-height: var(--line-height-small);
--h2-letter-spacing: var(--letter-spacing-tight);
--h2-text-transform: none;
--h2-margin-top: var(--space-7);
--h2-margin-bottom: var(--space-5);
--h2-font-family: var(--primary-family);
--h2-font-weight: var(--primary-bold);
--h2-trim-top: var(--primary-trim-top);
--h2-trim-bottom: var(--primary-trim-bottom);
--h2-text-wrap: balance;
--h3: clamp(var(--h3-min) / 16 * 1rem, ((var(--h3-min) - ((var(--h3-max) - var(--h3-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--h3-max) - var(--h3-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--h3-max) / 16 * 1rem);
--h3-min: 26;
--h3-max: 40;
--h3-line-height: var(--line-height-small);
--h3-letter-spacing: var(--letter-spacing-tight);
--h3-text-transform: none;
--h3-margin-top: var(--space-6);
--h3-margin-bottom: var(--space-5);
--h3-font-family: var(--primary-family);
--h3-font-weight: var(--primary-bold); 
--h3-trim-top: var(--primary-trim-top);
--h3-trim-bottom: var(--primary-trim-bottom);
--h3-text-wrap: balance;
--h4: clamp(var(--h4-min) / 16 * 1rem, ((var(--h4-min) - ((var(--h4-max) - var(--h4-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--h4-max) - var(--h4-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--h4-max) / 16 * 1rem);
--h4-min: 20;
--h4-max: 30;
--h4-line-height: var(--line-height-small);
--h4-letter-spacing: var(--letter-spacing-tight);
--h4-text-transform: none;
--h4-margin-top: var(--space-6);
--h4-margin-bottom: var(--space-4);
--h4-font-family: var(--primary-family);
--h4-font-weight: var(--primary-bold);
--h4-trim-top: var(--primary-trim-top);
--h4-trim-bottom: var(--primary-trim-bottom);
--h4-text-wrap: balance;
--h5: clamp(var(--h5-min) / 16 * 1rem, ((var(--h5-min) - ((var(--h5-max) - var(--h5-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--h5-max) - var(--h5-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--h5-max) / 16 * 1rem);
--h5-min: 22;
--h5-max: 35;
--h5-line-height: var(--line-height-medium);
--h5-letter-spacing: var(--letter-spacing-tight);
--h5-text-transform: none;
--h5-margin-top: var(--space-5);
--h5-margin-bottom: var(--space-4);
--h5-font-family: var(--primary-family);
--h5-font-weight: var(--primary-bold);
--h5-trim-top: var(--primary-trim-top);
--h5-trim-bottom: var(--primary-trim-bottom);
--h5-text-wrap: balance;
--h6: clamp(var(--h6-min) / 16 * 1rem, ((var(--h6-min) - ((var(--h6-max) - var(--h6-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--h6-max) - var(--h6-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--h6-max) / 16 * 1rem);
--h6-min: 18;
--h6-max: 21;
--h6-line-height: var(--line-height-medium);
--h6-letter-spacing: var(--letter-spacing-tight);
--h6-text-transform: none;
--h6-margin-top: var(--space-5);
--h6-margin-bottom: var(--space-3);
--h6-font-family: var(--primary-family);
--h6-font-weight: var(--primary-bold);
--h6-trim-top: var(--primary-trim-top);
--h6-trim-bottom: var(--primary-trim-bottom);
--h6-text-wrap: balance;
--text-large: clamp(var(--text-large-min) / 16 * 1rem, ((var(--text-large-min) - ((var(--text-large-max) - var(--text-large-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--text-large-max) - var(--text-large-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--text-large-max) / 16 * 1rem);
--text-large-min: 18;
--text-large-max: 24;
--text-large-line-height: var(--line-height-large);
--text-large-letter-spacing: var(--letter-spacing-normal);
--text-large-text-transform: none;
--text-large-margin-top: var(--space-4);
--text-large-margin-bottom: var(--space-4);
--text-large-font-family: var(--primary-family);
--text-large-font-weight: var(--primary-regular);
--text-large-trim-top: var(--primary-trim-top);
--text-large-trim-bottom: var(--primary-trim-bottom);
--text-large-text-wrap: wrap; 
--text-special: clamp(var(--text-special-min) / 16 * 1rem, ((var(--text-special-min) - ((var(--text-special-max) - var(--text-special-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--text-special-max) - var(--text-special-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--text-special-max) / 16 * 1rem);
--text-special-min: 26;
--text-special-max: 40;
--text-special-line-height: var(--line-height-medium);
--text-special-letter-spacing: var(--letter-spacing-normal);
--text-special-text-transform: none;
--text-special-margin-top: var(--space-6);
--text-special-margin-bottom: var(--space-5);
--text-special-font-family: var(--primary-family);
--text-special-font-weight: var(--primary-regular);
--text-special-trim-top: var(--primary-trim-top);
--text-special-trim-bottom: var(--primary-trim-bottom);
--text-special-text-wrap: wrap; 
--text-main: clamp(var(--text-main-min) / 16 * 1rem, ((var(--text-main-min) - ((var(--text-main-max) - var(--text-main-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--text-main-max) - var(--text-main-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--text-main-max) / 16 * 1rem);
--text-main-min: 16;
--text-main-max: 22;
--text-main-line-height: var(--line-height-large);
--text-main-letter-spacing: var(--letter-spacing-normal);
--text-main-text-transform: none;
--text-main-margin-top: var(--space-4);
--text-main-margin-bottom: var(--space-4);
--text-main-font-family: var(--primary-family);
--text-main-font-weight: var(--primary-regular);
--text-main-trim-top: var(--primary-trim-top);
--text-main-trim-bottom: var(--primary-trim-bottom);
--text-main-text-wrap: wrap; 
--text-small: clamp(var(--text-small-min) / 16 * 1rem, ((var(--text-small-min) - ((var(--text-small-max) - var(--text-small-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--text-small-max) - var(--text-small-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--text-small-max) / 16 * 1rem);
--text-small-min: 14;
--text-small-max: 20;
--text-small-line-height: var(--line-height-huge);
--text-small-letter-spacing: var(--letter-spacing-normal);
--text-small-text-transform: none;
--text-small-margin-top: var(--space-4);
--text-small-margin-bottom: var(--space-4);
--text-small-font-family: var(--primary-family);
--text-small-font-weight: var(--primary-regular);
--text-small-trim-top: var(--primary-trim-top);
--text-small-trim-bottom: var(--primary-trim-bottom);
--text-small-text-wrap: wrap; 
--site-margin: clamp(var(--site-margin-min) / 16 * 1rem, ((var(--site-margin-min) - ((var(--site-margin-max) - var(--site-margin-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--site-margin-max) - var(--site-margin-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--site-margin-max) / 16 * 1rem);
--site-margin-min: 16;
--site-margin-max: 100;
--site-gutter: clamp(var(--site-gutter-min) / 16 * 1rem, ((var(--site-gutter-min) - ((var(--site-gutter-max) - var(--site-gutter-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--site-gutter-max) - var(--site-gutter-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--site-gutter-max) / 16 * 1rem);
--site-gutter-min: 16;
--site-gutter-max: 74;
--site-width: calc(100% - var(--site-margin) * 2);
--space-1: clamp(var(--space-1-min) / 16 * 1rem, ((var(--space-1-min) - ((var(--space-1-max) - var(--space-1-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-1-max) - var(--space-1-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-1-max) / 16 * 1rem);
--space-1-min: 6;
--space-1-max: 8;
--space-2: clamp(var(--space-2-min) / 16 * 1rem, ((var(--space-2-min) - ((var(--space-2-max) - var(--space-2-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-2-max) - var(--space-2-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-2-max) / 16 * 1rem);
--space-2-min: 10;
--space-2-max: 12;
--space-3: clamp(var(--space-3-min) / 16 * 1rem, ((var(--space-3-min) - ((var(--space-3-max) - var(--space-3-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-3-max) - var(--space-3-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-3-max) / 16 * 1rem);
--space-3-min: 14;
--space-3-max: 16;
--space-4: clamp(var(--space-4-min) / 16 * 1rem, ((var(--space-4-min) - ((var(--space-4-max) - var(--space-4-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-4-max) - var(--space-4-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-4-max) / 16 * 1rem);
--space-4-min: 20;
--space-4-max: 24;
--space-5: clamp(var(--space-5-min) / 16 * 1rem, ((var(--space-5-min) - ((var(--space-5-max) - var(--space-5-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-5-max) - var(--space-5-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-5-max) / 16 * 1rem);
--space-5-min: 28;
--space-5-max: 32;
--space-6: clamp(var(--space-6-min) / 16 * 1rem, ((var(--space-6-min) - ((var(--space-6-max) - var(--space-6-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-6-max) - var(--space-6-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-6-max) / 16 * 1rem);
--space-6-min: 32;
--space-6-max: 40;
--space-7: clamp(var(--space-7-min) / 16 * 1rem, ((var(--space-7-min) - ((var(--space-7-max) - var(--space-7-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-7-max) - var(--space-7-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-7-max) / 16 * 1rem);
--space-7-min: 36;
--space-7-max: 48;
--space-8: clamp(var(--space-8-min) / 16 * 1rem, ((var(--space-8-min) - ((var(--space-8-max) - var(--space-8-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-8-max) - var(--space-8-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-8-max) / 16 * 1rem);
--space-8-min: 40;
--space-8-max: 80;
--section-space-small: clamp(var(--section-space-small-min) / 16 * 1rem, ((var(--section-space-small-min) - ((var(--section-space-small-max) - var(--section-space-small-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--section-space-small-max) - var(--section-space-small-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--section-space-small-max) / 16 * 1rem);
--section-space-small-min: 48;
--section-space-small-max: 80;
--section-space-medium: clamp(var(--section-space-medium-min) / 16 * 1rem, ((var(--section-space-medium-min) - ((var(--section-space-medium-max) - var(--section-space-medium-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--section-space-medium-max) - var(--section-space-medium-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--section-space-medium-max) / 16 * 1rem);
--section-space-medium-min: 64;
--section-space-medium-max: 120;
--section-space-large: clamp(var(--section-space-large-min) / 16 * 1rem, ((var(--section-space-large-min) - ((var(--section-space-large-max) - var(--section-space-large-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--section-space-large-max) - var(--section-space-large-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--section-space-large-max) / 16 * 1rem);
--section-space-large-min: 88;
--section-space-large-max: 160;
--section-space-nav-overlap: clamp(var(--section-space-nav-overlap-min) / 16 * 1rem, ((var(--section-space-nav-overlap-min) - ((var(--section-space-nav-overlap-max) - var(--section-space-nav-overlap-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--section-space-nav-overlap-max) - var(--section-space-nav-overlap-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--section-space-nav-overlap-max) / 16 * 1rem);
--section-space-nav-overlap-min: 160;
--section-space-nav-overlap-max: 224;
}
:root,
.theme-light,
.theme-dark .theme-invert,
.theme-brand .theme-invert {
color-scheme: light;
--background: var(--light-300);
--background-2: var(--light-200);
--background-3: var(--light-100);
--background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
--text: var(--dark-900);
--text-2: color-mix(in lab, currentcolor 60%, transparent);
--border: color-mix(in lab, var(--text) 20%, transparent);
--heading-accent: color-mix(in srgb, var(--brand-500), black 20%);
--selection-background: var(--text);
--selection-text: var(--background);
--button-background: var(--brand-500);
--button-border: var(--button-background);
--button-text: var(--brand-text);
--button-background-hover: var(--text);
--button-border-hover: var(--button-background-hover);
--button-text-hover: var(--background);
--button-2-background: transparent;
--button-2-border: color-mix(in lab, var(--text) 40%, transparent); 
--button-2-text: var(--text);
--button-2-background-hover: var(--text);
--button-2-border-hover: var(--button-2-background-hover);
--button-2-text-hover: var(--background);
--link-text: var(--text);
--link-border: var(--border);
--link-text-hover: var(--text);
--link-border-hover: var(--brand-500);
}
.theme-dark,
.theme-light .theme-invert {
color-scheme: dark;
--background: var(--dark-900);
--background-2: var(--dark-800);
--background-3: var(--dark-700);
--background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
--text: var(--light-100);
--text-2: color-mix(in lab, currentcolor 60%, transparent);
--border: color-mix(in lab, var(--text) 20%, transparent);
--heading-accent: var(--brand-500);
--selection-background: var(--text);
--selection-text: var(--background);
--button-background: var(--brand-500);
--button-border: var(--button-background);
--button-text: var(--brand-text);
--button-background-hover: var(--text);
--button-border-hover: var(--button-background-hover);
--button-text-hover: var(--background);
--button-2-background: transparent;
--button-2-border: color-mix(in lab, var(--text) 40%, transparent); 
--button-2-text: var(--text);
--button-2-background-hover: var(--text);
--button-2-border-hover: var(--button-2-background-hover);
--button-2-text-hover: var(--background);
--link-text: var(--text);
--link-border: var(--border);
--link-text-hover: var(--text);
--link-border-hover: var(--text);
}
.theme-brand {
color-scheme: dark;
--background: var(--brand-500);
--background-2: color-mix(in lab, var(--background) 90%, var(--text));
--background-3: color-mix(in lab, var(--background) 80%, var(--text));
--background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
--text: var(--brand-text);
--text-2: color-mix(in lab, currentcolor 60%, transparent);
--border: color-mix(in lab, var(--text) 20%, transparent);
--heading-accent: color-mix(in srgb, var(--text), white 20%);
--selection-background: var(--text);
--selection-text: var(--background);
--button-background: var(--light-100);
--button-border: var(--button-background);
--button-text: var(--dark-900);
--button-background-hover: var(--dark-900);
--button-border-hover: var(--button-background-hover);
--button-text-hover: var(--light-100);
--button-2-background: transparent;
--button-2-border: color-mix(in lab, var(--text) 90%, transparent); 
--button-2-text: var(--text);
--button-2-background-hover: var(--light-100);
--button-2-border-hover: var(--button-2-background-hover);
--button-2-text-hover: var(--dark-900);
--link-text: var(--text);
--link-border: var(--border);
--link-text-hover: var(--text);
--link-border-hover: var(--text);
}
:root,
[class*="theme-"] {
background-color: var(--background);
color: var(--text);
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
margin: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100svh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
> main {
display: flex;
flex-direction: column;
flex-grow: 1;
}
}
a {
text-decoration: none;
color: inherit;
}
a:not([class]) {
text-decoration: underline;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
img,
video {
width: 100%;
object-fit: cover;
}
img {
height: auto;
overflow: clip;
user-select: none;
}
button {
background-color: transparent;
text-align: inherit;
padding: 0;
border: 0;
}
button:not(:disabled) {
cursor: pointer;
}
input,
button,
textarea,
select {
font: inherit;
}
ul,
ol {
padding: 0;
list-style: none;
list-style-type: "";
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
label {
font-weight: inherit;
}
select:has(option[value=""]:checked) {
color: color-mix(in lab, currentcolor 60%, transparent);
}
:target {
scroll-margin-block: 2rem;
}
:focus-visible {
outline-color: var(--text);
outline-offset: var(--focus-offset);
outline-width: var(--focus-width);
outline-style: solid;
}
::selection {
background-color: var(--selection-background);
color: var(--selection-text);
}
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
body,
.text-style-main {
font-family: var(--text-main-font-family);
font-size: var(--text-main);
font-weight: var(--text-main-font-weight);
line-height: var(--text-main-line-height);
letter-spacing: var(--text-main-letter-spacing);
text-transform: var(--text-main-text-transform);
text-wrap: var(--text-main-text-wrap);
--_trim-top: var(--text-main-trim-top);
--_trim-bottom: var(--text-main-trim-bottom);
--_margin-top: var(--text-main-margin-top);
--_margin-bottom: var(--text-main-margin-bottom);
}
.text-style-small {
font-family: var(--text-small-font-family);
font-size: var(--text-small);
font-weight: var(--text-small-font-weight);
line-height: var(--text-small-line-height);
letter-spacing: var(--text-small-letter-spacing);
text-transform: var(--text-small-text-transform);
text-wrap: var(--text-small-text-wrap);
--_trim-top: var(--text-small-trim-top);
--_trim-bottom: var(--text-small-trim-bottom);
--_margin-top: var(--text-small-margin-top);
--_margin-bottom: var(--text-small-margin-bottom);
}
.text-style-large {
font-family: var(--text-large-font-family);
font-size: var(--text-large);
font-weight: var(--text-large-font-weight);
line-height: var(--text-large-line-height);
letter-spacing: var(--text-large-letter-spacing);
text-transform: var(--text-large-text-transform);
text-wrap: var(--text-large-text-wrap);
--_trim-top: var(--text-large-trim-top);
--_trim-bottom: var(--text-large-trim-bottom);
--_margin-top: var(--text-large-margin-top);
--_margin-bottom: var(--text-large-margin-bottom);
}
.text-style-special {
font-family: var(--text-special-font-family);
font-size: var(--text-special);
font-weight: var(--text-special-font-weight);
line-height: var(--text-special-line-height);
letter-spacing: var(--text-special-letter-spacing);
text-transform: var(--text-special-text-transform);
text-wrap: var(--text-special-text-wrap);
--_trim-top: var(--text-special-trim-top);
--_trim-bottom: var(--text-special-trim-bottom);
--_margin-top: var(--text-special-margin-top);
--_margin-bottom: var(--text-special-margin-bottom);
}
.text-style-display {
font-family: var(--display-font-family);
font-size: var(--display);
font-weight: var(--display-font-weight);
line-height: var(--display-line-height);
letter-spacing: var(--display-letter-spacing);
text-transform: var(--display-text-transform);
text-wrap: var(--display-text-wrap);
--_trim-top: var(--display-trim-top);
--_trim-bottom: var(--display-trim-bottom);
--_margin-top: var(--display-margin-top);
--_margin-bottom: var(--display-margin-bottom);
}
h1,
.text-style-h1 {
font-family: var(--h1-font-family);
font-size: var(--h1);
font-weight: var(--h1-font-weight);
line-height: var(--h1-line-height);
letter-spacing: var(--h1-letter-spacing);
text-transform: var(--h1-text-transform);
text-wrap: var(--h1-text-wrap);
--_trim-top: var(--h1-trim-top);
--_trim-bottom: var(--h1-trim-bottom);
--_margin-top: var(--h1-margin-top);
--_margin-bottom: var(--h1-margin-bottom);
}
h2,
.text-style-h2 {
font-family: var(--h2-font-family);
font-size: var(--h2);
font-weight: var(--h2-font-weight);
line-height: var(--h2-line-height);
letter-spacing: var(--h2-letter-spacing);
text-transform: var(--h2-text-transform);
text-wrap: var(--h2-text-wrap);
--_trim-top: var(--h2-trim-top);
--_trim-bottom: var(--h2-trim-bottom);
--_margin-top: var(--h2-margin-top);
--_margin-bottom: var(--h2-margin-bottom);
}
h3,
.text-style-h3 {
font-family: var(--h3-font-family);
font-size: var(--h3);
font-weight: var(--h3-font-weight);
line-height: var(--h3-line-height);
letter-spacing: var(--h3-letter-spacing);
text-transform: var(--h3-text-transform);
text-wrap: var(--h3-text-wrap);
--_trim-top: var(--h3-trim-top);
--_trim-bottom: var(--h3-trim-bottom);
--_margin-top: var(--h3-margin-top);
--_margin-bottom: var(--h3-margin-bottom);
}
h4,
.text-style-h4 {
font-family: var(--h4-font-family);
font-size: var(--h4);
font-weight: var(--h4-font-weight);
line-height: var(--h4-line-height);
letter-spacing: var(--h4-letter-spacing);
text-transform: var(--h4-text-transform);
text-wrap: var(--h4-text-wrap);
--_trim-top: var(--h4-trim-top);
--_trim-bottom: var(--h4-trim-bottom);
--_margin-top: var(--h4-margin-top);
--_margin-bottom: var(--h4-margin-bottom);
}
h5,
.text-style-h5 {
font-family: var(--h5-font-family);
font-size: var(--h5);
font-weight: var(--h5-font-weight);
line-height: var(--h5-line-height);
letter-spacing: var(--h5-letter-spacing);
text-transform: var(--h5-text-transform);
text-wrap: var(--h5-text-wrap);
--_trim-top: var(--h5-trim-top);
--_trim-bottom: var(--h5-trim-bottom);
--_margin-top: var(--h5-margin-top);
--_margin-bottom: var(--h5-margin-bottom);
}
h6,
.text-style-h6 {
font-family: var(--h6-font-family);
font-size: var(--h6);
font-weight: var(--h6-font-weight);
line-height: var(--h6-line-height);
letter-spacing: var(--h6-letter-spacing);
text-transform: var(--h6-text-transform);
text-wrap: var(--h6-text-wrap);
--_trim-top: var(--h6-trim-top);
--_trim-bottom: var(--h6-trim-bottom);
--_margin-top: var(--h6-margin-top);
--_margin-bottom: var(--h6-margin-bottom);
}
:is(h1, h2, h3, h4, h5, h6, p, [class*="text-style-"]:not(:has(h1, h2, h3, h4, h5, h6, p))) {
display: flow-root;
&::before {
content: "";
display: table;
margin-bottom: calc(-0.5lh + var(--_trim-top));
}
&::after {
content: "";
display: table;
margin-bottom: calc(-0.5lh + var(--_trim-bottom));
}
}
.text {
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 8 3 3;
}
}
@layer patterns {
.heading:has(+ .text) {
margin-bottom: var(--_margin-bottom);
}
.heading,
.text {
margin-top: var(--_margin-top);
max-width: var(--_mw, none);
}
.heading + .text {
margin-top: 0;
}
.section {
padding-top: var(--section-space-medium);
padding-bottom: var(--section-space-medium);
background-color: var(--background);
color: var(--text);
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
position: relative;
}
.container {
width: var(--site-width);
max-width: var(--max-width-main);
display: flex;
flex-direction: column;
justify-content: center;
align-items: var(--_alignment, start);
gap: var(--space-8);
position: relative;
margin-inline: auto;
& > [class] {
margin-top: 0;
margin-bottom: 0;
}
}
.button-wrapper {
margin-top: var(--space-6);
display: flex;
flex-flow: wrap;
align-items: center;
justify-content: var(--_alignment, start);
grid-column-gap: var(--space-2);
grid-row-gap: var(--space-2);
}
.image {
background-color: var(--background-skeleton);
&.densities {
width: auto;
max-width: 100%;
}
&.transparent {
background-color: transparent;
object-fit: contain;
}
}
.video {
background-color: var(--background-skeleton);
height: auto;
&.transparent {
background-color: transparent;
object-fit: contain;
}
}
.section > :where(:not(.container)) {
pointer-events: none;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.flex-horizontal-wrap {
display: flex;
flex-flow: wrap;
align-content: center;
align-items: center;
justify-content: var(--_alignment, start);
}
.flex-horizontal-nowrap {
display: flex;
flex-flow: row;
align-content: center;
align-items: center;
justify-content: var(--_alignment, start);
}
.flex-vertical-wrap {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: var(--_alignment, start);
}
.flex-vertical-nowrap {
display: flex;
flex-flow: column;
justify-content: center;
align-items: var(--_alignment, start);
}
.grid-autofit {
--_gap-size: var(--site-gutter);
--_column-count: 12;
display: grid;
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
grid-template-rows: auto;
grid-auto-columns: minmax(0, 1fr);
grid-template-columns: repeat(auto-fit, minmax(min(max(8rem, (100% - ((var(--_column-count) - 1) * var(--_gap-size))) / var(--_column-count)), 100%), 1fr));
}
.grid-autofill {
--_gap-size: var(--site-gutter);
--_column-count: 12;
display: grid;
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
grid-template-rows: auto;
grid-auto-columns: minmax(0, 1fr);
grid-template-columns: repeat(auto-fill, minmax(min(max(8rem, (100% - ((var(--_column-count) - 1) * var(--_gap-size))) / var(--_column-count)), 100%), 1fr));
}
:is(.margin-trim, .heading, .text, .layout > *) {
& > :first-child {
margin-top: 0;
}
& > :last-child {
margin-bottom: 0;
}
}
[class*="line-clamp"] {
display: -webkit-box;
line-clamp: 1;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cover-absolute {
width: 100%;
height: 100%;
position: absolute;
inset: 0%;
}
.heading-accent strong {
color: var(--heading-accent);
font-weight: inherit;
}
.display-contents {
display: contents;
align-items: inherit;
justify-content: inherit;
text-align: inherit;
}
.field {
display: flex;
flex-direction: column;
gap: var(--space-2);
width: 100%;
}
.field-label {
display: flex;
}
.field-star {
color: var(--text-2);
}
.field-control {
--_field-pad-block: 0.75em;
--_field-pad-inline: 1em;
width: 100%;
min-height: calc(1lh + var(--_field-pad-block) * 2 + var(--border-width) * 2);
padding: var(--_field-pad-block) var(--_field-pad-inline);
background-color: var(--background-2);
color: inherit;
border: var(--border-width) solid transparent;
border-radius: var(--radius-small);
transition:
background-color var(--hover-duration) var(--hover-ease),
border-color var(--hover-duration) var(--hover-ease);
&::placeholder {
color: var(--text-2);
}
@media (hover: hover) {
&:hover:not(:disabled) {
background-color: var(--background-3);
}
}
&:focus-visible {
border-color: var(--text);
outline-offset: var(--focus-offset-inner);
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
}
}
@layer utilities {
.flex-grow {
flex: 1;
}
.flex-shrink {
flex: 0 auto;
}
.flex-noshrink {
flex: none;
}
.padding-0 {
padding: 0;
}
.padding-1 {
padding: var(--space-1);
}
.padding-2 {
padding: var(--space-2);
}
.padding-3 {
padding: var(--space-3);
}
.padding-4 {
padding: var(--space-4);
}
.padding-5 {
padding: var(--space-5);
}
.padding-6 {
padding: var(--space-6);
}
.padding-7 {
padding: var(--space-7);
}
.padding-8 {
padding: var(--space-8);
}
.padding-sitemargin {
padding: var(--site-margin);
}
.padding-gutter {
padding: var(--site-gutter);
}
.padding-small {
padding: var(--section-space-small);
}
.padding-medium {
padding: var(--section-space-medium);
}
.padding-large {
padding: var(--section-space-large);
}
.padding-block-0 {
padding-block: 0;
}
.padding-block-1 {
padding-block: var(--space-1);
}
.padding-block-2 {
padding-block: var(--space-2);
}
.padding-block-3 {
padding-block: var(--space-3);
}
.padding-block-4 {
padding-block: var(--space-4);
}
.padding-block-5 {
padding-block: var(--space-5);
}
.padding-block-6 {
padding-block: var(--space-6);
}
.padding-block-7 {
padding-block: var(--space-7);
}
.padding-block-8 {
padding-block: var(--space-8);
}
.padding-block-sitemargin {
padding-block: var(--site-margin);
}
.padding-block-gutter {
padding-block: var(--site-gutter);
}
.padding-block-small {
padding-block: var(--section-space-small);
}
.padding-block-medium {
padding-block: var(--section-space-medium);
}
.padding-block-large {
padding-block: var(--section-space-large);
}
.padding-inline-0 {
padding-inline: 0;
}
.padding-inline-1 {
padding-inline: var(--space-1);
}
.padding-inline-2 {
padding-inline: var(--space-2);
}
.padding-inline-3 {
padding-inline: var(--space-3);
}
.padding-inline-4 {
padding-inline: var(--space-4);
}
.padding-inline-5 {
padding-inline: var(--space-5);
}
.padding-inline-6 {
padding-inline: var(--space-6);
}
.padding-inline-7 {
padding-inline: var(--space-7);
}
.padding-inline-8 {
padding-inline: var(--space-8);
}
.padding-inline-sitemargin {
padding-inline: var(--site-margin);
}
.padding-inline-gutter {
padding-inline: var(--site-gutter);
}
.padding-top-0 {
padding-top: 0;
}
.padding-top-1 {
padding-top: var(--space-1);
}
.padding-top-2 {
padding-top: var(--space-2);
}
.padding-top-3 {
padding-top: var(--space-3);
}
.padding-top-4 {
padding-top: var(--space-4);
}
.padding-top-5 {
padding-top: var(--space-5);
}
.padding-top-6 {
padding-top: var(--space-6);
}
.padding-top-7 {
padding-top: var(--space-7);
}
.padding-top-8 {
padding-top: var(--space-8);
}
.padding-top-sitemargin {
padding-top: var(--site-margin);
}
.padding-top-gutter {
padding-top: var(--site-gutter);
}
.padding-top-small {
padding-top: var(--section-space-small);
}
.padding-top-medium {
padding-top: var(--section-space-medium);
}
.padding-top-large {
padding-top: var(--section-space-large);
}
.padding-top-navoverlap {
padding-top: var(--section-space-nav-overlap);
}
.padding-bottom-0 {
padding-bottom: 0;
}
.padding-bottom-1 {
padding-bottom: var(--space-1);
}
.padding-bottom-2 {
padding-bottom: var(--space-2);
}
.padding-bottom-3 {
padding-bottom: var(--space-3);
}
.padding-bottom-4 {
padding-bottom: var(--space-4);
}
.padding-bottom-5 {
padding-bottom: var(--space-5);
}
.padding-bottom-6 {
padding-bottom: var(--space-6);
}
.padding-bottom-7 {
padding-bottom: var(--space-7);
}
.padding-bottom-8 {
padding-bottom: var(--space-8);
}
.padding-bottom-sitemargin {
padding-bottom: var(--site-margin);
}
.padding-bottom-gutter {
padding-bottom: var(--site-gutter);
}
.padding-bottom-small {
padding-bottom: var(--section-space-small);
}
.padding-bottom-medium {
padding-bottom: var(--section-space-medium);
}
.padding-bottom-large {
padding-bottom: var(--section-space-large);
}
.padding-bottom-navoverlap {
padding-bottom: var(--section-space-nav-overlap);
}
.padding-left-0 {
padding-left: 0;
}
.padding-left-1 {
padding-left: var(--space-1);
}
.padding-left-2 {
padding-left: var(--space-2);
}
.padding-left-3 {
padding-left: var(--space-3);
}
.padding-left-4 {
padding-left: var(--space-4);
}
.padding-left-5 {
padding-left: var(--space-5);
}
.padding-left-6 {
padding-left: var(--space-6);
}
.padding-left-7 {
padding-left: var(--space-7);
}
.padding-left-8 {
padding-left: var(--space-8);
}
.padding-left-sitemargin {
padding-left: var(--site-margin);
}
.padding-left-gutter {
padding-left: var(--site-gutter);
}
.padding-right-0 {
padding-right: 0;
}
.padding-right-1 {
padding-right: var(--space-1);
}
.padding-right-2 {
padding-right: var(--space-2);
}
.padding-right-3 {
padding-right: var(--space-3);
}
.padding-right-4 {
padding-right: var(--space-4);
}
.padding-right-5 {
padding-right: var(--space-5);
}
.padding-right-6 {
padding-right: var(--space-6);
}
.padding-right-7 {
padding-right: var(--space-7);
}
.padding-right-8 {
padding-right: var(--space-8);
}
.padding-right-sitemargin {
padding-right: var(--site-margin);
}
.padding-right-gutter {
padding-right: var(--site-gutter);
}
.margin-top-auto {
margin-top: auto;
}
.margin-top-0 {
margin-top: 0;
}
.margin-top-1 {
margin-top: var(--space-1);
}
.margin-top-2 {
margin-top: var(--space-2);
}
.margin-top-3 {
margin-top: var(--space-3);
}
.margin-top-4 {
margin-top: var(--space-4);
}
.margin-top-5 {
margin-top: var(--space-5);
}
.margin-top-6 {
margin-top: var(--space-6);
}
.margin-top-7 {
margin-top: var(--space-7);
}
.margin-top-8 {
margin-top: var(--space-8);
}
.margin-top-gutter {
margin-top: var(--site-gutter);
}
.margin-top-text {
margin-top: var(--_margin-top);
}
.margin-bottom-auto {
margin-bottom: auto;
}
.margin-bottom-0 {
margin-bottom: 0;
}
.margin-bottom-1 {
margin-bottom: var(--space-1);
}
.margin-bottom-2 {
margin-bottom: var(--space-2);
}
.margin-bottom-3 {
margin-bottom: var(--space-3);
}
.margin-bottom-4 {
margin-bottom: var(--space-4);
}
.margin-bottom-5 {
margin-bottom: var(--space-5);
}
.margin-bottom-6 {
margin-bottom: var(--space-6);
}
.margin-bottom-7 {
margin-bottom: var(--space-7);
}
.margin-bottom-8 {
margin-bottom: var(--space-8);
}
.margin-bottom-gutter {
margin-bottom: var(--site-gutter);
}
.margin-bottom-text {
margin-bottom: var(--_margin-bottom);
}
.margin-block-auto {
margin-block: auto;
}
.margin-block-0 {
margin-block: 0;
}
.margin-block-1 {
margin-block: var(--space-1);
}
.margin-block-2 {
margin-block: var(--space-2);
}
.margin-block-3 {
margin-block: var(--space-3);
}
.margin-block-4 {
margin-block: var(--space-4);
}
.margin-block-5 {
margin-block: var(--space-5);
}
.margin-block-6 {
margin-block: var(--space-6);
}
.margin-block-7 {
margin-block: var(--space-7);
}
.margin-block-8 {
margin-block: var(--space-8);
}
.margin-block-gutter {
margin-block: var(--site-gutter);
}
.margin-block-text {
margin-block: var(--_margin-top) var(--_margin-bottom);
}
.margin-inline-auto {
margin-inline: auto;
}
.line-clamp-2 {
line-clamp: 2;
-webkit-line-clamp: 2;
}
.line-clamp-3 {
line-clamp: 3;
-webkit-line-clamp: 3;
}
.line-clamp-4 {
line-clamp: 4;
-webkit-line-clamp: 4;
}
.gap-inherit {
grid-column-gap: inherit;
grid-row-gap: inherit;
}
.gap-0 {
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: 0rem;
}
.gap-1 {
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-1);
}
.gap-2 {
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-2);
}
.gap-3 {
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-3);
}
.gap-4 {
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-4);
}
.gap-5 {
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-5);
}
.gap-6 {
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-6);
}
.gap-7 {
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-7);
}
.gap-8 {
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--space-8);
}
.gap-gutter {
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--site-gutter);
}
.gap-small {
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--section-space-small);
}
.gap-medium {
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--section-space-medium);
}
.gap-large {
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
--_gap-size: var(--section-space-large);
}
.gap-row-inherit {
grid-row-gap: inherit;
}
.gap-row-0 {
grid-row-gap: 0rem;
}
.gap-row-1 {
grid-row-gap: var(--space-1);
}
.gap-row-2 {
grid-row-gap: var(--space-2);
}
.gap-row-3 {
grid-row-gap: var(--space-3);
}
.gap-row-4 {
grid-row-gap: var(--space-4);
}
.gap-row-5 {
grid-row-gap: var(--space-5);
}
.gap-row-6 {
grid-row-gap: var(--space-6);
}
.gap-row-7 {
grid-row-gap: var(--space-7);
}
.gap-row-8 {
grid-row-gap: var(--space-8);
}
.gap-row-gutter {
grid-row-gap: var(--site-gutter);
}
.alignment-start {
--_alignment: start;
text-align: start;
}
.alignment-center {
--_alignment: center;
text-align: center;
}
.alignment-end {
--_alignment: end;
text-align: end;
}
.align-self-inherit {
align-self: inherit;
}
.align-self-start {
align-self: flex-start;
}
.align-self-center {
align-self: center;
}
.align-self-end {
align-self: flex-end;
}
.align-self-stretch {
align-self: stretch;
}
.align-items-stretch {
align-items: stretch;
}
.align-items-start {
align-items: flex-start;
}
.align-items-center {
align-items: center;
}
.align-items-end {
align-items: flex-end;
}
.align-items-inherit {
align-items: inherit;
}
.justify-content-start {
justify-content: flex-start;
}
.justify-content-center {
justify-content: center;
}
.justify-content-end {
justify-content: flex-end;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-around {
justify-content: space-around;
}
.justify-content-inherit {
justify-content: inherit;
}
.width-full {
width: 100%;
}
.width-auto {
width: auto;
}
.min-width-auto {
min-width: auto;
}
.height-full {
height: 100%;
}
.height-auto {
height: auto;
}
.cover {
width: 100%;
height: 100%;
}
.max-width-none {
max-width: none;
}
.max-width-small {
max-width: var(--max-width-small);
}
.max-width-full {
max-width: var(--max-width-full);
}
.min-height-screen {
min-height: 100svh;
}
.ratio-auto {
aspect-ratio: auto;
}
.ratio-1-1 {
aspect-ratio: 1;
}
.ratio-16-9 {
aspect-ratio: 16 / 9;
}
.ratio-3-2 {
aspect-ratio: 3 / 2;
}
.ratio-2-3 {
aspect-ratio: 2 / 3;
}
.ratio-2-1 {
aspect-ratio: 2;
}
.ratio-5-4 {
aspect-ratio: 5 / 4;
}
.ratio-4-5 {
aspect-ratio: 4 / 5;
}
.object-fit-cover {
object-fit: cover;
}
.object-fit-contain {
object-fit: contain;
}
.line-height-small {
line-height: var(--line-height-small);
}
.line-height-medium {
line-height: var(--line-height-medium);
}
.line-height-large {
line-height: var(--line-height-large);
}
.line-height-huge {
line-height: var(--line-height-huge);
}
.letter-spacing-tight {
letter-spacing: var(--letter-spacing-tight);
}
.letter-spacing-normal {
letter-spacing: var(--letter-spacing-normal);
}
.weight-regular {
font-family: var(--primary-family);
font-weight: var(--primary-regular);
}
.weight-medium {
font-family: var(--primary-family);
font-weight: var(--primary-medium);
}
.weight-bold {
font-family: var(--primary-family);
font-weight: var(--primary-bold);
}
.text-transform-none {
text-transform: none;
}
.text-transform-uppercase {
text-transform: uppercase;
}
.text-transform-capitalize {
text-transform: capitalize;
}
.text-transform-lowercase {
text-transform: lowercase;
}
.text-wrap-default {
text-wrap: wrap;
}
.text-wrap-balance {
text-wrap: balance;
}
.text-wrap-pretty {
text-wrap: pretty;
}
.color-inherit {
color: inherit;
}
.color-faded {
color: color-mix(in srgb, currentColor 70%, transparent);
}
.background-transparent {
background-color: transparent;
}
.background-1 {
background-color: var(--background);
}
.background-2 {
background-color: var(--background-2);
}
.background-skeleton {
background-color: var(--background-skeleton);
}
.radius-none {
border-radius: 0;
}
.radius-inherit {
border-radius: inherit;
}
.radius-small {
border-radius: var(--radius-small);
}
.radius-main {
border-radius: var(--radius-main);
}
.radius-round {
border-radius: var(--radius-round);
}
.display-block {
display: block;
}
.display-inline {
display: inline;
}
.display-inline-block {
display: inline-block;
}
.display-inline-flex {
display: inline-flex;
}
.display-inline-grid {
display: inline-grid;
}
.display-none {
display: none;
}
.overflow-visible {
overflow: visible;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-clip {
overflow: clip;
}
.overflow-x-auto {
overflow: auto clip;
}
.overflow-y-auto {
overflow: clip auto;
}
.overflow-hidden-left {
clip-path: polygon(0 0, calc(100% + 100vw) 0, calc(100% + 100vw) 100%, 0% 100%);
}
.position-static {
position: static;
}
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
}
.position-sticky {
position: sticky;
top: 0;
}
.position-fixed {
position: fixed;
}
.zindex-negative {
z-index: -1;
position: relative;
}
.zindex-0 {
z-index: 0;
position: relative;
}
.zindex-unset {
z-index: unset;
position: relative;
}
.zindex-1 {
z-index: 1;
position: relative;
}
.zindex-2 {
z-index: 2;
position: relative;
}
.zindex-3 {
z-index: 3;
position: relative;
}
.pointer-on {
pointer-events: auto;
}
.pointer-off {
pointer-events: none;
}
.order-first {
order: -1;
}
.order-last {
order: 1;
}
.sr-only {
white-space: nowrap;
clip: rect(0, 0, 0, 0);
border-width: 0;
width: 1px;
height: 1px;
margin-inline: auto;
padding: 0;
position: absolute;
inset: 0% 0% auto;
overflow: hidden;
}
}
@layer utilities {
.hyphens-on {
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 8 3 3;
overflow-wrap: break-word;
}
.hyphens-off {
-webkit-hyphens: manual;
hyphens: manual;
}
}
@layer components {
.layout {
--_visual-ratio: 3 / 2;
--_alignment: start;
--_column-count: 1;
width: 100%;
display: flex;
flex-direction: column;
column-gap: var(--site-gutter);
row-gap: var(--space-8);
align-items: stretch;
grid-template-columns: repeat(var(--_column-count), minmax(0, 1fr));
& > * {
display: flex;
flex-direction: column;
align-items: var(--_alignment, start);
text-align: var(--_alignment, start);
width: 100%;
max-width: 100%;
}
& > :first-child {
align-self: center;
}
& > :last-child:not(:has(> :not(.image, .video, .overlay))) {
position: relative;
border-radius: var(--radius-small);
aspect-ratio: var(--_visual-ratio);
& > :is(.image, .video, .overlay) {
border-radius: inherit;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
}
&.centered {
--_alignment: center;
}
&.auto-width {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: end;
row-gap: var(--space-6);
& > * {
width: auto;
align-self: unset;
}
& > :last-child {
min-width: min(4rem, 100%);
}
}
&.columns {
display: grid;
column-gap: var(--section-space-small);
@media (width >= 64rem) {
--_column-count: 2;
&.reversed {
& > :last-child {
order: -1;
}
}
}
}
&.sticky-content {
--_visual-ratio: 1 / 1;
display: grid;
@media (width >= 64rem) {
--_column-count: 2;
& > :first-child {
align-self: start;
position: sticky;
top: calc(var(--site-margin) + var(--nav-height));
}
}
}
&.sticky-visual {
--_visual-ratio: 1 / 1;
display: grid;
@media (width >= 64rem) {
--_column-count: 2;
& > :first-child {
align-self: start;
}
& > :last-child {
align-self: start;
position: sticky;
top: calc(var(--site-margin) + var(--nav-height));
max-height: calc(
100svh - var(--nav-height) - var(--site-margin) * 2
);
}
}
}
&.breakout {
display: grid;
width: 100vw;
flex-shrink: 0;
align-self: center;
column-gap: 0;
row-gap: 0;
& > :first-child {
margin-inline: auto;
width: var(--site-width);
padding-block: var(--section-space-medium);
}
& > :last-child {
border-radius: 0;
}
@media (width >= 64rem) {
--_column-count: 2;
& > :first-child {
max-width: calc(var(--max-width-main) / 2);
}
& > :last-child {
border-top-left-radius: var(--radius-small);
border-bottom-left-radius: var(--radius-small);
}
&.reversed {
& > :last-child {
order: -1;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: var(--radius-small);
border-bottom-right-radius: var(--radius-small);
}
}
}
}
&.contain {
display: grid;
column-gap: 0;
row-gap: 0;
background-color: var(--background-2);
border-radius: var(--radius-main);
position: relative;
overflow: clip;
& > :first-child {
padding: var(--space-6);
}
& > :last-child {
border-radius: 0;
}
@media (width >= 64rem) {
--_column-count: 2;
&.reversed {
& > :last-child {
order: -1;
}
}
}
}
&.card-layout {
border-radius: var(--radius-main);
position: relative;
overflow: clip;
min-height: 26rem;
justify-content: center;
& > :first-child {
padding: var(--space-6);
}
& > :first-child {
padding-block: var(--section-space-medium);
padding-inline: var(--space-5);
position: relative;
z-index: 1;
--_alignment: center;
}
& > :last-child {
position: absolute;
inset: 0;
border-radius: 0;
width: 100%;
height: 100%;
opacity: calc(var(--_media-opacity, 70) / 100);
pointer-events: none;
}
}
}
}
@layer components {
.grid {
--_cols: var(--_cols-xs);
--_cols-xs: 1;
--_cols-sm: var(--_cols-xs);
--_cols-md: var(--_cols-sm);
--_cols-lg: var(--_cols-md);
--_gap-size: var(--site-gutter);
width: 100%;
display: grid;
grid-column-gap: var(--_gap-size);
grid-row-gap: var(--_gap-size);
grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
@media (width >= 30rem) {
--_cols: var(--_cols-sm);
}
@media (width >= 48rem) {
--_cols: var(--_cols-md);
}
@media (width >= 64rem) {
--_cols: var(--_cols-lg);
}
&:is(.autofit, .autofill) {
--_max-cols: 12;
--_min-col-width: 12;
--_fit: (100% - (var(--_max-cols) - 1) * var(--_gap-size)) /
var(--_max-cols);
--_track: min(
max(calc(var(--_min-col-width) * 1rem), var(--_fit)),
100%
);
}
&.autofit {
grid-template-columns: repeat(auto-fit, minmax(var(--_track), 1fr));
}
&.autofill {
grid-template-columns: repeat(auto-fill, minmax(var(--_track), 1fr));
}
}
}
@layer components {
.eyebrow_wrap {
display: inline-flex;
align-items: center;
justify-content: var(--_alignment, start);
gap: var(--space-2);
&.tag {
background-color: var(--text);
color: var(--background);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-small);
}
.eyebrow_marker {
flex: none;
width: var(--border-width);
height: 0.75rem;
background-color: currentcolor;
}
}
}
@layer components {
.rich-text {
& :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, pre, table) {
margin-top: var(--_margin-top);
margin-bottom: var(--_margin-bottom);
}
& > :first-child,
& :is(blockquote, li) > :first-child:not(:is(ul, ol)) {
margin-top: 0;
}
& > :last-child,
& :is(blockquote, li) > :last-child {
margin-bottom: 0;
}
& :is(ul, ol) {
padding-left: 1.5em;
}
& ul {
list-style-type: disc;
}
& ul ul {
list-style-type: circle;
}
& ul ul ul {
list-style-type: square;
}
& ol {
list-style-type: decimal;
}
& li::marker {
color: color-mix(in lab, currentcolor 60%, transparent);
}
& li + li {
margin-top: var(--space-2);
}
& li > :is(ul, ol) {
margin-block: var(--space-2);
}
& blockquote {
padding-left: var(--space-4);
border-left: var(--border-width) solid var(--border);
}
}
}
@layer components {
.button_wrap {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.5em;
padding: 0.75em 1.5em;
background-color: var(--button-background);
color: var(--button-text);
border: var(--border-width) solid var(--button-border);
border-radius: 0.5em;
line-height: 1.2;
text-decoration: none;
text-align: center;
transition:
background-color var(--hover-duration) var(--hover-ease),
color var(--hover-duration) var(--hover-ease),
border-color var(--hover-duration) var(--hover-ease);
@media (hover: hover) {
&:hover:not(:disabled) {
background-color: var(--button-background-hover);
color: var(--button-text-hover);
border-color: var(--button-border-hover);
}
}
&.secondary {
--button-background: var(--button-2-background);
--button-text: var(--button-2-text);
--button-border: var(--button-2-border);
--button-background-hover: var(--button-2-background-hover);
--button-text-hover: var(--button-2-text-hover);
--button-border-hover: var(--button-2-border-hover);
}
&.link {
--button-background: transparent;
--button-text: var(--link-text);
--button-border: var(--link-border);
--button-background-hover: transparent;
--button-text-hover: var(--link-text-hover);
--button-border-hover: var(--link-border);
padding: 0.4em 0;
border: 0;
border-bottom: var(--border-width) solid var(--button-border);
border-radius: 0;
background-image: linear-gradient(
var(--link-border-hover),
var(--link-border-hover)
);
background-repeat: no-repeat;
background-origin: border-box;
background-position: 100% 100%;
background-size: 0 var(--border-width);
transition:
background-size calc(var(--hover-duration) * 2) var(--hover-ease),
color var(--hover-duration) var(--hover-ease),
border-color var(--hover-duration) var(--hover-ease);
@media (hover: hover) {
&:hover:not(:disabled) {
background-position: 0 100%;
background-size: 100% var(--border-width);
}
}
}
&:is(.play, .close, .arrow) {
gap: 0;
padding: 0.75em;
border-radius: var(--radius-round);
}
&.back .button_mark {
rotate: 180deg;
}
&.play .button_pause {
display: none;
}
&.play[aria-pressed="true"] {
& .button_play {
display: none;
}
& .button_pause {
display: block;
}
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
}
}
@layer components {
.icon {
--_size: 1.5em;
flex: none;
display: block;
width: var(--_size);
height: auto;
aspect-ratio: 1 / 1;
max-width: 100%;
&.small {
--_size: 1em;
}
&.large {
--_size: 2em;
}
&.full-width {
width: 100%;
aspect-ratio: unset;
}
}
}
@layer components {
.nav_wrap {
position: sticky;
top: 0;
z-index: 100;
display: flex;
justify-content: center;
padding-inline: var(--site-margin);
background-color: var(--background);
color: var(--text);
border-bottom: var(--border-width) solid var(--border);
&.overlap {
position: fixed;
inset-inline: 0;
}
}
.nav_inner {
width: 100%;
max-width: var(--max-width-main);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0 var(--space-6);
}
.nav_logo,
.nav_toggle {
min-height: var(--nav-height);
}
.nav_logo {
display: flex;
align-items: center;
width: 6.5rem;
transition: opacity var(--hover-duration) var(--hover-ease);
@media (hover: hover) {
&:hover {
opacity: 0.6;
}
}
}
.nav_toggle {
--_icon-width: 1.5rem;
--_bar-gap: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
margin-right: calc((2.75rem - var(--_icon-width)) / -2);
color: inherit;
border-radius: var(--radius-small);
transition: opacity var(--hover-duration) var(--hover-ease);
@media (hover: hover) {
&:hover {
opacity: 0.6;
}
}
}
.nav_toggle_icon {
position: relative;
display: block;
width: var(--_icon-width);
height: calc(var(--_bar-gap) + var(--border-width));
&::before,
&::after {
content: "";
position: absolute;
inset-inline: 0;
height: var(--border-width);
background-color: currentcolor;
transition: transform var(--open-duration) var(--open-ease);
}
&::before {
top: 0;
}
&::after {
top: var(--_bar-gap);
}
}
.nav_wrap.open .nav_toggle_icon {
&::before {
transform: translateY(calc(var(--_bar-gap) / 2)) rotate(45deg);
}
&::after {
transform: translateY(calc(var(--_bar-gap) / -2)) rotate(-45deg);
}
}
.nav_menu {
position: absolute;
top: 100%;
inset-inline: 0;
display: grid;
grid-template-rows: 0fr;
visibility: hidden;
max-height: calc(100svh - var(--nav-height));
overflow-x: clip;
overflow-y: auto;
overscroll-behavior: contain;
background-color: var(--background);
border-bottom: var(--border-width) solid var(--border);
transition:
grid-template-rows var(--open-duration) var(--open-ease),
visibility var(--open-duration) var(--open-ease);
}
.nav_menu_inner {
overflow: hidden;
opacity: 0;
transition: opacity var(--open-duration) var(--open-ease);
}
.nav_wrap.open .nav_menu {
grid-template-rows: 1fr;
visibility: visible;
}
.nav_wrap.open .nav_menu_inner {
opacity: 1;
overflow-y: auto;
}
.nav_links {
display: flex;
flex-direction: column;
padding: var(--space-2) var(--site-margin) var(--space-4);
font-size: var(--text-main);
font-weight: var(--primary-medium);
& > li + li {
border-top: var(--border-width) solid var(--border);
}
}
.nav_link {
display: block;
padding-block: var(--space-3);
color: color-mix(in lab, currentcolor 60%, transparent);
text-decoration: none;
text-underline-offset: 0.4em;
text-decoration-thickness: var(--border-width);
transition: color var(--hover-duration) var(--hover-ease);
&[aria-current="page"] {
color: var(--text);
}
@media (hover: hover) {
&:hover {
color: var(--text);
}
}
}
@media (width >= 75rem) {
.nav_toggle {
display: none;
}
.nav_menu {
position: static;
display: block;
visibility: visible;
background-color: transparent;
border-bottom: 0;
}
.nav_menu_inner {
overflow: visible;
opacity: 1;
}
.nav_links {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
padding: 0;
gap: var(--space-4);
font-size: var(--text-small);
& > li + li {
border-top: 0;
}
}
.nav_link {
padding-block: 0;
&[aria-current="page"] {
text-decoration: underline;
}
}
}
}
@layer components {
.footer_wrap {
display: flex;
justify-content: center;
padding-block: var(--section-space-small);
padding-inline: var(--site-margin);
background-color: var(--background);
color: var(--text);
border-top: var(--border-width) solid var(--border);
}
.footer_inner {
width: 100%;
max-width: var(--max-width-main);
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.footer_top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4) var(--space-6);
}
.footer_logo {
display: block;
width: 7.5rem;
max-width: 100%;
transition: opacity var(--hover-duration) var(--hover-ease);
@media (hover: hover) {
&:hover {
opacity: 0.6;
}
}
}
.footer_links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
font-size: var(--text-small);
font-weight: var(--primary-medium);
}
.footer_link {
color: var(--text-2);
text-decoration: none;
transition: color var(--hover-duration) var(--hover-ease);
@media (hover: hover) {
&:hover {
color: var(--text);
}
}
}
.footer_bottom {
padding-top: var(--space-4);
border-top: var(--border-width) solid var(--border);
}
.footer_copyright {
color: var(--text-2);
}
}
@layer components {
.skip-link {
position: fixed;
top: var(--space-2);
inset-inline-start: var(--space-2);
z-index: 100;
translate: 0 calc(-100% - var(--space-2) * 2);
&:focus {
translate: 0 0;
}
}
}
@layer components {
.accordion_wrap {
width: 100%;
}
}
@layer components {
.accordion_item {
interpolate-size: allow-keywords;
border-bottom: var(--border-width) solid var(--border);
transition: border-color var(--hover-duration) var(--hover-ease);
@media (hover: hover) {
&:hover {
border-bottom-color: currentcolor;
}
}
}
.accordion_toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-block: var(--space-5);
list-style: none;
cursor: pointer;
&::-webkit-details-marker {
display: none;
}
}
.accordion_title {
margin-block: 0;
}
.accordion_icon {
rotate: 90deg;
transition: rotate var(--open-duration) var(--open-ease);
}
.accordion_item:is([open], .stacki-opened) .accordion_icon,
.stacki-designer .accordion_wrap.preview .accordion_icon {
rotate: -90deg;
}
.accordion_item::details-content {
block-size: 0;
overflow: hidden;
content-visibility: hidden;
transition:
block-size var(--open-duration) var(--open-ease),
content-visibility var(--open-duration) var(--open-ease) allow-discrete;
}
.accordion_item:is([open], .stacki-opened)::details-content,
.stacki-designer .accordion_wrap.preview .accordion_item::details-content {
block-size: auto;
content-visibility: visible;
}
.accordion_body {
padding-bottom: var(--space-5);
}
}
@layer components {
.card_wrap {
--_padding: var(--space-6);
--_min-height: 20rem;
--_visual-ratio: 3 / 2;
width: 100%;
display: flex;
flex-direction: column;
gap: var(--_padding);
position: relative;
background-color: var(--background-2);
border-radius: var(--radius-main);
overflow: clip;
&.cover {
min-height: var(--_min-height);
}
&.stacked {
background-color: transparent;
overflow: visible;
}
}
.card_visual {
position: relative;
width: 100%;
flex: none;
border-radius: inherit;
overflow: clip;
.stacked > & {
aspect-ratio: var(--_visual-ratio);
}
.cover > & {
position: absolute;
inset: 0;
height: 100%;
pointer-events: none;
}
> :is(.image, .video) {
width: 100%;
height: 100%;
}
}
.card_visual > :is(.image, .video) {
width: 100%;
height: 100%;
}
.card_content > .button-wrapper:last-child {
margin-top: auto;
padding-top: var(--space-6);
}
.card_content {
display: flex;
flex-direction: column;
align-items: var(--_alignment, start);
text-align: var(--_alignment, start);
flex-grow: 1;
width: 100%;
max-width: 100%;
padding: var(--_padding);
.cover > & {
z-index: 1;
}
.stacked > & {
padding-inline: 0;
padding-top: 0;
}
}
.card_wrap:has(.button_wrap) {
.button_wrap::after {
content: "";
position: absolute;
inset: 0;
}
.card_content a:not(.button_wrap) {
position: relative;
z-index: 1;
}
.image {
transition: scale calc(var(--hover-duration) * 2) var(--hover-ease);
}
@media (hover: hover) {
&:hover .image {
scale: 1.04;
}
}
}
}
@layer components {
.form-select_control {
position: relative;
display: block;
}
.form-select_field {
appearance: none;
padding-inline-end: 3em;
&:has(option[value=""]:checked) {
color: var(--text-2);
}
}
.form-select_mark {
position: absolute;
inset-inline-end: 1em;
top: 50%;
translate: 0 -50%;
rotate: 90deg;
pointer-events: none;
color: var(--text-2);
}
@supports (appearance: base-select) {
.form-select_field,
.form-select_field::picker(select) {
appearance: base-select;
}
.form-select_field::picker-icon {
display: none;
}
.form-select_field {
display: flex;
align-items: center;
&::before,
&::after {
content: none;
}
}
.form-select_mark {
transition: rotate var(--open-duration) var(--open-ease);
}
.form-select_field:open ~ .form-select_mark {
rotate: -90deg;
}
.form-select_field:open {
background-color: var(--background-3);
border-end-start-radius: 0;
border-end-end-radius: 0;
}
.form-select_field::picker(select) {
margin-block: 0;
padding: var(--space-1);
max-height: min(18rem, calc(100dvh - 6rem));
position-try-order: normal;
overscroll-behavior: contain;
background-color: var(--background-3);
border: 0;
border-radius: var(--radius-small);
border-start-start-radius: 0;
border-start-end-radius: 0;
opacity: 0;
scale: 0.98;
transition:
opacity var(--open-duration) var(--open-ease),
scale var(--open-duration) var(--open-ease),
overlay var(--open-duration) var(--open-ease) allow-discrete,
display var(--open-duration) var(--open-ease) allow-discrete;
}
.form-select_field:open::picker(select) {
opacity: 1;
scale: 1;
}
@starting-style {
.form-select_field:open::picker(select) {
opacity: 0;
scale: 0.98;
}
}
.form-select_field option {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-2);
font-size: var(--text-small);
line-height: var(--line-height-large);
color: var(--text);
background-color: transparent;
border-radius: var(--radius-small);
cursor: pointer;
transition: background-color var(--hover-duration) var(--hover-ease);
&:hover,
&:focus {
background-color: var(--background-2);
outline: 0;
}
}
.form-select_field option[hidden] {
display: none;
}
.form-select_field option::checkmark {
order: 1;
margin-inline-start: auto;
color: var(--text-2);
}
}
}
@layer components {
.nav_wrap {
border-bottom: 0;
@media (width >= 75rem) {
position: relative;
}
}
.nav_logo {
width: clamp(8rem, 4.79rem + 16.07vw, 12.5rem);
}
.nav_link {
color: var(--text);
&[aria-current="page"] {
color: var(--accent-500);
font-weight: var(--primary-bold);
text-decoration: none;
}
@media (hover: hover) {
&:hover {
color: var(--brand-500);
}
}
}
@media (width >= 75rem) {
.nav_links {
gap: var(--space-7);
font-size: var(--h6);
font-weight: var(--primary-regular);
}
}
.footer_wrap {
border-top: 0;
}
.footer_inner {
gap: var(--section-space-medium);
}
.footer_top {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: var(--space-8) var(--site-gutter);
& > * {
min-width: 0;
}
& > .footer_brand {
flex: 1.1 1 22.5rem;
}
& > nav {
flex: 1 1 16rem;
}
& > .footer_contact {
flex: none;
}
}
.footer_brand,
.footer_contact {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-6);
}
.footer_logo {
width: 22.5rem;
}
.footer_links {
margin-block: calc(-0.5lh + var(--primary-trim-top)) calc(-0.5lh + var(--primary-trim-bottom));
flex-direction: column;
align-items: start;
gap: 0;
font-size: var(--h3);
font-weight: var(--primary-regular);
line-height: var(--line-height-huge);
}
.footer_link {
display: inline-block;
color: var(--text);
@media (hover: hover) {
&:hover {
color: var(--brand-500);
}
}
}
.footer_address {
font-style: normal;
line-height: var(--line-height-huge);
& a {
text-decoration: none;
}
}
.footer_bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-4);
padding-top: var(--space-6);
border-top-color: color-mix(in lab, var(--text) 40%, transparent);
}
.footer_legal {
display: flex;
gap: var(--space-4);
}
.button_wrap {
border-radius: var(--radius-round);
font-weight: var(--primary-bold);
}
.eyebrow_wrap.rule {
display: flex;
width: 100%;
padding-top: var(--space-4);
border-top: var(--border-width) solid var(--border);
& .eyebrow_text {
font-family: var(--secondary-family);
--_trim-top: var(--secondary-trim-top);
--_trim-bottom: var(--secondary-trim-bottom);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-2);
}
}
}
@layer components {
.field-control {
border-color: color-mix(in lab, var(--text) 18%, transparent);
@media (hover: hover) {
&:hover:not(:disabled) {
border-color: color-mix(in lab, var(--text) 45%, transparent);
}
}
&:focus-visible {
border-color: var(--text);
}
}
.form-select_field {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@layer components {
:is(.text, .rich-text, .text-style-main, .text-style-small, .text-style-large, .text-style-special):not([class*="text-style-h"], .text-style-display) {
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
:is(strong, b, [class*="weight-bold"][class]) {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
@layer components {
[class].reveal {
opacity: 0;
translate: 0 var(--space-6);
transition: opacity 700ms ease-out, translate 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.grid > .reveal:nth-child(2) { transition-delay: 100ms }
.grid > .reveal:nth-child(3) { transition-delay: 200ms }
.grid > .reveal:nth-child(n + 4) { transition-delay: 300ms }
[class].reveal.is-visible {
opacity: 1;
translate: none;
}
}
@layer components {
.hero-main_wrap {
position: relative;
background-color: var(--background); 
color: var(--text);
}
.hero-main_stage {
position: relative;
height: 36rem;
@media (width >= 48rem) {
height: clamp(32rem, 49.7vw, 60rem);
margin-right: calc((100% - min(var(--site-width), var(--max-width-main))) / 2);
}
& .image {
position: absolute;
inset: 0;
height: 100%;
}
&::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(12deg, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0));
mix-blend-mode: normal; 
pointer-events: none;
}
}
.hero-main_content {
position: absolute;
inset-inline: 0;
bottom: var(--section-space-small);
z-index: 1;
}
.hero-main_stage.ratio-sm {
--_focus-sm: 50% 50%;
&.focus-sm-right {
--_focus-sm: 56% 50%;
}
@media (width < 48rem) {
height: auto;
aspect-ratio: 5 / 4;
& .image {
object-position: var(--_focus-sm);
}
}
}
.hero-main_stage .image.focus-right {
object-position: 70% 30%;
}
.hero-main_title {
max-width: 13em;
}
}
@layer components {
.hero-main_wrap.accent .hero-main_stage::before {
content: "";
position: absolute;
inset-inline: 0;
top: 100%;
height: 0.5rem;
background-color: var(--accent-500);
z-index: 1;
}
}
@layer components {
.intro-main_text {
--_mw: 56ch;
-webkit-hyphens: manual;
hyphens: manual;
}
}
@layer components {
.service-main_wrap > .container {
container-type: inline-size;
}
.service-main_grid {
--_cols: 1;
@container (width >= 57rem) {
--_cols: 3;
}
}
@container (width < 57rem) {
.service-main_grid .service-card_wrap {
min-height: 0;
gap: var(--space-4); 
}
.service-main_grid .service-card_break {
width: auto;
}
.service-main_grid .service-card_title br {
display: none;
}
}
.service-card_wrap {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-8);
min-height: 30.75rem;
padding: var(--space-6);
text-decoration: none;
transition: translate var(--hover-duration) var(--hover-ease);
@media (hover: hover) {
&:hover {
translate: 0 -0.25rem;
}
}
}
.service-card_wrap.wide {
width: 100%; 
min-height: 0;
margin-bottom: var(--space-8);
background-image:
linear-gradient(color-mix(in srgb, var(--brand-500) 90%, transparent)),
url("../img/waermepumpe-bg.webp?v=1791809532");
background-size: cover;
background-position: center;
& .service-card_text {
max-width: 45ch;
}
}
.service-card_title {
width: 100%;
-webkit-hyphens: manual;
hyphens: manual;
padding-bottom: var(--space-4);
border-bottom: var(--border-width) solid currentcolor;
}
.service-card_break {
display: inline-block;
width: min-content;
-webkit-hyphens: manual;
hyphens: manual;
overflow-wrap: normal; 
}
.service-card_footer {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--space-4);
}
.service-card_text {
flex: 1 1 22ch;
max-width: 26ch;
}
.service-card_arrow {
display: grid;
place-items: center;
flex: none;
width: 2.5rem;
margin-left: auto;
height: 2.5rem;
background-color: color-mix(in lab, var(--light-100) 35%, transparent);
transition:
background-color var(--hover-duration) var(--hover-ease),
color var(--hover-duration) var(--hover-ease);
.service-card_wrap:hover & {
background-color: var(--light-100);
color: var(--background);
}
}
}
[data-theme="bestand"] { --brand-500: var(--orange-500); --brand-text: var(--orange-text); }
[data-theme="sanierung"] { --brand-500: var(--petrol-500); --brand-text: var(--petrol-text); }
[data-theme="neubau"] { --brand-500: var(--violet-500); --brand-text: var(--violet-text); }
[data-accent="bestand"] { --accent-500: var(--orange-500); --accent-text: var(--orange-text); }
[data-accent="sanierung"] { --accent-500: var(--petrol-500); --accent-text: var(--petrol-text); }
[data-accent="neubau"] { --accent-500: var(--violet-500); --accent-text: var(--violet-text); }
@layer components {
.about-main_wrap {
display: flex;
flex-wrap: wrap;
gap: var(--site-gutter);
width: 100%;
& > * {
min-width: 0;
flex: 13 1 26rem;
}
& > .about-main_visual {
flex: 6 1 12rem;
}
}
.about-main_visual .image {
aspect-ratio: 520 / 672; 
}
.about-main_visual.original .image {
aspect-ratio: auto;
}
.about-main_visual.original {
max-width: 28.125rem;
}
.about-main_caption {
margin-top: var(--space-5);
}
.about-main_text {
max-width: 24em;
margin-top: var(--section-space-large);
margin-left: auto;
}
}
@layer components {
.reasons-main_wrap {
--text: var(--light-100);
background-image:
linear-gradient(color-mix(in srgb, var(--brand-500) 90%, transparent)),
url("../img/waermepumpe-bg.webp?v=1791809532");
background-size: cover;
background-position: center;
}
.reasons-main_title {
--_mw: 24ch;
}
.reasons-main_wrap > .container {
container-type: inline-size;
}
.reasons-main_grid {
--_cols: 1;
@container (width >= 28rem) {
--_cols: 2;
}
@container (width >= 70rem) {
--_cols: 4;
}
}
.reasons-main_grid.three {
--_cols: 1;
@container (width >= 57rem) {
--_cols: 3;
}
}
.reasons-main_wrap .eyebrow_wrap.rule {
border-top-color: var(--text);
& .eyebrow_text {
color: var(--text);
}
}
.reason-item_wrap {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
row-gap: var(--space-3);
padding: var(--space-6);
background-color: var(--green-600);
}
.reason-item_head {
display: flex;
align-items: start;
gap: var(--space-3);
& .heading {
margin-top: 0;
}
}
.reason-item_mark {
display: block;
flex: none;
width: 1.5rem;
height: 1.5rem;
color: var(--light-100);
& svg {
width: 100%;
height: 100%;
}
}
.reasons-main_grid.rule {
& .reason-item_wrap {
row-gap: var(--space-6);
}
& .reason-item_mark {
display: none;
}
& .reason-item_head {
padding-bottom: var(--space-4);
border-bottom: var(--border-width) solid currentcolor;
}
}
}
@layer components {
.cta-main_wrap {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: var(--site-gutter);
width: 100%;
padding: var(--space-7);
border-radius: var(--radius-main);
& > * {
min-width: 0;
flex: 5 1 30rem;
}
& > .cta-main_visual {
flex: 3 1 18rem;
}
}
.cta-main_visual .image {
aspect-ratio: auto; 
}
.cta-main_visual.wide .image {
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: 50% 22%;
}
.cta-main_phone {
display: flex;
flex-direction: column;
gap: var(--space-3);
text-decoration: none;
}
.cta-main_text {
--_mw: 42ch;
}
}
@layer components {
.career-main_wrap {
display: flex;
flex-wrap: wrap-reverse;
align-items: center;
gap: var(--site-gutter);
width: 100%;
& > * {
min-width: 0;
}
}
.career-main_content {
flex: 8 1 24rem;
}
.career-main_visual {
flex: 5 1 15rem;
max-width: max(26rem, 40%);
& .image {
aspect-ratio: 2 / 3;
}
}
.career-main_text {
--_mw: 55ch;
}
}
@layer components {
.facts-main_head {
gap: var(--space-6) var(--site-gutter);
align-items: end;
&.autofit {
--_max-cols: 2;
--_min-col-width: 26;
}
}
.facts-main_head > * {
margin-top: 0;
}
.facts-main_title {
--_mw: 20ch;
}
.facts-main_list {
width: 100%;
}
.fact-item_wrap {
gap: var(--space-5) var(--site-gutter);
padding-block: var(--space-7);
border-bottom: var(--border-width) solid var(--border);
&.autofit {
--_max-cols: 2;
--_min-col-width: 26;
}
}
.fact-item_tag {
display: block;
width: fit-content;
--_tag-gap-min: var(--space-3-min);
--_tag-gap-max: var(--space-4-max);
margin-bottom: clamp(var(--_tag-gap-min) / 16 * 1rem, ((var(--_tag-gap-min) - ((var(--_tag-gap-max) - var(--_tag-gap-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--_tag-gap-max) - var(--_tag-gap-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--_tag-gap-max) / 16 * 1rem);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-small);
font-family: var(--secondary-family);
--_trim-top: var(--secondary-trim-top);
--_trim-bottom: var(--secondary-trim-bottom);
text-transform: uppercase;
letter-spacing: 0.03em;
background-color: var(--light-300);
color: var(--dark-900);
&.fact {
background-color: var(--brand-500);
color: var(--dark-900);
}
}
.fact-item_tag + * {
margin-top: 0;
}
.fact-item_truth {
--_mw: 48ch;
}
}
@layer components {
.step-item_head {
flex-direction: column;
gap: var(--space-3);
& .heading {
hyphens: auto;
}
}
.step-item_num {
font-family: var(--secondary-family);
--_trim-top: var(--secondary-trim-top);
--_trim-bottom: var(--secondary-trim-bottom);
letter-spacing: 0.03em;
}
}
@layer components {
.care-main_head {
gap: var(--space-6) var(--site-gutter);
&.autofit {
--_max-cols: 2;
--_min-col-width: 26;
}
}
.care-main_head > * {
margin-top: 0;
}
.care-main_title {
--_mw: 16ch;
}
.care-main_visual .image {
aspect-ratio: auto;
}
.care-main_panels {
display: flex;
flex-wrap: wrap;
gap: var(--site-gutter);
width: 100%;
& > * {
min-width: 0;
flex: 1 1 18rem;
}
& > :first-child {
flex: 2 1 36rem;
}
}
.care-main_panel {
padding: var(--space-7);
border-radius: var(--radius-main);
}
.check-list_wrap {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5) var(--site-gutter);
margin-top: var(--space-6);
&.two.autofit {
--_max-cols: 2;
--_min-col-width: 14;
}
}
.check-list_item {
display: flex;
align-items: start;
gap: var(--space-3);
& .text {
margin-block: 0;
}
}
.check-list_mark {
flex: none;
width: 1.5rem;
height: 1.5rem;
color: var(--brand-500);
& svg {
width: 100%;
height: 100%;
}
}
.check-list_wrap.fail .check-list_mark {
color: var(--red-500);
}
.check-list_wrap.accent .check-list_mark {
color: var(--accent-500);
}
}
@layer components {
.faq-main_layout {
display: flex;
flex-wrap: wrap;
gap: var(--space-8) var(--site-gutter);
width: 100%;
& > * {
min-width: 0;
}
}
.faq-main_aside {
flex: 5 1 22.5rem;
}
.faq-main_layout > .accordion_wrap {
flex: 7 1 31.5rem;
}
.faq-main_sticky {
position: sticky;
top: var(--space-8);
}
.faq-main_text {
--_mw: 40ch;
}
.faq-main_wrap .accordion_wrap {
border-top: var(--border-width) solid var(--border);
}
.faq-main_wrap .accordion_icon {
width: 1rem;
height: 1.0625rem;
}
}
@layer components {
.projects-main_head {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--space-4) var(--site-gutter);
width: 100%;
}
.projects-main_head > * {
margin-top: 0;
}
.project-card_placeholder {
display: grid;
place-items: end start;
width: 100%;
height: 100%;
padding: var(--space-5);
background-color: var(--background-2);
color: var(--text-2);
}
.placeholder-note {
display: inline-block;
padding: var(--space-1) var(--space-3);
border: var(--border-width) dashed var(--border);
border-radius: var(--radius-small);
color: var(--text-2);
}
.project-card_grid {
row-gap: var(--space-8);
&.autofit {
--_max-cols: 2;
--_min-col-width: 22;
}
}
.project-card_pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
overflow: visible;
.stacked > & {
aspect-ratio: auto;
}
& > .image {
aspect-ratio: 2 / 3;
height: auto;
object-fit: cover;
border-radius: var(--radius-main);
}
& > .image:first-child {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
& > .image:last-child {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
}
}
@layer components {
.testimonial-main_wrap {
display: flex;
flex-wrap: wrap;
gap: var(--space-6) var(--site-gutter);
width: 100%;
& > .testimonial-main_side {
flex: 5 1 22.5rem;
}
& > .testimonial-main_body {
flex: 7 1 31.5rem;
}
}
.testimonial-main_caption {
margin-top: var(--space-5);
}
.testimonial-main_side {
display: flex;
flex-direction: column;
align-items: start;
justify-content: space-between;
gap: var(--space-5);
}
.testimonial-main_controls {
display: flex;
align-items: center;
gap: var(--space-3);
}
.testimonial-main_count {
min-width: 4ch;
text-align: center;
font-family: var(--secondary-family);
color: var(--text-2);
}
.testimonial-main_arrow {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
padding: 0;
border: var(--border-width) solid var(--button-2-border);
border-radius: 100vw;
background: transparent;
color: var(--text);
cursor: pointer;
transition:
background-color var(--hover-duration) var(--hover-ease),
border-color var(--hover-duration) var(--hover-ease),
color var(--hover-duration) var(--hover-ease);
& .icon {
width: 1rem;
height: 1rem;
}
&.prev .icon {
scale: -1 1;
}
&:disabled {
opacity: 0.35;
cursor: default;
}
@media (hover: hover) {
&:hover:not(:disabled) {
background-color: var(--brand-500);
border-color: var(--brand-500);
color: var(--dark-900);
}
}
&:focus-visible {
outline: var(--focus-width) solid var(--text);
outline-offset: var(--focus-offset);
}
}
.testimonial-main_body {
min-width: 0;
}
.testimonial-main_track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: var(--site-gutter);
overflow-x: auto;
overflow-y: hidden;
padding-block: var(--space-3);
margin-block: calc(var(--space-3) * -1);
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
@media (prefers-reduced-motion: reduce) {
scroll-behavior: auto;
}
}
.testimonial-main_slide {
scroll-snap-align: start;
}
.testimonial-main_wrap.centered {
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
max-width: 70rem;
margin-inline: auto;
text-align: center;
& > .testimonial-main_track {
width: 100%;
align-items: end;
text-align: start;
hyphens: manual;
& .text {
hyphens: manual;
}
}
}
}
@layer components {
.benefits-main_layout {
gap: var(--space-8) var(--site-gutter);
align-items: start;
&.autofit {
--_max-cols: 2;
--_min-col-width: 26;
}
& > * {
margin-top: 0;
}
}
.benefits-main_title {
--_mw: 16ch;
}
.benefits-main_text {
--_mw: 60ch;
}
.stat-list_wrap {
display: grid;
gap: var(--space-5);
margin-top: var(--space-7);
}
.stat-list_item {
display: grid;
gap: var(--space-2);
padding-top: var(--space-4);
border-top: var(--border-width) solid var(--border);
& .text {
margin-block: 0;
}
}
}
@layer components {
.features-main_title {
--_mw: 22ch;
}
.feature-item_wrap {
display: flex;
flex-direction: column;
gap: var(--space-6);
& > * {
margin-block: 0;
}
& > .heading {
padding-bottom: var(--space-4);
border-bottom: var(--border-width) solid currentcolor;
}
}
}
@layer components {
.contact-main_layout {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--space-8) var(--site-gutter);
margin-top: var(--space-7);
justify-content: space-between;
container: contact-main / inline-size;
width: 100%;
}
.contact-main_body {
display: flex;
flex: 2 1 36rem;
flex-direction: column;
gap: var(--space-8);
min-width: 0;
}
@container contact-main (width >= 68rem) {
.contact-main_body {
max-width: 61.1875rem;
}
.contact-main_aside {
max-width: 40.5625rem;
}
}
.contact-main_title {
--_mw: 20ch;
}
.contact-main_text {
--_mw: 60ch;
}
.contact-main_aside {
flex: 1 1 28rem;
container-type: inline-size;
overflow: hidden;
border-radius: var(--radius-main);
background-color: var(--background);
color: var(--text);
}
.contact-main_card {
display: grid;
@container (width >= 44rem) {
grid-template-columns: 1fr 1fr;
}
}
.contact-main_image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
@container (width >= 44rem) {
.contact-main_image {
height: 100%;
aspect-ratio: auto;
}
}
.contact-main_info {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-3);
padding: var(--space-6);
& a {
color: inherit;
}
& a[href^="tel:"],
& a[href^="mailto:"] span {
white-space: nowrap;
}
}
.contact-main_address {
margin-top: var(--space-5);
font-style: normal;
hyphens: manual;
}
.contact-form_wrap {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.contact-form_group {
display: flex;
flex-direction: column;
gap: var(--space-4);
min-width: 0;
margin: 0;
padding: 0;
border: 0;
&[hidden] {
display: none;
}
}
.contact-form_legend {
margin-bottom: var(--space-2);
padding: 0;
font-weight: var(--primary-bold);
}
.contact-form_row {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
& > .field {
flex: 1 1 14rem;
min-width: 0;
}
&.name > .field {
flex: 2 1 11rem;
}
&.name > .field:first-child {
flex: 1 1 9rem;
}
&.zip > .field {
flex: 3 1 12rem;
}
&.zip > .field:first-child {
flex: 1 1 8rem;
}
}
.contact-form_textarea {
min-height: 10rem;
resize: vertical;
}
.upload-drop_wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-6) var(--space-5);
text-align: center;
background-color: var(--background-2);
border: var(--border-width) dashed color-mix(in lab, var(--text) 35%, transparent);
border-radius: var(--radius-small);
cursor: pointer;
transition:
background-color var(--hover-duration) var(--hover-ease),
border-color var(--hover-duration) var(--hover-ease);
@media (hover: hover) {
&:hover {
background-color: var(--background-3);
border-color: var(--brand-500);
}
}
&.is-dragover {
background-color: var(--background-3);
border-color: var(--brand-500);
border-style: solid;
}
&:has(.upload-drop_input:focus-visible) {
outline: var(--focus-width) solid var(--text);
outline-offset: var(--focus-offset);
}
}
.upload-drop_input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.upload-drop_icon {
width: 2.5rem;
height: 2.5rem;
color: var(--brand-500);
}
.upload-drop_files {
color: var(--text-2);
&:empty {
display: none;
}
}
.contact-form_options {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
}
.contact-form_check {
display: flex;
align-items: start;
gap: var(--space-3);
cursor: pointer;
& input {
flex: none;
width: 1.25rem;
height: 1.25rem;
margin: calc((1lh - 1.25rem) / 2) 0 0;
accent-color: var(--brand-500);
cursor: pointer;
}
& a {
color: inherit;
text-decoration: underline;
}
}
.contact-form_trap {
position: absolute;
left: -100vw;
width: 1px;
height: 1px;
overflow: hidden;
}
.contact-form_wrap .field-control:user-invalid {
border-color: var(--red-500);
}
.contact-form_status {
padding: var(--space-4) var(--space-5);
background-color: var(--background-2);
border-left: 0.25rem solid var(--brand-500);
&.is-error {
border-left-color: var(--red-500);
}
&[hidden] {
display: none;
}
}
}
@layer components {
.promo-split_wrap {
gap: var(--space-6) var(--site-gutter);
&.autofit {
--_max-cols: 2;
--_min-col-width: 26;
}
& > .heading {
margin-top: 0;
}
}
.promo-split_title {
--_mw: 16ch;
}
.promo-note {
--_mw: 60ch;
margin-top: var(--space-5);
}
.promo-offer_grid.autofit {
--_max-cols: 3;
--_min-col-width: 22;
}
.promo-rating_stars {
margin: var(--space-4) 0 var(--space-2);
color: var(--brand-500);
font-size: var(--h4);
letter-spacing: 0.1em;
}
.promo-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-6);
}
.promo-badge {
padding: var(--space-2) var(--space-3);
background-color: var(--background-2);
border-radius: var(--radius-small);
}
.promo-highlight {
display: block;
width: fit-content;
margin-bottom: var(--space-3);
padding: var(--space-2) var(--space-3);
color: var(--accent-500);
background-color: var(--light-100);
border-radius: var(--radius-small);
}
.promo-hero_accent {
color: var(--accent-500);
}
.promo-cta_wrap .cta-main_visual .image {
height: 100%;
object-fit: cover;
}
.promo-form_layout {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--space-8) var(--site-gutter);
& > * {
min-width: 0;
}
}
.promo-form_head {
flex: 5 1 22.5rem;
}
.promo-form_text {
--_mw: 45ch;
}
.promo-form_form {
flex: 7 1 31.5rem;
}
}
@layer components {
.apply-main_layout {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--space-8) var(--site-gutter);
& > * {
min-width: 0;
}
}
.apply-main_head {
flex: 5 1 22.5rem;
}
.apply-main_text {
--_mw: 45ch;
}
.apply-main_form {
flex: 7 1 31.5rem;
& .field-label {
display: block;
}
& .contact-form_options {
row-gap: var(--space-4);
}
}
.apply-main_form > .contact-form_group {
display: block;
& > :not(legend) + * {
margin-top: var(--space-4);
}
}
.apply-main_divider {
width: 100%;
margin: calc(var(--space-5) - var(--space-6)) 0 0;
border: 0;
border-top: var(--border-width) solid var(--border);
}
.apply-main_other[hidden] {
display: none;
}
}
@layer components {
.bento-main_wrap {
container: bento-main / inline-size;
width: 100%;
}
.bento-main_grid {
--_cols: 2;
--_gap: clamp(0.5rem, 1cqi, 1rem);
display: grid;
grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
grid-auto-rows: calc((100cqi - (var(--_cols) - 1) * var(--_gap)) / var(--_cols) * 0.75);
grid-auto-flow: dense;
gap: var(--_gap);
margin: 0;
padding: 0;
list-style: none;
@container bento-main (width >= 36rem) {
--_cols: 3;
}
@container bento-main (width >= 64rem) {
--_cols: 4;
}
}
.bento-main_item {
min-width: 0;
overflow: hidden;
&.large {
grid-column: span 2;
grid-row: span 2;
}
&.tall {
grid-row: span 2;
}
&.wide {
grid-column: span 2;
}
}
.bento-main_image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--_focus, center);
&.focus-top {
--_focus: center 35%;
}
&.focus-right {
--_focus: 58% center;
}
}
}
@layer components {
.story-sticky_wrap {
--_sticky-top: 0rem;
@media (width < 75rem) {
--_sticky-top: var(--nav-height);
}
}
.story-sticky_inner {
container: story-sticky / inline-size;
}
.story-sticky_list {
display: flex;
flex-direction: column;
gap: var(--space-9);
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.story-sticky_item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-7) var(--site-gutter);
& > * {
min-width: 0;
}
}
.story-sticky_body {
flex: 3 1 28rem;
}
.story-sticky_visual {
flex: 2 1 18rem;
aspect-ratio: 4 / 5;
overflow: hidden;
}
.story-sticky_image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--_focus, center);
&.focus-right {
--_focus: 60% center;
}
&.focus-top {
--_focus: center 25%;
}
}
.story-sticky_eyebrow {
position: relative;
border-top-width: 0.25rem;
}
.story-sticky_bar {
display: none;
}
.story-sticky_head {
display: flex;
flex-direction: column;
gap: var(--space-4);
& .heading {
margin-top: 0;
}
}
.story-sticky_head + .text {
margin-top: 0;
}
.story-sticky_text {
--_mw: 48ch;
}
.story-sticky_wrap.is-animated {
& .story-sticky_track {
height: calc(3 * 100svh);
view-timeline-name: --story-sticky;
}
& .story-sticky_stage {
position: sticky;
top: var(--_sticky-top);
display: flex;
flex-direction: column;
height: calc(100svh - var(--_sticky-top));
padding-bottom: var(--space-7);
overflow: hidden;
}
& .story-sticky_inner {
flex: 1 1 0;
min-height: 0;
justify-content: start;
}
& .story-sticky_eyebrow {
flex: none;
}
& .story-sticky_list {
display: grid;
grid-template-rows: minmax(0, 1fr);
flex: 1 1 0;
min-height: 0;
}
& .story-sticky_item {
grid-area: 1 / 1;
flex-wrap: nowrap;
align-items: stretch;
min-height: 0;
}
& .story-sticky_body {
flex: 1 1 28rem;
align-self: center;
}
& .story-sticky_visual {
flex: 1 1 18rem;
aspect-ratio: auto;
}
& .story-sticky_bar {
position: absolute;
top: -0.25rem;
left: 0;
display: block;
width: 100%;
height: 0.25rem;
background-color: var(--brand-500);
transform-origin: left;
transform: scaleX(0);
}
}
@container story-sticky (width < 48rem) {
.story-sticky_wrap.is-animated {
& .story-sticky_item {
flex-direction: column;
gap: var(--space-5);
}
& .story-sticky_body {
flex: none;
align-self: stretch;
}
& .story-sticky_visual {
order: -1;
flex: 1 1 0;
min-height: 0;
}
}
}
.story-sticky_wrap.is-sda {
& .story-sticky_item {
animation: story-sticky-step linear both;
animation-timeline: --story-sticky;
&:nth-child(1) {
animation-name: story-sticky-first;
animation-range: contain 0% contain 33.33%;
}
&:nth-child(2) {
animation-range: contain 33.33% contain 66.67%;
}
&:nth-child(3) {
animation-name: story-sticky-last;
animation-range: contain 66.67% contain 100%;
}
}
& .story-sticky_bar {
animation: story-sticky-bar linear both;
animation-timeline: --story-sticky;
animation-range: contain 0% contain 100%;
}
}
.story-sticky_wrap.steps-4.is-animated .story-sticky_track {
height: calc(4 * 100svh);
}
.story-sticky_wrap.steps-4.is-sda .story-sticky_item {
&:nth-child(1) {
animation-range: contain 0% contain 25%;
}
&:nth-child(2) {
animation-range: contain 25% contain 50%;
}
&:nth-child(3) {
animation-name: story-sticky-step;
animation-range: contain 50% contain 75%;
}
&:nth-child(4) {
animation-name: story-sticky-last;
animation-range: contain 75% contain 100%;
}
}
.story-sticky_wrap.photo {
& .story-sticky_stage {
isolation: isolate;
}
&:not(.is-animated) .story-sticky_stage {
position: relative;
}
& .story-sticky_body {
max-width: 52rem;
margin-inline: auto;
}
}
.story-sticky_bg {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
&::after {
content: "";
position: absolute;
inset: 0;
background-color: color-mix(in srgb, var(--background) 60%, transparent);
}
}
.story-sticky_bg-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 65% 40%;
}
.story-sticky_wrap.is-step {
& .story-sticky_item {
opacity: 0;
translate: 0 2rem;
transition:
opacity 0.5s var(--hover-ease),
translate 0.5s var(--hover-ease);
}
& .story-sticky_track[data-step="1"] .story-sticky_item:nth-child(1),
& .story-sticky_track[data-step="2"] .story-sticky_item:nth-child(2),
& .story-sticky_track[data-step="3"] .story-sticky_item:nth-child(3),
& .story-sticky_track[data-step="4"] .story-sticky_item:nth-child(4) {
opacity: 1;
translate: 0 0;
}
& .story-sticky_bar {
transform: scaleX(var(--_progress, 0));
}
}
@keyframes story-sticky-step {
0% { opacity: 0; translate: 0 2rem; }
20%, 80% { opacity: 1; translate: 0 0; }
100% { opacity: 0; translate: 0 -2rem; }
}
@keyframes story-sticky-first {
0%, 80% { opacity: 1; translate: 0 0; }
100% { opacity: 0; translate: 0 -2rem; }
}
@keyframes story-sticky-last {
0% { opacity: 0; translate: 0 2rem; }
20%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes story-sticky-bar {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
}
@layer components {
.legal-main_title {
--_mw: 20ch;
}
.legal-main_lead {
--_mw: 60ch;
}
.legal-main_layout {
display: flex;
flex-wrap: wrap;
gap: var(--space-8) var(--site-gutter);
margin-top: var(--space-8);
& > * {
min-width: 0;
}
}
.legal-main_aside {
flex: 1 1 16rem;
}
.legal-main_toc {
position: sticky;
top: var(--space-8);
}
.legal-main_toc-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-4);
padding: 0;
list-style: none;
counter-reset: toc;
& a {
display: flex;
gap: var(--space-2);
color: var(--text-2);
text-decoration: none;
counter-increment: toc;
&::before {
content: counter(toc, decimal-leading-zero);
flex: none;
width: 2.5ch;
font-family: var(--secondary-family);
}
@media (hover: hover) {
&:hover {
color: var(--text);
}
}
}
}
.legal-main_body {
flex: 3 1 36rem;
}
.legal-main_section {
padding-block: var(--space-7);
border-top: var(--border-width) solid var(--border);
scroll-margin-top: var(--space-6);
&:first-child {
padding-top: 0;
border-top: 0;
}
& .rich-text {
max-width: 70ch;
margin-top: var(--space-5);
}
}
.legal-main_facts {
display: flex;
flex-direction: column;
margin-top: var(--space-5);
border-top: var(--border-width) solid var(--border);
}
.legal-main_fact {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--site-gutter);
padding-block: var(--space-4);
border-bottom: var(--border-width) solid var(--border);
&:last-child {
padding-bottom: 0;
border-bottom: 0;
}
& :is(dt, dd) {
margin: 0;
}
& dt {
flex: 1 1 12rem;
color: var(--text-2);
}
& dd {
flex: 3 1 20rem;
}
& a {
color: inherit;
}
}
}