:root {
    --heading-font-family: 'Bitter', serif;
    --body-font-family: 'Roboto', sans-serif;
  
    --primary-500: #f05837;
    --primary-300: color-mix(in oklch, var(--primary-500) 45%, var(--neutral-050));
    --primary-400: color-mix(in oklch, var(--primary-500) 70%, var(--neutral-050));
    --primary-600: color-mix(in oklch, var(--primary-500) 75%, var(--neutral-900));
    --primary-700: color-mix(in oklch, var(--primary-500) 60%, var(--neutral-900));
    --primary-alpha-10: color-mix(in srgb, var(--primary-500) 10%, transparent);
    --primary-alpha-20: color-mix(in srgb, var(--primary-500) 20%, transparent);
    --primary-alpha-50: color-mix(in srgb, var(--primary-500) 50%, transparent);
  
    --secondary-500: #354052;
    --secondary-400: color-mix(in oklch, var(--secondary-500) 70%, var(--neutral-050));
    --secondary-600: color-mix(in oklch, var(--secondary-500) 75%, var(--neutral-900));

    --accent-500: #37ddb2;
    --accent-400: color-mix(in oklch, var(--accent-500) 45%, var(--neutral-050));
    --accent-600: color-mix(in oklch, var(--accent-500) 75%, var(--neutral-900));
  
    --neutral-050: #ffffff;
    --neutral-100: #f2f8fa;
    --neutral-200: #d8e2e6;
    --neutral-300: #b7c4c9;
    --neutral-400: #8d9fa6;
    --neutral-500: #72858c;
    --neutral-600: #4b5f66;
    --neutral-700: #34444a;
    --neutral-800: #243136;
    --neutral-900: #11191c;

    --danger-300: color-mix(in oklch, var(--danger-500) 45%, var(--neutral-050));
    --danger-400: color-mix(in oklch, var(--danger-500) 70%, var(--neutral-050));
    --danger-600: color-mix(in oklch, var(--danger-500) 82%, var(--neutral-900));
    --danger-700: color-mix(in oklch, var(--danger-500) 65%, var(--neutral-900));
    --danger-alpha-10: color-mix(in srgb, var(--danger-500) 10%, transparent);
    --danger-alpha-20: color-mix(in srgb, var(--danger-500) 20%, transparent);
    --danger-alpha-50: color-mix(in srgb, var(--danger-500) 50%, transparent);
    
    --success-300: color-mix(in oklch, var(--success-500) 45%, var(--neutral-050));
    --success-400: color-mix(in oklch, var(--success-500) 70%, var(--neutral-050));
    --success-600: color-mix(in oklch, var(--success-500) 82%, var(--neutral-900));
    --success-700: color-mix(in oklch, var(--success-500) 65%, var(--neutral-900));
    --success-alpha-10: color-mix(in srgb, var(--success-500) 10%, transparent);
    --success-alpha-20: color-mix(in srgb, var(--success-500) 20%, transparent);
    --success-alpha-50: color-mix(in srgb, var(--success-500) 50%, transparent);

    --warning-300: color-mix(in oklch, var(--warning-500) 45%, var(--neutral-050));
    --warning-400: color-mix(in oklch, var(--warning-500) 70%, var(--neutral-050));
    --warning-600: color-mix(in oklch, var(--warning-500) 82%, var(--neutral-900));
    --warning-700: color-mix(in oklch, var(--warning-500) 65%, var(--neutral-900));
    --warning-alpha-10: color-mix(in srgb, var(--warning-500) 10%, transparent);
    --warning-alpha-20: color-mix(in srgb, var(--warning-500) 20%, transparent);
    --warning-alpha-50: color-mix(in srgb, var(--warning-500) 50%, transparent);
    
    --information-300: color-mix(in oklch, var(--information-500) 45%, var(--neutral-050));
    --information-400: color-mix(in oklch, var(--information-500) 70%, var(--neutral-050));
    --information-600: color-mix(in oklch, var(--information-500) 82%, var(--neutral-900));
    --information-700: color-mix(in oklch, var(--information-500) 65%, var(--neutral-900));
    --information-alpha-10: color-mix(in srgb, var(--information-500) 10%, transparent);
    --information-alpha-20: color-mix(in srgb, var(--information-500) 20%, transparent);
    --information-alpha-50: color-mix(in srgb, var(--information-500) 50%, transparent);

    --page-background-color: var(--neutral-050);

    --color-bg: var(--neutral-050);
    --color-bg-accent: var(--neutral-200);
    --color-title: var(--secondary-500);
    --color-subtitle: var(--neutral-500);
    --color-text: var(--neutral-800);
    --color-text-light: var(--neutral-050);
    --color-text-muted: var(--neutral-500);
    --color-link: var(--primary-700);
    --color-border: var(--neutral-200);

    --color-primary: var(--primary-500);
    --color-primary-hover: var(--primary-700);
    --color-primary-contrast: var(--neutral-800);
    --color-primary-hover-contrast: var(--neutral-100);

    --color-secondary: var(--secondary-500);
    --color-secondary-hover: var(--secondary-400);
    --color-secondary-contrast: var(--neutral-100);
    --color-secondary-hover-contrast: var(--neutral-100);

    --color-accent: var(--accent-500);
    --color-accent-hover: var(--accent-600);
    --color-accent-contrast: var(--neutral-800);
    --color-accent-hover-contrast: var(--neutral-100);

    --nav-font-size: clamp(1rem, 1.6vw, 1.125rem); /* 16px - 18px */
    --body-font-size: clamp(0.965rem, 1.6vw, 1.125rem); /* 15px - 18px */
    --small-font-size: clamp(0.825rem, 1.35vw, 0.975rem);
    --heading-1-size: clamp(2rem, 4.5vw, 4rem);
    --heading-2-size: clamp(1.75rem, 3.9vw, 3rem);
    --heading-3-size: clamp(1.215rem, 2.15vw, 1.75rem);   
    --heading-4-size: clamp(1.125rem, 2vw, 1.5rem); 
    --heading-5-size: clamp(1.125rem, 1.6vw, 1.3125rem); 

    --lineheight-sm: 1;
    --lineheight-md: 1.25;
    --lineheight-lg: 1.5;
    --lineheight-xl: 1.75;

    --heading-lineheight: var(--lineheight-md);
    --body-lineheight: var(--lineheight-xl);

    --width-100: 100%;
    --width-xl: 1640px;
    --width-lg: 1440px;
    --width-md: 1200px;
    --width-sm: 960px;
    --width-xs: 640px;

    --page-width: var(--width-lg);
  
    --section-spacing: clamp(1.5rem, 7.75vw, 5.5rem);
    --container-spacing: clamp(2cqw, 3.5vw, 4cqw);
    --element-spacing: clamp(1.175rem, 3vw, 1.55rem);
    
    --border-radius-xs: 0.25rem;
    --border-radius-sm: 0.5rem;
    --border-radius-md: clamp(0.615rem, 0.735rem + 0.45vw, 1rem);
    --border-radius-lg: clamp(0.915rem, 1rem + 0.75vw, 1.5rem);
    --border-radius-xl: clamp(1.05rem, 1.2rem + 1.1vw, 2.125rem);
}

