@layer normalize, styles, components;

:root, [data-color-mode], [data-device-mode] { /* Special selectors declaration to enable variables that contain responsive variables (non-static value) to resolve properly. */
  /* All size values will be relative to rem base. Browser default = 16px */
  --rem-base: clamp(16px, 0.75vw, 20px); /* clamp(min, scale, max) */
  
  /* Typography */
  --font-family-primary: 'TT Norms Pro Compact', system-ui, sans-serif;
  --font-family-accent: 'TT Norms Pro', system-ui, sans-serif;
  --font-family-mono: 'DM Mono', monospace;
  --line-height-headings: normal;
  --line-height-text: 1.6475; /* Unitless is preferred */
  --line-height-code: 1.75;

  /* Colors (Light) */
  --light-danger-bright: rgb(253 59 66);
  --light-danger-dark: rgb(177 17 24);
  --light-danger-medium: rgb(227 17 25);
  --light-danger-subtle: rgb(255 247 248);
  --light-danger-subtle-transparent: rgb(255 0 10 / 0.03);
  --light-danger-xdark: rgb(69 49 50);
  --light-decorative-black: rgb(0 0 0);
  --light-decorative-pink: rgb(223 0 112);
  --light-decorative-pink-subtle: rgb(255 230 242);
  --light-decorative-pink-subtle-transparent: rgb(255 0 128 / 0.04);
  --light-decorative-pink-xdark: rgb(40 34 40);
  --light-decorative-primary-light-100: rgb(198 232 255);
  --light-decorative-primary-light-200: rgb(143 207 255);
  --light-decorative-primary-light-300: rgb(92 181 255);
  --light-decorative-primary-light-400: rgb(43 154 255);
  --light-decorative-violet: rgb(116 40 255);
  --light-decorative-violet-subtle: rgb(248 244 255);
  --light-decorative-violet-subtle-transparent: rgb(116 40 255 / 0.05);
  --light-decorative-violet-xdark: rgb(38 36 46);
  --light-effect-contrast-up-high-ondark: rgb(4 5 10);
  --light-effect-shadow-elevation-high-1: rgb(5 41 95 / 0.03);
  --light-effect-shadow-elevation-high-2: rgb(5 41 95 / 0.02);
  --light-effect-shadow-elevation-high-3: rgb(5 41 95 / 0.05);
  --light-effect-shadow-elevation-low-1: rgb(5 41 95 / 0.03);
  --light-effect-shadow-elevation-low-2: rgb(5 41 95 / 0.03);
  --light-effect-shadow-elevation-low-3: rgb(5 41 95 / 0.01);
  --light-grey-dark-820: rgb(43 45 50);
  --light-grey-dark-820-invisible: rgb(43 45 50 / 0);
  --light-grey-light-150: rgb(215 218 226);
  --light-grey-medium-400: rgb(153 158 168);
  --light-grey-medium-600: rgb(81 86 94);
  --light-grey-subtle: rgb(238 240 244);
  --light-grey-subtle-transparent: rgb(5 12 46 / 0.04);
  --light-grey-supersubtle: rgb(241 243 247);
  --light-grey-supersubtle-transparent: rgb(5 12 46 / 0.02);
  --light-grey-white: rgb(255 255 255);
  --light-grey-white-transparent-60: rgb(255 255 255 / 0.6);
  --light-grey-white-transparent-75: rgb(255 255 255 / 0.75);
  --light-grey-xlight-990: rgb(246 248 251);
  --light-grey-xlight-995: rgb(251 252 253);
  --light-primary-bright: rgb(8 133 255);
  --light-primary-dark: rgb(0 86 176);
  --light-primary-focus-transparent: rgb(0 128 255 / 0.2);
  --light-primary-medium: rgb(1 110 221);
  --light-primary-subtle: rgb(242 249 255);
  --light-primary-subtle-transparent: rgb(0 128 255 / 0.05);
  --light-primary-xdark: rgb(25 51 79);
  --light-success-bright: rgb(0 183 136);
  --light-success-dark: rgb(0 101 83);
  --light-success-medium: rgb(1 131 104);
  --light-success-subtle: rgb(237 254 249);
  --light-success-subtle-transparent: rgb(0 243 171 / 0.07);
  --light-success-xdark: rgb(7 64 54);

  /* Colors (Dark) */
  --dark-danger-bright: rgb(250 54 62);
  --dark-danger-dark: rgb(196 42 47);
  --dark-danger-medium: rgb(255 87 94);
  --dark-danger-subtle: rgb(42 35 38);
  --dark-danger-subtle-transparent: rgb(255 84 91 / 0.05);
  --dark-danger-xbright: rgb(255 224 226);
  --dark-decorative-black: rgb(0 0 0);
  --dark-decorative-pink: rgb(255 72 164);
  --dark-decorative-pink-subtle: rgb(42 34 41);
  --dark-decorative-pink-subtle-transparent: rgb(255 72 164 / 0.05);
  --dark-decorative-pink-xbright: rgb(255 230 242);
  --dark-decorative-primary-dark-600: rgb(0 107 215);
  --dark-decorative-primary-dark-700: rgb(12 89 167);
  --dark-decorative-primary-dark-800: rgb(19 70 123);
  --dark-decorative-primary-dark-900: rgb(25 51 79);
  --dark-decorative-violet: rgb(169 121 255);
  --dark-decorative-violet-subtle: rgb(38 36 46);
  --dark-decorative-violet-subtle-transparent: rgb(169 121 255 / 0.05);
  --dark-decorative-violet-xbright: rgb(249 246 255);
  --dark-effect-contrast-up-high-ondark: rgb(4 5 10);
  --dark-effect-shadow-elevation-high-1: rgb(4 5 10 / 0.05);
  --dark-effect-shadow-elevation-high-2: rgb(4 5 10 / 0.15);
  --dark-effect-shadow-elevation-high-3: rgb(4 5 10 / 0.25);
  --dark-effect-shadow-elevation-low-1: rgb(4 5 10 / 0.25);
  --dark-effect-shadow-elevation-low-2: rgb(4 5 10 / 0.15);
  --dark-effect-shadow-elevation-low-3: rgb(4 5 10 / 0.05);
  --dark-grey-bright: rgb(247 249 253);
  --dark-grey-bright-invisible: rgb(247 249 253 / 0);
  --dark-grey-dark-775: rgb(60 63 68);
  --dark-grey-dark-800-transparent-75: rgb(48 50 54 / 0.75);
  --dark-grey-dark-820: rgb(44 46 50);
  --dark-grey-dark-820-transparent-60: rgb(44 46 50 / 0.6);
  --dark-grey-dark-915: rgb(31 32 35);
  --dark-grey-medium-250: rgb(186 190 196);
  --dark-grey-medium-550: rgb(107 111 119);
  --dark-grey-subtle: rgb(38 39 42);
  --dark-grey-subtle-transparent: rgb(249 251 255 / 0.03);
  --dark-grey-supersubtle: rgb(33 34 37);
  --dark-grey-supersubtle-transparent: rgb(249 251 255 / 0.01);
  --dark-grey-xdark-930: rgb(24 25 27);
  --dark-primary-bright: rgb(37 150 255);
  --dark-primary-dark: rgb(0 104 210);
  --dark-primary-focus-transparent: rgb(0 128 255 / 0.2);
  --dark-primary-medium: rgb(14 137 255);
  --dark-primary-subtle: rgb(29 37 46);
  --dark-primary-subtle-transparent: rgb(0 128 255 / 0.05);
  --dark-primary-xbright: rgb(209 236 255);
  --dark-success-bright: rgb(0 221 159);
  --dark-success-dark: rgb(0 123 98);
  --dark-success-medium: rgb(0 181 135);
  --dark-success-subtle: rgb(30 38 38);
  --dark-success-subtle-transparent: rgb(0 219 147 / 0.03);
  --dark-success-xbright: rgb(178 255 234);

  /* Default: [data-color-mode="dark"] */
  --responsive-background-control: var(--dark-grey-dark-800-transparent-75);
  --responsive-background-default: var(--dark-grey-dark-915);
  --responsive-background-high-contrast: var(--dark-grey-xdark-930);
  --responsive-background-input: var(--dark-grey-dark-820-transparent-60);
  --responsive-background-strong: var(--dark-grey-medium-550);
  --responsive-background-subtle: var(--dark-grey-subtle);
  --responsive-background-subtle-transparent: var(--dark-grey-subtle-transparent);
  --responsive-background-supersubtle: var(--dark-grey-supersubtle);
  --responsive-background-supersubtle-transparent: var(--dark-grey-supersubtle-transparent);
  --responsive-control-primary: var(--dark-grey-bright);
  --responsive-control-quaternary: var(--dark-grey-dark-775);
  --responsive-control-secondary: var(--dark-grey-medium-250);
  --responsive-control-subtle: var(--dark-grey-subtle);
  --responsive-control-subtle-transparent: var(--dark-grey-subtle-transparent);
  --responsive-control-supersubtle: var(--dark-grey-supersubtle);
  --responsive-control-supersubtle-transparent: var(--dark-grey-supersubtle-transparent);
  --responsive-control-tertiary: var(--dark-grey-medium-550);
  --responsive-danger-bright: var(--dark-danger-bright);
  --responsive-danger-dark: var(--dark-danger-dark);
  --responsive-danger-high-contrast: var(--dark-danger-xbright);
  --responsive-danger-medium: var(--dark-danger-medium);
  --responsive-danger-subtle: var(--dark-danger-subtle);
  --responsive-danger-subtle-transparent: var(--dark-danger-subtle-transparent);
  --responsive-decorative-black: var(--dark-decorative-black);
  --responsive-decorative-pink: var(--dark-decorative-pink);
  --responsive-decorative-pink-high-contrast: var(--dark-decorative-pink-xbright);
  --responsive-decorative-pink-subtle: var(--dark-decorative-pink-subtle);
  --responsive-decorative-pink-subtle-transparent: var(--dark-decorative-pink-subtle-transparent);
  --responsive-decorative-primary-20p: var(--dark-decorative-primary-dark-900);
  --responsive-decorative-primary-40p: var(--dark-decorative-primary-dark-800);
  --responsive-decorative-primary-60p: var(--dark-decorative-primary-dark-700);
  --responsive-decorative-primary-80p: var(--dark-decorative-primary-dark-600);
  --responsive-decorative-violet: var(--dark-decorative-violet);
  --responsive-decorative-violet-high-contrast: var(--dark-decorative-violet-xbright);
  --responsive-decorative-violet-subtle: var(--dark-decorative-violet-subtle);
  --responsive-decorative-violet-subtle-transparent: var(--dark-decorative-violet-subtle-transparent);
  --responsive-effect-contrast-up-high-ondark: var(--dark-effect-contrast-up-high);
  --responsive-effect-shadow-elevation-high-1: var(--dark-effect-shadow-elevation-high-1);
  --responsive-effect-shadow-elevation-high-2: var(--dark-effect-shadow-elevation-high-2);
  --responsive-effect-shadow-elevation-high-3: var(--dark-effect-shadow-elevation-high-3);
  --responsive-effect-shadow-elevation-low-1: var(--dark-effect-shadow-elevation-low-1);
  --responsive-effect-shadow-elevation-low-2: var(--dark-effect-shadow-elevation-low-2);
  --responsive-effect-shadow-elevation-low-3: var(--dark-effect-shadow-elevation-low-3);
  --responsive-primary-bright: var(--dark-primary-bright);
  --responsive-primary-dark: var(--dark-primary-dark);
  --responsive-primary-focus-transparent: var(--dark-primary-focus-transparent);
  --responsive-primary-high-contrast: var(--dark-primary-xbright);
  --responsive-primary-medium: var(--dark-primary-medium);
  --responsive-primary-subtle: var(--dark-primary-subtle);
  --responsive-primary-subtle-transparent: var(--dark-primary-subtle-transparent);
  --responsive-special-content-block: var(--dark-grey-supersubtle);
  --responsive-special-dark-on-light: var(--dark-grey-xdark-930);
  --responsive-special-light-on-dark: var(--light-grey-white);
  --responsive-special-primary-invisible: var(--dark-grey-bright-invisible);
  --responsive-success-bright: var(--dark-success-bright);
  --responsive-success-dark: var(--dark-success-dark);
  --responsive-success-high-contrast: var(--dark-success-xbright);
  --responsive-success-medium: var(--dark-success-medium);
  --responsive-success-subtle: var(--dark-success-subtle);
  --responsive-success-subtle-transparent: var(--dark-success-subtle-transparent);
  --responsive-text-primary: var(--dark-grey-bright);
  --responsive-text-secondary: var(--dark-grey-medium-250);
  --responsive-text-subtle: var(--dark-grey-dark-775);
  --responsive-text-tertiary: var(--dark-grey-medium-550);
  
  /* Default color mode */
  --color-mode: dark;

  /* Code size */
  --code-size-small: 0.84375rem;
  --code-size-medium: 1rem;
  --code-size-large: 1.1875rem;

  /* Code weight */
  --code-weight-regular: 400;
  --code-weight-bold: 700;

  /* Corner radius */
  --corner-radius-small: 0.1875rem;
  --corner-radius-default: 0.375rem;
  --corner-radius-large: 0.75rem;
  --corner-radius-xlarge: 1.25rem;

  /* Heading size */
  --heading-size-xxsmall: 0.9375rem;
  --heading-size-xsmall: 1.0625rem;
  --heading-size-small: 1.25rem;
  --heading-size-medium: 1.625rem;
  --heading-size-large: 2.125rem;
  --heading-size-xlarge: 2.75rem;
  --heading-size-hero: 3.75rem;

  /* Heading weight */
  --heading-weight-medium: 500;
  --heading-weight-semibold: 600;
  --heading-weight-bold: 700;

  /* Spacing & size */
  --paragraph-width-max: 50rem;
  --content-block-width-max: calc(var(--paragraph-width-max) + (var(--padding-content-block)*2));

  --spacing-gap-checklist-default: 0.5rem;
  --spacing-gap-formfields-default: 1.5rem;
  --spacing-gap-sections: 16rem;
  --spacing-gap-content-roomy: 2.5rem;

  /* Dynamic viewport-responsive padding */
  --padding-viewport-horizontal: clamp(1rem, 3vw, 4rem);
  --padding-content-block: clamp(1rem, 4vw, 2.5rem);

  /* Text size */
  --text-size-xsmall: 0.8125rem;
  --text-size-small: 0.925rem;
  --text-size-medium: 1.0625rem;
  --text-size-large: 1.25rem;

  /* Text weight */
  --text-weight-light: 300;
  --text-weight-regular: 400;
  --text-weight-medium: 450;
  --text-weight-semibold: 600;
  --text-weight-bold: 700;
  
  /* Transition duration */
  --transition-duration-quick: 150ms;
  --transition-duration-medium: 300ms;
  --transition-duration-slow: 600ms;
  --transition-duration-xslow: 1s;
  --transition-duration-xxslow: 1.5s;

  /* Transition timing functions (bezier curves) */
  /* --bezier-ease-in-out-custom: cubic-bezier(0.44, 0, 0.32, 0.81); */ /* 400ms is good */
  --bezier-ease-in-out: cubic-bezier(0.4, 0.4, 0, 1); /* 600ms is good */
  --bezier-arrive-late: cubic-bezier(0.95, 0.05, 0.795, 0.035); /* Slows down at start, speeds up at the end */

  /* Modal dimmer */
  --modal-dimmer-color: rgb(from var(--responsive-background-default) r g b / 0.9);

  /* Effects: Shadows */
  --shadow-elevation-low: 0 0.0625rem 0.0625rem var(--responsive-effect-shadow-elevation-low-1),
                          0 0.0625rem 0.125rem var(--responsive-effect-shadow-elevation-low-2),
                          0 0.25rem 1.25rem var(--responsive-effect-shadow-elevation-low-3);
  --shadow-elevation-high: 0 2.5rem 1.875rem -2.5rem var(--responsive-effect-shadow-elevation-high-1),
                           0 2.5rem 2.5rem -2.5rem var(--responsive-effect-shadow-elevation-high-2),
                           0 2.5rem 5rem -2.5rem var(--responsive-effect-shadow-elevation-high-3);

  /* Effects: Contrast */
  /* TODO */

  /* Device mode (default) */
  --device-mode: desktop;

  /* Trouchscreen */
  --can-hover: true;
}

