@charset "UTF-8";
/* Main bundle (site) */
:root {
  --c-black: #000000;
  --c-dark-gray-2: #212326;
  --c-dark-gray-1: #40464c;
  --c-dark-silver-gray: #626a73;
  --c-silver-gray: #8b959e;
  --c-light-silver-gray: #b8c2cc;
  --c-light-gray-1: #f2f4f8;
  --c-light-gray-2: #dde1e6;
  --c-white: #ffffff;
  --c-mit-red: #750014;
  --c-bright-red: #ff1423;
  --c-dark-pink: #750062;
  --c-pink: #ff14f0;
  --c-light-pink: #ffb3ff;
  --c-dark-purple: #3e006b;
  --c-purple: #9933ff;
  --c-light-purple: #bfb3ff;
  --c-dark-blue: #002896;
  --c-blue: #1966ff;
  --c-light-blue: #99ebff;
  --c-dark-green: #004d1a;
  --c-green: #00ad00;
  --c-light-green: #aaff33;
  --c-yellow: #ffeb00;
  --c-text: #000000;
  --c-heading: #000000;
  --c-bg: #ffffff;
  --c-spot: #1966ff;
  --c-text-5: rgba(0, 0, 0, 0.05);
  --c-text-10: rgba(0, 0, 0, 0.1);
  --c-text-30: rgba(0, 0, 0, 0.3);
  --c-text-50: rgba(0, 0, 0, 0.5);
  --c-text-60: rgba(0, 0, 0, 0.6);
  --c-text-80: rgba(0, 0, 0, 0.8);
  --c-bg-tint-5: rgba(255, 255, 255, 0.05);
  --c-bg-tint-10: rgba(255, 255, 255, 0.1);
  --c-bg-tint-30: rgba(255, 255, 255, 0.3);
  --c-bg-tint-50: rgba(255, 255, 255, 0.5);
  --c-bg-tint-60: rgba(255, 255, 255, 0.6);
  --c-bg-tint-80: rgba(255, 255, 255, 0.8);
  --c-border: #626a73;
  --c-border-light: #b8c2cc;
  --c-border-reverse: #ffffff;
  --c-border-reverse-light: rgba(255, 255, 255, 0.5);
  --c-reverse: #ffffff;
  --c-reverse-bg: #000000;
  --c-reverse-spot: #ffeb00;
  --c-reverse-select: #000000;
  --c-reverse-select-bg: #ffffff;
  --c-link: #1966ff;
  --c-link-hover: #1966ff;
  --c-link-active: #1966ff;
  --c-link-focus: #1966ff;
  --c-link-visited: #1966ff;
  --c-link-nav: #1966ff;
  --c-link-nav-hover: #1966ff;
  --c-link-nav-active: #1966ff;
  --c-link-nav-focus: #1966ff;
  --c-link-nav-visited: #1966ff;
}

:root {
  --bp-mobile: 300px;
  --bp-phablet: 480px;
  --bp-tablet: 700px;
  --bp-tablet-xl: 768px;
  --bp-tablet-xxl: 920px;
  --bp-desktop: 1024px;
  --bp-desktop-xl: 1200px;
  --bp-desktop-xxl: 1500px;
  --bp-desktop-xxxl: 1700px;
  --bp-desktop-xxxxl: 2000px;
}

:root {
  /* ==========================================================================
     LINE SYSTEM - Single Source of Truth
     ========================================================================== */
  /* Line dimensions */
  --line-width: 1px;
  --line-left-mobile: 1.5rem; /* 24px */
  --line-left-desktop: 89px; /* Aligns with page-hero */
  /* Line colors */
  --line-color-default: #b8b7b5;
  --line-color-accent: var(--color-primary, #2563eb);
  /* Spacing tokens (derived from line system) */
  --gutter: 1.5rem;
  --gutter-lg: 89px;
  /* Accent bar */
  --accent-bar-width: 165px;
  --accent-bar-height: 4px;
  /* Background */
  --color-bg: #fff;
  --color-border-light: #ddd;
  --c-line-black: rgba(0, 0, 0, 0.3);
  --c-line-dark-gray-2: rgba(33, 35, 38, 0.3);
  --c-line-dark-gray-1: rgba(64, 70, 76, 0.3);
  --c-line-dark-silver-gray: rgba(98, 106, 115, 0.3);
  --c-line-silver-gray: rgba(139, 149, 158, 0.3);
  --c-line-light-silver-gray: rgba(139, 149, 158, 0.3);
  --c-line-light-gray-1: rgba(242, 244, 248, 0.3);
  --c-line-light-gray-2: rgba(221, 225, 230, 0.3);
  --c-line-mit-red: rgba(117, 0, 20, 0.3);
  --c-line-bright-red: rgba(255, 20, 35, 0.3);
  --c-line-dark-pink: rgba(117, 0, 98, 0.3);
  --c-line-pink: rgba(255, 20, 240, 0.3);
  --c-line-light-pink: rgba(255, 179, 255, 0.3);
  --c-line-dark-purple: rgba(62, 0, 107, 0.3);
  --c-line-purple: rgba(153, 51, 255, 0.3);
  --c-line-light-purple: rgba(191, 179, 255, 0.3);
  --c-line-dark-blue: rgba(0, 40, 150, 0.3);
  --c-line-blue: rgba(25, 102, 255, 0.3);
  --c-line-light-blue: rgba(153, 235, 255, 0.3);
  --c-line-dark-green: rgba(0, 77, 26, 0.3);
  --c-line-green: rgba(0, 173, 0, 0.3);
  --c-line-light-green: rgba(170, 255, 51, 0.3);
  --c-line-yellow: rgba(255, 235, 0, 0.3);
  --c-line-spot: #1966ff;
  --c-line-transparent: var(--c-line-transparent);
}

/* 131px */
/* 88px */
:root {
  --ff-sans: neue-haas-grotesk-text, Helvetica Neue, Helvetica, FreeSans, Arial, system-ui, sans-serif;
  --ff-sans-display: neue-haas-grotesk-display, system-ui, sans-serif;
  --ff-serif: Georgia Pro, Georgia, serif;
  --ff-monospace: Roboto Mono, ui-monospace, Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
  --ff-base: neue-haas-grotesk-text, Helvetica Neue, Helvetica, FreeSans, Arial, system-ui, sans-serif;
  --ff-article: neue-haas-grotesk-text, Helvetica Neue, Helvetica, FreeSans, Arial, system-ui, sans-serif;
  --ff-heading: Georgia Pro, Georgia, serif;
  --ff-pullquote: Georgia Pro, Georgia, serif;
  --ff-list: neue-haas-grotesk-text, Helvetica Neue, Helvetica, FreeSans, Arial, system-ui, sans-serif;
  --ff-table: neue-haas-grotesk-text, Helvetica Neue, Helvetica, FreeSans, Arial, system-ui, sans-serif;
  --ff-code: Roboto Mono, ui-monospace, Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
  --fw-reg: 400;
  --fw-med: 500;
  --fw-bold: 600;
  --fw-reg-t: 400;
  --fw-bold-t: 500;
  --fw-reg-d: 500;
  --fw-bold-d: 600;
  --fs-xxxs: 12px;
  --fs-xxs: 14px;
  --fs-xs: 17px;
  --fs-sm: 20px;
  --fs-md: 24px;
  --fs-lg: 28px;
  --fs-xl: 36px;
  --fs-xxl: 45px;
  --fs-xxxl: 60px;
  --fs-xxxxl: 84px;
  --fs-base: 17px;
  --fs-base-plus: 20px;
  --fs-smallcap-min: 11px;
  --fs-smallcap-max: 13px;
  --fs-h5-min: 17px;
  --fs-h5-max: 24px;
  --fs-h4-min: 17px;
  --fs-h4-max: 28px;
  --fs-h3-min: 20px;
  --fs-h3-max: 36px;
  --fs-h2-min: 24px;
  --fs-h2-max: 45px;
  --fs-h1-min: 28px;
  --fs-h1-max: 60px;
  --fs-big-h1-min: 36px;
  --fs-big-h1-max: 84px;
  --fs-monospace: 14px;
  --lh-tiny: 1.1;
  --lh-small: 1.25;
  --lh-md: 1.35;
  --lh-lg: 1.45;
  --lh-xl: 1.55;
  --lh-base: 1.55;
  --lh-smallcap: 1.25;
  --lh-h6: 1.25;
  --lh-h5: 1.25;
  --lh-h4: 1.25;
  --lh-h3: 1.25;
  --lh-h2: 1.1;
  --lh-h1: 1.1;
  --lh-jumbo: 1.1;
  --lh-mono: 1.2;
  --ls-small-text: 0.015em;
  --ls-text: -0.015em;
  --ls-heading: -0.02em;
}

:root {
  --z-0: 0;
  --z-1: 10;
  --z-2: 20;
  --z-3: 30;
  --z-4: 40;
  --z-5: 50;
  --z-6: 60;
  --z-7: 70;
  --z-8: 80;
  --z-9: 90;
  --z-10: 100;
  --z-11: 110;
}

[class*=btn],
.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 2.5px;
  font-family: inherit;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  background: none;
  outline: none;
  box-sizing: border-box;
  flex-shrink: 0;
}
[class*=btn]:disabled, [class*=btn].disabled,
.button:disabled,
.button.disabled,
button:disabled,
button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: all !important;
}
[class*=btn]:link, [class*=btn]:visited,
.button:link,
.button:visited,
button:link,
button:visited {
  text-decoration: none;
}
[class*=btn][aria-disabled=true],
.button[aria-disabled=true],
button[aria-disabled=true] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: all !important;
}
[class*=btn],
.button,
button {
  font-weight: 600;
}

.btn,
.button,
button {
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.5rem 1.25rem;
}