@font-face {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''), url('/assets/fonts/bitter-regular.woff2') format('woff2'), url('/assets/fonts/bitter-regular.woff') format('woff');
}

@font-face {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''), url('/assets/fonts/bitter-bold.woff2') format('woff2'), url('/assets/fonts/bitter-bold.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local(''), url('/assets/fonts/Roboto-Light.woff2') format('woff2'), url('/assets/fonts/roboto-light.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''), url('/assets/fonts/roboto-regular.woff2') format('woff2'), url('/assets/fonts/roboto-regular.woff') format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''), url('/assets/fonts/roboto-bold.woff2') format('woff2'), url('/assets/fonts/roboto-bold.woff') format('woff');
}

.light {
    --color-bg: var(--neutral-050);
    --color-bg-accent: var(--neutral-200);
    --color-text: var(--neutral-800);
    --color-title: var(--secondary-500);
    --color-subtitle: var(--neutral-300);
    --color-text-muted: var(--neutral-400);
    --color-link: var(--accent-600);
    --color-border: var(--neutral-200);

    --color-success: var(--success-500);
    --color-success-bg: var(--success-alpha-20);
    --color-success-border: var(--success-500);
    --color-success-text: var(--success-500);

    --color-information: var(--information-500);
    --color-information-bg: var(--information-alpha-20);
    --color-information-border: var(--information-500);
    --color-information-text: var(--information-500);

    --color-warning: var(--warning-600);
    --color-warning-bg: var(--warning-alpha-20);
    --color-warning-border: var(--warning-600);
    --color-warning-text: var(--warning-600);

    --color-danger: var(--danger-500);
    --color-danger-bg: var(--danger-alpha-20);
    --color-danger-border: var(--danger-500);
    --color-danger-text: var(--danger-500);
}