/* Color mode: Light */
[data-color-mode="light"] {
  --responsive-background-control: var(--light-grey-white-transparent-75);
  --responsive-background-default: var(--light-grey-xlight-990);
  --responsive-background-high-contrast: var(--light-grey-xlight-995);
  --responsive-background-input: var(--light-grey-white-transparent-60);
  --responsive-background-strong: var(--light-grey-medium-600);
  --responsive-background-subtle: var(--light-grey-subtle);
  --responsive-background-subtle-transparent: var(--light-grey-subtle-transparent);
  --responsive-background-supersubtle: var(--light-grey-supersubtle);
  --responsive-background-supersubtle-transparent: var(--light-grey-supersubtle-transparent);
  --responsive-control-primary: var(--light-grey-dark-820);
  --responsive-control-quaternary: var(--light-grey-light-150);
  --responsive-control-secondary: var(--light-grey-medium-600);
  --responsive-control-subtle: var(--light-grey-subtle);
  --responsive-control-subtle-transparent: var(--light-grey-subtle-transparent);
  --responsive-control-supersubtle: var(--light-grey-supersubtle);
  --responsive-control-supersubtle-transparent: var(--light-grey-supersubtle-transparent);
  --responsive-control-tertiary: var(--light-grey-medium-400);
  --responsive-danger-bright: var(--light-danger-bright);
  --responsive-danger-dark: var(--light-danger-dark);
  --responsive-danger-high-contrast: var(--light-danger-xdark);
  --responsive-danger-medium: var(--light-danger-medium);
  --responsive-danger-subtle: var(--light-danger-subtle);
  --responsive-danger-subtle-transparent: var(--light-danger-subtle-transparent);
  --responsive-decorative-black: var(--light-decorative-black);
  --responsive-decorative-pink: var(--light-decorative-pink);
  --responsive-decorative-pink-high-contrast: var(--light-decorative-pink-xdark);
  --responsive-decorative-pink-subtle: var(--light-decorative-pink-subtle);
  --responsive-decorative-pink-subtle-transparent: var(--light-decorative-pink-subtle-transparent);
  --responsive-decorative-primary-20p: var(--light-decorative-primary-light-100);
  --responsive-decorative-primary-40p: var(--light-decorative-primary-light-200);
  --responsive-decorative-primary-60p: var(--light-decorative-primary-light-300);
  --responsive-decorative-primary-80p: var(--light-decorative-primary-light-400);
  --responsive-decorative-violet: var(--light-decorative-violet);
  --responsive-decorative-violet-high-contrast: var(--light-decorative-violet-xdark);
  --responsive-decorative-violet-subtle: var(--light-decorative-violet-subtle);
  --responsive-decorative-violet-subtle-transparent: var(--light-decorative-violet-subtle-transparent);
  --responsive-effect-contrast-up-high-ondark: var(--light-effect-contrast-up-high-ondark);
  --responsive-effect-shadow-elevation-high-1: var(--light-effect-shadow-elevation-high-1);
  --responsive-effect-shadow-elevation-high-2: var(--light-effect-shadow-elevation-high-2);
  --responsive-effect-shadow-elevation-high-3: var(--light-effect-shadow-elevation-high-3);
  --responsive-effect-shadow-elevation-low-1: var(--light-effect-shadow-elevation-low-1);
  --responsive-effect-shadow-elevation-low-2: var(--light-effect-shadow-elevation-low-2);
  --responsive-effect-shadow-elevation-low-3: var(--light-effect-shadow-elevation-low-3);
  --responsive-primary-bright: var(--light-primary-bright);
  --responsive-primary-dark: var(--light-primary-dark);
  --responsive-primary-focus-transparent: var(--light-primary-focus-transparent);
  --responsive-primary-high-contrast: var(--light-primary-xdark);
  --responsive-primary-medium: var(--light-primary-medium);
  --responsive-primary-subtle: var(--light-primary-subtle);
  --responsive-primary-subtle-transparent: var(--light-primary-subtle-transparent);
  --responsive-special-content-block: var(--light-grey-xlight-995);
  --responsive-special-dark-on-light: var(--light-grey-dark-820);
  --responsive-special-light-on-dark: var(--light-grey-white);
  --responsive-special-primary-invisible: var(--light-grey-dark-820-invisible);
  --responsive-success-bright: var(--light-success-bright);
  --responsive-success-dark: var(--light-success-dark);
  --responsive-success-high-contrast: var(--light-success-xdark);
  --responsive-success-medium: var(--light-success-medium);
  --responsive-success-subtle: var(--light-success-subtle);
  --responsive-success-subtle-transparent: var(--light-success-subtle-transparent);
  --responsive-text-primary: var(--light-grey-dark-820);
  --responsive-text-secondary: var(--light-grey-medium-600);
  --responsive-text-subtle: var(--light-grey-light-150);
  --responsive-text-tertiary: var(--light-grey-medium-400);

  --color-mode: light;
}


/* Mobile (Touchscreens) */
@media (hover: none) {
  :root {
    /* Code size */
    --code-size-small: 0.9375rem;
    --code-size-medium: 1.0625rem;
    --code-size-large: 1.25rem;

    /* Code weight */
    --code-weight-regular: 400;
    --code-weight-bold: 700;

    /* Corner radius */
    --corner-radius-small: 0.125rem;
    --corner-radius-default: 0.3125rem;
    --corner-radius-large: 0.625rem;
    --corner-radius-xlarge: 1.25rem;

    /* Heading size */
    --heading-size-xxsmall: 0.9375rem;
    --heading-size-xsmall: 1.0625rem;
    --heading-size-small: 1.25rem;
    --heading-size-medium: 1.5rem;
    --heading-size-large: 1.75rem;
    --heading-size-xlarge: 2rem;
    --heading-size-hero: 2.25rem;

    /* Heading weight */
    --heading-weight-medium: 500;
    --heading-weight-semibold: 600;
    --heading-weight-bold: 700;

    /* Spacing & size */
    --paragraph-width-max: 43.75rem;
    --spacing-gap-checklist-default: 0.5rem;
    --spacing-gap-formfields-default: 1.5rem;
    --spacing-gap-sections: 8rem;

    /* Text paragraph */
    --text-paragraph-xsmall: var(--text-size-xsmall);
    --text-paragraph-small: var(--text-size-small);
    --text-paragraph-medium: var(--text-size-medium);
    --text-paragraph-large: var(--text-size-large);

    /* Text size */
    --text-size-xsmall: 0.875rem;
    --text-size-small: 1rem;
    --text-size-medium: 1.125rem;
    --text-size-large: 1.3125rem;

    /* Text weight */
    --text-weight-regular: 450;
    --text-weight-medium: 500;
    --text-weight-semibold: 600;
    --text-weight-bold: 700;

    /* Device mode */
    --device-mode: mobile;

    /* Trouchscreen */
    --can-hover: false;
  }
}

