/* ═══════════════════════════════════════════
   GLOBAL / RESET
═══════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}
:root {
  /* SITE */
  --gutter: clamp(1 * 1rem, ((1 - ((2 - 1) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((2 - 1) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 2 * 1rem);
  --_layout---site--gutter: var(--gutter);
  --site-padding: clamp(1 * 1rem, ((1 - ((3 - 1) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((3 - 1) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 3 * 1rem);
  --column-count: 12;
  --column-width: calc((min(var(--max-width--main), 100% - var(--site--margin) * 2) - (var(--site--gutter) * (var(--site--column-count) - 1))) / var(--site--column-count))
  --max-width--small: 50rem;
  --max-width--main: calc(90 * 1rem);
  --full: 100%;

  /* BORDER */
  --border-width--main: 0.0625rem;
  --border-radius-main: var(--_spacing---space--1-5);
  --border-radius-round: 1000px;
  --gallery-max-width: 52rem;

 /* SECTION */
 --_layout---section--s-min: 4;
 --_layout---section--s-max: 6;
 --_layout---section--section-padding: clamp(var(--_layout---section--s-min) * 1rem, ((var(--_layout---section--s-min) - ((var(--_layout---section--s-max) - var(--_layout---section--s-min)) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((var(--_layout---section--s-max) - var(--_layout---section--s-min)) / (var(--fluid-max) - var(--fluid-min))) * 100vw), var(--_layout---section--s-max) * 1rem);
 --_layout---section--page-top-min: 2;
 --_layout---section--page-top-max: 12;
 --section-padding-page-top: clamp(var(--_layout---section--page-top-min) * 1rem, ((var(--_layout---section--page-top-min) - ((var(--_layout---section--page-top-max) - var(--_layout---section--page-top-min)) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((var(--_layout---section--page-top-max) - var(--_layout---section--page-top-min)) / (var(--fluid-max) - var(--fluid-min))) * 100vw), var(--_layout---section--page-top-max) * 1rem);

 /* COLORS */
  --dark: hsl(223, 17%, 8%);
  --muted: hsl(228, 10%, 51%);
  --cream: hsl(0, 5%, 97%);
  --white: hsl(0, 0%, 100%);
  --light-grey: hsl(0, 0%, 80%);
  --off-white: hsl(0, 0%, 99%);
 /* Blue swatches */
  --blue--500: #0c30a6;
  --blue--400: color-mix(in srgb, var(--blue--500), white 20%);
  --blue--300: color-mix(in srgb, var(--blue--500), white 40%);
  --blue--200: color-mix(in srgb, var(--blue--500), white 60%);
  --blue--100: color-mix(in srgb, var(--blue--500), white 80%);
  --blue--50: color-mix(in srgb, var(--blue--500), white 90%);
  --blue--600: color-mix(in srgb, var(--blue--500), black 20%);
  --blue--700: color-mix(in srgb, var(--blue--500), black 40%);
  --blue--800: color-mix(in srgb, var(--blue--500), black 60%);
  --blue--900: color-mix(in srgb, var(--blue--500), black 80%);
 /* Orange swatches */
  --orange--500: #ff751a;
  --orange--400: color-mix(in srgb, var(--orange--500), white 20%);
  --orange--300: color-mix(in srgb, var(--orange--500), white 40%);
  --orange--200: color-mix(in srgb, var(--orange--500), white 60%);
  --orange--100: color-mix(in srgb, var(--orange--500), white 80%);
  --orange--50: color-mix(in srgb, var(--orange--500), white 90%);
  --orange--600: color-mix(in srgb, var(--orange--500), black 20%);
  --orange--700: color-mix(in srgb, var(--orange--500), black 40%);
  --orange--800: color-mix(in srgb, var(--orange--500), black 60%);
  --orange--900: color-mix(in srgb, var(--orange--500), black 80%);

 /* SPACING */
  --fluid-min: 20;
  --fluid-max: 90;
  --_spacing---space--0-25: 0.25rem;
  --_spacing---space--0-5: clamp(0.375 * 1rem, ((0.375 - ((0.5 - 0.375) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((0.5 - 0.375) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 0.5 * 1rem);
  --_spacing---space--0-75: clamp(0.625 * 1rem, ((0.625 - ((0.75 - 0.625) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((0.75 - 0.625) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 0.75 * 1rem);
  --_spacing---space--1: clamp(0.875 * 1rem, ((0.875 - ((1 - 0.875) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((1 - 0.875) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 1 * 1rem);
  --_spacing---space--1-25: clamp(1 * 1rem, ((1 - ((1.25 - 1) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((1.25 - 1) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 1.25 * 1rem);
  --_spacing---space--1-5: clamp(1.25 * 1rem, ((1.25 - ((1.5 - 1.25) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((1.5 - 1.25) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 1.5 * 1rem);
  --_spacing---space--2: clamp(1.75 * 1rem, ((1.75 - ((2 - 1.75) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((2 - 1.75) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 2 * 1rem);
  --_spacing---space--2-5: clamp(2 * 1rem, ((2 - ((2.5 - 2) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((2.5 - 2) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 2.5 * 1rem);
  --_spacing---space--3: clamp(2.25 * 1rem, ((2.25 - ((3 - 2.25) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((3 - 2.25) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 3 * 1rem);
  --_spacing---space--3-5: clamp(2.75 * 1rem, ((2.75 - ((3.5 - 2.75) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((3.5 - 2.75) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 3.5 * 1rem);
  --_spacing---space--4: clamp(2.5 * 1rem, ((2.5 - ((4 - 2.5) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((4 - 2.5) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 4 * 1rem);
  --_spacing---space--5: clamp(3 * 1rem, ((3 - ((5 - 3) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((5 - 3) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 5 * 1rem);
  --_spacing---space--6: clamp(4 * 1rem, ((4 - ((6 - 4) / (var(--fluid-max) - var(--fluid-min)) * var(--fluid-min))) * 1rem + ((6 - 4) / (var(--fluid-max) - var(--fluid-min))) * 100vw), 6 * 1rem);

 /* TYPOGRAHY */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --_layout---fluid--min: 20;
  --_layout---fluid--max: 90;
  --_font---primary: var(--serif);
  --_font---secondary: var(--sans);

  --_typography---h1--font-size-min-rem: 2.8;
  --_typography---h1--font-size-max-rem: 5.5;
  --_typography---h1--font-size: clamp(var(--_typography---h1--font-size-min-rem) * 1rem, ((var(--_typography---h1--font-size-min-rem) - ((var(--_typography---h1--font-size-max-rem) - var(--_typography---h1--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min)) * var(--_layout---fluid--min))) * 1rem + ((var(--_typography---h1--font-size-max-rem) - var(--_typography---h1--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min))) * 100vw), var(--_typography---h1--font-size-max-rem) * 1rem);

  --_typography---h2--font-size-min-rem: 2.2;
  --_typography---h2--font-size-max-rem: 4;
  --_typography---h2--font-size: clamp(var(--_typography---h2--font-size-min-rem) * 1rem, ((var(--_typography---h2--font-size-min-rem) - ((var(--_typography---h2--font-size-max-rem) - var(--_typography---h2--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min)) * var(--_layout---fluid--min))) * 1rem + ((var(--_typography---h2--font-size-max-rem) - var(--_typography---h2--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min))) * 100vw), var(--_typography---h2--font-size-max-rem) * 1rem);

  --_typography---h3--font-size-min-rem: 1.8;
  --_typography---h3--font-size-max-rem: 3;
  --_typography---h3--font-size: clamp(var(--_typography---h3--font-size-min-rem) * 1rem, ((var(--_typography---h3--font-size-min-rem) - ((var(--_typography---h3--font-size-max-rem) - var(--_typography---h3--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min)) * var(--_layout---fluid--min))) * 1rem + ((var(--_typography---h3--font-size-max-rem) - var(--_typography---h3--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min))) * 100vw), var(--_typography---h3--font-size-max-rem) * 1rem);

  --_typography---h4--font-size-min-rem: 1.35;
  --_typography---h4--font-size-max-rem: 2;
  --_typography---h4--font-size: clamp(var(--_typography---h4--font-size-min-rem) * 1rem, ((var(--_typography---h4--font-size-min-rem) - ((var(--_typography---h4--font-size-max-rem) - var(--_typography---h4--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min)) * var(--_layout---fluid--min))) * 1rem + ((var(--_typography---h4--font-size-max-rem) - var(--_typography---h4--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min))) * 100vw), var(--_typography---h4--font-size-max-rem) * 1rem);

  --_typography---h5--font-size-min-rem: 1.25;
  --_typography---h5--font-size-max-rem: 1.75;
  --_typography---h5--font-size: clamp(var(--_typography---h5--font-size-min-rem) * 1rem, ((var(--_typography---h5--font-size-min-rem) - ((var(--_typography---h5--font-size-max-rem) - var(--_typography---h5--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min)) * var(--_layout---fluid--min))) * 1rem + ((var(--_typography---h5--font-size-max-rem) - var(--_typography---h5--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min))) * 100vw), var(--_typography---h5--font-size-max-rem) * 1rem);

  --_typography---h6--font-size-min-rem: 1.1;
  --_typography---h6--font-size-max-rem: 1.375;
  --_typography---h6--font-size: clamp(var(--_typography---h6--font-size-min-rem) * 1rem, ((var(--_typography---h6--font-size-min-rem) - ((var(--_typography---h6--font-size-max-rem) - var(--_typography---h6--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min)) * var(--_layout---fluid--min))) * 1rem + ((var(--_typography---h6--font-size-max-rem) - var(--_typography---h6--font-size-min-rem)) / (var(--_layout---fluid--max) - var(--_layout---fluid--min))) * 100vw), var(--_typography---h6--font-size-max-rem) * 1rem);

  /* THEMES - base mode */
  --background: var(--cream);
  --primary: var(--blue--500);
  --secondary: var(--orange--500);
  --text: var(--dark);
  --text-secondary: var(--muted);
  --heading-accent: var(--blue--500);
}
.theme-blue {
  --background: var(--blue--600);
  --primary: var(--off-white);
  --secondary: var(--orange--500);
  --text: var(--off-white);
  --text-secondary: var(--blue--100);
  --heading-accent: var(--white);
}
.theme-blue em {
  color: var(--blue--100);
}
.theme-off-white {
  --background: var(--off-white);
  --primary: var(--blue--500);
  --secondary: var(--orange--500);
  --text: var(--dark);
  --text-secondary: var(--muted);
  --heading-accent: var(--blue--500);
}
.theme-dark {
  --background: var(--blue--800);
  --primary: var(--blue--500);
  --secondary: var(--orange--500);
  --text: var(--off-white);
  --text-secondary: var(--muted);
  --heading-accent: var(--blue--500);
}
.theme-orange {
  --background: var(--orange--500);
  --primary: var(--white);
  --secondary: var(--blue--500);
  --text: var(--off-white);
  --text-secondary: var(--muted);
  --heading-accent: var(--blue--500);
}

li {
  list-style: "";
}
html {
  scroll-behavior: smooth;
  background-color: var(--background);
}
body {
	-webkit-font-smoothing: antialiased;
  font-family: var(--sans);
  font-size: inherit;
  line-height: 1.5;
  background-color: var(--background);
  color: var(--text);
  display: block;
  margin: 0px;
}
.page-wrap {
  overflow-x: clip;
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════ */
p, .text-main {
  color: currentColor;
  max-width: 50ch;
  text-wrap: pretty;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 300;
  margin: 0px;
  letter-spacing: 0.04em;
}
.text-small {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.text-large {
  font-size: 1.125rem;
  font-weight: 500;
}
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  max-width: 45ch; margin-top: 0px;
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--serif);
  font-size: var(--_typography---h1--font-size);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
h2, .h2 {
  font-family: var(--serif);
  font-size: var(--_typography---h2--font-size);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
h3, .h3 {
  font-family: var(--serif);
  font-size: var(--_typography---h3--font-size);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 0.3em;
}
h4, .h4 {
  font-family: var(--serif);
  font-size: var(--_typography---h4--font-size);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
h5, .h5 {
  font-family: var(--serif);
  font-size: var(--_typography---h5--font-size);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0.2em;
}
h6, .h6 {
  font-family: var(--serif);
  font-size: var(--_typography---h6--font-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0em;
  margin-bottom: 0.2em;
}
h1 em, .h1 em,
h2 em, .h2 em,
h3 em, .h3 em,
h4 em, .h4 em {
  color: var(--primary);
}

/* font trim */
:is([class*="primary-trim"], h1, h2, h3, h4, h5, h6, p, blockquote) {
	display: flow-root;
}
:is([class*="primary-trim"], h1, h2, h3, h4, h5, h6, p, blockquote)::before {
	content: "";
	display: table;
	margin-bottom: calc(-0.5lh + 0.41em);
}
:is([class*="primary-trim"], h1, h2, h3, h4, h5, h6, p, blockquote)::after {
	content: "";
	display: table;
	margin-bottom: calc(-0.5lh + 0.32em);
}
:is([class*="secondary-trim"], .h1, .h2, .h3, .h4, .h5, .h6, p, blockquote) {
	display: flow-root;
}
:is([class*="secondary-trim"], .h1, .h2, .h3, .h4, .h5, .h6, p, blockquote)::before {
	content: "";
	display: table;
	margin-bottom: calc(-0.5lh + 0.36em);
}
:is([class*="secondary-trim"], .h1, .h2, .h3, .h4, .h5, .h6, p, blockquote)::after {
	content: "";
	display: table;
	margin-bottom: calc(-0.5lh + 0.34em);
}

.no-margin {
  margin: 0px;
}
/* ═══════════════════════════════════════════
   BUTTONS & LINKS
═══════════════════════════════════════════ */
a {
  text-decoration: none;
  color: currentcolor;
  letter-spacing: 0.03em;
}
button {
  background-color: unset;
  padding: unset;
  text-align: inherit;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
button:not(:disabled) {
  cursor: pointer;
}
.btn-holder {
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  gap: var(--_spacing---space--1);
  flex-wrap: wrap;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  background-color: var(--primary);
  color: var(--background);
  font-size: 0.875rem;
  font-family: var(--_font---secondary);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-transform: uppercase;
  padding-top: var(--_spacing---space--1-25);
  padding-bottom: var(--_spacing---space--1-25);
  padding-left: var(--_spacing---space--2);
  padding-right: var(--_spacing---space--2);
  border-radius: var(--border-radius-round);
  border: var(--border-width--main) solid currentcolor;
  transition: all 250ms ease-in-out;
}
.button.text-small {
  font-size: 0.75rem;
  padding-top: var(--_spacing---space--1);
  padding-bottom: var(--_spacing---space--1);
  padding-left: var(--_spacing---space--1-5);
  padding-right: var(--_spacing---space--1-5);
}
.button.orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--orange--500);
  border-color: var(--orange--500);
  color: var(--off-white);
  cursor: pointer;
  transition: all 250ms ease-in-out;
}
.button.border {
  background-color: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.button:hover,
.button.border:hover {
  background-color: var(--orange--500);
  color: var(--white);
  border: var(--border-width--main) solid var(--orange--500);
}
.button.orange:hover {
  color: var(--orange--500);
  background-color: var(--off-white);
  border-color: var(--orange--500);
}
.button.off {
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
section, .section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--full);
  padding-top: var(--_layout---section--section-padding);
  padding-bottom: var(--_layout---section--section-padding);
  position: relative;
  background-color: var(--background);
  color: var(--text);
}
.section-container {
  max-width: var(--max-width--main);
  width: calc(100% - var(--site-padding) * 2);
  margin-inline: auto;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  position: relative;
  overflow: visible;
  gap: var(--_spacing---space--5);
}
.container {
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  container-type: inline-size;
  gap: inherit;
}
.sticky {
  position: var(--_is-multi-col, sticky);
  top: 8rem;
  align-self: start; /* don't stretch to grid height — sticky needs room to scroll */
  container-type: normal;
}
.divider {
  width: 100%;
  height: var(--border-width--main);
  background-color: var(--light-grey)
}
.bottom-margin.small {
  margin-bottom: var(--_spacing---space--1-5);
}
.auto-top {
  margin-top: auto;
}
video {
	width: 100%;
	object-fit: cover;
}
svg {
	max-width: 100%;
}
.u-heading > *,
.u-text > * {
	width: 100%;
	max-width: inherit !important;
  margin-inline: 0 !important;
	margin-top: 0 !important;
}
/* Background Slot Children */
.u-background-slot > * {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}
/* Alignment */
.u-alignment-inherit > * {
	text-align: inherit;
	justify-content: inherit;
	align-items: inherit;
}
/* Hide */
.u-hide-if-empty:empty,
.u-hide-if-empty:has(> *):not(:has(> :not(.w-condition-invisible))),
.u-hide-if-empty-cms:not(:has(.w-dyn-item)) {
	display: none !important;
}
/* Section spacer */
.u-section:has(> .u-section-spacer) {
	padding-top: 0;
  padding-bottom: 0;
}
.bottom-margin {
  margin-bottom: var(--_spacing---space--4) !important;
}
/* ═══════════════════════════════════════════
   U-GRID (base)
═══════════════════════════════════════════ */
.u-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), 1fr);
  width: 100%;
  overflow: visible;
  position: relative;
  --_is-multi-col: initial;
}
.u-grid.stretch {
  height: 100%;
  grid-auto-rows: 1fr;
}
.u-grid.stretch > * {
  height: 100%;
}

/* ═══════════════════════════════════════════
   NAV
═══════════════════════════════════════════ */
header {
  width: 100vw;
  position: fixed;
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  color: var(--primary);
  z-index: 999;
  transition: background-color 250ms ease, color 250ms ease;
}
header.over-hero {
  background-color: transparent;
  color: var(--blue--500);
  border-bottom: var(--border-width--main) solid currentColor;
}
header.over-hero .nav-link.fill {
  background-color: var(--primary);
  color: var(--off-white);
}
header.over-hero .nav-link.fill:hover {
  background-color: var(--orange--500);
  color: var(--off-white);
}
header.over-hero .menu-button__bar {
  background-color: var(--blue--500);
}
.nav-container {
  width: calc(100% - 2 * var(--site-padding));
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width--main);
  position: relative;
}
nav {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: var(--_spacing---space--0-75);
  padding-bottom: var(--_spacing---space--0-75);
}
.nav-links-wrap {
  display: flex;
  flex-direction: row;
  margin-left: auto;
  gap: inehrit;
}
.nav-link {
  color: currentColor;
  padding-top: var(--_spacing---space--0-75);
  padding-bottom: var(--_spacing---space--0-75);
  padding-left: var(--_spacing---space--1-25);
  padding-right: var(--_spacing---space--1-25);
  border-radius: var(--border-radius-round);
  transition: all 250ms ease-in-out;
}
.nav-link:hover {
  color: var(--orange--500);
  background-color: var(--orange--50);
}
.nav-link.fill {
  background-color: var(--primary);
  color: var(--background);
}
.nav-link.fill:hover {
  background-color: var(--orange--500);
  color: var(--background);
}
.nav-logo {
  color: currentColor;
  display: flex;
  width: 10rem;
  height: 100%;
  position: relative;
  z-index: 1000;
}
.menu-button {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: currentColor;
  position: relative;
  z-index: 1000;
}
.menu-button__bar {
  display: block;
  width: 1.5rem;
  height: 0.125rem;
  background-color: var(--primary);
  border-radius: 2px;
  transition: transform 250ms ease, opacity 250ms ease;
}
.menu-button[aria-expanded="true"] .menu-button__bar:nth-child(1) {
  transform: translateY(0.25rem) rotate(45deg);
}
.menu-button[aria-expanded="true"] .menu-button__bar:nth-child(2) {
  transform: translateY(-0.25rem) rotate(-45deg);
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background-color: var(--off-white);
  color: var(--blue--500);
  transform: translateY(-100%);
  transition: transform 350ms ease-in-out;
  z-index: 998;
}
.mobile-nav.open {
  transform: translateY(0);
}
.mobile-nav .nav-links-wrap {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  gap: var(--_spacing---space--1-25);
  padding: 0;
  margin: 0;
}
.mobile-nav .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  font-size: 1.25rem;
}
body:has(.mobile-nav.open) .nav-logo {
  color: var(--blue--500);
}
body:has(.mobile-nav.open) .menu-button__bar {
  background-color: var(--blue--500);
}
body:has(.mobile-nav.open) .nav-link.fill {
  color: var(--off-white);
  background-color: var(--blue--500);
}

/* ═══════════════════════════════════════════
   UTILITY
═══════════════════════════════════════════ */
.u-justify-center {
  align-items: center;
}
.u-txt-blue {
  color: var(--blue--500);
}
/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
#hero {
  min-height: 100vh;
  color: var(--primary);
  justify-content: flex-end;
  padding-top: var(--section-padding-page-top);
  padding-bottom: var(--_layout---section--section-padding);
  background-image: linear-gradient(color-mix(in srgb, var(--off-white) 70%, transparent), color-mix(in srgb, var(--off-white) 70%, transparent)), url('photos/bridge.webp'); 
  background-position: center; 
  background-size: cover; 
  background-repeat: no-repeat; 
}
.hero-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4.5 / 3;
  grid-column: span 2;
  object-fit: cover;
  border-radius: var(--border-radius-main);
}
#hero .h2 {
  font-weight: 800;
}
#hero .u-grid {
  align-items: flex-end;
}
#hero .section-container {
  justify-content: flex-end;
}
/* ═══════════════════════════════════════════
   FLAGSHIP PROGRAMS (FOCUS)
═══════════════════════════════════════════ */
.container.focus {
  padding: var(--_spacing---space--2-5);
  border-radius: var(--border-radius-main);
  border: var(--border-width--main) solid var(--blue--500);
  color: var(--blue--500);
  background-color: var(--white);
  transition: all 250ms ease-in-out;
}
.container.focus:hover {
  color: var(--blue--500);
  background-color: var(--blue--50);
}
@media (min-width: 60em) {
  .margin-focus {
    min-height: 7ch;
  }
  .container.focus .container {
    min-height: 11ch;
  }
}
#focus .text-small {
  color: var(--blue--300);
}
#focus p {
  text-wrap: wrap;
}
/* ═══════════════════════════════════════════
   GET INVOLVED
═══════════════════════════════════════════ */
.container.involved {
  padding: var(--_spacing---space--3);
  color: var(--primary);
  border-radius: var(--border-radius-main);
  border: var(--border-width--main) solid var(--primary);
}
.container.involved.orange {
  padding: var(--_spacing---space--3);
  color: var(--secondary);
  border-radius: var(--border-radius-main);
  border: var(--border-width--main) solid var(--secondary);
}
#get-involved h3 {
  min-height: 4ch;
}
.container.involved .text-small {
  padding-left: var(--_spacing---space--1-25);
  padding-right: var(--_spacing---space--1-25);
  padding-top: var(--_spacing---space--0-75);
  padding-bottom: var(--_spacing---space--0-75);
  border-radius: var(--border-radius-round);
  background-color: var(--blue--50);
  color: var(--blue--500);
  width: fit-content;
}
.container.involved.orange .text-small {
  background-color: var(--orange--50);
  color: var(--orange--500);
}
.container.involved.orange .button {
  background-color: var(--secondary);
  color: var(--off-white);
  border: var(--border-width--main) solid var(--secondary);
}
.container.involved.orange .button:hover {
  background-color: var(--background);
  color: var(--secondary);
  border: var(--border-width--main) solid var(--secondary);
}

/* ═══════════════════════════════════════════
   MISSION
═══════════════════════════════════════════ */
.container.mission {
  background-color: var(--blue--500);
  padding: var(--_spacing---space--2-5);
  border: var(--border-width--main) solid var(--blue--300);
  border-radius: var(--border-radius-main);
  transition: all 350ms ease-in-out;
}
.container.mission:hover {
  background-color: var(--blue--600);
}
.container.mission .text-small {
  padding-left: var(--_spacing---space--1-25);
  padding-right: var(--_spacing---space--1-25);
  padding-top: var(--_spacing---space--0-75);
  padding-bottom: var(--_spacing---space--0-75);
  border-radius: var(--border-radius-round);
  background-color: var(--blue--400);
  color: var(--blue--100);
  width: fit-content;
}
@media (min-width: 60em) {
  .container.mission h3 {
    min-height: 7ch;
  }
}
/* Core principles */
.principle-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1 / 1;
  border-radius: 100px;
  border: var(--border-width--main) solid currentcolor;
  color: currentcolor;
}
#principles {
  color: var(--off-white);
  background-color: var(--orange--500);
  border-radius: var(--border-radius-main);
  padding: var(--_spacing---space--2-5);
  font-weight: 500;
}
#goals {
  color: var(--blue--500);
  background-color: var(--off-white);
  border-radius: var(--border-radius-main);
  padding: var(--_spacing---space--2-5);
  font-weight: 500;
}
#principles .container[data-direction="horizontal"] {
  align-items: center;
}
#principles .text-large {
  font-weight: 500;
}
/* ═══════════════════════════════════════════
   PROGRAMS
═══════════════════════════════════════════ */
.program-card {
  border-radius: var(--border-radius-main);
  border: var(--border-width--main) solid var(--primary);
  padding: var(--_spacing---space--2-5);
}
.program-card .btn-holder {
  margin-top: auto;
}
.heading-holder {
  margin-bottom: var(--_spacing---space--2);
}
.container.program {
  padding: var(--_spacing---space--4);
  background-color: var(--background);
  color: var(--text);
  border-radius: var(--border-radius-main);
}
.program-img {
  height: 100%;
}
.photo-cell {
  width: 100%;
  min-height: 6rem;
  max-height: 12rem;
  background-color: var(--dark);
  border-radius: var(--border-radius-main);
  overflow: hidden;
}
.photo-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Food for refugees */
.photo-cell--food {
  max-height: none;
  aspect-ratio: 2 / 3;
  cursor: pointer;
  transition: opacity 200ms ease-in-out;
}
.photo-cell--food:hover {
  opacity: 0.85;
}
/* Video embed */
.video-embed {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-main);
  overflow: hidden;
}
.video-embed.first {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius-main);
  overflow: hidden;
}
.video-embed iframe,
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
  display: block;
}
#programs h2 {
  margin-bottom: var(--_spacing---space--4);
}
/* ═══════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════ */
.container.about {
  padding-top: var(--_spacing---space--1-5);
  padding-bottom: var(--_spacing---space--1-5);
  border-top: var(--border-width--main) solid var(--light-grey);
}
.container.about sup { color: var(--secondary); }
.container.about p.h3 { color: var(--primary); }
.quote {
  color: var(--secondary);
  background-color: var(--orange--50);
  padding: var(--_spacing---space--2-5);
  width: 100%;
  border-radius: var(--border-radius-main);
  border-left: calc(3 * var(--border-width--main)) solid var(--orange--300);
}
.about-img {
  max-height: 20rem;
  object-fit: cover;
  border-radius: var(--border-radius-main);
  justify-self: center;
}
#about .u-grid {
  align-items: center;
  justify-items: center;
}
/* About image stack */
.about-stack {
  display: grid;
  width: 100%;
  max-width: 28rem;
  cursor: pointer;
  justify-self: center;
}
.about-stack:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}
.about-stack__img {
  grid-area: 1 / 1;
  place-self: center;
  width: 100%;
  height: auto;
  max-height: 35rem;
  object-fit: cover;
  border-radius: var(--border-radius-main);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  transition: transform 400ms ease, opacity 400ms ease;
  transform-origin: center center;
}
.about-stack__img.is-depth-0 {
  transform: rotate(0deg);
  z-index: 9;
  opacity: 1;
}
.about-stack__img.is-depth-1 {
  transform: rotate(-3deg);
  z-index: 8;
  opacity: 0.75;
}
.about-stack__img.is-depth-2 {
  transform: rotate(4deg);
  z-index: 7;
  opacity: 0.5625;
}
.about-stack__img.is-depth-3 {
  transform: rotate(-2deg);
  z-index: 6;
  opacity: 0.4219;
}
.about-stack__img.is-depth-4 {
  transform: rotate(3deg);
  z-index: 5;
  opacity: 0.3164;
}
.about-stack__img.is-depth-5 {
  transform: rotate(-4deg);
  z-index: 4;
  opacity: 0.2373;
}
.about-stack__img.is-depth-6 {
  transform: rotate(2deg);
  z-index: 3;
  opacity: 0.178;
}
.about-stack__img.is-depth-7 {
  transform: rotate(-3deg);
  z-index: 2;
  opacity: 0.1335;
}
.about-stack__img.is-depth-8 {
  transform: rotate(4deg);
  z-index: 1;
  opacity: 0.1001;
}
/* ═══════════════════════════════════════════
   TEAM
═══════════════════════════════════════════ */
.container.team {
  padding: var(--_spacing---space--2);
  background: var(--white);
  border-radius: var(--border-radius-main);
  color: var(--primary);
  border: var(--border-width--main) solid var(--primary);
}
.container.team.advisor {
  color: var(--secondary);
  border: var(--border-width--main) solid var(--secondary);
}
#team .text-small {
  padding-left: var(--_spacing---space--1-25);
  padding-right: var(--_spacing---space--1-25);
  padding-top: var(--_spacing---space--0-75);
  padding-bottom: var(--_spacing---space--0-75);
  border-radius: var(--border-radius-round);
  background-color: var(--blue--50);
  color: var(--blue--500);
  width: fit-content;
}
.container.team.advisor .text-small {
  background-color: var(--orange--50) !important;
  color: var(--orange--500) !important;
}
.team-photo {
  width: 100%;
  max-width: 15rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: var(--border-radius-main);
  object-fit: cover;
  object-position: center top;
}
.advisor-bio {
  color: var(--orange--500);
  font-weight: 415;
}
/* ═══════════════════════════════════════════
   HIGHLIGHTS
═══════════════════════════════════════════ */
.container.highlight-group {
  padding: var(--_spacing---space--4);
  border: var(--border-width--main) solid var(--blue--200);
  border-radius: var(--border-radius-main);
}

/* ═══════════════════════════════════════════
   GALLERY
═══════════════════════════════════════════ */
.gallery-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease-in-out;
}
.gallery-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}
.gallery-modal {
  background: var(--white);
  border-radius: var(--border-radius-main);
  max-width: var(--max-width--main);
  width: calc(100% - var(--site-padding) * 2);
  max-width: 90rem;
  max-height: 90dvh;
  overflow: hidden;
  padding: var(--_spacing---space--1);
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---space--1);
  transform: translateY(1rem);
  transition: transform 300ms ease-in-out;
}
.gallery-overlay.is-open .gallery-modal {
  transform: translateY(0);
}
.gallery-scroll {
  overflow-y: auto;
  border-radius: var(--border-radius-main);
  flex: 1;
  min-height: 0;
  margin-right: calc(1.25rem - 3px);
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}
.gallery-scroll::-webkit-scrollbar {
  width: 6px;
}
.gallery-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.gallery-scroll::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 3px;
}
.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_spacing---space--2);
}
.gallery-title {
  font-weight: 500;
  color: var(--primary);
}
.gallery-close {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: var(--border-width--main) solid currentcolor;
  border-radius: var(--border-radius-round);
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  transition: opacity 250ms ease-in-out;
}
.gallery-close:hover { opacity: 0.65; }
.gallery-grid {
  columns: 2;
  column-gap: var(--_spacing---space--0-5);
}
.gallery-grid .photo-cell {
  break-inside: avoid;
  margin-bottom: var(--_spacing---space--0-5);
  min-height: auto;
  max-height: none;
  aspect-ratio: auto;
  background: none;
}
.gallery-grid .photo-cell img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--border-radius-main);
}
.gallery-grid .video-embed {
  break-inside: avoid;
  column-span: all;
  margin-bottom: var(--_spacing---space--0-5);
}

/* ═══════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--_spacing---space--4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease-in-out;
}
.lightbox-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}
.lightbox-img {
  max-width: 100%;
  max-height: 90dvh;
  object-fit: contain;
  border-radius: var(--border-radius-main);
}
.lightbox-close {
  position: absolute;
  top: var(--_spacing---space--2);
  right: var(--_spacing---space--2);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: none;
  border-radius: var(--border-radius-round);
  color: var(--dark);
  cursor: pointer;
  transition: opacity 250ms ease-in-out;
}
.lightbox-close:hover {
  opacity: 0.65;
}

/* ═══════════════════════════════════════════
   PARTNERS
═══════════════════════════════════════════ */
.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  font-weight: 500;
  color: var(--primary);
}
.partner-item img {
  max-width: 100%;
  max-height: 4rem;
  object-fit: contain;
}

/* ═══════════════════════════════════════════
   CONTACT FORM
═══════════════════════════════════════════ */
.contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-input {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--dark);
  background-color: var(--off-white);
  border: var(--border-width--main) solid var(--primary);
  border-radius: var(--border-radius-main);
  padding: var(--_spacing---space--1) var(--_spacing---space--1-5);
  outline: none;
  transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out;
}
.form-input::placeholder {
  color: var(--primary);
}
.form-input:focus {
  border-color: var(--primary);
  background-color: var(--blue--50);
  color: var(--dark);
}
.form-textarea {
  resize: none;
  flex: 1;
  min-height: 8rem;
}
.contact-form .button {
  border-radius: var(--border-radius-round);
  margin-top: var(--_spacing---space--2);
}
.form-feedback {
  display: none;
  margin-top: var(--_spacing---space--1-5);
  padding: var(--_spacing---space--1-5) var(--_spacing---space--2);
  border-radius: var(--border-radius-main);
  text-align: center;
}
.form-feedback.is-visible {
  display: block;
}
.form-feedback--success {
  color: var(--primary);
  background-color: var(--blue--50);
}
.form-feedback--error {
  color: white;
  background-color: var(--orange--500);
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--full);
  padding-top: var(--_layout---section--section-padding);
  padding-bottom: var(--_spacing---space--2);
  position: relative;
  color: var(--text);
  background-color: var(--blue--500);
}
.footer-col-title {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--_spacing---space--1);
}
footer a {
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 200ms ease-in-out;
}
footer a:hover {
  color: var(--orange--500);
}
.social-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--primary);
  display: block !important;
  transition: color 250ms ease-in-out;
}
.social-icon:hover {
  color: var(--orange--500);
}
.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--_spacing---space--1);
}
#footer-cotnainer {
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: space-between;
  gap: var(--_layout---site--gutter);
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;

}
/* ═══════════════════════════════════════════
   DATA ATTRIBUTE UTILITIES
═══════════════════════════════════════════ */
/* Direction modifiers */
.section-container[data-direction="horizontal"] {
  flex-flow: row;
  align-items: flex-start;
  justify-content: flex-end;
}
.section-container[data-direction="vertical"] {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
}
.container[data-direction="horizontal"] {
  flex-flow: row;
  align-items: flex-start;
}
.container[data-direction="vertical"] {
  flex-flow: column;
  align-items: flex-start;
}

/* Gap utilities */
[data-gap="none"] { gap: 0px;}
[data-gap="0-25"] { gap: 0.25rem; }
[data-gap="0-5"]  { gap: var(--_spacing---space--0-5); }
[data-gap="1"]    { gap: var(--_spacing---space--1); }
[data-gap="1-25"] { gap: var(--_spacing---space--1-25);}
[data-gap="1-5"]  { gap: var(--_spacing---space--1-5); }
[data-gap="2"]    { gap: var(--_spacing---space--2); }
[data-gap="2-5"]  { gap: var(--_spacing---space--2-5); }
[data-gap="3"]    { gap: var(--_spacing---space--3); }
[data-gap="3-5"]  { gap: var(--_spacing---space--3-5); }
[data-gap="4"]    { gap: var(--_spacing---space--4); }
[data-gap="6"]    { gap: var(--_spacing---space--6); }
[data-gap="base"] { gap: var(--_layout---site--gutter); }

/* U-grid column counts — Large (default) */
.u-grid[data-lg="1"]  { --cols: 1; --_is-multi-col: ; }
.u-grid[data-lg="2"]  { --cols: 2; }
.u-grid[data-lg="3"]  { --cols: 3; }
.u-grid[data-lg="4"]  { --cols: 4; }
.u-grid[data-lg="5"]  { --cols: 5; }
.u-grid[data-lg="6"]  { --cols: 6; }
.u-grid[data-lg="7"]  { --cols: 7; }
.u-grid[data-lg="8"]  { --cols: 8; }
.u-grid[data-lg="9"]  { --cols: 9; }
.u-grid[data-lg="10"] { --cols: 10; }
.u-grid[data-lg="11"] { --cols: 11; }
.u-grid[data-lg="12"] { --cols: 12; }

/* Button disabled */
[data-button]:has(button:disabled) {
	opacity: 0.5;
  pointer-events: none;
}

/* Number attributes */
[data-number="-1"]{--number: initial;}[data-number="0"]{--number: 0;}[data-number="1"]{--number:1}[data-number="2"]{--number:2}[data-number="3"]{--number:3}[data-number="4"]{--number:4}[data-number="5"]{--number:5}[data-number="6"]{--number:6}[data-number="7"]{--number:7}[data-number="8"]{--number:8}[data-number="9"]{--number:9}
[data-number="10"]{--number:10}[data-number="11"]{--number:11}[data-number="12"]{--number:12}[data-number="13"]{--number:13}[data-number="14"]{--number:14}[data-number="15"]{--number:15}[data-number="16"]{--number:16}[data-number="17"]{--number:17}[data-number="18"]{--number:18}[data-number="19"]{--number:19}
[data-number="20"]{--number:20}[data-number="21"]{--number:21}[data-number="22"]{--number:22}[data-number="23"]{--number:23}[data-number="24"]{--number:24}[data-number="25"]{--number:25}[data-number="26"]{--number:26}[data-number="27"]{--number:27}[data-number="28"]{--number:28}[data-number="29"]{--number:29}
[data-number="30"]{--number:30}[data-number="31"]{--number:31}[data-number="32"]{--number:32}[data-number="33"]{--number:33}[data-number="34"]{--number:34}[data-number="35"]{--number:35}[data-number="36"]{--number:36}[data-number="37"]{--number:37}[data-number="38"]{--number:38}[data-number="39"]{--number:39}
[data-number="40"]{--number:40}[data-number="41"]{--number:41}[data-number="42"]{--number:42}[data-number="43"]{--number:43}[data-number="44"]{--number:44}[data-number="45"]{--number:45}[data-number="46"]{--number:46}[data-number="47"]{--number:47}[data-number="48"]{--number:48}[data-number="49"]{--number:49}
[data-number="50"]{--number:50}[data-number="51"]{--number:51}[data-number="52"]{--number:52}[data-number="53"]{--number:53}[data-number="54"]{--number:54}[data-number="55"]{--number:55}[data-number="56"]{--number:56}[data-number="57"]{--number:57}[data-number="58"]{--number:58}[data-number="59"]{--number:59}
[data-number="60"]{--number:60}[data-number="61"]{--number:61}[data-number="62"]{--number:62}[data-number="63"]{--number:63}[data-number="64"]{--number:64}[data-number="65"]{--number:65}[data-number="66"]{--number:66}[data-number="67"]{--number:67}[data-number="68"]{--number:68}[data-number="69"]{--number:69}
[data-number="70"]{--number:70}[data-number="71"]{--number:71}[data-number="72"]{--number:72}[data-number="73"]{--number:73}[data-number="74"]{--number:74}[data-number="75"]{--number:75}[data-number="76"]{--number:76}[data-number="77"]{--number:77}[data-number="78"]{--number:78}[data-number="79"]{--number:79}
[data-number="80"]{--number:80}[data-number="81"]{--number:81}[data-number="82"]{--number:82}[data-number="83"]{--number:83}[data-number="84"]{--number:84}[data-number="85"]{--number:85}[data-number="86"]{--number:86}[data-number="87"]{--number:87}[data-number="88"]{--number:88}[data-number="89"]{--number:89}
[data-number="90"]{--number:90}[data-number="91"]{--number:91}[data-number="92"]{--number:92}[data-number="93"]{--number:93}[data-number="94"]{--number:94}[data-number="95"]{--number:95}[data-number="96"]{--number:96}[data-number="97"]{--number:97}[data-number="98"]{--number:98}[data-number="99"]{--number:99}[data-number="100"]{--number:100}

/* ═══════════════════════════════════════════
   MEDIA QUERIES
═══════════════════════════════════════════ */
/* U-grid — Medium (< 60em) */
@media (max-width: 60em) {
  .u-grid[data-md="1"]  { --cols: 1; --_is-multi-col: ; }
  .u-grid[data-md="2"]  { --cols: 2; }
  .u-grid[data-md="3"]  { --cols: 3; }
  .u-grid[data-md="4"]  { --cols: 4; }
  .u-grid[data-md="5"]  { --cols: 5; }
  .u-grid[data-md="6"]  { --cols: 6; }
  .u-grid[data-md="7"]  { --cols: 7; }
  .u-grid[data-md="8"]  { --cols: 8; }
  .u-grid[data-md="9"]  { --cols: 9; }
  .u-grid[data-md="10"] { --cols: 10; }
  .u-grid[data-md="11"] { --cols: 11; }
  .u-grid[data-md="12"] { --cols: 12; }
}
/* U-grid — Small (< 35em) */
@media (max-width: 35em) {
  .u-grid[data-sm="1"]  { --cols: 1; --_is-multi-col: ; }
  .u-grid[data-sm="2"]  { --cols: 2; }
  .u-grid[data-sm="3"]  { --cols: 3; }
  .u-grid[data-sm="4"]  { --cols: 4; }
  .u-grid[data-sm="5"]  { --cols: 5; }
  .u-grid[data-sm="6"]  { --cols: 6; }
  .u-grid[data-sm="7"]  { --cols: 7; }
  .u-grid[data-sm="8"]  { --cols: 8; }
  .u-grid[data-sm="9"]  { --cols: 9; }
  .u-grid[data-sm="10"] { --cols: 10; }
  .u-grid[data-sm="11"] { --cols: 11; }
  .u-grid[data-sm="12"] { --cols: 12; }
}
/* U-grid — XSmall (< 20em) */
@media (max-width: 20em) {
  .u-grid[data-xs="1"]  { --cols: 1; --_is-multi-col: ; }
  .u-grid[data-xs="2"]  { --cols: 2; }
  .u-grid[data-xs="3"]  { --cols: 3; }
  .u-grid[data-xs="4"]  { --cols: 4; }
  .u-grid[data-xs="5"]  { --cols: 5; }
  .u-grid[data-xs="6"]  { --cols: 6; }
  .u-grid[data-xs="7"]  { --cols: 7; }
  .u-grid[data-xs="8"]  { --cols: 8; }
  .u-grid[data-xs="9"]  { --cols: 9; }
  .u-grid[data-xs="10"] { --cols: 10; }
  .u-grid[data-xs="11"] { --cols: 11; }
  .u-grid[data-xs="12"] { --cols: 12; }
}
/* Gallery — Small */
@media (max-width: 35em) {
  .gallery-grid {
    columns: 1;
  }
}
/* Advisory Council — swap to 2 cols below 1275px (79.6875rem) */
/* DATA-MD */
@media (max-width: 60em) {
  .program-img--2col .photo-cell:nth-child(n+2) {
    display: none;
  }
  .principles-grid > .principles-img {
    display: none;
  }
  .container:has(.program-img) {
    order: 2;
  }
  .program-img.program-img--food {
    order: 2;
  }
  #hero {
    padding-top: 8rem;
  }
  .hero-img {
     grid-column: span 3;
     max-height: none;
     aspect-ratio: 4 / 3;
  }
  .video-embed {
    aspect-ratio: 16 / 9;
  }
}
/* Mobile nav — swap layout under 42em */
@media (max-width: 52.5em) {
  #main-nav > .nav-links-wrap {
    display: none;
  }
  .menu-button {
    display: flex;
  }
  .mobile-nav {
    display: block;
  }
}
/* Team photo — drop max-width and push to last at data-sm */
@media (max-width: 35em) {
  .team-photo {
    max-width: none;
    order: 1;
  }
  .br-sm-hide {
    display: none;
  }
}