.light-shade {
    --color-bg: var(--neutral-200);
    --color-bg-accent: var(--neutral-300);
    --color-text: var(--neutral-800);
    --color-title: var(--secondary-500);
    --color-subtitle: var(--neutral-300);
    --color-text-muted: var(--neutral-400);
    --color-link: var(--accent-600);
    --color-border: var(--neutral-200);

    --color-success: var(--success-600);
    --color-success-bg: var(--success-alpha-20);
    --color-success-border: var(--success-600);
    --color-success-text: var(--success-600);

    --color-information: var(--information-600);
    --color-information-bg: var(--information-alpha-20);
    --color-information-border: var(--information-600);
    --color-information-text: var(--information-600);

    --color-warning: var(--warning-700);
    --color-warning-bg: var(--warning-alpha-20);
    --color-warning-border: var(--warning-700);
    --color-warning-text: var(--warning-700);

    --color-danger: var(--danger-600);
    --color-danger-bg: var(--danger-alpha-20);
    --color-danger-border: var(--danger-600);
    --color-danger-text: var(--danger-600);
}

.dark-shade {
    --color-bg: var(--neutral-700);
    --color-bg-accent: var(--neutral-900);
    --color-text: var(--neutral-100);
    --color-title: var(--neutral-050);
    --color-subtitle: var(--neutral-400);
    --color-text-muted: var(--neutral-500);
    --color-link: var(--accent-500);
    --color-border: var(--neutral-600);

    --color-success: var(--success-300);
    --color-success-bg: var(--success-700);
    --color-success-border: var(--success-300);
    --color-success-text: var(--success-300);

    --color-information: var(--information-300);
    --color-information-bg: var(--information-700);
    --color-information-border: var(--information-300);
    --color-information-text: var(--information-300);

    --color-warning: var(--warning-300);
    --color-warning-bg: var(--warning-700);
    --color-warning-border: var(--warning-300);
    --color-warning-text: var(--warning-300);

    --color-danger: var(--danger-300);
    --color-danger-bg: var(--danger-700);
    --color-danger-border: var(--danger-300);
    --color-danger-text: var(--danger-300);
}

.dark {
    --color-bg: var(--neutral-900);
    --color-bg-accent: var(--neutral-800);
    --color-text: var(--neutral-100);
    --color-title: var(--neutral-050);
    --color-subtitle: var(--neutral-500);
    --color-text-muted: var(--neutral-500);
    --color-link: var(--accent-500);
    --color-border: var(--neutral-700);

    --color-success: var(--success-300);
    --color-success-bg: var(--success-700);
    --color-success-border: var(--success-300);
    --color-success-text: var(--success-300);

    --color-information: var(--information-300);
    --color-information-bg: var(--information-700);
    --color-information-border: var(--information-300);
    --color-information-text: var(--information-300);

    --color-warning: var(--warning-300);
    --color-warning-bg: var(--warning-700);
    --color-warning-border: var(--warning-300);
    --color-warning-text: var(--warning-300);

    --color-danger: var(--danger-300);
    --color-danger-bg: var(--danger-700);
    --color-danger-border: var(--danger-300);
    --color-danger-text: var(--danger-300);
}

html:focus-within { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--color-primary); }
* { scroll-margin-top: var(--section-spacing); scroll-margin-bottom: var(--section-spacing); }
::selection { background-color: var(--color-primary); color: var(--color-primary-contrast); }

body {
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    line-height: var(--body-lineheight);
    color: var(--color-text);
    background-color: var(--page-background-color);
}

@supports (interpolate-size: allow-keywords) {
    details { interpolate-size: allow-keywords; }

    details::details-content {
        height: 0;
        overflow-y: clip;
        transition: height 0.25s ease, content-visibility 0.25s ease allow-discrete;
    }

    details[open]::details-content { height: auto; }
}


summary::-webkit-details-marker { display: none; }

summary { 
    font-weight: bold; 
    font-size: var(--heading-5-size); 
    cursor: pointer;
    transition: background-color 0.2s ease;
}

summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--element-spacing);
    display: inline-block;
    width: 16px;
    height: 16px;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

details[open] summary::after { transform: translateY(-50%) rotate(180deg); }