/* Fonts: Headings */
@font-face {
  font-family: 'TT Norms Pro';
  font-weight: 500;
  font-style: normal;
  src: url('../fonts/TTNormsPro/TTNormsPro-Md.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms Pro';
  font-weight: 600;
  font-style: normal;
  src: url('../fonts/TTNormsPro/TTNormsPro-DmBd.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms Pro';
  font-weight: 700;
  font-style: normal;
  src: url('../fonts/TTNormsPro/TTNormsPro-Bd.woff2') format('woff2');
}

/* Fonts: Text */
@font-face {
  font-family: 'TT Norms Pro Compact';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/TTNormsProCompact/TTNormsProComp-Rg.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms Pro Compact';
  font-weight: 450;
  font-style: normal;
  src: url('../fonts/TTNormsProCompact/TTNormsProComp-Normal.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms Pro Compact';
  font-weight: 500;
  font-style: normal;
  src: url('../fonts/TTNormsProCompact/TTNormsProComp-Md.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms Pro Compact';
  font-weight: 600;
  font-style: normal;
  src: url('../fonts/TTNormsProCompact/TTNormsProComp-DmBd.woff2') format('woff2');
}
@font-face {
  font-family: 'TT Norms Pro Compact';
  font-weight: 700;
  font-style: normal;
  src: url('../fonts/TTNormsProCompact/TTNormsProComp-Bd.woff2') format('woff2');
}

/* Experiment: separate scaling factor formulas on mobile */
/* @media (600 >= width < 1250px) and (orientation: portrait) {
  :root {
    --rem-base: clamp(20px, 1vw, 32px);
  }
}
@media (width < 600px) and (orientation: portrait) {
  :root {
    --rem-base: clamp(20px, 1vw, 48px);
  }
} */

@keyframes slide-in-from-left { from { transform: translateX(-100vw); } }
@keyframes slide-in-from-right { from { transform: translateX(100vw); } }
@keyframes slide-out-to-left { to { transform: translateX(-100vw); } }
@keyframes slide-out-to-right { to { transform: translateX(100vw); } }
@keyframes scale-up { from { scale: 0; } }
@keyframes scale-down { to { scale: 0; } }
@keyframes scale-up-x { from { transform: scaleX(0); } }
@keyframes scale-down-x { to { transform: scaleX(0); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out  { to { opacity: 0; } }
@keyframes fade-in-late { 0%, 40% { opacity: 0; } }
@keyframes fade-out-early  { 25%, 100% { opacity: 0; } }
@keyframes stretch-in-transition { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(2); } }

@keyframes move-in-from-above {
  from { transform: translateY(-100%); opacity: 0; filter: blur(0.25rem);}
  to   { transform: translateY(0); opacity: 1; filter: none;}
}

@keyframes wave-reveal {
  0% { --wave-reveal-radius: -20%; z-index: 4; }
  20% { --wave-reveal-radius: 200%; z-index: 4; }
  20% { --wave-reveal-radius: 200%; z-index: 4; }
  20.01% { --wave-reveal-radius: -20%; z-index: 2; }
  100% { --wave-reveal-radius: -20%; z-index: 2; }
}

@property --wave-reveal-radius {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -20%;
}

@media (prefers-reduced-motion: no-preference) {
  :root { view-transition-name: none; }
  /* header { view-transition-name: --header; } */ /* Must be added temporarily by JS to prevent breaking blur filter outside of transition */
  main { view-transition-name: --main; }
  footer { view-transition-name: --footer; }
  .profile-badge { view-transition-name: --profile-badge; }
  .menu-container { view-transition-name: --menu-container; }
  .main-menu .menu-item.selected::before { view-transition-name: --menu-active-marker; }
  .connect-icons { view-transition-name: --connect-icons; }
  
  @view-transition {
    navigation: auto;
  }

  /* Group is a container for both old and new. It transitions position and size. Duration must be set here */
  html::view-transition-group(*) {
    animation-duration: var(--transition-duration-slow);
    animation-timing-function: var(--bezier-ease-in-out);
    /* animation-duration: 10s; */
    /* transform: none !important; */ /* Reset any inherited transform */
    /* transform: translateY(0) !important; */
  }

  /* Attempted fix for diagonal slide instead of horizontal */
  /* html::view-transition-group(--main) {
    translate: transformY(0) !important;
  }
  html::view-transition-group(--main) > * {
    transform-origin: 0 0 !important;
  } */

  ::view-transition-old(--main) {
    animation-name: fade-out-early;
  }
  ::view-transition-new(--main) {
    animation-name: fade-in-late;
  }

  /* Slide has an issue where transition slides diagonally due to scroll position. Workaround it, then uncomment this and view-transition-name above to enable. */
  /* html:active-view-transition-type(forwards) {
    &::view-transition-old(--main) {
      animation-name: slide-out-to-left;
    }
    &::view-transition-new(--main) {
      animation-name: slide-in-from-right;
    }
  }

  html:active-view-transition-type(backwards) {
    &::view-transition-old(--main) {
      animation-name: slide-out-to-right;
    }
    &::view-transition-new(--main) {
      animation-name: slide-in-from-left;
    }
  } */

  ::view-transition-old(--menu-active-marker) {
    animation-name: scale-down-x, fade-out-early;
  }
  ::view-transition-new(--menu-active-marker) {
    animation-name: scale-up-x, fade-in-late;
  }

  /* Transition properties: All at Medium speed */
  body, header, header::before, header::after, details, summary, summary::after, .popover, ::backdrop, .menu-container, .menu-trigger, .menu-item, .menu-item::before, .icon_chevron, .toggle, .toggle *, .profile-badge *, .pre-title, .highlighted-word, .highlighted-word i, .effect-glass-card, .effect-glass-card::before, .tab-bar::before, .tab-bar::after, .tab, .tab::before, .tab::after, #testimonials .preview *, .tag, .preview, footer * {
    transition-property: all;
    transition-duration: var(--transition-duration-medium);
    transition-timing-function: var(--bezier-ease-in-out);
    transition-behavior: allow-discrete; /* allows transition of properties like display */
    interpolate-size: allow-keywords; /* allows transition to keyword values like auto */
    /* border: 1px solid green !important; */
  }

  /* Transition properties: All at Fast speed */
  a, a > .icon, button, button > .icon, button::before, button::after, .height-shrink-fit {
    transition-property: all;
    transition-duration: var(--transition-duration-quick);
    transition-timing-function: var(--bezier-ease-in-out);
    transition-behavior: allow-discrete; /* allows transition of properties like display */
    interpolate-size: allow-keywords; /* allows transition to keyword values like auto */
    /* border: 1px solid red !important; */
  }

  /* Transition properties: All at Slow speed */
  details::details-content, .expertises *, .tab-content, .effect-glass-card::after, #testimonials .testimonial *, .anchored-marker {
    transition-property: all;
    transition-duration: var(--transition-duration-slow);
    transition-timing-function: var(--bezier-ease-in-out);
    transition-behavior: allow-discrete; /* allows transition of properties like display */
    interpolate-size: allow-keywords; /* allows transition to keyword values like auto */
  }

  /* Reduced transition properties to fix weird transition or page reload glitches where text and svg unxpectedly enlarge when loading fonts. Focus on reducing reflow. Also to save some performance. */
  .icon, .profile-badge *, .tab-bar::before, .tab-bar::after, .tab, .tab::before, .tab::after, .pre-title, .highlighted-word, .highlighted-word i, #testimonials .preview * {
    transition-property: color, background, opacity !important;
  }
  .icon.icon_chevron {
    transition-property: color, opacity, transform !important;
  }

  .slide {
    transition-property: margin, opacity;
    transition-duration: var(--transition-duration-xxslow);
    transition-timing-function: var(--bezier-ease-in-out);

    .context-overlay > * {
      transition-property: opacity;
      transition-duration: 2s;
      transition-timing-function: var(--bezier-ease-in-out);
      transition-delay: 1s;
    }

    .composition, .composition * {
      transition-property: transform, opacity;
      transition-duration: var(--transition-duration-xxslow);
      transition-timing-function: var(--bezier-ease-in-out);
    }

    /* Outgoing slide animation rules: save performance */
    &:not(.is-snapped) { 
      & .composition,
      & .composition *,
      & .context-overlay > * {
        transition-duration: 0.5s;
      }
    }
  }

  /* Attept to enhance performance using will-change */
  .slides-container {
    will-change: transform;

    .slide.is-in-view {
      will-change: opacity, transform;
      
      .composition .group, .composition .artefact {
        will-change: transform;
      }
    }
  }
}

/* Temporary class to disable all motion during reflow-intensive DOM manipulations */
.no-motion, .no-motion * {
  transition: none !important;
  animation: none !important;
}

@layer normalize {
  /* Normalize and reset browser differences */
  * { box-sizing: border-box; scrollbar-color: var(--responsive-control-secondary) transparent; scroll-behavior: smooth; }
  html, body { width: 100%; height: 100%; }
  html, body, p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
  a { color: var(--responsive-primary-medium); text-decoration: none; -webkit-user-select: none; user-select: none; }
  img { border: none; display: block; pointer-events: none; }
  button { border: none; background: none; padding: 0; font-family: var(--font-family-primary); cursor: pointer; -webkit-user-select: none; user-select: none; white-space: nowrap; height: fit-content; color: var(--responsive-text-primary); }
  summary { cursor: pointer; -webkit-user-select: none; user-select: none; }
  ul { margin: 0; }
  svg { flex: none; }
  [popover] { padding: 0; border: none; }
  ::before, ::after { position: absolute; display: block; }
  summary::marker, summary::-webkit-details-marker { content: ''; display: none; }
  [data-color-mode="dark"] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

@layer styles {
  .scroll-target, .scroll-snap-target, [id], details {
    scroll-margin-top: 8rem;
    &.tab-content-container, &#testimonials, &#visuals-carousel { scroll-margin-top: 6rem; }
    #areas-of-expertise &.tab-content-container { scroll-margin-top: 12rem; }

    @media (height > 60rem) {
      #areas-of-expertise &.tab-content-container { scroll-margin-top: 20rem; }
    }

    @media (width < 35rem) {
      &#visuals-carousel { scroll-margin-top: 5rem; }
    }
  }

  /* Shadows */
  .elevation-low  { box-shadow: var(--shadow-elevation-low);  }
  .elevation-high { box-shadow: var(--shadow-elevation-high); }

  /* Contrast */
  /* .contrast-up-high  { box-shadow: 0 0 0 var(--responsive-effect-contrast-up-high); } */
  .contrast-up-subtle-ondark { 
    box-shadow: 0 0 0.125rem var(--responsive-effect-contrast-up-subtle-ondark-1), 
                0 0 0.75rem var(--responsive-effect-contrast-up-subtle-ondark-2);
  }

  /* Shortcuts: Display */
  .block        { display: block; }
  .inline-block { display: inline-block; }
  .display-none { display: none; }
  .flex, .flex-row, .flex-column { display: flex; }
  .inline-flex { display: inline-flex; }

  /* Shortcuts: Flex */
  .flex-row    { flex-direction: row; }
  .flex-column { flex-direction: column; }

  .flex-wrap   { flex-wrap: wrap; }
  .flex-nowrap { flex-wrap: nowrap; }

  .flex-align-self-start   { align-self: start;   }
  .flex-align-self-end     { align-self: end;     }
  .flex-align-self-center  { align-self: center;  }
  .flex-align-self-stretch { align-self: stretch; }

  .flex-align-each-start   { align-items: start;   }
  .flex-align-each-end     { align-items: end;     }
  .flex-align-each-center  { align-items: center;  }
  .flex-align-each-stretch { align-items: stretch; }

  .flex-align-all-start  { justify-content: start;  }
  .flex-align-all-end    { justify-content: end;    }
  .flex-align-all-center { justify-content: center; }

  .flex-space-between { justify-content: space-between; }
  .flex-space-around  { justify-content: space-around;  }
  .flex-space-evenly  { justify-content: space-evenly;  }

  .flex-grow-1 { flex-grow: 1; }
  .flex-grow-2 { flex-grow: 2; }
  .flex-grow-3 { flex-grow: 3; }

  /* Width */
  .width-max { width: 100%; }
  .max-width-p { max-width: var(--paragraph-width-max); }
  .max-width-content-block { max-width: var(--content-block-width-max); }

  /* Padding */
  .padding-card { padding: var(--padding-content-block); }

  /* Shortcuts: Position */
  .relative { position: relative; }
  .absolute { position: absolute; }

  /* Shortcuts: Word wrap */
  .nowrap { white-space: nowrap; }
  .wrap   { white-space: normal; }
  .wrap-break-word  { overflow-wrap: break-word; }
  .wrap-keep-spaces { white-space: pre-wrap; }

  /* Shortcuts: Align */
  .align-right  { text-align: right;      }
  .align-left   { text-align: left;       }
  .align-top    { vertical-align: top;    }
  .align-bottom { vertical-align: bottom; }
  .align-center-h { text-align: center;     }
  .align-center-v { vertical-align: middle; }

  /* Shortcuts: Flip */
  .flip-h { transform: scaleX(-1); }
  .flip-v { transform: scaleY(-1); }

  /* Text-color */
  .color-text-primary   { color: var(--responsive-text-primary);   }
  .color-text-secondary { color: var(--responsive-text-secondary); }
  .color-text-tertiary  { color: var(--responsive-text-tertiary);  }
  .color-text-subtle    { color: var(--responsive-text-subtle);    }

  /* Heading styles */
  .heading-hero, .heading-xlarge, .heading-large, .heading-medium, .heading-small, .heading-xsmall, .heading-xxsmall, h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-accent);
    font-weight: var(--heading-weight-semibold);
    line-height: var(--line-height-headings);
    letter-spacing: normal;
    word-spacing: normal;
    /*font-variant-ligatures: common-ligatures;*/
    font-feature-settings: 'ss18' on; /* single storey a */
  }

  /* Heading size */
  h1, .heading-hero    { font-size: var(--heading-size-hero); letter-spacing: -0.0625rem; line-height: 1.1; }
  h2, .heading-xlarge  { font-size: var(--heading-size-xlarge);  }
  h3, .heading-large   { font-size: var(--heading-size-large);   }
  h4, .heading-medium  { font-size: var(--heading-size-medium);  }
  h5, .heading-small   { font-size: var(--heading-size-small);   }
  h6, .heading-xsmall  { font-size: var(--heading-size-xsmall);  }
      .heading-xxsmall { font-size: var(--heading-size-xxsmall); }

  /* Text styles */
  .text-size-large, .text-size-medium, .text-size-small, .text-size-xsmall {
    font-weight: var(--text-weight-regular);
    line-height: var(--line-height-text);
    letter-spacing: 0.01em;
    word-spacing: 0.02em;
  }

  /* Text weight */
  .weight-light    { font-weight: var(--text-weight-light);    }
  .weight-regular  { font-weight: var(--text-weight-regular);  }
  .weight-medium   { font-weight: var(--text-weight-medium);   }
  .weight-semibold, b  { font-weight: var(--text-weight-semibold); }
  .weight-bold, strong { font-weight: var(--text-weight-bold); }

  /* Text size */
  .text-size-large  { font-size: var(--text-size-large);  }
  .text-size-medium { font-size: var(--text-size-medium); }
  .text-size-small  { font-size: var(--text-size-small);  }
  .text-size-xsmall { font-size: var(--text-size-xsmall); }

  /* Paragraph spacing */
  p.margin-before { margin-block-start: 1em; }
  p.margin-after, p:not(:last-child) { margin-block-end: 1em; }

  .effect-text-gradient, .price-tag .amount {
    background: linear-gradient(180deg, var(--responsive-text-primary) 0%, var(--responsive-text-secondary) 100%);
    color: transparent;
    background-clip: text;
  }

  .fade-overflow-x {
    /* Fades content that overflows in X direction */
    --fade-distance: 4rem;
    box-sizing: content-box;
    padding-inline: var(--fade-distance);
    margin-inline: calc(-1 * var(--fade-distance));
    mask-image: linear-gradient(90deg,
                                transparent,
                                #000 var(--fade-distance),
                                #000 calc(100% - var(--fade-distance)),
                                transparent 100%);
  }

  .scroll-snap-container-proximity {
    scroll-snap-type: proximity; /* Discouraged (2025): Causes loss of inertia/momentum on iOS */
  }

  .scroll-snap-container-mandatory {
    scroll-snap-type: mandatory; /* Discouraged (2025): Causes loss of inertia/momentum on iOS */
  }

  .scroll-snap-target {
    scroll-snap-align: center;
  }
}

/* COMPONENTS */
@layer components {

  /* Icons */
  .icon {
    display: block; /* Fixes margins */
    aspect-ratio: 1/1;

    &, .text-size-medium > &:not(.text-size-large):not(.text-size-medium):not(.text-size-small), &.text-size-medium { /* assigned class overrides inheritance */
      width: 1.5rem; /* Use width only, to fix uncontrolled downscaling on squeezed spaces */
      margin-inline: -0.125rem; /* Correct for optical alignment */
      &.icon_chevron { width: 1rem; } /* Reduced chevron */
    }

    .text-size-large > &:not(.text-size-large):not(.text-size-medium):not(.text-size-small), &.text-size-large {
      width: 2rem;
      margin-inline: -0.1875rem;
      &.icon_chevron { width: 1.25rem; }
    }

    .text-size-small > &:not(.text-size-large):not(.text-size-medium):not(.text-size-small), &.text-size-small {
      width: 1.25rem;
      margin-inline: -0.06125rem;
      &.icon_chevron { width: 0.75rem; }
    }

    .close & {
      margin: 0;
    }
  }

  button, .button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-accent);
    font-weight: var(--text-weight-semibold);
    border-radius: var(--corner-radius-default);
    white-space: nowrap;

    &.text-size-small, &.text-size-small {
      gap: 0.4375rem; /* Corrected for optical alignment */
      padding: 0.5625rem min(1vw, 1.4375rem);
    }
    &.text-size-medium, &.text-size-medium {
      padding: 0.625rem min(2vw, 1.625rem);
      gap: 0.625rem;
    }
    &.text-size-large, &.text-size-large {
      padding: 0.6875rem min(3vw, 1.8125rem) 0.625rem;
      gap: 0.8125rem;
    }

    &.primary {
      color: var(--responsive-special-light-on-dark);
      background: var(--responsive-primary-medium);

      body[data-can-hover='true'] &:hover {
        background: var(--responsive-primary-bright);
      }

      &:active, body[data-can-hover] &:active {
        background: var(--responsive-primary-dark);
      }
    }

    &.secondary {
      color: var(--responsive-control-primary);
      background: var(--responsive-control-subtle-transparent);

      body[data-can-hover='true'] &:hover {
        background: var(--responsive-primary-focus-transparent);
        box-shadow: inset 0 0 0 0.0625rem var(--responsive-primary-focus-transparent);
      }

      &:active, body[data-can-hover] &:active {
        background: var(--responsive-decorative-primary-40p);
        box-shadow: inset 0 0 0 0.125rem var(--responsive-primary-focus-transparent);
      }
    }

    &.tertiary {
      position: relative;
      display: inline-flex;
      color: var(--responsive-control-secondary);
      padding-inline: 0;

      &::before { /* Pressed state, extends beyond border-box */
        content: '';
        z-index: -1;
        top: 50%;
        transform: translateY(-50%);
        border-radius: var(--corner-radius-default);
      }

      body[data-can-hover='true'] &:hover {
        color: var(--responsive-control-primary);
        &::before {
          background: var(--responsive-control-supersubtle-transparent);
        }
      }

      &:active, body[data-can-hover] &:active {
        color: var(--responsive-control-primary);
        &::before {
          background: var(--responsive-control-subtle-transparent);
        }
      }

      &.text-size-small {
        gap: 0.25rem;
        &::before { /* Pressed state, extends beyond border-box */
          left: -0.1875rem;
          right: -0.1875rem;
          height: 1.75rem;
        }
      }
      &.text-size-medium {
        gap: 0.375rem;
        &::before {
          left: -0.5rem;
          right: -0.5rem;
          height: 2.125rem;
        }
      }
      &.text-size-large {
        gap: 0.375rem;
        &::before {
          left: -0.5rem;
          right: -0.5rem;
          height: 2.5rem;
        }
      }
    }
  }

  .thumbnail {
    display: block;
    height: auto;
    padding: 0;
    border: none;
    background: var(--responsive-background-subtle);
    border-radius: var(--corner-radius-default);
    box-shadow: inset 0 0 0 0.0625rem var(--responsive-background-subtle-transparent);
    overflow: hidden;
  }

  .popover {
    position: fixed;
    max-width: calc(100dvw - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: 0;
    flex-direction: column;
    align-items: end;
    border: none;
    border-radius: var(--corner-radius-large);
    background: var(--responsive-background-subtle);
    box-shadow: inset 0 0 0 0.0625rem var(--responsive-background-subtle-transparent);
    -webkit-user-select: none;
    user-select: none;

    /* ENDING style for CLOSE transition */
    opacity: 0;
    scale: 0.95;
    transform: translateY(5vh);
    filter: blur(4rem);
    
    &.fullscreen::backdrop {
      /* ENDING style for CLOSE transition */
      backdrop-filter: none;
      background: none;
      pointer-events: none;
    }

    &:popover-open {
      /* ENDING style for OPEN transition */
      display: flex;
      opacity: 1;
      scale: 1;
      transform: translateY(0);
      filter: none;
      pointer-events: auto;

      &.fullscreen::backdrop {
        backdrop-filter: blur(1rem);
        background: var(--modal-dimmer-color);
      }

      & .content {
        overflow: auto;
      }

      &:has(.content.scrollbar) .close-container {
        overflow-y: auto;
        scrollbar-gutter: stable;
      }
    }
    
    @starting-style {
      &:popover-open {
        /* STARTING style for OPEN transition */
        opacity: 0;
        scale: 0.5;
        transform: translateY(0);
        filter: blur(0.5rem);
    
        &.fullscreen::backdrop {
          backdrop-filter: none;
          background: none;
        }
      }
    }

    & .content {
      height: fit-content;
      max-width: 100%;
      overflow: hidden;
      overscroll-behavior: none;
    }

    & .close-container {
      position: fixed;
      width: fit-content;
      height: fit-content;
    }
    
    & .close {
      padding: 1rem 1rem 1.5rem 1.5rem;
      color: white;
      cursor: pointer;

      & > svg {
        filter: drop-shadow(0 0 0.0625rem black)
                drop-shadow(0 0 0.0625rem black);
      }

      &::before {
        content: '';
        z-index: -1;
        top: 1rem;
        bottom: 1.5rem;
        left: 1.5rem;
        right: 1rem;
        border-radius: var(--corner-radius-default);
        background: rgb(0 0 0 / 0.1);
      }
      
      body[data-can-hover='true'] &:hover::before {
        background: rgb(0 0 0 / 0.2);
      }

      &:active::before, body[data-can-hover] &:active::before {
        background: rgb(0 0 0 / 0.3);
      }
    }
  }

  .toggle.color-mode {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.125rem;
    width: 3.75rem;
    height: 2rem;
    background: var(--responsive-control-subtle-transparent);
    border-radius: 100rem;
    cursor: pointer;

    .option {
      display: flex;
      flex-grow: 1;
      justify-content: center;
      align-items: center;
      color: var(--responsive-text-primary);
      opacity: 0.4;
      z-index: 1;
    }

    .handle {
      position: absolute;
      width: 1.75rem;
      height: 1.75rem;
      top: 0.125rem;
      left: 0.125rem;
      border-radius: 100rem;
      background: var(--responsive-special-light-on-dark);
      box-shadow: var(--shadow-elevation-low);
    }

    [data-color-mode='dark'] & .handle {
      left: 1.875rem;
      background: var(--responsive-control-subtle-transparent);
    }

    [data-color-mode='light'] & .option.light, [data-color-mode='dark'] & .option.dark {
      opacity: 1;
    }
  }

  .switch-button-set {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    width: fit-content;
    height: fit-content;
    overflow: visible;
    border-radius: 100rem;
    background: var(--responsive-control-subtle-transparent);
    
    .option {
      padding: 0.4375rem 1.5rem;
      font-size: inherit;
      border-radius: 100rem;
      border: 0.0625rem solid transparent;
      color: var(--responsive-text-primary);
      opacity: 0.5;

      body[data-can-hover='true'] &:hover {
        opacity: 0.8;
      }

      &.active, body[data-can-hover] &.active {
        anchor-name: --a-active-switch-button;
        opacity: 1;
        box-shadow: 0 0.0625rem rgb(0 0 0 / 0.10), 
                    0 0.125rem 0.3125rem 0 rgb(0 0 0 / 0.03);
        &::before, &::after {
          opacity: 1;
        }
      }

      &::before, &::after { opacity: 0; }
    }

    .anchored-marker { 
      display: none;
      z-index: -1;
      box-shadow: 0 0.0625rem rgb(0 0 0 / 0.10), 
                  0 0.125rem 0.3125rem 0 rgb(0 0 0 / 0.03);
    }

    @supports (anchor-name: --a) {
      anchor-scope: --a-active-switch-button;

      /* Hide fallback, in favor of anchored marker */
      .option {
        &.active, body[data-can-hover] &.active { box-shadow: none; }
        &::before, &::after { display: none; }
      }

      .anchored-marker {
        position-anchor: --a-active-switch-button;
        position: absolute;
        display: block;
        inset-block: 0.25px; /* Should be 0, but pixel rounding may cause it to be cut off on non-default rem base */
        width: anchor-size(--a-active-switch-button width);
        left: anchor(--a-active-switch-button left);
      }
    }
  }

  .effect-glass-card {
    --border-width: 0.0625rem;
    --border-radius: var(--corner-radius-xlarge);
    --bg-gradient-opacity: 0.03;
    --border-radius-inner-content: calc(var(--border-radius) - var(--border-width));
    position: relative;
    padding: var(--padding-content-block);
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-elevation-high);

    &::before, &::after {
      content: '';
      pointer-events: none;
    }

    &::before {
      /* BODY fill (must be separate from box shadow to prevent weird darkening) */
      inset: 0; /* Stretch to padding-box */
      border-radius: var(--border-radius-inner-content);
      background-image: radial-gradient(120% 160% at 3% 0%,
                                        rgb(from var(--responsive-special-light-on-dark) r g b / var(--bg-gradient-opacity)) 0%,
                                        rgb(from var(--responsive-special-dark-on-light) r g b / var(--bg-gradient-opacity)) 100%);
    }
    
    &::after {
      /* BORDER gradient fill (replacement for inability to apply gradients to borders) to be animated by opacity */
      inset: calc(var(--border-width) * -1); /* Stretch to border-box */
      border: inherit;
      border-radius: inherit;
      background: radial-gradient(95% 110% at 4% 0%,
                                  rgb(from var(--responsive-control-primary) r g b / 0.18) 0%,
                                  var(--responsive-background-supersubtle-transparent) 100%);
      background-origin: border-box;
      /* Use fake gradients so that it treats them as mask-image, not solid color (color won't work) */
      mask: linear-gradient(black, black),
            linear-gradient(black, black);
      mask-clip: content-box, border-box;
      mask-composite: exclude;
    }

    details& > .body {
      /* For collapsibles: wrap content in div.body and apply padding/gaps there, to prevent unwanted height in collapsed state */
      padding-top: 2.2rem;
    }

    /* Collapsible card: handle states when collapsed or is a clickable card */
    details&:not([open]), &.clickable {
      /* Collapsible: Rest state */
      --bg-gradient-opacity: 0.02;
      box-shadow: var(--shadow-elevation-low);

      &::after { /* Border opacity at rest */
        opacity: 0.5;
      }

      /* Collapsible: Hover state */
      body[data-can-hover='true'] &:hover, [data-can-hover] &.active {
        --bg-gradient-opacity: 0.02;

        &::after { /* Border opacity on hover */
          opacity: 0.75;
        }
      }

      /* Add invisible click area to make the whole block clickable, when collapsed */
      & > summary::before {
        content: '';
        inset: 0; /* Stretch to padding-box */
      }
    }

    /* If supported, animate border gradient for drama */
    /* @supports (overflow-clip-margin: 1px) {
      overflow: clip;
      overflow-clip-margin: var(--border-width);

      body[data-can-hover='true'] details&:not([open]) {
        &::after { 
          transform: scaleX(2) scaleY(1.25) translateY(-6.25%);
        }

        &:hover::after {
          transform: none;
        }
      }
    } */
  }

  .effect-border-shine {
    --border-width: 0.0625rem;
    --border-radius: var(--corner-radius-xlarge);
    --border-radius-inner-content: calc(var(--border-radius) - var(--border-width));
    position: relative;
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius);

    &::before, &::after {
      content: '';
    }

    &::before {
      /* BODY fill (must be separate from box shadow to prevent weird darkening) */
      inset: calc(var(--border-width) * -1); /* Stretch to border-box */
      border-radius: var(--border-radius-inner-content);
      background-image: radial-gradient(120% 160% at 3% 0%,
                                        rgb(from var(--responsive-background-control) r g b / 1) 0%,
                                        rgb(from var(--responsive-background-control) r g b / 0.5) 100%);
      z-index: -1;
    }
    
    &::after {
      /* BORDER gradient fill (replacement for inability to apply gradients to borders) to be animated by opacity */
      inset: calc(var(--border-width) * -1); /* Stretch to border-box */
      border: inherit;
      border-radius: inherit;
      background: radial-gradient(95% 110% at 4% 0%,
                                  rgb(255 255 255 / 0.1) 0%,
                                  rgb(255 255 255 / 0.01) 100%);
      background-origin: border-box;
      /* Use fake gradients so that it treats them as mask-image, not solid color (color won't work) */
      mask: linear-gradient(black, black),
            linear-gradient(black, black);
      mask-clip: content-box, border-box;
      mask-composite: exclude;
    }

  }

  .availability-badge {
    display: inline-flex;
    padding-inline: 0.625rem;
    align-items: baseline;
    gap: 0.5em;
    background: var(--responsive-control-supersubtle-transparent);
    border-radius: var(--corner-radius-default);
    width: fit-content;
    height: fit-content;

    &::before {
      /* Indicator dot */
      content: '';
      display: inline;
      position: relative;
      /* top: 0.0625rem; */
      height: 0.75rem;
      aspect-ratio: 1/1;
      border: 0.125rem solid var(--responsive-control-secondary);
      border-radius: 1rem;
      box-sizing: border-box;
    }

    &.ready {
      &::before { 
        border-color: var(--responsive-success-bright);
      }
    }

    &.available {
      color: var(--responsive-success-high-contrast);
      background: var(--responsive-success-subtle-transparent);
      &::before { 
        background: var(--responsive-success-bright); 
        border: none;
      }
    }

    &.unavailable {
      color: var(--responsive-danger-high-contrast);
      background: var(--responsive-danger-subtle-transparent);
      &::before { 
        background: var(--responsive-danger-bright); 
        border: none;
      }
    }
  }

  .availability {
    display: grid;
    row-gap: 0.75rem;
    column-gap: 1.5rem;
    flex: 1 0 0;
    padding-left: 1.5rem;
    grid-template-columns: auto 1fr;
    border-radius: var(--corner-radius-default);
    border-left: 0.125rem solid var(--responsive-control-subtle-transparent);
    font-size: var(--text-size-medium);
  }

  details {
    /* Note: do not apply gap on details to prevent unwanted height in collapsed state */
    & > summary {
      display: flex;
      align-items: center;
      gap: 0.5rem 0.75rem;

      & .icon_chevron { 
        color: var(--responsive-control-secondary) 
      }

      body[data-can-hover='true'] &:hover .icon_chevron { 
        color: var(--responsive-text-primary); 
      }
    }

    &::details-content { 
      /* Note: ::details-content may not have margin or padding to prevent unwanted height
        To affect padding and gaps wrap content in div.body and apply to that */
      display: block;
      block-size: 0;
      overflow: hidden;
      opacity: 0.25;
    }

    &[open] {
      & > summary .icon_chevron {
        transform: rotate(-180deg);
      }

      &::details-content {
        opacity: 1;
        block-size: auto;
      }
    }
  }

  .tags-bar {
    display: flex;
    gap: 1.75rem;
    align-self: stretch;
    flex-wrap: wrap;
  }

  .tag {
    display: inline;
    padding: 0.25rem 0.75rem;
    align-items: center;
    color: var(--responsive-text-secondary);
    border-radius: var(--corner-radius-default);
    background: var(--responsive-control-subtle-transparent);
    border: 0.0625rem solid transparent;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;

    [data-can-hover='true'] &:hover {
      color: var(--responsive-text-primary);
      border-color: var(--responsive-control-supersubtle-transparent);
      box-shadow: var(--shadow-elevation-low);
    }
  }

  .tabs {

    & > .tab-bar {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      flex-wrap: nowrap;
      overflow-x: auto; 
      scrollbar-width: none;
      margin-bottom: 0.0625rem;

      & > .tab {
        flex: 1 1 max-content;
        align-items: end;
        justify-content: center;
        color: var(--responsive-text-primary);
        white-space: normal;
        text-align: left;
        vertical-align: bottom;
        height: auto;
        min-width: 0;
      }
    }

    & > .tab-content-container {
      position: relative;
      display: grid;
      overflow: visible;

      &.height-shrink-fit {
        /* anchor-scope: --active-tab-content;
        position-anchor: --active-tab-content;
        height: anchor-size(--active-tab-content height); */

        .tab-content {
          height: fit-content;
          /* position-anchor: --active-tab-content;
          max-height: anchor-size(--active-tab-content height);

          &.active, body[data-can-hover] &.active {
            anchor-name: --active-tab-content;
          } */
          
          &:not(.active), body[data-can-hover] &:not(.active) {
            position: absolute;
          }
        }
      }
      
      & > .tab-content {
        grid-area: 1 / 1; /* Place all content on the same spot, while container still fits size of the largest child */
        width: 100%;
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
        opacity: 0;
        filter: blur(0.25rem);

        &.active {
          pointer-events: auto;
          user-select: auto;
          opacity: 1;
          filter: none;
        }

        /* .tab-content siblings before the one with .active class */
        &:has(~ .active) {
          transform: translateX(-100%);
        }
        /* .tab-content siblings after the one with .active class */
        &.active ~ .tab-content {
          transform: translateX(100%);
        }
      }
    }
  }

  .price-tag {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.625rem;
    align-items: center;
    /* padding-top: 0.125rem; */ /* Optical alignment */

    .amount {
      font-family: var(--font-family-accent);
      font-weight: var(--heading-weight-medium);
      line-height: var(--line-height-headings);
      font-size: 1.6875rem;
      height: 2.0625rem; /* Optical alignment */
      padding-top: 0.0625rem; /* Optical alignment */
    }

    .conditions {
      display: flex;
      flex-direction: column;

      .condition {
        font-size: var(--text-size-xsmall);
        line-height: 0.6875rem;
        text-align: left;
      }
    }
  }

  .countdown-progress {
    width: 1.5rem;
    height: 0.125rem;
    background: var(--responsive-control-quaternary);
    border-radius: 1rem;
    overflow: hidden;

    .progress {
      width: 100%;
      height: 100%;
      background: var(--responsive-control-tertiary);
      transform-origin: right;
    }

    &.animate .progress {
      animation: scale-down-x 3s linear; /* Match duration with JS */
    }
  }

  ul.usp, section#services .service .value-proposition > ul {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 0 1rem 4rem;

    & > li {
      position: relative;
      list-style: none;
      /* padding-block: 0.22rem; */

      &::before, &::after {
        content: '';
        aspect-ratio: 1/1;
      }

      &::before { /* Icon for bullet */
        top: 0rem;
        left: -3.1875rem;
        width: 2rem;
        background: var(--responsive-primary-medium); /* This will be the svg fill color, because of mask. */
        mask: url('/img/icons/icon-done.svg') no-repeat center / contain; /* Only mask using svg that has paths works. All reference approaches with <use> and .svg#id fail to resolve from CSS. */
      }

      &::after { /* Arount the bullet */
        top: 0.25rem;
        left: -2.9325rem;
        width: 1.5rem;
        background: var(--responsive-primary-subtle-transparent);
        filter: blur(1rem);
        border-radius: 10rem;
        z-index: -1;
      }
    }
  }

  .page-message {
    margin-block: 4rem 0;
  }

  .content-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2em;
    max-width: 100%;
    width: min(var(--content-block-width-max), 100%);
  }
}


