/* 00-fonts.css */


@font-face {
  font-family: 'Basis Grotesque Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/basis-grotesque-pro-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Basis Grotesque Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/basis-grotesque-pro-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/onest-400-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/onest-400-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/onest-600-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/onest-600-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 01-tokens.css */


:root {
  
  --fp-bg: #f4f3ee;
  --fp-bg-sink: #e9e7e0;
  --fp-bg-card: #ffffff;
  --fp-bg-deep: #191a1e;
  --fp-white: #ffffff;
  --fp-ink: #15161a;
  
  --fp-ink-2: #4a4c53;
  --fp-ink-3: #62646c;
  --fp-ink-on-deep: #f2f1ed;
  --fp-ink-on-deep-2: #b7b9c0;
  --fp-line: #dcd9d1;
  --fp-line-2: #c2bfb6;
  --fp-line-on-deep: #34363c;

  
  --fp-green: #72ab75;
  --fp-accent: #2f6b3f;
  --fp-accent-hover: #24522f;
  --fp-accent-soft: #e4ece3;
  --fp-accent-on-deep: #8fc99b;

  
  --fp-marker: #de3b30;
  --fp-marker-soft: #f7e2e0;
  --fp-alert: #c0392b;

  
  --fp-font-display: "Basis Grotesque Pro", "Segoe UI", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --fp-font-text: "Onest", "Segoe UI Variable Text", "Segoe UI", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  
  --fs-display: clamp(2.6rem, 4.55vw, 4.68rem);
  --fs-h1: clamp(2.275rem, 4.03vw, 3.965rem);
  --fs-h2: clamp(1.95rem, 2.795vw, 2.925rem);
  --fs-h3: clamp(1.4625rem, 1.625vw, 1.7875rem);
  --fs-lead: clamp(1.0625rem, 0.55rem + 0.62vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.55rem + 0.5vw, 1.1875rem);
  --fs-small: clamp(0.9375rem, 0.62rem + 0.28vw, 1.0625rem);
  --fs-micro: 0.8125rem;

  
  --lh-display: 1.0;
  --lh-heading: 1.1;
  --lh-lead: 1.4;
  --lh-body: 1.6;
  --tr-display: -0.02em;
  --tr-heading: -0.014em;
  --tr-eyebrow: 0.12em;

  
  --wrap: 1480px;
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --grid-gap: clamp(1rem, 2vw, 2rem);
  --step-1: clamp(1.5rem, 2.4vw, 2.25rem);
  --step-2: clamp(2.5rem, 4vw, 4.5rem);
  --step-3: clamp(3.5rem, 6vw, 6.5rem);
  --step-4: clamp(4.5rem, 8vw, 9rem);
  
  --section-pad: clamp(2.75rem, 4.2vw, 5rem);

  
  --r-1: 3px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;
  
  --shadow-pop: 0 20px 44px -28px rgb(21 22 26 / 34%);
  --shadow-hover: 0 14px 30px -20px rgb(21 22 26 / 30%);
  --shadow-btn: none;

  
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 520ms;

  
  --z-header: 60;
  --z-menu: 70;
  --z-skip: 90;
}

@media (max-width: 640px) {
  :root {
    
    --step-1: 1.125rem;
    --step-2: 1.75rem;
    --step-3: 2.25rem;
    --step-4: 3rem;
    --section-pad: 2.25rem;
    --grid-gap: 0.75rem;

    
    --fs-display: 2.275rem;
    --fs-h1: 1.95rem;
    --fs-h2: 1.625rem;
    --fs-h3: 1.38rem;
    --fs-body: 1rem;
    --tr-display: -0.02em;
    --tr-heading: -0.014em;
    --lh-heading: 1.08;
    --lh-lead: 1.38;
    --lh-body: 1.55;
  }

  
  .menu-button {
    min-height: 2.75rem;
  }

  
  .footer-grid a {
    padding-block: 0.36rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
  }
}


/* 02-base.css */


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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--fp-bg);
  color: var(--fp-ink);
  font-family: var(--fp-font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fp-font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  margin: 0;
  text-wrap: balance;
  
  font-feature-settings: "kern" 1;
  
  overflow-wrap: break-word;
}

h3,
h4 {
  font-weight: 500;
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

p {
  margin: 0;
}

img,
video,
picture,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  background: var(--fp-bg-sink);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration-color: var(--fp-line-2);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease);
}

a:hover {
  color: var(--fp-accent);
  text-decoration-color: currentColor;
}

.flow a:not(.btn),
.story-text a:not(.btn),
.split-text a:not(.btn),
.workshop-text a:not(.btn) {
  color: var(--fp-accent);
  text-decoration-color: color-mix(in srgb, var(--fp-accent) 38%, transparent);
}

.flow a:not(.btn):hover,
.story-text a:not(.btn):hover,
.split-text a:not(.btn):hover,
.workshop-text a:not(.btn):hover {
  color: var(--fp-accent-hover);
  text-decoration-color: currentColor;
}

:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--fp-accent);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

