@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-BoldItalic.ttf') format("truetype"), url('../fonts/GeistMono-ExtraBoldItalic.ttf') format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-Italic.ttf') format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-BlackItalic.ttf') format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-Black.ttf') format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-Bold.ttf') format("truetype"), url('../fonts/GeistMono-ExtraBold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-ExtraLight.ttf') format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-LightItalic.ttf') format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-Light.ttf') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-SemiBoldItalic.ttf') format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-ThinItalic.ttf') format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-SemiBold.ttf') format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-Thin.ttf') format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-MediumItalic.ttf') format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Geistmono;
  src: url('../fonts/GeistMono-ExtraLightItalic.ttf') format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-Thin.otf') format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-Extralight.otf') format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-BoldItalic.otf') format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-Regular.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-LightItalic.otf') format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial Book;
  src: url('../fonts/MesoTRIAL-Book.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-BlackItalic.otf') format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-Light.otf') format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-Medium.otf') format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-ExtralightItalic.otf') format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-BookItalic.otf') format("opentype"), url('../fonts/MesoTRIAL-RegularItalic.otf') format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-Bold.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-Black.otf') format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-MediumItalic.otf') format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mesotrial;
  src: url('../fonts/MesoTRIAL-ThinItalic.otf') format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Laygrotesk;
  src: url('../fonts/LayGrotesk-Black.otf') format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Laygrotesk;
  src: url('../fonts/LayGrotesk-Bold.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Laygrotesk;
  src: url('../fonts/LayGrotesk-Semibold.otf') format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Laygrotesk;
  src: url('../fonts/LayGrotesk-Regular.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Laygrotesk;
  src: url('../fonts/LayGrotesk-Medium.otf') format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --_site-variables---primary-family: Laygrotesk, Georgia, sans-serif;
  --site--margin-clamp\<deleted\|variable-ececf7df-7e76-f4c1-78ff-9947ba0b30ab\>: clamp(1.11vw, var(--site--margin-calc\<deleted\|variable-079909d7-9f30-905f-0abc-cd968a12a94b\>), 100vw);
  --site--margin-2\<deleted\|variable-06c56dcb-6f8d-2408-2a44-a0d75478a54c\>: 80px;
  --_site-variables---design-gap: 16px;
  --_site-variables---design-gap-tablet: 8px;
  --_site-variables---design-gap-mobile: 8px;
  --_site-variables---container-max: 1840px;
  --_site-variables---margin: 40px;
  --_site-variables---margin-tablet: 20px;
  --_site-variables---margin-mobile: 20px;
  --_mobile-text---normal\<deleted\|variable-111c9139-cf64-304f-8a6a-532305ef941c\>: 16px;
  --_desktop-text---normal1\<deleted\|variable-f6cf99c3-8fd7-8ce6-20dc-fb258a1cdadd\>: 16px;
  --_mobile-text---small\<deleted\|variable-a206a2dc-ba14-db48-ac5b-2ce26260d965\>: 16px;
  --_desktop-text---small1\<deleted\|variable-158def58-9ddf-ae04-e3fa-8027b6aaf98d\>: calc(16 / var(--_site-variables---design-width) * 100vw);
  --text--normal\<deleted\|variable-40bf5af2-ab12-9dec-eec5-3eea506b7fb7\>: 1vw;
  --_headings---size\<deleted\|variable-f524dc3e-8761-f457-d2ff-338fce20e165\>: 1rem;
  --_headings---line-height\<deleted\|variable-8495ed87-1838-24f5-f771-c6de00d78090\>: var(--_line-height---normal\<deleted\|variable-c9aadd2c-63fe-5c48-b565-1e7fe9eb9df4\>);
  --_headings---letter-spacing\<deleted\|variable-c6f0387f-41e1-3c3b-7c18-694ba75993eb\>: var(--_letter-spacing---normal\<deleted\|variable-09aa6f3d-0d8b-585a-71f5-a9cd6ca76fea\>);
  --_site-variables---columns: 12;
  --_site-variables---columns-tablet: 8;
  --_site-variables---columns-mobile: 6;
  --_radios---btn-y-padding: 0px;
  --_radios---btn-x-padding: 0px;
  --_radios---border: white;
  --_radios---btn-radius: 0px;
  --_radios---bg: #fff;
  --_radios---text: white;
  --_mobile-text---h1: 46;
  --_desktop-text---h1: 160;
  --_site-variables---design-width: 1920;
  --_colors---1: #d37dc8;
  --_colors---2: darkgrey;
  --_colors---3: white;
  --_colors---4: black;
  --_colors---8: #32f08c;
  --_site-variables---desktop-radius: .25rem;
  --_form---field-border-width: 2px;
  --_form---field-border-color: #2a00ff;
  --_form---field-border-radius: .5rem;
  --_form---focus-border: #dee434;
  --_form---focus-border-width: 0px;
  --_site-variables---margin-clamp: 40px;
  --_site-variables---margin-value: 40;
  --_site-variables---margin-tablet-value: 20;
  --_site-variables---margin-mobile-value: 20;
  --_site-variables---design-gap-value: 16;
  --_site-variables---design-gap-tablet-value: 8;
  --_site-variables---design-gap-mobile-value: 8;
  --_site-variables---column-width: calc((100% - (var(--_site-variables---design-gap) * (var(--_site-variables---columns)  - 1))) / var(--_site-variables---columns));
  --_site-variables---secondary-family: Mesotrial, Verdana, sans-serif;
  --_site-variables---tertiary-family: Geistmono, Arial, sans-serif;
  --_site-variables---selection-bg: var(--_colors---1);
  --_site-variables---selection-text: var(--_colors---3);
  --_site-variables---grid-width: calc(100vw - (var(--_site-variables---margin-calc\<deleted\|variable-3c20873c-b49c-fadb-ff47-2611d6b1ded5\>) * 2));
  --_colors---5: #f7f7f7;
  --_mobile-text---h2: 48;
  --_colors---6: #111;
  --_mobile-text---h3: 40;
  --_colors---7: #737776;
  --_mobile-text---h4: 32;
  --_mobile-text---h5: 28;
  --_mobile-text---h6: 28;
  --_mobile-text---h7: 22;
  --_site-variables---margin-calc: calc(var(--_site-variables---margin-value) / var(--_site-variables---design-width) * 100vw);
  --_mobile-text---h8: 20;
  --_mobile-text---h9: 22;
  --_mobile-text---h10: 18;
  --_mobile-text---xlarge: 16;
  --_mobile-text---large: 18;
  --_mobile-text---normal: 16;
  --_site-variables---mobile-radius: .75rem;
  --_mobile-text---small: 12;
  --_mobile-text---xsmall: 12;
  --_mobile-text---eyebrow: 14;
  --_mobile-text---button: 16;
  --_desktop-text---h2: 120;
  --_desktop-text---h3: 96;
  --_desktop-text---h4: 72;
  --_desktop-text---h5: 40;
  --_desktop-text---h6: 56;
  --_desktop-text---h7: 30;
  --_desktop-text---h8: 25;
  --_desktop-text---h9: 32;
  --_desktop-text---h10: 24;
  --_desktop-text---xlarge: 20;
  --_desktop-text---large: 18;
  --_desktop-text---normal: 16;
  --_desktop-text---small: 14;
  --_desktop-text---xsmall: 12;
  --_desktop-text---eyebrow: 14;
  --_desktop-text---button: 16;
  --site--margin-calc\<deleted\|variable-079909d7-9f30-905f-0abc-cd968a12a94b\>: calc(var(--site--margin\<deleted\|variable-fe9c9eb0-4c9d-648e-6f26-7c7941b95b5e\>) / 1440 * 100vw);
  --text--h1\<deleted\|variable-c0b499c6-4f19-9cd1-9334-bdaf748d8a55\>: 12vw;
  --text--h2\<deleted\|variable-74a869e5-a3ee-acba-b789-2688a16fa686\>: 10vw;
  --text--h3\<deleted\|variable-211224de-90b3-0f0c-b160-bc0e783fd0bd\>: 8vw;
  --text--h4\<deleted\|variable-68be3d39-4097-a75e-09d4-8f6aec933214\>: 6vw;
  --text--h5\<deleted\|variable-d0be7f7d-cea3-4b7f-4757-50c566182bba\>: 4vw;
  --text--h6\<deleted\|variable-37cad83d-2206-f769-bfc3-b56dc16c2930\>: 3vw;
  --text--h7\<deleted\|variable-1a8811e2-c23a-49b3-58eb-d0e5db6454c9\>: 2vw;
  --_line-height---normal\<deleted\|variable-c9aadd2c-63fe-5c48-b565-1e7fe9eb9df4\>: 1;
  --_letter-spacing---normal\<deleted\|variable-09aa6f3d-0d8b-585a-71f5-a9cd6ca76fea\>: 0em;
  --_colors---off-white\<deleted\|variable-26c7a79c-12c4-eb97-61ad-f1c6fbe3eb76\>: #f4f3ef;
  --_site-variables---margin-calc\<deleted\|variable-3c20873c-b49c-fadb-ff47-2611d6b1ded5\>: 0px;
  --site--margin\<deleted\|variable-fe9c9eb0-4c9d-648e-6f26-7c7941b95b5e\>: 50;
}

body {
  font-family: var(--_site-variables---primary-family);
  color: #000;
  font-size: 16px;
  line-height: 1;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
}

a {
  color: #000;
  -webkit-text-decoration: none;
  text-decoration: none;
}

a:lang(en) {
  color: #fff;
}

label {
  font-weight: 700;
  display: block;
}

.layout {
  border: 1px solid #4f6ef7;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  position: relative;
}

.guide-wrap {
  z-index: 2000;
  pointer-events: none;
  display: block;
  position: fixed;
  inset: 0% 0% auto;
  overflow: hidden;
}

.guide-contain {
  margin-left: auto;
  margin-right: auto;
}

.guide-contain.container {
  width: calc(100% - var(--site--margin-clamp\<deleted\|variable-ececf7df-7e76-f4c1-78ff-9947ba0b30ab\>) * 2);
}

.guide-layout.u-grid-custom {
  z-index: 999;
  grid-column-gap: var(--_site-variables---design-gap);
  grid-row-gap: var(--_site-variables---design-gap);
  grid-template-rows: auto;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: var(--grid-main);
  display: grid;
  position: relative;
}

.guide-column {
  z-index: 9999;
  color: #8a8a8a;
  background-color: #9292920f;
  justify-content: center;
  align-items: flex-end;
  height: 100vh;
  padding-top: .6rem;
  padding-bottom: .6rem;
  display: flex;
  position: relative;
}

.container {
  z-index: 1;
  max-width: var(--_site-variables---container-max);
  width: calc(100% - var(--_site-variables---margin) * 2);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  container-type: inline-size;
}

.heading.radio-text {
  z-index: 6;
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(var(--_mobile-text---normal\<deleted\|variable-111c9139-cf64-304f-8a6a-532305ef941c\>), var(--_desktop-text---normal1\<deleted\|variable-f6cf99c3-8fd7-8ce6-20dc-fb258a1cdadd\>), var(--_desktop-text---normal1\<deleted\|variable-f6cf99c3-8fd7-8ce6-20dc-fb258a1cdadd\>));
}

.heading.eyebrow-3 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(var(--_mobile-text---normal\<deleted\|variable-111c9139-cf64-304f-8a6a-532305ef941c\>), var(--_desktop-text---normal1\<deleted\|variable-f6cf99c3-8fd7-8ce6-20dc-fb258a1cdadd\>), var(--_desktop-text---normal1\<deleted\|variable-f6cf99c3-8fd7-8ce6-20dc-fb258a1cdadd\>));
}