/* Viewport padding */
header, section, footer, .page-message { padding-inline: var(--padding-viewport-horizontal); }

html {
  font-size: var(--rem-base);
  overflow: hidden;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--responsive-background-default);
  color: var(--responsive-text-primary);
  font-family: var(--font-family-primary);
  line-height: var(--line-height-text);
  overflow: hidden auto;

  &:has(.fullscreen:popover-open) {
    overflow: hidden;
    pointer-events: none;
  }
}

header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  margin-top: 2rem;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 3vw, 4rem);
  overflow-y: visible;
  container: header / inline-size;
  /* anchor-name: --a-header; */

  &::before, &::after {
    content: '';
    left: 0;
    right: 0;
    height: 100%;
  }

  &::before {
    z-index: -1;
    bottom: 0.0625rem;
    background: var(--responsive-background-default);
    mask-image: linear-gradient(to top, rgb(0 0 0 / 0.85), black 6rem);
  }

  &::after {
    z-index: -2;
    bottom: 0;
    backdrop-filter: blur(4rem);
    box-shadow: 0 0 8rem var(--responsive-background-default);
  }

  &.hide-shadow::after {
    box-shadow: none;
  }
  
  .profile-badge {
    display: inline-flex;
    gap: 0.69rem;
    flex-grow: 1;

    .profile-image {
      display: inline-block;
      width: 3rem;
      height: 3rem;
      border-radius: 3rem;
      background: var(--responsive-background-subtle);

      img { width: 100%; }
    }

    .descriptions {
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
      padding-top: 0.125rem;
    }

    .bio-role .shortened { display: none; }
  }

  .menu-container {
    position: static;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
    background: none;
    border: none;
    overscroll-behavior: none;
    
    & .menu-additional {
      display: inline-flex;
      justify-content: space-between;
      gap: 2rem;
    }

    & .connect-icons {
      display: inline-flex;
      gap: 1.5rem;
      position: fixed;
      bottom: 10dvh;
      right: var(--padding-viewport-horizontal);
      flex-direction: column;
    
      & .connect-icon {
        display: inline-block;
        opacity: 0.75;
        &, svg { width: 2rem; height: 2rem; }
      }
    }

    body[data-can-hover='true'] & .connect-icon:hover, 
    body[data-can-hover='true'] & .close:hover {
      opacity: 1;
    }
    
    & .connect-icon:active, body[data-can-hover='true'] & .connect-icon:active,
    & .close:active, body[data-can-hover] & .close:active
    {
      opacity: 0.75;
    }

    & .close {
      display: none;
    }
  }

  /* Menu Desktop */
  .main-menu {
    display: flex;
    position: relative;

    & .menu-item {
      position: relative;
      padding-block: 1.75rem;
      padding-inline: clamp(1.5rem, 2vw, 3.125rem);
      border-radius: var(--corner-radius-default);
      font-size: var(--text-size-large);
      font-weight: var(--text-weight-medium);
      color: var(--responsive-text-secondary);
      text-wrap: nowrap;
      -webkit-user-select: none;
      user-select: none;

      /* text-shadow: 0 1px 4px var(--responsive-background-default); */

      &.selected {
        /* anchor-name: --menu-item-selected; */
        color: var(--responsive-text-primary);
        opacity: 0.9;

        & .icon {
          color: var(--responsive-text-secondary);
        }

        &::before {
          content: '';
          width: 1.25rem;
          height: 0.1875rem;
          left: 50%;
          transform: translate(-50%, -0.5rem);
          border-radius: 1rem;
          background: var(--responsive-control-tertiary);
        }
      }
    
      body[data-can-hover='true'] &:hover {
        color: var(--responsive-text-primary);
        opacity: 1;
        & .icon {
          color: var(--responsive-text-primary);
        }
      }
    
      &:active, body[data-can-hover] &:active {
        opacity: 0.9;
      }

      & .icon {
        display: none;
      }
    }
  }

  /* @supports (anchor-name: --test) {
    .main-menu {
      & .active-marker {
        display: none;
      }
      & .menu-item.selected::before {
        content: '';
        width: 1.25rem;
        height: 0.1875rem;
        left: 50%;
        transform: translate(-50%, -0.5rem);
        border-radius: 1rem;
        background: var(--responsive-control-tertiary);
      }
    }
  } */

  .menu-trigger {
    display: none;
    border-radius: var(--corner-radius-default);
    padding-inline: 0.375rem;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border: none;
    background: none;
    color: var(--responsive-text-primary);
    gap: 0;

    & > .icon {
      margin-bottom: -0.25rem;
    }

    body[data-can-hover='true'] &:hover {
      background: var(--responsive-control-subtle-transparent);
    }

    body[data-can-hover] &:active, &:active {
      background: var(--responsive-control-quaternary);
    }
  }

  /* Tablet */
  @container header (60rem <= width < 64rem) {
    .profile-badge .bio-role {
      & .shortened { display: inline; }
      & .full { display: none; }
    }
  }

  /* Mobile Landscape */
  @container header (width <= 60rem) {
    .menu-trigger {
      display: inline-flex;
    }

    .menu-container {
      display: none;
      position: fixed;
      flex-direction: column;
    
      /* ENDING style for CLOSE transition */
      opacity: 0;
      scale: 0.95;
      transform: translateY(20dvh);
      filter: blur(4rem);

      &:popover-open {
        pointer-events: initial;
        overflow: auto;
        gap: 1rem;
        padding-inline: var(--padding-viewport-horizontal);
        padding-block: 1rem 2.5rem;

        /* ENDING style for OPEN transition */
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        opacity: 1;
        scale: 1;
        transform: translateY(0);
        filter: none;
        width: 100dvw;
        height: 100dvh;
      }

      &::backdrop {
        backdrop-filter: blur(1rem);
        background: var(--modal-dimmer-color);
        pointer-events: none;
      }

      @starting-style {
        &:popover-open {
          /* STARTING style for OPEN transition */
          opacity: 0;
          scale: 1;
          transform: translateY(-100%);
          filter: blur(0.5rem);
      
          &::backdrop {
            backdrop-filter: none;
            background: none;
          }
        }
      }

      .main-menu {
        justify-content: end;

        .menu-item {
          justify-content: end;

          &, .icon {
            color: var(--responsive-text-primary);
          }

          body[data-can-hover='true'] &:hover, &:active {
            background: var(--responsive-control-subtle-transparent);
          }
        }
      }

      .menu-additional {
        display: flex;
        flex-grow: 1;
        align-items: end;
        padding-inline: 1.25rem;
      }

      .connect-icons {
        position: static;
        flex-direction: row;
        gap: 2rem;
      }

      .close {
        display: flex;
        justify-content: end;
        align-items: center;
        align-self: end;
        width: fit-content;
        gap: 0.125rem;
        color: var(--responsive-control-secondary);
        opacity: 0.75;
        cursor: pointer;
        padding-inline: 0.5rem;

        .icon {
          color: var(--responsive-control-secondary);
        }
      }
    }
  }

  /* Mobile Portrait */
  @container header (width < 35rem) {
    .menu-container {
      .main-menu {
        flex-direction: column;

        .menu-item {
          display: flex;
          justify-content: space-between;
          align-items: center;

          &.selected::before {
            content: '';
            width: 0.25rem;
            height: 0.625rem;
            left: -0.125rem;
            top: 50%;
            transform: translateY(-50%);
          }
          
          .icon {
            display: block;
          }
        }
      }

      .close {
        padding-inline: 1rem;
      }
    }
  }

  /* Mobile Portrait XS */
  @container header (width < 25rem) {
    .profile-badge .bio-role {
      .shortened { display: inline; }
      .full { display: none; }
    }
  }

  /* Mobile Portrait XXS */
  @container header (width <= 19rem) {
    .profile-badge .profile-image { display: none; }
  }
}