::selection {
  background: var(--fp-accent);
  color: var(--fp-white);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: var(--z-skip);
  padding: 0.75rem 1.25rem;
  background: var(--fp-ink);
  color: var(--fp-white);
  border-radius: var(--r-2);
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

.wrap {
  width: min(100%, var(--wrap));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  width: min(100%, 980px);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section,
.section-tight {
  padding-block: var(--section-pad);
}

.section-sink {
  background: var(--fp-bg-sink);
}

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

.section-deep {
  background: var(--fp-bg-deep);
  color: var(--fp-ink-on-deep);
}

.section-accent h1,
.section-accent h2,
.section-accent h3 {
  color: var(--fp-white);
}

.section-deep h1,
.section-deep h2,
.section-deep h3 {
  color: var(--fp-ink-on-deep);
}

.section-accent .lead,
.section-accent .muted,
.section-accent p,
.section-deep .lead,
.section-deep .muted,
.section-deep p {
  color: rgb(255 255 255 / 88%);
}

.section-accent a:not(.btn),
.section-deep a:not(.btn) {
  color: var(--fp-white);
}

.section-accent a:not(.btn):hover,
.section-deep a:not(.btn):hover {
  color: var(--fp-white);
  text-decoration-color: currentColor;
}

.section-accent :where(a, button, summary, input, textarea, select, [tabindex]):focus-visible,
.section-deep :where(a, button, summary, input, textarea, select, [tabindex]):focus-visible,
.hero-cover :where(a, button, summary, input, textarea, select, [tabindex]):focus-visible,
.site-footer :where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline-color: var(--fp-white);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--fp-ink-2);
  max-width: 56ch;
}

.muted {
  color: var(--fp-ink-2);
}

.small {
  font-size: var(--fs-small);
}

.measure {
  max-width: 68ch;
}

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

.flow > * + * {
  margin-top: 1.15rem;
}

.flow > h2 {
  margin-top: var(--step-2);
}

.flow > h3 {
  margin-top: var(--step-1);
}

.flow p,
.flow li {
  max-width: 68ch;
}

.flow ul,
.flow ol {
  padding-left: 1.15rem;
}

.flow li + li {
  margin-top: 0.5rem;
}

.flow strong {
  font-weight: 600;
}

.table-scroll {
  max-width: 100%;
  margin-block: 1.75rem;
  border: 1px solid var(--fp-line-2);
  border-radius: var(--r-2);
  background: var(--fp-bg-card);
  overflow: hidden;
}

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  table-layout: fixed;
}

.table-scroll th,
.table-scroll td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--fp-line);
  border-right: 1px solid var(--fp-line);
}

.table-scroll th:last-child,
.table-scroll td:last-child {
  border-right: 0;
}

.table-scroll th {
  font-weight: 600;
  background: var(--fp-bg-sink);
  color: var(--fp-ink);
}

.table-scroll tr:last-child td {
  border-bottom: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

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

@media (max-width: 640px) {
  .flow > * + * {
    margin-top: 0.9rem;
  }

  .table-scroll {
    margin-block: 1.15rem;
  }
}

.media-placeholder {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px dashed var(--fp-line-2);
  border-radius: var(--r-1);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--fp-ink-3);
}


/* 03-components.css */


.btn {
  --btn-bg: var(--fp-accent);
  --btn-fg: var(--fp-white);
  --btn-line: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.85rem;
  border: 1px solid var(--btn-line);
  border-radius: var(--r-2);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.btn::after {
  content: "";
  position: absolute;
  top: -0.22rem;
  right: -0.22rem;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--fp-marker);
  transition: transform var(--dur-2) var(--ease);
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: scale(1.35);
}

.btn:hover {
  --btn-bg: var(--fp-accent-hover);
  color: var(--fp-white);
}

.btn:active {
  --btn-bg: var(--fp-accent-hover);
  box-shadow: inset 0 3px 10px rgb(10 26 15 / 52%);
}

.btn-glass {
  --btn-bg: rgb(255 255 255 / 30%);
  --btn-fg: var(--fp-white);
  --btn-line: rgb(255 255 255 / 62%);
  backdrop-filter: blur(10px) saturate(140%);
}

.btn-glass::after {
  display: none;
}

.btn-glass:hover {
  --btn-bg: rgb(255 255 255 / 44%);
  color: var(--fp-white);
  box-shadow: none;
}

.btn-glass:active {
  --btn-bg: rgb(255 255 255 / 52%);
  box-shadow: inset 0 3px 10px rgb(12 14 16 / 34%);
}

.btn-soft {
  --btn-bg: var(--fp-white);
  --btn-fg: var(--fp-ink);
  --btn-line: var(--fp-line-2);
}

.btn-soft::after {
  display: none;
}

.btn-soft:hover {
  --btn-bg: var(--fp-white);
  --btn-line: var(--fp-ink);
  color: var(--fp-ink);
}

.btn-soft:active {
  --btn-bg: #eeece6;
  box-shadow: inset 0 3px 10px rgb(21 22 26 / 22%);
}

.btn-on-accent {
  --btn-bg: var(--fp-white);
  --btn-fg: var(--fp-ink);
  --btn-line: var(--fp-white);
}

.btn-on-accent:hover {
  --btn-bg: #eeece6;
  --btn-line: #eeece6;
  color: var(--fp-ink);
}

.btn-on-accent:active {
  --btn-bg: #e2dfd7;
  box-shadow: inset 0 3px 10px rgb(10 26 15 / 34%);
}

.btn[disabled] {
  --btn-bg: var(--fp-line);
  --btn-line: var(--fp-line);
  --btn-fg: var(--fp-ink-3);
  cursor: not-allowed;
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fp-ink);
  --btn-line: var(--fp-line-2);
}

.btn-ghost:hover {
  --btn-bg: transparent;
  --btn-line: var(--fp-ink);
  color: var(--fp-ink);
}

.btn-small {
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  font-size: var(--fs-small);
  
  white-space: nowrap;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
}

.site-header[data-solid="true"],
body:not([data-hero="full"]) .site-header {
  background: rgb(250 249 246 / 88%);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--fp-line);
}