.btn--accent {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
}
.btn--accent:hover {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  text-decoration: none;
}
.btn--accent:focus, .btn--accent:focus-visible {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}
.btn--accent:active {
  background-color: rgb(0, 82.4904347826, 246.4);
  border-color: rgb(0, 82.4904347826, 246.4);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--accent:visited {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
}
.btn--accent:hover:focus, .btn--accent:focus:hover {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}

.btn--accent-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--accent-outline:visited {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--accent-outline:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  text-decoration: none;
}
.btn--accent-outline:focus, .btn--accent-outline:focus-visible {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}
.btn--accent-outline:active {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--accent-outline:hover:focus, .btn--accent-outline:focus:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}

.btn--accent-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--accent-outline-give:visited {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--accent-outline-give:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  text-decoration: none;
}
.btn--accent-outline-give:focus, .btn--accent-outline-give:focus-visible {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}
.btn--accent-outline-give:active {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--accent-outline-give:hover:focus, .btn--accent-outline-give:focus:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}

.btn--black {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
}
.btn--black:hover {
  background-color: black;
  border-color: black;
  color: #ffffff;
  text-decoration: none;
}
.btn--black:focus, .btn--black:focus-visible {
  background-color: black;
  border-color: black;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}
.btn--black:active {
  background-color: black;
  border-color: black;
  color: #ffffff;
  transform: translateY(1px);
}
.btn--black:visited {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
}
.btn--black:hover:focus, .btn--black:focus:hover {
  background-color: black;
  border-color: black;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}

.btn--black-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #000000;
  color: #000000;
}
.btn--black-outline:visited {
  background-color: transparent;
  border-color: #000000;
  color: #000000;
}
.btn--black-outline:hover {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
  text-decoration: none;
}
.btn--black-outline:focus, .btn--black-outline:focus-visible {
  background-color: transparent;
  border-color: #000000;
  color: #000000;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}
.btn--black-outline:active {
  background-color: black;
  border-color: black;
  color: #ffffff;
  transform: translateY(1px);
}
.btn--black-outline:hover:focus, .btn--black-outline:focus:hover {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}

.btn--black-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #000000;
  color: #000000;
}
.btn--black-outline-give:visited {
  background-color: transparent;
  border-color: #000000;
  color: #000000;
}
.btn--black-outline-give:hover {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
  text-decoration: none;
}
.btn--black-outline-give:focus, .btn--black-outline-give:focus-visible {
  background-color: transparent;
  border-color: #000000;
  color: #000000;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}
.btn--black-outline-give:active {
  background-color: black;
  border-color: black;
  color: #ffffff;
  transform: translateY(1px);
}
.btn--black-outline-give:hover:focus, .btn--black-outline-give:focus:hover {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
}

.btn--blue {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
}
.btn--blue:hover {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  text-decoration: none;
}
.btn--blue:focus, .btn--blue:focus-visible {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}
.btn--blue:active {
  background-color: rgb(0, 82.4904347826, 246.4);
  border-color: rgb(0, 82.4904347826, 246.4);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--blue:visited {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
}
.btn--blue:hover:focus, .btn--blue:focus:hover {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}

.btn--blue-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--blue-outline:visited {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--blue-outline:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  text-decoration: none;
}
.btn--blue-outline:focus, .btn--blue-outline:focus-visible {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}
.btn--blue-outline:active {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--blue-outline:hover:focus, .btn--blue-outline:focus:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}

.btn--blue-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--blue-outline-give:visited {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--blue-outline-give:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  text-decoration: none;
}
.btn--blue-outline-give:focus, .btn--blue-outline-give:focus-visible {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}
.btn--blue-outline-give:active {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--blue-outline-give:hover:focus, .btn--blue-outline-give:focus:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}

.btn--bright-red {
  background-color: #ff1423;
  border-color: #ff1423;
  color: #ffffff;
}
.btn--bright-red:hover {
  background-color: rgb(253, 0, 16.1489361702);
  border-color: rgb(253, 0, 16.1489361702);
  color: #ffffff;
  text-decoration: none;
}
.btn--bright-red:focus, .btn--bright-red:focus-visible {
  background-color: rgb(253, 0, 16.1489361702);
  border-color: rgb(253, 0, 16.1489361702);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 20, 35, 0.3);
}
.btn--bright-red:active {
  background-color: rgb(242, 0, 15.4468085106);
  border-color: rgb(242, 0, 15.4468085106);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--bright-red:visited {
  background-color: #ff1423;
  border-color: #ff1423;
  color: #ffffff;
}
.btn--bright-red:hover:focus, .btn--bright-red:focus:hover {
  background-color: rgb(253, 0, 16.1489361702);
  border-color: rgb(253, 0, 16.1489361702);
  box-shadow: 0 0 0 3px rgba(255, 20, 35, 0.3);
}

.btn--bright-red-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #ff1423;
  color: #ff1423;
}
.btn--bright-red-outline:visited {
  background-color: transparent;
  border-color: #ff1423;
  color: #ff1423;
}
.btn--bright-red-outline:hover {
  background-color: #ff1423;
  border-color: #ff1423;
  color: #ffffff;
  text-decoration: none;
}
.btn--bright-red-outline:focus, .btn--bright-red-outline:focus-visible {
  background-color: transparent;
  border-color: #ff1423;
  color: #ff1423;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 20, 35, 0.3);
}
.btn--bright-red-outline:active {
  background-color: rgb(253, 0, 16.1489361702);
  border-color: rgb(253, 0, 16.1489361702);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--bright-red-outline:hover:focus, .btn--bright-red-outline:focus:hover {
  background-color: #ff1423;
  border-color: #ff1423;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 20, 35, 0.3);
}

.btn--bright-red-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #ff1423;
  color: #ff1423;
}
.btn--bright-red-outline-give:visited {
  background-color: transparent;
  border-color: #ff1423;
  color: #ff1423;
}
.btn--bright-red-outline-give:hover {
  background-color: #ff1423;
  border-color: #ff1423;
  color: #ffffff;
  text-decoration: none;
}
.btn--bright-red-outline-give:focus, .btn--bright-red-outline-give:focus-visible {
  background-color: transparent;
  border-color: #ff1423;
  color: #ff1423;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 20, 35, 0.3);
}
.btn--bright-red-outline-give:active {
  background-color: rgb(253, 0, 16.1489361702);
  border-color: rgb(253, 0, 16.1489361702);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--bright-red-outline-give:hover:focus, .btn--bright-red-outline-give:focus:hover {
  background-color: #ff1423;
  border-color: #ff1423;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 20, 35, 0.3);
}

.btn--dark-blue {
  background-color: #002896;
  border-color: #002896;
  color: #ffffff;
}
.btn--dark-blue:hover {
  background-color: rgb(0, 36.8, 138);
  border-color: rgb(0, 36.8, 138);
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-blue:focus, .btn--dark-blue:focus-visible {
  background-color: rgb(0, 36.8, 138);
  border-color: rgb(0, 36.8, 138);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(0, 40, 150, 0.3);
}
.btn--dark-blue:active {
  background-color: rgb(0, 35.2, 132);
  border-color: rgb(0, 35.2, 132);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-blue:visited {
  background-color: #002896;
  border-color: #002896;
  color: #ffffff;
}
.btn--dark-blue:hover:focus, .btn--dark-blue:focus:hover {
  background-color: rgb(0, 36.8, 138);
  border-color: rgb(0, 36.8, 138);
  box-shadow: 0 0 0 3px rgba(0, 40, 150, 0.3);
}

.btn--dark-blue-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #002896;
  color: #002896;
}
.btn--dark-blue-outline:visited {
  background-color: transparent;
  border-color: #002896;
  color: #002896;
}
.btn--dark-blue-outline:hover {
  background-color: #002896;
  border-color: #002896;
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-blue-outline:focus, .btn--dark-blue-outline:focus-visible {
  background-color: transparent;
  border-color: #002896;
  color: #002896;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(0, 40, 150, 0.3);
}
.btn--dark-blue-outline:active {
  background-color: rgb(0, 36.8, 138);
  border-color: rgb(0, 36.8, 138);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-blue-outline:hover:focus, .btn--dark-blue-outline:focus:hover {
  background-color: #002896;
  border-color: #002896;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 40, 150, 0.3);
}

.btn--dark-blue-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #002896;
  color: #002896;
}
.btn--dark-blue-outline-give:visited {
  background-color: transparent;
  border-color: #002896;
  color: #002896;
}
.btn--dark-blue-outline-give:hover {
  background-color: #002896;
  border-color: #002896;
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-blue-outline-give:focus, .btn--dark-blue-outline-give:focus-visible {
  background-color: transparent;
  border-color: #002896;
  color: #002896;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(0, 40, 150, 0.3);
}
.btn--dark-blue-outline-give:active {
  background-color: rgb(0, 36.8, 138);
  border-color: rgb(0, 36.8, 138);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-blue-outline-give:hover:focus, .btn--dark-blue-outline-give:focus:hover {
  background-color: #002896;
  border-color: #002896;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 40, 150, 0.3);
}

.btn--dark-gray {
  background-color: #40464c;
  border-color: #40464c;
  color: #ffffff;
}
.btn--dark-gray:hover {
  background-color: rgb(58.88, 64.4, 69.92);
  border-color: rgb(58.88, 64.4, 69.92);
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-gray:focus, .btn--dark-gray:focus-visible {
  background-color: rgb(58.88, 64.4, 69.92);
  border-color: rgb(58.88, 64.4, 69.92);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(64, 70, 76, 0.3);
}
.btn--dark-gray:active {
  background-color: rgb(56.32, 61.6, 66.88);
  border-color: rgb(56.32, 61.6, 66.88);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-gray:visited {
  background-color: #40464c;
  border-color: #40464c;
  color: #ffffff;
}
.btn--dark-gray:hover:focus, .btn--dark-gray:focus:hover {
  background-color: rgb(58.88, 64.4, 69.92);
  border-color: rgb(58.88, 64.4, 69.92);
  box-shadow: 0 0 0 3px rgba(64, 70, 76, 0.3);
}

.btn--dark-gray-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #40464c;
  color: #40464c;
}
.btn--dark-gray-outline:visited {
  background-color: transparent;
  border-color: #40464c;
  color: #40464c;
}
.btn--dark-gray-outline:hover {
  background-color: #40464c;
  border-color: #40464c;
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-gray-outline:focus, .btn--dark-gray-outline:focus-visible {
  background-color: transparent;
  border-color: #40464c;
  color: #40464c;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(64, 70, 76, 0.3);
}
.btn--dark-gray-outline:active {
  background-color: rgb(58.88, 64.4, 69.92);
  border-color: rgb(58.88, 64.4, 69.92);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-gray-outline:hover:focus, .btn--dark-gray-outline:focus:hover {
  background-color: #40464c;
  border-color: #40464c;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(64, 70, 76, 0.3);
}

.btn--dark-gray-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #40464c;
  color: #40464c;
}
.btn--dark-gray-outline-give:visited {
  background-color: transparent;
  border-color: #40464c;
  color: #40464c;
}
.btn--dark-gray-outline-give:hover {
  background-color: #40464c;
  border-color: #40464c;
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-gray-outline-give:focus, .btn--dark-gray-outline-give:focus-visible {
  background-color: transparent;
  border-color: #40464c;
  color: #40464c;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(64, 70, 76, 0.3);
}
.btn--dark-gray-outline-give:active {
  background-color: rgb(58.88, 64.4, 69.92);
  border-color: rgb(58.88, 64.4, 69.92);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-gray-outline-give:hover:focus, .btn--dark-gray-outline-give:focus:hover {
  background-color: #40464c;
  border-color: #40464c;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(64, 70, 76, 0.3);
}

.btn--dark-green {
  background-color: #004d1a;
  border-color: #004d1a;
  color: #ffffff;
}
.btn--dark-green:hover {
  background-color: rgb(0, 70.84, 23.92);
  border-color: rgb(0, 70.84, 23.92);
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-green:focus, .btn--dark-green:focus-visible {
  background-color: rgb(0, 70.84, 23.92);
  border-color: rgb(0, 70.84, 23.92);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(0, 77, 26, 0.3);
}
.btn--dark-green:active {
  background-color: rgb(0, 67.76, 22.88);
  border-color: rgb(0, 67.76, 22.88);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-green:visited {
  background-color: #004d1a;
  border-color: #004d1a;
  color: #ffffff;
}
.btn--dark-green:hover:focus, .btn--dark-green:focus:hover {
  background-color: rgb(0, 70.84, 23.92);
  border-color: rgb(0, 70.84, 23.92);
  box-shadow: 0 0 0 3px rgba(0, 77, 26, 0.3);
}

.btn--dark-green-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #004d1a;
  color: #004d1a;
}
.btn--dark-green-outline:visited {
  background-color: transparent;
  border-color: #004d1a;
  color: #004d1a;
}
.btn--dark-green-outline:hover {
  background-color: #004d1a;
  border-color: #004d1a;
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-green-outline:focus, .btn--dark-green-outline:focus-visible {
  background-color: transparent;
  border-color: #004d1a;
  color: #004d1a;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(0, 77, 26, 0.3);
}
.btn--dark-green-outline:active {
  background-color: rgb(0, 70.84, 23.92);
  border-color: rgb(0, 70.84, 23.92);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-green-outline:hover:focus, .btn--dark-green-outline:focus:hover {
  background-color: #004d1a;
  border-color: #004d1a;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 77, 26, 0.3);
}

.btn--dark-green-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #004d1a;
  color: #004d1a;
}
.btn--dark-green-outline-give:visited {
  background-color: transparent;
  border-color: #004d1a;
  color: #004d1a;
}
.btn--dark-green-outline-give:hover {
  background-color: #004d1a;
  border-color: #004d1a;
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-green-outline-give:focus, .btn--dark-green-outline-give:focus-visible {
  background-color: transparent;
  border-color: #004d1a;
  color: #004d1a;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(0, 77, 26, 0.3);
}
.btn--dark-green-outline-give:active {
  background-color: rgb(0, 70.84, 23.92);
  border-color: rgb(0, 70.84, 23.92);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-green-outline-give:hover:focus, .btn--dark-green-outline-give:focus:hover {
  background-color: #004d1a;
  border-color: #004d1a;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 77, 26, 0.3);
}

.btn--dark-pink {
  background-color: #750062;
  border-color: #750062;
  color: #ffffff;
}
.btn--dark-pink:hover {
  background-color: rgb(107.64, 0, 90.16);
  border-color: rgb(107.64, 0, 90.16);
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-pink:focus, .btn--dark-pink:focus-visible {
  background-color: rgb(107.64, 0, 90.16);
  border-color: rgb(107.64, 0, 90.16);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(117, 0, 98, 0.3);
}
.btn--dark-pink:active {
  background-color: rgb(102.96, 0, 86.24);
  border-color: rgb(102.96, 0, 86.24);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-pink:visited {
  background-color: #750062;
  border-color: #750062;
  color: #ffffff;
}
.btn--dark-pink:hover:focus, .btn--dark-pink:focus:hover {
  background-color: rgb(107.64, 0, 90.16);
  border-color: rgb(107.64, 0, 90.16);
  box-shadow: 0 0 0 3px rgba(117, 0, 98, 0.3);
}

.btn--dark-pink-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #750062;
  color: #750062;
}
.btn--dark-pink-outline:visited {
  background-color: transparent;
  border-color: #750062;
  color: #750062;
}
.btn--dark-pink-outline:hover {
  background-color: #750062;
  border-color: #750062;
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-pink-outline:focus, .btn--dark-pink-outline:focus-visible {
  background-color: transparent;
  border-color: #750062;
  color: #750062;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(117, 0, 98, 0.3);
}
.btn--dark-pink-outline:active {
  background-color: rgb(107.64, 0, 90.16);
  border-color: rgb(107.64, 0, 90.16);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-pink-outline:hover:focus, .btn--dark-pink-outline:focus:hover {
  background-color: #750062;
  border-color: #750062;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(117, 0, 98, 0.3);
}

.btn--dark-pink-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #750062;
  color: #750062;
}
.btn--dark-pink-outline-give:visited {
  background-color: transparent;
  border-color: #750062;
  color: #750062;
}
.btn--dark-pink-outline-give:hover {
  background-color: #750062;
  border-color: #750062;
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-pink-outline-give:focus, .btn--dark-pink-outline-give:focus-visible {
  background-color: transparent;
  border-color: #750062;
  color: #750062;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(117, 0, 98, 0.3);
}
.btn--dark-pink-outline-give:active {
  background-color: rgb(107.64, 0, 90.16);
  border-color: rgb(107.64, 0, 90.16);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-pink-outline-give:hover:focus, .btn--dark-pink-outline-give:focus:hover {
  background-color: #750062;
  border-color: #750062;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(117, 0, 98, 0.3);
}

.btn--dark-purple {
  background-color: #3e006b;
  border-color: #3e006b;
  color: #ffffff;
}
.btn--dark-purple:hover {
  background-color: rgb(57.04, 0, 98.44);
  border-color: rgb(57.04, 0, 98.44);
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-purple:focus, .btn--dark-purple:focus-visible {
  background-color: rgb(57.04, 0, 98.44);
  border-color: rgb(57.04, 0, 98.44);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(62, 0, 107, 0.3);
}
.btn--dark-purple:active {
  background-color: rgb(54.56, 0, 94.16);
  border-color: rgb(54.56, 0, 94.16);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-purple:visited {
  background-color: #3e006b;
  border-color: #3e006b;
  color: #ffffff;
}
.btn--dark-purple:hover:focus, .btn--dark-purple:focus:hover {
  background-color: rgb(57.04, 0, 98.44);
  border-color: rgb(57.04, 0, 98.44);
  box-shadow: 0 0 0 3px rgba(62, 0, 107, 0.3);
}

.btn--dark-purple-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #3e006b;
  color: #3e006b;
}
.btn--dark-purple-outline:visited {
  background-color: transparent;
  border-color: #3e006b;
  color: #3e006b;
}
.btn--dark-purple-outline:hover {
  background-color: #3e006b;
  border-color: #3e006b;
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-purple-outline:focus, .btn--dark-purple-outline:focus-visible {
  background-color: transparent;
  border-color: #3e006b;
  color: #3e006b;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(62, 0, 107, 0.3);
}
.btn--dark-purple-outline:active {
  background-color: rgb(57.04, 0, 98.44);
  border-color: rgb(57.04, 0, 98.44);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-purple-outline:hover:focus, .btn--dark-purple-outline:focus:hover {
  background-color: #3e006b;
  border-color: #3e006b;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(62, 0, 107, 0.3);
}

.btn--dark-purple-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #3e006b;
  color: #3e006b;
}
.btn--dark-purple-outline-give:visited {
  background-color: transparent;
  border-color: #3e006b;
  color: #3e006b;
}
.btn--dark-purple-outline-give:hover {
  background-color: #3e006b;
  border-color: #3e006b;
  color: #ffffff;
  text-decoration: none;
}
.btn--dark-purple-outline-give:focus, .btn--dark-purple-outline-give:focus-visible {
  background-color: transparent;
  border-color: #3e006b;
  color: #3e006b;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(62, 0, 107, 0.3);
}
.btn--dark-purple-outline-give:active {
  background-color: rgb(57.04, 0, 98.44);
  border-color: rgb(57.04, 0, 98.44);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--dark-purple-outline-give:hover:focus, .btn--dark-purple-outline-give:focus:hover {
  background-color: #3e006b;
  border-color: #3e006b;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(62, 0, 107, 0.3);
}

.btn--gray {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
}
.btn--gray:hover {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  color: #000000;
  text-decoration: none;
}
.btn--gray:focus, .btn--gray:focus-visible {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  color: #000000;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}
.btn--gray:active {
  background-color: rgb(119.5904225352, 131.2636619718, 141.7695774648);
  border-color: rgb(119.5904225352, 131.2636619718, 141.7695774648);
  color: #000000;
  transform: translateY(1px);
}
.btn--gray:visited {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
}
.btn--gray:hover:focus, .btn--gray:focus:hover {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}

.btn--gray-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
}
.btn--gray-outline:visited {
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
}
.btn--gray-outline:hover {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
  text-decoration: none;
}
.btn--gray-outline:focus, .btn--gray-outline:focus-visible {
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}
.btn--gray-outline:active {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  color: #000000;
  transform: translateY(1px);
}
.btn--gray-outline:hover:focus, .btn--gray-outline:focus:hover {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}

.btn--gray-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
}
.btn--gray-outline-give:visited {
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
}
.btn--gray-outline-give:hover {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
  text-decoration: none;
}
.btn--gray-outline-give:focus, .btn--gray-outline-give:focus-visible {
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}
.btn--gray-outline-give:active {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  color: #000000;
  transform: translateY(1px);
}
.btn--gray-outline-give:hover:focus, .btn--gray-outline-give:focus:hover {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}

.btn--green {
  background-color: #00ad00;
  border-color: #00ad00;
  color: #ffffff;
}
.btn--green:hover {
  background-color: rgb(0, 159.16, 0);
  border-color: rgb(0, 159.16, 0);
  color: #ffffff;
  text-decoration: none;
}
.btn--green:focus, .btn--green:focus-visible {
  background-color: rgb(0, 159.16, 0);
  border-color: rgb(0, 159.16, 0);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(0, 173, 0, 0.3);
}
.btn--green:active {
  background-color: rgb(0, 152.24, 0);
  border-color: rgb(0, 152.24, 0);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--green:visited {
  background-color: #00ad00;
  border-color: #00ad00;
  color: #ffffff;
}
.btn--green:hover:focus, .btn--green:focus:hover {
  background-color: rgb(0, 159.16, 0);
  border-color: rgb(0, 159.16, 0);
  box-shadow: 0 0 0 3px rgba(0, 173, 0, 0.3);
}

.btn--green-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #00ad00;
  color: #00ad00;
}
.btn--green-outline:visited {
  background-color: transparent;
  border-color: #00ad00;
  color: #00ad00;
}
.btn--green-outline:hover {
  background-color: #00ad00;
  border-color: #00ad00;
  color: #ffffff;
  text-decoration: none;
}
.btn--green-outline:focus, .btn--green-outline:focus-visible {
  background-color: transparent;
  border-color: #00ad00;
  color: #00ad00;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(0, 173, 0, 0.3);
}
.btn--green-outline:active {
  background-color: rgb(0, 159.16, 0);
  border-color: rgb(0, 159.16, 0);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--green-outline:hover:focus, .btn--green-outline:focus:hover {
  background-color: #00ad00;
  border-color: #00ad00;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 173, 0, 0.3);
}

.btn--green-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #00ad00;
  color: #00ad00;
}
.btn--green-outline-give:visited {
  background-color: transparent;
  border-color: #00ad00;
  color: #00ad00;
}
.btn--green-outline-give:hover {
  background-color: #00ad00;
  border-color: #00ad00;
  color: #ffffff;
  text-decoration: none;
}
.btn--green-outline-give:focus, .btn--green-outline-give:focus-visible {
  background-color: transparent;
  border-color: #00ad00;
  color: #00ad00;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(0, 173, 0, 0.3);
}
.btn--green-outline-give:active {
  background-color: rgb(0, 159.16, 0);
  border-color: rgb(0, 159.16, 0);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--green-outline-give:hover:focus, .btn--green-outline-give:focus:hover {
  background-color: #00ad00;
  border-color: #00ad00;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 173, 0, 0.3);
}

.btn--light-blue {
  background-color: #99ebff;
  border-color: #99ebff;
  color: #000000;
}
.btn--light-blue:hover {
  background-color: rgb(120.36, 228.6, 255);
  border-color: rgb(120.36, 228.6, 255);
  color: #000000;
  text-decoration: none;
}
.btn--light-blue:focus, .btn--light-blue:focus-visible {
  background-color: rgb(120.36, 228.6, 255);
  border-color: rgb(120.36, 228.6, 255);
  color: #000000;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(153, 235, 255, 0.3);
}
.btn--light-blue:active {
  background-color: rgb(104.04, 225.4, 255);
  border-color: rgb(104.04, 225.4, 255);
  color: #000000;
  transform: translateY(1px);
}
.btn--light-blue:visited {
  background-color: #99ebff;
  border-color: #99ebff;
  color: #000000;
}
.btn--light-blue:hover:focus, .btn--light-blue:focus:hover {
  background-color: rgb(120.36, 228.6, 255);
  border-color: rgb(120.36, 228.6, 255);
  box-shadow: 0 0 0 3px rgba(153, 235, 255, 0.3);
}

.btn--light-blue-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #99ebff;
  color: #99ebff;
}
.btn--light-blue-outline:visited {
  background-color: transparent;
  border-color: #99ebff;
  color: #99ebff;
}
.btn--light-blue-outline:hover {
  background-color: #99ebff;
  border-color: #99ebff;
  color: #000000;
  text-decoration: none;
}
.btn--light-blue-outline:focus, .btn--light-blue-outline:focus-visible {
  background-color: transparent;
  border-color: #99ebff;
  color: #99ebff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(153, 235, 255, 0.3);
}
.btn--light-blue-outline:active {
  background-color: rgb(120.36, 228.6, 255);
  border-color: rgb(120.36, 228.6, 255);
  color: #000000;
  transform: translateY(1px);
}
.btn--light-blue-outline:hover:focus, .btn--light-blue-outline:focus:hover {
  background-color: #99ebff;
  border-color: #99ebff;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(153, 235, 255, 0.3);
}

.btn--light-blue-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #99ebff;
  color: #99ebff;
}
.btn--light-blue-outline-give:visited {
  background-color: transparent;
  border-color: #99ebff;
  color: #99ebff;
}
.btn--light-blue-outline-give:hover {
  background-color: #99ebff;
  border-color: #99ebff;
  color: #000000;
  text-decoration: none;
}
.btn--light-blue-outline-give:focus, .btn--light-blue-outline-give:focus-visible {
  background-color: transparent;
  border-color: #99ebff;
  color: #99ebff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(153, 235, 255, 0.3);
}
.btn--light-blue-outline-give:active {
  background-color: rgb(120.36, 228.6, 255);
  border-color: rgb(120.36, 228.6, 255);
  color: #000000;
  transform: translateY(1px);
}
.btn--light-blue-outline-give:hover:focus, .btn--light-blue-outline-give:focus:hover {
  background-color: #99ebff;
  border-color: #99ebff;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(153, 235, 255, 0.3);
}

.btn--light-gray {
  background-color: #f2f4f8;
  border-color: #f2f4f8;
  color: #1966ff;
}
.btn--light-gray:hover {
  background-color: rgb(216.52, 222.44, 234.28);
  border-color: rgb(216.52, 222.44, 234.28);
  color: #1966ff;
  text-decoration: none;
}
.btn--light-gray:focus, .btn--light-gray:focus-visible {
  background-color: rgb(216.52, 222.44, 234.28);
  border-color: rgb(216.52, 222.44, 234.28);
  color: #1966ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(242, 244, 248, 0.3);
}
.btn--light-gray:active {
  background-color: rgb(203.78, 211.66, 227.42);
  border-color: rgb(203.78, 211.66, 227.42);
  color: #1966ff;
  transform: translateY(1px);
}
.btn--light-gray:visited {
  background-color: #f2f4f8;
  border-color: #f2f4f8;
  color: #1966ff;
}
.btn--light-gray:hover:focus, .btn--light-gray:focus:hover {
  background-color: rgb(216.52, 222.44, 234.28);
  border-color: rgb(216.52, 222.44, 234.28);
  box-shadow: 0 0 0 3px rgba(242, 244, 248, 0.3);
}

.btn--light-gray-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #f2f4f8;
  color: #f2f4f8;
}
.btn--light-gray-outline:visited {
  background-color: transparent;
  border-color: #f2f4f8;
  color: #f2f4f8;
}
.btn--light-gray-outline:hover {
  background-color: #f2f4f8;
  border-color: #f2f4f8;
  color: #1966ff;
  text-decoration: none;
}
.btn--light-gray-outline:focus, .btn--light-gray-outline:focus-visible {
  background-color: transparent;
  border-color: #f2f4f8;
  color: #f2f4f8;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(242, 244, 248, 0.3);
}
.btn--light-gray-outline:active {
  background-color: rgb(216.52, 222.44, 234.28);
  border-color: rgb(216.52, 222.44, 234.28);
  color: #1966ff;
  transform: translateY(1px);
}
.btn--light-gray-outline:hover:focus, .btn--light-gray-outline:focus:hover {
  background-color: #f2f4f8;
  border-color: #f2f4f8;
  color: #1966ff;
  box-shadow: 0 0 0 3px rgba(242, 244, 248, 0.3);
}

.btn--light-gray-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #f2f4f8;
  color: #f2f4f8;
}
.btn--light-gray-outline-give:visited {
  background-color: transparent;
  border-color: #f2f4f8;
  color: #f2f4f8;
}
.btn--light-gray-outline-give:hover {
  background-color: #f2f4f8;
  border-color: #f2f4f8;
  color: #1966ff;
  text-decoration: none;
}
.btn--light-gray-outline-give:focus, .btn--light-gray-outline-give:focus-visible {
  background-color: transparent;
  border-color: #f2f4f8;
  color: #f2f4f8;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(242, 244, 248, 0.3);
}
.btn--light-gray-outline-give:active {
  background-color: rgb(216.52, 222.44, 234.28);
  border-color: rgb(216.52, 222.44, 234.28);
  color: #1966ff;
  transform: translateY(1px);
}
.btn--light-gray-outline-give:hover:focus, .btn--light-gray-outline-give:focus:hover {
  background-color: #f2f4f8;
  border-color: #f2f4f8;
  color: #1966ff;
  box-shadow: 0 0 0 3px rgba(242, 244, 248, 0.3);
}

.btn--light-green {
  background-color: #aaff33;
  border-color: #aaff33;
  color: #000000;
}
.btn--light-green:hover {
  background-color: rgb(159.8, 255, 26.52);
  border-color: rgb(159.8, 255, 26.52);
  color: #000000;
  text-decoration: none;
}
.btn--light-green:focus, .btn--light-green:focus-visible {
  background-color: rgb(159.8, 255, 26.52);
  border-color: rgb(159.8, 255, 26.52);
  color: #000000;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(170, 255, 51, 0.3);
}
.btn--light-green:active {
  background-color: rgb(154.7, 255, 14.28);
  border-color: rgb(154.7, 255, 14.28);
  color: #000000;
  transform: translateY(1px);
}
.btn--light-green:visited {
  background-color: #aaff33;
  border-color: #aaff33;
  color: #000000;
}
.btn--light-green:hover:focus, .btn--light-green:focus:hover {
  background-color: rgb(159.8, 255, 26.52);
  border-color: rgb(159.8, 255, 26.52);
  box-shadow: 0 0 0 3px rgba(170, 255, 51, 0.3);
}

.btn--light-green-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #aaff33;
  color: #aaff33;
}
.btn--light-green-outline:visited {
  background-color: transparent;
  border-color: #aaff33;
  color: #aaff33;
}
.btn--light-green-outline:hover {
  background-color: #aaff33;
  border-color: #aaff33;
  color: #000000;
  text-decoration: none;
}
.btn--light-green-outline:focus, .btn--light-green-outline:focus-visible {
  background-color: transparent;
  border-color: #aaff33;
  color: #aaff33;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(170, 255, 51, 0.3);
}
.btn--light-green-outline:active {
  background-color: rgb(159.8, 255, 26.52);
  border-color: rgb(159.8, 255, 26.52);
  color: #000000;
  transform: translateY(1px);
}
.btn--light-green-outline:hover:focus, .btn--light-green-outline:focus:hover {
  background-color: #aaff33;
  border-color: #aaff33;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(170, 255, 51, 0.3);
}

.btn--light-green-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #aaff33;
  color: #aaff33;
}
.btn--light-green-outline-give:visited {
  background-color: transparent;
  border-color: #aaff33;
  color: #aaff33;
}
.btn--light-green-outline-give:hover {
  background-color: #aaff33;
  border-color: #aaff33;
  color: #000000;
  text-decoration: none;
}
.btn--light-green-outline-give:focus, .btn--light-green-outline-give:focus-visible {
  background-color: transparent;
  border-color: #aaff33;
  color: #aaff33;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(170, 255, 51, 0.3);
}
.btn--light-green-outline-give:active {
  background-color: rgb(159.8, 255, 26.52);
  border-color: rgb(159.8, 255, 26.52);
  color: #000000;
  transform: translateY(1px);
}
.btn--light-green-outline-give:hover:focus, .btn--light-green-outline-give:focus:hover {
  background-color: #aaff33;
  border-color: #aaff33;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(170, 255, 51, 0.3);
}

.btn--light-pink {
  background-color: #ffb3ff;
  border-color: #ffb3ff;
  color: #000000;
}
.btn--light-pink:hover {
  background-color: rgb(255, 144.28, 255);
  border-color: rgb(255, 144.28, 255);
  color: #000000;
  text-decoration: none;
}
.btn--light-pink:focus, .btn--light-pink:focus-visible {
  background-color: rgb(255, 144.28, 255);
  border-color: rgb(255, 144.28, 255);
  color: #000000;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 179, 255, 0.3);
}
.btn--light-pink:active {
  background-color: rgb(255, 126.92, 255);
  border-color: rgb(255, 126.92, 255);
  color: #000000;
  transform: translateY(1px);
}
.btn--light-pink:visited {
  background-color: #ffb3ff;
  border-color: #ffb3ff;
  color: #000000;
}
.btn--light-pink:hover:focus, .btn--light-pink:focus:hover {
  background-color: rgb(255, 144.28, 255);
  border-color: rgb(255, 144.28, 255);
  box-shadow: 0 0 0 3px rgba(255, 179, 255, 0.3);
}

.btn--light-pink-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #ffb3ff;
  color: #ffb3ff;
}
.btn--light-pink-outline:visited {
  background-color: transparent;
  border-color: #ffb3ff;
  color: #ffb3ff;
}
.btn--light-pink-outline:hover {
  background-color: #ffb3ff;
  border-color: #ffb3ff;
  color: #000000;
  text-decoration: none;
}
.btn--light-pink-outline:focus, .btn--light-pink-outline:focus-visible {
  background-color: transparent;
  border-color: #ffb3ff;
  color: #ffb3ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 179, 255, 0.3);
}
.btn--light-pink-outline:active {
  background-color: rgb(255, 144.28, 255);
  border-color: rgb(255, 144.28, 255);
  color: #000000;
  transform: translateY(1px);
}
.btn--light-pink-outline:hover:focus, .btn--light-pink-outline:focus:hover {
  background-color: #ffb3ff;
  border-color: #ffb3ff;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(255, 179, 255, 0.3);
}

.btn--light-pink-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #ffb3ff;
  color: #ffb3ff;
}
.btn--light-pink-outline-give:visited {
  background-color: transparent;
  border-color: #ffb3ff;
  color: #ffb3ff;
}
.btn--light-pink-outline-give:hover {
  background-color: #ffb3ff;
  border-color: #ffb3ff;
  color: #000000;
  text-decoration: none;
}
.btn--light-pink-outline-give:focus, .btn--light-pink-outline-give:focus-visible {
  background-color: transparent;
  border-color: #ffb3ff;
  color: #ffb3ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 179, 255, 0.3);
}
.btn--light-pink-outline-give:active {
  background-color: rgb(255, 144.28, 255);
  border-color: rgb(255, 144.28, 255);
  color: #000000;
  transform: translateY(1px);
}
.btn--light-pink-outline-give:hover:focus, .btn--light-pink-outline-give:focus:hover {
  background-color: #ffb3ff;
  border-color: #ffb3ff;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(255, 179, 255, 0.3);
}

.btn--light-purple {
  background-color: #bfb3ff;
  border-color: #bfb3ff;
  color: #000000;
}
.btn--light-purple:hover {
  background-color: rgb(161.7621052632, 144.28, 255);
  border-color: rgb(161.7621052632, 144.28, 255);
  color: #000000;
  text-decoration: none;
}
.btn--light-purple:focus, .btn--light-purple:focus-visible {
  background-color: rgb(161.7621052632, 144.28, 255);
  border-color: rgb(161.7621052632, 144.28, 255);
  color: #000000;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(191, 179, 255, 0.3);
}
.btn--light-purple:active {
  background-color: rgb(147.1431578947, 126.92, 255);
  border-color: rgb(147.1431578947, 126.92, 255);
  color: #000000;
  transform: translateY(1px);
}
.btn--light-purple:visited {
  background-color: #bfb3ff;
  border-color: #bfb3ff;
  color: #000000;
}
.btn--light-purple:hover:focus, .btn--light-purple:focus:hover {
  background-color: rgb(161.7621052632, 144.28, 255);
  border-color: rgb(161.7621052632, 144.28, 255);
  box-shadow: 0 0 0 3px rgba(191, 179, 255, 0.3);
}

.btn--light-purple-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #bfb3ff;
  color: #bfb3ff;
}
.btn--light-purple-outline:visited {
  background-color: transparent;
  border-color: #bfb3ff;
  color: #bfb3ff;
}
.btn--light-purple-outline:hover {
  background-color: #bfb3ff;
  border-color: #bfb3ff;
  color: #000000;
  text-decoration: none;
}
.btn--light-purple-outline:focus, .btn--light-purple-outline:focus-visible {
  background-color: transparent;
  border-color: #bfb3ff;
  color: #bfb3ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(191, 179, 255, 0.3);
}
.btn--light-purple-outline:active {
  background-color: rgb(161.7621052632, 144.28, 255);
  border-color: rgb(161.7621052632, 144.28, 255);
  color: #000000;
  transform: translateY(1px);
}
.btn--light-purple-outline:hover:focus, .btn--light-purple-outline:focus:hover {
  background-color: #bfb3ff;
  border-color: #bfb3ff;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(191, 179, 255, 0.3);
}

.btn--light-purple-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #bfb3ff;
  color: #bfb3ff;
}
.btn--light-purple-outline-give:visited {
  background-color: transparent;
  border-color: #bfb3ff;
  color: #bfb3ff;
}
.btn--light-purple-outline-give:hover {
  background-color: #bfb3ff;
  border-color: #bfb3ff;
  color: #000000;
  text-decoration: none;
}
.btn--light-purple-outline-give:focus, .btn--light-purple-outline-give:focus-visible {
  background-color: transparent;
  border-color: #bfb3ff;
  color: #bfb3ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(191, 179, 255, 0.3);
}
.btn--light-purple-outline-give:active {
  background-color: rgb(161.7621052632, 144.28, 255);
  border-color: rgb(161.7621052632, 144.28, 255);
  color: #000000;
  transform: translateY(1px);
}
.btn--light-purple-outline-give:hover:focus, .btn--light-purple-outline-give:focus:hover {
  background-color: #bfb3ff;
  border-color: #bfb3ff;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(191, 179, 255, 0.3);
}

.btn--pink {
  background-color: #ff14f0;
  border-color: #ff14f0;
  color: #000000;
}
.btn--pink:hover {
  background-color: rgb(253, 0, 236.8510638298);
  border-color: rgb(253, 0, 236.8510638298);
  color: #000000;
  text-decoration: none;
}
.btn--pink:focus, .btn--pink:focus-visible {
  background-color: rgb(253, 0, 236.8510638298);
  border-color: rgb(253, 0, 236.8510638298);
  color: #000000;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 20, 240, 0.3);
}
.btn--pink:active {
  background-color: rgb(242, 0, 226.5531914894);
  border-color: rgb(242, 0, 226.5531914894);
  color: #000000;
  transform: translateY(1px);
}
.btn--pink:visited {
  background-color: #ff14f0;
  border-color: #ff14f0;
  color: #000000;
}
.btn--pink:hover:focus, .btn--pink:focus:hover {
  background-color: rgb(253, 0, 236.8510638298);
  border-color: rgb(253, 0, 236.8510638298);
  box-shadow: 0 0 0 3px rgba(255, 20, 240, 0.3);
}

.btn--pink-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #ff14f0;
  color: #ff14f0;
}
.btn--pink-outline:visited {
  background-color: transparent;
  border-color: #ff14f0;
  color: #ff14f0;
}
.btn--pink-outline:hover {
  background-color: #ff14f0;
  border-color: #ff14f0;
  color: #000000;
  text-decoration: none;
}
.btn--pink-outline:focus, .btn--pink-outline:focus-visible {
  background-color: transparent;
  border-color: #ff14f0;
  color: #ff14f0;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 20, 240, 0.3);
}
.btn--pink-outline:active {
  background-color: rgb(253, 0, 236.8510638298);
  border-color: rgb(253, 0, 236.8510638298);
  color: #000000;
  transform: translateY(1px);
}
.btn--pink-outline:hover:focus, .btn--pink-outline:focus:hover {
  background-color: #ff14f0;
  border-color: #ff14f0;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(255, 20, 240, 0.3);
}

.btn--pink-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #ff14f0;
  color: #ff14f0;
}
.btn--pink-outline-give:visited {
  background-color: transparent;
  border-color: #ff14f0;
  color: #ff14f0;
}
.btn--pink-outline-give:hover {
  background-color: #ff14f0;
  border-color: #ff14f0;
  color: #000000;
  text-decoration: none;
}
.btn--pink-outline-give:focus, .btn--pink-outline-give:focus-visible {
  background-color: transparent;
  border-color: #ff14f0;
  color: #ff14f0;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 20, 240, 0.3);
}
.btn--pink-outline-give:active {
  background-color: rgb(253, 0, 236.8510638298);
  border-color: rgb(253, 0, 236.8510638298);
  color: #000000;
  transform: translateY(1px);
}
.btn--pink-outline-give:hover:focus, .btn--pink-outline-give:focus:hover {
  background-color: #ff14f0;
  border-color: #ff14f0;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(255, 20, 240, 0.3);
}

.btn--primary {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
}
.btn--primary:hover {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  text-decoration: none;
}
.btn--primary:focus, .btn--primary:focus-visible {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}
.btn--primary:active {
  background-color: rgb(0, 82.4904347826, 246.4);
  border-color: rgb(0, 82.4904347826, 246.4);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--primary:visited {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
}
.btn--primary:hover:focus, .btn--primary:focus:hover {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}

.btn--primary-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--primary-outline:visited {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--primary-outline:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  text-decoration: none;
}
.btn--primary-outline:focus, .btn--primary-outline:focus-visible {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}
.btn--primary-outline:active {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--primary-outline:hover:focus, .btn--primary-outline:focus:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}

.btn--primary-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--primary-outline-give:visited {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--primary-outline-give:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  text-decoration: none;
}
.btn--primary-outline-give:focus, .btn--primary-outline-give:focus-visible {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}
.btn--primary-outline-give:active {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--primary-outline-give:hover:focus, .btn--primary-outline-give:focus:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}

.btn--purple {
  background-color: #9933ff;
  border-color: #9933ff;
  color: #ffffff;
}
.btn--purple:hover {
  background-color: rgb(140.76, 26.52, 255);
  border-color: rgb(140.76, 26.52, 255);
  color: #ffffff;
  text-decoration: none;
}
.btn--purple:focus, .btn--purple:focus-visible {
  background-color: rgb(140.76, 26.52, 255);
  border-color: rgb(140.76, 26.52, 255);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(153, 51, 255, 0.3);
}
.btn--purple:active {
  background-color: rgb(134.64, 14.28, 255);
  border-color: rgb(134.64, 14.28, 255);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--purple:visited {
  background-color: #9933ff;
  border-color: #9933ff;
  color: #ffffff;
}
.btn--purple:hover:focus, .btn--purple:focus:hover {
  background-color: rgb(140.76, 26.52, 255);
  border-color: rgb(140.76, 26.52, 255);
  box-shadow: 0 0 0 3px rgba(153, 51, 255, 0.3);
}

.btn--purple-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #9933ff;
  color: #9933ff;
}
.btn--purple-outline:visited {
  background-color: transparent;
  border-color: #9933ff;
  color: #9933ff;
}
.btn--purple-outline:hover {
  background-color: #9933ff;
  border-color: #9933ff;
  color: #ffffff;
  text-decoration: none;
}
.btn--purple-outline:focus, .btn--purple-outline:focus-visible {
  background-color: transparent;
  border-color: #9933ff;
  color: #9933ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(153, 51, 255, 0.3);
}
.btn--purple-outline:active {
  background-color: rgb(140.76, 26.52, 255);
  border-color: rgb(140.76, 26.52, 255);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--purple-outline:hover:focus, .btn--purple-outline:focus:hover {
  background-color: #9933ff;
  border-color: #9933ff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(153, 51, 255, 0.3);
}

.btn--purple-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #9933ff;
  color: #9933ff;
}
.btn--purple-outline-give:visited {
  background-color: transparent;
  border-color: #9933ff;
  color: #9933ff;
}
.btn--purple-outline-give:hover {
  background-color: #9933ff;
  border-color: #9933ff;
  color: #ffffff;
  text-decoration: none;
}
.btn--purple-outline-give:focus, .btn--purple-outline-give:focus-visible {
  background-color: transparent;
  border-color: #9933ff;
  color: #9933ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(153, 51, 255, 0.3);
}
.btn--purple-outline-give:active {
  background-color: rgb(140.76, 26.52, 255);
  border-color: rgb(140.76, 26.52, 255);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--purple-outline-give:hover:focus, .btn--purple-outline-give:focus:hover {
  background-color: #9933ff;
  border-color: #9933ff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(153, 51, 255, 0.3);
}

.btn--red {
  background-color: #750014;
  border-color: #750014;
  color: #ffffff;
}
.btn--red:hover {
  background-color: rgb(107.64, 0, 18.4);
  border-color: rgb(107.64, 0, 18.4);
  color: #ffffff;
  text-decoration: none;
}
.btn--red:focus, .btn--red:focus-visible {
  background-color: rgb(107.64, 0, 18.4);
  border-color: rgb(107.64, 0, 18.4);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(117, 0, 20, 0.3);
}
.btn--red:active {
  background-color: rgb(102.96, 0, 17.6);
  border-color: rgb(102.96, 0, 17.6);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--red:visited {
  background-color: #750014;
  border-color: #750014;
  color: #ffffff;
}
.btn--red:hover:focus, .btn--red:focus:hover {
  background-color: rgb(107.64, 0, 18.4);
  border-color: rgb(107.64, 0, 18.4);
  box-shadow: 0 0 0 3px rgba(117, 0, 20, 0.3);
}

.btn--red-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #750014;
  color: #750014;
}
.btn--red-outline:visited {
  background-color: transparent;
  border-color: #750014;
  color: #750014;
}
.btn--red-outline:hover {
  background-color: #750014;
  border-color: #750014;
  color: #ffffff;
  text-decoration: none;
}
.btn--red-outline:focus, .btn--red-outline:focus-visible {
  background-color: transparent;
  border-color: #750014;
  color: #750014;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(117, 0, 20, 0.3);
}
.btn--red-outline:active {
  background-color: rgb(107.64, 0, 18.4);
  border-color: rgb(107.64, 0, 18.4);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--red-outline:hover:focus, .btn--red-outline:focus:hover {
  background-color: #750014;
  border-color: #750014;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(117, 0, 20, 0.3);
}

.btn--red-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #750014;
  color: #750014;
}
.btn--red-outline-give:visited {
  background-color: transparent;
  border-color: #750014;
  color: #750014;
}
.btn--red-outline-give:hover {
  background-color: #750014;
  border-color: #750014;
  color: #ffffff;
  text-decoration: none;
}
.btn--red-outline-give:focus, .btn--red-outline-give:focus-visible {
  background-color: transparent;
  border-color: #750014;
  color: #750014;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(117, 0, 20, 0.3);
}
.btn--red-outline-give:active {
  background-color: rgb(107.64, 0, 18.4);
  border-color: rgb(107.64, 0, 18.4);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--red-outline-give:hover:focus, .btn--red-outline-give:focus:hover {
  background-color: #750014;
  border-color: #750014;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(117, 0, 20, 0.3);
}

.btn--secondary {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
}
.btn--secondary:hover {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  color: #000000;
  text-decoration: none;
}
.btn--secondary:focus, .btn--secondary:focus-visible {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  color: #000000;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}
.btn--secondary:active {
  background-color: rgb(119.5904225352, 131.2636619718, 141.7695774648);
  border-color: rgb(119.5904225352, 131.2636619718, 141.7695774648);
  color: #000000;
  transform: translateY(1px);
}
.btn--secondary:visited {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
}
.btn--secondary:hover:focus, .btn--secondary:focus:hover {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}

.btn--secondary-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
}
.btn--secondary-outline:visited {
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
}
.btn--secondary-outline:hover {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
  text-decoration: none;
}
.btn--secondary-outline:focus, .btn--secondary-outline:focus-visible {
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}
.btn--secondary-outline:active {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  color: #000000;
  transform: translateY(1px);
}
.btn--secondary-outline:hover:focus, .btn--secondary-outline:focus:hover {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}

.btn--secondary-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
}
.btn--secondary-outline-give:visited {
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
}
.btn--secondary-outline-give:hover {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
  text-decoration: none;
}
.btn--secondary-outline-give:focus, .btn--secondary-outline-give:focus-visible {
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}
.btn--secondary-outline-give:active {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  color: #000000;
  transform: translateY(1px);
}
.btn--secondary-outline-give:hover:focus, .btn--secondary-outline-give:focus:hover {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}

.btn--silver-gray {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
}
.btn--silver-gray:hover {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  color: #000000;
  text-decoration: none;
}
.btn--silver-gray:focus, .btn--silver-gray:focus-visible {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  color: #000000;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}
.btn--silver-gray:active {
  background-color: rgb(119.5904225352, 131.2636619718, 141.7695774648);
  border-color: rgb(119.5904225352, 131.2636619718, 141.7695774648);
  color: #000000;
  transform: translateY(1px);
}
.btn--silver-gray:visited {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
}
.btn--silver-gray:hover:focus, .btn--silver-gray:focus:hover {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}

.btn--silver-gray-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
}
.btn--silver-gray-outline:visited {
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
}
.btn--silver-gray-outline:hover {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
  text-decoration: none;
}
.btn--silver-gray-outline:focus, .btn--silver-gray-outline:focus-visible {
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}
.btn--silver-gray-outline:active {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  color: #000000;
  transform: translateY(1px);
}
.btn--silver-gray-outline:hover:focus, .btn--silver-gray-outline:focus:hover {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}

.btn--silver-gray-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
}
.btn--silver-gray-outline-give:visited {
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
}
.btn--silver-gray-outline-give:hover {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
  text-decoration: none;
}
.btn--silver-gray-outline-give:focus, .btn--silver-gray-outline-give:focus-visible {
  background-color: transparent;
  border-color: #8b959e;
  color: #8b959e;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}
.btn--silver-gray-outline-give:active {
  background-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  border-color: rgb(126.0602816901, 137.1757746479, 147.1797183099);
  color: #000000;
  transform: translateY(1px);
}
.btn--silver-gray-outline-give:hover:focus, .btn--silver-gray-outline-give:focus:hover {
  background-color: #8b959e;
  border-color: #8b959e;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(139, 149, 158, 0.3);
}

.btn--spot {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
}
.btn--spot:hover {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  text-decoration: none;
}
.btn--spot:focus, .btn--spot:focus-visible {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}
.btn--spot:active {
  background-color: rgb(0, 82.4904347826, 246.4);
  border-color: rgb(0, 82.4904347826, 246.4);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--spot:visited {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
}
.btn--spot:hover:focus, .btn--spot:focus:hover {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}

.btn--spot-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--spot-outline:visited {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--spot-outline:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  text-decoration: none;
}
.btn--spot-outline:focus, .btn--spot-outline:focus-visible {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}
.btn--spot-outline:active {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--spot-outline:hover:focus, .btn--spot-outline:focus:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}

.btn--spot-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--spot-outline-give:visited {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
}
.btn--spot-outline-give:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  text-decoration: none;
}
.btn--spot-outline-give:focus, .btn--spot-outline-give:focus-visible {
  background-color: transparent;
  border-color: #1966ff;
  color: #1966ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}
.btn--spot-outline-give:active {
  background-color: rgb(2.6, 87.0991304348, 255);
  border-color: rgb(2.6, 87.0991304348, 255);
  color: #ffffff;
  transform: translateY(1px);
}
.btn--spot-outline-give:hover:focus, .btn--spot-outline-give:focus:hover {
  background-color: #1966ff;
  border-color: #1966ff;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(25, 102, 255, 0.3);
}

.btn--white {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #1966ff;
}
.btn--white:hover {
  background-color: rgb(234.6, 234.6, 234.6);
  border-color: rgb(234.6, 234.6, 234.6);
  color: #1966ff;
  text-decoration: none;
}
.btn--white:focus, .btn--white:focus-visible {
  background-color: rgb(234.6, 234.6, 234.6);
  border-color: rgb(234.6, 234.6, 234.6);
  color: #1966ff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.btn--white:active {
  background-color: rgb(224.4, 224.4, 224.4);
  border-color: rgb(224.4, 224.4, 224.4);
  color: #1966ff;
  transform: translateY(1px);
}
.btn--white:visited {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #1966ff;
}
.btn--white:hover:focus, .btn--white:focus:hover {
  background-color: rgb(234.6, 234.6, 234.6);
  border-color: rgb(234.6, 234.6, 234.6);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.btn--white-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.btn--white-outline:visited {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.btn--white-outline:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #1966ff;
  text-decoration: none;
}
.btn--white-outline:focus, .btn--white-outline:focus-visible {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.btn--white-outline:active {
  background-color: rgb(234.6, 234.6, 234.6);
  border-color: rgb(234.6, 234.6, 234.6);
  color: #1966ff;
  transform: translateY(1px);
}
.btn--white-outline:hover:focus, .btn--white-outline:focus:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #1966ff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.btn--white-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.btn--white-outline-give:visited {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.btn--white-outline-give:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #1966ff;
  text-decoration: none;
}
.btn--white-outline-give:focus, .btn--white-outline-give:focus-visible {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.btn--white-outline-give:active {
  background-color: rgb(234.6, 234.6, 234.6);
  border-color: rgb(234.6, 234.6, 234.6);
  color: #1966ff;
  transform: translateY(1px);
}
.btn--white-outline-give:hover:focus, .btn--white-outline-give:focus:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #1966ff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.btn--yellow {
  background-color: #ffeb00;
  border-color: #ffeb00;
  color: #000000;
}
.btn--yellow:hover {
  background-color: rgb(234.6, 216.2, 0);
  border-color: rgb(234.6, 216.2, 0);
  color: #000000;
  text-decoration: none;
}
.btn--yellow:focus, .btn--yellow:focus-visible {
  background-color: rgb(234.6, 216.2, 0);
  border-color: rgb(234.6, 216.2, 0);
  color: #000000;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 235, 0, 0.3);
}
.btn--yellow:active {
  background-color: rgb(224.4, 206.8, 0);
  border-color: rgb(224.4, 206.8, 0);
  color: #000000;
  transform: translateY(1px);
}
.btn--yellow:visited {
  background-color: #ffeb00;
  border-color: #ffeb00;
  color: #000000;
}
.btn--yellow:hover:focus, .btn--yellow:focus:hover {
  background-color: rgb(234.6, 216.2, 0);
  border-color: rgb(234.6, 216.2, 0);
  box-shadow: 0 0 0 3px rgba(255, 235, 0, 0.3);
}

.btn--yellow-outline {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #ffeb00;
  color: #ffeb00;
}
.btn--yellow-outline:visited {
  background-color: transparent;
  border-color: #ffeb00;
  color: #ffeb00;
}
.btn--yellow-outline:hover {
  background-color: #ffeb00;
  border-color: #ffeb00;
  color: #000000;
  text-decoration: none;
}
.btn--yellow-outline:focus, .btn--yellow-outline:focus-visible {
  background-color: transparent;
  border-color: #ffeb00;
  color: #ffeb00;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 235, 0, 0.3);
}
.btn--yellow-outline:active {
  background-color: rgb(234.6, 216.2, 0);
  border-color: rgb(234.6, 216.2, 0);
  color: #000000;
  transform: translateY(1px);
}
.btn--yellow-outline:hover:focus, .btn--yellow-outline:focus:hover {
  background-color: #ffeb00;
  border-color: #ffeb00;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(255, 235, 0, 0.3);
}

.btn--yellow-outline-give {
  border: 2.5px solid;
  background-color: transparent;
  border-color: #ffeb00;
  color: #ffeb00;
}
.btn--yellow-outline-give:visited {
  background-color: transparent;
  border-color: #ffeb00;
  color: #ffeb00;
}
.btn--yellow-outline-give:hover {
  background-color: #ffeb00;
  border-color: #ffeb00;
  color: #000000;
  text-decoration: none;
}
.btn--yellow-outline-give:focus, .btn--yellow-outline-give:focus-visible {
  background-color: transparent;
  border-color: #ffeb00;
  color: #ffeb00;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(255, 235, 0, 0.3);
}
.btn--yellow-outline-give:active {
  background-color: rgb(234.6, 216.2, 0);
  border-color: rgb(234.6, 216.2, 0);
  color: #000000;
  transform: translateY(1px);
}
.btn--yellow-outline-give:hover:focus, .btn--yellow-outline-give:focus:hover {
  background-color: #ffeb00;
  border-color: #ffeb00;
  color: #000000;
  box-shadow: 0 0 0 3px rgba(255, 235, 0, 0.3);
}

.btn--small {
  font-size: 0.875rem;
  line-height: 1.375;
  padding: 0.375rem 1rem;
}

.btn--medium {
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.5rem 1.25rem;
}

.btn--large {
  font-size: 1.125rem;
  line-height: 1.625;
  padding: 0.625rem 1.5rem;
}

.btn--svg {
  display: block;
  width: 20px;
  height: 20px;
}

.btn--full,
.button--full {
  display: inline-block;
  width: 100%;
  min-width: 100%;
}

.btn--outline {
  font-size: 18px;
  background-color: transparent;
  border: 2px solid #1966ff;
  color: #1966ff;
}
.btn--outline:hover {
  background-color: #1966ff;
  color: #ffffff;
}

.btn--icon,
.button--icon {
  gap: 0.25rem;
}
.btn--icon.btn--small,
.button--icon.btn--small {
  padding: 0.375rem;
}
.btn--icon.btn--medium,
.button--icon.btn--medium {
  padding: 0.5rem;
}
.btn--icon.btn--large,
.button--icon.btn--large {
  padding: 0.75rem;
}
.btn--icon:not(.btn--small):not(.btn--large),
.button--icon:not(.btn--small):not(.btn--large) {
  padding: 0.5rem;
}

.btn + .btn,
.button + .button,
.btn + .button,
.button + .btn {
  margin-left: 1em;
}

.btn--rounded {
  border-radius: 24px;
}

.btn--edit {
  font-size: 0.875rem;
  line-height: 1.375;
  padding: 0.375rem 1rem;
  letter-spacing: 0.5px;
  font-weight: 500;
  border: 1px solid transparent;
}
.btn--edit:hover {
  text-decoration: underline;
  text-decoration-color: #ffffff;
  text-underline-offset: 4px;
}

a.btn[aria-disabled=true],
a.button[aria-disabled=true] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

a.btn:focus-visible,
a.button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/*
SHORTHANDER USE CASES:

1. EXACT VALUES (When you need specific pixel values)
   @include padding(20px 40px);
   @include margin(10px auto 20px);
   @include absolute(0 0 n 50%);

2. POSITIONING LAYOUTS
   @include fixed(0 0 0 0);         // Full screen overlay
   @include absolute(10px n n 20px); // Top-left positioned
   @include relative(0 0 10px 0);    // Slight bottom offset

3. COMPLEX LAYOUTS WITH NULLS
   @include margin(n auto);          // Center horizontally only
   @include padding(20px n 10px);    // Top/bottom padding, no horizontal

4. AUTO VALUES
   @include margin(0 auto);          // Classic center
   @include padding(auto 20px);      // Auto top/bottom

EXAMPLES:

// Modal overlay
.modal-overlay {
  @include fixed(0 0 0 0);
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

// Centered card
.card {
  @include margin(20px auto);
  @include padding(30px 40px);
  max-width: 600px;
}

// Offset element
.offset-element {
  @include relative(n n n -10px);  // Left offset only
}

// Complex button spacing
.button-group {
  @include margin(10px n 20px auto); // Top, right null, bottom, left auto

  .button {
    @include padding(12px 24px);
    @include margin(n 8px n n);      // Right margin only
  }
}

// Responsive positioning
.sidebar {
  @include position-responsive(
    absolute,
    (0 n 0 -300px),  // Hidden on mobile
    (0 n 0 0),       // Visible on desktop
    'lg'
  );
}

// Advanced positioning utilities
.hero-overlay {
  @include cover;                   // Full coverage
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
}

.popup {
  @include center-absolute;         // Perfect center
  @include padding(40px);
  background: white;
  border-radius: 8px;
}

.sticky-header {
  @include sticky(0);               // Stick to top
  background: white;
  z-index: 100;
}

MIGRATION NOTES:
================

✅ All existing shorthander code continues to work unchanged
✅ Enhanced with new positioning utilities
✅ Dart Sass 3.0.0 compatible (no @import dependencies)
✅ Declaration order optimized for Dart Sass 1.92.0+
✅ Works alongside the new design system spacing

The shorthander is perfect for:
- Exact pixel positioning
- Complex layout requirements
- One-off spacing that doesn't fit your design system
- Legacy code that needs specific values

Use alongside the design system spacing for maximum flexibility!
*/
:root {
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;
  --spacing-xxxxl: 96px;
  --spacing-xxxxxl: 128px;
}

/*
SEMANTIC BREAKPOINT USAGE:

1. Design system approach with clear intent:

@include pad('all', ('phablet', 'desktop'));        // Responsive padding from phablet to desktop
@include space-margin('vert', ('tablet'));          // Tablet-appropriate vertical margins
@include mq('tablet-xl') { }                        // Clear breakpoint meaning

2. Common patterns:

// Mobile-first responsive padding
.section {
  @include pad('all', ('mobile', 'tablet'));        // Small to medium screens
}

// Desktop enhancements
.hero {
  @include pad('vert', ('tablet', 'desktop-xl'));   // Vertical padding scaling
}

// Specific device targeting
.sidebar {
  display: none;

  @include mq('tablet-xl') {                         // Show sidebar on larger tablets
    display: block;
  }
}

3. Layout containers:

.container {
  @include container($site-max, ('phablet', 'desktop-xl'));
}

4. Block spacing with semantic intent:

.content-block {
  @include block-spacing('tablet', ('tablet', 'desktop'));
}

BREAKPOINT REFERENCE:
- mobile: 300px     (tiny screens)
- phablet: 480px    (larger phones)
- tablet: 700px     (small tablets)
- tablet-xl: 768px  (standard tablets)
- tablet-xxl: 920px (large tablets)
- desktop: 1024px   (desktop starts)
- desktop-xl: 1200px (large desktop)
- desktop-xxl: 1500px (wide screens)
- desktop-xxxl: 1700px (very wide)
- desktop-xxxxl: 2000px (ultra wide)

This system provides clear, self-documenting breakpoint usage that matches
your actual design decisions and device targeting.
*/
/**
 * Line Mixins
 * Collection of SCSS mixins for creating vertical lines
 */
/**
 * Creates a vertical line pseudo-element
 * @param {String} $left-position - Position from left (e.g., 2rem, var(--line-left-mobile))
 * @param {Color} $background-color - Line color
 */
/**
 * Creates dynamic line color using CSS custom properties
 * @param {Color} $color - Line color (can be changed at runtime)
 */
/**
 * Creates responsive vertical line with predefined positioning
 * @param {Color} $color - Line color
 * @param {String} $position - 'mobile' (default) or 'desktop'
 */
/*
// Height only
@include mq-height(600px) {
  .sidebar { display: block; }
}

// Height + semantic width breakpoint
@include mq-height(500px, 'tablet') {
  .hero { min-height: 80vh; }
}

// Height + semantic width breakpoint (desktop and up)
@include mq-height(700px, 'desktop') {
  .full-height-section { height: 100vh; }
}
*/
.half-width {
  width: 50%;
}

.third-height {
  height: 33.3333333333%;
}

.golden-ratio {
  width: 61.5384615385%;
}

/**
 * These are single-use mixins that contain base global
 * styles for both the front-end of the site and in the editor.
 * See:
 * static/scss/partials/global/_base.scss
 * src/Blocks/editor.scss (line 65)
 */
/* Removes link styling from H2 and H3 subheadings if a link is mistakenly applied.
   This ensures the subhead retains its original appearance by removing underline,
   inheriting text color, and optionally disabling clicks. */
.gutenberg-content h2 a,
.gutenberg-content h2 a:hover,
.gutenberg-content h3 a,
.gutenberg-content h3 a:hover,
.gutenberg-content .wp-block-heading a,
.gutenberg-content .wp-block-heading a:hover {
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: none !important;
}

/**
 * These are single-use mixins that contain base global
 * styles for both the front-end of the site and in the editor.
 * See:
 * static/scss/partials/global/_base.scss
 * src/Blocks/editor.scss (line 65)
 */
/* tokens, mixins, functions */
/* Forward each slice of your system */
/* base
================================================================= */
/* Box model
----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* add selections colors
----------------------------------------------------------------- */
* {
  /* stylelint-disable */
}
* ::-moz-selection {
  background: #1966ff;
  color: #ffffff;
  text-shadow: none;
}
* {
  /* stylelint-enable */
}
* ::-moz-selection {
  background: #1966ff;
  color: #ffffff;
  text-shadow: none;
}
* ::selection {
  background: #1966ff;
  color: #ffffff;
  text-shadow: none;
}

/* HTML5 display definitions
----------------------------------------------------------------- */
/* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */
audio,
canvas,
video {
  display: inline-block;
  max-width: 100%;
  *display: inline;
  *zoom: 1;
}

/* Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) {
  display: none;
  height: 0;
}

/* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. Known issue:no IE 6 support. */
[hidden] {
  display: none !important;
}

/* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */
figure {
  margin: 25px 0;
}

/* Base
----------------------------------------------------------------- */
/* Address `font-family` inconsistency between `textarea` and other form elements. */
button,
input,
select,
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  font-family: inherit;
}

section {
  margin: 0;
}

/* Embedded content
----------------------------------------------------------------- */
/* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 2. Improve image quality when scaled in IE 7. */
img {
  border: 0;
  -ms-interpolation-mode: bicubic; /* stylelint-disable-line property-no-vendor-prefix */
}

img,
a img {
  height: auto;
  width: 100%;
}

object,
embed {
  height: auto;
  max-width: 100%;
}

/* Correct overflow displayed oddly in IE 9. */
svg:not(:root) {
  overflow: hidden;
}

.svg-filters {
  position: fixed;
  top: 100%;
  left: 100%;
  height: 0;
  width: 0;
}

.skip-to-content {
  top: 0;
}
@media (min-width: 700px) {
  .admin-bar .skip-to-content {
    top: calc(0px + var(--wp-admin--admin-bar--height, 32px));
  }
}
.skip-to-content {
  position: absolute;
  left: -999px;
  height: 1px;
  width: 1px;
  color: #ffffff;
  overflow: hidden;
  text-decoration: none;
  z-index: -100;
}
.skip-to-content:focus, .skip-to-content:active {
  background-color: #000000;
  left: 0;
  width: auto;
  height: auto;
  overflow: auto;
  padding: 16px 20px;
  z-index: 101;
}

#content {
  outline: 0;
  flex-grow: 1;
}

.hidden {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
.hidden.focusable:active, .hidden.focusable:focus {
  clip-path: none;
  height: auto;
  overflow: visible;
  position: static;
  width: auto;
}

/* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using `em` units.
2. Prevent iOS text size adjust after orientation change, without disabling user zoom.
3. Normalize font rendering in Firefox */
html {
  font-size: 100%; /* 1 */
  /* stylelint-disable */
  -moz-osx-font-smoothing: #666666; /* 3 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  /* stylelint-enable */
  font-family: inherit;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion) {
  html {
    scroll-behavior: auto;
  }
}

/* Address margins handled incorrectly in IE 6/7. */
body {
  font-size: 17px;
}
@media (min-width: 400px) and (max-width: 1399px) {
  body {
    font-size: calc(17px + (20 - 17) * (100vw - 400px) / (1400 - 400));
  }
}
@media (min-width: 1400px) {
  body {
    font-size: 20px;
  }
}
body {
  color: #000000;
  font-weight: 400;
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, FreeSans, Arial, system-ui, sans-serif;
  line-height: 1.55;
  font-size: 18px;
  line-height: 1.8;
  font-weight: 400;
  background-color: #ffffff;
  margin: 0;
  /* stylelint-disable */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* stylelint-enable */
}

*:first-child {
  margin-top: 0;
}

a:active,
a:hover {
  text-decoration: none;
}

.base-body a {
  text-decoration: none;
}

a {
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--c-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  color: var(--c-blue);
  text-decoration-color: var(--c-blue);
}

button {
  cursor: pointer;
}

abbr[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

b,
strong {
  font-weight: 500;
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, FreeSans, Arial, system-ui, sans-serif;
}

h1,
.h1 {
  font-size: 28px;
}
@media (min-width: 400px) and (max-width: 1999px) {
  h1,
  .h1 {
    font-size: calc(28px + (60 - 28) * (100vw - 400px) / (2000 - 400));
  }
}
@media (min-width: 2000px) {
  h1,
  .h1 {
    font-size: 60px;
  }
}
h1,
.h1 {
  color: #000000;
  font-weight: 600;
  font-family: "Georgia Pro", Georgia, serif;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h2,
.h2 {
  color: #000000;
  font-weight: 600;
  font-family: "Georgia Pro", Georgia, serif;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 500;
  font-size: clamp(1.75rem, 5vw, 3.25rem);
}

h3,
.h3 {
  color: #000000;
  font-weight: 600;
  font-family: "Georgia Pro", Georgia, serif;
  line-height: 1.25;
  font-weight: 500;
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, FreeSans, Arial, system-ui, sans-serif;
  font-size: 20px;
}

h4,
.h4 {
  color: #000000;
  font-weight: 600;
  font-family: "Georgia Pro", Georgia, serif;
  letter-spacing: 0;
  line-height: 1.25;
}

h5,
.h5 {
  color: #000000;
  font-weight: 600;
  font-family: "Georgia Pro", Georgia, serif;
  letter-spacing: 0;
  line-height: 1.25;
  font-size: 24px;
}

h6,
.h6 {
  font-size: 11px;
}
@media (min-width: 400px) and (max-width: 1399px) {
  h6,
  .h6 {
    font-size: calc(11px + (13 - 11) * (100vw - 400px) / (1400 - 400));
  }
}
@media (min-width: 1400px) {
  h6,
  .h6 {
    font-size: 13px;
  }
}
h6,
.h6 {
  color: inherit;
  line-height: 1.25;
  font-family: "Georgia Pro", Georgia, serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
h6 b,
h6 strong,
.h6 b,
.h6 strong {
  font-weight: 500;
}
h6,
.h6 {
  font-size: 18px;
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, FreeSans, Arial, system-ui, sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 5px !important;
}

h6 + p {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1em 0 0;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  font-size: 0.75em;
  font-weight: normal;
}

blockquote {
  margin: 1em 40px;
}

dfn {
  font-style: italic;
}

hr { /* stylelint-disable-line property-no-vendor-prefix */
  box-sizing: content-box;
  height: 0;
}

mark {
  background-color: rgba(0, 0, 0, 0.05);
  color: #000000;
}

p,
pre {
  margin: 1em 0 0;
}

code,
kbd,
pre,
samp {
  font-family: "Roboto Mono", ui-monospace, Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
  font-size: 17px;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: none;
}

q::before,
q::after {
  content: "";
  content: none;
}

small {
  font-size: 80%;
}

sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

s {
  background: linear-gradient(180deg, transparent 55%, currentColor 55%, currentColor calc(55% + 1px), transparent calc(55% + 1px));
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

dd {
  margin: 0 0 0 40px;
}

menu,
ol,
ul {
  padding: 0 0 0 40px;
}

ol {
  list-style: none;
  counter-reset: item;
  padding-left: 0;
}

ol li {
  counter-increment: item;
  position: relative;
  padding-left: 1.5rem; /* space reserved for number */
}

ol li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  width: 1.5rem;
  text-align: left;
}

ol li::marker {
  font-weight: 600;
}

nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}

nav li a {
  text-decoration: none;
}

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

.highlight {
  background-color: #ffeb00;
}

hr {
  margin-left: 24px;
  margin-right: 24px;
}
@media (min-width: 700px) {
  hr {
    margin-left: 32px;
    margin-right: 32px;
  }
}
hr {
  background-color: #000000;
  border: 0;
  display: block;
  height: 1px;
  padding: 0;
}

@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("src/fonts/roboto-mono-regular.woff2") format("woff2"), url("src/fonts/roboto-mono-regular.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  src: url("src/fonts/roboto-mono-italic.woff2") format("woff2"), url("src/fonts/roboto-mono-italic.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("src/fonts/roboto-mono-500.woff2") format("woff2"), url("src/fonts/roboto-mono-500.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  src: url("src/fonts/roboto-mono-500italic.woff2") format("woff2"), url("src/fonts/roboto-mono-500italic.woff") format("woff");
}
/* Search Section */
.search-section {
  background: var(--c-background-light);
  padding: 2rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Desktop: reduce padding to fit within max-height: 108px */
}
@media screen and (min-width: 941px) {
  .search-section {
    padding: 1.5rem 2rem;
  }
}

.search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 50rem;
  margin: 0 auto;
}
@media screen and (min-width: 941px) {
  .search-container {
    flex-direction: row;
  }
}

.search-section h2 {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--c-title);
  line-height: 1.2;
  margin: 0;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  max-width: 30rem;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: 54px;
  box-sizing: border-box;
}
@media screen and (min-width: 941px) {
  .search-form {
    width: 600px;
  }
}

.icon-search {
  width: 25px;
  height: 25px;
}

.search-input {
  flex: 1;
  padding: 1rem 1.5rem;
  border: none;
  font-size: 1rem;
  outline: none;
  min-width: 200px;
}

.search-button {
  background: var(--c-black, #000) !important;
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
  width: -moz-fit-content;
  width: fit-content;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-button:hover {
  background: #000;
}

/* Helpers and utility classes */
.edit-post-link {
  font-family: var(--ff-monospace);
  font-weight: 400;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: var(--z-10);
}

/* Helpers and utility classes */
/* Helpers and utility classes */
/* CSS Custom Properties (Variables)
   ========================================================================== */
:root {
  /* Line System */
  --line-width: 0.0625rem; /* 1px */
  --line-left-mobile: 1.5rem; /* 24px */
  --line-left-desktop: 3.5rem; /* 56px */
}

/* Vertical Line Mixin (Shared Line Styles)
========================================================================== */
.vertical-line {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--line-width);
  z-index: 1;
}

.vertical-line--gray {
  background: var(--c-line-light-gray-1);
}

.vertical-line--accent {
  background: var(--c-line-spot);
}

.vertical-line--mobile {
  left: var(--line-left-mobile);
}

.vertical-line--desktop {
  left: var(--line-left-desktop);
}

.p-env-notice {
  left: auto;
  right: 6px;
  z-index: 1000000000000000000000000;
}

.list-no-style {
  margin: 0;
}

.inline-link-wrapper {
  text-align: right;
}

.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.inline-link .icon {
  width: 28px;
  height: 28px;
  color: #1966ff;
}

.no-link-style {
  text-decoration: none;
  color: inherit;
}

.nowrap {
  white-space: nowrap;
}

:root {
  --header-height: auto;
  --footer-height: auto;
  --navigation-height: 80px; /* Add explicit nav height */
  --content-section-padding-mobile: 4rem 2rem;
  --content-section-padding-desktop: 4rem 2rem;
  --content-section-min-height: 20rem;
  --content-section-line-z-index: 1;
  --content-wrapper-max-width: 75rem; /* 1200px */
  --content-wrapper-offset: 2rem;
}

.site-layout {
  display: grid;
  grid-template-areas: "navigation" "header" "main" "footer";
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
  /* Navigation area - universal across all pages */
}
.site-layout .site-navigation {
  grid-area: navigation;
  z-index: var(--z-10);
}
.site-layout__header {
  grid-area: header;
  z-index: var(--z-1);
}
.site-layout__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
}
.site-layout__footer {
  grid-area: footer;
}

/* Alternative: Fixed Navigation Layout */
.site-layout--fixed-nav {
  grid-template-areas: "header" "main" "footer";
  grid-template-rows: auto 1fr auto;
}
.site-layout--fixed-nav .site-navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-11);
}
.site-layout--fixed-nav__header {
  /* Offset for fixed nav if needed */
  margin-top: var(--navigation-height);
}

/* Fix for fullscreen headers - account for navigation */
.page-header.home-page-hero,
.page-header--fullscreen {
  /* Subtract navigation height from viewport height */
  min-height: calc(100vh - var(--navigation-height));
  position: relative;
  /* Or if you want true fullscreen that overlaps nav */
}
.page-header.home-page-hero.header-overlaps-nav,
.page-header--fullscreen.header-overlaps-nav {
  min-height: 100vh;
  margin-top: calc(-1 * var(--navigation-height));
}

/* Alternative: Fullscreen header that accounts for nav naturally */
.site-layout:has(.page-header--fullscreen) {
  /* When fullscreen header is present, make it fill remaining viewport */
  grid-template-rows: auto 1fr auto;
}
.site-layout:has(.page-header--fullscreen) .site-layout__header {
  min-height: calc(100vh - var(--navigation-height));
}

/* Base Content Section Styles */
.content-section {
  padding: var(--content-section-padding-mobile);
  position: relative;
  /* Default Transparent Line */
}
.content-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--line-left-mobile);
  width: var(--line-width);
  height: 100%;
  background: var(--c-line-blue);
  z-index: 1;
}
.content-section {
  /* Line Color Modifier Classes */
}
.content-section.line-blue {
  --custom-line-color: var(--c-line-blue);
}
.content-section.line-blue::before {
  background: var(--custom-line-color);
}
.content-section.line-green {
  --custom-line-color: var(--c-line-green);
}
.content-section.line-green::before {
  background: var(--custom-line-color);
}
.content-section.line-purple {
  --custom-line-color: var(--c-line-purple);
}
.content-section.line-purple::before {
  background: var(--custom-line-color);
}
.content-section.line-dark {
  --custom-line-color: var(--c-line-dark-gray-2);
}
.content-section.line-dark::before {
  background: var(--custom-line-color);
}
.content-section.line-accent {
  --custom-line-color: var(--c-line-accent);
}
.content-section.line-accent::before {
  background: var(--custom-line-color);
}
.content-section .content-wrapper {
  max-width: var(--content-wrapper-max-width);
  margin: 0 auto;
  padding-left: calc(var(--line-left-mobile) + var(--content-wrapper-offset));
}
.content-section {
  /* Desktop Adjustments */
}
@media screen and (min-width: 941px) {
  .content-section {
    padding: var(--content-section-padding-desktop);
  }
  .content-section::before {
    left: var(--line-left-desktop);
  }
  .content-section .content-wrapper {
    padding-left: calc(var(--line-left-desktop) + var(--content-wrapper-offset));
  }
}

/* Page- or template-specific layers */
.page-404 {
  padding: 2rem;
}

/* Basic Page */
.content-section__title {
  margin-bottom: 1rem;
}

/* Leadership Archive Styles */
.leadership-archive {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.leadership-archive__wrapper {
  width: 100%;
}
.leadership-archive__header {
  text-align: center;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .leadership-archive__header {
    margin-bottom: 4rem;
  }
}
.leadership-archive__title {
  font-family: var(--ff-sans);
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: #000;
  text-align: left;
}
@media (min-width: 768px) {
  .leadership-archive__title {
    font-size: 3rem;
  }
}
.leadership-archive__description {
  font-size: 1.125rem;
  color: #374151;
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .leadership-archive__description {
    font-size: 1.25rem;
  }
}
.leadership-archive__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .leadership-archive__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .leadership-archive__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}
.leadership-archive__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}
.leadership-archive__pagination-prev, .leadership-archive__pagination-next {
  color: #1966ff;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}
.leadership-archive__pagination-prev:hover, .leadership-archive__pagination-next:hover {
  background-color: #f3f4f6;
}
.leadership-archive__pagination-current {
  color: #6b7280;
  font-weight: 500;
}
.leadership-archive__empty {
  text-align: center;
  padding: 4rem 2rem;
  color: #6b7280;
}
.leadership-archive__empty-title {
  font-size: 1.5rem;
  margin: 0 0 1rem;
}
.leadership-archive__empty-message {
  font-size: 1.125rem;
  margin: 0;
}

/* Leadership Card Component */
.leadership-card {
  background: white;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.leadership-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
}
.leadership-card__photo-link {
  display: block;
  position: relative;
  text-decoration: none;
}
.leadership-card__photo-link:focus {
  outline: 2px solid #1966ff;
  outline-offset: 2px;
}
.leadership-card__photo-container {
  position: relative;
  aspect-ratio: 409/474;
  overflow: hidden;
}
.leadership-card__photo {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.leadership-card__photo-placeholder {
  width: 100%;
  height: 100%;
  background: #D9D9D9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: transform 0.3s ease;
}
.leadership-card__photo-placeholder svg {
  opacity: 0.8;
}
.leadership-card__photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(25, 102, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}
.leadership-card__photo-overlay-text {
  color: white;
  font-weight: 600;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.leadership-card__photo-link:hover .leadership-card__photo {
  transform: scale(1.05);
}
.leadership-card__photo-link:hover .leadership-card__photo-placeholder {
  transform: scale(1.05);
}
.leadership-card__photo-link:hover .leadership-card__photo-overlay {
  opacity: 1;
}
.leadership-card__header {
  padding: 1.5rem 1.5rem 1rem;
}
.leadership-card__name {
  font-family: var(--ff-serif);
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #000;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .leadership-card__name {
    font-size: 1.5rem;
  }
}
.leadership-card__position {
  font-size: 1rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .leadership-card__position {
    font-size: 1.125rem;
  }
}
.leadership-card__divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent);
  margin: 0 1.5rem;
}
.leadership-card__footer {
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.leadership-card__email {
  color: #1966ff;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s ease;
}
.leadership-card__email:hover {
  color: #1e40af;
}
.leadership-card__email::before {
  content: "✉ ";
  margin-right: 0.25rem;
  opacity: 0.7;
}
.leadership-card__bio-link {
  color: #374151;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border: 0px;
  transition: all 0.2s ease;
}
.leadership-card__bio-link:hover {
  transform: translateY(-1px);
}

/* Animation for page load */
.leadership-card {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}
.leadership-card:nth-child(1) {
  animation-delay: 0s;
}
.leadership-card:nth-child(2) {
  animation-delay: 0.1s;
}
.leadership-card:nth-child(3) {
  animation-delay: 0.2s;
}
.leadership-card:nth-child(4) {
  animation-delay: 0.3s;
}
.leadership-card:nth-child(5) {
  animation-delay: 0.4s;
}
.leadership-card:nth-child(6) {
  animation-delay: 0.5s;
}
.leadership-card:nth-child(7) {
  animation-delay: 0.6s;
}
.leadership-card:nth-child(8) {
  animation-delay: 0.7s;
}
.leadership-card:nth-child(9) {
  animation-delay: 0.8s;
}
.leadership-card:nth-child(10) {
  animation-delay: 0.9s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Print styles */
@media print {
  .leadership-card {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    box-shadow: none;
    border: 1px solid #e5e7eb;
  }
  .leadership-card:hover {
    transform: none;
  }
  .leadership-archive__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
.search-section {
  max-height: 208px;
  overflow: hidden;
}
@media screen and (min-width: 941px) {
  .search-section {
    max-height: 108px;
    padding: 1.5rem 2rem;
  }
}
.search-section h2 {
  margin: 0;
}

.search-input {
  width: 100%;
  max-width: 320px;
}
@media screen and (min-width: 941px) {
  .search-input {
    width: 473px;
    max-width: none;
  }
}

/* Leadership Profile Component */
.leadership-profile {
  max-width: 1297px;
  margin: 0;
  margin-bottom: 3rem;
  padding: 0 48px 0 48px;
  overflow: hidden;
  animation: fadeInUp 0.6s ease-out;
}
@media screen and (min-width: 948px) {
  .leadership-profile {
    padding: 0 0 0 110px;
  }
}
.leadership-profile {
  /* Profile Header */
}
.leadership-profile__header {
  padding: 0rem 0 2rem;
  color: var(--c-black);
}
.leadership-profile__breadcrumb {
  color: #1966FF;
  font-size: 18px;
  font-weight: 600;
  opacity: 0.9;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.leadership-profile__name {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  margin-top: 0.5rem;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .leadership-profile__name {
    font-size: 3rem;
  }
}
.leadership-profile__contact {
  margin-top: 0.25rem;
  line-height: 1.3;
}
.leadership-profile__position {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  opacity: 0.95;
}
.leadership-profile__email {
  display: inline-flex;
  align-items: center;
  color: #000;
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;
  padding: 0;
  margin-top: 0.15rem;
  transition: all 0.2s ease;
}
.leadership-profile__email:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}
.leadership-profile__email .icon {
  margin-right: 0.5rem;
  fill: currentColor;
}
.leadership-profile {
  /* Main Content Grid */
}
.leadership-profile__content {
  display: grid;
  grid-template-areas: "photo" "bio";
  gap: 1rem;
  min-height: 400px;
}
@media (min-width: 950px) {
  .leadership-profile__content {
    grid-template-areas: "photo bio";
    grid-template-columns: 400px 1fr;
    gap: 4rem;
  }
}
.leadership-profile__photo-container {
  grid-area: photo;
  position: relative;
  aspect-ratio: 409/474;
  overflow: hidden;
  background: #D9D9D9;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 409px;
}
.leadership-profile__photo-container::before {
  content: "";
  width: 60px;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.8;
}
.leadership-profile__photo-container:has(img)::before {
  display: none;
}
.leadership-profile__photo {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.leadership-profile__bio-container {
  grid-area: bio;
  background-color: var(--c-white);
}
@media (min-width: 768px) {
  .leadership-profile__bio-container {
    padding: 0;
  }
}
.leadership-profile__bio {
  font-size: 18px;
  line-height: 1.7;
  color: #374151;
  margin: 0;
}
.leadership-profile__bio p {
  margin: 0 0 1.5rem;
}
.leadership-profile__bio p:last-child {
  margin-bottom: 0;
}

/* Back link */
.leadership-profile__actions {
  padding: 3rem 0 3rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  transition: transform 0.2s ease;
}
.leadership-profile__actions:hover {
  transform: translateX(-2px);
}
.leadership-profile__actions:hover .leadership-profile__back-link {
  text-decoration: underline;
  text-decoration-color: #1966FF;
}

.leadership-profile__back-arrow {
  font-weight: 700;
}

.leadership-profile__back-link {
  color: #000;
  text-decoration: none;
  font-weight: 700;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.leadership-profile__photo-print {
  display: none;
}

/* Print styles */
@media print {
  .leadership-profile {
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow: visible;
    animation: none;
  }
  .leadership-profile__header {
    padding: 2rem;
  }
  .leadership-profile__name {
    font-size: 22pt;
  }
  .leadership-profile__breadcrumb {
    font-size: 10pt;
  }
  .leadership-profile__position {
    font-size: 12pt;
  }
  .leadership-profile__email {
    font-size: 11pt;
    color: #000;
    text-decoration: none;
  }
  .leadership-profile__email::after {
    content: none !important;
  }
  .leadership-profile__content {
    display: block;
    padding: 2rem;
  }
  .leadership-profile__photo-container {
    display: none !important;
  }
  .leadership-profile__photo-print {
    display: block;
    float: left;
    width: 200px;
    height: auto;
    margin: 0 1.5rem 1rem 0;
  }
  .leadership-profile__bio-container {
    margin-left: calc(200px + 1.5rem);
    margin-top: 0;
    padding-top: 0;
  }
  .leadership-profile__bio {
    font-size: 11pt;
    line-height: 1.5;
    color: #000;
    margin-top: 0;
    padding-top: 0;
  }
  .leadership-profile__bio p:first-child {
    margin-top: 0;
  }
  .leadership-profile__actions {
    display: none !important;
    visibility: hidden !important;
  }
}
/* Basic Page */
/* ==========================================================================
   Mega Menu Component - SCSS
   _menu-mega.scss
   Mobile-first overlay navigation styles matching codepen reference
   ========================================================================== */
:root {
  --mega-menu-z-index: 2000;
  --mega-menu-close-z-index: 3000;
  --mega-menu-transition: 0.3s ease;
  --mega-menu-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --mega-col-width: 208px;
  --mega-col-width-wide: 283px;
  --mega-col-gap: 72px;
}

/* ==========================================================================
   Body State - Prevent scrolling when mega menu is open
   ========================================================================== */
body.mega-menu-open {
  overflow: hidden;
}

/* ==========================================================================
   MEGA MENU - MOBILE FIRST (< 1014px)
   On mobile: appears BELOW navbar, navbar stays visible
   ========================================================================== */
.mega-menu {
  position: fixed;
  top: 120px; /* Start below 120px navbar on mobile (border is inside height with border-box) */
  left: 0;
  width: 100%;
  height: calc(100% - 120px);
  background: var(--c-bg);
  z-index: 3500; /* Above site-navigation (3000) on mobile */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mega-menu-transition), visibility 0s linear 0.3s;
  overflow-y: auto;
  /* Active state */
}
.mega-menu.mega-menu--active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--mega-menu-transition), visibility 0s linear 0s;
}

/* Force mobile mega menu layout below desktop breakpoint */
@media (max-width: 1349px) {
  .mega-menu {
    top: 116px !important;
    height: calc(100% - 116px) !important;
    z-index: 3500 !important;
    background: var(--c-bg) !important;
  }
  /* Admin bar offset for mobile mega menu */
  .admin-bar .mega-menu {
    top: calc(116px + var(--wp-admin--admin-bar--height, 46px)) !important;
    height: calc(100% - 116px - var(--wp-admin--admin-bar--height, 46px)) !important;
  }
  /* Admin bar is 32px at 783px+ */
}
@media screen and (max-width: 1349px) and (min-width: 783px) {
  .admin-bar .mega-menu {
    top: 148px !important;
    height: calc(100% - 116px - 32px) !important;
  }
}
@media (max-width: 1349px) {
  .mega-menu__container {
    position: relative !important;
    min-height: 100% !important;
    padding: 0 1.5rem 2rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .mega-menu__container::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 1.5rem !important;
    width: var(--line-width, 1px) !important;
    background: var(--c-blue) !important;
    z-index: 1 !important;
  }
  .mega-menu__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 1.5rem !important;
    padding-left: calc(var(--line-left-mobile, 1.5rem) + 1rem) !important;
    padding-right: 1.5rem !important;
    color: var(--c-text) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mega-menu__footer {
    padding-left: calc(var(--line-left-mobile, 1.5rem) + 1rem) !important;
    padding-right: 1.5rem !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  .mega-menu__column {
    padding-top: 0 !important;
  }
  .mega-menu__title {
    font-family: var(--ff-sans) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    color: var(--c-text) !important;
    line-height: 1.4 !important;
  }
  .mega-menu__list {
    display: none !important;
  }
  .mega-menu__close {
    display: none !important;
  }
}
@media (max-width: 1349px) {
  /* Keep site-navigation visible but below mega menu */
  body.mega-menu-open .site-navigation {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Pull toggle out of site-navigation stacking context so it stays above mega menu */
  body.mega-menu-open .navbar__toggle {
    position: fixed !important;
    top: var(--wp-admin--admin-bar--height, 0px) !important;
    right: 0 !important;
    z-index: 4000 !important;
    height: 120px !important;
    width: 80px !important;
  }
}
/* ==========================================================================
   MEGA MENU CONTAINER - MOBILE
   ========================================================================== */
.mega-menu__container {
  position: relative;
  min-height: 100%;
  padding: 0 1.5rem 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Blue vertical line on mobile - matches page vertical line position */
}
.mega-menu__container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.5rem; /* Same as --line-left-mobile, hardcoded to avoid footer override */
  width: var(--line-width, 1px);
  background: var(--c-blue);
  z-index: 1;
}

/* ==========================================================================
   CLOSE BUTTON - HIDDEN ON MOBILE
   ========================================================================== */
.mega-menu__close {
  display: none;
  background: none;
  border: none;
  color: var(--c-white);
  font-size: 2rem;
  cursor: pointer;
  z-index: var(--mega-menu-close-z-index);
  padding: 0;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mega-menu__close:hover {
  opacity: 0.7;
  color: var(--c-blue);
}
.mega-menu__close:focus {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}
.mega-menu__close-icon {
  display: block;
}

/* ==========================================================================
   MEGA MENU CONTENT - MOBILE
   ========================================================================== */
.mega-menu__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.5rem;
  padding-left: calc(var(--line-left-mobile, 1.5rem) + 1rem);
  padding-right: 1.5rem;
  color: var(--c-text);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  transition-delay: 0.1s;
}
.mega-menu--active .mega-menu__content {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   COLUMN STYLES - MOBILE
   ========================================================================== */
.mega-menu__column {
  display: flex;
  flex-direction: column;
  /* No column dividers on mobile */
}
.mega-menu__column::before {
  display: none;
}

/* Title styles */
.mega-menu__title {
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  padding: 0.5rem 0;
  color: var(--c-text);
  border: none;
}
.mega-menu__title a {
  color: inherit;
  text-decoration: none;
}
.mega-menu__title a:hover {
  color: var(--c-blue);
}

/* ==========================================================================
   HIDE CHILD LINKS ON MOBILE
   ========================================================================== */
.mega-menu__list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu__item {
  margin: 0 0 0.75rem 0;
}

.mega-menu__link {
  color: var(--c-text);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  display: block;
  padding: 0.25rem 0;
  transition: color var(--mega-menu-transition);
}
.mega-menu__link:hover {
  color: var(--c-blue);
}

/* ==========================================================================
   MEGA MENU FOOTER - MOBILE
   ========================================================================== */
.mega-menu__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding-top: 1.5rem;
  padding-left: calc(var(--line-left-mobile, 1.5rem) + 1rem);
  padding-right: 1.5rem;
  margin-top: auto;
  box-sizing: border-box;
  max-width: 100%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--mega-menu-transition), transform 0.3s ease-out;
  transition-delay: 0.2s;
}
.mega-menu--active .mega-menu__footer {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile Give button - visible on mobile */
.mega-menu__cta--mobile {
  display: block;
}

/* Give button styling */
.mega-menu__button {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border: 2px solid var(--c-blue);
  background: var(--c-blue);
  color: var(--c-white);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border-radius: 24px;
  transition: all var(--mega-menu-transition);
}
.mega-menu__button:hover {
  background: transparent;
  color: var(--c-blue);
}

/* Desktop promo box - HIDDEN on mobile */
.mega-menu__promo {
  display: none;
}

/* ==========================================================================
   SEARCH - MOBILE STYLE
   ========================================================================== */
.mega-menu__search {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mega-menu__search-container {
  display: flex;
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}

.mega-menu__search-input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 1rem;
  border: 1px solid var(--c-text);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 1rem;
  font-style: italic;
  box-sizing: border-box;
}
.mega-menu__search-input::-moz-placeholder {
  color: rgba(0, 0, 0, 0.5);
}
.mega-menu__search-input::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.mega-menu__search-button {
  padding: 0.6rem 0.8rem;
  background: var(--c-black);
  border: 1px solid var(--c-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mega-menu__search-button:hover {
  background: #333;
}

.mega-menu__search-icon {
  color: var(--c-white);
  display: block;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   RESPONSIVE: DESKTOP (1014px+)
   Desktop shows both inline menu AND hamburger
   Desktop mega menu COVERS the navbar
   ========================================================================== */
@media (min-width: 1350px) {
  /* Desktop mega menu - full screen, dark background, COVERS EVERYTHING */
  .mega-menu {
    top: 0;
    height: 100%;
    background: var(--c-black);
    z-index: 9999; /* Above everything on desktop */
  }
  .mega-menu__column:nth-child(4)::before {
    width: 210px;
  }
  /* Hide navbar when mega menu is active on desktop */
  body.mega-menu-open .site-navigation {
    visibility: hidden;
    opacity: 0;
  }
  /* Remove vertical line on desktop */
  .mega-menu__container::before {
    display: none;
  }
  .mega-menu__container {
    padding: 4rem 4rem 3rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  /* Show child links on desktop */
  .mega-menu__list {
    display: block;
  }
  /* ==========================================================================
     DESKTOP MEGA MENU CONTENT - Fixed column widths per Figma specs
     208px columns with 72px gaps, Work with Us column is 244px
     Centered in container
     ========================================================================== */
  .mega-menu__content {
    display: grid;
    /* Fixed widths: About 208px, Leadership 208px, Teams 208px, Work with Us 244px, Close button auto */
    grid-template-columns: var(--mega-col-width) var(--mega-col-width) var(--mega-col-width) var(--mega-col-width-wide) auto;
    gap: var(--mega-col-gap);
    max-width: -moz-max-content;
    max-width: max-content;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    color: var(--c-white);
    align-items: start;
  }
  /* Close button - visible on desktop, in its own grid column */
  .mega-menu__close {
    display: flex;
    position: relative;
    top: -25px;
    right: auto;
    background: none;
    border: none;
    color: var(--c-white);
    font-size: 2rem;
    cursor: pointer;
    z-index: var(--mega-menu-close-z-index);
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .mega-menu__close:hover {
    opacity: 0.7;
    color: var(--c-blue);
  }
  .mega-menu__close:focus {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
  }
  /* Column dividers on desktop - top line with fixed width matching column */
  .mega-menu__column {
    position: relative;
    padding-top: 1rem;
  }
  .mega-menu__column::before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Fixed 208px width for the rule */
    height: 2px;
    background: var(--c-white);
  }
  .mega-menu__column {
    /* Last column (4th) gets full-width rule */
  }
  .mega-menu__column:last-child::before {
    width: 100%;
  }
  .mega-menu__title {
    font-family: var(--ff-serif);
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--c-white);
    padding: 0;
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
  }
  .mega-menu__title a {
    text-decoration: none;
  }
  .mega-menu__title a:hover {
    opacity: 0.8;
  }
  .mega-menu__item {
    margin: 0 0 0.5rem 0;
  }
  .mega-menu__link {
    color: var(--c-white);
    font-size: 16px;
  }
  .mega-menu__link:hover {
    color: var(--c-white);
    text-decoration: underline;
    text-decoration-color: var(--c-blue);
  }
  /* Desktop: hamburger stays normal (no blue bg) - handled in _menu-primary.scss */
  /* ==========================================================================
     DESKTOP FOOTER - Promo box left, search right, centered with content
     ========================================================================== */
  .mega-menu__footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin-top: auto;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 3rem 0 0 0 !important;
    width: 100% !important;
    max-width: calc(var(--mega-col-width) * 3 + var(--mega-col-width-wide) + var(--mega-col-gap) * 4 + 2.5rem) !important;
    gap: 2rem !important;
  }
  /* Hide mobile Give button on desktop */
  .mega-menu__cta--mobile {
    display: none;
  }
  /* Show promo box on desktop - BLUE border per designer feedback */
  .mega-menu__promo {
    display: block;
    border: 1px solid var(--c-blue);
    padding: 1.5rem;
    max-width: 400px;
  }
  .mega-menu__promo-title {
    color: var(--c-white);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1;
    font-family: var(--ff-sans);
  }
  .mega-menu__promo-text {
    color: var(--c-white);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1rem 0;
    opacity: 0.9;
  }
  /* Button container for right alignment */
  .mega-menu__promo-cta {
    display: flex;
    justify-content: flex-end;
  }
  .mega-menu__promo-button {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background: var(--c-blue);
    color: var(--c-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 24px;
    border: 2px solid var(--c-blue);
    transition: all var(--mega-menu-transition);
  }
  .mega-menu__promo-button:hover {
    background: transparent;
    color: var(--c-white);
    border-color: var(--c-white);
  }
  /* Search - reset mobile width so space-between works */
  .mega-menu__search {
    width: auto !important;
    max-width: none !important;
    margin-left: 0;
    flex-shrink: 0;
  }
  .mega-menu__search-container {
    max-width: 350px;
  }
  /* Search input - dark fill (#1E1E1E), Georgia italic 21px per designer */
  .mega-menu__search-input {
    width: min(280px, 100%);
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--c-white);
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 21px;
    padding: 0.5rem 1rem;
  }
  .mega-menu__search-input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-family: Georgia, serif;
    font-style: italic;
  }
  .mega-menu__search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-family: Georgia, serif;
    font-style: italic;
  }
  .mega-menu__search-button {
    background: var(--c-blue);
    border-color: var(--c-blue);
  }
}
/* ==========================================================================
   Primary Navigation Component - SCSS
   _menu-primary.scss
   Desktop dropdown navigation styles only
   ========================================================================== */
:root {
  --navbar-font-size: var(--fs-xs);
  --navbar-letter-spacing: 0.4px;
  --navbar-line-height: 1.21;
  --navbar-gap: 1rem;
  --navbar-border-width: 4px;
  --navbar-height: 120px;
  --navbar-link-padding: 1em;
  --navbar-submenu-width: 285px;
  --navbar-submenu-padding: 26px 24px;
  --navbar-submenu-item-padding: 12px 0 10px;
  --navbar-submenu-shadow: 0;
  --navbar-submenu-z-index: 3100;
  --navbar-transition: all 0.3s ease;
}

/* ==========================================================================
   Navbar Container
   ========================================================================== */
.navbar {
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-height);
  padding: var(--spacing-md);
  margin: 0 auto;
  position: relative;
  padding-right: 0;
  background: transparent;
  border: none;
  /* Desktop Menu */
}
.navbar__menu {
  font-size: var(--navbar-font-size);
  letter-spacing: var(--navbar-letter-spacing);
  line-height: var(--navbar-line-height);
  align-items: center;
  display: none; /* hidden until desktop breakpoint */
  gap: var(--navbar-gap);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar {
  /* Top-level items */
}
.navbar__item {
  position: relative;
  /* Last item - dropdown aligns LEFT like all others (per codepen) */
}
.navbar__item--last .navbar__link {
  border-left: var(--navbar-border-width) solid transparent;
}
.navbar__item--last.is-active .navbar__link, .navbar__item--last.nav-item--active .navbar__link, .navbar__item--last:hover .navbar__link, .navbar__item--last.is-focused .navbar__link, .navbar__item--last .navbar__link:focus {
  border-left-color: var(--c-blue);
}
.navbar__item--last .navbar__submenu {
  border-left: var(--navbar-border-width) solid var(--c-blue);
  left: 0;
}
.navbar__item {
  /* Hover and focus states */
}
.navbar__item:hover .navbar__link, .navbar__item.is-focused .navbar__link, .navbar__item:focus-within .navbar__link {
  background: var(--c-bg);
  border-left-color: var(--c-blue);
  color: var(--c-blue);
  text-decoration: none;
}
.navbar__item {
  /* Active page state - targets aria-current="page" set in twig template */
}
.navbar__item .navbar__link[aria-current=page] {
  color: var(--c-blue);
}
.navbar__item {
  /* Submenu visibility on hover/focus/active */
}
.navbar__item:hover .navbar__submenu, .navbar__item.is-focused .navbar__submenu, .navbar__item.is-active .navbar__submenu, .navbar__item.nav-item--active .navbar__submenu, .navbar__item:focus-within .navbar__submenu {
  opacity: 1;
  visibility: visible;
}
.navbar {
  /* Links inside menu */
}
.navbar__link {
  border-left: var(--navbar-border-width) solid transparent;
  color: var(--c-black);
  display: block;
  font-weight: 600;
  font-size: 18px;
  padding: var(--navbar-link-padding);
  text-decoration: none;
  transition: var(--navbar-transition);
}
.navbar__link:hover {
  color: var(--c-blue);
}
.navbar__link:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}
.navbar {
  /* Submenus */
}
.navbar__submenu {
  background: var(--c-bg);
  border-left: var(--navbar-border-width) solid var(--c-blue);
  box-shadow: var(--navbar-submenu-shadow);
  left: 0;
  list-style: none;
  opacity: 0;
  padding: var(--navbar-submenu-padding);
  position: absolute;
  top: 100%;
  transition: opacity var(--navbar-transition);
  visibility: hidden;
  width: var(--navbar-submenu-width);
  z-index: var(--navbar-submenu-z-index);
  margin: 0;
}
.navbar__submenu-link {
  border-bottom: 0;
  color: var(--c-text);
  display: block;
  font-size: 1rem;
  font-weight: 500;
  padding: var(--navbar-submenu-item-padding);
  text-decoration: none;
  transition: border-color var(--navbar-transition);
}

/* When mega menu is open, add padding so items don't appear under toggle */
body.mega-menu-open .navbar__menu {
  padding-right: 100px;
}

/* Navbar container with proper z-index */
.header__navbar-container .navbar {
  position: relative;
  z-index: 3000; /* Ensure navbar stays above mega menu */
  border-bottom: 1px solid;
  border-color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Mobile Hamburger Toggle (separate from mega menu functionality)
   ========================================================================== */
.navbar__toggle {
  display: flex;
  cursor: pointer;
  padding: 0;
  border: none;
  background: var(--c-bg);
  z-index: 9999;
  position: relative;
  opacity: 1;
  visibility: visible;
  width: 60px;
  flex-shrink: 0;
  margin: 0;
}
@media screen and (min-width: 420px) {
  .navbar__toggle {
    width: 80px;
  }
}
.navbar__toggle {
  height: 80px;
  flex-shrink: 0;
  border-radius: 0;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}
.navbar__toggle:focus {
  outline: 2px solid var(--c-blue);
  outline-offset: -2px;
}

.navbar__hamburger {
  display: block;
  position: relative;
  width: 26px;
  height: 16px;
}
.navbar__hamburger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--c-black);
  border-radius: 1px;
  left: 0;
  transition: 0.25s ease-in-out;
}
.navbar__hamburger span:nth-child(1) {
  top: 0;
}
.navbar__hamburger span:nth-child(2) {
  top: 7px;
}
.navbar__hamburger span:nth-child(3) {
  top: 14px;
}

/* ==========================================================================
   HAMBURGER ACTIVE STATE - Blue background, white X (MOBILE)
   ========================================================================== */
.navbar__toggle--active {
  background: var(--c-blue);
}

.navbar__toggle--active .navbar__hamburger span {
  background: var(--c-white);
}

.navbar__toggle--active .navbar__hamburger span:nth-child(1) {
  top: 7px;
  transform: rotate(135deg);
}

.navbar__toggle--active .navbar__hamburger span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

.navbar__toggle--active .navbar__hamburger span:nth-child(3) {
  top: 7px;
  transform: rotate(-135deg);
}

/* ==========================================================================
   Alternative Class Support (WordPress, other CMSs)
   ========================================================================== */
.nav-item-with-dropdown,
.menu-item-has-children {
  position: relative;
}
.nav-item-with-dropdown.nav-item--active > a, .nav-item-with-dropdown.is-active > a,
.menu-item-has-children.nav-item--active > a,
.menu-item-has-children.is-active > a {
  background: var(--c-bg);
  border-left-color: var(--c-blue);
  color: var(--c-blue);
}
.nav-item-with-dropdown.nav-item--active .dropdown,
.nav-item-with-dropdown.nav-item--active .sub-menu, .nav-item-with-dropdown.is-active .dropdown,
.nav-item-with-dropdown.is-active .sub-menu,
.menu-item-has-children.nav-item--active .dropdown,
.menu-item-has-children.nav-item--active .sub-menu,
.menu-item-has-children.is-active .dropdown,
.menu-item-has-children.is-active .sub-menu {
  opacity: 1;
  visibility: visible;
}
.nav-item-with-dropdown,
.menu-item-has-children {
  /* Hover behavior */
}
.nav-item-with-dropdown:hover > a,
.menu-item-has-children:hover > a {
  background: var(--c-bg);
  border-left-color: var(--c-blue);
  color: var(--c-blue);
}
.nav-item-with-dropdown:hover .dropdown,
.nav-item-with-dropdown:hover .sub-menu,
.menu-item-has-children:hover .dropdown,
.menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}
.nav-item-with-dropdown .dropdown,
.nav-item-with-dropdown .sub-menu,
.menu-item-has-children .dropdown,
.menu-item-has-children .sub-menu {
  background: var(--c-bg);
  border-left: var(--navbar-border-width) solid var(--c-blue);
  box-shadow: var(--navbar-submenu-shadow);
  left: 0;
  list-style: none;
  opacity: 0;
  padding: var(--navbar-submenu-padding);
  position: absolute;
  top: 100%;
  transition: opacity var(--navbar-transition);
  visibility: hidden;
  width: var(--navbar-submenu-width);
  z-index: var(--navbar-submenu-z-index);
  margin: 0;
}
.nav-item-with-dropdown .dropdown a,
.nav-item-with-dropdown .sub-menu a,
.menu-item-has-children .dropdown a,
.menu-item-has-children .sub-menu a {
  border-bottom: 2px solid transparent;
  color: var(--c-text);
  display: block;
  font-size: var(--font-size-child);
  font-weight: var(--font-weight-medium);
  padding: var(--navbar-submenu-item-padding);
  text-decoration: none;
  transition: border-color var(--navbar-transition);
}
.nav-item-with-dropdown .dropdown a:focus, .nav-item-with-dropdown .dropdown a:hover,
.nav-item-with-dropdown .sub-menu a:focus,
.nav-item-with-dropdown .sub-menu a:hover,
.menu-item-has-children .dropdown a:focus,
.menu-item-has-children .dropdown a:hover,
.menu-item-has-children .sub-menu a:focus,
.menu-item-has-children .sub-menu a:hover {
  border-bottom-color: var(--c-blue);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
/* Show desktop menu */
@media screen and (min-width: 1100px) {
  .navbar__menu {
    display: flex;
  }
}
/* Desktop: hamburger stays normal when active (no blue bg, black X) */
@media screen and (min-width: 1350px) {
  .navbar__toggle--active {
    background: var(--c-bg);
  }
  .navbar__toggle--active .navbar__hamburger span {
    background: var(--c-black);
  }
}
/* Mobile responsive adjustments */
@media (max-width: 1099px) {
  .navbar {
    z-index: 3000;
  }
  .navbar__brand {
    z-index: 3001;
    position: relative;
  }
  /* On mobile, disable hover dropdowns completely */
  .navbar__item:hover .navbar__submenu, .navbar__item:hover .dropdown, .navbar__item:hover .sub-menu,
  .nav-item-with-dropdown:hover .navbar__submenu,
  .nav-item-with-dropdown:hover .dropdown,
  .nav-item-with-dropdown:hover .sub-menu,
  .menu-item-has-children:hover .navbar__submenu,
  .menu-item-has-children:hover .dropdown,
  .menu-item-has-children:hover .sub-menu {
    opacity: 0;
    visibility: hidden;
  }
  .navbar__item,
  .nav-item-with-dropdown,
  .menu-item-has-children {
    /* Only show when explicitly activated by JavaScript */
  }
  .navbar__item.nav-item--active .navbar__submenu,
  .navbar__item.nav-item--active .dropdown,
  .navbar__item.nav-item--active .sub-menu, .navbar__item.is-active .navbar__submenu,
  .navbar__item.is-active .dropdown,
  .navbar__item.is-active .sub-menu,
  .nav-item-with-dropdown.nav-item--active .navbar__submenu,
  .nav-item-with-dropdown.nav-item--active .dropdown,
  .nav-item-with-dropdown.nav-item--active .sub-menu,
  .nav-item-with-dropdown.is-active .navbar__submenu,
  .nav-item-with-dropdown.is-active .dropdown,
  .nav-item-with-dropdown.is-active .sub-menu,
  .menu-item-has-children.nav-item--active .navbar__submenu,
  .menu-item-has-children.nav-item--active .dropdown,
  .menu-item-has-children.nav-item--active .sub-menu,
  .menu-item-has-children.is-active .navbar__submenu,
  .menu-item-has-children.is-active .dropdown,
  .menu-item-has-children.is-active .sub-menu {
    opacity: 1;
    visibility: visible;
    position: static;
    box-shadow: none;
    border: none;
    width: auto;
    padding: 0;
    margin-left: 1rem;
  }
}
/* High-contrast accessibility mode */
@media (prefers-contrast: high) {
  :root {
    --c-border: #000000;
  }
}
/* Header Button Give */
.btn--header-give {
  padding: 11px 18px;
  font-weight: 700;
  font-size: 18px;
  color: var(--c-white);
  background-color: var(--c-blue);
  border-color: var(--c-blue);
  line-height: 1;
  /* Hover */
}
.btn--header-give:hover {
  background: transparent;
  color: var(--c-blue);
}
.btn--header-give {
  /* Focus (keyboard + mouse) */
}
.btn--header-give:focus, .btn--header-give:focus-visible {
  outline: none;
  background-color: var(--c-blue);
  color: var(--c-white);
}
.btn--header-give {
  /* Active (mouse down) */
}
.btn--header-give:active {
  background-color: var(--c-blue);
  color: var(--c-white);
}
.btn--header-give {
  /* Visited (for anchor buttons) */
}
.btn--header-give:visited {
  color: var(--c-white);
  background-color: var(--c-blue);
  border-color: var(--c-blue);
}
.btn--header-give {
  /* Visited + Hover */
}
.btn--header-give:visited:hover {
  background: transparent;
  color: var(--c-blue);
}

/* Secondary Navigation */
.secondary-nav {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
  z-index: 900;
  transition: all 0.3s ease;
}

.secondary-nav.sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.secondary-nav-content {
  display: flex;
  overflow-x: auto;
  padding: 0 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.secondary-nav-content::-webkit-scrollbar {
  display: none;
}

.secondary-nav-item {
  flex: 0 0 auto;
  padding: 1rem;
  text-decoration: none;
  color: #666;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.secondary-nav-item.active,
.secondary-nav-item:hover {
  color: #d32f2f;
  border-bottom-color: #d32f2f;
}

/* Spacer for sticky elements */
.secondary-nav-spacer {
  height: 0;
  transition: height 0.3s ease;
}

/* Tablet Styles */
@media (min-width: 768px) {
  .secondary-nav-content {
    padding: 0 2rem;
  }
}
/* ==========================================================================
   Accordion Component
   ========================================================================== */
:root {
  --accordion-transition-smooth: 0.35s;
  --accordion-transition-content: 0.4s;
  --accordion-easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --accordion-easing-content: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Container Block */
.accordion-container {
  margin: 0 auto;
  max-width: 48rem;
  position: relative;
  margin-bottom: 4rem;
}

/* Accordion Block */
.accordion {
  position: relative;
  background: transparent;
}

.accordion__item {
  background: transparent;
  border-top: 1px solid transparent;
  border-bottom: 1px solid #1199ff;
  transition: border-color var(--accordion-transition-smooth) var(--accordion-easing-smooth);
  padding: 0;
  margin-top: -1px;
}

.accordion__item:first-child {
  margin-top: 0;
}
.accordion__item:first-child:hover {
  border-top-color: transparent;
}

.accordion__item:hover {
  border-top-color: #1966ff;
  border-bottom-color: #1966ff;
}

.accordion__item--active {
  border-top-color: #1966ff;
  border-bottom-color: #1966ff;
}

/* Reset button styles - override global button styling */
.accordion__button {
  /* Reset all button styles */
  all: unset;
  box-sizing: border-box;
  /* Apply accordion button styles */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  width: 100%;
  padding: 1.5rem 0;
  color: #000000;
  font-size: 1.15rem;
  font-weight: 700;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  outline: none;
  cursor: pointer;
  transition: color var(--accordion-transition-smooth) var(--accordion-easing-smooth);
  min-height: 44px;
  border-radius: 0 !important;
}

.accordion__button:hover,
.accordion__button:focus {
  color: #1966ff;
  background: transparent !important;
  background-color: transparent !important;
}

.accordion__button:hover .accordion__title {
  color: #1966ff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.accordion__button:hover .accordion__icon,
.accordion__button:focus .accordion__icon {
  border-color: #1966ff;
  transform: scale(1.05);
}

/* Static button styles (no submenu) */
.accordion__button--static {
  cursor: default !important;
}

.accordion__button--static:hover,
.accordion__button--static:focus {
  color: #000000;
}

.accordion__button--static .accordion__icon-container {
  display: none;
}

.accordion__button--static .accordion__title {
  cursor: pointer;
}

.accordion__button--static .accordion__title:hover {
  color: #1966ff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.accordion__button--active {
  color: #1966ff;
  background: transparent !important;
}

.accordion__button--active .accordion__title {
  padding-left: 0.3em;
}

.accordion__button--active .accordion__icon {
  background: #1966ff !important;
  border-color: #1966ff;
}

.accordion__button--active .accordion__icon::before {
  background: #fff;
}

.accordion__button--active .accordion__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.accordion__title-heading {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.accordion__title {
  flex: 1;
  font-weight: 600;
  min-width: 0;
  word-wrap: break-word;
  line-height: 1.3;
  padding-right: 0.5rem;
  transition: padding-left var(--accordion-transition-smooth) var(--accordion-easing-smooth);
}

.accordion__title a,
a.accordion__title {
  color: inherit;
  text-decoration: none;
}
.accordion__title a:focus-visible,
a.accordion__title:focus-visible {
  outline: 2px solid #1966ff;
  outline-offset: 2px;
}

.accordion__icon-container {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  cursor: pointer;
  outline: none;
}
.accordion__icon-container:focus-visible {
  outline: 2px solid #1966ff;
  outline-offset: 4px;
  border-radius: 50%;
}

.accordion__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: all var(--accordion-transition-smooth) var(--accordion-easing-smooth);
  background: #1966ff;
  color: #fff;
}

.accordion__icon--disabled {
  color: #8b959e;
  border-color: #8b959e;
  opacity: 0.6;
}

.accordion__icon--disabled::before,
.accordion__icon--disabled::after {
  background: #8b959e;
}

.accordion__icon::before,
.accordion__icon::after {
  display: block;
  position: absolute;
  content: "";
  background: currentColor;
  transition: all var(--accordion-transition-smooth) var(--accordion-easing-smooth);
}

.accordion__icon::before {
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.accordion__icon::after {
  top: 50%;
  left: 50%;
  width: 2px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.accordion__content {
  overflow: hidden;
  height: 0;
  opacity: 0;
  display: none;
  background: transparent;
}

.accordion__content--active {
  opacity: 1;
  border-top: 1px solid #1966ff;
}

.accordion__text {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
  transition: opacity var(--accordion-transition-smooth) var(--accordion-easing-smooth);
}

.accordion__content:not(.accordion__content--active) .accordion__text {
  opacity: 0;
}

.accordion__static {
  padding: 1em 0;
}

.accordion__title--static {
  color: #40464c;
  font-size: 1.15rem;
  font-weight: 400;
  padding: 0 0 0.5em 0;
}

.accordion__content--menu {
  list-style: none;
  margin: 0 0 0 3rem;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .accordion__content--menu {
    margin: 0 0 0 6rem;
  }
}

.accordion__content--menu li {
  color: #000000;
  font-weight: 700;
  transition: color var(--accordion-transition-smooth) var(--accordion-easing-smooth);
  cursor: pointer;
}

.accordion__content--menu li:hover {
  color: #1966ff;
}

.accordion__content--menu li a:hover {
  color: #1966ff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.accordion__content--menu li a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}
.accordion__content--menu li a:focus-visible {
  outline: 2px solid #1966ff;
  outline-offset: 2px;
}
.accordion__content--menu li a {
  padding: 1.5rem 0;
  border-bottom: 1px solid #000;
}

.accordion__content--menu li:last-child a {
  border-bottom: 0;
}

.accordion__content--static {
  display: none;
}

.accordion__link {
  margin-top: 1em;
}

.accordion__link a {
  color: #1966ff;
  text-decoration: none;
  transition: color var(--accordion-transition-smooth) var(--accordion-easing-smooth);
}

.accordion__link a:hover,
.accordion__link a:focus {
  color: #1966ff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.accordion__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem 0;
}

.accordion__header-toggle {
  background: none !important;
  border: none !important;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.accordion__header-toggle:hover {
  opacity: 0.7;
}

.accordion__header-toggle:focus {
  outline: 2px solid #1966ff;
  outline-offset: 2px;
}

.accordion__header-arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #333;
  transition: transform 0.3s ease;
  display: block;
}

.accordion__header-toggle[aria-expanded=false] .accordion__header-arrow {
  transform: rotate(-90deg);
}

.accordion__header-toggle[aria-expanded=true] .accordion__header-arrow {
  transform: rotate(0deg);
}

.accordion--collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

/* ==========================================================================
   Feature Grid Component
   Image grid with hero content layout
   ========================================================================== */
.feature-grid {
  position: relative;
  margin-left: calc(-1 * var(--jump-gutter));
  padding-left: var(--jump-gutter);
  padding-top: 5rem;
  margin-bottom: 2rem;
}

.feature-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: calc(95vw - var(--jump-gutter));
  height: 1px;
  background: #ddd;
  z-index: 5;
}
@media screen and (min-width: 1144px) {
  .feature-grid::before {
    left: -7px;
    width: calc(72vw - var(--jump-gutter));
  }
}
@media screen and (min-width: 1296px) {
  .feature-grid::before {
    width: calc(64vw - var(--jump-gutter));
  }
}

.feature-grid__container {
  margin: 0 auto;
  padding: 20px 0 0 0;
}

.feature-grid__layout {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}

.feature-grid__hero-image {
  margin-left: calc(-1 * var(--jump-gutter));
}

.feature-grid__hero-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.feature-grid__hero-content {
  padding: 0 20px 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.feature-grid__hero-content h2 {
  font-family: "Georgia Pro", Georgia, serif;
  font-weight: 400;
  margin: 0 0 16px;
  line-height: 1.2;
  color: #000000;
  max-width: 16ch;
}

.feature-grid__hero-content p {
  line-height: 1.7;
  margin-top: 0;
  margin-bottom: 30px;
  color: #1a1a1a;
  max-width: 660px;
}

.feature-grid__hero-content .btn {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Priorities Variant
   -------------------------------------------------------------------------- */
.feature-grid--priorities {
  padding-top: 3rem;
  margin-bottom: 4rem;
}

.feature-grid--priorities::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--jump-gutter) + 40px);
  width: 240px;
  height: var(--jump-accent-bar-height, 4px);
  background: #1966ff;
  z-index: 6;
  display: none;
}

.feature-grid--priorities .feature-grid__hero-image {
  aspect-ratio: 16/9;
}

.feature-grid--priorities .feature-grid__hero-content {
  padding: 0 40px;
}

/* --------------------------------------------------------------------------
   Thumbnail Images
   -------------------------------------------------------------------------- */
.feature-grid__thumb {
  min-height: 300px;
  margin-bottom: 1.5rem;
}

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

.feature-grid__thumb--small {
  z-index: 10;
  margin-left: calc(-1 * var(--jump-gutter));
  display: none;
}

.feature-grid__thumb--large {
  display: none;
}

/* ==========================================================================
   RESPONSIVE: Desktop (900px+)
   ========================================================================== */
@media (min-width: 900px) {
  .feature-grid--priorities .feature-grid__container {
    padding: 0;
    margin-left: 0;
    max-width: none;
  }
  .feature-grid--priorities .feature-grid__layout {
    gap: 48px;
    grid-template-columns: min(450px, 100vw - 40px) 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "hero-image hero-content" "thumb-small thumb-large";
    margin-right: 40px;
    align-items: start;
    padding-top: 3rem;
  }
  .feature-grid--priorities .feature-grid__hero-image {
    grid-area: hero-image;
    margin-left: -137px;
  }
  .feature-grid--priorities .feature-grid__hero-content {
    grid-area: hero-content;
    padding: 0 40px;
  }
  .feature-grid--priorities::after {
    display: block;
    left: calc(min(477px, 100vw - 40px) + 24px + 60px);
  }
  .feature-grid--priorities .feature-grid__thumb {
    margin-bottom: 0;
    min-height: auto;
  }
  .feature-grid--priorities .feature-grid__thumb--small {
    display: block;
    grid-area: thumb-small;
    width: 229px;
    height: 158px;
    justify-self: end;
    margin-left: 0;
  }
  .feature-grid--priorities .feature-grid__thumb--large {
    display: block;
    grid-area: thumb-large;
    width: 337px;
    height: 269px;
  }
}
.site-footer {
  --footer-gutter: 2.5rem;
  --footer-gutter-lg: 5.5rem;
  position: relative;
  z-index: 10;
  background: var(--c-black);
  color: var(--c-white);
  padding: 3rem var(--footer-gutter) 2rem;
}
.site-footer__inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.site-footer__navbar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.site-footer__logocontainer a {
  display: block;
  text-decoration: none;
}
.site-footer__logo {
  width: 100%;
  height: 40px;
  max-width: 194px;
  display: block;
  color: var(--c-white);
}
.site-footer__address {
  margin-bottom: 2rem;
}
.site-footer__address address {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-white);
  margin: 0;
}
.site-footer__address address a {
  color: var(--c-white);
  text-decoration-color: var(--c-white);
}
.site-footer__address address a:hover, .site-footer__address address a:focus {
  color: var(--c-blue);
  text-decoration-color: var(--c-blue);
}
.site-footer__give {
  margin-bottom: 1.5rem;
}
.site-footer__give .site-footer__give-button {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.site-footer__colophon {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  border-top: 2px solid var(--c-white);
  margin-top: 2rem;
  padding-top: 2rem;
}
.site-footer__colophon a {
  font-size: 14px;
}
.site-footer__copyright {
  color: var(--c-white);
  font-size: 14px;
  font-weight: 700;
}

.site-footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer-nav__link {
  color: var(--c-white);
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  transition: color 0.3s ease;
}
.site-footer-nav__link:hover, .site-footer-nav__link:focus {
  color: var(--c-blue);
  text-decoration: none;
}

.mit-social-links {
  width: 100%;
}

.mit-social-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}

.mit-social-links__link {
  display: inline-flex;
  text-decoration: none;
  color: var(--c-white);
}

.mit-social-links__icon {
  display: block;
  width: 24px;
  height: 24px;
}

.colophon-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.colophon-nav__item {
  display: flex;
  align-items: center;
}
.colophon-nav__item:not(:last-child)::after {
  content: "|";
  margin-left: 0.5rem;
  color: var(--c-white);
}

.colophon-nav__link {
  color: var(--c-white);
  text-decoration: underline;
  font-size: 18px;
  font-weight: 700;
}
.colophon-nav__link:hover, .colophon-nav__link:focus {
  color: var(--c-blue);
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .site-footer__navbar {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .site-footer__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "navbar navbar" "address address" "give social" "colophon colophon";
    -moz-column-gap: 2rem;
         column-gap: 2rem;
    row-gap: 0;
  }
  .site-footer__navbar {
    grid-area: navbar;
  }
  .site-footer__address {
    grid-area: address;
  }
  .site-footer__give {
    grid-area: give;
    align-self: end;
    margin-bottom: 0;
  }
  .site-footer__social {
    display: contents;
  }
  .site-footer__colophon {
    grid-area: colophon;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .site-footer-nav {
    margin-left: auto;
  }
  .site-footer-nav__list {
    flex-direction: row;
    gap: 3rem;
  }
  .mit-social-links {
    grid-area: social;
    justify-self: end;
    align-self: end;
    width: auto;
  }
  .mit-social-links__list {
    justify-content: flex-end;
  }
}
@media screen and (min-width: 948px) {
  .site-footer {
    padding: 3rem var(--footer-gutter-lg) 2rem;
  }
  .site-footer-nav__list {
    gap: 4rem;
  }
}
/* ==========================================================================
   Grid Gallery Component
   ========================================================================== */
.gallery {
  max-width: 800px;
  margin-top: 3em;
}

.gallery__grid {
  display: grid;
  gap: 1rem;
  /* Mobile First: Single column */
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}

.gallery__item {
  position: relative;
  overflow: hidden;
  background-color: #e0e0e0;
  aspect-ratio: 16/10;
}

.gallery__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Title */
.gallery__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #333;
  text-align: center;
}

/* ==========================================================================
   RESPONSIVE: TABLET (640px+)
   ========================================================================== */
@media (min-width: 640px) {
  .gallery__grid {
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: auto auto;
    gap: 30px;
  }
  .gallery__item {
    aspect-ratio: unset;
  }
  /* First item: Top left */
  .gallery__item--first {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 16/9;
  }
  /* Second item: Top right, aligned to bottom of first image */
  .gallery__item--second {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 4/3;
    align-self: end;
  }
  /* Third item: Bottom right, smaller */
  .gallery__item--third {
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: 16/10;
    max-width: 240px;
  }
  /* Fourth item: Hidden by default (3-image layout) */
  .gallery__item--fourth {
    display: none;
  }
}
/* ==========================================================================
   RESPONSIVE: TABLET (768px+)
   ========================================================================== */
@media (min-width: 768px) {
  .gallery__title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
}
/* ==========================================================================
   RESPONSIVE: DESKTOP (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {
  .gallery__grid {
    grid-template-columns: 1.35fr 1fr;
    grid-template-rows: auto auto;
    max-width: 733px;
  }
}
.edit-icon {
  font-size: 10px;
}

.email-link {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
}

.email-link .icon {
  fill: currentColor;
  flex-shrink: 0;
  margin-right: 5px;
}

.list-with-arrow {
  list-style: none;
  margin: 0;
  padding: 0;
}

.icon-megaphone {
  width: 76px;
  height: auto;
}

.arrow-link {
  font-family: "neue-haas-grotesk-display", system-ui, sans-serif;
  color: var(--color-title);
  font-weight: 700;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  letter-spacing: 0.05px;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.arrow-link-right {
  justify-content: flex-end;
}
@media screen and (min-width: 769px) {
  .arrow-link-right {
    margin-left: auto;
  }
}

.arrow-link__text {
  text-decoration: underline;
  text-decoration-color: var(--c-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.arrow-link:after {
  color: #1966ff;
  content: "→";
  transition: transform 0.2s ease;
  text-decoration: none !important;
}

.arrow-link:hover:after {
  transform: translateX(4px);
  text-decoration: none !important;
}

.link-email {
  font-family: "neue-haas-grotesk-display", system-ui, sans-serif;
  color: var(--color-title);
  text-decoration: underline;
  text-decoration-color: #1966ff;
  display: inline-flex !important; /* force inline behavior */
  align-items: center;
  gap: 5px;
  letter-spacing: 0.05px;
  vertical-align: middle; /* keeps it aligned with surrounding text */
}
.link-email p {
  line-height: 1;
}

.link-email__text {
  text-decoration: none;
  transition: -webkit-text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease;
}

.link-email:hover .link-email__text {
  text-decoration: underline;
}

.link-email::before {
  content: "";
  width: 12px;
  height: 9px;
  flex: 0 0 12px;
  display: inline-block;
  background: url("https://mitrddev.wpenginepowered.com/wp-content/uploads/2026/02/envelope.svg") center/contain no-repeat;
}

/* ==========================================================================
   Jump Navigation Component
   Layout, sidebar navigation, featured box, sections, and link-arrow
   ========================================================================== */
/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  --jump-gutter: 1.5rem;
  --jump-gutter-lg: 89px;
  --jump-accent-bar-height: 4px;
  --jump-scroll-offset: 100px;
}

/* --------------------------------------------------------------------------
   Jump Section Layout
   -------------------------------------------------------------------------- */
.jump-section {
  position: relative;
  padding: 0 var(--jump-gutter);
  width: 100%;
}

.jump-section__wrapper {
  position: relative;
}

.jump-section__sidebar {
  position: relative;
  top: auto;
  padding: var(--jump-gutter) var(--jump-gutter) 3rem;
}

.jump-section__content {
  width: 100%;
  position: relative;
}

.jump-section__content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(-1 * var(--jump-gutter) - 1px);
  width: 4px;
  height: 4rem;
  background: #ffffff;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Jump Navigation Sidebar
   -------------------------------------------------------------------------- */
.jump-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  position: relative;
  z-index: 3;
}

.jump-nav__title {
  display: block;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}

.jump-nav__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 100%;
  border-left: 4px solid #1966ff;
}

.jump-nav__item {
  width: 100%;
}

.jump-nav__link {
  display: block;
  margin-bottom: 0.25rem;
  padding: 0.75rem 0 0.375rem 1.5rem;
  color: #595858;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.7;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.35s ease-in-out;
}

.jump-nav__link:focus,
.jump-nav__link:hover {
  color: #000000;
}

.jump-nav__link--active {
  color: #000000;
  background: #f5f5f5;
}

/* --------------------------------------------------------------------------
   Jump Sections (Content Areas)
   -------------------------------------------------------------------------- */
.jump-section__section {
  position: relative;
  padding: 2.25rem 0 1rem;
  min-height: 400px;
  scroll-margin-top: var(--jump-scroll-offset);
}

.jump-section__section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 1px;
  z-index: 2;
}

.jump-section__section:first-child {
  padding-top: 7rem;
}

.jump-section__section:first-child::before {
  top: 56px;
  background: #ddd;
  left: 0px;
  margin-top: 0;
  width: 100%;
}
@media screen and (min-width: 1335px) {
  .jump-section__section:first-child::before {
    left: 0px;
  }
}

.jump-section__section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 23.4375rem;
  height: var(--jump-accent-bar-height);
  z-index: 3;
}

.jump-section__section:last-child {
  margin-bottom: 4rem;
}

.jump-section__section-title {
  display: inline-block;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1rem;
  font-family: "Georgia Pro", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  color: #000000;
}

.jump-section__section-content {
  padding-left: 3rem;
}

.jump-section__section-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Featured Box (Sidebar Callout)
   -------------------------------------------------------------------------- */
.jump-section__featured {
  background-color: #1966ff;
  color: #ffffff;
  padding: 1.5em;
  margin-top: 5rem;
  font-size: 16px;
  position: relative;
  z-index: 5;
  max-width: 340px;
  width: 100%;
}

.jump-section__featured strong {
  display: block;
  margin-bottom: 0.5rem;
}

.jump-section__footer {
  display: flex;
  justify-content: space-between;
  line-height: 2;
}

.jump-section__featured a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  display: block;
  margin-top: 2rem;
}
.jump-section__featured a:hover {
  text-decoration: underline;
}

.jump-section__featured img {
  width: 76px;
  height: auto;
  flex-shrink: 0;
  align-self: flex-end;
  -o-object-fit: contain;
     object-fit: contain;
}

/* --------------------------------------------------------------------------
   Link Arrow Style
   -------------------------------------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}

.link-arrow::after {
  content: "→";
  color: #1966ff;
  transition: transform 0.2s ease;
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

/* ==========================================================================
   RESPONSIVE: Mobile / Touch Devices
   ========================================================================== */
@media screen and (max-width: 1334px) {
  .jump-section__wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .jump-section__sidebar {
    display: contents;
  }
  .jump-nav {
    order: 1;
    padding: 0 var(--jump-gutter);
    overflow: visible;
    z-index: auto;
    padding-left: 3rem;
  }
  .jump-nav__list {
    overflow: visible;
    height: auto;
  }
  .jump-section__content {
    order: 2;
  }
  .jump-section__featured {
    order: 3;
    margin: 2rem var(--jump-gutter) 3rem;
  }
}
/* ==========================================================================
   RESPONSIVE: Medium Screens (768px+)
   ========================================================================== */
@media screen and (min-width: 768px) {
  .jump-section__section-title {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
  }
  .jump-section__section-content p {
    font-size: 1.125rem;
  }
  .jump-section__section::after {
    left: 3rem;
    width: calc(100% - 3rem);
  }
}
/* ==========================================================================
   RESPONSIVE: Line Alignment (948px+)
   Match leadership-page padding so content aligns with vertical line
   ========================================================================== */
@media screen and (min-width: 948px) {
  .jump-section {
    padding-left: var(--jump-gutter-lg);
    padding-right: 0;
  }
  .jump-section__content::after {
    left: calc(-1 * var(--jump-gutter-lg) - 1px);
  }
}
/* ==========================================================================
   RESPONSIVE: Desktop (1335px+)
   ========================================================================== */
@media screen and (min-width: 1335px) {
  .jump-section__wrapper {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    justify-content: space-between;
  }
  .jump-section__sidebar {
    width: 17rem;
    padding: 0 2rem 4rem;
    border-top: 0;
    position: relative;
    top: 1.51rem;
    display: block;
  }
  .jump-section__content {
    width: calc(100% - 17rem);
  }
  .jump-section__content::after {
    height: 5rem;
  }
  .jump-nav {
    display: block;
    position: sticky;
    top: 1rem;
    padding: 2rem 0 0;
    background: #ffffff;
    z-index: 10;
  }
  .jump-nav__title {
    padding-left: 1rem;
    margin-top: 0;
  }
  .jump-nav__list {
    display: block;
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: initial;
    border-left: 4px solid #1966ff;
  }
  .jump-nav__link {
    display: block;
    margin: 0 0 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    white-space: normal;
    width: 100%;
    border-bottom: 0;
    border-left: 2px solid transparent;
  }
  .jump-nav__link:focus,
  .jump-nav__link:hover {
    border-bottom: 0;
  }
  .jump-nav__link--active {
    background: #f5f5f5;
    color: #000000;
  }
  .jump-section__section {
    padding: 4rem 0 1rem 1.5rem;
    scroll-margin-top: var(--jump-scroll-offset);
  }
  .jump-section__section:last-child {
    padding-bottom: 4rem;
    margin-bottom: 0;
  }
  .jump-section__section::after {
    left: 96px;
    width: calc(100% - 1.5rem);
  }
  .jump-section__section:first-child::after {
    display: none;
  }
  .jump-section__section-title {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
  }
  .jump-section__featured {
    position: sticky;
  }
}
/* ==========================================================================
   RESPONSIVE: Large Desktop (1144px+)
   ========================================================================== */
@media screen and (min-width: 1144px) {
  .jump-section__sidebar {
    width: 20rem;
    padding: 0 3rem;
  }
  .jump-section__content {
    width: calc(100% - 7rem);
  }
  .jump-section__content::after {
    height: 6rem;
  }
  .jump-section__section {
    padding: 5rem 0 1rem 2rem;
  }
  .jump-section__section-title {
    font-size: 2rem;
    padding-left: 2rem;
  }
  .jump-section__section:last-child {
    padding-bottom: 5rem;
  }
}
/* ==========================================================================
   RESPONSIVE: XL Desktop (1296px+)
   ========================================================================== */
@media screen and (min-width: 1296px) {
  .jump-section__sidebar {
    width: 23rem;
    padding: 0 3rem;
  }
  .jump-section__content {
    width: calc(100% - 7rem);
  }
  .jump-section__content::after {
    height: 7rem;
  }
  .jump-section__section {
    padding: 3rem 0 1rem 2rem;
  }
  .jump-section__section-title {
    font-size: 2.25rem;
    padding-left: 0;
  }
  .jump-section__section:last-child {
    padding-bottom: 6rem;
  }
}
@media screen and (min-width: 1335px) {
  .jump-section__section:first-child {
    padding-top: 10rem;
  }
  .jump-section__section:first-child::before {
    top: 86px;
    background: #ddd;
  }
}
/* ==========================================================================
   RESPONSIVE: XXL Desktop (1448px+)
   ========================================================================== */
@media screen and (min-width: 1448px) {
  .jump-section__sidebar {
    width: 30rem;
    padding: 0 5rem;
  }
  .jump-section__content {
    width: calc(100% - 27rem);
  }
}
/* ==========================================================================
   Jump Nav Template: Match leadership-page vertical line behavior
   - Single gray fixed line only (hide the blue content::before line)
   - Align jump-section padding with the vertical line at 948px
   ========================================================================== */
body.page-template-page-jump-nav .page-hero__content::before {
  display: none;
}

#about-resource-development .jump-section__section-content,
#about-us .jump-section__section-content {
  max-width: 797px;
}

/* ==========================================================================
   Media Block Component
   ========================================================================== */
.page-content-section--media {
  max-width: 936px;
}

.media {
  display: grid;
  padding: 1rem 0;
  grid-template-columns: 1fr;
  grid-template-areas: "img" "content";
}

.media__image {
  grid-area: img;
}

.media__content {
  grid-area: content;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1em 0;
}

.media__name {
  margin-bottom: 0;
}

.media__name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--c-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

.media__name a:hover {
  color: #1966ff;
}

.media__title {
  display: block;
}

.media__email,
.media__bio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.media__email:hover,
.media__bio:hover {
  text-decoration: underline;
}

.media__email .icon,
.media__bio .icon {
  color: #000;
}

.media__email .icon {
  width: 16px;
  height: 16px;
}

.media__bio .icon {
  width: 16px;
  height: 12px;
}

.media img {
  width: 100%;
  max-width: 224px;
  height: auto;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Tablet/Desktop breakpoint */
@media (min-width: 576px) {
  .media {
    -moz-column-gap: 3rem;
         column-gap: 3rem;
    grid-template-columns: 225px 3fr;
    grid-template-areas: "img content";
  }
}
.cards-section {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 0;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 86rem;
  margin: 0 auto;
  padding-left: 1em;
}

.card-item {
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  overflow: hidden;
  padding: 2.5rem 2rem 2rem 3rem;
  background: var(--color-white);
  border: none;
  border-radius: 0;
  text-decoration: none !important;
  cursor: pointer;
  min-height: 138px;
  box-sizing: border-box;
}

/* Override global a:hover underline styles */
.card-item:hover {
  text-decoration: none !important;
}

/* Animated overlay - slides left to right on hover, continues right on hover out */
.card-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 7px;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .card-item::before {
    left: 17px;
  }
}

/* Expand overlay left → right on hover */
.card-item:hover::before {
  transform: scaleX(1);
  transform-origin: left center;
}

/* On hover out, animate from right (origin shifts) */
.card-item:not(:hover)::before {
  transform-origin: right center;
}

/* Text + links need to sit above overlay */
.card-item h3,
.card-item p,
.card-item .card-link {
  position: relative;
  z-index: 1;
  transition: color 0.4s ease;
}

/* Card title */
.card-item h3 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--color-title);
  margin: 0;
  line-height: 1.2;
  align-self: start;
}
@media screen and (min-width: 941px) {
  .card-item h3 {
    margin: 0 0 1rem 0;
  }
}

/* Card description */
.card-item p {
  color: var(--color-text);
  margin: 0;
  font-size: 18px;
  align-self: start;
  display: none;
  visibility: hidden;
}
@media screen and (min-width: 769px) {
  .card-item p {
    line-height: 1.3;
    display: block;
    visibility: visible;
  }
}
@media screen and (min-width: 941px) {
  .card-item p {
    line-height: 1.5;
  }
}

/* Card link - always at bottom */
.card-item .card-link {
  color: var(--color-title);
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 16px;
  align-self: end;
}
@media screen and (min-width: 769px) {
  .card-item .card-link {
    padding-top: 1.5rem;
  }
}

/* Change to white when hovered */
.card-item:hover h3,
.card-item:hover p {
  color: #fff;
  text-decoration: none;
}

/* White when card is hovered (anywhere on the card) */
.card-item:hover .card-link {
  color: #fff;
  text-decoration: none !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
  box-shadow: none !important;
}

/* Card link arrow */
.card-item .card-link:after {
  color: #1966ff;
  content: "→";
  transition: transform 0.2s ease, color 0.4s ease;
}

.card-item:hover .card-link:after {
  transform: translateX(4px);
  color: #1966ff;
  text-decoration: none;
}

/* Card-specific borders */
.card-center {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/* Responsive design */
@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .card-center {
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
}
@media (min-width: 769px) {
  .card-item::before {
    left: 0;
  }
}
/* Desktop (948px+) - Adjust for vertical line position change */
@media (min-width: 948px) {
  .cards-grid {
    padding-left: calc(var(--line-left-desktop, 89px) + 2rem);
  }
}
/* ==========================================================================
   PAGE LAYOUT SYSTEM
   Single source of truth for page sidebar, vertical line, and content sections
   ========================================================================== */
/* ==========================================================================
   HOMEPAGE - Prevent horizontal scrollbar
   Applied at body level to catch overflow from all elements
   ========================================================================== */
body.home {
  overflow-x: hidden;
  max-width: 100vw;
}

body.home .site-layout {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ==========================================================================
   HOMEPAGE - Vertical Line
   Matches .page-sidebar line exactly for consistency across templates
   ========================================================================== */
.homepage {
  position: relative;
}

.home .page-hero__title {
  color: var(--c-black) !important;
  font-family: var(--ff-serif) !important;
  font-size: 34px;
  font-weight: 300;
  text-transform: none;
}
@media screen and (min-width: 960px) {
  .home .page-hero__title {
    font-size: 48px;
  }
}

.home .page-hero__text {
  font-family: var(--ff-sans);
  font-size: 20px;
  max-width: 100%;
}

/* Single vertical line - fixed position, matches .leadership-page::before */
.homepage::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--gutter);
  width: var(--line-width);
  background: var(--color-border-light, #ddd);
  z-index: 1;
  pointer-events: none;
}

/* Hide content-section lines on homepage - single line only */
.homepage .content-section::before {
  display: none;
}

@media screen and (min-width: 948px) {
  .homepage::before {
    left: var(--gutter-lg);
  }
}
/* ==========================================================================
   PAGE LAYOUT OVERRIDES
   ========================================================================== */
/* Override wrapper constraints */
.page-content__main > .wrapper {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Ensure .wrapper fills available height so sidebar stretches to footer */
.site-layout__main > .wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Hide default title output from base template */
.page-content__main > h1 {
  display: none;
}

/* ==========================================================================
   PAGE SIDEBAR - Container with Vertical Line
   ========================================================================== */
.page-sidebar {
  position: relative;
  padding: 0 var(--line-left-mobile, 1.5rem);
  max-width: 100rem;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Vertical line - fixed position, matches .leadership-page::before */
.page-sidebar::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--gutter);
  width: var(--line-width);
  background: var(--color-border-light, #ddd);
  z-index: 1;
}

.page-sidebar__wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ==========================================================================
   PAGE CONTENT MAIN
   ========================================================================== */
.page-content__main {
  width: 100%;
  position: relative;
  order: 1;
  padding: var(--line-left-mobile, 1.5rem) var(--gutter, 1.5rem) 0;
}

/* Line terminator element */
.page-content__main::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(-1 * var(--line-left-mobile, 1.5rem) - 1px);
  width: 4px;
  height: 4rem;
  background: var(--color-bg, #fff);
  z-index: 2;
}

/* ==========================================================================
   NO SIDEBAR VARIANT
   ========================================================================== */
.page-sidebar--no-aside .page-content__main {
  width: 100%;
}

.page-sidebar--no-aside .page-sidebar__wrap {
  flex-direction: column;
}

.page-sidebar--no-aside .page-content-section__inner {
  max-width: 81ch;
}

/* ==========================================================================
   PAGE CONTENT SECTIONS (for page.twig, page-foundations.twig, etc.)
   ========================================================================== */
.page-content-section {
  position: relative;
  padding: 2.25rem 0 2rem 1rem;
  max-width: 936px;
}

/* Horizontal border line 
.page-content-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-border-light, #ddd);
    z-index: 2;
    display: none;
} */
/* Blue accent bar 
.page-content-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 375px;
    height: var(--accent-bar-height, 4px);
    background: var(--color-primary, #2563eb);
    z-index: 3;
    display: none;
}*/
.page-content-section__inner {
  padding: var(--line-left-mobile, 1.5rem) var(--line-left-mobile, 1.5rem) 0;
  max-width: 81ch;
}

.page-content-section__title {
  display: inline-block;
  position: relative;
  margin-bottom: 1rem;
  font-family: var(--font-heading, Georgia, serif);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-dark, #000);
}

.page-content-section__body p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.page-content-section__body strong {
  display: block;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.page-content-section__body ul {
  margin: 0.5rem 0 1rem 1.5rem;
}

.page-content-section__body li {
  margin-bottom: 0.25rem;
}

/* ==========================================================================
   RESPONSIVE: TABLET (768px+)
   ========================================================================== */
@media screen and (min-width: 768px) {
  .page-content-section::before {
    display: block;
  }
  .page-content-section::after {
    display: block;
    left: 3rem;
    width: calc(100% - 3rem);
  }
  .page-content-section__inner {
    padding-left: 2rem;
  }
  .page-content-section__title {
    margin-bottom: 1.5rem;
    font-size: 42px;
  }
  .page-content-section__body p {
    font-size: 1.125rem;
  }
}
/* ==========================================================================
   RESPONSIVE: DESKTOP (948px+)
   ========================================================================== */
@media screen and (min-width: 948px) {
  .page-sidebar {
    padding-left: var(--line-left-desktop, 89px);
    padding-right: 0;
  }
  .page-sidebar::before {
    left: var(--gutter-lg);
  }
  .page-sidebar__wrap {
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    justify-content: space-between;
    max-width: 100rem;
  }
  .page-content__main {
    width: calc(100% - 17rem);
    order: unset;
    padding: 2rem 2rem 2rem;
  }
  .page-sidebar--no-aside .page-content__main {
    width: 100%;
  }
  .page-sidebar--no-aside .page-sidebar__wrap {
    flex-direction: column;
  }
  .page-content__main::after {
    left: calc(-1 * var(--line-left-desktop, 89px) - 1px);
    height: 5rem;
  }
  .page-content-section {
    padding: 2rem 0 1rem 1.5rem;
  }
  .page-content-section:first-child::before,
  .page-content-section:first-child::after {
    display: none;
  }
  .page-content-section:last-child {
    margin-bottom: 0;
  }
  .page-content-section::after {
    left: 96px;
    width: calc(100% - 1.5rem);
  }
  .page-content-section__title {
    font-size: 42px;
  }
  .page-content-section__inner {
    padding-right: 3rem;
  }
}
/* ==========================================================================
   RESPONSIVE: LARGE DESKTOP (1144px+)
   ========================================================================== */
@media screen and (min-width: 1144px) {
  .page-content__main {
    width: calc(100% - 20rem);
  }
  .page-sidebar--no-aside .page-content__main {
    width: 100%;
  }
  .page-content__main::after {
    height: 6rem;
  }
  .page-content-section {
    padding: 2rem 0 1rem 2rem;
  }
  .page-content-section__title {
    font-size: 42px;
  }
}
/* ==========================================================================
   RESPONSIVE: XXL DESKTOP (1296px+)
   ========================================================================== */
@media screen and (min-width: 1296px) {
  .page-content__main {
    width: calc(100% - 23rem);
  }
  .page-sidebar--no-aside .page-content__main {
    width: 100%;
  }
  .page-content__main::after {
    height: 7rem;
  }
  .page-content-section {
    padding: 1rem 4.7rem 1rem;
  }
  .page-content-section__title {
    font-size: 52px;
    line-height: 60px;
  }
}
/* ==========================================================================
   RESPONSIVE: ULTRA-WIDE (1448px+)
   ========================================================================== */
@media screen and (min-width: 1448px) {
  .page-content__main {
    width: calc(100% - 27rem);
  }
  .page-sidebar--no-aside .page-content__main {
    width: 100%;
  }
}
.page-hero__content--home {
  max-width: 1140px !important;
  padding: 2rem 3rem 2rem 3rem;
}
@media screen and (min-width: 960px) {
  .page-hero__content--home {
    padding: 4rem 3rem 4rem 10rem;
  }
}
.page-hero__content--home {
  /* Blue line overlay - only within this content box */
}
.page-hero__content--home::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--gutter);
  width: var(--line-width);
  background: #1966ff;
  z-index: 10;
}
@media screen and (min-width: 948px) {
  .page-hero__content--home::before {
    left: var(--gutter-lg);
  }
}
.page-hero__content--home h1 {
  font-size: 40px;
}
@media screen and (min-width: 960px) {
  .page-hero__content--home h1 {
    font-size: 49px;
  }
}
.page-hero__content--home p {
  font-weight: 400;
  max-width: 68ch;
  line-height: 1.8;
  font-size: 18px;
}
@media screen and (min-width: 960px) {
  .page-hero__content--home p {
    font-size: 20px;
  }
}

.alert-banner {
  top: 0px;
}
@media (min-width: 700px) {
  .admin-bar .alert-banner {
    top: calc(0px + var(--wp-admin--admin-bar--height, 32px));
  }
}
.alert-banner {
  z-index: 99999;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: var(--c-blue);
  width: 100%;
  border-bottom: 1px solid;
  border-color: rgba(255, 255, 255, 0.2);
  padding: 10px;
  box-sizing: border-box;
  transform: translateY(-150%);
  color: var(--c-white);
  font-family: var(--ff-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: alert-banner-slide-in 0.8s ease forwards;
}

.alert-banner.hidden {
  display: none !important;
}

.alert-banner-content {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
  padding: 10px 40px;
  box-sizing: border-box;
}

.alert-banner-title {
  font-size: 18px;
}

.alert-banner-text {
  margin: 0 20px 0 0;
}

.alert-banner-button {
  display: inline-block;
  background: #ffffff;
  height: 40px;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  color: var(--c-blue);
  font-size: 12px;
  font-weight: 700;
  line-height: 40px;
  text-decoration: none;
  white-space: nowrap;
}

.alert-banner-close {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  cursor: pointer;
}

.alert-banner-close:before,
.alert-banner-close:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background: var(--c-bg);
  width: 100%;
  height: 3px;
  border-radius: 2px;
  transform-origin: center;
}

.alert-banner-close:before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.alert-banner-close:after {
  transform: translate(-50%, -50%) rotate(45deg);
}
@keyframes alert-banner-slide-in {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
/* ==========================================================================
   Quote Slider Component
   ========================================================================== */
.slider {
  max-width: 900px;
  margin: 0 auto;
  margin-top: 3rem;
  position: relative;
  background: #fff;
}

.slider__container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.slider__track {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-top: 0.0625rem solid #1966ff;
  border-bottom: 0.0625rem solid #1966ff;
}

.slider__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.slider__slide--active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.slider__slide[aria-hidden=true] {
  visibility: hidden;
}

.slider__quote-wrapper {
  position: relative;
  padding: 20px 0px;
  background: #fff;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slider__quote-mark {
  width: 70px;
  height: 70px;
  color: #1966ff;
  margin-bottom: 30px;
}

.slider__blockquote {
  margin: 0;
  padding: 0;
  font-size: 36px;
  line-height: 1.4;
  color: #1a1a1a;
  font-family: Georgia, serif;
  font-style: normal;
  font-weight: 600;
  position: relative;
}

.slider__author {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 50px;
}

.slider__author-image {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.slider__author-info {
  display: flex;
  flex-direction: column;
}

.slider__author-name {
  font-size: 17px;
  font-weight: 400;
  color: #000;
  margin-bottom: 4px;
}
.slider__author-name strong {
  font-weight: 700;
}
.slider__author-name em {
  font-weight: 400;
}

.slider__author-title {
  font-size: 16px;
  color: #666;
  font-style: italic;
}

.slider__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0px;
  background: #fff;
}

.slider__button {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #1966ff;
}

.slider__button:hover {
  transform: scale(1.1);
}

.slider__button:focus {
  outline: 1px solid #1966ff;
  outline-offset: 1px;
}

.slider__button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.slider__button-icon {
  width: 30px;
  height: 30px;
}

.slider__indicators {
  display: flex;
  gap: 8px;
}

.slider__indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #1966ff;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.slider__indicator:hover {
  background: #1966ff;
}

.slider__indicator:focus {
  outline: 1px solid #1966ff;
  outline-offset: 1px;
}

.slider__indicator--active {
  background: #1966ff;
}

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

/* ==========================================================================
   RESPONSIVE: MOBILE (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .slider__quote-wrapper {
    padding: 60px 30px 40px;
    min-height: 350px;
  }
  .slider__blockquote {
    font-size: 24px;
  }
  .slider__quote-mark {
    width: 50px;
    height: 50px;
  }
  .slider__controls {
    padding: 20px 30px;
  }
  .slider__author-image {
    width: 56px;
    height: 56px;
  }
}
/* ==========================================================================
   Split Column Component
   Two-column layout: image left, content right
   Used in jump nav Section 2 (About the Vice President)
   ========================================================================== */
.split-column {
  position: relative;
  margin-left: calc(-1 * var(--jump-gutter));
  padding-left: var(--jump-gutter);
  padding-left: 0rem;
  padding-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 4rem;
}

.split-column::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -64px;
  width: 100%;
  height: 1px;
  background: #ddd;
  z-index: 5;
}
@media screen and (min-width: 1144px) {
  .split-column::before {
    left: -96px;
  }
}

.split-column__container {
  margin: 0 auto;
  padding: 20px 0 0 0;
}

.split-column__layout {
  display: grid;
  gap: 70px;
  grid-template-columns: 1fr;
}

.split-column__media {
  margin-left: calc(-1 * var(--jump-gutter));
}

.split-column__media img {
  width: 100%;
  height: auto;
  display: block;
}

.split-column__content {
  padding: 0 20px 0 0px;
  margin-left: calc(-1 * var(--jump-gutter));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}

.split-column__content h2 {
  font-family: "Georgia Pro", Georgia, serif;
  font-weight: 400;
  margin: 0 0 16px;
  line-height: 1.2;
  max-width: min(15ch, 100%);
}

.split-column__content p {
  margin-bottom: 30px;
  max-width: min(660px, 100%);
}

.split-column__content .btn {
  align-self: flex-start;
}

/* ==========================================================================
   RESPONSIVE: Desktop (900px+)
   ========================================================================== */
@media (min-width: 900px) {
  .split-column__container {
    padding: 0;
    margin-left: 0;
    max-width: none;
  }
  .split-column__layout {
    grid-template-columns: min(410px, 55%) 1fr;
    align-items: start;
    padding-top: 2rem;
  }
  .split-column__media {
    max-width: 410px;
  }
  .split-column__content {
    padding: 1rem 38px 0 0;
    margin-left: 0;
  }
}
@media (min-width: 1335px) {
  .split-column__content {
    width: auto;
  }
}
/* Stories Section */
.stories-section {
  background: var(--color-white);
  padding: 1rem 0;
  position: relative;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 960px) {
  .stories-section {
    padding: 6rem 0;
  }
}

.stories-container {
  padding-left: calc(var(--line-left-mobile) + 1.8rem);
  padding-right: 2rem;
  /* Align with feature-grid__thumb--small left edge */
}
@media screen and (min-width: 900px) {
  .stories-container {
    padding-left: 215px;
  }
}
.stories-container {
  /* Align with .feature-grid__container::after from 948px+ */
}
@media screen and (min-width: 948px) {
  .stories-container {
    padding-left: 222px;
  }
}
@media screen and (min-width: 1100px) {
  .stories-container {
    padding-left: 275px;
  }
}
@media screen and (min-width: 1200px) {
  .stories-container {
    padding-left: 300px;
  }
}
.stories-container {
  /* Smoothly compensate for .stories-section centering (max-width: 1500px) */
}
@media screen and (min-width: 1500px) {
  .stories-container {
    padding-left: max(2rem, 1050px - 50vw);
  }
}

.stories-header {
  margin-bottom: 4rem;
}
.stories-header h2 {
  font-weight: 400;
  color: var(--color-title);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.stories-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.story-container {
  margin-bottom: 3rem;
  container-type: inline-size;
}
@media screen and (min-width: 1200px) {
  .story-container {
    margin-bottom: 6rem;
  }
}

.story-item {
  padding: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--color-white);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  max-width: 900px;
}
.story-item:hover .story-image {
  transform: scale(1.05);
}
.story-item:hover .story-title-link {
  background-size: 100% 2px;
}
.story-item:hover .story-arrow:before {
  transform: translate(2px, -2px);
}
.story-item {
  /* Container query: Switch to media object layout - 600px minimum to ensure mobile stacks */
}
@container (min-width: 600px) {
  .story-item {
    display: flex;
    gap: 0;
    cursor: default;
    padding: 0;
  }
}
@container (min-width: 800px) {
  .story-item {
    gap: 0;
  }
}

.story-image-container {
  overflow: hidden;
  margin-bottom: 1.5rem;
}
@container (min-width: 600px) {
  .story-image-container {
    margin-bottom: 0;
    flex-shrink: 0;
    width: 313px;
    height: 315px;
  }
}

.story-image {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 0.4s ease;
}
@container (min-width: 600px) {
  .story-image {
    width: 100%;
    height: 100%;
  }
}
@container (min-width: 685px) {
  .story-image {
    -o-object-fit: cover;
       object-fit: cover;
  }
}

/* Clickable image link styles */
.story-image-link {
  display: block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  width: 100%;
  height: 100%;
}
.story-image-link:hover .story-image {
  transform: scale(1.05);
}

.story-content {
  position: relative;
  padding-bottom: 2.5rem;
}
@container (min-width: 600px) {
  .story-content {
    flex: 1;
    padding: 2.5rem;
  }
}
.story-content h3 {
  font-size: 22px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 500;
  color: #000;
  line-height: 1.3;
  margin-bottom: 0.75rem;
  position: relative;
  display: inline;
  cursor: pointer;
}
@container (min-width: 600px) {
  .story-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
}
@container (min-width: 800px) {
  .story-content h3 {
    font-size: 1.75rem;
  }
}
.story-content p {
  color: #000;
  margin: 0;
  margin-top: 1em;
}
@container (min-width: 800px) {
  .story-content p {
    max-width: 40ch;
  }
}

.story-meta {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

/* Clickable title link styles */
.story-title-link {
  color: #000;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(to right, #1166ff 0%, #1166ff 100%);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.4s ease;
}
.story-title-link::after {
  content: "";
  position: absolute;
  inset: -10rem;
}
.story-title-link:hover {
  background-size: 100% 2px;
}

.story-arrow {
  position: absolute;
  z-index: 1;
  bottom: 5px;
  right: 10px;
  width: 3rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #1166ff;
  font-size: 2.5rem;
  text-decoration: none !important;
  box-shadow: none !important;
}
.story-arrow:hover {
  text-decoration: none !important;
  box-shadow: none !important;
}
.story-arrow:before {
  content: "↗";
  transition: transform 0.2s ease;
  text-decoration: none !important;
}
.story-arrow:hover:before {
  transform: translate(2px, -2px);
  text-decoration: none !important;
}

/* global, layouts, components, pages, utilities, gutenberg */
/*# sourceMappingURL=maps/main.css.map */