/* MAIN */

main {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: start;
  align-items: center;
  gap: 12rem;
  padding-block: 8rem;
  max-width: 100%;
  width: 100%;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2em;
  max-width: 100%;

  & h2 {
    align-self: stretch;
    text-align: center;
  }

  /* @media (width < 60rem) {
    &#usp-10x {
      align-items: start;

      & h2 { text-align: left; }
    }
  } */
}

section#hero {
  flex-direction: row;
  align-self: stretch;

  .title-container {
    display: inline-flex;
    flex-direction: column;
    align-items: start;
    gap: 0.75rem;
    flex: 1 1 50%;
    max-width: 36rem;

    h1 {
      font-size: clamp(var(--heading-size-hero), 9.5vw, 3.7rem);
    }
  }

  .image-hero {
    flex: 1 1 50%;
    aspect-ratio: 8/5;
    background: var(--responsive-control-supersubtle-transparent);
  }

  @media (width > 60rem) {
    padding-inline: 8%;
  }
  
  @media (width > 90rem) {
    flex-wrap: nowrap;
    align-items: center;

    & .title-container {
      flex: 1 1 20%;
      min-width: 36rem;
    }

    & .image-hero {
      flex: 1 1 80%;
      max-width: 60rem;
    }
  }

  .pre-title {
    font-size: clamp(var(--text-size-medium), calc(var(--heading-size-hero) / 13 * 6), var(--text-size-large));
    font-weight: var(--text-weight-medium);

    .highlighted-word {
      font-weight: var(--text-weight-semibold);
      color: var(--responsive-text-primary);

      &.design {
        display: inline-block;
        position: relative;
        padding-inline: 0.375rem;
        outline-offset: -0.0625rem;
        
        &, & i {
          outline: 0.0625rem solid var(--responsive-decorative-primary-60p);
        }

        i {
          position: absolute;
          display: block;
          width: 0.3125rem;
          height: 0.3125rem;
          border-radius: 0.0625rem;
          background: var(--responsive-decorative-primary-20p);
        }

        i:nth-child(1) { top: -0.125rem; left: -0.125rem; }
        i:nth-child(2) { top: -0.125rem; right: -0.125rem; }
        i:nth-child(3) { bottom: -0.125rem; left: -0.125rem; }
        i:nth-child(4) { bottom: -0.125rem; right: -0.125rem; }
      }
    }
  }
}