.header-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(0.75rem, 1.35vw, 2rem);
  
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--fp-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-decoration: none;
  white-space: nowrap;
}

.logo-picture {
  display: contents;
}

.brand-logo {
  width: 3.50625rem;
  height: 3.96rem;
  flex: none;
  object-fit: contain;
  background: none;
}

.brand-logo--light {
  display: none;
}

body[data-hero="full"] .site-header:not([data-solid="true"]) .brand-logo--light {
  display: block;
}

body[data-hero="full"] .site-header:not([data-solid="true"]) .brand-logo--dark {
  display: none;
}

@media (max-width: 700px) {
  .brand-logo {
    width: 2.921875rem;
    height: 3.3rem;
  }
}

.footer-logo {
  width: 6rem;
  height: 6.775rem;
  margin-bottom: 1.25rem;
  object-fit: contain;
  background: none;
}

body[data-hero="full"] .site-header:not([data-solid="true"]) {
  color: var(--fp-white);
  
  background: rgb(13 15 17 / 62%);
  backdrop-filter: saturate(120%) blur(3px);
}

body[data-hero="full"] .site-header:not([data-solid="true"]) .nav-link,
body[data-hero="full"] .site-header:not([data-solid="true"]) .brand {
  color: var(--fp-white);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.5rem);
  margin-inline-start: auto;
  padding-inline-start: clamp(1rem, 3vw, 3rem);
}

.nav-link,
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.nav-toggle[aria-expanded="true"] {
  color: var(--fp-accent);
}

body[data-hero="full"] .site-header:not([data-solid="true"]) .nav-toggle[aria-expanded="true"],
body[data-hero="full"] .site-header:not([data-solid="true"]) .nav-link:hover,
body[data-hero="full"] .site-header:not([data-solid="true"]) .nav-toggle:hover {
  color: var(--fp-white);
  text-shadow: 0 1px 10px rgb(12 14 16 / 55%);
}

.nav-link,
.nav-toggle {
  border-radius: var(--r-1);
  padding-inline: 0.45rem;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.nav-link:active,
.nav-toggle:active {
  background: var(--fp-accent-soft);
  color: var(--fp-accent);
}

body[data-hero="full"] .site-header:not([data-solid="true"]) .nav-link:active,
body[data-hero="full"] .site-header:not([data-solid="true"]) .nav-toggle:active {
  background: rgb(255 255 255 / 22%);
  color: var(--fp-white);
}

.nav-link[aria-current="page"] {
  position: relative;
  font-weight: 600;
}

.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.1rem;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--fp-marker);
  transform: translateX(-50%);
}

.nav-toggle::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--dur-1) var(--ease);
}

.nav-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-inline-start: clamp(0.5rem, 1.5vw, 1.5rem);
}

.mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: var(--z-menu);
  background: var(--fp-bg);
  border-bottom: 1px solid var(--fp-line);
  border-radius: 0 0 var(--r-4) var(--r-4);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
    visibility var(--dur-2);
}

.mega[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mega-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  padding-block: var(--step-1);
}

.mega-col a {
  display: block;
  padding: 0.4rem 0;
  text-decoration: none;
  color: var(--fp-ink);
}

.mega-col a:hover {
  color: var(--fp-accent);
}

.mega-figure {
  margin: 0;
  border-radius: var(--r-3);
  overflow: hidden;
}

.mega-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.mega-figure figcaption {
  font-size: var(--fs-small);
  color: var(--fp-ink-2);
  padding-top: 0.6rem;
}

.menu-button {
  position: relative;
  display: none;
  align-items: center;
  gap: 0.55rem;
  margin-inline-start: auto;
  padding: 0.5rem 0.95rem;
  border: 0;
  border-radius: var(--r-2);
  background: var(--fp-ink);
  color: var(--fp-white);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}

.menu-button::after {
  content: "";
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--fp-marker);
}

.menu-button:active {
  background: #000;
  box-shadow: inset 0 3px 10px rgb(0 0 0 / 55%);
}

.menu-mark {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

.menu-mark::before,
.menu-mark::after {
  content: "";
  position: absolute;
  left: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-2) var(--ease), width var(--dur-2) var(--ease),
    top var(--dur-2) var(--ease);
}

.menu-mark::before {
  top: 0.32rem;
  width: 100%;
}

.menu-mark::after {
  top: 0.64rem;
  width: 62%;
}

.menu-button[aria-expanded="true"] .menu-mark::before {
  top: 0.48rem;
  transform: rotate(45deg);
}

.menu-button[aria-expanded="true"] .menu-mark::after {
  top: 0.48rem;
  width: 100%;
  transform: rotate(-45deg);
}

.mobile-nav {
  display: none;
}

html[data-menu-open="true"] .site-header {
  touch-action: none;
}

@media (max-width: 1460px) and (min-width: 1101px) {
  .header-inner {
    gap: 0.6rem;
  }

  
  .primary-nav {
    gap: 0.2rem;
    padding-inline-start: 0.5rem;
  }

  .nav-link,
  .nav-toggle {
    padding-inline: 0.25rem;
    font-size: 0.8125rem;
  }

  .header-actions {
    margin-inline-start: 0.5rem;
  }

  .btn-small {
    padding: 0.4rem 0.75rem;
  }
}

