:root {
    --brand-black: #000000;
    --brand-cyan: #009EE3;
    --brand-magenta: #E5007D;
    --brand-yellow: #FFED00;

    --color-black-soft: #0D0D0D;
    --color-gray-deep: #222222;
    --color-white-soft: #FCFCFC;

    @supports (color: oklch(0 0 0)) {
        --brand-black: oklch(0 0 0);
        --brand-cyan: oklch(0.664327 0.148085 238.3408);
        --brand-magenta: oklch(0.5983 0.2432 358.77);
        --brand-yellow: oklch(0.93097 0.196565 103.9667);
        
        --color-black-soft: oklch(0.1591 0 0);
        --color-gray-deep: oklch(0.252 0 0);
        --color-white-soft: oklch(0.9911 0 0);
    }

    --color-accent: color-mix(in oklch, var(--brand-cyan), black 18%);
    --color-accent-primary: var(--brand-magenta);
    --color-accent-special: var(--color-accent-primary);

    --color-background: var(--white-soft);
    --color-text: #222;

    --color-nav-link: #222;
    --color-nav-link-hover: var(--color-accent-primary);

    
    --breakpoint: 0;
    --layout-width: 90rem; /* 320 x 256 > 1440 */
    --layout-padding-y: 32px;
    --layout-padding-x: clamp(20px, 5vw, 48px);
    --layout-padding: var(--layout-padding-y) var(--layout-padding-x);
    --layout-column-gap: 24px;
    --layout-row-gap: 24px;

    --rem-base: 16;
    --vw-min: 360;
    --vw-max: 1440;
    --tsa: 1.25;
    --tsd: calc(1 / var(--tsa));
    --text-min: 18;
    --text-max: 21;
    --text-slope: calc((var(--text-max) - var(--text-min)) / (var(--vw-max) - var(--vw-min)));
    --text-offset: calc(var(--text-min) - var(--text-slope) * var(--vw-min));
    --text-base: clamp(
        calc(var(--text-min) / var(--rem-base) * 1rem),
        calc(var(--text-offset) / var(--rem-base) * 1rem + var(--text-slope) * 100vw),
        calc(var(--text-max) / var(--rem-base) * 1rem)
    );
    --title-min: 25;
    --title-max: 50;
    --title-slope: calc((var(--title-max) - var(--title-min)) / (var(--vw-max) - var(--vw-min)));
    --title-offset: calc(var(--title-min) - var(--title-slope) * var(--vw-min));
    --title-base: clamp(
        calc(var(--title-min) / var(--rem-base) * 1rem),
        calc(var(--title-offset) / var(--rem-base) * 1rem + var(--title-slope) * 100vw),
        calc(var(--title-max) / var(--rem-base) * 1rem)
    );
    --display-min: 38;
    --display-max: 60;
    --display-slope: calc((var(--display-max) - var(--display-min)) / (var(--vw-max) - var(--vw-min)));
    --display-offset: calc(var(--display-min) - var(--display-slope) * var(--vw-min));
    --display-base: clamp(
        calc(var(--display-min) / var(--rem-base) * 1rem),
        calc(var(--display-offset) / var(--rem-base) * 1rem + var(--display-slope) * 100vw),
        calc(var(--display-max) / var(--rem-base) * 1rem)
    );
    
    --font-size-100: calc(var(--font-size-200) * var(--tsd));
    --font-size-200: calc(var(--font-size-300) * var(--tsd));
    --font-size-300: var(--text-base);
    --font-size-400: calc(var(--font-size-300) * var(--tsa));
    --font-size-500: calc(var(--font-size-400) * var(--tsa));
    --font-size-600: var(--title-base);
    --font-size-700: calc(var(--font-size-600) * var(--tsa));
    --font-size-800: calc(var(--font-size-700) * var(--tsa));
    --font-size-900: var(--display-base);
    --font-size-1000: calc(var(--font-size-900) * var(--tsa));
    
    --font-family: 'Outfit', system-ui, Helvetica, Arial, sans-serif;
    --font-style: normal;
    --font-weight: 300;
    --font-size: var(--text-base);
    --line-height: 1.4;
    --letter-spacing: 0;
    --word-spacing: 0;
    --hyphens: manual;
    --overflow-wrap: normal;

    --font-family-title: 'Outfit';
    --font-family-subtitle: var(--font-family-title);
    --font-family-supertitle: var(--font-family-title);
    --font-family-label: var(--font-family-title);
}