section#areas-of-expertise {
  padding-inline: 0rem;
  --highlight-color: var(--responsive-control-quaternary);

  h2 {
    padding-inline-start: var(--padding-content-block);
  }

  /* Decoration: background fill */
  .tabs > .tab-bar::before, .tabs > .tab-bar > .tab::before {
    --highlight-color: var(--responsive-background-subtle);
    content: '';
    inset: 0;
    background: radial-gradient(50% 100% at 50% 100%, 
                                var(--highlight-color) 0%,
                                rgb(from var(--highlight-color) r g b / 0) 100%);
  }

  /* Decoration: border */
  .tabs > .tab-bar::after, .tabs > .tab-bar > .tab::after {
    content: '';
    inset-inline: 0;
    height: 0.0625rem;
    bottom: 0;
    background: linear-gradient(90deg, 
                                rgb(from var(--highlight-color) r g b / 0) 0%, 
                                var(--highlight-color) 50%, 
                                rgb(from var(--highlight-color) r g b / 0) 100%);
  }

  .tabs {
    width: 100%;

    & > .tab-bar {
      width: 100%;
      position: relative;

      & > .tab {
        --highlight-color: var(--responsive-control-secondary);
        position: relative;
        font-weight: var(--heading-weight-medium);
        font-size: clamp(1.1rem, 4.2vw, var(--heading-size-medium));
        text-align: center;
        padding: 2rem var(--padding-content-block);

        /* Finetune word break and fix it Safari (it wants min-width set) */
        &:nth-child(1) { min-width: 6.6rem; }
        &:nth-child(2) { min-width: 6.25rem; } 
        &:nth-child(3) { min-width: 5.5rem; } 
        
        &::before { /* Tab decoration: background fill */
          opacity: 0;
          z-index: -2;
        }

        &::after { /* Tab decoration: bottom border */
          opacity: 0;
          z-index: -1;
        }

        /* Tab Hover */
        body[data-can-hover='true'] &:not(.active):hover {
          &::before, &::after {
            opacity: 1;
          }
        }

        /* Active tab */
        &.active, body[data-can-hover='true'] &:hover {
          &::before, &::after {
            opacity: 1;
          }

          &#tab-expertise-1 {
            --highlight-color: var(--responsive-primary-medium);
            color: var(--highlight-color);
            &::before {
              --highlight-color: var(--responsive-primary-subtle-transparent);
            }
          }
          &#tab-expertise-2 {
            --highlight-color: var(--responsive-decorative-pink);
            color: var(--highlight-color);
            &::before {
              --highlight-color: var(--responsive-decorative-pink-subtle-transparent);
            }
          }
          &#tab-expertise-3 {
            --highlight-color: var(--responsive-decorative-violet);
            color: var(--highlight-color);
            &::before {
              --highlight-color: var(--responsive-decorative-violet-subtle-transparent);
            }
          }
        }
      }

      &::before { z-index: -4; } /* Tab bar decoration: background fill */
      &::after { z-index: -3; } /* Tab bar decoration: bottom border */
    }
  }

  &:not(:has(.tab-content.active)) {
    /* Collapse tab conent if no tab is active */
    .tab-content {
      height: 0;
    }
  }

  .tab-content-container {
    padding: 3rem var(--padding-content-block);
  }

  .tab-content {
    &#tab-content-expertise-1 { --highlight-color: var(--responsive-primary-medium); }
    &#tab-content-expertise-2 { --highlight-color: var(--responsive-decorative-pink); }
    &#tab-content-expertise-3 { --highlight-color: var(--responsive-decorative-violet); }

    b { color: var(--highlight-color); }

    .tags-bar {
      margin-top: 3rem;
      font-size: var(--text-size-medium);
    }
  }

  .image-expertises {
    width: min(100%, 75rem);
    aspect-ratio: 16/9;
    background: var(--responsive-control-supersubtle-transparent);
  }
}