[hidden], template { display: none; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

*, *:before, *:after {
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
}

.skip {
    position: absolute;
    left: 1rem;
    top: 1rem;
    transform: translateY(-200%);
    z-index: 1000;
    padding: 0.75rem 1rem;
    background: var(--neutral-050);
    color: var(--color-text);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.skip:focus, .skip:focus-visible { transform: translateY(0); }

p, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { overflow-wrap: break-word; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--heading-font-family); font-weight: 700; line-height: var(--heading-lineheight); }
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-weight: 700; }
h5, .h5, h6, .h6 { font-family: var(--body-font-family); font-weight: 400; }

h1, .h1 { font-size: var(--heading-1-size); }
h2, .h2 { font-size: var(--heading-2-size); }
h3, .h3 { font-size: var(--heading-3-size); }
h4, .h4, h5, .h5 { font-size: var(--heading-4-size); }
h6, .h6 { font-size: var(--heading-5-size); }

.h1, .h2, .h3, .h4, .h5, .h6, .title, .subtitle { display: block; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--color-title); }
h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--color-subtitle); }
p, li, dd, dt { color: var(--color-text); }
a { color: var(--color-link); }
small, .muted { color: var(--color-text-muted); }

strong, b { font-weight: bold; }
em, cite, i, q { font-style: italic; }
s { text-decoration: line-through; }
u { text-decoration: underline; font-style: normal; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
del { color: var(--color-text-muted); background: var(--neutral-200); text-decoration: line-through; padding: 0.1em 0.3em; }
ins { background: var(--neutral-200); text-decoration: underline; padding: 0.1em 0.3em; }
mark { background: var(--color-accent); padding: 0.1em 0.3em; }
picture, img, svg, iframe, video, audio, canvas, progress, input, button, textarea, select { display: block; max-width: 100%; }
picture { position: relative; }
picture img { object-fit: cover; }
.image { border-radius: var(--image-border-radius); overflow: hidden; }
audio:not([controls]) { display: none; height: 0; }
input, button, textarea, select { font: inherit; color: inherit; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: var(--small-font-size); }
form { width: 100%; }

hr {
    display: block;
    width: 100%;
    height: 1px;
    border: none;
    margin-bottom: var(--element-spacing);
    background-color: var(--color-text-muted);
}

button, input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
}

input[type="search"] { -webkit-appearance: none; appearance: none; }

blockquote {
    font-family: var(--body-font-family);
    font-size: var(--heading-5-size);
    color: var(--color-text-muted);
    background-color: var(--neutral-200);
    border-left: 4px solid var(--color-accent);
    padding: 1rem 1.5rem;
    font-style: italic;
}

blockquote p { margin: 0; }

a { color: var(--color-accent); text-decoration: underline; transition: color 0.3s ease; }
a:hover { color: var(--color-accent-hover); }

.container {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    padding: 4cqw 6cqw;
    width: 100%;
    max-width: 100%;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    container-type: inline-size;
    padding: 4cqw 4cqw;
}

.col { flex: 1 1 0%; }
[class*="col-xs-"] { flex: 0 0 auto; }
.col-xs-1-1 { width: 100%; }
.col-xs-2-1 { width: 50%; }
.col-xs-3-1 { width: 33.333%; }
.col-xs-3-2 { width: 66.666%; }
.col-xs-4-1 { width: 25%; }
.col-xs-4-3 { width: 75%; }
.col-xs-5-1 { width: 20%; }
.col-xs-6-1 { width: 16.6667%; }

.container {
    background: var(--color-bg);
    color: var(--color-text);
}

.card {
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--card-border-radius);
}


a:hover, .btn-primary:hover, .btn-secondary:hover, .btn-accent:hover, 
button:hover, .btn-readmore:hover { cursor: pointer; }