.heading.text-small {
  font-size: clamp(var(--_mobile-text---small\<deleted\|variable-a206a2dc-ba14-db48-ac5b-2ce26260d965\>), var(--_desktop-text---small1\<deleted\|variable-158def58-9ddf-ae04-e3fa-8027b6aaf98d\>), var(--_desktop-text---small1\<deleted\|variable-158def58-9ddf-ae04-e3fa-8027b6aaf98d\>));
}

.rich-text {
  color: #363534;
  font-size: clamp(1rem, var(--text--normal\<deleted\|variable-40bf5af2-ab12-9dec-eec5-3eea506b7fb7\>), 100vw);
}

.rich-text h1 {
  font-size: var(--_headings---size\<deleted\|variable-f524dc3e-8761-f457-d2ff-338fce20e165\>);
  line-height: var(--_headings---line-height\<deleted\|variable-8495ed87-1838-24f5-f771-c6de00d78090\>);
  letter-spacing: var(--_headings---letter-spacing\<deleted\|variable-c6f0387f-41e1-3c3b-7c18-694ba75993eb\>);
  --_headings---size\<deleted\|variable-f524dc3e-8761-f457-d2ff-338fce20e165\>: var(--text--h1\<deleted\|variable-c0b499c6-4f19-9cd1-9334-bdaf748d8a55\>);
  --_headings---line-height\<deleted\|variable-8495ed87-1838-24f5-f771-c6de00d78090\>: var(--_line-height---normal\<deleted\|variable-c9aadd2c-63fe-5c48-b565-1e7fe9eb9df4\>);
  --_headings---letter-spacing\<deleted\|variable-c6f0387f-41e1-3c3b-7c18-694ba75993eb\>: var(--_letter-spacing---normal\<deleted\|variable-09aa6f3d-0d8b-585a-71f5-a9cd6ca76fea\>);
  font-weight: 400;
}

.rich-text h2 {
  font-size: var(--_headings---size\<deleted\|variable-f524dc3e-8761-f457-d2ff-338fce20e165\>);
  line-height: var(--_headings---line-height\<deleted\|variable-8495ed87-1838-24f5-f771-c6de00d78090\>);
  letter-spacing: var(--_headings---letter-spacing\<deleted\|variable-c6f0387f-41e1-3c3b-7c18-694ba75993eb\>);
  --_headings---size\<deleted\|variable-f524dc3e-8761-f457-d2ff-338fce20e165\>: var(--text--h2\<deleted\|variable-74a869e5-a3ee-acba-b789-2688a16fa686\>);
  --_headings---line-height\<deleted\|variable-8495ed87-1838-24f5-f771-c6de00d78090\>: var(--_line-height---normal\<deleted\|variable-c9aadd2c-63fe-5c48-b565-1e7fe9eb9df4\>);
  --_headings---letter-spacing\<deleted\|variable-c6f0387f-41e1-3c3b-7c18-694ba75993eb\>: var(--_letter-spacing---normal\<deleted\|variable-09aa6f3d-0d8b-585a-71f5-a9cd6ca76fea\>);
}

.rich-text h3 {
  font-size: var(--_headings---size\<deleted\|variable-f524dc3e-8761-f457-d2ff-338fce20e165\>);
  line-height: var(--_headings---line-height\<deleted\|variable-8495ed87-1838-24f5-f771-c6de00d78090\>);
  letter-spacing: var(--_headings---letter-spacing\<deleted\|variable-c6f0387f-41e1-3c3b-7c18-694ba75993eb\>);
  --_headings---size\<deleted\|variable-f524dc3e-8761-f457-d2ff-338fce20e165\>: var(--text--h3\<deleted\|variable-211224de-90b3-0f0c-b160-bc0e783fd0bd\>);
  --_headings---line-height\<deleted\|variable-8495ed87-1838-24f5-f771-c6de00d78090\>: var(--_line-height---normal\<deleted\|variable-c9aadd2c-63fe-5c48-b565-1e7fe9eb9df4\>);
  --_headings---letter-spacing\<deleted\|variable-c6f0387f-41e1-3c3b-7c18-694ba75993eb\>: var(--_letter-spacing---normal\<deleted\|variable-09aa6f3d-0d8b-585a-71f5-a9cd6ca76fea\>);
}

.rich-text h4 {
  font-size: var(--_headings---size\<deleted\|variable-f524dc3e-8761-f457-d2ff-338fce20e165\>);
  line-height: var(--_headings---line-height\<deleted\|variable-8495ed87-1838-24f5-f771-c6de00d78090\>);
  letter-spacing: var(--_headings---letter-spacing\<deleted\|variable-c6f0387f-41e1-3c3b-7c18-694ba75993eb\>);
  --_headings---size\<deleted\|variable-f524dc3e-8761-f457-d2ff-338fce20e165\>: var(--text--h4\<deleted\|variable-68be3d39-4097-a75e-09d4-8f6aec933214\>);
  --_headings---line-height\<deleted\|variable-8495ed87-1838-24f5-f771-c6de00d78090\>: var(--_line-height---normal\<deleted\|variable-c9aadd2c-63fe-5c48-b565-1e7fe9eb9df4\>);
  --_headings---letter-spacing\<deleted\|variable-c6f0387f-41e1-3c3b-7c18-694ba75993eb\>: var(--_letter-spacing---normal\<deleted\|variable-09aa6f3d-0d8b-585a-71f5-a9cd6ca76fea\>);
}

.rich-text h5 {
  font-size: var(--_headings---size\<deleted\|variable-f524dc3e-8761-f457-d2ff-338fce20e165\>);
  line-height: var(--_headings---line-height\<deleted\|variable-8495ed87-1838-24f5-f771-c6de00d78090\>);
  letter-spacing: var(--_headings---letter-spacing\<deleted\|variable-c6f0387f-41e1-3c3b-7c18-694ba75993eb\>);
  --_headings---size\<deleted\|variable-f524dc3e-8761-f457-d2ff-338fce20e165\>: var(--text--h5\<deleted\|variable-d0be7f7d-cea3-4b7f-4757-50c566182bba\>);
  --_headings---line-height\<deleted\|variable-8495ed87-1838-24f5-f771-c6de00d78090\>: var(--_line-height---normal\<deleted\|variable-c9aadd2c-63fe-5c48-b565-1e7fe9eb9df4\>);
  --_headings---letter-spacing\<deleted\|variable-c6f0387f-41e1-3c3b-7c18-694ba75993eb\>: var(--_letter-spacing---normal\<deleted\|variable-09aa6f3d-0d8b-585a-71f5-a9cd6ca76fea\>);
}