section#visuals-carousel {
  display: flex;
  flex-direction: column;
  align-content: center;
  padding: 0;

  .slides-viewport {
    width: 100%;
    overflow: hidden;
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }

    .slides-container {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      flex-wrap: nowrap;
      height: calc(100dvh - 5rem - max(4.5dvh, 1rem));
      -webkit-user-select: none;
      user-select: none;
      cursor: grab;

      scrollbar-width: none;
      &::-webkit-scrollbar { display: none; }

      &:active {
        cursor: grabbing;
      }

      .slide {
        position: relative;
        min-width: calc(99dvw - 2rem - var(--padding-viewport-horizontal));
        margin-right: clamp(0.75rem, 2vw, 1.5rem);
        background-size: cover;
        background-repeat: no-repeat;
        background-clip: padding-box;
        background-position: center;
        background-color: var(--responsive-background-default);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;

        .context-overlay, .composition {
          border-radius: var(--border-radius-inner-content); /* Inherits value from effect-glass-card */
        }

        &:not(.is-snapped) {
          opacity: 0.35;
          cursor: pointer;

          body[data-can-hover='true'] &.is-in-view:hover {
            opacity: 1;
            transition-duration: var(--transition-duration-slow);
          }

          .context-overlay * { opacity: 0; }
          .composition { opacity: 0.5; }
        }

        .context-overlay {
          position: absolute;
          inset: 0;
          padding: var(--padding-content-block);
          background: linear-gradient(193deg,
                                    rgb(0 0 0 / 0.75) 8%,
                                    rgb(0 0 0 / 0) 42%,
                                    rgb(0 0 0 / 0) 62%,
                                    rgb(0 0 0 / 0.75) 92%);
          color: var(--responsive-special-light-on-dark);
          font-size: clamp(var(--text-size-small), 1.5dvw, var(--text-size-medium));
          z-index: 100;
          /* Text shadow appears expensive for performance here */

          .review, .description {
            position: absolute;
            max-width: min(30rem, 75dvh, calc(100% - 2 * var(--padding-content-block)));
          }

          .review {
            top: calc(var(--padding-content-block) - 0.5em);
            right: var(--padding-content-block);
            text-align: right;

            .author {
              font-size: 0.85em;
              padding-top: 0.5em;
            }
          }

          .description {
            bottom: calc(var(--padding-content-block) - 0.5em);
            left: var(--padding-content-block);

            @media (width > 28rem) {
              &::before { /* Irregular text breaker shape */
                content: '';
                position: static;
                float: right;
                width: 6rem;
                height: 4rem;
                shape-outside: polygon(0 0, 100% 0, 100% 100%);
              }
            }
          }
        }

        .composition {
          position: relative;
          width: 100%;
          height: 100%;
          max-width: 100%;
          max-height: 100%;
          overflow: clip; /* Default clip to prvent scrollbars on overridden elements */
          display: flex;
          justify-content: center;
          align-content: center;
        }

        &#slide-visual-online-payments {
          background-image: url(../img/backgrounds/bg-broken-stone-1500x1125.png);
          padding: var(--padding-content-block);

          .composition {
            aspect-ratio: 1929/1454; /* will not always be respected, but its an improvement here */
            width: auto;
            overflow: visible; /* Prevent cuts during fly-in transition */

            .device-phone, .device-tablet {
              position: absolute;
              background-size: contain;
              background-repeat: no-repeat;
              max-width: 100%;

              .artefact {
                max-height: 100%;
                max-width: 100%;

                /* &:not(:last-child) { */
                  position: absolute;
                  top: 0;
                /* } */
              }
            }

            .device-phone {
              left: 0;
              bottom: 0;
              height: 71%;
              aspect-ratio: 592/889;
              background-image: url(../img/artefacts/online-payments/device-phone.png);
              z-index: 3;
            }

            .device-tablet {
              top: 0;
              right: 0;
              height: 85%;
              aspect-ratio: 1634/1242;
              background-image: url(../img/artefacts/online-payments/device-tablet.png);
              z-index: 1;
            }
          }

          &.is-snapped .artefact {
            --wave-reveal-duration: 10s;
            --wave-reveal-gradient-width: 25%;
            mask-image: radial-gradient(
              circle at 120% 50%,
              transparent var(--wave-reveal-radius),
              /* Blur width will be the difference between transparent and black */
              black calc(var(--wave-reveal-radius) + var(--wave-reveal-gradient-width))
            );
            animation: wave-reveal var(--wave-reveal-duration) linear infinite;

            &:first-child {
              z-index: 4;
            }

            &:last-child {
              z-index: 2;
              animation-delay: calc(var(--wave-reveal-duration) / -5);
            }
          }

          &:not(.is-snapped) .composition {
            .device-tablet { transform: translate(-2dvh, -6dvh); }
            .device-phone { transform: translate(2dvh, 6dvh); }
          }

          .context-overlay {
            background: linear-gradient(193deg,
                                    rgb(0 0 0 / 0.5) 8%,
                                    rgb(0 0 0 / 0) 42%,
                                    rgb(0 0 0 / 0) 62%,
                                    rgb(0 0 0 / 0.75) 92%);
          }
        }

        &#slide-visual-design-system {

          .composition {
            padding: 6% 10%;
            align-items: center;
            justify-content: center;
            container-type: size; /* Allows use of cqh and cqw units */

            .group {
              position: relative;
              width: 100%;
              height: 100%;
              transform: rotate3d(2, 6, 0.975, 55deg) scale(0.75);
              transform-style: preserve-3d;
              perspective: 200dvw;
              
              /* Fill container, retaining own aspect ratio */
              --width-to-height-ratio: calc(5/4);
              height: min(100cqh, 100cqw / var(--width-to-height-ratio));
              width: min(100cqh * var(--width-to-height-ratio), 100cqw);

              .artefact {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 1px solid rgb(0 0 0 / 0.05);
                border-radius: min(4cqh, 4cqw);
                object-fit: cover;

                --z-gap: 10dvw;
                --z-index: 0;

                transform: translateZ(calc(var(--z-index) * var(--z-gap)));

                &:nth-child(1) { --z-index: -3; }
                &:nth-child(2) { --z-index: -2; }
                &:nth-child(3) { --z-index: -1; }
                &:nth-child(4) { --z-index: 0; }
                &:nth-child(5) { --z-index: 1; }
                &:nth-child(6) { --z-index: 2; }
              }
            }
          }

          &:not(.is-snapped) .composition .group {
            transform: rotate3d(1, 6, 0, 50deg) scale(0.75);

            .artefact { --z-gap: 2dvw; }
          }

          .context-overlay {
            background: linear-gradient(193deg,
                                    rgb(0 0 0 / 0.85) 8%,
                                    rgb(0 0 0 / 0) 42%,
                                    rgb(0 0 0 / 0) 62%,
                                    rgb(0 0 0 / 1) 92%);
          }
        }

        &#slide-visual-terminals {
          background-image: url(../img/backgrounds/bg-dark-waves-626-351.png);
          padding: var(--padding-content-block);
          container-type: size; /* Allows use of cqh and cqw units */

          .composition {
            position: relative;
            /* Fill container, retaining own aspect ratio */
            --width-to-height-ratio: calc(1025/1680);
            height: min(100cqh, 100cqw / var(--width-to-height-ratio));
  	        width: min(100cqh * var(--width-to-height-ratio), 100cqw);
            overflow: visible; /* Prevent cuts during fly-in transition */
            opacity: 1;

            .artefact {
              position: absolute;
              object-fit: contain;
              width: 100%;
              height: auto;

              &.screen {
                overflow: hidden;
                border-radius: 0.3cqw;
                aspect-ratio: 480/800;
                width: 57.5%;
                top: 12.5%;
                left: 17.5%;
                /* transform: matrix3d(0.975, 0.025, 0, -0.00006, -0.14, 0.94, 0, -0.00007, 0, 0, 1, 0, 0, 0, 0, 1); */
                /* transform: matrix3d( 0.975, 0.025, 0, -0.00015, -0.14, 0.94, 0, -0.00015, 0, 0, 1, 0, 0, 0, 0, 1); */
                /* Use calc on perspective so that it will adapt to any viewport/container size without distortion */
                transform: perspective(calc(100cqh*5))
                           rotateX(22deg) 
                           rotateY(-13deg) 
                           rotateZ(4.15deg) 
                           skewX(-4deg)
                           skewY(2.5deg)
                           scale(1.01);
                 video {
                   width: 100%;
                   height: 100%;
                 }
              }
            }
          }

          &:not(.is-snapped) .composition {
            transform: translate(1dvh, -7dvh);
          }

          .context-overlay {
            background: linear-gradient(193deg,
                                    rgb(0 0 0 / 0.5) 8%,
                                    rgb(0 0 0 / 0) 42%,
                                    rgb(0 0 0 / 0) 62%,
                                    rgb(0 0 0 / 1) 92%);
          }
        }

        &#slide-visual-maas-app {
          background-image: url(../img/backgrounds/tiny/bg-01-24x16.png);
          background-position: top center;

          .composition {
            display: flex;
            justify-content: right;
            align-items: center;
            padding-top: 5%;
            overflow: hidden;

            .tilted-group {
              display: flex;
              flex-direction: row;
              transform: translateX(clamp(0rem, 6rem - 12vw, 6rem)) rotate(-13deg);

              .group {
                display: flex;
                flex-direction: column;

                &:nth-child(2) { transform: translateY(-18%); }
                
                .device {
                  position: relative;
                  width: clamp(14dvw, 24dvh, 24dvw);
                  aspect-ratio: 402/874;

                  &::before {
                    content: '';
                    inset: -2.5% -5.9%;
                    background-image: url(../img/artefacts/maas/app/device-iphone-16-pro.png);
                    background-size: contain;
                    background-repeat: no-repeat;
                  }

                  .artefact {
                    width: 100%;
                    height: 100%;
                  }
                }
              }

              &, .group {
                gap: 4dvw;
              }
            }
          }
          
          &:not(.is-snapped) .composition .tilted-group .group {
            &:nth-child(1) { transform: translateY(-8%); }
            &:nth-child(2) { transform: translateY(-12%); }
            &:nth-child(3) { transform: translateY(-9%); }
          }

          &::before {
            backdrop-filter: blur(clamp(2rem, 5dvw, 4rem));
          }
        }

        &#slide-visual-toyota-app {
          padding: var(--padding-content-block);
          background-image: url(../img/backgrounds/bg-toyota-400x250.png);
          container-type: size; /* Allows use of cqh and cqw units */

          .composition {
            position: relative;
            /* Fill container, retaining own aspect ratio */
            --width-to-height-ratio: calc(722/954);
            height: min(100cqh, 100cqw / var(--width-to-height-ratio));
  	        width: min(100cqh * var(--width-to-height-ratio), 100cqw);
            overflow: visible; /* Prevent cuts during fly-in transition */
            
            .artefact {
              position: absolute;
              object-fit: contain;
              height: auto;

              &:nth-child(1) { width: 59%; top: 0; left: 0; }
              &:nth-child(2) { width: 66.7%; bottom: 0; right: 0; }
            }
          }

          &:not(.is-snapped) .artefact { 
            &:nth-child(1) { transform: translate(2dvh, -6dvh); }
            &:nth-child(2) { transform: translate(-2dvh, 6dvh); }
          }
        }

        &#slide-visual-destination-card {
          background-image: url(../img/backgrounds/bg-black-01-960x540.png);

          .composition {
            padding: 5rem var(--padding-content-block);

            .artefact {
              width: 100%;
              height: 100%;
              max-width: 42rem;
              object-fit: contain;
            }
          }

          &:not(.is-snapped) .composition { 
            transform: translate(-7%, 3%) scale(0.9);
          }

          .context-overlay {
            background: none;
          }
        }
      }

    }
  }
}

section#services {
  align-items: stretch;
  width: min(var(--content-block-width-max), 100%);
  gap: 6rem;

  .tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5rem;
    padding-bottom: 3rem; /* Room for shadow */
    /* min-height: 26.75rem;  */

    .switch-button-set {
      align-self: center;
    }

    .tab-content {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 5rem;
    }
  }

  .service {
    gap: 0.5rem 2rem;

    &[open] > summary .icon_chevron {
      opacity: 0.25;
    }

    & > summary {
      .title {
        display: flex;
        align-items: center;
        flex: 100 1 max-content;
        gap: 1rem;
      }

      .price {
        font-size: var(--text-size-medium);
        text-align: center;
        color: var(--responsive-text-secondary);
        flex: 1 1 content;
      }

      @media (width <= 37rem) {
        flex-direction: column;
        align-items: stretch;

        .price {
          text-align: left;
        }
      }
    }
    
    & > .body {
      /* Wrap content in div.body and apply padding/gaps to it, to prevent unwanted height in collapsed state */
      display: flex;
      flex-direction: column;
      gap: var(--spacing-gap-content-roomy);

      .value-proposition > p > b { color: var(--responsive-primary-medium); }
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 2rem;

      button, .button-link {
        flex: 1 0 0;
      }

      @media (width <= 60rem) {
        flex-direction: column;
        align-items: stretch;
      }
    }
  }  
}

section#usp-10x {
  position: relative;
  gap: 4rem;
  width: min(var(--content-block-width-max), 100%);

  .deco-huge-text {
    position: absolute;
    top: -7.5rem;
    z-index: -10;
    font-size: 12.5rem;
    width: 100vw;
    max-width: 100rem;
    font-family: var(--font-family-accent);
    font-weight: var(--heading-weight-bold);
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    text-wrap: nowrap;
    line-height: 1;
    padding-bottom: 1rem; /* Fix for cut off text weird bug */
    opacity: 0.12;
    /* Gradient outline trick */
    color: transparent;
    -webkit-text-stroke: 1px transparent;
    -webkit-text-fill-color: var(--responsive-background-default);
    background: radial-gradient(100% 100% at 30% 80%, var(--responsive-control-primary) 0%, var(--responsive-control-quaternary) 100%);
    background-clip: text;
  }

  /* .usp-10x-cases-carousel {
    padding-block: 4rem;
  } */

  .case {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4rem;
    padding: clamp(2rem, 6vw, 3.75rem) clamp(2rem, 6.5vw, 4rem);
    background: var(--responsive-background-subtle-transparent);
    border: 0.0625rem solid var(--responsive-control-subtle-transparent);
    border-radius: var(--corner-radius-xlarge);

    .controls {
      display: flex;
      align-items: end;
      justify-content: space-between;
      flex-wrap: wrap;
      row-gap: 2rem;

      .return {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        color: var(--responsive-text-primary);
        -webkit-user-select: none;
        user-select: none;

        .label {
          font-size: var(--heading-size-medium);
        }

        .number { 
          font-family: var(--font-family-accent);
          font-weight: var(--heading-weight-medium);
          font-size: 8.75rem;
          line-height: 0.6em;
          word-spacing: -0.1em;
          letter-spacing: -0.05em;
          opacity: 0.15;
          /* Gradient outline trick */
          color: transparent;
          -webkit-text-stroke: 1px transparent;
          -webkit-text-fill-color: var(--responsive-text-tertiary);
          background: radial-gradient(100% 100% at 30% 80%, var(--responsive-control-primary) 0%, var(--responsive-control-quaternary) 100%);
          background-clip: text;
        }
      }

      button {
        padding: 0;
      }
    }
  }

  .chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    padding-block: 2rem;
    width: 100%;
    max-width: 44rem;

    .chart {
      position: relative;
      display: flex;
      align-items: end;
      justify-content: space-around;
      margin-bottom: 4rem;
      width: 100%;

      .data-set {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-inline: clamp(0.5rem, 2vw, 1rem);

        .data-bars {
          display: flex;
          align-items: end;
          gap: 0.625rem;
          @media (width < 24rem) {
            gap: 0.4rem;
          }
        }

        .axis-label {
          position: absolute;
          top: 100%;
          width: 130%;
          padding-top: 1rem;
          text-align: center;
          font-family: var(--font-family-accent);
          font-size: clamp(var(--heading-size-xxsmall), 2.5vw, var(--heading-size-small));
          font-weight: var(--heading-weight-medium);
          line-height: var(--line-height-headings);
        }
        
        &.revenue {
          .bar.reference { height: 1.75rem;   }
          .bar.primary   { height: 7.4375rem; }
        }

        &.cost-savings {
          .bar.reference { height: 1.6875rem; }
          .bar.primary   { height: 9.0625rem; }
        }

        &.time-to-market {
          .bar.reference { height: 1.5625rem; }
          .bar.primary   { height: 9.8125rem; }
        }

        &.valuation {
          .bar.reference { height: 0.5625rem; }
          .bar.primary   { height: 12.5rem;   }
        }
      }

      .bar {
        position: relative;
        width: clamp(1.25rem, 4.5vw, 2.125rem);
        margin-top: 4rem;
        border-radius: 0.1875rem 0.1875rem 0 0;

        &.reference { background: var(--responsive-control-tertiary); }
        &.primary   { background: var(--responsive-primary-medium);   }
        
        .data-label {
          position: absolute;
          left: 50%;
          transform: translate(-50%, -115%);
          font-size: clamp(1.75rem, 5vw, 2.25rem);
          font-weight: var(--heading-weight-bold);
          font-family: var(--font-family-accent);
        }
      }

      .x-axis {
        position: absolute;
        bottom: 0;
        width: 100%;
        border-radius: 0.125rem;
        height: 0.0625rem;
        background: linear-gradient(90deg, 
                                    var(--responsive-control-supersubtle-transparent) 0%, 
                                    var(--responsive-control-tertiary) 50%, 
                                    var(--responsive-control-supersubtle-transparent) 100%);
      }
    }

    .legend {
      display: flex;
      gap: 2rem;
      color: var(--responsive-text-secondary);
      font-size: var(--text-size-medium);

      .label {
        display: flex;
        align-items: center;
        gap: 0.75rem;

        @media (width < 24rem) {
          flex-direction: column;
          text-align: center;
        }
      }

      .sample {
        border-radius: 1rem;
        width: 1rem;
        height: 0.25rem;

        &.reference { background: var(--responsive-control-tertiary); }
        &.primary   { background: var(--responsive-primary-medium);   }
      }
    }
  }

  .source {
    color: var(--responsive-text-tertiary); 
    font-size: var(--text-size-small);
    text-align: center;
  }
}