.btn, button, input[type="submit"], input[type="reset"] {
    display: inline-block;
    transition: padding 0.3s ease,background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

button, input[type="submit"], input[type="reset"] {
    padding: calc(var(--element-spacing) * 0.5) calc(var(--element-spacing) * 1.5);
    background-color: var(--neutral-200);
}

.btn {
    font-weight: bold;
    border-radius: var(--button-border-radius);
}

.btn, .btn-readmore { text-decoration: none; }

.btn.btn-primary, .btn.btn-secondary, .btn.btn-accent {
    padding: calc(var(--element-spacing) * 0.5) calc(var(--element-spacing) * 1.5);
}

.btn-primary { 
    color: var(--color-primary-contrast);
    background-color: var(--color-primary);
}

.btn-secondary, button, input[type="submit"] {
    color: var(--color-secondary-contrast);
    background-color: var(--color-secondary);
}

.btn-accent {
    color: var(--color-accent-contrast);
    background-color: var(--color-accent);
}

.btn-primary:hover { 
    color: var(--color-primary-hover-contrast);
    background-color: var(--color-primary-hover);
}

.btn-secondary:hover, button:hover, input[type="submit"]:hover { 
    color: var(--color-secondary-hover-contrast); 
    background-color: var(--color-secondary-hover);
}
.btn-accent:hover {
    color: var(--color-accent-hover-contrast);
    background-color: var(--color-accent-hover);
}

.btn-outline {
    color: var(--color-text);
    background-color: transparent !important;
    box-shadow: inset 0px 0px 0px 2px var(--color-text);
}

.btn-primary.btn-outline {
    color: var(--color-primary);
    box-shadow: inset 0px 0px 0px 2px var(--color-primary);
}

.btn-secondary.btn-outline {
    color: var(--color-secondary);
    box-shadow: inset 0px 0px 0px 2px var(--color-secondary);
}

.btn-accent.btn-outline {
    color: var(--color-accent);
    box-shadow: inset 0px 0px 0px 2px var(--color-accent);
}

.btn-primary.btn-outline:hover {
    color: var(--color-primary-hover);
    box-shadow: 0px 0px 2px 3px var(--color-primary-hover);
}

.btn-secondary.btn-outline:hover {
    color: var(--color-secondary-hover);
    box-shadow: 0px 0px 2px 3px var(--color-secondary-hover);
}

.btn-accent.btn-outline:hover {
    color: var(--color-accent-hover);
    box-shadow: 0px 0px 2px 3px var(--color-accent-hover);
}

.required, .optional {
    position: relative;
    top: -0.5em;
    font-size: 80%;
    font-style: italic;
}

.required { font-weight: bold; color: var(--color-danger-text); }
.optional { opacity: 0.75; }

.form-field__helper-text {
    font-size: var(--small-font-size);
    font-style: italic;
    color: var(--color-text);
    line-height: var(--lineheight-md);
}

.form-field__helper-text { margin-top: calc(var(--element-spacing) * 0.35); }
.form-field-4 .form-field__helper-text, .form-field-5 .form-field__helper-text { margin-top: 0; margin-bottom: calc(var(--element-spacing) * 0.35); }

.form-field { position: relative; width: 100%; grid-column: span 12; }

.form-field input, .form-field textarea, .form-field select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: calc(var(--element-spacing) * 1.25) calc(var(--element-spacing) * 0.25) 6px;
    border-bottom: 1px solid var(--color-text-muted);
    border-radius: var(--input-border-radius);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 18px;
    line-height: var(--lineheight-lg);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-field textarea { min-height: 200px; resize: vertical; }

.form-field__label {
    position: absolute;
    left: calc(var(--element-spacing) * 0.25);
    top: 8px;
    font-size: var(--small-font-size);
    line-height: 20px;
    color: var(--color-text-muted);
    pointer-events: none;
    transition: top 150ms linear, font-size 150ms linear, line-height 150ms linear, color 150ms linear;
}

.form-field-4 legend {
    position: relative;
    left: calc(var(--element-spacing) * 0.25);
    color: var(--color-text);
}

.form-field input:placeholder-shown + .form-field__label, .form-field textarea:placeholder-shown + .form-field__label {
    top: calc(var(--element-spacing) * 0.7);
    font-size: var(--body-font-size);
    line-height: var(--lineheight-xl);
}

.form-field input:focus + .form-field__label, .form-field textarea:focus + .form-field__label {
    top: 8px;
    font-size: var(--small-font-size);
    line-height: var(--lineheight-md);
    color: var(--color-primary);
}

.form-field input:focus, .form-field textarea:focus {
    border-color: transparent;
    box-shadow: 0 3px 0 0px var(--color-primary);
}

.form-field__options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: calc(var(--element-spacing) / 2);
}

.form-field--error input, .form-field--error textarea, .form-field--error select {
    box-shadow: 0px 0px 2px 2px var(--color-danger-border);
}

.form-field--error .form-field__label, 
.form-field--error textarea .form-field__label, 
.form-field--error select .form-field__label {
    color: var(--color-danger-text);
}

.form-field__error {
    font-size: var(--small-font-size);
    font-style: italic;
    line-height: var(--lineheight-md);
    margin-top: calc(var(--element-spacing) * 0.35);
    color: var(--color-danger-text);
}