@media (max-width: 1100px) {
  .primary-nav,
  .header-actions {
    display: none;
  }

  .menu-button {
    display: inline-flex;
  }

  .mobile-nav {
    display: block;
    position: fixed;
    
    inset: 4.75rem 0 0;
    z-index: var(--z-menu);
    background: var(--fp-bg);
    overflow-y: auto;
    
    overscroll-behavior: contain;
    padding: var(--step-1) var(--gutter) var(--step-2);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
      visibility var(--dur-2);
  }

  .mobile-nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .mobile-nav details {
    border-bottom: 1px solid var(--fp-line);
  }

  .mobile-nav summary {
    padding: 1rem 0;
    font-size: var(--fs-h3);
    cursor: pointer;
    list-style: none;
  }

  .mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav summary::after {
    content: "+";
    float: right;
    color: var(--fp-ink-3);
  }

  .mobile-nav details[open] summary::after {
    content: "−";
  }

  .mobile-nav .mobile-panel a,
  .mobile-nav > a {
    display: block;
    padding: 0.6rem 0;
    text-decoration: none;
    color: var(--fp-ink-2);
  }

  .mobile-nav > a {
    border-bottom: 1px solid var(--fp-line);
    color: var(--fp-ink);
    font-size: var(--fs-h3);
    padding: 1rem 0;
  }

  .mobile-actions {
    display: grid;
    gap: 0.75rem;
    margin-top: var(--step-1);
  }
}

.page-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 16rem;
  padding-block: var(--step-2) var(--section-pad);
}

.page-hero h1 {
  font-size: var(--fs-h1);
  max-width: 16ch;
}

.page-hero .lead {
  margin-top: 1.25rem;
}

.page-hero--split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: center;
}

.page-hero--split .page-hero-text {
  grid-column: span 6;
}

.page-hero--split .page-hero-media {
  grid-column: 7 / span 6;
  margin: 0;
}

.page-hero-media {
  margin: var(--step-2) 0 0;
  border-radius: var(--r-3);
  overflow: hidden;
}

.page-hero-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 900px) {
  .page-hero--split {
    display: flex;
    flex-direction: column;
    
    align-items: stretch;
  }

  .page-hero--split .page-hero-media {
    margin-top: var(--step-1);
    width: 100%;
  }
}

@media (max-width: 640px) {
  .page-hero-media img {
    aspect-ratio: 4 / 3;
  }
}

.cards {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--step-1) var(--grid-gap);
}

.cards > * {
  grid-column: span 3;
}

@media (min-width: 861px) {
  .cards[data-count="1"] > * {
    grid-column: 1 / -1;
  }

  .cards[data-count="2"] > *,
  .cards[data-count="4"] > *,
  .cards[data-count="5"] > *:nth-child(-n + 2),
  .cards[data-count="6"] > *:nth-child(-n + 2),
  .cards[data-count="14"] > *:nth-child(-n + 2) {
    grid-column: span 6;
  }

  .cards[data-count="3"] > *,
  .cards[data-count="5"] > *:nth-child(n + 3) {
    grid-column: span 4;
  }

  
  .cards > *:last-child:nth-child(4n + 3) {
    grid-column: span 6;
  }
}

@media (min-width: 861px) {
  .cards[data-count="1"] > * .card-media img,
  .cards[data-count="2"] > * .card-media img,
  .cards[data-count="4"] > * .card-media img,
  .cards[data-count="5"] > *:nth-child(-n + 2) .card-media img,
  .cards[data-count="6"] > *:nth-child(-n + 2) .card-media img,
  .cards[data-count="14"] > *:nth-child(-n + 2) .card-media img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 1100px) {
  .cards > *,
  .cards[data-count="3"] > *,
  .cards[data-count="9"] > *,
  .cards[data-count="7"] > *:nth-child(n + 4),
  .cards[data-count="11"] > *:nth-child(n + 4) {
    grid-column: span 6;
  }
}

@media (max-width: 560px) {
  .cards > *,
  .cards[data-count="3"] > *,
  .cards[data-count="9"] > *,
  .cards[data-count="7"] > *:nth-child(n + 4),
  .cards[data-count="11"] > *:nth-child(n + 4) {
    grid-column: 1 / -1;
  }

  .cards {
    gap: 1.25rem;
  }
}

@media (max-width: 640px) {
  .card {
    gap: 0.5rem;
  }

  .card-title {
    font-size: 1rem;
    line-height: 1.22;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .card-role {
    font-size: 0.875rem;
    line-height: 1.4;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  
  .status-chip {
    font-size: 0.6875rem;
    padding: 0.15rem 0.45rem;
    letter-spacing: 0.03em;
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.card:hover {
  color: inherit;
}

.card-media {
  position: relative;
  margin: 0;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--fp-bg-sink);
}

.card-media img {
  width: 100%;
  
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}

.card:hover .card-media img {
  transform: scale(1.03);
}

.card-title {
  font-family: var(--fp-font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
}

.card-role {
  font-size: var(--fs-small);
  color: var(--fp-ink-2);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--fp-line-2);
  border-radius: 999px;
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fp-ink-2);
}

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: center;
}

.split-text {
  
  grid-column: span 6;
}

.split-text > * + * {
  margin-top: 1rem;
}

.split-text h2 + .lead {
  margin-top: 1.15rem;
}

.split-media {
  grid-column: span 6;
  margin: 0;
  border-radius: var(--r-3);
  overflow: hidden;
}

.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.split--reverse .split-text {
  order: 2;
}

.media-video {
  position: relative;
  margin: 0;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--fp-bg-deep);
  aspect-ratio: 16 / 9;
}

.media-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 101%;
  height: 101%;
  object-fit: cover;
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--grid-gap);
  counter-reset: step;
}