/* Logo colors */
[data-color-mode='light'] .svg {

  &.svg_logo_adplist { color: #0A243F; }
  
  &.svg_logo_medium {
    & > use { color: white; }
    & > use:nth-child(1) { color: black; }
  }

  &.svg_logo_ccv {
    & > use:nth-child(1) { color: black; }
    & > use:nth-child(2) { color: #0395FF; }
  }

  &.svg_logo_apg {
    & > use:nth-child(1) { color: #CE5368; }
    & > use:nth-child(2) { color: #2E318F; }
  }

  &.svg_logo_qpark      { color: #000; }
  &.svg_logo_mig        { color: #2D2C28; }
  &.svg_logo_louwman    { color: #163072; }
  &.svg_logo_ahold      { color: #005555; }
  &.svg_logo_rentswap   { color: #282828; }
  &.svg_logo_levellevel { color: #282828; }
}

[data-color-mode='dark'] .svg {
  &.svg_logo_adplist { color: white; }
  
  &.svg_logo_medium {
    & > use { color: black; }
    & > use:nth-child(1) { color: white; }
  }

  &.svg_logo_ahold { color: #00B2B2; }
}

section#client-brands {
  padding-block: 4rem;
  align-items: center;

  .logo-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .logo-container {
      position: relative;
      display: grid;
      overflow: visible;

      &, & .logo { height: clamp(6rem, 12vw, 8rem); }
      
      &.small  { width: clamp(8.6625rem, 15.125vw, 13.75rem); }
      &.medium { width: clamp(9.84375rem, 17.2062vw, 15.625rem); }
      &.large  { width: clamp(11.8125rem, 21.5138vw, 18.75rem); }
    }

    .logo {
      grid-area: 1 / 1; /* Place all content on the same spot, while container still fits size of the largest child */
      display: flex;
      justify-content: center;
      align-items: center;
      color: inherit;
      pointer-events: none;
      transition: opacity var(--transition-duration-slow) var(--bezier-ease-in-out),
                  filter var(--transition-duration-slow) var(--bezier-ease-in-out),
                  transform var(--transition-duration-xxslow) var(--bezier-ease-in-out);
      opacity: 0;
      filter: blur(0.25rem);
      transform: translateY(100%);

      &.active {
        transform: none;
        opacity: 1;
        filter: none;
        pointer-events: auto;
        transition: none; /* Transition out, animate in. */
        animation: move-in-from-above var(--transition-duration-xxslow) var(--bezier-ease-in-out);
      }

      .svg_logo_ccv { width: clamp(4.667425rem, 8.89vw, 6.66775rem); }
      .svg_logo_qpark { width: clamp(5.55625rem, 10.58vw, 7.9375rem); }
      .svg_logo_mig { width: clamp(8.225rem, 15.68vw, 11.75rem); }
      .svg_logo_gall_gall { width: clamp(6.5625rem, 12.5vw, 9.375rem); }
      .svg_logo_jumbo { width: clamp(6.7375rem, 12.83vw, 9.625rem); }
      .svg_logo_albert_heijn { width: clamp(2.8rem, 5.33vw, 4rem); }
      .svg_logo_etos { width: clamp(2.8rem, 5.33vw, 4rem); }
      .svg_logo_louwman { width: clamp(6.7375rem, 12.83vw, 9.625rem); }
      .svg_logo_toyota { width: clamp(8.00625rem, 15.25vw, 11.4375rem); }
      .svg_logo_ahold { width: clamp(7.35rem, 14vw, 10.5rem); }
      .svg_logo_isic { width: clamp(2.8rem, 5.33vw, 4rem); }
      .svg_logo_kfc { width: clamp(2.8rem, 5.33vw, 4rem); }
    } 
  }

  & > .title {
    padding-inline: 3rem;
    width: 100%;
    text-align: center;
    font-family: var(--font-family-primary);
    font-weight: var(--text-weight-regular);
    color: var(--responsive-text-secondary);
    order: 1;
  }
}

section#testimonials {
  gap: clamp(0rem, 8vw, 7rem);

  .testimonial, .preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .tab-content-container {
    position: relative;
    display: grid;
    grid-template-rows: 1fr;
    place-items: center;
    align-items: stretch;
    overflow: clip;
    overflow-clip-margin: 5rem;
  }

  .testimonial {
    grid-area: 1 / 1; /* Place all content on the same spot, while container still fits size of the largest child */
    width: 100%;
    max-width: 50rem;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    opacity: 0;
    filter: blur(0.4rem);
    transition-duration: var(--transition-duration-slow);

    & * { opacity: 0; }/* Speeds up opacity transtion on top of container transition */

    &.active {
      pointer-events: auto;
      user-select: auto;
      opacity: 1;
      filter: none;
      & * { opacity: 1; }
    }

    &:not(.active) { 
      transform: translateY(20%);
    }

    & * { text-align: center; }

    .testimonial-content {
      position: relative;
      padding: 10%;
    }

    .title {
      font-size: clamp(var(--heading-size-small), 5vw, var(--heading-size-medium));
      font-weight: var(--heading-weight-medium);
      margin-bottom: clamp(1rem, 3vw, 2.5rem);
    }

    .text {
      font-size: clamp(var(--text-size-medium), 3vw, var(--text-size-large));
    }

    .avatar {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 5rem;
      margin-bottom: 1.25rem;
      overflow: hidden;
      -webkit-user-select: none;
      user-select: none;

      img { width: 100%; }
    }

    .name, .role {
      font-size: var(--text-size-medium);
    }
    
    .role {
      color: var(--responsive-text-secondary);
    }
  }

  .preview-row {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    gap: clamp(1rem, 2vw, 2rem);
    padding: 1rem 1rem 2.5rem 1rem;
  }

  .preview {
    flex: 1 0 0;
    max-width: 12rem;
    gap: 0.625rem;
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    background: var(--responsive-background-supersubtle-transparent);
    border-radius: var(--corner-radius-large);

    .title {
      font-size: var(--text-size-medium);
      font-family: var(--font-family-accent);
      line-height: var(--line-height-headings);
      white-space: nowrap;
      text-overflow: clip;
      margin-bottom: 1.375rem;
    }

    .name {
      font-size: clamp(var(--text-size-small), 2vw, var(--text-size-medium));
      font-weight: var(--text-weight-medium);
      color: var(--responsive-text-secondary);
      white-space: nowrap;
    }

    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 2rem;

      .svg_logo_rentswap { width: 6.5rem; }
      .svg_logo_ccv { width: 3.5rem; }
      .svg_logo_apg { width: 4rem; }
      .svg_logo_levellevel { width: 2.25rem; }
    }

    &.clickable {
      .name, .logo { opacity: 0.8; }
    }

    [data-can-hover='true'] &:hover, [data-can-hover] &.active {
      background: var(--responsive-background-subtle-transparent);
      box-shadow: var(--shadow-elevation-low);

      .name, .logo { opacity: 1; }
    }
  }

  @media (width < 54rem) {
    .preview-row {
      width: calc(2 * var(--padding-viewport-horizontal) + 100%);
      margin-left: calc(-1 * var(--padding-viewport-horizontal));
    }
    .preview {
      padding: 1rem 1.5rem;
      .title { display: none; }
    }
  }
}

section#mentorship {
  gap: 4rem;
  width: clamp(72rem, 90dvw, 76rem);

  .heading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    font-size: clamp(var(--heading-size-large), 5dvw, var(--heading-size-xlarge));
    
    .svg_laurel_wreath {
      width: 3rem;
      height: 5.875rem;
      &:last-child { transform: scaleX(-1); }
    }
  }

  .sessions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    width: 100%;

    .session {
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 0.625rem;
      max-width: 30rem;

      .title .icon {
        display: inline;
        vertical-align: text-top;
        margin-left: 0.5rem;
        color: var(--responsive-decorative-pink);
      }

      .price {
        color: var(--responsive-text-tertiary);
      }

      .description {
        flex: 1;
        padding-bottom: 2rem;

        ul {
          padding-left: 1.5em;
        }
      }

      .button-link {
        width: 100%;
      }
    }
  }

  @media (width < 68rem) {
    width: 100%;

    .sessions {
      flex-direction: column;
      align-items: center;
      gap: 4rem;

      .session {
        width: 100%;
      }
    }
  }

  @media (width < 40rem) {
    .heading {
      scale: 0.75;
    }
  }

  @media (width < 20rem) {
    .svg_laurel_wreath {
      display: none;
    }
  }
}

article {
  width: min(var(--paragraph-width-max, 100%));
  /* ::target-text {} */
  & > .thumbnail {
    display: block;
    width: 100%;
    /* height: fit-content; */
    background: var(--responsive-background-subtle);
  }
}

.embed {
  position: relative;
  background: none;
  border-radius: var(--corner-radius-large);
  overflow: hidden;
  width: clamp(350px, 100%, 500px);
  height: 675px; 

  & iframe {
    border: none;
    border-radius: var(--corner-radius-large);
    
    width: 100%;
    height: 100%;
  }

  &.adplist {
    background: #131313;

    &::before {
      background: #131313;
      height: 17px;
      border-radius: var(--corner-radius-large) var(--corner-radius-large) 0 0;
      width: 100%;
    }
    /* this doesn't work yet. Needs .scrollbar class to be added in JS */
    &:has(iframe.scrollbar)::before {
      overflow-y: auto;
      scrollbar-gutter: stable;
    }
  }
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  padding-top: 6rem;
  padding-inline: 8%;
  gap: 8rem;

  .svg_signature_thin {
    width: clamp(8rem, 24vw, 12.5rem);
    aspect-ratio: 180/67;
    color: var(--responsive-control-secondary);
  }

  .copyright {
    color: var(--responsive-text-subtle);
    font-size: var(--text-size-xsmall);

    [data-can-hover='true'] &:hover {
      color: var(--responsive-text-secondary);
    }
  }

  .site-metadata {
    color: var(--responsive-background-subtle);
    text-align: center;
  }
}

.footer-quote {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 50rem;
  aspect-ratio: 2/1;
  container-type: inline-size;

  .quote-text {
    width: 82.5%;
    text-align: center;
    font-size: max(var(--text-size-medium), 3.25cqw);
    font-weight: var(--text-weight-regular);
    line-height: var(--line-height-text);
    font-style: italic;
  }
}

.quote-as-background {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  aspect-ratio: 2/1;
  background: radial-gradient(50% 50% at 50% 50%, 
                              var(--responsive-background-subtle) 0%,
                              var(--responsive-background-default) 100%);
}

.svg_quote {
  position: absolute;
  width: 8%;
  aspect-ratio: 64/200;
  mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.2) 50%, rgb(0 0 0 / 0.6) 75%, black);

  &.open-1, &.open-2 { bottom: 50%; left: 0; }
  &.open-2 { left: 2.5%; }
  &.close-1, &.close-2 { top: 50%; right: 0; transform: rotate(180deg); }
  &.close-2 { right: 2.5%; }
}