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

@font-face {
  font-family: "Albula Narrow Pro Nuorail";
  src: url("../fonts/AlbulaNarrowProNuorail-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Albula Narrow Pro Nuorail";
  src: url("../fonts/AlbulaNarrowProNuorail-Oblique.woff2") format("woff2");
  font-weight: 400;
  font-style: oblique;
  font-display: swap;
}

@font-face {
  font-family: "Albula Narrow Pro Nuorail";
  src: url("../fonts/AlbulaNarrowProNuorail-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Albula Narrow Pro Nuorail";
  src: url("../fonts/AlbulaNarrowProNuorail-SemiBoldOblique.woff2") format("woff2");
  font-weight: 600;
  font-style: oblique;
  font-display: swap;
}

:root {
  /* Material-inspired spacing scale (8px base) */
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;
  --container-padding-inline: var(--space-3);
  --section-spacing-y: var(--space-5);
  --header-spacing-bottom: var(--space-5);
  --card-padding: clamp(1.25rem, 3vw, 1.75rem);
  --padding: var(--space-5);
  --header-offset: 0;
  --header-text-color: var(--color-black);
  --header-logo-filter: brightness(0);
  --color-toggle-active-bg: var(--color-black);
  --color-toggle-active-text: var(--color-white);
  --tracking-default: 0;
  --color-background: #f5f5f7;
  --color-surface: #ffffff;
  --color-surface-alt: #f3efe7;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey: #6a707c;
  --color-light: #ede7de;
  --color-accent: #b33a9f;
  --color-accent-rgb: 179 58 159;
  --color-accent-soft: #d494d3;
  --color-link: var(--color-accent);
  --color-text: var(--color-black);
  --color-text-grey: var(--color-grey);
  --color-section-grey: #f5f5f7;
  --color-section-white: #ffffff;
  --color-section-dark: #1c0613;
  --color-section-black: #0b0012;
  --color-card: #ffffff;
  --color-card-alt: #f7f7fb;
  --color-border: rgb(15 15 15 / 8%);
  --color-pill-surface: rgb(0 0 0 / 4%);
  --color-hero-overlay: rgb(0 0 0 / 55%);
  --page-max-width: 1120px;
  --content-max-width: var(--page-max-width);
  --color-code-light-grey: #cacbd1;
  --color-code-comment: #a9aaad;
  --color-code-white: #c5c9c6;
  --color-code-red: #d16464;
  --color-code-orange: #de935f;
  --color-code-yellow: #f0c674;
  --color-code-green: #a7bd68;
  --color-code-aqua: #8abeb7;
  --color-code-blue: #7e9abf;
  --color-code-purple: #b294bb;
  --svg-filter: none;
  --font-family-sans: "Albula Narrow Pro Nuorail", "Helvetica Neue", arial, sans-serif;
  --font-family-heading: "Albula Narrow Pro Nuorail", "Helvetica Neue", arial, sans-serif;
  --font-family-mono: "SFMono-Regular", consolas, "Liberation Mono", menlo, courier, monospace;
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] :root,
html[data-theme="dark"] {
  --color-background: #0b0012;
  --color-surface: #18121f;
  --color-surface-alt: #23172b;
  --color-black: #ffffff;
  --color-white: #ffffff;
  --color-grey: #c4c0cc;
  --color-light: #201625;
  --color-text: #ffffff;
  --color-text-grey: rgb(255 255 255 / 72%);
  --color-card: #1c1624;
  --color-card-alt: #261d30;
  --color-border: rgb(255 255 255 / 16%);
  --color-pill-surface: rgb(255 255 255 / 10%);
  --header-text-color: var(--color-white);
  --header-logo-filter: brightness(0) invert(1);
  --color-toggle-active-bg: var(--color-white);
  --color-toggle-active-text: #0b0012;
  --color-section-white: #18121f;
  --color-section-grey: #201625;
  --color-section-dark: #1c0613;
  --color-section-black: #0b0012;
}

html {
  font-family: var(--font-family-sans);
  color: var(--color-text);
  background: var(--color-background);
  scroll-behavior: smooth;
}

img {
  width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

img[src$=".svg"],
img[src*=".svg?"] {
  filter: var(--svg-filter, none);
  transition: filter .2s ease;
}

body {
  padding: 0;
  margin: 0;
  font-weight: 400;
  line-height: 1.6;
  background: var(--color-background);
  color: var(--color-text);
  min-height: 100vh;
  letter-spacing: var(--tracking-default);
}

html.has-page-transition body {
  opacity: 0;
  transform: translateY(2px);
}

html.has-page-transition body.is-page-ready {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .28s ease-out, transform .28s ease-out;
}

html.has-page-transition body.is-page-exiting {
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .25s ease-in, transform .25s ease-in;
}

@media (prefers-reduced-motion: reduce) {
  html.has-page-transition body,
  html.has-page-transition body.is-page-ready,
  html.has-page-transition body.is-page-exiting {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Home: verstecken bis Bilder/Schriften geladen sind, dann weich einblenden */
body.home-reveal-pending {
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

body.home-reveal-ready {
  opacity: 1;
}

body.home-reveal-pending .header {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

body.home-reveal-ready .header {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 0.4s ease-out 0.08s;
}

@media (prefers-reduced-motion: reduce) {
  body.home-reveal-pending {
    opacity: 1;
    transition: none;
  }
  body.home-reveal-pending .header {
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto;
  }
  body.home-reveal-ready .header {
    transition: none;
  }
}

.main {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: clamp(2rem, 6vw, 4rem);
}

body.has-hero-first .main {
  padding-top: 0;
}

/* Fallback: reveal home page after 5s if JS fails to run */
body.home-reveal-pending:not(.home-reveal-ready) {
  animation: home-reveal-fallback 0.1s 5s forwards;
}
body.home-reveal-pending:not(.home-reveal-ready) .header {
  animation: home-reveal-header-fallback 0.1s 5s forwards;
}
@keyframes home-reveal-fallback {
  to { opacity: 1; }
}
@keyframes home-reveal-header-fallback {
  to { opacity: 1; visibility: visible; pointer-events: auto; }
}

.main> :first-child {
  margin-top: 0;
}

.main>*:not(.full-bleed) {
    max-width: var(--page-max-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-inline: var(--container-padding-inline);
}

.full-bleed {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.has-hero-first .main>.hero:first-of-type {
    /* Pull hero background up so it starts beneath fixed header */
    margin-top: calc(-1 * var(--header-offset));
}

body.has-hero-first .main>.hero:first-of-type .hero__content {
    padding-top: var(--header-offset);
}

li {
    list-style: none;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color .2s ease, opacity .2s ease;
}

a:hover {
    opacity: .85;
}

button {
    font: inherit;
    background: none;
    border: 0;
    color: currentcolor;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

strong,
b {
    font-weight: 600;
}

small {
    font-size: inherit;
    color: var(--color-text-grey);
}

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

.color-grey {
    color: var(--color-text-grey);
}

@media (width >=600px) {
    :root {
        --container-padding-inline: var(--space-4);
        --section-spacing-y: var(--space-6);
        --header-spacing-bottom: var(--space-6);
    }
}

@media (width >=905px) {
    :root {
        --container-padding-inline: var(--space-5);
        --section-spacing-y: var(--space-7);
    }
}

@media (width >=1240px) {
    :root {
        --container-padding-inline: var(--space-6);
    }
}

.header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 50;
    transform: translateY(0);
    background: transparent;
    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        color .35s ease;
    color: var(--header-text-color, var(--color-black));
}

.header[data-header-theme="light"] {
    --header-text-color: var(--color-black);
    --header-logo-filter: brightness(0);
}

.header[data-header-theme="dark"] {
    --header-text-color: var(--color-white);
    --header-logo-filter: brightness(0) invert(1);
}

.header.is-floating {
    background: rgb(255 255 255 / 82%);
    box-shadow: 0 18px 50px rgb(0 0 0 / 10%);
}

html[data-theme="dark"] .header.is-floating {
    background: rgb(11 0 18 / 86%);
    box-shadow: 0 18px 45px rgb(0 0 0 / 35%);
}

.header.is-hidden {
    transform: translateY(-120%);
}


.header__inner {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    max-width: var(--page-max-width);
    padding: var(--space-4) var(--container-padding-inline);
    margin: 0 auto var(--header-spacing-bottom);
}

.logo {
    padding: .25rem 0;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    cursor: pointer;
    color: inherit;
    flex-shrink: 0;
    margin-right: var(--space-4);
}

.logo__image {
    height: clamp(1.75rem, 3vw, 2.25rem);
    width: auto;
    display: block;
    transition: filter .2s ease;
}

.header .logo__image {
    filter: var(--header-logo-filter, brightness(0));
}

.logo__image--wordmark {
    height: clamp(1.6rem, 2.8vw, 2rem);
}

.logo__image--icon {
    height: clamp(1.5rem, 2.5vw, 1.8rem);
}

.header-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    gap: var(--space-3);
}

.theme-switch {
    --switch-pad: .25rem;
    --switch-size: 1.7rem;
    --switch-gap: .45rem;
    --switch-nudge-y: -1px;
    display: inline-grid;
    grid-template-columns: repeat(2, var(--switch-size));
    column-gap: var(--switch-gap);
    place-items: center;
    border: 1px solid var(--color-border);
    background: var(--color-pill-surface);
    color: var(--header-text-color, var(--color-black));
    border-radius: 999px;
    padding: var(--switch-pad);
    width: calc((var(--switch-size) * 2) + var(--switch-gap) + (var(--switch-pad) * 2));
    height: calc(var(--switch-size) + (var(--switch-pad) * 2));
    line-height: 1;
    position: relative;
    isolation: isolate;
    vertical-align: middle;
    margin-top: 4px;
}

.theme-switch__option {
    width: var(--switch-size);
    height: var(--switch-size);
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    font-size: 1rem;
    color: currentcolor;
    opacity: .85;
    z-index: 2;
    transition: opacity .2s ease, color .2s ease;
    line-height: 1;
    margin: 0;
    padding: 0;
    position: relative;
    pointer-events: none;
    transform: translateY(-1px);
}

.theme-switch__option .ph {
    display: block;
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
}

.theme-switch__thumb {
    position: absolute;
    top: calc(var(--switch-pad) + var(--switch-nudge-y));
    left: var(--switch-pad);
    width: var(--switch-size);
    height: var(--switch-size);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 28%);
    transition: transform .2s ease, background .2s ease;
    z-index: 1;
}

html[data-theme="dark"] .theme-switch__thumb {
    transform: translateX(calc(var(--switch-size) + var(--switch-gap)));
}

html:not([data-theme="dark"]) .theme-switch__option--light {
    color: #240024;
    opacity: 1;
}

html:not([data-theme="dark"]) .theme-switch__option--dark {
    opacity: .6;
}

html[data-theme="dark"] .theme-switch__option--light {
    opacity: .6;
}

html[data-theme="dark"] .theme-switch__option--dark {
    color: #240024;
    opacity: 1;
}

.menu {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.6rem);
    position: relative;
    z-index: 10;
    margin: 0 auto;
    flex: 1 1 auto;
    justify-content: center;
}

.menu__content {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
}

.menu__list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.6rem);
    margin: 0 auto;
    flex: 1 1 auto;
    justify-content: center;
}

.menu__intro,
.menu__footer {
    display: none;
}

.menu__logo {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.menu__footer {
    flex-direction: column;
    gap: .75rem;
}

.menu__intro {
    flex-direction: column;
    gap: .35rem;
    max-width: 28rem;
    color: var(--color-text-grey);
}

.menu__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.menu__link {
    padding: .35rem 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: inherit;
    position: relative;
    isolation: isolate;
    font-size: clamp(.95rem, 2vw, 1.05rem);
    font-weight: 500;
    transition: none;
}

.menu__link,
.menu__link:hover,
.menu__link:focus,
.menu__link:active {
    opacity: 1 !important;
}

.menu__link[aria-current] {
    color: var(--color-accent);
}

.menu__link::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
    z-index: -1;
}

.menu__link:hover::after,
.menu__link[aria-current]::after {
    transform: scaleX(1);
}

.menu__caret {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: .05rem;
    line-height: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.menu__caret::before,
.menu__caret::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: opacity .2s ease;
}

.menu__caret::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.menu__item.is-open .menu__caret::after {
    opacity: 0;
}

.menu__dropdown {
    position: absolute;
    top: calc(100% + .65rem);
    left: 0;
    min-width: 14rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .8rem .9rem;
    border-radius: 1rem;
    background: var(--color-surface);
    box-shadow: 0 16px 45px rgb(0 0 0 / 10%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s linear .1s;
}

html[data-theme="dark"] .menu__dropdown {
    background: #17101f;
    box-shadow: 0 18px 45px rgb(0 0 0 / 30%);
}

.menu__item.is-open .menu__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s;
}

.menu__dropdown-link {
    display: block;
    padding: .4rem 0;
    color: var(--header-text-color, var(--color-black));
    font-weight: 500;
    font-size: .95rem;
    transition: color .2s ease, transform .2s ease;
}

.menu__panel-header {
    display: none;
    align-items: center;
    gap: .65rem;
}

.menu__panel-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.menu__back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.menu__back:focus-visible {
    outline: var(--outline);
    outline-offset: 2px;
}

.menu__back-icon {
    width: .55rem;
    height: .55rem;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    display: block;
}

.menu__dropdown-parent {
    display: none;
}

.menu__dropdown-link:hover,
.menu__dropdown-link[aria-current="page"] {
    color: var(--color-accent);
}

.language-switcher {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-pill-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: .2rem .4rem;
}

.language-switcher--desktop {
    margin-left: auto;
}

.language-switcher--footer {
    display: none;
    margin-left: 0;
}

.language-switcher__link {
    font: inherit;
    padding: .25rem .9rem .45rem;
    border-radius: 999px;
    font-size: .9rem;
    color: var(--color-black);
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.language-switcher__link.is-active {
    background: var(--color-toggle-active-bg);
    color: var(--color-toggle-active-text);
}

.header .language-switcher__link {
    color: var(--header-text-color, var(--color-black));
}

.header .language-switcher__link.is-active {
    color: var(--color-toggle-active-text);
}

.menu__contact {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.3;
}

.menu__contact a {
    color: inherit;
    text-decoration: none;
}

body.has-menu-open {
    overflow: hidden;
}

body.has-menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 88%);
    z-index: 30;
    pointer-events: none;
}

body.has-menu-open .header {
    background: transparent;
    box-shadow: none;
    --header-text-color: var(--color-white);
    --header-logo-filter: brightness(0) invert(1);
}

body.has-menu-open .menu-toggle {
    filter: none;
}

body.has-menu-open .menu-toggle span {
    background: currentcolor;
}

.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(88vh, 860px);
    padding: clamp(7.5rem, 14vw, 11rem) 0 clamp(3.5rem, 9vw, 7rem);
    color: var(--color-white);
    --hero-gradient-angle: 90deg;
    background: linear-gradient(var(--hero-gradient-angle),
            var(--hero-bg-left, #240024) 0%,
            var(--hero-bg-right, #b8045f) 100%);
    overflow: hidden;
    isolation: isolate;
    background-color: #050505;
}

/* Pattern overlay on hero disabled
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--section-pattern-image);
    background-size: 400px 400px;
    background-repeat: repeat;
    opacity: 0.4;
    mix-blend-mode: multiply;
    filter: brightness(0.6);
    -webkit-mask-image: linear-gradient(to bottom, transparent 60%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 60%, black 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
}
*/

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            var(--hero-overlay-color, rgba(0, 0, 0, 0.85)) 0%,
            var(--hero-overlay-color, rgba(0, 0, 0, 0.85)) 40%,
            rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

.hero__image-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.hero__image-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0;
    margin: 0 auto;
}

.hero__inner {
    width: 100%;
    max-width: var(--content-max-width);
    margin-right: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
}

@media (width >=600px) {
    .hero__inner {
        width: min(80%, var(--content-max-width));
    }
}

@media (width >=905px) {
    .hero__inner {
        width: min(60%, var(--content-max-width));
    }
}

.hero__title {
    font-size: clamp(2.75rem, 7vw, 4.75rem);
    line-height: 1.1;
    font-weight: 600;
}

.hero__text {
    font-size: clamp(1.1rem, 2.6vw, 1.35rem);
    color: rgb(255 255 255 / 85%);
}

.hero__text p {
    margin: 0;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: 1rem;
}

.hero--with-pillars .hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    max-width: var(--page-max-width);
}

.hero__pillars {
    width: 100%;
    margin-top: var(--space-5);
}

.hero--with-pillars .hero__pillars {
    margin-top: var(--space-7);
}

.hero__pillars-inner {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-inline);
}

.hero__pillars .icon-list__item {
    border-bottom-color: rgb(255 255 255 / 18%);
}

.hero__pillars .icon-list__text {
    color: rgb(255 255 255 / 85%);
}

.hero__pillars .icon-list__icon-placeholder {
    border-color: rgb(255 255 255 / 30%);
}

.hero--smooth {
    background: linear-gradient(90deg,
            var(--hero-bg-left, #240024) 0%,
            var(--hero-bg-right, #b8045f) 100%);
}

@supports (background: color-mix(in oklch, #000 50%, #fff)) {
    .hero--smooth {
        background: linear-gradient(90deg,
                var(--hero-bg-left, #240024) 0%,
                color-mix(in oklch, var(--hero-bg-left, #240024) 75%, var(--hero-bg-right, #b8045f)) 42%,
                color-mix(in oklch, var(--hero-bg-right, #b8045f) 75%, var(--hero-bg-left, #240024)) 58%,
                var(--hero-bg-right, #b8045f) 100%);
    }
}

.hero--oklch-tuned {
    background: linear-gradient(90deg,
            var(--hero-bg-left, #240024) 0%,
            var(--hero-bg-right, #b8045f) 100%);
}

@supports (background: color-mix(in oklch, #000 50%, #fff)) {
  .hero--oklch-tuned {
    background: linear-gradient(90deg,
        var(--hero-bg-left, #240024) 0%,
        var(--hero-mid-left, color-mix(in oklch, var(--hero-bg-left, #240024) 75%, var(--hero-bg-right, #b8045f)))
          var(--hero-mid-left-stop, 42%),
        var(--hero-mid-right, color-mix(in oklch, var(--hero-bg-right, #b8045f) 75%, var(--hero-bg-left, #240024)))
          var(--hero-mid-right-stop, 58%),
        var(--hero-bg-right, #b8045f) 100%);
  }
}

.hero-variant__eyebrow {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    opacity: 0.75;
}

.hero-variant__swatch {
    width: 160px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 35%);
    box-shadow: 0 12px 28px rgb(0 0 0 / 35%);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: .9rem 1.9rem;
    font-weight: 600;
    font-size: 1rem;
    border: 1px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    text-align: center;
}

.button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.button:hover {
    transform: translateY(-2px);
}

.button[data-state="hover"] {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.button.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    pointer-events: none;
}

.button--primary {
    background: var(--color-black);
    color: var(--color-white);
}

/* In dark mode, --color-black becomes white; keep primary CTA readable */
html[data-theme="dark"] .button--primary {
    background: #ffffff;
    color: #120d18;
}

.button--secondary {
    background: transparent;
    border-color: rgb(0 0 0 / 25%);
    color: var(--color-black);
}

.button--secondary[data-state="hover"] {
    border-color: rgb(0 0 0 / 55%);
    background: rgb(0 0 0 / 4%);
}

.button--ghost {
    background: transparent;
    border: 1px solid var(--color-black);
    color: var(--color-black);
}

.button--ghost[data-state="hover"] {
    background: rgb(0 0 0 / 4%);
}

/* Dark context overrides */
.hero .button--primary,
.content-section--black .button--primary,
.content-section--dark .button--primary {
    background: var(--color-white);
    color: var(--color-black);
}

.hero .button--secondary,
.content-section--black .button--secondary,
.content-section--dark .button--secondary {
    border-color: rgb(255 255 255 / 40%);
    color: var(--color-white);
}

.hero .button--secondary[data-state="hover"],
.content-section--black .button--secondary[data-state="hover"],
.content-section--dark .button--secondary[data-state="hover"] {
    border-color: var(--color-white);
    background: rgb(255 255 255 / 10%);
}

.content-section {
    background: var(--color-section-white);
    color: var(--color-black);
}

.content-section--white {
    background: var(--color-section-white);
}

.content-section--light {
    background: var(--color-section-grey);
}

.content-section--pattern,
.collection--pattern,
.legal__section--pattern {
    position: relative;
    overflow: hidden;
}

.content-section--pattern::before,
.collection--pattern::before,
.legal__section--pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--section-pattern-image);
    background-size: 400px 400px;
    background-repeat: repeat;
    opacity: 0.5;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

.content-section--dark.content-section--pattern::before,
.content-section--black.content-section--pattern::before,
.legal__section--bg-dark.legal__section--pattern::before,
.legal__section--bg-black.legal__section--pattern::before {
    mix-blend-mode: multiply;
    opacity: 0.45;
    filter: brightness(0.4) contrast(1);
}

.content-section--dark.content-section--pattern::after,
.content-section--black.content-section--pattern::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 0;
}

.collection--dark.collection--pattern::before,
.collection--black.collection--pattern::before {
    mix-blend-mode: multiply;
    opacity: 0.45;
    filter: brightness(0.4) contrast(1);
}

.collection--dark.collection--pattern::after,
.collection--black.collection--pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}

.content-section--pattern > .content-section__inner,
.content-section--pattern > *,
.collection--pattern > .collection__inner,
.legal__section--pattern > * {
  position: relative;
  z-index: 1;
}

.content-section--black,
.content-section--dark {
  color: var(--color-white);
}

html[data-theme="dark"] .content-section--white,
html[data-theme="dark"] .content-section--light {
  background: var(--color-section-grey);
  color: var(--color-white);
}

/* Some modules write inline light backgrounds in markup */
html[data-theme="dark"] .content-section--white[style],
html[data-theme="dark"] .content-section--light[style],
html[data-theme="dark"] .module--layout[style],
html[data-theme="dark"] .module--team[style],
html[data-theme="dark"] .module--timeline[style] {
  background: var(--color-section-grey) !important;
  background-color: var(--color-section-grey) !important;
}

/* About intro should be fully dark without a lighter tint */
html[data-theme="dark"] .template-about .modules-intro.content-section--light {
  background: var(--color-section-black) !important;
  background-color: var(--color-section-black) !important;
}

html[data-theme="dark"] .modules-intro.content-section--light {
  background: var(--color-section-black) !important;
  background-color: var(--color-section-black) !important;
}

html[data-theme="dark"] .content-section--light.content-section--pattern::before,
html[data-theme="dark"] .content-section--white.content-section--pattern::before,
html[data-theme="dark"] .collection--pattern.collection--light::before,
html[data-theme="dark"] .collection--pattern.collection--white::before {
  mix-blend-mode: multiply;
  opacity: 0.52;
  filter: brightness(0.32) contrast(1.05);
}

.content-section--black {
    background: var(--color-section-black);
}

.content-section--dark {
    background: var(--color-section-dark);
}

.content-section__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--section-spacing-y) var(--container-padding-inline);
}

.tech-subnav {
    background: var(--color-section-grey);
    border-bottom: 1px solid var(--color-border);
}

.tech-subnav__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tech-subnav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tech-subnav__link {
    display: inline-flex;
    align-items: center;
    padding: .65rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-black);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.tech-subnav__link:hover,
.tech-subnav__link:focus-visible {
    border-color: rgb(0 0 0 / 35%);
    transform: translateY(-1px);
}

.tech-subnav__link.is-active,
.tech-subnav__link[aria-current="page"] {
    background: var(--color-black);
    border-color: var(--color-black);
    color: #fff;
}

.breadcrumb {
    background: var(--color-section-grey);
    border-bottom: 1px solid var(--color-border);
}

.breadcrumb__inner {
    display: flex;
    align-items: flex-start;
    padding: var(--space-2) var(--container-padding-inline);
}

.breadcrumb__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    color: var(--color-text-grey);
    font-weight: 600;
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.breadcrumb__item+.breadcrumb__item::before {
    content: "/";
    color: var(--color-text-grey);
}

.breadcrumb__link {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
    color: var(--color-black);
}

.breadcrumb__current {
    color: var(--color-black);
    font-weight: 700;
}

/* Technology detail header refinement */
html[data-theme="dark"] .template-tech-subpage .main {
    padding-top: 0;
}

html[data-theme="dark"] .template-tech-subpage .breadcrumb {
    background: #13081a;
    border-bottom-color: rgb(255 255 255 / 14%);
}

html[data-theme="dark"] .template-tech-subpage .breadcrumb__list {
    color: rgb(255 255 255 / 70%);
}

html[data-theme="dark"] .template-tech-subpage .breadcrumb__item + .breadcrumb__item::before {
    color: rgb(255 255 255 / 45%);
}

html[data-theme="dark"] .template-tech-subpage .breadcrumb__current {
    color: var(--color-white);
}

html[data-theme="dark"] .template-tech-subpage .content-section:first-of-type .content-section__inner {
    padding-top: clamp(2rem, 5vw, 3rem);
}

html[data-theme="dark"] .template-tech-subpage .modules-intro.content-section--light,
html[data-theme="dark"] .template-tech-subpage .modules-intro {
    background: #0a0310 !important;
    background-color: #0a0310 !important;
}

/* Keep images neutral/readable in dark mode across the site */
html[data-theme="dark"] .content-section__blocks figure,
html[data-theme="dark"] .note-excerpt .img,
html[data-theme="dark"] .gallery__slide > a,
html[data-theme="dark"] .flow-slider__media {
    background: #ffffff;
}

html[data-theme="dark"] .content-section__blocks figure img,
html[data-theme="dark"] .note-excerpt .img img,
html[data-theme="dark"] .gallery__slide > a > img,
html[data-theme="dark"] .flow-slider__media img {
    filter: none !important;
    mix-blend-mode: normal !important;
}

.content-section__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.content-section__column {
    --column-basis: 100%;
}

.content-section__blocks {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: 1.05rem;
    line-height: 1.65;
}

.content-section--media-grid {
    --media-grid-aspect: 16 / 9;
}

.content-section--media-grid .content-section__inner {
    padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

.content-section--media-grid .content-section__grid {
    gap: var(--space-3);
}

.content-section--media-grid .content-section__column {
    display: flex;
}

.content-section--media-grid .content-section__blocks {
    flex: 1 1 auto;
    gap: var(--space-2);
}

.content-section--media-grid figure {
    margin: 0;
    width: 100%;
}

.content-section__blocks figure > a {
    display: block;
    width: 100%;
}

.content-section__blocks figure > a > img {
    display: block;
    width: 100%;
    height: auto;
}

.content-section--media-grid figure a {
    display: block;
    width: 100%;
    aspect-ratio: var(--media-grid-aspect, 16 / 9);
    overflow: hidden;
}

.content-section--media-grid figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
}

@media (width <=600px) {
    .content-section--media-grid {
        --media-grid-aspect: 4 / 3;
    }
}

.gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.gallery__track {
    list-style: none;
    padding: 0 clamp(.5rem, 2vw, 1.25rem);
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(.75rem, 2vw, 1.5rem);
    overflow: hidden;
    scroll-behavior: smooth;
    touch-action: pan-y;
    user-select: none;
}

.gallery__slide {
    list-style: none;
    flex: 0 0 100%;
    overflow: hidden;
}

.gallery__slide > a {
    display: block;
    width: 100%;
}

.gallery__slide > a > img {
    display: block;
    width: 100%;
    height: auto;
}

.gallery__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.gallery figcaption {
    font-size: .9rem;
    color: var(--color-text-grey);
}

.content-section__blocks h2,
.content-section__blocks h3,
.content-section__blocks h4 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
}

.content-section__blocks p {
    margin: 0;
}

.content-section ul {
    margin: 1rem 0 0;
    padding-left: 1.25rem;
}

.content-section li {
    margin-bottom: .35rem;
}

.content-section__blocks ul>li {
    list-style: disc;
}

.content-section__blocks ol>li {
    list-style: decimal;
}

.notes-hero__heading {
    margin: 0;
}

.modules-intro .h1 h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    letter-spacing: -.01em;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.modules-intro .h1 p {
    font-size: clamp(1.1rem, 2.6vw, 1.35rem);
    color: var(--color-grey);
}



.notes-board {
    margin: var(--space-5) 0 var(--section-spacing-y);
    padding: 0;
}

.notes-board__inner {
    width: 100%;
    margin: 0;
    padding: 0;
}

.notes-board__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.notes-board__grid .note-excerpt {
    height: 100%;
}

.notes-board__item {
    list-style: none;
}

.notes-filter {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .35rem;
    background: var(--color-card);
    border-radius: 999px;
    padding: .55rem;
    box-shadow: none;
    margin: 0 0 var(--space-4);
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    -ms-overflow-style: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: .55rem;
}

.notes-filter::-webkit-scrollbar {
    display: none;
}

.notes-filter__button,
.notes-filter__button:visited {
    border-radius: 999px;
    padding: .55rem 1.75rem;
    font-weight: 600;
    color: var(--color-black);
    text-decoration: none;
    border: 0;
    transition: color .25s ease, background .25s ease, transform .25s ease;
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: start;
}

.notes-filter__button:hover {
    color: var(--color-black);
    transform: translateY(-1px);
}

.notes-filter__button.is-active {
    background: var(--color-black);
    color: var(--color-white);
    font-weight: 700;
    transform: translateY(-1px);
}

html[data-theme="dark"] .template-notes .notes-filter {
    background: #1a1422;
    border: 1px solid rgb(255 255 255 / 12%);
}

html[data-theme="dark"] .template-notes .notes-filter__button,
html[data-theme="dark"] .template-notes .notes-filter__button:visited {
    color: rgb(255 255 255 / 82%);
}

html[data-theme="dark"] .template-notes .notes-filter__button:hover {
    color: var(--color-white);
    background: rgb(255 255 255 / 10%);
}

html[data-theme="dark"] .template-notes .notes-filter__button.is-active {
    background: var(--color-accent);
    color: var(--color-white);
}

.explainers-teaser .content-section__inner {
    padding-top: clamp(3rem, 7vw, 4rem);
    padding-bottom: clamp(3rem, 7vw, 4rem);
}

.explainers-teaser__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.explainers-teaser__title {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    letter-spacing: -.01em;
}

.explainers-teaser__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .1rem;
    font-weight: 600;
    color: var(--color-link);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.explainers-teaser__link::after {
    content: "→";
    font-size: 1rem;
}

.explainers-teaser__link:hover {
    color: var(--color-white);
    border-color: currentcolor;
}

.explainers-teaser__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-4);
}

/* Latest News tiles: black background */
.explainers-teaser .note-excerpt {
    background: #000000;
    border: 1px solid #000000;
    color: var(--color-white);
}

.explainers-teaser .note-excerpt:hover {
    border-color: rgb(255 255 255 / 20%);
}

.explainers-teaser .note-excerpt-title {
    color: var(--color-white);
}

.explainers-teaser .note-excerpt-text {
    color: rgb(255 255 255 / 70%);
}

.collection {
    background: var(--collection-background, var(--color-section-grey));
    color: var(--collection-color, var(--color-black));
    --collection-icon-size: clamp(6.3rem, 14.7vw, 7.875rem);
}

html[data-theme="dark"] .collection {
    --collection-background: var(--color-section-grey);
    --collection-color: var(--color-white);
}

.collection__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5rem) var(--container-padding-inline);
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.collection__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.collection__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: inherit;
    text-decoration: none;
    border-radius: .65rem;
    overflow: hidden;
    background: var(--color-card);
    border: 1px solid rgb(0 0 0 / 4%);
    box-shadow: none;
    transition: transform .12s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow .12s cubic-bezier(0.25, 0.1, 0.25, 1), border-color .12s cubic-bezier(0.25, 0.1, 0.25, 1);
    aspect-ratio: 4 / 3;
    padding: clamp(1.15rem, 2.8vw, 1.6rem);
}

.collection__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.collection__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.collection__card--with-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 55%);
    z-index: 1;
    pointer-events: none;
}

.collection__card--with-image .collection__content {
    position: relative;
    z-index: 2;
}

.collection__card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.collection__card:hover,
.collection__card:focus-visible {
    transform: translateY(-8px);
    box-shadow: none;
}

.collection__card--has-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-black);
    mask-image: var(--collection-icon);
    -webkit-mask-image: var(--collection-icon);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: var(--collection-icon-size);
    -webkit-mask-size: var(--collection-icon-size);
    opacity: 1;
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: opacity .2s ease;
}

.collection .collection__card[href*="/about"] {
    --collection-icon-size: clamp(3.8rem, 8.7vw, 5rem);
}

.collection__content {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: flex-start;
    text-align: left;
}

.collection__card-title {
    margin: 0;
    color: var(--color-black);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 600;
}

.collection__description {
    margin: 0;
    color: var(--color-text-grey);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.3;
}

.collection__content--description {
    margin-top: auto;
}

html[data-theme="dark"] .collection__card {
    background: var(--color-card);
    border-color: var(--color-border);
    color: var(--color-white);
}

html[data-theme="dark"] .collection__card-title {
    color: var(--color-white);
}

html[data-theme="dark"] .collection__description {
    color: rgb(255 255 255 / 78%);
}

html[data-theme="dark"] .team-card {
    background: linear-gradient(180deg, #1c1c1c 0%, #141414 100%);
    border-color: rgb(255 255 255 / 12%);
    color: var(--color-white);
}

html[data-theme="dark"] .team__intro,
html[data-theme="dark"] .team-card__role {
    color: rgb(255 255 255 / 72%);
}

html[data-theme="dark"] .timeline__card {
    color: var(--color-white);
}

html[data-theme="dark"] .timeline__headline,
html[data-theme="dark"] .timeline__year {
    color: var(--color-white);
}

html[data-theme="dark"] .timeline__text {
    color: rgb(255 255 255 / 72%);
}

.collection__card--with-image .collection__card-title {
    color: var(--color-white);
}

.collection__card--with-image .collection__description {
    color: rgb(255 255 255 / 88%);
}

html[data-theme="dark"] .collection__card--with-image::after {
    background: rgb(0 0 0 / 68%);
}

/* Dark mode tiles on black/dark background */
.collection--black .collection__card,
.collection--dark .collection__card,
.content-section--black .collection__card,
.content-section--dark .collection__card {
    background: var(--color-section-dark);
    border-color: #000000;
    color: var(--color-white);
}

.collection--black .collection__card:hover,
.collection--dark .collection__card:hover,
.content-section--black .collection__card:hover,
.content-section--dark .collection__card:hover {
    border-color: rgb(255 255 255 / 20%);
    box-shadow: none;
}

.collection--black .collection__card-title,
.collection--dark .collection__card-title,
.content-section--black .collection__card-title,
.content-section--dark .collection__card-title {
    color: var(--color-white);
}

.collection--black .collection__description,
.collection--dark .collection__description,
.content-section--black .collection__description,
.content-section--dark .collection__description {
    color: rgb(255 255 255 / 70%);
}

.collection--black .collection__card--has-icon::before,
.collection--dark .collection__card--has-icon::before,
.content-section--black .collection__card--has-icon::before,
.content-section--dark .collection__card--has-icon::before {
    background-color: var(--color-white);
    mix-blend-mode: screen;
    filter: brightness(1);
}

/* Timeline cards on dark background */
.content-section--black .timeline__card,
.content-section--dark .timeline__card {
    background: linear-gradient(180deg, #1c1c1c 0%, #141414 100%);
    border: 1px solid rgb(255 255 255 / 10%);
    color: var(--color-white);
}

.content-section--black .timeline__headline,
.content-section--dark .timeline__headline {
    color: var(--color-white);
}

.content-section--black .timeline__text,
.content-section--dark .timeline__text {
    color: rgb(255 255 255 / 70%);
}

/* Legal cards on dark background */
.legal__section--bg-black .legal__card,
.legal__section--bg-dark .legal__card {
    background: linear-gradient(180deg, #1c1c1c 0%, #141414 100%);
    border: 1px solid rgb(255 255 255 / 10%);
    color: var(--color-white);
}

.legal__section--bg-black .legal__card h3,
.legal__section--bg-dark .legal__card h3 {
    color: var(--color-white);
}

.legal__section--bg-black .legal__description,
.legal__section--bg-dark .legal__description {
    color: rgb(255 255 255 / 75%);
}

.legal__section--bg-black .legal__meta,
.legal__section--bg-dark .legal__meta {
    color: rgb(255 255 255 / 60%);
}

@media (width >=900px) {
    .collection__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width <=640px) {
    .collection__grid {
        grid-template-columns: 1fr;
    }
}

.slider-dots {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    margin-top: var(--space-2);
    justify-content: center;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 0;
    background: rgb(0 0 0 / 20%);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, opacity .2s ease;
}

.content-section--black .slider-dot,
.content-section--dark .slider-dot {
    background: rgb(255 255 255 / 40%);
}

.slider-dot.is-active {
    transform: scale(1.1);
    background: var(--color-accent);
    opacity: 1;
}

.slider-dot:hover {
    background: var(--color-accent);
}

/* Flow Slider */

.flow-slider__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.flow-slider__track {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(.5rem, 2vw, 1rem);
    padding-inline: clamp(.75rem, 3vw, 1.5rem);
    transition: transform .35s ease;
    touch-action: pan-y;
    user-select: none;
    cursor: grab;
}

.flow-slider__slide {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    flex: 0 0 96%;
    max-width: 96%;
    border-radius: 0;
    overflow: hidden;
    opacity: .9;
    transform: scale(.995);
    transition: transform .3s ease, opacity .3s ease;
}

.flow-slider__slide.is-active {
    opacity: 1;
    transform: scale(1);
}

.flow-slider__slide--placeholder {
    background: var(--color-section-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-grey);
    font-weight: 600;
}

.flow-slider__media {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.flow-slider__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.flow-slider__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .75rem;
    padding: clamp(1rem, 4vw, 2rem);
    background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 55%) 100%);
    color: var(--color-white);
}

.flow-slider__overlay h3 {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--color-white);
}

.flow-slider__overlay a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.flow-slider__placeholder {
    padding: 2rem;
    text-align: center;
}

.flow-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    position: relative;
    pointer-events: auto;
}

.flow-slider__arrow {
    display: none !important;
}

.flow-slider__arrow:hover {
    background: rgba(0, 0, 0, .12);
    transform: translateY(-1px);
}

@media (width >=640px) {
    .flow-slider__slide {
        flex-basis: 80%;
        max-width: 80%;
    }
}

@media (width >=1024px) {
    .flow-slider__slide {
        flex-basis: 60%;
        max-width: 60%;
    }
}

/* Partners Grid */

.partners-grid__header {
    text-align: left;
    max-width: 60rem;
    margin: 0 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: flex-start;
}

.partners-grid__title {
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    margin: 0;
    line-height: 1.2;
}

.partners-grid__description {
    margin: 0;
    max-width: 52rem;
    font-size: 1.05rem;
    color: var(--color-text-grey);
    line-height: 1.6;
}

.partners-grid.full-bleed .content-section__inner {
    max-width: var(--page-max-width);
    padding-inline: var(--container-padding-inline);
    padding-block: clamp(3rem, 6vw, 5rem);
    margin: 0 auto;
}

/* Partners Carousel */

.partners-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    transform: none;
    box-sizing: border-box;
}

.partners-carousel__track.flow-slider__track {
    --partners-gap: clamp(.75rem, 2vw, 1.5rem);
    padding-inline: 0;
    gap: var(--partners-gap);
    overflow: hidden;
}

.partners-carousel__slide {
    flex: 0 0 85%;
    max-width: 85%;
    box-sizing: border-box;
}

@media (width >=640px) {
    .partners-carousel__slide {
        flex-basis: calc((100% - var(--partners-gap)) / 2);
        max-width: calc((100% - var(--partners-gap)) / 2);
    }
}

@media (width >=1024px) {
    .partners-carousel__slide {
        flex-basis: calc((100% - (2 * var(--partners-gap))) / 3);
        max-width: calc((100% - (2 * var(--partners-gap))) / 3);
    }
}

@media (width >=1280px) {
    .partners-carousel__slide {
        flex-basis: calc((100% - (3 * var(--partners-gap))) / 4);
        max-width: calc((100% - (3 * var(--partners-gap))) / 4);
    }
}

.partners-carousel__item {
    border-radius: 0;
    padding: var(--space-2);
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 200ms ease, opacity 200ms ease;
    min-height: clamp(90px, 14vw, 130px);
    overflow: visible;
}

.partners-carousel__logo {
    width: min(100%, 180px);
    height: clamp(48px, 7vw, 72px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.partners-carousel__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    filter: var(--svg-filter, none);
}

.partners-carousel__nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* Icon List Section */

.icon-list__inner {
    width: 100vw;
    max-width: none;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    margin-left: 50%;
    transform: translateX(-50%);
    padding-inline: var(--container-padding-inline);
}

.icon-list__header {
    text-align: left;
    max-width: 54rem;
    margin: 0 auto var(--space-4);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.icon-list__title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    margin: 0;
    line-height: 1.1;
}

.icon-list__intro {
    font-size: 1.05rem;
    color: var(--color-text-grey);
    line-height: 1.6;
}

.icon-list__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: calc(var(--page-max-width) - 2 * var(--container-padding-inline));
    margin: 0 auto;
}

.icon-list__item {
    display: grid;
    grid-template-columns: clamp(2.1rem, 4.5vw, 2.75rem) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-6) 0;
    /* border-bottom: 1px solid var(--color-border); */
    align-items: flex-start;
}

.icon-list__item:last-child {
    border-bottom: 0;
}

@media (width >=900px) {
    .icon-list__list {
        grid-template-columns: minmax(0, 1fr);
        column-gap: var(--space-6);
    }

    /* .icon-list__item:last-child {
        border-bottom: 1px solid var(--color-border);
    } */
}

.icon-list__icon {
    width: clamp(2.1rem, 4.5vw, 2.75rem);
    height: clamp(2.1rem, 4.5vw, 2.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-list__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.icon-list__icon .ph {
    font-size: clamp(1.75rem, 4.5vw, 2.4rem);
    line-height: 1;
}

.icon-list__icon-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    border: 1px dashed var(--color-border);
    opacity: .4;
}

.icon-list__text {
    font-size: 1.05rem;
    line-height: 1.7;
}

.icon-list__text.text h1,
.icon-list__text.text h2,
.icon-list__text.text h3 {
    margin: 0 0 .25rem;
}

.icon-list__text.text p {
    margin-top: 0;
    margin-bottom: .35rem;
}

.content-section--black .icon-list__intro,
.content-section--dark .icon-list__intro {
    color: rgb(255 255 255 / 70%);
}

.content-section--black .icon-list__item,
.content-section--dark .icon-list__item {
    border-bottom-color: rgb(255 255 255 / 18%);
}

/* Team Section */

.team__inner {
    max-width: var(--page-max-width);
}

.team__header {
    text-align: left;
    max-width: none;
    width: 100%;
    margin: 0 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.team__title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    margin: 0;
    line-height: 1.1;
}

.team__intro {
    font-size: 1.05rem;
    color: var(--color-text-grey);
    line-height: 1.6;
}

.team__grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0;
    box-shadow: none;
}

.team-card__media {
    position: relative;
    aspect-ratio: 5 / 4;
    background: var(--color-card-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-card__placeholder {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--color-text-grey);
}

.team-card__body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: var(--space-3);
}

.team-card__name {
    margin: 0;
    font-size: 1.25rem;
}

.team-card__role {
    margin: 0;
    color: var(--color-text-grey);
}

.team-card__link {
    margin-top: .5rem;
    align-self: flex-start;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.team-card__link:hover {
    text-decoration: underline;
}

.content-section--black .team-card,
.content-section--dark .team-card {
    background: linear-gradient(180deg, #1c1c1c 0%, #141414 100%);
    border-color: rgb(255 255 255 / 10%);
}

.content-section--black .team-card__role,
.content-section--dark .team-card__role,
.content-section--black .team__intro,
.content-section--dark .team__intro {
    color: rgb(255 255 255 / 70%);
}

.content-section--black .team-card__placeholder,
.content-section--dark .team-card__placeholder {
    color: rgb(255 255 255 / 55%);
}

@media (width >=900px) {
  .team__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .partners-carousel__item,
  .partners-carousel__nav {
    transition: none;
  }
}

.timeline {
    position: relative;
    overflow: hidden;
}

.timeline__inner {
    position: relative;
}

.timeline__header {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto var(--space-5);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.timeline__title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    margin: 0;
    font-weight: 600;
    letter-spacing: -.01em;
}

.timeline__intro {
    font-size: 1.125rem;
    color: var(--color-text-grey);
    line-height: 1.7;
}

.timeline__list {
    --timeline-line-x: 1.25rem;
    --timeline-line-transform: -50%;
    --timeline-line-passive: rgb(var(--color-accent-rgb) / 18%);
    --timeline-line-active: rgb(var(--color-accent-rgb) / 85%);
    --timeline-line-glow: rgb(var(--color-accent-rgb) / 20%);
    --timeline-line-progress: 0%;

    position: relative;
    padding: var(--space-4) 0 var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.timeline__list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--timeline-line-x);
    transform: translateX(var(--timeline-line-transform));
    width: 3px;
    border-radius: 999px;
    box-shadow: 0 0 30px var(--timeline-line-glow);
    background: linear-gradient(180deg,
            var(--timeline-line-active) 0%,
            var(--timeline-line-active) var(--timeline-line-progress),
            var(--timeline-line-passive) var(--timeline-line-progress),
            var(--timeline-line-passive) 100%);
    transition: background .25s ease;
}

.timeline__item {
    position: relative;
    padding: var(--space-4) clamp(1.5rem, 6vw, 4rem) var(--space-5);
    padding-left: calc(var(--timeline-line-x) + 1.75rem);
}

.timeline__item::before {
    content: "";
    position: absolute;
    left: var(--timeline-line-x);
    top: 3rem;
    transform: translateX(var(--timeline-line-transform));
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 0;
    background: var(--color-accent);
    box-shadow: none;
    animation: none;
}

.timeline__card {
    position: relative;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    border: 0;
}

.timeline__item-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
    text-align: left;
}

.timeline__year-block {
    width: 100%;
    text-align: left;
}

.timeline__year {
    display: inline-flex;
    font-size: clamp(1.75rem, 8.5vw, 3.3rem);
    font-weight: 600;
    color: var(--color-black);
    margin: 0;
    line-height: 1;
    letter-spacing: .08em;
}

.timeline__tag {
    display: inline-flex;
    align-self: flex-start;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgb(0 113 227 / 8%);
    color: var(--color-accent);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.timeline__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: .25rem;
    width: 100%;
}

.timeline__headline {
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.25;
    margin: 0;
    font-weight: 600;
}

.timeline__text {
    color: var(--color-text);
    line-height: 1.7;
}

.timeline__text p {
    margin: 0 0 .75rem;
}

.timeline__text p:last-child {
    margin-bottom: 0;
}

.timeline__media {
    margin: var(--space-3) 0 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%), 0 25px 45px rgb(5 5 5 / 8%);
}

.timeline__media img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.timeline__media figcaption {
    font-size: .8rem;
    color: var(--color-text-grey);
    padding: .8rem 1.25rem 1.25rem;
}

@media (width >=768px) {
    .timeline__list {
        --timeline-line-x: 50%;
        --timeline-line-transform: -50%;

        padding: var(--space-6) 0;
    }

    .timeline__item {
        padding: var(--space-5) clamp(2.5rem, 7vw, 5.5rem);
    }

    .timeline__item::before {
        top: 3.25rem;
    }

    .timeline__item-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0;
        align-items: center;
    }

    .timeline__year-block {
        text-align: right;
        padding-right: clamp(1.75rem, 3vw, 3rem);
    }

    .timeline__body {
        padding-left: clamp(1.75rem, 3vw, 3rem);
    }
}

@keyframes timeline-dot-pulse {

    0%,
    100% {
        box-shadow:
            0 0 0 6px rgb(0 113 227 / 22%),
            0 12px 28px rgb(5 5 5 / 25%);
    }

    50% {
        box-shadow:
            0 0 0 9px rgb(0 113 227 / 32%),
            0 15px 35px rgb(5 5 5 / 35%);
    }
}

@media (width >=900px) {
    .content-section__grid {
        flex-direction: row;
    }

    .content-section__column {
        flex: 0 1 var(--column-basis, 100%);
        max-width: var(--column-basis, 100%);
    }

    .hero__content {
        max-width: 52rem;
    }
}

body.template-home,
body.has-hero-first {
    background: #050505;
}

.template-home .main,
body.has-hero-first .main {
    padding-top: 0;
}

.template-notes {
    background: var(--color-section-grey);
}

html[data-theme="dark"] .template-notes {
    background: #0c0612;
}

html[data-theme="dark"] .template-notes .main {
    background: #0c0612;
}

html[data-theme="dark"] .template-notes .modules-intro,
html[data-theme="dark"] .template-notes .notes-board {
    background: #130b1a;
}

@media (width <=640px) {
    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .button {
        width: 100%;
    }
}

.menu-toggle {
    display: none;
    width: 3.25rem;
    height: 3.25rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    cursor: pointer;
    background: transparent;
    transition: transform .3s ease, color .3s ease;
    color: var(--header-text-color, var(--color-black));
    filter: var(--svg-filter, none);
    position: relative;
    z-index: 60;
}

.menu-toggle span {
    position: absolute;
    left: 50%;
    width: 1.9rem;
    height: 3px;
    background: currentcolor;
    border-radius: 0;
    transform: translateX(-50%);
    transition: transform .25s ease, top .25s ease;
}

.menu-toggle span:nth-child(1) {
    top: calc(50% - 7px);
}

.menu-toggle span:nth-child(2) {
    top: calc(50% + 7px);
}

.menu-toggle.is-active {
    filter: none;
}

.menu-toggle.is-active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.section {
    padding: 3rem 0;
}

.grid {
    --columns: 12;
    --gutter: 3rem;

    display: grid;
    grid-gap: var(--gutter);
    grid-template-columns: 1fr;
}

.grid>.column {
    margin-bottom: var(--gutter);
}

.autogrid {
    --gutter: 3rem;
    --min: 10rem;

    display: grid;
    grid-gap: var(--gutter);
    grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
    grid-auto-flow: dense;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    font-weight: 600;
    line-height: 1.2;
}

.text {
    line-height: 1.5em;
}

.text a {
    text-decoration: underline;
}

.text :first-child {
    margin-top: 0;
}

.text :last-child {
    margin-bottom: 0;
}

.text p,
.text ul,
.text ol {
    margin-bottom: 1.5rem;
}

.text ul,
.text ol {
    margin-left: 1rem;
}

.text ul p,
.text ol p {
    margin-bottom: 0;
}

.text ul>li {
    list-style: disc;
}

.text ol>li {
    list-style: decimal;
}

.text ul ol,
.text ul ul,
.text ol ul,
.text ol ol {
    margin-bottom: 0;
}

.text h1,
.h1,
.intro {
    font-size: 2rem;
    margin-bottom: 3rem;
    line-height: 1.25em;
}

.text h2,
.h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.text h3,
.h3 {
    font-weight: 600;
}

.text code {
    font-family: var(--font-family-mono);
    font-size: 1em;
    background: var(--color-light);
    padding: 0 .5rem;
    display: inline-block;
    color: var(--color-black);
}

.text pre {
    margin: 3rem 0;
    background: var(--color-black);
    color: var(--color-white);
    padding: 1.5rem;
    overflow: scroll hidden;
    line-height: 1.5rem;
}

.text pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.text hr {
    margin: 6rem 0;
}

.text dt {
    font-weight: 600;
}

.text blockquote {
    font-size: 1.25rem;
    line-height: 1.325em;
    border-left: 2px solid var(--color-black);
    padding-left: 1rem;
    margin: 3rem 0;
    max-width: 25rem;
}

.text blockquote footer {
    font-size: .875rem;
    font-style: italic;
}

.text figure {
    margin: 3rem 0;
}

.text figcaption {
    padding-top: .75rem;
    color: var(--color-text-grey);
}

.text figure ul {
    line-height: 0;
    display: grid;
    gap: 1.5rem;
    margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.text figure ul li {
    list-style: none;
}

hr {
    border: 0;
    background: currentcolor;
    height: 2px;
    width: 1.5rem;
    margin: 3rem auto;
}

.intro {
    max-width: 40rem;
}

.intro *:not(:last-child) {
    margin-bottom: 1em;
}

.box {
    background: var(--color-light);
    padding: 1.5rem;
    border: 4px solid var(--color-white);
    outline: 2px solid var(--color-light);
}

.video,
.img {
    position: relative;
    display: block;

    --w: 1;
    --h: 1;

    padding-bottom: calc(100% / var(--w) * var(--h));
    background: var(--color-black);
}

.img img,
.video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.img[data-contain] img {
    object-fit: contain;
}

.img-caption,
.video-caption {
    padding-top: .75rem;
    line-height: 1.5em;
}

.footer {
    --footer-bg: var(--color-section-grey);
    --footer-text: var(--color-black);
    --footer-border-color: rgb(0 0 0 / 5%);
    --footer-meta-border-color: rgb(0 0 0 / 8%);
    --footer-muted: var(--color-text-grey);
    --footer-accent: var(--color-black);
    --footer-logo-filter: brightness(0);
    padding: clamp(4rem, 8vw, 6rem) 0;
    background: var(--footer-bg);
    border-top: none;
    color: var(--footer-text);
}

.footer__inner {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-inline);
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 3rem);
}

.footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: flex-start;
}

.footer__col--brand {
    display: flex;
}

.footer__col--contact,
.footer__col--links,
.footer__col--newsletter {
    margin-top: clamp(0rem, 2vw, 1.25rem);
}

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.footer__logo {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.footer .logo__image--wordmark {
    filter: var(--footer-logo-filter, brightness(0));
}

.template-home .footer .logo__image--wordmark {
    filter: var(--footer-logo-filter, brightness(0));
}

.footer__tagline {
    color: var(--footer-muted);
    max-width: 28rem;
}


.footer__list {
    text-align: left;
}

.footer__list h3 {
    font-size: 1rem;
    margin-bottom: .5rem;
}

.footer__list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    color: var(--footer-muted);
    align-items: flex-start;
}

.footer__social {
    gap: .45rem;
}

.footer__col--contact {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.footer__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    width: 100%;
    border-top: 1px solid var(--footer-meta-border-color);
    padding-top: 1.5rem;
    justify-content: space-between;
}

.footer__meta-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.footer__meta-links {
    display: flex;
    align-items: center;
    font-size: .8rem;
    color: var(--footer-muted);
    white-space: nowrap;
    margin-left: auto;
    text-align: right;
}

.footer__meta-links a {
    color: inherit;
    text-decoration: none;
}

.footer__meta-links a:hover {
    color: var(--footer-accent);
}

.footer__list a:hover {
    color: var(--footer-accent);
}

.footer__placeholder {
    color: var(--footer-muted);
    font-size: .9rem;
}

.footer__legal {
    color: var(--footer-muted);
    font-size: .8rem;
    margin: 0;
    text-align: left;
}

/* Newsletter column */
.footer__col--newsletter .inf-main_0d472bbe89e823508966d89beee51836 {
    background: none;
    padding: 0;
    margin: 0;
}

.footer__col--newsletter .inf-main_0d472bbe89e823508966d89beee51836 > span {
    display: block;
    color: var(--footer-muted);
    margin-bottom: .6rem;
}

.footer__col--newsletter .inf-content {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 0 !important;
}

.footer__col--newsletter .inf-input.inf-input-text {
    margin-bottom: 0;
}

.footer__col--newsletter .inf-input input {
    width: 100%;
    height: 2.5rem;
    padding: 0 .75rem;
    background: transparent;
    border: 1px solid var(--footer-border-color) !important;
    color: var(--footer-text);
    border-radius: 4px;
    font-family: inherit;
}

.footer__col--newsletter .inf-input input::placeholder {
    color: var(--footer-muted);
}

.footer__col--newsletter .inf-input.inf-error input {
    border-color: #cc0033 !important;
}

.footer__col--newsletter .inf-submit input {
    width: 100%;
    background: var(--footer-accent);
    color: var(--footer-bg);
    border: none;
    height: 2.5rem;
    padding: 0 1.25rem;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
    font-family: inherit;
}

.footer__col--newsletter .inf-submit input:hover {
    opacity: .85;
}

.footer__col--newsletter .inf-rgpd {
    font-size: .75rem;
    color: var(--footer-muted);
    margin: .1rem 0 0;
}

.footer__col--newsletter .inf-success h4 {
    font-weight: normal;
    font-size: .95rem;
    color: var(--footer-text);
}

.footer .language-switcher--footer {
    background: rgb(0 0 0 / 6%);
    border-color: rgb(0 0 0 / 12%);
}

.footer .language-switcher--footer .language-switcher__link {
    color: var(--footer-text);
}

.footer .language-switcher--footer .language-switcher__link.is-active {
    color: var(--color-white);
}

.footer[data-footer-theme="white"] {
    --footer-bg: var(--color-section-white);
}

.footer[data-footer-theme="grey"] {
    --footer-bg: var(--color-section-grey);
}

.footer[data-footer-theme="dark"] {
    --footer-bg: var(--color-section-dark);
    --footer-text: var(--color-white);
    --footer-border-color: rgb(255 255 255 / 25%);
    --footer-meta-border-color: rgb(255 255 255 / 18%);
    --footer-muted: rgb(255 255 255 / 70%);
    --footer-accent: var(--color-white);
    --footer-logo-filter: brightness(0) invert(1);
}

.footer[data-footer-theme="dark"] .language-switcher--footer {
    background: rgb(255 255 255 / 12%);
    border-color: rgb(255 255 255 / 22%);
}

html[data-theme="dark"] .footer {
    --footer-bg: var(--color-section-black);
    --footer-text: var(--color-white);
    --footer-border-color: rgb(255 255 255 / 25%);
    --footer-meta-border-color: rgb(255 255 255 / 18%);
    --footer-muted: rgb(255 255 255 / 70%);
    --footer-accent: var(--color-white);
    --footer-logo-filter: brightness(0) invert(1);
}


.map {
    --w: 2;
    --h: 1;

    padding-bottom: calc(100% / var(--w) * var(--h));
    position: relative;
    overflow: hidden;
    background: var(--color-black);
}

.map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


@media screen and (width >=60rem) {
    body {
        --padding: 3rem;
    }

    .grid {
        grid-template-columns: repeat(12, 1fr);
    }

    .grid>.column {
        grid-column: span var(--columns);
    }

}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.pagination>span {
    color: var(--color-text-grey);
    border-color: rgb(0 0 0 / 20%);
    background: rgb(255 255 255 / 70%);
}

.pagination>* {
    width: 3rem;
    height: 3rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid currentcolor;
    border-radius: 999px;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.pagination-prev::before,
.pagination-next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .72rem;
    height: .72rem;
    border-top: 2px solid currentcolor;
}

.pagination-prev::before {
    border-left: 2px solid currentcolor;
    transform: translate(calc(-50% + 2px), -50%) rotate(-45deg);
}

.pagination-next::before {
    border-right: 2px solid currentcolor;
    transform: translate(calc(-50% - 2px), -50%) rotate(45deg);
}

.pagination>a:hover {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
    transform: translateY(-1px);
}

.pagination>a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

html[data-theme="dark"] .template-notes .pagination>* {
    border-color: rgb(255 255 255 / 32%);
    color: rgb(255 255 255 / 88%);
    background: transparent;
}

html[data-theme="dark"] .template-notes .pagination>span {
    border-color: rgb(255 255 255 / 16%);
    color: rgb(255 255 255 / 48%);
    background: rgb(255 255 255 / 8%);
}

html[data-theme="dark"] .template-notes .pagination>a {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

html[data-theme="dark"] .template-notes .pagination>a:hover {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

@media (min-width: 901px) {
    .footer__grid {
        grid-template-columns: 1.6fr 0.9fr 0.9fr 0.9fr;
    }

    .footer__col--brand {
        grid-column: 1;
    }

}

@media (max-width: 900px) {
    .notes-board__grid {
        grid-template-columns: 1fr;
    }

    .footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer__col--brand {
        grid-column: 1 / -1;
    }

    .footer__col--newsletter {
        grid-column: 1 / -1;
        order: 4;
        margin-top: var(--space-3);
    }

    .footer__col--newsletter .footer__list {
        padding: clamp(.75rem, 2.5vw, 1rem);
        border: 1px solid var(--footer-border-color);
        border-radius: .65rem;
    }


    .explainers-teaser__grid {
        display: flex;
        gap: var(--space-3);
        overflow-x: auto;
        overflow-y: visible;
        padding: var(--space-3) 0 var(--space-6);
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        padding-inline: calc(var(--container-padding-inline) + 1.25rem);
    }

    .explainers-teaser__grid::-webkit-scrollbar {
        display: none;
    }

    .explainers-teaser__grid::before {
        content: "";
        flex: 0 0 clamp(1rem, 5vw, 2rem);
    }

    .explainers-teaser__grid>* {
        flex: 0 0 min(18rem, 85vw);
        max-width: min(18rem, 85vw);
        scroll-snap-align: start;
        margin-inline: .25rem;
    }

    .explainers-teaser__grid>*:first-child {
        margin-left: 0;
    }

    .explainers-teaser .content-section__inner {
        max-width: none;
        width: 100%;
        padding-inline: var(--container-padding-inline);
    }

    .header__inner {
        padding: 1.25rem clamp(1rem, 6vw, 2.5rem);
        margin-bottom: 0;
        gap: var(--space-3);
    }

    .header .logo__image {
        height: clamp(2rem, 8vw, 2.6rem);
    }

    .template-home .header__inner,
    body.has-hero-first .header__inner {
        padding: 1.25rem clamp(1rem, 6vw, 2.5rem);
    }

    .header-controls {
        width: auto;
        margin-top: 0;
        order: 2;
        display: flex;
        justify-content: flex-end;
        margin-left: auto;
        position: static;
        transform: none;
    }

    .menu-toggle {
        display: flex;
    }

    .menu {
        position: fixed;
        inset: 0;
        order: 3;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding:
            calc(env(safe-area-inset-top) + clamp(.6rem, 3vw, 1rem)) clamp(1.5rem, 5vw, 2.25rem) calc(env(safe-area-inset-bottom) + clamp(1.5rem, 5vw, 2.25rem));
        height: 100vh;
        min-height: 100vh;
        background: #000;
        color: rgb(255 255 255 / 92%);
        backdrop-filter: blur(8px);
        overflow-y: auto;
        box-sizing: border-box;
        opacity: 0;
        transform: translateY(-8%);
        pointer-events: none;
        visibility: hidden;
        transition:
            opacity .45s ease,
            transform .45s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0s linear .45s;
        z-index: 40;
        scrollbar-width: none;
    }

    .menu::-webkit-scrollbar {
        display: none;
    }

    .menu::before {
        content: none;
    }

    .menu>* {
        position: relative;
        z-index: 1;
    }

    .menu.is-open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
        transition-delay: 0s, 0s, 0s;
    }

    .menu__content {
        margin-left: 0;
        width: 100%;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        min-height: calc(100vh - 2 * clamp(1.5rem, 5vw, 2.25rem) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        padding: 0 clamp(.25rem, 2vw, 1rem) clamp(1rem, 4vw, 1.5rem);
        position: relative;
        overflow: hidden;
    }

    .menu__intro {
        display: flex;
        align-items: flex-start;
        padding: .75rem 0 1rem;
        gap: .5rem;
    }

    .menu__logo {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .menu__logo .logo__image--icon {
        height: clamp(2.1rem, 8vw, 2.7rem);
    }

    .menu__logo .logo__image {
        filter: var(--header-logo-filter, brightness(0));
    }

    .menu__list {
        flex-direction: column;
        align-items: stretch;
        gap: .8rem;
        margin: .25rem 0 0;
        justify-content: flex-start;
    }

    .menu__panel {
        width: 100%;
    }

    .menu__panel--primary {
        position: relative;
        transition: transform .35s ease, opacity .35s ease;
    }

    .menu.is-drilled .menu__panel--primary {
        transform: translateX(-10%);
        opacity: 1;
    }

    .menu.is-drilled .menu__panel--primary::after {
        content: "";
        position: absolute;
        inset: 0;
        background: #000;
        z-index: 2;
        pointer-events: auto;
    }

    .menu__item {
        position: static;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .35rem;
        border-bottom: 1px solid rgb(255 255 255 / 12%);
        padding: .35rem 0;
    }

    .menu__link {
        width: 100%;
        padding: 0;
        font-size: clamp(1.25rem, 5vw, 1.9rem);
        font-weight: 500;
        color: var(--color-white);
        opacity: 0;
        transform: translateY(10px);
        text-align: left;
        letter-spacing: -.01em;
        justify-content: space-between;
    }

    .menu__link::after {
        display: none;
    }

    .menu__dropdown {
        position: absolute;
        inset: 0;
        width: 100%;
        flex-direction: column;
        justify-content: flex-start;
        padding:
            calc(env(safe-area-inset-top) + clamp(1rem, 4vw, 1.5rem)) clamp(1.65rem, 6vw, 2.4rem) clamp(1.5rem, 5vw, 2.35rem);
        gap: .8rem;
        margin: 0;
        background: #000;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 3;
        transition:
            transform .35s cubic-bezier(0.4, 0, 0.2, 1),
            opacity .28s ease;
        display: flex;
        overflow-y: auto;
        transform: translateX(14%);
    }

    .menu__dropdown>*:nth-of-type(1) {
        --submenu-index: 0;
    }

    .menu__dropdown>*:nth-of-type(2) {
        --submenu-index: 1;
    }

    .menu__dropdown>*:nth-of-type(3) {
        --submenu-index: 2;
    }

    .menu__dropdown>*:nth-of-type(4) {
        --submenu-index: 3;
    }

    .menu__dropdown>*:nth-of-type(5) {
        --submenu-index: 4;
    }

    .menu__dropdown>*:nth-of-type(6) {
        --submenu-index: 5;
    }

    .menu__dropdown::-webkit-scrollbar {
        display: none;
    }

    .menu__dropdown.is-panel-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        visibility: visible;
    }

    .menu__panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .8rem;
        padding: 0 clamp(1.65rem, 6vw, 2.4rem) 1.05rem clamp(1.1rem, 4vw, 1.5rem);
        position: sticky;
        top: 0;
        background: inherit;
        z-index: 3;
    }

    .menu__panel-title {
        display: none;
        color: var(--color-white);
        font-size: 1.05rem;
        letter-spacing: .02em;
    }

    .menu__back {
        color: var(--color-white);
        border: 0;
        background: transparent;
        border-radius: 0;
        padding: .2rem 0;
    }

    .menu__back:hover {
        background: rgb(255 255 255 / 12%);
        border-color: rgb(255 255 255 / 32%);
    }

    .menu__back-icon {
        width: .65rem;
        height: .65rem;
    }

    .menu__dropdown-link {
        width: 100%;
        color: var(--color-white);
        font-size: clamp(1.1rem, 3.8vw, 1.6rem);
        font-weight: 500;
        text-align: left;
        letter-spacing: -.01em;
        padding: .5rem 0 .5rem clamp(1.2rem, 4vw, 1.6rem);
        opacity: 0;
        transform: translateY(10px);
        transition: color .2s ease;
    }

    .menu__dropdown-link+.menu__dropdown-link {
        border-top: 1px solid rgb(255 255 255 / 12%);
    }

    .menu__dropdown-parent {
        display: block;
        font-weight: 500;
        color: #fff;
        font-size: clamp(1.25rem, 5vw, 1.9rem);
        letter-spacing: -.01em;
        padding: .5rem 0 .8rem clamp(1.2rem, 4vw, 1.6rem);
    }

    .menu__caret {
        width: 1.1rem;
        height: 1.1rem;
        border: 0;
        border-radius: 0;
        transform: none;
        flex-shrink: 0;
        pointer-events: auto;
        touch-action: manipulation;
    }

    .menu__item.is-open .menu__caret {
        transform: none;
    }

    .menu__item.is-open .menu__dropdown {
        opacity: 1;
        pointer-events: auto;
        display: flex;
    }

    .menu__item.is-open .menu__dropdown-link {
        animation: menuLinkIn .45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        animation-delay: var(--menu-anim-delay, calc(90ms * var(--submenu-index, 0)));
    }

    .menu__footer {
        display: flex;
        margin-top: auto;
        padding-top: 1.25rem;
        border-top: 0;
        gap: 1rem;
    }

    .menu {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .menu__back {
        display: inline-flex;
    }

    .menu.is-open .menu__link {
        animation: menuLinkIn .45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        animation-delay: var(--menu-anim-delay, 0ms);
    }

    .menu.is-open .menu__item.is-open .menu__dropdown-link {
        animation: menuLinkIn .45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        animation-delay: var(--menu-anim-delay, calc(90ms * var(--submenu-index, 0)));
    }

    .language-switcher--desktop {
        display: none;
    }

    .language-switcher--footer {
        display: inline-flex;
        width: auto;
        justify-content: flex-start;
        background: rgb(255 255 255 / 12%);
        border-color: rgb(255 255 255 / 22%);
    }

    .menu__footer .language-switcher--footer {
        display: none;
    }

    .language-switcher--footer .language-switcher__link {
        font-size: .8rem;
        color: var(--color-white);
    }

    .template-home .menu__dropdown {
        background: #000;
        border: 0;
        box-shadow: none;
    }

    .template-home .menu__dropdown-link {
        color: var(--color-white);
    }
}


.note-excerpt {
    line-height: 1.5em;
    padding: var(--card-padding);
    border-radius: .65rem;
    background: var(--color-card);
    box-shadow: none;
    transition: transform .12s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow .12s cubic-bezier(0.25, 0.1, 0.25, 1), border-color .12s cubic-bezier(0.25, 0.1, 0.25, 1);
}

html[data-theme="dark"] .template-notes .note-excerpt {
    position: relative;
    background: #1b1423;
    border: 1px solid rgb(255 255 255 / 10%);
    overflow: hidden;
}

html[data-theme="dark"] .template-notes .note-excerpt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56%;
    background: #130d1a;
    z-index: 0;
}

html[data-theme="dark"] .template-notes .note-excerpt > * {
    position: relative;
    z-index: 1;
}

html[data-theme="dark"] .template-notes .note-excerpt-title {
    color: var(--color-white);
}

html[data-theme="dark"] .template-notes .note-excerpt-text {
    color: rgb(255 255 255 / 78%);
}

.note-excerpt .img {
    margin: calc(var(--card-padding) * -1);
    margin-bottom: var(--space-3);
    border-radius: .65rem .65rem 0 0;
    overflow: hidden;
}

.note-excerpt .img img {
    border-radius: inherit;
}

.note-excerpt a {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes menuLinkIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes submenuIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.note-excerpt:hover {
    transform: translateY(-8px);
    box-shadow: none;
}

.note-excerpt header {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.note-excerpt figure {
    margin: 0 0 1rem;
    border-radius: .65rem;
    overflow: hidden;
}

.note-excerpt-title {
    font-weight: 600;
    font-size: 1.35rem;
}

.note-excerpt-text {
    color: var(--color-text-grey);
    font-size: 1rem;
}

/* Dark mode article previews on black background */
.content-section--black .note-excerpt,
.content-section--dark .note-excerpt {
    background: var(--color-section-dark);
    border: 1px solid #000000;
    color: var(--color-white);
}

.content-section--black .note-excerpt:hover,
.content-section--dark .note-excerpt:hover {
    border-color: rgb(255 255 255 / 20%);
}

.content-section--black .note-excerpt-title,
.content-section--dark .note-excerpt-title {
    color: var(--color-white);
}

.content-section--black .note-excerpt-text,
.content-section--dark .note-excerpt-text {
    color: rgb(255 255 255 / 70%);
}

.template-home .header,
body.has-hero-first .header {
    position: sticky;
    top: 0;
    background: transparent;
    z-index: 60;
    box-shadow: none;
    --header-text-color: var(--color-white);
    --header-logo-filter: brightness(0) invert(1);
}

.template-home .menu__link::after,
body.has-hero-first .menu__link::after {
    background: var(--color-white);
}

.template-home .header.is-floating,
body.has-hero-first .header.is-floating {
    background: rgb(5 5 5 / 88%);
    box-shadow: 0 18px 45px rgb(0 0 0 / 35%);
}

.template-home .header__inner,
body.has-hero-first .header__inner {
    max-width: var(--page-max-width);
    padding: var(--space-4) var(--container-padding-inline);
    margin-bottom: 0;
}

.template-home .language-switcher--desktop,
body.has-hero-first .language-switcher--desktop {
    background: rgb(255 255 255 / 20%);
}

.template-home .language-switcher--desktop .language-switcher__link,
body.has-hero-first .language-switcher--desktop .language-switcher__link {
    color: var(--color-white);
}

.template-home .language-switcher--desktop .language-switcher__link.is-active,
body.has-hero-first .language-switcher--desktop .language-switcher__link.is-active {
    background: var(--color-white);
    color: #050505;
}




.template-home .menu__dropdown,
body.has-hero-first .menu__dropdown {
    --header-text-color: var(--color-black);
}

.template-home .menu-toggle,
.body.has-hero-first .menu-toggle {
    border-color: rgb(255 255 255 / 40%);
    color: var(--color-white);
    box-shadow: none;
    filter: none;
}

.template-home .menu-toggle span,
.body.has-hero-first .menu-toggle span {
    background: currentcolor;
}






.styleguide {
    padding: var(--section-spacing-y) 0;
}

.styleguide__section {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-inline);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.styleguide h2 {
    margin-top: var(--space-7);
}

.styleguide__intro h1 {
    margin-bottom: 0;
}

.styleguide__anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.styleguide__anchor-nav a {
    padding: .35rem .9rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .9rem;
    color: var(--color-black);
}

.styleguide__split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-5);
}

.styleguide__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.styleguide__panel {
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.styleguide__panel--wide {
    grid-column: span 2;
}

.styleguide__swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--space-3);
}

.styleguide__swatches--paired {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.styleguide__swatches--compact .styleguide__swatch-color {
    height: 2.25rem;
}

.styleguide__swatch-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.styleguide__swatch {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-weight: 600;
}

.styleguide__swatch-color {
    width: 100%;
    height: 3rem;
    border-radius: 0;
    border: 1px solid var(--color-border);
}

.styleguide__type {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.styleguide__label {
    font-size: .75rem;
    color: var(--color-text-grey);
    margin-bottom: .25rem;
}

.styleguide__label-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    margin-left: .45rem;
    border-radius: .65rem;
    border: 1px solid var(--color-border);
    background: var(--color-pill-surface);
    color: var(--color-text);
    font-weight: 600;
    letter-spacing: .03em;
}

.styleguide__meta {
    font-size: .8rem;
    color: var(--color-text-grey);
}

.styleguide__buttons {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.styleguide__button-group {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 12rem;
}

.styleguide__button-states {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.styleguide__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.styleguide__card-preview {
    display: grid;
    gap: var(--space-3);
}

.styleguide__form {
    display: grid;
    gap: var(--space-3);
}

.styleguide__form input,
.styleguide__form select {
    width: 100%;
    padding: .75rem 1rem;
    border-radius: .75rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.styleguide__checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}

.styleguide__checkbox input {
    width: auto;
}

.styleguide__spacing {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.styleguide__spacing li {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: .35rem;
}

.styleguide__token-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.styleguide__token-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: .35rem;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgb(0 0 0 / 8%);
    font-size: .8rem;
    color: var(--color-black);
    background: var(--color-section-white);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.tag-pill:hover {
    background: rgb(0 0 0 / 5%);
}

.is-reveal-init {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .4s ease, transform .4s ease;
}

.is-reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .is-reveal-init {
        opacity: 1;
        transform: none;
    }
}

.note__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: var(--space-3) 0 var(--space-4);
}

.note__tags .tag-pill {
    background: #ffffff;
}

html[data-theme="dark"] .template-note .note__tags .tag-pill {
    background: #1a1422;
    color: rgb(255 255 255 / 86%);
    border-color: rgb(255 255 255 / 18%);
}

html[data-theme="dark"] .template-note .note__tags .tag-pill:hover {
    background: rgb(255 255 255 / 12%);
    color: var(--color-white);
}

.blog-prevnext .autogrid {
    justify-content: flex-start;
    justify-items: start;
}

.blog-prevnext {
    margin-bottom: var(--space-6);
}

.blog-prevnext .note-excerpt {
    width: 100%;
    max-width: 26rem;
    margin: 0;
}

/* Contact template */
.contact-module__card {
    /* Removed card border/bg for a cleaner look, or can be kept if desired.
     Refined spacing for better structure. */
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.contact-module__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.contact-module__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-module__row {
  --column-count: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.contact-module__column {
  flex: 1 1 calc(
    var(--column-basis, 100%) -
    (var(--space-3) * ((var(--column-count, 1) - 1) / var(--column-count, 1)))
  );
  max-width: calc(
    var(--column-basis, 100%) -
    (var(--space-3) * ((var(--column-count, 1) - 1) / var(--column-count, 1)))
  );
  min-width: min(17rem, 100%);
}

.contact-module__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-module__field {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.contact-module__field label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

.contact-module__field .required {
  color: var(--color-accent);
}

.contact-module__field input:not([type="checkbox"]),
.contact-module__field textarea,
.contact-module__field select {
  font: inherit;
  padding: .8rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color .2s ease, box-shadow .2s ease;
  width: 100%;
}

.contact-module__field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
    linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 50%, calc(100% - .75rem) 50%;
  background-repeat: no-repeat;
  background-size: .35rem .35rem;
  padding-right: 2.2rem;
}

.contact-module__field input:not([type="checkbox"]):focus,
.contact-module__field textarea:focus,
.contact-module__field select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-pill-surface);
}

.contact-module__field textarea {
  resize: vertical;
  min-height: 8rem;
}

.contact-module__field--checkbox {
  flex-direction: column;
  gap: .25rem;
  margin-top: .5rem;
}

.contact-module__field--checkbox .checkbox-wrapper {
  display: flex;
  align-items: center;
  /* Vertically center checkbox with label text */
  gap: var(--space-3);
}

.contact-module__field--checkbox input {
  /* Custom checkbox styling could go here, for now use standard but sized up */
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.contact-module__field--checkbox label {
  font-weight: 400;
  cursor: pointer;
  line-height: 1.4;
  margin: 0;
  /* Remove default margin */
}

.contact-module__field-description {
  display: block;
  font-size: .9rem;
  color: var(--color-text-grey);
  margin-top: .25rem;
}

.contact-module__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-4);
}

html[data-theme="dark"] .contact-module__actions .button--primary {
  border: 1px solid rgb(255 255 255 / 22%);
  box-shadow: 0 8px 22px rgb(0 0 0 / 28%);
}

.contact-module__privacy {
  font-size: .95rem;
  color: var(--color-text-grey);
}

@media (max-width: 700px) {
  .contact-module__row {
    flex-direction: column;
  }

  .contact-module__column {
    flex-basis: 100%;
    min-width: 100%;
  }
}

/* Page Header Styling Consolidated */
.modules-intro {
    margin-top: var(--space-5);
}

.modules-intro .content-section__inner {
    padding: 0;
}

.modules-intro .h1 {
    text-align: left;
    margin-bottom: var(--space-4);
}

/* Contact Form Styles */
.Contact-success {
  padding: var(--space-4);
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 0.5rem;
  color: #166534;
  margin-bottom: var(--space-4);
}
.Contact-success p {
  margin: 0;
}

.Contact-field {
    margin-bottom: var(--space-4);
}

.Contact-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
    font-size: 0.9rem;
}

.Contact-input,
.Contact-textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
}

.Contact-input:focus,
.Contact-textarea:focus {
    outline: 2px solid var(--color-accent);
    border-color: transparent;
}

.Contact-submit {
    background: var(--color-black);
    color: var(--color-white);
    border: none;
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    font-weight: 600;
    transition: opacity 0.2s;
}

.Contact-submit:hover {
    opacity: 0.8;
}

.Contact-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.t-required {
  color: var(--color-accent);
  font-size: 0.8em;
  margin-left: 0.5ch;
}