.steps[data-count="5"] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .steps[data-count="5"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .steps[data-count="5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .steps,
  .steps[data-count="5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 0.75rem;
  }
}

.step {
  padding-top: 0.25rem;
  counter-increment: step;
}

.step .card-media img {
  aspect-ratio: 4 / 3;
}

.step::before {
  content: counter(step);
  display: block;
  font-family: var(--fp-font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--fp-accent);
  margin-bottom: 0.75rem;
}

.step h3 {
  margin-bottom: 0.4rem;
}

.step p {
  font-size: var(--fs-small);
  color: var(--fp-ink-2);
}

.faq {
  border-top: 1px solid var(--fp-line);
}

.faq details {
  border-bottom: 1px solid var(--fp-line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  font-family: var(--fp-font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "+";
  color: var(--fp-ink-3);
  font-weight: 400;
}

.faq details[open] summary::after {
  content: "−";
}

.faq .faq-body {
  padding-bottom: 1.5rem;
  color: var(--fp-ink-2);
  max-width: 68ch;
}

.breadcrumbs {
  padding-block: 1.25rem 0;
  font-size: var(--fs-small);
  color: var(--fp-ink-2);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--fp-ink-3);
}

.breadcrumbs a {
  text-decoration: underline;
  text-decoration-color: var(--fp-line-2);
  text-underline-offset: 0.22em;
  color: var(--fp-ink-2);
}

.breadcrumbs a:hover {
  color: var(--fp-accent);
  text-decoration-color: currentColor;
}

.breadcrumbs li[aria-current="page"],
.breadcrumbs li:last-child {
  color: var(--fp-ink);
}

.hero-cover .breadcrumbs li[aria-current="page"],
.hero-cover .breadcrumbs li:last-child {
  color: var(--fp-white);
}

.related-band {
  padding: 0;
}

.related-band h2 {
  color: var(--fp-ink-on-deep);
  font-size: var(--fs-h2);
  max-width: 24ch;
  margin: 0 0 clamp(1.5rem, 2.6vw, 2.25rem);
}

.related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.1rem);
}

.related li {
  grid-column: span 3;
}

.related li:nth-child(1),
.related li:nth-child(2) {
  grid-column: span 6;
}

.related li:only-child {
  grid-column: 1 / -1;
}

.related li:last-child:nth-child(4n + 3) {
  grid-column: span 12;
}

.related li:nth-child(4n + 3):nth-last-child(2),
.related li:nth-child(4n):last-child {
  grid-column: span 6;
}

.related li:nth-child(4n + 3):nth-last-child(3),
.related li:nth-child(4n):nth-last-child(2),
.related li:nth-child(4n + 1):not(:nth-child(-n + 2)):last-child {
  grid-column: span 4;
}

.related li {
  display: flex;
}

.related a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0.35rem;
  width: 100%;
  padding: 1.15rem 2.1rem 1.25rem 1.25rem;
  border: 1px solid var(--fp-line-on-deep);
  border-radius: var(--r-3);
  background: rgb(255 255 255 / 4%);
  color: var(--fp-ink-on-deep);
  text-decoration: none;
  transition:
    background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease);
}

.related a::after {
  content: "";
  position: absolute;
  top: 1.25rem;
  right: 1.1rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--fp-marker);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

.related a:hover,
.related a:focus-visible {
  background: rgb(255 255 255 / 9%);
  border-color: rgb(255 255 255 / 26%);
}

.related a:hover::after,
.related a:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.related-name {
  font-family: var(--fp-font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  hyphens: auto;
  overflow-wrap: break-word;
}

.related-note {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--fp-ink-on-deep-2);
}

@media (max-width: 1100px) {
  .related li,
  .related li:nth-child(1),
  .related li:nth-child(2),
  .related li:last-child:nth-child(4n + 3),
  .related li:nth-child(4n + 3):nth-last-child(2),
  .related li:nth-child(4n):last-child,
  .related li:nth-child(4n + 3):nth-last-child(3),
  .related li:nth-child(4n):nth-last-child(2),
  .related li:nth-child(4n + 1):not(:nth-child(-n + 2)):last-child {
    grid-column: span 6;
  }
}