.feedback {
    position: relative;
    display: block;
    width: 100%;
    padding: calc(var(--element-spacing) / 2);
    padding-left: calc(30px + var(--element-spacing));
    margin: calc(var(--element-spacing) / 2) 0;
    color: var(--color-information-text);
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-information-border);
    border-radius: var(--card-border-radius);
    background-color: var(--color-information-bg);
}

.feedback::before {
    content: '';
    display: block;
    position: absolute;
    top: calc(var(--element-spacing) / 2);
    left: calc(var(--element-spacing) / 2);
    width: 30px;
    height: 30px;
    background-color: var(--color-information);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.feedback * {
    color: inherit;
}

.feedback-success {
    color: var(--color-success-text);
    border-color: var(--color-success-border);
    background-color: var(--color-success-bg);
}

.feedback-success::before {
    background-color: var(--color-success);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16 9-5.5 5.5L8 12'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16 9-5.5 5.5L8 12'/%3E%3C/svg%3E");
}

.feedback-warning {
    color: var(--color-warning-text);
    border-color: var(--color-warning-border);
    background-color: var(--color-warning-bg);
}

.feedback-warning::before {
    background-color: var(--color-warning);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
}

.feedback-error {
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
    background-color: var(--color-danger-bg);
}

.feedback-error::before {
    background-color: var(--color-danger);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
}

/* FISHUAL */

#fishual-logo .fsh-eye {
  fill: var(--color-text);
}

#fishual-logo .fsh {
  stroke: var(--color-text);
}

.fish-pond {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.fish-pond .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4vw;
    text-align: center;
    z-index: 1;
    pointer-events: none;
}

.fish-pond .content h1 {
 	font-size: calc(var(--heading-1-size) * 2); 
    color: color-mix(in oklch, var(--color-bg) 90%, var(--color-text));
    pointer-events: none;
}

.fish-pond .content p {
 	font-size: calc(var(--body-font-size) * 2);
    color: color-mix(in oklch, var(--color-bg) 95%, var(--color-text));
    pointer-events: none;
}

.fish-roamer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 154px;
    will-change: transform;
  	z-index: 2;
}

.fish-facing, .fish-reaction, .fish-hover { width: 100%; height: 100%; }
.fish-facing { transform-origin: center; }
.fish-reaction { transform-origin: center; }
.fish-hover { cursor: pointer; transform-origin: center; transition: transform 0.3s ease; }
.fish-hover:hover { transform: scale(1.12); }
.fish-hover svg { width: 100%; height: auto; }

/* FISHUAL */

@media (min-width: 768px) {
    .col-sm-1-1 { width: 100%; }
    .col-sm-2-1 { width: 50%; }
    .col-sm-3-1 { width: 33.333%; }
    .col-sm-3-2 { width: 66.666%; }
    .col-sm-4-1 { width: 25%; }
    .col-sm-4-3 { width: 75%; }
    .col-sm-5-1 { width: 20%; }
    .col-sm-6-1 { width: 16.6667%; }
}

@media (min-width: 1024px) {
    .col-md-1-1 { width: 100%; }
    .col-md-2-1 { width: 50%; }
    .col-md-3-1 { width: 33.333%; }
    .col-md-3-2 { width: 66.666%; }
    .col-md-4-1 { width: 25%; }
    .col-md-4-3 { width: 75%; }
    .col-md-5-1 { width: 20%; }
    .col-md-6-1 { width: 16.6667%; }
}

@media (min-width: 1200px) {
    .col-lg-1-1 { width: 100%; }
    .col-lg-2-1 { width: 50%; }
    .col-lg-3-1 { width: 33.333%; }
    .col-lg-3-2 { width: 66.666%; }
    .col-lg-4-1 { width: 25%; }
    .col-lg-4-3 { width: 75%; }
    .col-lg-5-1 { width: 20%; }
    .col-lg-6-1 { width: 16.6667%; }
}

@media (min-width: 1440px) {
    .col-xl-1-1 { width: 100%; }
    .col-xl-2-1 { width: 50%; }
    .col-xl-3-1 { width: 33.333%; }
    .col-xl-3-2 { width: 66.666%; }
    .col-xl-4-1 { width: 25%; }
    .col-xl-4-3 { width: 75%; }
    .col-xl-5-1 { width: 20%; }
    .col-xl-6-1 { width: 16.6667%; }
}