.rich-text h6 {
  font-size: var(--_headings---size\<deleted\|variable-f524dc3e-8761-f457-d2ff-338fce20e165\>);
  line-height: var(--_headings---line-height\<deleted\|variable-8495ed87-1838-24f5-f771-c6de00d78090\>);
  letter-spacing: var(--_headings---letter-spacing\<deleted\|variable-c6f0387f-41e1-3c3b-7c18-694ba75993eb\>);
  --_headings---size\<deleted\|variable-f524dc3e-8761-f457-d2ff-338fce20e165\>: var(--text--h6\<deleted\|variable-37cad83d-2206-f769-bfc3-b56dc16c2930\>);
  --_headings---line-height\<deleted\|variable-8495ed87-1838-24f5-f771-c6de00d78090\>: var(--_line-height---normal\<deleted\|variable-c9aadd2c-63fe-5c48-b565-1e7fe9eb9df4\>);
  --_headings---letter-spacing\<deleted\|variable-c6f0387f-41e1-3c3b-7c18-694ba75993eb\>: var(--_letter-spacing---normal\<deleted\|variable-09aa6f3d-0d8b-585a-71f5-a9cd6ca76fea\>);
}

.display-none, .global-combo {
  display: none;
}

.display-desktop {
  display: block;
}

.display-tablet, .display-mobile {
  display: none;
}

.absolute-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.absolute-cover.align-center {
  justify-content: center;
  align-items: center;
  display: flex;
}

.paragraph {
  font-size: clamp(1rem, var(--text--normal\<deleted\|variable-40bf5af2-ab12-9dec-eec5-3eea506b7fb7\>), 100vw);
}

.page-wrap {
  flex-flow: column;
  min-height: 100svh;
  display: flex;
  overflow: clip;
}

.page-main {
  flex-flow: column;
  flex: 1;
  display: flex;
  position: relative;
}

.section {
  z-index: 2;
  border: 1px solid #f59e0b;
  position: relative;
}

.grid {
  grid-column-gap: var(--_site-variables---design-gap);
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: repeat(var(--_site-variables---columns), minmax(0px, 1fr));
  border: 1px solid #8b5cf6;
  display: grid;
}

.full-screen {
  width: 100vw;
  height: 100vh;
}

.full-cover {
  width: 100%;
  height: 100%;
}

.flex {
  border: 1px solid #34d399;
}

.spacer {
  height: 100vh;
}

.full-height {
  height: 100%;
}

.ratio {
  z-index: 1;
  background-color: #eee;
  width: 100%;
  padding-left: 1em;
  padding-right: 1em;
  position: relative;
}

.gap-none {
  gap: 0;
}

.full-width {
  width: 100%;
}

.size-shrink {
  flex-shrink: 0;
}

.position-relative {
  position: relative;
}

.box-sizing {
  box-sizing: content-box;
}

.position-fixed {
  position: fixed;
  inset: 0%;
}

.pointer-events-none {
  pointer-events: none;
}

.radio_label {
  grid-column-gap: .7vw;
  grid-row-gap: .7vw;
  --_radios---btn-y-padding: 0px;
  --_radios---btn-x-padding: 0px;
  --_radios---border: #3d3219;
  --_radios---btn-radius: 0px;
  --_radios---bg: #f5bc01;
  --_radios---text: #775506;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.radio_label:where(.w-variant-524bd629-f679-2787-d954-2bbb5e0d47a8) {
  --_radios---btn-y-padding: 0px;
  --_radios---btn-x-padding: 0px;
  --_radios---border: #531111;
  --_radios---btn-radius: 0px;
  --_radios---bg: #ac4f4f;
  --_radios---text: #531111;
  transform: translate(0);
}

.radio_label:where(.w-variant-56ad8fb4-103a-edb5-907e-c2eca24e0aae) {
  padding: var(--_radios---btn-y-padding) var(--_radios---btn-x-padding);
  border: 1px solid var(--_radios---border);
  border-radius: var(--_radios---btn-radius);
  background-color: var(--_radios---bg);
  --_radios---btn-y-padding: clamp(calc(24 / var(--_site-variables---design-width) * 100vw), calc(24 / var(--_site-variables---design-width) * 100vw), calc(20 / var(--_site-variables---design-width) * 100vw));
  --_radios---btn-x-padding: clamp(calc(24 / var(--_site-variables---design-width) * 100vw), calc(24 / var(--_site-variables---design-width) * 100vw), calc(20 / var(--_site-variables---design-width) * 100vw));
  --_radios---border: #0000000d;
  --_radios---btn-radius: .5rem;
  --_radios---bg: #53505005;
  --_radios---text: var(--_colors---2);
  justify-content: space-between;
  align-items: flex-start;
}

.radio_label:where(.w-variant-ee6b99cb-9e59-90d9-160d-f0fbd64ac09d) {
  --_radios---btn-y-padding: 0px;
  --_radios---btn-x-padding: 0px;
  --_radios---border: #d2f040;
  --_radios---btn-radius: 0px;
  --_radios---bg: #1b1b1b;
  --_radios---text: #fff;
}

.radio_label:where(.w-variant-e3dd562d-ebef-cb96-a6aa-78fc6997a1f8) {
  --_radios---btn-y-padding: 0px;
  --_radios---btn-x-padding: 0px;
  --_radios---border: var(--_colors---off-white\<deleted\|variable-26c7a79c-12c4-eb97-61ad-f1c6fbe3eb76\>);
  --_radios---btn-radius: 0px;
  --_radios---bg: var(--_colors---off-white\<deleted\|variable-26c7a79c-12c4-eb97-61ad-f1c6fbe3eb76\>);
  --_radios---text: black;
  border-radius: .5rem;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 1.5rem;
  overflow: hidden;
}

.radio_label.checkbox {
  --_radios---btn-y-padding: 0px;
  --_radios---btn-x-padding: 0px;
  --_radios---border: #d2f040;
  --_radios---btn-radius: 0px;
  --_radios---bg: #1b1b1b;
  --_radios---text: #fff;
  justify-content: flex-start;
  align-items: flex-start;
}

.radio_input {
  z-index: 2;
  cursor: pointer;
  appearance: none;
  position: absolute;
  inset: 0%;
}

.radio_circle_wrap {
  aspect-ratio: 1;
  border: .125rem solid var(--_radios---border);
  background-color: var(--_radios---bg);
  width: 1.5vw;
  color: var(--_radios---text);
  border-radius: 100vw;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
  /* The indicator is a flex item sitting beside the label text, and at the
     default shrink factor the longer labels squeezed it: on a phone the three
     apply options rendered at 8.7px, 7.8px and 12px, the last only because it
     has the shortest copy. Its size is authored, not negotiable. */
  flex-shrink: 0;
}

.radio_circle_wrap:where(.w-variant-524bd629-f679-2787-d954-2bbb5e0d47a8) {
  aspect-ratio: 7 / 4;
  width: 3vw;
  padding: .1vw;
}

.radio_circle_wrap:where(.w-variant-ee6b99cb-9e59-90d9-160d-f0fbd64ac09d) {
  border-radius: .5vw;
}

.radio_circle_wrap:where(.w-variant-56ad8fb4-103a-edb5-907e-c2eca24e0aae) {
  background-color: var(--_radios---bg);
  border-width: 1px;
  border-radius: 2px;
  width: .75rem;
  transition: all .2s;
}

.radio_circle_wrap:where(.w-variant-e3dd562d-ebef-cb96-a6aa-78fc6997a1f8) {
  aspect-ratio: auto;
  --_radios---btn-y-padding: 0px;
  --_radios---btn-x-padding: 0px;
  --_radios---border: var(--_colors---off-white\<deleted\|variable-26c7a79c-12c4-eb97-61ad-f1c6fbe3eb76\>);
  --_radios---btn-radius: 0px;
  --_radios---bg: var(--_colors---off-white\<deleted\|variable-26c7a79c-12c4-eb97-61ad-f1c6fbe3eb76\>);
  --_radios---text: black;
  border-style: none;
  border-radius: 0;
  width: 100%;
  position: absolute;
  inset: 0%;
}

.radio_circle_wrap.checkbox-3 {
  border-radius: 4px;
  width: 1.3rem;
  margin-top: .2rem;
}

.radio_circle_inner {
  opacity: 0;
  background-color: currentColor;
  border-radius: 100vw;
  width: 70%;
  height: 70%;
  padding: 0;
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease;
}

.radio_circle_inner:where(.w-variant-524bd629-f679-2787-d954-2bbb5e0d47a8) {
  width: 65%;
  height: 100%;
  transform: translate(-22%);
}