@media (max-width: 680px) {
  .related {
    gap: 0.5rem;
  }

  
  .related li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .related-band {
    padding: 1.25rem 1rem 1.5rem;
  }

  
  .related a {
    padding: 0.8rem 1.55rem 0.9rem 0.8rem;
    gap: 0.25rem;
  }

  .related a::after {
    top: 0.8rem;
    right: 0.7rem;
  }

  
  .related-name {
    font-size: 0.9375rem;
    line-height: 1.24;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .related-note {
    font-size: 0.8125rem;
    line-height: 1.36;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

@media (max-width: 560px) {
  .related li,
  .related li:nth-child(1),
  .related li:nth-child(2) {
    grid-column: 1 / -1;
  }

  .related {
    gap: 0.4rem;
  }
}

.form-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.form-intro {
  grid-column: span 5;
}

.form-intro > * + * {
  margin-top: 1rem;
}

.form-card {
  grid-column: span 7;
  display: grid;
  gap: 1.1rem;
}

.form-card .btn {
  justify-self: start;
  min-width: 14rem;
}

.section-accent .form-card .field label {
  color: rgb(255 255 255 / 88%);
}

.section-accent .form-card .field input {
  background: var(--fp-white);
  border-color: var(--fp-white);
  color: var(--fp-ink);
  border-radius: var(--r-2);
}

.section-accent .form-card .field input::placeholder {
  color: var(--fp-ink-3);
}

.section-accent .form-card .field input:focus {
  background: var(--fp-white);
  border-color: var(--fp-ink);
}

.section-accent .form-card .consent-row,
.section-accent .form-card .form-status {
  color: rgb(255 255 255 / 88%);
}

.section-accent .form-card .consent-row a,
.section-accent .form-card .form-status a {
  color: var(--fp-white);
}

.section-accent .form-card .consent-row input {
  accent-color: var(--fp-white);
}

.section-accent .form-card .btn[disabled] {
  --btn-bg: rgb(255 255 255 / 42%);
  --btn-fg: #12291a;
  --btn-line: transparent;
}

.section-accent .form-card .form-status[data-tone="ok"] {
  color: var(--fp-white);
}

.section-accent .form-card .form-status[data-tone="error"],
.section-accent .form-card .field-error {
  color: #ffd9d4;
}

.section-accent .form-card .field[data-invalid="true"] input {
  border-color: #ffd9d4;
  box-shadow: 0 0 0 2px #ffd9d4;
}

.form-done {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--r-2);
}

.form-card:not([data-state="success"]) .form-done {
  display: contents;
}

.form-done-mark {
  display: none;
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
}

.form-done-path {
  fill: none;
  stroke: var(--fp-accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-card[data-state="success"] .form-done {
  padding: 0.85rem 1.1rem;
  background: var(--fp-accent-soft);
  border-radius: var(--r-2);
  animation: fp-done-in var(--dur-2) var(--ease) both;
}

.section-accent .form-card[data-state="success"] .form-done {
  background: var(--fp-white);
}

.form-card[data-state="success"] .form-done-mark {
  display: block;
}

.form-card[data-state="success"] .form-done-path {
  
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: fp-done-draw 420ms var(--ease) 140ms forwards;
}

.form-card[data-state="success"] .form-status {
  color: var(--fp-ink);
}

@keyframes fp-done-in {
  from {
    opacity: 0;
  }
}

@keyframes fp-done-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-card[data-state="success"] .form-done,
  .form-card[data-state="success"] .form-done-path {
    animation: none;
  }

  .form-card[data-state="success"] .form-done-path {
    stroke-dashoffset: 0;
  }
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-size: var(--fs-small);
  color: var(--fp-ink-2);
}

.field input {
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--fp-line-2);
  border-radius: var(--r-1);
  background: var(--fp-bg);
  font: inherit;
  color: var(--fp-ink);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.field input:focus {
  background: var(--fp-white);
  border-color: var(--fp-accent);
}

.field[data-invalid="true"] input {
  border-color: var(--fp-alert);
}

.field-error {
  min-height: 1.1rem;
  font-size: var(--fs-micro);
  color: var(--fp-alert);
}

.consent-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: var(--fs-small);
  color: var(--fp-ink-2);
}

.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent-row input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--fp-accent);
}

.form-status {
  font-size: var(--fs-small);
  color: var(--fp-ink-2);
}

.form-status {
  min-height: 1.35rem;
}

.form-status:not([data-tone]) {
  visibility: hidden;
}

.form-status[data-tone="error"] {
  color: var(--fp-alert);
}

.form-status[data-tone="ok"] {
  color: var(--fp-accent);
}

.pending-note {
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--fp-line-2);
  border-radius: var(--r-2);
  background: var(--fp-bg-sink);
  font-size: var(--fs-small);
  color: var(--fp-ink-2);
}

.site-footer {
  background: var(--fp-bg-deep);
  color: var(--fp-ink-on-deep);
  padding-block: var(--step-2) var(--step-1);
  margin-top: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--grid-gap);
}

.footer-grid h2 {
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fp-ink-on-deep-2);
  margin-bottom: 0.9rem;
}

.footer-grid nav {
  display: grid;
  justify-items: start;
  align-content: start;
}

.footer-grid a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  
  padding: 0.35rem 0.75rem 0.35rem 0;
  font-size: var(--fs-small);
  line-height: 1.3;
  text-decoration: none;
  color: var(--fp-ink-on-deep-2);
  transition: color var(--dur-1) var(--ease);
}

.footer-grid a:hover {
  color: var(--fp-white);
}

.footer-grid a::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  right: 0;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--fp-marker);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

@media (hover: hover) {
  .footer-grid a:hover::after {
    opacity: 1;
    transform: scale(1);
  }
}

.footer-grid a:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.footer-brand p {
  font-size: var(--fs-small);
  color: var(--fp-ink-on-deep-2);
  max-width: 40ch;
}

.legal-line {
  margin-top: var(--step-2);
  padding-top: 1.25rem;
  border-top: 1px solid var(--fp-line-on-deep);
  font-size: var(--fs-micro);
  color: rgb(182 178 171 / 82%);
}

@media (max-width: 1100px) {
  .split-text,
  .split-media,
  .form-intro,
  .form-card {
    grid-column: 1 / -1;
  }

  .split--reverse .split-text {
    order: 0;
  }

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

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0.75rem;
  }

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

@media (max-width: 640px) {
  .split-text > * + * {
    margin-top: 0.8rem;
  }

  .faq summary {
    padding: 0.9rem 0;
  }

  .faq .faq-body {
    padding-bottom: 1rem;
  }

  .step {
    padding-top: 0.9rem;
  }

  .form-card {
    gap: 0.85rem;
    padding: 1.25rem;
  }

  .legal-line {
    padding-top: 0.9rem;
  }

  .page-hero .lead {
    margin-top: 0.9rem;
  }
}