:root {
    --body-background-color: var(--color-white-soft);
    --nav-background-color: var(--color-white-soft);
    --nav-sticky-background-color: var(--color-white-soft);
        
    --nav-link-font-weight: 400;
    --nav-link-font-size: var(--text-base);
    --nav-link: #444;
    --nav-link-hover: var(--color-accent-primary);

    --border-color: #E0E0E0; /* FB #E0E0E0 */
    --border-radius: 12px;
}


@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: smooth;
  }
}

/* Outfit */
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100;
  src: url('../font/outfit/outfit-v15-latin-100.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200;
  src: url('../font/outfit/outfit-v15-latin-200.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  src: url('../font/outfit/outfit-v15-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('../font/outfit/outfit-v15-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  src: url('../font/outfit/outfit-v15-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  src: url('../font/outfit/outfit-v15-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('../font/outfit/outfit-v15-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  src: url('../font/outfit/outfit-v15-latin-800.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  src: url('../font/outfit/outfit-v15-latin-900.woff2') format('woff2');
}

@font-face {
    font-family:'icon';
    font-style:normal;
    font-weight:normal;
    font-display:block;
    src:url('../font/icon/icon.ttf?f084zx') format('truetype'),
        url('../font/icon/icon.woff?f084zx') format('woff'),
        url('../font/icon/icon.svg?f084zx#icon') format('svg');
}
[class^="icon-"], [class*=" icon-"] {
	font-family:'icon' !important;
	font-style:normal;
	font-weight:normal;
	font-variant:normal;
	text-transform:none;
	line-height:1;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	speak:none;
}

.icon-zoom_out_map:before {
  content: "\e905";
}
.icon-calendar:before {
  content: "\e903";
}
.icon-chevron-right:before {
  content: "\e907";
}
.icon-clock:before {
    content: "\e918";
    position: relative; left: -2px;
    font-size: 1.6em;
}
.icon-info:before {
  content: "\e919";
}
.icon-instagram:before {
    content: "\ea92";
    position: relative; top: 0px;
    font-size: 0.9em;
    opacity: 0.85;
}
.icon-link-extern:before {
  content: "\e91b";
}
.icon-link-extern-alt:before {
  content: "\e91c";
}
.icon-minus:before {
  content: "\e91d";
}
.icon-plus:before {
  content: "\e91e";
}
.icon-x:before {
  content: "\e91f";
}
.icon-certificate:before {
  content: "\e916";
}
.icon-chat:before {
  content: "\e917";
}
.icon-arrow-right:before {
  content: "\e900";
}
.icon-bubble:before {
  content: "\e901";
}
.icon-bubble-alt:before {
  content: "\e902";
}
.icon-circle:before {
  content: "\e904";
}
.icon-download:before {
  content: "\e906";
}
.icon-facebook:before {
  content: "\e908";
}
.icon-fax:before {
  content: "\e909";
}
.icon-lightbulb:before {
  content: "\e90b";
}
.icon-location:before {
  content: "\e90c";
}
.icon-mail:before {
  content: "\e90d";
}
.icon-menu:before {
  content: "\e90e";
}
.icon-btg-minus:before {
  content: "\e90f";
}
.icon-paper-plane:before {
  content: "\e910";
}
.icon-pencil:before {
  content: "\e911";
}
.icon-phone:before {
  content: "\e912";
}
.icon-btg-plus:before {
  content: "\e913";
}
.icon-btg-plus-alt:before {
  content: "\e914";
}
.icon-search:before {
  content: "\e915";
}