.radio_circle_inner:where(.w-variant-ee6b99cb-9e59-90d9-160d-f0fbd64ac09d) {
  background-color: #0000;
}

.radio_circle_inner:where(.w-variant-56ad8fb4-103a-edb5-907e-c2eca24e0aae) {
  color: var(--_radios---bg);
  background-color: #0000;
}

.radio_circle_inner:where(.w-variant-e3dd562d-ebef-cb96-a6aa-78fc6997a1f8) {
  background-color: var(--_radios---bg);
  border-radius: 0;
  width: 100%;
  height: 100%;
}

.radio_circle_inner.checkbox-4 {
  background-color: #0000;
}

.radio_text:where(.w-variant-e3dd562d-ebef-cb96-a6aa-78fc6997a1f8) {
  z-index: 10;
  color: currentColor;
  position: relative;
}

.radio_check {
  display: none;
}

.radio_check:where(.w-variant-ee6b99cb-9e59-90d9-160d-f0fbd64ac09d) {
  transition: all .2s;
  display: block;
}

.radio_check:where(.w-variant-56ad8fb4-103a-edb5-907e-c2eca24e0aae) {
  display: block;
}

.radio_check.checkbox-5 {
  transition: all .2s;
  display: block;
}

.overflow-hidden {
  overflow: clip;
}

.h-line {
  background-color: #fff;
  width: 100%;
  padding-top: 1px;
}

.link {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.cursor-pointer {
  cursor: pointer;
}

.no-shrink {
  flex: none;
}

.dev-flex {
  display: flex;
}

.auto-width {
  width: auto;
}

.pointer-events {
  pointer-events: auto;
}

.absolute-contain {
  object-fit: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.trackinner {
  z-index: 1;
  background-color: #827127;
  border-radius: 40px;
  width: 0%;
  height: 100%;
  position: relative;
}

.fullscreen {
  display: flex;
}

.button_close_wrap {
  cursor: pointer;
  border-radius: 100vw;
  display: inline-block;
  position: relative;
}

.overflow-visible {
  overflow: visible;
}

.text:where(.w-variant-91ae0d4b-c22a-9c24-e714-15c703231902) {
  font-size: clamp(calc(var(--_mobile-text---h1) * 1rem / 16), calc(var(--_mobile-text---h1) * 1rem / 16 + (var(--_desktop-text---h1)  - var(--_mobile-text---h1)) * ((100vw - 767px) / (var(--_site-variables---design-width)  - 767))), calc(var(--_desktop-text---h1) * 1rem / 16));
}

.logo {
  position: relative;
}

.button1 {
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-radius: .25rem;
  transition: all .3s;
  display: inline-block;
  position: relative;
}

.button1._1 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---1);
  background-color: #0f003a;
}

.button1._1:hover {
  background-color: #cbf;
}

.button1._2 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---2);
}

.button1._2:hover {
  border-color: var(--_colors---3);
  color: var(--_colors---1);
}

.button1._3 {
  background-color: var(--_colors---1);
  color: #fff;
  border: 1px solid #fff;
}

.button1._3:hover {
  border-color: var(--_colors---1);
  color: var(--_colors---1);
  background-color: #fff;
}

.margin-auto {
  margin-left: auto;
  margin-right: auto;
}

.border-text {
  position: absolute;
  inset: 0% 0% auto;
  transform: translate(0, -6px);
}

.inline-block {
  display: inline-block;
}

.form-field {
  background-color: #f7f7f7;
  border-radius: 4px;
  font-weight: 400;
}

.form-field.normal {
  display: block;
}

.form-field.normal:where(.w-variant-140caf3f-bbea-145a-341d-2f9fe112045d), .form-field.message {
  display: none;
}

.form-field.message:where(.w-variant-140caf3f-bbea-145a-341d-2f9fe112045d) {
  display: block;
}

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

.height-screen {
  height: 100vh;
}

.cart-wrap {
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  background-color: #ffffff03;
}

.path:where(.w-variant-56ad8fb4-103a-edb5-907e-c2eca24e0aae) {
  color: var(--_colors---4);
}

.form-sticky {
  position: sticky;
  top: 0;
}

.field-wrap-name-height {
  height: 1.5rem;
}

.button-text {
  z-index: 1;
  white-space: nowrap;
  position: relative;
}

.button-submit {
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-radius: .25rem;
  transition: all .3s;
  display: inline-block;
  position: relative;
}

.button-submit._1 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---1);
  background-color: #0f003a;
}

.button-submit._1:hover {
  background-color: #cbf;
}

.button-submit._2 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---2);
}

.button-submit._2:hover {
  border-color: var(--_colors---3);
  color: var(--_colors---1);
}

.button-submit._3 {
  background-color: var(--_colors---1);
  color: #fff;
  border: 1px solid #fff;
}

.button-submit._3:hover {
  border-color: var(--_colors---1);
  color: var(--_colors---1);
  background-color: #fff;
}

.button3 {
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-radius: .25rem;
  transition: all .3s;
  display: inline-block;
  position: relative;
}

.button3._1 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---1);
  background-color: #0f003a;
}

.button3._1:hover {
  background-color: #cbf;
}

.button3._2 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---2);
}

.button3._2:hover {
  border-color: var(--_colors---3);
  color: var(--_colors---1);
}

.button3._3 {
  background-color: var(--_colors---1);
  color: #fff;
  border: 1px solid #fff;
}

.button3._3:hover {
  border-color: var(--_colors---1);
  color: var(--_colors---1);
  background-color: #fff;
}

.button-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.success-message {
  background-color: #fff;
  padding: 0;
}

.button2 {
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-radius: .25rem;
  transition: all .3s;
  display: inline-block;
  position: relative;
}

.button2._1 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---1);
  background-color: #0f003a;
}

.button2._1:hover {
  background-color: #cbf;
}

.button2._2 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---2);
}

.button2._2:hover {
  border-color: var(--_colors---3);
  color: var(--_colors---1);
}

.button2._3 {
  background-color: var(--_colors---1);
  color: #fff;
  border: 1px solid #fff;
}

.button2._3:hover {
  border-color: var(--_colors---1);
  color: var(--_colors---1);
  background-color: #fff;
}

.button-nav {
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-radius: .25rem;
  transition: all .3s;
  display: inline-block;
  position: relative;
}

.button-nav._1 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---1);
  background-color: #0f003a;
}

.button-nav._1:hover {
  background-color: #cbf;
}

.button-nav._2 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---2);
}

.button-nav._2:hover {
  border-color: var(--_colors---3);
  color: var(--_colors---1);
}

.button-nav._3 {
  background-color: var(--_colors---1);
  color: #fff;
  border: 1px solid #fff;
}

.button-nav._3:hover {
  border-color: var(--_colors---1);
  color: var(--_colors---1);
  background-color: #fff;
}

.icon {
  margin-bottom: -2px;
  transition: color .4s;
}

.button-nav2 {
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-radius: .25rem;
  /* Colour only — never transform/opacity. GSAP writes those every frame for
     the hero intro and the magnetic hover, and a CSS transition on them
     re-eases each of those writes, muddying the tween's own ease. */
  transition: color .3s, background-color .3s, border-color .3s;
  display: inline-block;
  position: relative;
}

.button-nav2._1 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---1);
  background-color: #0f003a;
}

.button-nav2._1:hover {
  background-color: #cbf;
}

.button-nav2._2 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---2);
}

.button-nav2._2:hover {
  border-color: var(--_colors---3);
  color: var(--_colors---1);
}

.button-nav2._3 {
  background-color: var(--_colors---1);
  color: #fff;
  border: 1px solid #fff;
}

.button-nav2._3:hover {
  border-color: var(--_colors---1);
  color: var(--_colors---1);
  background-color: #fff;
}

.dots {
  z-index: -1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.progress-wrap {
  width: 100%;
  height: 1px;
}

.progress {
  height: 100%;
}

.hover-wrap {
  flex-flow: column;
  width: 30%;
  display: flex;
  position: absolute;
  inset: 0% auto auto 36%;
}

.hover-wrap.mobile {
  display: none;
}

.hover-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.button4 {
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-radius: .25rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  transition: all .3s;
  display: flex;
  position: relative;
}

.button4._1 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---1);
  background-color: #0f003a;
}

.button4._1:hover {
  background-color: #cbf;
}

.button4._2 {
  border: 1px solid var(--_colors---1);
  color: var(--_colors---2);
}

.button4._2:hover {
  border-color: var(--_colors---3);
  color: var(--_colors---1);
}

.button4._3 {
  background-color: var(--_colors---1);
  color: #fff;
  border: 1px solid #fff;
}

.button4._3:hover {
  border-color: var(--_colors---1);
  color: var(--_colors---1);
  background-color: #fff;
}

.card {
  height: auto;
}

._3 {
  color: #fff;
  background-color: #4000ff;
  border: 1px solid #fff;
}

._3:hover {
  color: #4000ff;
  background-color: #fff;
  border-color: #4000ff;
}

.prefooter {
  min-height: 80vh;
}