.is-zoomable {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-skip);
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 4.5rem);
  background: rgb(21 22 26 / 94%);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-stage {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.lightbox-stage img {
  max-width: 100%;
  
  max-height: calc(100vh - clamp(4rem, 10vw, 9rem));
  width: auto;
  border-radius: var(--r-3);
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform var(--dur-2) var(--ease);
}

.lightbox[data-zoom="in"] .lightbox-stage img {
  cursor: grab;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--fp-line-on-deep);
  border-radius: var(--r-2);
  background: rgb(244 243 238 / 10%);
  color: var(--fp-ink-on-deep);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

@media (hover: hover) {
  .lightbox-close:hover,
  .lightbox-nav:hover {
    background: var(--fp-accent);
    border-color: var(--fp-accent);
  }
}

.lightbox-close {
  top: clamp(1rem, 2.5vw, 2rem);
  right: clamp(1rem, 2.5vw, 2rem);
}

.lightbox-close::before,
.lightbox-close::after {
  content: "";
  position: absolute;
  width: 1.1rem;
  height: 2px;
  background: currentcolor;
}

.lightbox-close::before {
  transform: rotate(45deg);
}

.lightbox-close::after {
  transform: rotate(-45deg);
}

.lightbox-nav {
  top: 50%;
  margin-top: -1.5rem;
}

.lightbox-prev {
  left: clamp(0.75rem, 2vw, 1.75rem);
}

.lightbox-next {
  right: clamp(0.75rem, 2vw, 1.75rem);
}

.lightbox-nav::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-left: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
}

.lightbox-prev::before {
  transform: rotate(45deg) translate(2px, -2px);
}

.lightbox-next::before {
  transform: rotate(-135deg) translate(2px, -2px);
}

html[data-lightbox-open="true"] body {
  overflow: hidden;
}

.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-header);
  background: var(--fp-bg-deep);
  color: var(--fp-ink-on-deep);
  border-top: 1px solid var(--fp-line-on-deep);
}

.cookie-bar[hidden] {
  display: none;
}

.cookie-bar-inner {
  width: min(100%, var(--wrap));
  margin-inline: auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.cookie-bar-text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fp-ink-on-deep-2);
}

.cookie-bar-text a {
  color: var(--fp-accent-on-deep);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.cookie-bar-text a:hover {
  color: var(--fp-white);
}

.cookie-bar-actions {
  display: flex;
  gap: 0.6rem;
  flex: none;
  margin-left: auto;
}

.btn-compact {
  padding: 0.55rem 1.1rem;
  min-height: 2.5rem;
  font-size: var(--fs-small);
}

.btn-quiet {
  --btn-bg: transparent;
  --btn-fg: var(--fp-ink-on-deep);
  --btn-line: var(--fp-line-on-deep);
}

.btn-quiet::after {
  display: none;
}

.btn-quiet:hover {
  --btn-bg: rgb(255 255 255 / 10%);
  --btn-line: var(--fp-ink-on-deep-2);
  color: var(--fp-white);
}

.btn-quiet:active {
  box-shadow: inset 0 3px 10px rgb(0 0 0 / 45%);
}

@media (max-width: 640px) {
  .cookie-bar-inner {
    display: block;
    padding: 0.7rem var(--gutter) 0.75rem;
  }

  .cookie-bar-text {
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .cookie-bar-actions {
    margin-top: 0.6rem;
    margin-left: 0;
  }

  
  .cookie-bar-actions .btn {
    flex: 1;
    padding-inline: 0.6rem;
  }
}

html[data-menu-open="true"] .cookie-bar {
  display: none;
}


/* 04-reference.css */


.hero-cover {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100svh;
  margin-top: -4.75rem;
  padding-top: 4.75rem;
  color: var(--fp-white);
  overflow: hidden;
}

.hero-cover-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-cover-media picture,
.hero-cover-media img,
.hero-cover-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      to right,
      rgb(8 10 12 / 86%) 0%,
      rgb(8 10 12 / 72%) 38%,
      rgb(8 10 12 / 24%) 68%,
      rgb(8 10 12 / 32%) 100%
    ),
    linear-gradient(to bottom, rgb(8 10 12 / 58%) 0%, rgb(8 10 12 / 22%) 22%, rgb(8 10 12 / 10%) 34%, rgb(8 10 12 / 28%) 100%);
}

.hero-cover-inner {
  width: min(100%, var(--wrap));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(3rem, 7vh, 6rem);
}

.hero-cover h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 700;
  max-width: min(18ch, 92%);
  color: var(--fp-white);
}

.hero-cover[data-level="page"] {
  min-height: min(76vh, 700px);
  height: auto;
}

.hero-cover[data-level="page"] h1 {
  font-size: var(--fs-h1);
  max-width: 16ch;
}

.hero-cover .hero-sub {
  margin-top: 1.15rem;
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1.15vw, 1.25rem);
  line-height: 1.5;
  color: rgb(255 255 255 / 88%);
}

.hero-cover .breadcrumbs {
  padding: 0 0 1.1rem;
  font-size: var(--fs-small);
  color: rgb(255 255 255 / 82%);
}

.hero-cover .breadcrumbs a {
  color: rgb(255 255 255 / 82%);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 34%);
  text-underline-offset: 0.24em;
}

.hero-cover .breadcrumbs a:hover {
  color: var(--fp-white);
}

.hero-cover .breadcrumbs li + li::before {
  color: rgb(255 255 255 / 42%);
}

.hero-cover-actions {
  display: grid;
  grid-template-columns: max-content;
  justify-content: start;
  gap: 1rem;
  margin-top: clamp(1.35rem, 2.6vw, 2rem);
}