.footer-link {
  color: #ffffffb3;
}

.footer-link:lang(en) {
  color: #fff;
}

.underlay-nav__link-small {
  font-size: 1em;
  line-height: 1.1;
}

.underlay-nav__link-small.is--faded {
  opacity: .5;
}

.underlay-nav__logo {
  mix-blend-mode: multiply;
}

.underlay-nav__container {
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.underlay-nav__link-large {
  border-radius: .25em;
  width: 100%;
  padding: .75em 1em;
}

.underlay-nav__link-large.w--current {
  color: #ededed;
  background-color: #f85931;
}

.underlay-nav__overlay {
  z-index: 100;
  pointer-events: none;
  cursor: pointer;
  visibility: hidden;
  position: fixed;
  inset: 0% -1px 0% 0%;
  overflow: clip;
}

.underlay-nav__corner {
  transform-origin: 100% 0;
  color: #fff;
  background-image: radial-gradient(circle farthest-side at 0 100%, #fff0 99%, #fff);
  width: 2em;
  height: 2em;
}

.underlay-nav__corner.is--bottom {
  transform-origin: 100% 100%;
  background-image: radial-gradient(circle farthest-side at 0 0, #fff0 99%, #fff);
}

.underlay-nav__toggle-bar {
  background-color: currentColor;
  flex: none;
  width: 100%;
  height: .0625rem;
  padding: 0;
}

.underlay-nav__borders {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  position: absolute;
  inset: 0;
}

.underlay-nav__toggle-icon {
  grid-column-gap: .375em;
  grid-row-gap: .375em;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 3rem;
  margin-bottom: -.3em;
  display: flex;
}

.underlay-nav__list {
  flex-flow: column;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.underlay-nav__list.is--small {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
}

.underlay-nav__inner {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 7.5em 2em 2em;
  display: flex;
  overflow: auto;
}

.underlay-nav__bottom-border {
  opacity: .15;
  transform-origin: 0%;
  background-color: currentColor;
  width: 100%;
  height: 1px;
  position: absolute;
  inset: 0% 0% auto;
}

.underlay-nav__toggle-label {
  font-size: 1.25em;
}

.underlay-nav__dark {
  opacity: 0;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #0000004d;
  position: absolute;
  inset: 0%;
}

.underlay-nav__bar {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.underlay-nav__menu {
  z-index: 1;
  width: var(--menu-width);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
}
/* Desktop: inset the sheet 8px from top, right, and bottom.
   Mobile keeps the original full-height, flush-right layout.
   Extra selector prefix bumps specificity above the inline <style>
   at the bottom of index.html which sets top:0, right:0, height:100%. */
@media (min-width: 992px) {
  html [data-underlay-nav-menu] {
    top: 8px;
    right: 8px;
    height: calc(100vh - 16px);
    border-radius: 4px;
    overflow: hidden;
  }
}

.underlay-nav__logo-svg {
  width: 100%;
}

.underlay-nav__header {
  z-index: 100;
  color: #fff;
  position: fixed;
  inset: 0% 0% auto;
}
/* Duplicate-layer nav so blend mode applies only to logo/date/hamburger
   without inverting the green button + bullet. Layout in the two layers is
   identical (the --solid layer is a runtime clone of the --blend layer),
   so positions can't drift. */
.underlay-nav__header--blend {
  mix-blend-mode: difference;
}
.underlay-nav__header--blend .button-nav2,
.underlay-nav__header--blend .block-bullet {
  visibility: hidden;
}
.underlay-nav__header--solid {
  z-index: 101;
  pointer-events: none;
}
.underlay-nav__header--solid .button-nav2,
.underlay-nav__header--solid .block-bullet {
  pointer-events: auto;
}
.underlay-nav__header--solid .underlay-nav__logo,
.underlay-nav__header--solid .nav-right p,
.underlay-nav__header--solid .underlay-nav__toggle {
  visibility: hidden;
}

.underlay-nav__toggle {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  background-color: #0000;
  justify-content: center;
  align-items: center;
  padding-top: 1em;
  padding-bottom: 1em;
  display: flex;
}

.underlay-nav__toggle-text {
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-end;
  height: 1.5em;
  display: flex;
  overflow: hidden;
}

.underlay-nav__border-row {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}

.underlay-nav__bottom-col {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.underlay-nav__link-label {
  letter-spacing: -.04em;
  font-size: 3.25em;
  line-height: .9;
}

.underlay-nav__bottom {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 1.5em;
  display: flex;
  position: relative;
}

.underlay-nav__border {
  background-color: #fff;
  width: 100%;
  height: 1em;
}

.nav-right {
  width: 43vw;
}

.display-desktop-flex {
  display: flex;
}

.rounded-top {
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  overflow: hidden;
}

.block-bullet {
  margin-top: 3%;
}

.progress-img {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.loading__numbers {
  flex-flow: row;
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
  position: absolute;
  inset: auto 3% 3% auto;
}

.loading__progress {
  width: 100%;
  height: .5rem;
  position: absolute;
  bottom: 0;
  left: 0;
}

.loading-screen {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.loading__number {
  color: #fff;
  text-transform: uppercase;
  font-size: 7vw;
  position: relative;
}

.loading__number-group {
  flex-flow: column;
  height: 8vw;
  display: flex;
  position: relative;
  overflow: hidden;
}

.loading__number-wrap {
  will-change: transform;
  flex-flow: column;
  display: flex;
  position: relative;
}

.loading__percentage {
  color: #fff;
  text-transform: uppercase;
  will-change: transform;
  margin-bottom: -.4vw;
  font-size: 7vw;
  line-height: 1;
  position: relative;
}

.loading__percentage-wrap {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.loading__progress-inner {
  background-color: var(--_colors---8);
  perspective-origin: 0%;
  transform-origin: 0%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.loading-container {
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.loading-img-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.loading-img-holder.is-1 {
  width: 10%;
  position: absolute;
  top: 37%;
  left: 29%;
}

.loading-img-holder.is-2 {
  width: 10%;
  position: absolute;
  top: 22%;
  left: 35%;
}

.loading-img-holder.is-3 {
  width: 10%;
  position: absolute;
  top: 29%;
  left: 45%;
}

.loading-img-holder.is-4 {
  width: 10%;
  position: absolute;
  top: 44%;
  left: 41%;
}

.loading-img-holder.is-5 {
  width: 10%;
  position: absolute;
  top: 40%;
  left: 52%;
}

.hero-img-wrap {
  width: 15%;
  position: absolute;
}

.hero-img-wrap.is-1 {
  top: 62%;
  left: 3%;
}

.hero-img-wrap.is-3 {
  top: 53%;
  left: 42%;
}

.hero-img-wrap.is-2 {
  top: 69%;
  left: 21%;
}

.hero-img-wrap.is-4 {
  top: 40%;
  left: 67%;
}

.hero-img-wrap.is-5 {
  top: 13%;
  left: 66%;
}

.form-back {
  position: absolute;
  inset: 0% auto auto 0%;
}

.form-modal-wrap {
  border-top-left-radius: var(--_site-variables---desktop-radius);
  border-top-right-radius: var(--_site-variables---desktop-radius);
  pointer-events: auto;
  width: 100%;
  height: 95vh;
  /* Was a bare `transform .5s` (browser default ease). This is a sheet sliding
     up from the bottom, so it wants a decisive start and a long settle —
     expo-out. */
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: scroll;
  transform: translate(0, 100%);
}

.form-modal {
  /* Must clear the nav: .underlay-nav__header--solid (the layer holding the
     green Apply button) is z-index 101, so at 100 that button rendered on top
     of the open modal. 200 matches .spk-modal — the "above the nav" tier. */
  z-index: 200;
  pointer-events: none;
  justify-content: space-between;
  align-items: flex-end;
  height: 100vh;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.form-overlay {
  opacity: 0;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #0003;
  /* Matches the sheet's slide so the backdrop doesn't finish early. */
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute;
  inset: 0%;
}

.overflow-scroll {
  overflow: scroll;
}

.status {
  z-index: 100;
  width: 100%;
  height: 100vh;
  position: fixed;
  inset: 0% 0% auto;
  overflow: scroll;
}

.status-block {
  background-color: #e5e7eb;
  border: 1px solid #d8d8d8;
}

.status-live {
  color: #03543f;
  white-space: nowrap;
  background-color: #def7ec;
  border-radius: .125rem;
  justify-content: center;
  align-items: center;
  padding: .375rem .625rem;
  display: flex;
}

.status-live:where(.w-variant-e8e6bc40-375b-58c6-e556-c3ad8a338c96) {
  color: #000;
  background-color: #fff;
}

.status-live:where(.w-variant-7196ef0f-f220-7c2a-280a-ca76e2d1a6b4) {
  color: #723b13;
  background-color: #fef08a;
}

.status-live:where(.w-variant-0b50b558-2a52-cd28-a717-20954800c77e) {
  color: #e1effe;
  background-color: #1e429f;
}

.status-live:where(.w-variant-4f2ab076-4801-02de-500d-ae9bc770115a) {
  color: #9b1c1c;
  background-color: #fde8e8;
}

.email-modal {
  z-index: 101;
  opacity: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  transition: opacity .4s;
  display: flex;
  position: fixed;
  inset: 0%;
}

.email-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.manual-modal {
  z-index: 101;
  opacity: 0;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  transition: opacity .4s;
  display: flex;
  position: fixed;
  inset: 0%;
  overflow: scroll;
}

.manual-modal.open {
  opacity: 1;
  pointer-events: auto;
  justify-content: center;
  align-items: flex-start;
  padding-top: 27vh;
  padding-bottom: 27vh;
}

.form-modal-toggle {
  z-index: 2;
  /* Keep the control fixed while the sheet scrolls, but offset it by the
     sheet's 5vh top gap so it remains inside the modal. */
  position: fixed;
  inset: calc(5vh + 2rem) 2rem auto auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
.form-modal.open .form-modal-toggle {
  opacity: 1;
  visibility: visible;
  /* .form-modal is pointer-events:none while closed; the toggle now sits
     outside the wrap, so take events back only when open. */
  pointer-events: auto;
  transition: opacity 300ms ease 200ms, visibility 0s;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.hero-img-temp {
  width: 100%;
  position: absolute;
  inset: auto 0% 0%;
}

.hero-wrap {
  height: 150vh;
}

@media screen and (max-width: 991px) {
  .guide-contain {
    z-index: 1;
    position: relative;
    container-type: inline-size;
  }

  .guide-layout.u-grid-custom {
    grid-column-gap: var(--_site-variables---design-gap-tablet);
    grid-row-gap: var(--_site-variables---design-gap-tablet);
    grid-template-columns: var(--grid-tablet);
  }

  .container {
    width: calc(100% - var(--_site-variables---margin-tablet) * 2);
  }

  .heading, .heading.radio-text, .heading.eyebrow-3 {
    font-size: calc(var(--_mobile-text---normal\<deleted\|variable-111c9139-cf64-304f-8a6a-532305ef941c\>) / 16px * 1rem);
  }

  .heading.text-small {
    font-size: calc(var(--_mobile-text---small\<deleted\|variable-a206a2dc-ba14-db48-ac5b-2ce26260d965\>) / 16px * 1rem);
  }

  .display-desktop {
    display: none;
  }

  .display-tablet, .display-mobile {
    display: block;
  }

  .grid {
    grid-column-gap: var(--_site-variables---design-gap-tablet);
    grid-row-gap: var(--_site-variables---design-gap-tablet);
    grid-template-columns: repeat(var(--_site-variables---columns-tablet), minmax(0px, 1fr));
  }

  .flex {
    display: block;
  }

  .text:where(.w-variant-91ae0d4b-c22a-9c24-e714-15c703231902) {
    font-size: clamp(calc(var(--_mobile-text---h1) * 1rem / 16), calc(var(--_mobile-text---h1) * 1rem / 16 + (var(--_desktop-text---h1)  - var(--_mobile-text---h1)) * ((100vw - 767px) / (var(--_site-variables---design-width)  - 767))), calc(var(--_desktop-text---h1) * 1rem / 16));
  }

  .underlay-nav__header {
    margin-left: auto;
    margin-right: auto;
  }

  .display-desktop-flex {
    display: none;
  }

  .nav-trigger {
    position: absolute;
    inset: 100vh 0% auto;
  }
}

@media screen and (max-width: 767px) {
  .guide-contain.container {
    width: calc(100% - var(--site--margin-2\<deleted\|variable-06c56dcb-6f8d-2408-2a44-a0d75478a54c\>) * 2);
  }

  .guide-layout.u-grid-custom {
    grid-column-gap: var(--_site-variables---design-gap-mobile);
    grid-row-gap: var(--_site-variables---design-gap-mobile);
    grid-template-columns: var(--grid-mobile);
  }

  .container {
    width: calc(100% - var(--_site-variables---margin-mobile) * 2);
  }

  .grid {
    grid-column-gap: var(--_site-variables---design-gap-mobile);
    grid-row-gap: var(--_site-variables---design-gap-mobile);
    grid-template-columns: repeat(var(--_site-variables---columns-mobile), minmax(0px, 1fr));
  }

  .full-screen {
    height: 100svh;
  }

  .button-nav2:where(.w-variant-23831f2c-aafd-8731-5a99-1888e3df7f1a) {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .hover-wrap.mobile {
    width: 100%;
    display: block;
    position: relative;
    top: 0%;
    left: 0%;
  }

  .hover-item.mobile {
    position: absolute;
    inset: 0%;
  }

  .underlay-nav__inner {
    padding: 5em 1.25em 1.25em;
  }

  .underlay-nav__toggle-label {
    font-size: 1em;
  }

  .underlay-nav__toggle-text {
    height: 1.25em;
  }

  .underlay-nav__link-label {
    font-size: 2em;
  }

  .underlay-nav__bottom {
    grid-column-gap: 2em;
    grid-row-gap: 2em;
    flex-flow: column;
    padding-left: 1em;
    padding-right: 1em;
  }

  .nav-right {
    width: 60vw;
  }

  .hero-img-wrap.is-2 {
    top: 74%;
    left: 41%;
  }

  .hero-img-wrap.is-4 {
    top: 52%;
  }

  .hero-img-wrap.is-5 {
    top: 46%;
    left: 11%;
  }
}

#w-node-b9b8d888-e977-0f04-343b-7c31a5dc1cb9-30e76e68 {
  align-self: center;
}


@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-BoldItalic.ttf') format('truetype'), url('../fonts/GeistMono-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-Bold.ttf') format('truetype'), url('../fonts/GeistMono-ExtraBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geistmono';
  src: url('../fonts/GeistMono-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-Extralight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial Book';
  src: url('../fonts/MesoTRIAL-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-ExtralightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-BookItalic.otf') format('opentype'), url('../fonts/MesoTRIAL-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mesotrial';
  src: url('../fonts/MesoTRIAL-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Laygrotesk';
  src: url('../fonts/LayGrotesk-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Laygrotesk';
  src: url('../fonts/LayGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Laygrotesk';
  src: url('../fonts/LayGrotesk-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Laygrotesk';
  src: url('../fonts/LayGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Laygrotesk';
  src: url('../fonts/LayGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ===== Speakers — drag-to-scroll carousel ===== */
.spk-carousel {
  /* Match the spacing used between elements in the "How to get Involved" grid. */
  --spk-gap: var(--_site-variables---design-gap);
  /* Break out of the page container to the true viewport edges so dragging
     doesn't clip early against the container margin; re-add that margin as
     padding so the first card still lines up with the heading above. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: var(--_site-variables---margin);
  padding-right: var(--_site-variables---margin);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding-top: 8px;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
@media (max-width: 991px) {
  .spk-carousel {
    padding-left: var(--_site-variables---margin-mobile);
    padding-right: var(--_site-variables---margin-mobile);
  }
}
.spk-carousel::-webkit-scrollbar {
  display: none;
}
.spk-carousel.is-dragging {
  cursor: grabbing;
}
.spk-track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spk-gap);
  width: max-content;
}
.spk-card {
  flex: 0 0 auto;
  /* Show 4 full cards + a peek of the next: 4 cards, 4 gaps, ~0.3-card peek. */
  width: 300px;
  width: calc((100cqw - 4 * var(--spk-gap)) / 4.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.spk-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
/* Pixel-dissolve hover: canvas over the sharp image shows a pixelated
   version. Pixel size animates smaller on hover (chunky → sharp) and
   back to chunky on leave. JS handles the re-rendering per frame. */
.spk-card__pixel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 1;
}
.spk-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.spk-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 0;
}
.spk-card__name {
  margin: 0;
}
.spk-card__role {
  margin: 0;
  opacity: 0.8;
}
@media (max-width: 991px) {
  .spk-card {
    width: 78vw;
    width: calc((100cqw - var(--spk-gap)) / 1.2);
  }
}

/* ===== Custom cursor: solid green square that lag-follows the pointer ===== */
.bt-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  padding: 0;
  translate: calc(-100% - 8px) calc(-100% - 8px);
  background: var(--_colors---8, #32f08c);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform;
  transition: opacity 200ms ease;
}
.bt-cursor.is-ready { opacity: 1; }
@media (hover: none), (pointer: coarse), (max-width: 991px) {
  .bt-cursor { display: none !important; }
}

/* ===== Masked hover: button colour stays, text flips in and out ===== */
.button-nav2 {
  overflow: hidden;
}
.button-nav2 .btn-mask,
.button1 .btn-mask,
.button2 .btn-mask,
.button3 .btn-mask,
.button4 .btn-mask,
.button-submit .btn-mask {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.button-nav2 .btn-mask__inner,
.button1 .btn-mask__inner,
.button2 .btn-mask__inner,
.button3 .btn-mask__inner,
.button4 .btn-mask__inner,
.button-submit .btn-mask__inner {
  display: inline-block;
  transition: transform 280ms cubic-bezier(0.76, 0, 0.24, 1);
}
.button-nav2 .btn-mask__inner--hover,
.button1 .btn-mask__inner--hover,
.button2 .btn-mask__inner--hover,
.button3 .btn-mask__inner--hover,
.button4 .btn-mask__inner--hover,
.button-submit .btn-mask__inner--hover {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(100%);
}
.button-nav2:hover .btn-mask__inner,
.button1:hover .btn-mask__inner,
.button2:hover .btn-mask__inner,
.button3:hover .btn-mask__inner,
.button4:hover .btn-mask__inner,
.button-submit:hover .btn-mask__inner {
  transform: translateY(-100%);
}
.button-nav2:hover .btn-mask__inner--hover,
.button1:hover .btn-mask__inner--hover,
.button2:hover .btn-mask__inner--hover,
.button3:hover .btn-mask__inner--hover,
.button4:hover .btn-mask__inner--hover,
.button-submit:hover .btn-mask__inner--hover {
  transform: translateY(0);
}

/* ===== Bar-reveal text animation =====
   Colored bar sweeps in covering the heading, then sweeps out revealing it.
   JS wraps the text in .br-content and appends .br-bar, then drives a two-
   phase GSAP timeline. Text is visibility:hidden until the bar covers it. */
[data-bar-reveal] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
[data-bar-reveal] .br-content {
  visibility: hidden;
  display: inline-block;
  position: relative;
  z-index: 1;
}
[data-bar-reveal].br-visible .br-content {
  visibility: visible;
}
[data-bar-reveal] .br-bar {
  position: absolute;
  inset: 0;
  background: var(--_colors---8, #32f08c);
  transform: scaleX(0);
  transform-origin: 0% 0%;
  z-index: 2;
  pointer-events: none;
}

/* ===== Speaker bio modal =====
   Right-side dark sheet, ~half-width on desktop, full-width on mobile.
   Big first name in brand green + white surname on top, eyebrow role,
   body bio underneath. Slim X close in the top-right. */
.spk-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.spk-modal.is-open { pointer-events: auto; }

.spk-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.32, 0.72, 0, 1);
  cursor: pointer;
}
.spk-modal.is-open .spk-modal__overlay { opacity: 1; }

.spk-modal__sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(720px, 100vw);
  color: #fff;
  transform: translateX(100%);
  transition: transform 520ms cubic-bezier(0.7, 0, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.spk-modal.is-open .spk-modal__sheet { transform: translateX(0); }

@media (min-width: 992px) {
  .spk-modal__sheet {
    top: 8px;
    right: 8px;
    bottom: 8px;
    width: min(50vw, 900px);
    border-radius: 4px;
  }
}

.spk-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  transition: transform 200ms ease;
}
.spk-modal__close:hover { transform: scale(0.94); }
.spk-modal__close svg { display: block; }

.spk-modal__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 88px 56px 56px;
}
@media (max-width: 991px) {
  .spk-modal__scroll {
    padding: 80px 32px 40px;
  }
}

.spk-modal__name {
  margin: 0 0 32px;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.spk-modal__first { color: var(--_colors---8, #32f08c); }
.spk-modal__last { color: #fff; }

.spk-modal__role {
  margin: 0 0 32px;
  opacity: 0.9;
}

.spk-modal__bio {
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  white-space: pre-line;
}
.spk-modal__bio p { margin: 0 0 1em; }
.spk-modal__bio p:last-child { margin-bottom: 0; }

/* Speaker card is clickable */
.spk-card { cursor: pointer; }

/* ===== Design Operations — scrollytelling ===== */
#design-operations {
  scroll-margin-top: 96px;
}

.ap-scroll {
  position: relative;
  /* Each step's hover target extends beyond the grid to span the page width
     (see .ap-step-block::before); clip it so it can't create a horizontal scrollbar. */
  overflow-x: clip;
}

/* Cross-fade stack for the project visual. */
.ap-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 32px;
}
.ap-visual__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms ease;
}
.ap-visual__img.is-active { opacity: 1; }

.ap-eyebrow {
  text-transform: uppercase;
  margin-bottom: 16px;
}

.ap-cta { margin-top: 8px; }

/* Right column: heading + step list */
.ap-scroll__right {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.ap-scroll__heading {
  display: flex;
  flex-direction: column;
}
.ap-steps {
  display: flex;
  flex-direction: column;
}
.ap-step-block {
  position: relative; /* anchors the full-width hover target (::before) */
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* The second project uses the same detail-page navigation pattern as the
   portfolio cards while preserving the step-switching interaction. */
.ap-step-block .ap-step-link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.ap-step-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 8px;
}
.ap-step {
  display: flex;
  align-items: center;
  gap: 24px;
  transition: opacity 300ms ease;
  opacity: 1;
  width: 100%;
}
.ap-step__dot { display: none; }
.ap-step__title {
  min-width: 0;
  margin: 0;
}
html .ap-step__title { text-transform: none; }
.ap-step__arrow {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  margin: 0 0 0 auto;
  overflow: visible;
  transform-origin: right center;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ap-step__arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.ap-step-block:hover .ap-step__arrow,
.ap-step-block:focus-within .ap-step__arrow {
  transform: scaleX(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .ap-step__arrow {
    transition: none;
  }
  .ap-step-block:hover .ap-step__arrow,
  .ap-step-block:focus-within .ap-step__arrow {
    transform: none;
  }
}
.ap-step__copy { margin: 0; }
.ap-step__divider {
  height: 1px;
  background: currentColor;
  opacity: 0.15;
}

/* Desktop: dim inactive step titles; each step gets a hover target spanning
   the full page width. */
@media (min-width: 992px) {
  .ap-scroll__inner {
    --ap-step-padding-y: 40px;
    align-items: stretch;
  }
  .ap-step-block { padding: var(--ap-step-padding-y) 0; }
  .ap-step-block--link { padding: 0; }
  .ap-step-block--link .ap-step-link { padding: var(--ap-step-padding-y) 0; }
  /* Left visual locks below the fixed nav while the steps scroll;
     the whole section releases together once its bottom passes. */
  .ap-scroll__left {
    position: sticky;
    top: 120px;
    height: 100%;
    /* position:sticky creates a stacking context, which trapped .ap-cta's
       z-index inside this column and left the whole thing under the step
       hover targets — the Apply button became unclickable. Lift the column
       above them, but stay transparent to the pointer so hovering the left
       side still switches steps; only the button takes clicks back. */
    z-index: 2;
    pointer-events: none;
  }
  .ap-scroll__left .ap-visual {
    /* The final step keeps one padding unit below its copy. Subtract that
       shared token so the image ends at the copy's baseline, not the block. */
    height: calc(100% - var(--ap-step-padding-y));
    margin-bottom: 0;
    aspect-ratio: auto;
  }
  .ap-scroll__left a,
  .ap-scroll__left button,
  .ap-cta {
    pointer-events: auto;
  }
  .ap-step { opacity: 0.45; }
  .ap-step.is-active { opacity: 1; }

  /* The titles live in the right-hand grid columns, but hovering anywhere
     across the page at a step's height should activate it. This invisible
     pseudo-element widens the hit area leftwards; it sits on the BLOCK (not
     the title) so the block's 48px padding is part of the target too, leaving
     no dead gaps between steps. Being a pseudo-element, it triggers the
     block's own pointer events. */
  .ap-step-block::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: -100vw;
  }
  /* Keep the "Apply to Build" button above those hit areas so it stays
     clickable (the visual below them is not interactive). */
  .ap-cta {
    position: relative;
    z-index: 2;
  }

}

/* Mobile: the image stack stays stacked and cross-fades on scroll — see
   initApScroll in site.js. */
@media (max-width: 991px) {
  #design-operations {
    scroll-margin-top: 72px;
  }

  .ap-desktop-only { display: none !important; }
  .ap-visual { margin-bottom: 24px; }
  .ap-step-block { padding: 12px 0; }
  .ap-step-block--link { padding: 0; }
  .ap-step-block--link .ap-step-link { padding: 12px 0; }
  .ap-step__divider { margin: 12px 0; }

  /* Reorder: the "DESIGN OPERATIONS" heading comes first, then the visual,
     then the steps, then the button. The heading lives inside .ap-scroll__right
     in the markup (it belongs to the right column on desktop), so that column
     is dissolved with display:contents and its children are ordered directly
     against .ap-scroll__left. display:contents drops the column's own 48px
     gap, so the spacing is restored with margins below. */
  .ap-scroll__inner {
    display: flex;
    flex-direction: column;
  }
  .ap-scroll__right { display: contents; }
  .ap-scroll__heading { order: 1; margin-bottom: 32px; }
  .ap-scroll__left { order: 2; }
  .ap-steps { order: 3; }
  .ap-cta { order: 4; margin-top: 32px; }

  /* Extend the mobile-full button variant up to the site-wide mobile
     breakpoint (was only ≤ 767px in the original CSS). */
  .button-nav2.w-variant-23831f2c-aafd-8731-5a99-1888e3df7f1a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-self: stretch;
  }
  /* If the button sits inside a wrapping div (e.g. sponsor block), the
     parent flex has align-items: flex-start, so the wrapper shrinks to
     content. Stretch the wrapper so the 100%-wide button fills the row. */
  *:has(> .button-nav2.w-variant-23831f2c-aafd-8731-5a99-1888e3df7f1a) {
    align-self: stretch;
    width: 100%;
  }
}
/* ===== Status page ===== */

/* Footer "hosted by" mark: the SVG is inline, so it sat on the text baseline
   and rode ~3px above the label's optical centre. Centre it in its box. */
.hosted-by__logo {
  display: flex;
  align-items: center;
}
.hosted-by__logo svg {
  display: block;
}

@media (max-width: 991px) {
  /* Stack the "Team Members" label above the actions, and stack the two
     actions themselves rather than squeezing them side by side. Vertical
     spacing around this row comes from the mmt/mmb attributes on the element,
     because the dmt/dmb rules are inlined in status.html and would otherwise
     win over this stylesheet. */
  /* Both selectors are doubled up (.flex.x) on purpose: status.html inlines
     [desktop-x="center"] { flex-direction: row } with no media query, and
     being inline it beats this stylesheet at equal specificity. */
  .flex.status-members-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .flex.status-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  .status-actions .button1,
  .status-actions .button2 {
    width: 100%;
  }
}

@media (max-width: 991px) {
  /* Nav: the two columns are placed with desktop-only d-start/d-end, so on
     phones each .layout took the full grid width and the logo stacked above
     the button. Lay them out as one row instead. */
  .grid.status-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .grid.status-nav > .layout {
    width: auto;
    flex: 0 0 auto;
  }
}

/* Footer "hosted by <MakeReign mark>" sits at the right edge of its column.
   margin-left:auto handles a row-direction parent, align-self a column one,
   which covers the differing footer markup across pages. */
.footer-hosted-by {
  margin-left: auto;
  align-self: flex-end;
}

/* Close control on the application form modal. */
.form-modal-toggle {
  cursor: pointer;
}

/* Stat numbers slide down out of this clipped box as they count up
   (see initCountUp in animations.js, which inserts the wrapper). */
.stat-mask {
  overflow: hidden;
}

/* Animated underline: drawn as a pseudo-element so it can sweep in and out
   rather than just switching text-decoration on and off.

   `bottom` sits the rule just under the glyphs rather than at the bottom of
   the line box. 100% is the link's line height, ~1.3em approximates the
   text's own box, so half the leading is subtracted and the rule lands 1px
   below the text. Adapts if this is reused at another size or line-height —
   and it's the offset .nav-link_text below matches. */
[init-underline] {
  position: relative;
}
[init-underline]:after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background: currentColor;
  bottom: calc((100% - 1.3em) / 2 - 1px);
  left: 0;
  /* Hidden until hover. This used to be the other way round — drawn by
     default and retracting on hover — but the legal links read as permanently
     underlined, so the rule now sweeps in from the left on hover instead. */
  transform: scaleX(0);
  transition: transform 0.4s ease-out;
  transform-origin: right;
}
[init-underline]:hover:after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Same underline for the nav links, which wrap their label in .nav-link_text
   so the rule tracks the text rather than the whole hit area. `bottom` is the
   shared offset above — as authored it was `0`, which dropped the rule to the
   floor of the line box instead of sitting under the glyphs. */
.nav-link_text {
  position: relative;
}
.nav-link_text:after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background: currentColor;
  bottom: calc((100% - 1.3em) / 2 - 1px);
  left: 0;
  transition: transform 0.4s ease-out;
  transform: scaleX(0);
  transform-origin: right;
}
.nav-link:hover .nav-link_text:after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (max-width: 991px) {
  /* Hamburger reads oversized next to the mobile nav; 3rem -> 2rem. */
  .underlay-nav__toggle-icon {
    width: 2rem;
  }
}

/* Stage tap targets sit over the segmented progress bar. Hidden by default —
   only the mobile bar is segmented, and on desktop the stage labels below the
   bar already do this job. */
.progress-layout {
  position: relative;
}
.progress-hits {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  gap: 6px; /* matches --seg-gap on .progress-wrap */
}
.progress-hit {
  flex: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.progress-hit:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Terms checkbox: white with a light grey border until it's ticked, then
   solid black with the white check showing. Driven through the Scaffold radio
   custom properties, which .radio_circle_wrap already reads for its border
   and background, so both states stay in one place. */
.hackathon-form .radio_label.checkbox {
  --_radios---border: #d9d9d9;
  --_radios---bg: #fff;
  --_radios---text: #fff;
}
.hackathon-form .radio_label.checkbox:has(.radio_input:checked) {
  --_radios---border: #111;
  --_radios---bg: #111;
}

/* ===== Mobile refinements ===== */
@media (max-width: 991px) {
  /* FAQ rows are space-between, so a question that wraps to the full column
     width ends up touching the +/- toggle. Guarantee a gap between them. */
  #faqs [toggle] {
    gap: 24px;
  }

  /* "Move ideas into practice" shares a grid row with the legal links, which
     are the taller of the two. Both .layouts stretch to the row height, but
     the copy sat at the top of its box, leaving its last line ~39px above
     "privacy policy". Drop it to the foot of the row so the two bottom edges
     line up. */
  .footer-bar.grid .footer-tagline {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* "How to get involved" cards become a horizontal snap slider: each card is
     90% of the container so the next one peeks in and reads as swipeable.
     .layout's grid-column attributes are inert once the parent is a flex row. */
  /* Scaffold ships `.grid.container { overflow: visible !important }` in the
     page's inline styles, which loads AFTER this file — so matching its
     !important isn't enough, the id is needed to outrank it. */
  #get-involved .grid.gi-cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Break out of .container to the full viewport so the next card bleeds off
       the screen edge instead of being clipped at the container's. The padding
       puts the first card back on the container's own left edge, and
       scroll-padding keeps every snapped card there too. margin-tablet and
       margin-mobile are both 20px, so one value covers the whole range. */
    /* !important because Scaffold's inline styles set `.container { width:
       calc(100% - margin*2) !important }` at every breakpoint. */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: var(--_site-variables---margin-mobile);
    padding-right: var(--_site-variables---margin-mobile);
    scroll-padding-left: var(--_site-variables---margin-mobile);
  }
  #get-involved .grid.gi-cards::-webkit-scrollbar {
    display: none;
  }
  #get-involved .grid.gi-cards > .card.layout {
    flex: 0 0 90%;
    max-width: 90%;
    scroll-snap-align: start;
  }

  /* "What to expect" progress bar reads as four discrete segments, one per
     stage. A repeating mask punches the gaps out of the track AND the fill in
     one go, so the GSAP scaleX sweep still drives it untouched. */
  .progress-wrap {
    --seg-gap: 6px;
    height: 2px;
    -webkit-mask-image: repeating-linear-gradient(
      to right,
      #000 0 calc(25% - var(--seg-gap)),
      transparent calc(25% - var(--seg-gap)) 25%
    );
    mask-image: repeating-linear-gradient(
      to right,
      #000 0 calc(25% - var(--seg-gap)),
      transparent calc(25% - var(--seg-gap)) 25%
    );
  }

  /* One tap target per segment, laid over the bar by initProgressShowcase.
     The bar itself is 2px, far too thin to hit, so the strip is 32px tall and
     centred on it. Desktop keeps using the stage labels instead. */
  .progress-hits {
    display: flex;
  }

  /* ---- Application form modal ---- */

  /* The radio "button" cards use a clamp that scales their padding off the
     1920px design width, which collapses to ~5px on a phone. Pin a real value. */
  .hackathon-form .radio_label[data-wf--input---radio--variant="button"] {
    --_radios---btn-y-padding: 1.25rem;
    --_radios---btn-x-padding: 1.25rem;
  }

  /* Fields are authored in pairs (Name/Surname, Email/Phone …) on one row.
     At 375px that leaves each about 134px, so real values and the longer
     placeholders get cut off mid-word. Stack them. DOM order is untouched —
     form.js identifies profile fields by their order within the step. */
  .hackathon-form .flex:has(> .field-wrap) {
    flex-direction: column;
    align-items: stretch;
  }

  /* Every field label carries dmb="8", which is a clamp off the 1920px design
     width and lands at ~1.5px on a phone — the label ends up sitting on top of
     its own input. */
  .hackathon-form .field-wrap-name {
    margin-bottom: 8px;
  }

  /* "← Back" is absolutely positioned top-left, which on a phone lands it on
     top of the step heading. Put it back in flow above the heading instead.
     max-content keeps the button hugging its label — left in flow at full
     width it would run under the close icon in the top-right corner. */
  .hackathon-form .form-back {
    position: relative;
    inset: auto;
    width: max-content;
    margin-top: 0;
    margin-bottom: 24px;
  }
}