.hero-cover-actions .btn {
  width: 100%;
}

.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}

.story-main {
  display: flex;
}

.story-main > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.story-main img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.story figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-3);
  background: var(--fp-bg-sink);
}

.story-main img {
  aspect-ratio: 4 / 3;
}

.story-text {
  padding-top: clamp(1rem, 3vw, 2.5rem);
  padding-left: clamp(0rem, 1.5vw, 1.5rem);
}

.story-text h2 {
  font-weight: 500;
  max-width: 20ch;
}

.story-text p {
  margin-top: 1.25rem;
  max-width: 42ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fp-ink-2);
}

.story-text .btn {
  margin-top: 1.75rem;
}

.directions {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.75rem);
}

.direction {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  grid-column: span 3;
  text-decoration: none;
  color: inherit;
}

.direction:nth-child(1),
.direction:nth-child(2) {
  grid-column: span 6;
}

.direction figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-3);
  background: var(--fp-bg-sink);
}

.direction img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}

.direction:nth-child(1) img,
.direction:nth-child(2) img {
  aspect-ratio: 16 / 10;
}

.direction:hover img {
  transform: scale(1.03);
}

.direction-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.direction-title {
  font-family: var(--fp-font-display);
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: var(--lh-heading);
}

.direction:nth-child(1) .direction-title,
.direction:nth-child(2) .direction-title {
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
}

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

.audience-card .card-media img {
  aspect-ratio: 1 / 1;
}

.audience-text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--fp-ink-2);
}

.audience-text strong {
  font-family: var(--fp-font-display);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--fp-ink);
}

@media (max-width: 1100px) {
  .audience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .audience {
    grid-template-columns: 1fr;
    gap: var(--step-1);
  }

  .audience-card {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
  }
}

.workshop {
  display: grid;
  grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: center;
}

.workshop-text h2 {
  font-weight: 500;
  max-width: 22ch;
}

.workshop-text p {
  margin-top: 1.25rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fp-ink-2);
}

.workshop-text .btn {
  margin-top: 2rem;
}

.workshop-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-3);
  background: var(--fp-bg-sink);
}

.workshop-media img,
.workshop-media video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.text-split {
  display: grid;
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: start;
}

.text-split-head h2 {
  max-width: 16ch;
}

.text-split-body > *:first-child {
  margin-top: 0;
}

.text-split-body p,
.text-split-body li {
  max-width: 62ch;
}

.slider-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}

.slider-head h2 {
  max-width: 22ch;
}

.slider-nav {
  display: flex;
  gap: 0.6rem;
  flex: none;
}

.slider-btn {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--fp-line-2);
  border-radius: var(--r-2);
  background: var(--fp-bg-card);
  color: var(--fp-ink);
  cursor: pointer;
  
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}

.slider-btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

@media (hover: hover) {
  .slider-btn:hover:not([disabled]) {
    background: var(--fp-accent);
    border-color: var(--fp-accent);
    color: var(--fp-white);
  }
}

.slider-btn[disabled] {
  opacity: 0.32;
  cursor: default;
}

.slider .swiper {
  overflow: hidden;
  
  margin-block: -0.5rem;
  padding-block: 0.5rem;
}

.slider .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.slider .swiper-slide {
  display: flex;
  height: auto;
}

.slider .swiper:not(.swiper-initialized) .swiper-wrapper {
  gap: 1.25rem;
}

.slider .swiper:not(.swiper-initialized) .swiper-slide {
  flex: 0 0 calc((100% - 2.5rem) / 3);
}

@media (max-width: 640px) {
  .slider .swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 100%;
  }
}

.slide {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.slide figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-3);
  background: var(--fp-bg-sink);
}

.slide img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease);
}

.slide:hover img {
  transform: scale(1.03);
}

.slider-btn.swiper-button-disabled {
  opacity: 0.32;
  cursor: default;
}

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

@media (max-width: 640px) {
  .slider-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

@media (max-width: 1100px) {
  
  .story-text {
    padding-left: 0;
  }

  .direction,
  .direction:nth-child(1),
  .direction:nth-child(2) {
    grid-column: span 6;
  }

  .workshop {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .story {
    grid-template-columns: 1fr;
  }

  
  .directions {
    gap: 1rem 0.75rem;
  }

  .direction img,
  .direction:nth-child(1) img,
  .direction:nth-child(2) img {
    aspect-ratio: 3 / 4;
  }

  .direction {
    gap: 0.55rem;
  }

  .direction-title,
  .direction:nth-child(1) .direction-title,
  .direction:nth-child(2) .direction-title {
    font-size: 0.9375rem;
    line-height: 1.15;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  
  .hero-cover[data-level="page"] {
    height: auto;
    min-height: min(78vh, 620px);
  }

  
  .hero-cover-inner {
    padding-block: clamp(1.75rem, 5vh, 6rem);
  }

  .hero-cover h1 {
    max-width: 16ch;
  }

  
  .hero-cover .hero-sub {
    margin-top: 0.75rem;
  }

  .hero-cover-actions {
    gap: 0.6rem;
    margin-top: 1rem;
  }

  .story-text p,
  .workshop-text p {
    margin-top: 0.9rem;
  }

  .story-text .btn {
    margin-top: 1.15rem;
  }

  .workshop-text .btn {
    margin-top: 1.25rem;
  }

  .slider-head {
    margin-bottom: 0.9rem;
  }
}

@media (max-height: 720px) {
  .hero-cover-inner {
    padding-block: clamp(1.5rem, 4vh, 6rem);
  }
}