@charset "UTF-8";
/* ============================================================
   BATTEN UNIVERSITY — CSS CUSTOM PROPERTIES
   global.css — :root token system

   TWO-LAYER ARCHITECTURE:
   Layer 1 · Palette  — Raw values. Named by color + scale.
                         Never used directly in components.
   Layer 2 · Semantic — Named by purpose. Point to Layer 1.
                         These are what your components use.

   WORKFLOW:
   Exploring a new color? Hard-code it in the component.
   Used it more than once and it feels right? Promote it:
     1. Add to the Palette layer below
     2. Add or update a Semantic token to point at it
     3. Replace the hard-coded values with the semantic token
     4. Never look back.
============================================================ */ :root {
  /* ----------------------------------------------------------
     LAYER 1 · PALETTE
     Raw hex. No context, no opinion. Just the colors.
  ---------------------------------------------------------- */
  /* Navy scale
     Your primary brand color family.
     700 is official brand blue. 800 is your preferred
     high-contrast version. Darker stops handle layered
     dark backgrounds (header → footer → copyright strip). */
  --color-navy-text-light: #DBF0FF;
  --color-navy-500: #1a5c8a;
  --color-navy-600: #0d4a73;
  --color-navy-700: #003c69;
  --color-navy-800: #002a4c;
  --color-navy-850: #00223d;
  --color-navy-900: #0b2336;
  --color-navy-950: #001d35;
  --color-slate-200: #E7EEF4; /* section--resources bg */
  --color-slate-300: #DEE8ED; /* section--resources border */
  --color-slate-500: #91AEC1; /* section-resources blue-gray bg */
  /* Teal scale
     Brand accent / action color family.
     500 is the official brand teal.
     400 is slightly lighter — good for focus rings and
     selection highlights where full-strength teal is too heavy.
     300 is light enough for stat labels on dark backgrounds.
     50 is basically a tinted white — section backgrounds. */
  --color-teal-50: #F0F9FF;
  --color-teal-100: #D4F4FF;
  --color-teal-200: #A8E6F7;
  --color-teal-800: #004d6e;
  --color-teal-300: #51cbee;
  --color-teal-400: #00a9d6;
  --color-teal-500: #0091b9;
  --color-teal-600: #0080a3; /* button teal — slightly darker than brand teal
                                  for better contrast on white backgrounds.
                                  #0091b9 at normal button size fails WCAG AA.
                                  #0080a3 passes. Worth keeping separate. */
  --color-teal-700: #006494;
  --color-border-tint: #EBF7FF; /* blue-tinted subtle borders —
                                     page-cta, event-item--card separator */
  --color-teal-wash: #e5f3f9; /* FA section light teal background */
  --color-teal-wash-border: #d6ecf5; /* FA section border */
  /* Blue tint
     Not quite teal, not quite white. This is #F5FBFF —
     the background you use everywhere that had no name.
     Now it has a name. You're welcome. */
  --color-blue-tint: #F5FBFF;
  /* Gray
     Official brand gray. Used for muted text, meta info. */
  --color-gray-100: #f1f1f1;
  --color-gray-200: #e7e7e7;
  --color-gray-300: #cccccc;
  --color-gray: #8996a0;
  /* Light backgrounds
     Neutral off-white used under wave/texture sections. */
  --color-bg-light: #f4f4f4;
  --color-bg-gray: #EFEFEF;
  --color-bg-wash: #F7F7F7; /* near-white section backgrounds (infocards, etc.) */
  --color-bg-wash-border: #EDEDED; /* border for wash sections */
  --color-bg-subtle: #f1f5f9; /* link-group default button background */
  --color-link-bg: #FBFCFD; /* link-group--light-blue button background */
  --color-link-border: #C6D8E2; /* link-group--light-blue button border */
  /* Gold
     Exists. Waiting patiently for its moment. */
  --color-gold: #f7b801;
  --color-arts-orange: #CC5803;
  /* Utility: pure values */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-content-border: #e5edf3; /* blue-gray border — tables, asides,
                                        blockquote, img-framed, faq answers.
                                        Replaces the 4 nearly identical border
                                        values scattered through the file. */
  --color-inner-border: #dce8f0; /* info strip column dividers */
  --color-form-border: #c5d4e0; /* form inputs, filter selects,
                                          empty state dashed borders */
  /* ----------------------------------------------------------
     LAYER 2 · SEMANTIC TOKENS
     Named by purpose. These are what you put in components.
     Change a palette value above → everything updates.
  ---------------------------------------------------------- */
  /* Brand */
  --brand-primary: var(--color-navy-700); /* #003c69 */
  --brand-primary-dark: var(--color-navy-800); /* #002a4c — preferred for contrast */
  --brand-accent: var(--color-teal-500); /* #0091b9 */
  --brand-accent-light: var(--color-teal-400); /* #00a9d6 */
  --brand-accent-hover: var(--color-teal-700); /* #006494 */
  /* Surfaces / Backgrounds */
  --surface-teal-light: var(--color-teal-100);
  --surface-dark: var(--color-navy-800); /* header, dark sections */
  --surface-darker: var(--color-navy-850); /* footer */
  --surface-deepest: var(--color-navy-900); /* copyright strip */
  --surface-tint: var(--color-blue-tint); /* #F5FBFF — light blue sections */
  --surface-light: var(--color-bg-light); /* neutral page bg */
  --surface-aside: rgb(248, 250, 252); /* content aside base background */
  --surface-card: #FBFCFE; /* event card near-white background */
  --surface-row: #f6f8fa; /* table odd row, empty state bg */
  /* Text */
  --text-body: #333333;
  --text-heading: var(--color-navy-700);
  --text-heading-dark: var(--color-navy-800);
  --text-on-dark: var(--color-white);
  --text-muted: var(--color-gray);
  --text-link: var(--color-navy-700);
  --text-link-hover: var(--color-teal-700);
  --text-muted-mid: #555555; /* secondary body text — page-cta paragraphs,
                                     slightly lighter than --text-body (#333) */
  --text-muted-dark: #666666; /* tertiary info text — event timestamps,
                                     meta content */
  --text-content: #444444; /* content body copy — slightly softer than
                                 --text-body (#333) used in section pages.
                                 Intentionally different — longer prose reads
                                 better with slightly reduced contrast. */
  --text-meta: #4b5463; /* metadata, descriptions, secondary content.
                                   Graduates: #4b5463, #4B5463, #4b5563 */
  --text-subtle: #64727d; /* timestamps, counts, tertiary info.
                                   Graduates: #64727d (x3 in file), #6b7280 */
  --text-subdued: #687482; /* h4 headings, muted heading color.
                                   Graduates: #687482 */
  --text-teal: var(--color-teal-700);
  --text-navy-light: var(--color-navy-text-light);
  /* Borders */
  --border-subtle: var(--color-blue-tint);
  --border-accent: var(--color-teal-500);
  --border-light: var(--color-gray-100);
  --border-mid: var(--color-gray-200);
  --border-dark: var(--color-navy-800);
  /* Interactive */
  --focus-ring: var(--color-teal-400); /* #00a9d6 */
  --selection-bg: var(--color-teal-400);
  /* ----------------------------------------------------------
     BACKWARD-COMPAT ALIASES
     Your existing files still reference these. They're not
     broken — they just point to the new palette now.
     Pull them out as you touch each file. Don't rush it.
     When a file no longer uses any of these, it's clean.
  ---------------------------------------------------------- */
  /* The ones that map cleanly */
  --blue: var(--color-navy-700);
  --blue-dark: var(--color-navy-800);
  --blue-darker: var(--color-navy-850);
  --blue-deep: var(--color-navy-900);
  --teal: var(--color-teal-500);
  --teal-light: var(--color-teal-300);
  --teal-dark: var(--color-teal-700);
  --teal-400: var(--color-teal-400);
  --teal-300: var(--color-teal-300);
  --teal-100: var(--color-teal-50);
  --gray: var(--color-gray);
  --white: var(--color-white);
  --bg-light: var(--color-bg-light);
  --gold: var(--color-gold);
  /* These were doing jobs that semantic tokens now cover.
     Kept alive so nothing breaks today. */
  --focus-color: var(--focus-ring);
  --nav-hover-color: var(--brand-accent);
  --teal-bg: var(--surface-dark);
  --teal-btn-bg: var(--brand-accent);
  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */
  --font-anton: "Anton", Impact, sans-serif;
  --font-merriweather: "Merriweather", serif;
  --font-kanit: "Kanit", sans-serif;
  --font-opensans: "Open Sans", sans-serif;
  --font-amaranth: "Amaranth", sans-serif;
  ;
  /* ----------------------------------------------------------
     TEXT SHADOWS
  ---------------------------------------------------------- */
  --text-shadow-smooth:
    0 1px 2px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25);
}
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/css/fonts/kanit-v17-latin-regular.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/css/fonts/kanit-v17-latin-500.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/css/fonts/kanit-v17-latin-600.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('/assets/css/fonts/open-sans-v44-latin-300.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/css/fonts/open-sans-v44-latin-regular.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/css/fonts/open-sans-v44-latin-500.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/css/fonts/open-sans-v44-latin-600.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/css/fonts/open-sans-v43-latin-700.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/css/fonts/open-sans-v44-latin-800.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/css/fonts/anton-v27-latin-regular.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/css/fonts/merriweather-v33-latin-regular.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/css/fonts/merriweather-v33-latin-600.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/css/fonts/merriweather-v33-latin-700.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/css/fonts/merriweather-v33-latin-800.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/css/fonts/merriweather-v33-latin-900.woff2') format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Amaranth';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/css/fonts/amaranth-v19-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Amaranth';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/css/fonts/amaranth-v19-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/assets/css/fonts/fa-solid-900.woff2");
}
@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/css/fonts/fa-regular-400.woff2");
}
@media(prefers-reduced-motion:no-preference) {
  html {
    scroll-behavior: smooth
  }
}
*, *::before, *::after {
  box-sizing: border-box
}
html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent
}
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle
}
button, input, select, optgroup, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0
}
button, select {
  text-transform: none
}
button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button
}
button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {
  cursor: pointer
}
[role="button"] {
  cursor: pointer
}
textarea {
  resize: vertical
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0
}
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  line-height: inherit;
  font-size: calc(1.275rem+0.3vw)
}
::selection {
  background: var(--color-teal-400);
  color: #fff;
}
a {
  color: var(--color-navy-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}
a:hover, a:focus-visible {
  color: var(--color-teal-700);
  text-decoration: none;
}
a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}
@media(min-width:1180px) {
  legend {
    font-size: 1.5rem
  }
}
legend + * {
  clear: left
}
::-moz-focus-inner {
  padding: 0;
  border-style: none
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button {
  cursor: pointer;
  filter: grayscale(1)
}
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
  display: none !important
}
::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button
}
::file-selector-button {
  font: inherit;
  -webkit-appearance: button
}
table {
  caption-side: bottom;
  border-collapse: collapse
}
caption {
  padding-top: .5rem;
  padding-bottom: .5rem;
  color: #ccc;
  text-align: left
}
thead, tbody, tfoot, tr, td, th {
  border-color: inherit;
  border-style: solid;
  border-width: 0
}
th {
  text-align: inherit;
  text-align: -webkit-match-parent
}
ol, ul {
  padding-left: 2rem;
  margin-top: 0;
  margin-bottom: 1rem
}
dl {
  margin-top: 0;
  margin-bottom: 1rem
}
ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0
}
dt {
  font-weight: 700;
  color: var(--color-navy-700);
}
dd {
  margin-bottom: .5rem;
  margin-left: 0
}
abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none
}
address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit
}
label {
  display: inline-block
}
.img-fluid {
  max-width: 100%;
  height: auto
}
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.img-rounded {
  border-radius: 4px;
}
.img-circle {
  border-radius: 50%;
}
.img-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.fade {
  transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
.fade:not(.show) {
  opacity: 0;
}
.collapse:not(.show) {
  display: none;
}
.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    transition: none;
  }
}
a, button {
  text-decoration: none;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease
}
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important
}
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px
}
:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none
}
@supports not selector(:focus-visible) {
  :focus {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px
  }
}
body {
  color: var(--text-body);
  font-family: var(--font-opensans);
  font-size: clamp(1.02rem, 0.9vw + 0.85rem, 1.2rem);
  letter-spacing: 0.02rem;
  line-height: 1.6;
  line-height: 1.3;
  margin: 0
}
body.has-sticky-header {
  padding-top: var(--header-height, 80px);
}
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-kanit);
  font-weight: 500;
}

.text-start {
  text-align: left !important
}
.text-end {
  text-align: right !important
}
.text-center {
  text-align: center !important
}
.text-decoration-none {
  text-decoration: none !important
}
.text-decoration-underline {
  text-decoration: underline !important
}
.text-decoration-line-through {
  text-decoration: line-through !important
}
.text-lowercase {
  text-transform: lowercase !important
}
.text-uppercase {
  text-transform: uppercase !important
}
.text-capitalize {
  text-transform: capitalize !important
}
.text-wrap {
  white-space: normal !important
}
.text-nowrap {
  white-space: nowrap !important
}
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important
}
.text-underline {
  text-decoration: underline !important;
}
.text-border-bottom-teal {
  border-bottom: 2px solid var(--color-teal-300);
}
.amaranth {
  font-family: var(--font-amaranth)!important;
}
.amaranth-bold {
  font-family: var(--font-amaranth)!important;
  font-weight: 700;
}
.sr-only, .visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important
}
.visually-hidden:not(caption), .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important
}
.visually-hidden *, .visually-hidden-focusable:not(:focus):not(:focus-within) * {
  overflow: hidden !important
}
.heading-kanit {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  letter-spacing: .5px
}
.heading-anton {
  font-family: "Anton", sans-serif;
  letter-spacing: 1px
}
.heading-opensans {
  font-family: "Open Sans", sans-serif
}
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
  transition: fill .2s ease-in-out
}
.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em .25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;

  border: 0;
  border-radius: .25rem;
  opacity: .5
}
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
  --gutter-x: 1.5rem;
  --gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--gutter-x) * .5);
  padding-left: calc(var(--gutter-x) * .5);
  margin-right: auto;
  margin-left: auto
}
@media(min-width:576px) {
  .container-sm, .container {
    max-width: 100%
  }
}
@media(min-width:768px) {
  .container-md, .container-sm, .container {
    max-width: 100%
  }
}
@media(min-width:992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px
  }
}
@media(min-width:1180px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 100%;
    padding: 0 2rem;
  }
}
@media(min-width:1300px) {
  /*  .container {
    max-width: 1280px
  }*/
}
@media(min-width:1400px) {
  /*  .container {
    max-width: 1400px
  }*/
}
@media(min-width:1500px) {
  /*  .container {
    max-width: 1400px
  }*/
}
@media(min-width:1600px) {
  .container {
    max-width: 1500px
  }
}
@media(min-width:1700px) {
  .container {
    max-width: 1600px
  }
}
:root {
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1180px;
  --breakpoint-xxl: 1400px
}
.row {
  --gutter-x: 1.5rem;
  --gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--gutter-y));
  margin-right: calc(-0.5 * var(--gutter-x));
  margin-left: calc(-0.5 * var(--gutter-x))
}
.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--gutter-x) * .5);
  padding-left: calc(var(--gutter-x) * .5);
  margin-top: var(--gutter-y)
}
.col {
  flex: 1 0 0
}
.col-12 {
  flex: 0 0 auto;
  width: 100%
}
.offset-1 {
  margin-left: 8.33333333%
}
.offset-2 {
  margin-left: 16.66666667%
}
.offset-3 {
  margin-left: 25%
}
.offset-4 {
  margin-left: 33.33333333%
}
.offset-5 {
  margin-left: 41.66666667%
}
.offset-6 {
  margin-left: 50%
}
.offset-7 {
  margin-left: 58.33333333%
}
.offset-8 {
  margin-left: 66.66666667%
}
.offset-9 {
  margin-left: 75%
}
.offset-10 {
  margin-left: 83.33333333%
}
.offset-11 {
  margin-left: 91.66666667%
}
.g-0, .gx-0 {
  --gutter-x: 0
}
.g-0, .gy-0 {
  --gutter-y: 0
}
.g-1, .gx-1 {
  --gutter-x: .25rem
}
.g-1, .gy-1 {
  --gutter-y: .25rem
}
.g-2, .gx-2 {
  --gutter-x: .5rem
}
.g-2, .gy-2 {
  --gutter-y: .5rem
}
.g-3, .gx-3 {
  --gutter-x: 1rem
}
.g-3, .gy-3 {
  --gutter-y: 1rem
}
.g-4, .gx-4 {
  --gutter-x: 1.5rem
}
.g-4, .gy-4 {
  --gutter-y: 1.5rem
}
.g-5, .gx-5 {
  --gutter-x: 3rem
}
.g-5, .gy-5 {
  --gutter-y: 3rem
}
@media(min-width:576px) {
  .col-sm {
    flex: 1 0 0
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%
  }
  .offset-sm-0 {
    margin-left: 0
  }
  .offset-sm-1 {
    margin-left: 8.33333333%
  }
  .offset-sm-2 {
    margin-left: 16.66666667%
  }
  .offset-sm-3 {
    margin-left: 25%
  }
  .offset-sm-4 {
    margin-left: 33.33333333%
  }
  .offset-sm-5 {
    margin-left: 41.66666667%
  }
  .offset-sm-6 {
    margin-left: 50%
  }
  .offset-sm-7 {
    margin-left: 58.33333333%
  }
  .offset-sm-8 {
    margin-left: 66.66666667%
  }
  .offset-sm-9 {
    margin-left: 75%
  }
  .offset-sm-10 {
    margin-left: 83.33333333%
  }
  .offset-sm-11 {
    margin-left: 91.66666667%
  }
}
@media(min-width:768px) {
  .col-md {
    flex: 1 0 0
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%
  }
  .offset-md-0 {
    margin-left: 0
  }
  .offset-md-1 {
    margin-left: 8.33333333%
  }
  .offset-md-2 {
    margin-left: 16.66666667%
  }
  .offset-md-3 {
    margin-left: 25%
  }
  .offset-md-4 {
    margin-left: 33.33333333%
  }
  .offset-md-5 {
    margin-left: 41.66666667%
  }
  .offset-md-6 {
    margin-left: 50%
  }
  .offset-md-7 {
    margin-left: 58.33333333%
  }
  .offset-md-8 {
    margin-left: 66.66666667%
  }
  .offset-md-9 {
    margin-left: 75%
  }
  .offset-md-10 {
    margin-left: 83.33333333%
  }
  .offset-md-11 {
    margin-left: 91.66666667%
  }
}
@media(min-width:992px) {
  .col-lg {
    flex: 1 0 0
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%
  }
  .offset-lg-0 {
    margin-left: 0
  }
  .offset-lg-1 {
    margin-left: 8.33333333%
  }
  .offset-lg-2 {
    margin-left: 16.66666667%
  }
  .offset-lg-3 {
    margin-left: 25%
  }
  .offset-lg-4 {
    margin-left: 33.33333333%
  }
  .offset-lg-5 {
    margin-left: 41.66666667%
  }
  .offset-lg-6 {
    margin-left: 50%
  }
  .offset-lg-7 {
    margin-left: 58.33333333%
  }
  .offset-lg-8 {
    margin-left: 66.66666667%
  }
  .offset-lg-9 {
    margin-left: 75%
  }
  .offset-lg-10 {
    margin-left: 83.33333333%
  }
  .offset-lg-11 {
    margin-left: 91.66666667%
  }
}
@media(min-width:1180px) {
  .col-xl {
    flex: 1 0 0
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%
  }
  .offset-xl-0 {
    margin-left: 0
  }
  .offset-xl-1 {
    margin-left: 8.33333333%
  }
  .offset-xl-2 {
    margin-left: 16.66666667%
  }
  .offset-xl-3 {

    margin-left: 25%
  }
  .offset-xl-4 {
    margin-left: 33.33333333%
  }
  .offset-xl-5 {
    margin-left: 41.66666667%
  }
  .offset-xl-6 {
    margin-left: 50%
  }
  .offset-xl-7 {
    margin-left: 58.33333333%
  }
  .offset-xl-8 {
    margin-left: 66.66666667%
  }
  .offset-xl-9 {
    margin-left: 75%
  }
  .offset-xl-10 {
    margin-left: 83.33333333%
  }
  .offset-xl-11 {
    margin-left: 91.66666667%
  }
}
@media(min-width:1400px) {
  .col-xxl {
    flex: 1 0 0
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%
  }
  .offset-xxl-0 {
    margin-left: 0
  }
  .offset-xxl-1 {
    margin-left: 8.33333333%
  }
  .offset-xxl-2 {
    margin-left: 16.66666667%
  }
  .offset-xxl-3 {
    margin-left: 25%
  }
  .offset-xxl-4 {
    margin-left: 33.33333333%
  }
  .offset-xxl-5 {
    margin-left: 41.66666667%
  }
  .offset-xxl-6 {
    margin-left: 50%
  }
  .offset-xxl-7 {
    margin-left: 58.33333333%
  }
  .offset-xxl-8 {
    margin-left: 66.66666667%
  }
  .offset-xxl-9 {
    margin-left: 75%
  }
  .offset-xxl-10 {
    margin-left: 83.33333333%
  }
  .offset-xxl-11 {
    margin-left: 91.66666667%
  }
}
.order-first {
  order: -1 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-last {
  order: 6 !important;
}
.order-sm-first {
    order: -1 !important;
  }
  .order-sm-0 {
    order: 0 !important;
  }
  .order-sm-1 {
    order: 1 !important;
  }
  .order-sm-2 {
    order: 2 !important;
  }
  .order-sm-3 {
    order: 3 !important;
  }
  .order-sm-4 {
    order: 4 !important;
  }
  .order-sm-5 {
    order: 5 !important;
  }
  .order-sm-last {
    order: 6 !important;
  }
.order-md-first {
    order: -1 !important;
  }
  .order-md-0 {
    order: 0 !important;
  }
  .order-md-1 {
    order: 1 !important;
  }
  .order-md-2 {
    order: 2 !important;
  }
  .order-md-3 {
    order: 3 !important;
  }
  .order-md-4 {
    order: 4 !important;
  }
  .order-md-5 {
    order: 5 !important;
  }
  .order-md-last {
    order: 6 !important;
  }
.order-lg-first {
    order: -1 !important;
  }
  .order-lg-0 {
    order: 0 !important;
  }
  .order-lg-1 {
    order: 1 !important;
  }
  .order-lg-2 {
    order: 2 !important;
  }
  .order-lg-3 {
    order: 3 !important;
  }
  .order-lg-4 {
    order: 4 !important;
  }
  .order-lg-5 {
    order: 5 !important;
  }
  .order-lg-last {
    order: 6 !important;
  }
.order-xl-first {
    order: -1 !important;
  }
  .order-xl-0 {
    order: 0 !important;
  }
  .order-xl-1 {
    order: 1 !important;
  }
  .order-xl-2 {
    order: 2 !important;
  }
  .order-xl-3 {
    order: 3 !important;
  }
  .order-xl-4 {
    order: 4 !important;
  }
  .order-xl-5 {
    order: 5 !important;
  }
  .order-xl-last {
    order: 6 !important;
  }
.order-xxl-first {
    order: -1 !important;
  }
  .order-xxl-0 {
    order: 0 !important;
  }
  .order-xxl-1 {
    order: 1 !important;
  }
  .order-xxl-2 {
    order: 2 !important;
  }
  .order-xxl-3 {
    order: 3 !important;
  }
  .order-xxl-4 {
    order: 4 !important;
  }
  .order-xxl-5 {
    order: 5 !important;
  }
  .order-xxl-last {
    order: 6 !important;
  }
.d-inline {
  display: inline !important
}
.d-inline-block {
  display: inline-block !important
}
.d-block {
  display: block !important
}
.d-grid {
  display: grid !important
}
.d-inline-grid {
  display: inline-grid !important
}
.d-table {
  display: table !important
}
.d-table-row {
  display: table-row !important
}
.d-table-cell {
  display: table-cell !important
}
.d-flex {
  display: flex !important
}
.d-inline-flex {
  display: inline-flex !important
}
.d-none {
  display: none !important
}
.flex-fill {
  flex: 1 1 auto !important
}
.flex-row {
  flex-direction: row !important
}
.flex-column {
  flex-direction: column !important
}
.justify-content-start {
  justify-content: flex-start !important
}
.justify-content-end {
  justify-content: flex-end !important
}
.justify-content-center {
  justify-content: center !important
}
.justify-content-between {
  justify-content: space-between !important
}
.justify-content-around {
  justify-content: space-around !important
}
.justify-content-evenly {
  justify-content: space-evenly !important
}
.align-items-start {
  align-items: flex-start !important
}
.align-items-end {
  align-items: flex-end !important
}
.align-items-center {
  align-items: center !important
}
.align-items-baseline {
  align-items: baseline !important
}
.align-items-stretch {
  align-items: stretch !important
}
.align-content-start {
  align-content: flex-start !important
}
.align-content-end {
  align-content: flex-end !important
}
.align-content-center {
  align-content: center !important
}
.align-content-between {
  align-content: space-between !important
}
.align-content-around {
  align-content: space-around !important
}
.align-content-stretch {
  align-content: stretch !important
}
.align-self-auto {
  align-self: auto !important
}
.align-self-start {
  align-self: flex-start !important
}
.align-self-end {
  align-self: flex-end !important
}
.align-self-center {
  align-self: center !important
}
.align-self-baseline {
  align-self: baseline !important
}
.align-self-stretch {
  align-self: stretch !important
}
.m-1 {
  margin: .25rem !important
}
.m-2 {
  margin: .5rem !important
}
.m-3 {
  margin: 1rem !important
}
.m-4 {
  margin: 1.5rem !important
}
.m-5 {
  margin: 3rem !important
}
.m-auto {
  margin: auto !important
}
.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important
}
.mx-1 {
  margin-right: .25rem !important;
  margin-left: .25rem !important
}
.mx-2 {
  margin-right: .5rem !important;
  margin-left: .5rem !important
}
.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important
}
.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important
}
.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important
}
.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important
}
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important
}
.my-1 {
  margin-top: .25rem !important;
  margin-bottom: .25rem !important
}
.my-2 {
  margin-top: .5rem !important;
  margin-bottom: .5rem !important
}
.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important
}
.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important
}
.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important
}
.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important
}
.mt-0 {
  margin-top: 0 !important
}
.mt-1 {
  margin-top: .25rem !important
}
.mt-2 {
  margin-top: .5rem !important
}
.mt-3 {
  margin-top: 1rem !important
}
.mt-4 {
  margin-top: 1.5rem !important
}
.mt-5 {
  margin-top: 2rem !important
}
.mt-6 {
  margin-top: 2.5rem !important
}
.mt-7 {
  margin-top: 3rem !important
}
.mt-8 {
  margin-top: 3.5rem !important
}
.mt-9 {
  margin-top: 4rem !important
}
.mt-auto {
  margin-top: auto !important
}
.me-0 {
  margin-right: 0 !important
}
.me-1 {
  margin-right: .25rem !important
}
.me-2 {
  margin-right: .5rem !important
}
.me-3 {
  margin-right: 1rem !important
}
.me-4 {
  margin-right: 1.5rem !important
}
.me-5 {
  margin-right: 3rem !important
}
.me-auto {
  margin-right: auto !important
}
.mb-0 {
  margin-bottom: 0 !important
}
.mb-1 {
  margin-bottom: .25rem !important
}
.mb-2 {
  margin-bottom: .5rem !important
}
.mb-3 {
  margin-bottom: 1rem !important
}
.mb-4 {
  margin-bottom: 1.5rem !important
}
.mb-5 {
  margin-bottom: 2rem !important
}
.mb-6 {
  margin-bottom: 2.5rem !important
}
.mb-7 {
  margin-bottom: 3rem !important
}
.mb-8 {
  margin-bottom: 4rem !important
}
.mb-9 {
  margin-bottom: 5rem !important
}

.mb-auto {
  margin-bottom: auto !important
}
.ms-0 {
  margin-left: 0 !important
}
.ms-1 {
  margin-left: .25rem !important
}
.ms-2 {
  margin-left: .5rem !important
}
.ms-3 {
  margin-left: 1rem !important
}
.ms-4 {
  margin-left: 1.5rem !important
}
.ms-5 {
  margin-left: 3rem !important
}
.ms-auto {
  margin-left: auto !important
}
.p-0 {
  padding: 0 !important
}
.p-1 {
  padding: .25rem !important
}
.p-2 {
  padding: .5rem !important
}
.p-3 {
  padding: 1rem !important
}
.p-4 {
  padding: 1.5rem !important
}
.p-5 {
  padding: 3rem !important
}
.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important
}
.px-1 {
  padding-right: .25rem !important;
  padding-left: .25rem !important
}
.px-2 {
  padding-right: .5rem !important;
  padding-left: .5rem !important
}
.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important
}
.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important
}
.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important
}
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important
}
.py-1 {
  padding-top: .25rem !important;
  padding-bottom: .25rem !important
}
.py-2 {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important
}
.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important
}
.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important
}
.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important
}
.pt-0 {
  padding-top: 0 !important
}
.pt-1 {
  padding-top: .25rem !important
}
.pt-2 {
  padding-top: .5rem !important
}
.pt-3 {
  padding-top: 1rem !important
}
.pt-4 {
  padding-top: 1.5rem !important
}
.pt-5 {
  padding-top: 3rem !important
}
.pe-0 {
  padding-right: 0 !important
}
.pe-1 {
  padding-right: .25rem !important
}
.pe-2 {
  padding-right: .5rem !important
}
.pe-3 {
  padding-right: 1rem !important
}
.pe-4 {
  padding-right: 1.5rem !important
}
.pe-5 {
  padding-right: 3rem !important
}
.pb-0 {
  padding-bottom: 0 !important
}
.pb-1 {
  padding-bottom: .25rem !important
}
.pb-2 {
  padding-bottom: .5rem !important
}
.pb-3 {
  padding-bottom: 1rem !important
}
.pb-4 {
  padding-bottom: 1.5rem !important
}
.pb-5 {
  padding-bottom: 3rem !important
}
.ps-0 {
  padding-left: 0 !important
}
.ps-1 {
  padding-left: .25rem !important
}
.ps-2 {
  padding-left: .5rem !important
}
.ps-3 {
  padding-left: 1rem !important
}
.ps-4 {
  padding-left: 1.5rem !important
}
.ps-5 {
  padding-left: 3rem !important
}
@media(min-width:576px) {
  .d-sm-inline {
    display: inline !important
  }
  .d-sm-inline-block {
    display: inline-block !important
  }
  .d-sm-block {
    display: block !important
  }
  .d-sm-grid {
    display: grid !important
  }
  .d-sm-inline-grid {
    display: inline-grid !important
  }
  .d-sm-table {
    display: table !important
  }
  .d-sm-table-row {
    display: table-row !important
  }
  .d-sm-table-cell {
    display: table-cell !important
  }
  .d-sm-flex {
    display: flex !important
  }
  .d-sm-inline-flex {
    display: inline-flex !important
  }
  .d-sm-none {
    display: none !important
  }
  .flex-sm-fill {
    flex: 1 1 auto !important
  }
  .flex-sm-row {
    flex-direction: row !important
  }
  .flex-sm-column {
    flex-direction: column !important
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important
  }
  .flex-sm-grow-0 {
    flex-grow: 0 !important
  }
  .flex-sm-grow-1 {
    flex-grow: 1 !important
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important
  }
  .justify-content-sm-start {
    justify-content: flex-start !important
  }
  .justify-content-sm-end {
    justify-content: flex-end !important
  }
  .justify-content-sm-center {
    justify-content: center !important
  }
  .justify-content-sm-between {
    justify-content: space-between !important
  }
  .justify-content-sm-around {
    justify-content: space-around !important
  }
  .justify-content-sm-evenly {
    justify-content: space-evenly !important
  }
  .align-items-sm-start {
    align-items: flex-start !important
  }
  .align-items-sm-end {
    align-items: flex-end !important
  }
  .align-items-sm-center {
    align-items: center !important
  }
  .align-items-sm-baseline {
    align-items: baseline !important
  }
  .align-items-sm-stretch {
    align-items: stretch !important
  }
  .align-content-sm-start {
    align-content: flex-start !important
  }
  .align-content-sm-end {
    align-content: flex-end !important
  }
  .align-content-sm-center {
    align-content: center !important
  }
  .align-content-sm-between {
    align-content: space-between !important
  }
  .align-content-sm-around {
    align-content: space-around !important
  }
  .align-content-sm-stretch {
    align-content: stretch !important
  }
  .align-self-sm-auto {
    align-self: auto !important
  }
  .align-self-sm-start {
    align-self: flex-start !important
  }
  .align-self-sm-end {
    align-self: flex-end !important
  }
  .align-self-sm-center {
    align-self: center !important
  }
  .align-self-sm-baseline {
    align-self: baseline !important
  }
  .align-self-sm-stretch {
    align-self: stretch !important
  }
}
@media(min-width:768px) {
  .d-md-inline {
    display: inline !important
  }
  .d-md-inline-block {
    display: inline-block !important
  }
  .d-md-block {
    display: block !important
  }
  .d-md-grid {
    display: grid !important
  }
  .d-md-inline-grid {
    display: inline-grid !important
  }
  .d-md-table {
    display: table !important
  }
  .d-md-table-row {
    display: table-row !important
  }
  .d-md-table-cell {
    display: table-cell !important
  }
  .d-md-flex {
    display: flex !important
  }
  .d-md-inline-flex {
    display: inline-flex !important
  }
  .d-md-none {
    display: none !important
  }
  .flex-md-fill {
    flex: 1 1 auto !important
  }
  .flex-md-row {
    flex-direction: row !important
  }
  .flex-md-column {
    flex-direction: column !important
  }
  .justify-content-md-start {
    justify-content: flex-start !important
  }
  .justify-content-md-end {
    justify-content: flex-end !important
  }
  .justify-content-md-center {
    justify-content: center !important
  }
  .justify-content-md-between {
    justify-content: space-between !important
  }
  .justify-content-md-around {
    justify-content: space-around !important
  }
  .justify-content-md-evenly {
    justify-content: space-evenly !important
  }
  .align-items-md-start {
    align-items: flex-start !important
  }
  .align-items-md-end {
    align-items: flex-end !important
  }
  .align-items-md-center {
    align-items: center !important
  }
  .align-items-md-baseline {
    align-items: baseline !important
  }
  .align-items-md-stretch {
    align-items: stretch !important
  }
  .align-content-md-start {
    align-content: flex-start !important
  }
  .align-content-md-end {
    align-content: flex-end !important
  }
  .align-content-md-center {
    align-content: center !important
  }
  .align-content-md-between {
    align-content: space-between !important
  }
  .align-content-md-around {
    align-content: space-around !important
  }
  .align-content-md-stretch {
    align-content: stretch !important
  }
  .align-self-md-auto {
    align-self: auto !important
  }
  .align-self-md-start {
    align-self: flex-start !important
  }
  .align-self-md-end {
    align-self: flex-end !important
  }
  .align-self-md-center {
    align-self: center !important
  }
  .align-self-md-baseline {
    align-self: baseline !important
  }
  .align-self-md-stretch {
    align-self: stretch !important
  }
}
@media(min-width:992px) {
  .d-lg-inline {
    display: inline !important
  }
  .d-lg-inline-block {
    display: inline-block !important
  }
  .d-lg-block {
    display: block !important
  }
  .d-lg-grid {
    display: grid !important
  }
  .d-lg-inline-grid {
    display: inline-grid !important
  }
  .d-lg-table {
    display: table !important
  }
  .d-lg-table-row {
    display: table-row !important
  }
  .d-lg-table-cell {
    display: table-cell !important
  }
  .d-lg-flex {
    display: flex !important
  }
  .d-lg-inline-flex {
    display: inline-flex !important
  }
  .d-lg-none {
    display: none !important
  }
  .flex-lg-fill {
    flex: 1 1 auto !important
  }
  .justify-content-lg-start {
    justify-content: flex-start !important
  }
  .justify-content-lg-end {
    justify-content: flex-end !important
  }
  .justify-content-lg-center {
    justify-content: center !important
  }
  .justify-content-lg-between {
    justify-content: space-between !important
  }
  .justify-content-lg-around {
    justify-content: space-around !important
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly !important
  }
  .align-items-lg-start {
    align-items: flex-start !important
  }
  .align-items-lg-end {
    align-items: flex-end !important
  }
  .align-items-lg-center {
    align-items: center !important
  }
  .align-items-lg-baseline {
    align-items: baseline !important
  }
  .align-items-lg-stretch {
    align-items: stretch !important
  }
  .align-content-lg-start {
    align-content: flex-start !important
  }
  .align-content-lg-end {
    align-content: flex-end !important
  }
  .align-content-lg-center {
    align-content: center !important
  }
  .align-content-lg-between {
    align-content: space-between !important
  }
  .align-content-lg-around {
    align-content: space-around !important
  }
  .align-content-lg-stretch {
    align-content: stretch !important
  }
  .align-self-lg-auto {
    align-self: auto !important
  }
  .align-self-lg-start {
    align-self: flex-start !important
  }
  .align-self-lg-end {
    align-self: flex-end !important
  }
  .align-self-lg-center {
    align-self: center !important
  }
  .align-self-lg-baseline {
    align-self: baseline !important
  }
  .align-self-lg-stretch {
    align-self: stretch !important
  }
}
@media(min-width:1180px) {
  .d-xl-inline {
    display: inline !important
  }
  .d-xl-inline-block {
    display: inline-block !important
  }
  .d-xl-block {
    display: block !important
  }
  .d-xl-grid {
    display: grid !important
  }
  .d-xl-inline-grid {
    display: inline-grid !important
  }
  .d-xl-table {
    display: table !important
  }
  .d-xl-table-row {
    display: table-row !important
  }
  .d-xl-table-cell {
    display: table-cell !important
  }
  .d-xl-flex {
    display: flex !important
  }
  .d-xl-inline-flex {
    display: inline-flex !important
  }
  .d-xl-none {
    display: none !important
  }
  .flex-xl-fill {
    flex: 1 1 auto !important
  }
  .flex-xl-row {
    flex-direction: row !important
  }
  .flex-xl-column {
    flex-direction: column !important
  }
}
@media(min-width:1400px) {
  .d-xxl-inline {
    display: inline !important
  }
  .d-xxl-inline-block {
    display: inline-block !important
  }
  .d-xxl-block {
    display: block !important
  }
  .d-xxl-grid {
    display: grid !important
  }
  .d-xxl-inline-grid {
    display: inline-grid !important
  }
  .d-xxl-table {
    display: table !important
  }
  .d-xxl-table-row {
    display: table-row !important
  }
  .d-xxl-table-cell {
    display: table-cell !important
  }
  .d-xxl-flex {
    display: flex !important
  }
  .d-xxl-inline-flex {
    display: inline-flex !important
  }
  .d-xxl-none {
    display: none !important
  }
  .flex-xxl-fill {
    flex: 1 1 auto !important
  }
  .flex-xxl-row {
    flex-direction: row !important
  }
  .flex-xxl-column {
    flex-direction: column !important
  }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important
  }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important
  }
  .flex-xxl-grow-0 {
    flex-grow: 0 !important
  }
  .flex-xxl-grow-1 {
    flex-grow: 1 !important
  }
  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important
  }
  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important
  }
  .flex-xxl-wrap {
    flex-wrap: wrap !important
  }
  .flex-xxl-nowrap {
    flex-wrap: nowrap !important
  }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important
  }
  .justify-content-xxl-start {
    justify-content: flex-start !important
  }
  .justify-content-xxl-end {
    justify-content: flex-end !important
  }
  .justify-content-xxl-center {
    justify-content: center !important
  }
  .justify-content-xxl-between {
    justify-content: space-between !important
  }
  .justify-content-xxl-around {
    justify-content: space-around !important
  }
  .justify-content-xxl-evenly {
    justify-content: space-evenly !important
  }
  .align-items-xxl-start {
    align-items: flex-start !important
  }
  .align-items-xxl-end {
    align-items: flex-end !important
  }
  .align-items-xxl-center {
    align-items: center !important
  }
  .align-items-xxl-baseline {
    align-items: baseline !important
  }
  .align-items-xxl-stretch {
    align-items: stretch !important
  }
  .align-content-xxl-start {
    align-content: flex-start !important
  }
  .align-content-xxl-end {
    align-content: flex-end !important
  }
  .align-content-xxl-center {
    align-content: center !important
  }
  .align-content-xxl-between {
    align-content: space-between !important
  }
  .align-content-xxl-around {
    align-content: space-around !important
  }
  .align-content-xxl-stretch {
    align-content: stretch !important
  }
}
.gap-0 {
  gap: 0 !important
}
.gap-1 {
  gap: .25rem !important
}
.gap-2 {
  gap: .5rem !important
}
.gap-3 {
  gap: 1rem !important
}
.gap-4 {
  gap: 1.5rem !important
}
.gap-5 {
  gap: 3rem !important
}
.row-gap-0 {
  row-gap: 0 !important
}
.row-gap-1 {
  row-gap: .25rem !important
}
.row-gap-2 {
  row-gap: .5rem !important
}
.row-gap-3 {
  row-gap: 1rem !important
}
.row-gap-4 {
  row-gap: 1.5rem !important
}
.row-gap-5 {
  row-gap: 3rem !important
}
.column-gap-0 {
  -moz-column-gap: 0 !important;
  column-gap: 0 !important
}
.column-gap-1 {
  -moz-column-gap: .25rem !important;
  column-gap: .25rem !important
}
.column-gap-2 {
  -moz-column-gap: .5rem !important;
  column-gap: .5rem !important
}
.column-gap-3 {
  -moz-column-gap: 1rem !important;
  column-gap: 1rem !important
}
.column-gap-4 {
  -moz-column-gap: 1.5rem !important;
  column-gap: 1.5rem !important
}
.column-gap-5 {
  -moz-column-gap: 3rem !important;
  column-gap: 3rem !important
}
/* ========================================================================== */
/* EMERGENCY ALERT MESSAGING                                                  */
/* ========================================================================== */
.site-alert--new {
  width: 100%;
  font-size: 1rem;
  line-height: 1.2;
  padding: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  border-top: 2px solid var(--surface-dark);
}
/* Inner layout */
.site-alert--inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0.45rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  flex-direction: column;
}
/* Text + link base */
.site-alert--text {
  font-weight: 600;
  letter-spacing: 0.2px;
}
.site-alert--more {
  margin-left: 0.4rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-alert--more:hover, .site-alert--more:focus-visible {
  text-decoration-thickness: 2px;
  outline: none;
}
/* Icon */
.site-alert--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-right: 0.15rem;
}
/* === INFO (alert) === */
.site-alert--info {
  background: var(--surface-tint);
  color: var(--brand-primary-dark);
}
.site-alert--info .site-alert--icon {
  color: var(--color-navy-800);
}
.site-alert--info .site-alert--more {
  color: var(--color-navy-800);
}
/* === WARNING === */
.site-alert--warning {
  background: #F2C94C;
  color: var(--brand-primary-dark);
}
.site-alert--warning .site-alert--icon {
  color: var(--color-navy-800);
}
.site-alert--warning .site-alert--more {
  color: var(--color-navy-800);
}
/* === EMERGENCY === */
.site-alert--emergency {
  background: #E55353;
  color: #ffffff;
}
.site-alert--emergency .site-alert--icon {
  color: #ffffff;
}
.site-alert--emergency .site-alert--more {
  color: #ffffff;
}
/* Mobile tightening */
@media (min-width: 576px) {
  .site-alert--inner {
    padding: 0.45rem 1rem;
    font-size: 1rem;
  }
}
@media (min-width: 1180px) {
  .site-alert--inner {
    max-width: 1180px;
    flex-direction: row;
  }
}
/* ========================================================================== */
/* HEADER / NAVBAR STYLES                                                     */
/* ========================================================================== */
/* Optional spacing token framework (NOT IN USE YET)
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
}
*/
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration: 0 !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0 !important;
    scroll-behavior: auto !important
  }
  .offcanvas, .nav-link, .btn {
    transition: none !important;
    transform: none !important;
    animation: none !important
  }
}
.nav {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none
}
.nav-link {
  display: inline-block;
  padding: .5rem 1rem;
  color: #fff;
  text-decoration: none;
  background: 0;
  border: 0;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}
.nav--accessibility {
  display: flex;
  justify-content: center;
  background: var(--focus-ring);
  color: #fff;
  font-size: .875rem;
  overflow: hidden
}
.nav-accessibility-link {
  display: block;
  width: auto;
  padding: .5rem;
  text-align: center;
  font-size: 1.3rem;
  color: #fff;
  background: var(--focus-ring);
  margin: .75rem;
  border-radius: 2px
}
.nav-accessibility-link:focus, .nav-accessibility-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px
}
.site-header {
  position: relative;
  background: var(--color-navy-800);
  padding: 0
}
.site-header--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  animation: headerSlideDown .2s ease forwards;
}
@keyframes headerSlideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.site-header .container {
  padding: 0;
  max-width: 100%
}
.home-link {
  width: clamp(150px, 53vw, 290px);
  margin-left: .5rem;
  transition: width 0.5s ease-in-out;
}
.site-header--sticky .home-link {
  width: 225px;
}
.site-logo {
  max-width: 100%
}
.site-header .prospective-nav {
  display: none
}
.offcanvas-header .prospective-nav {
  display: flex
}
.nav--prospective {
  justify-content: center
}
.nav--prospective .nav-link {
  display: inline-block;
  font-weight: 700;
  color: #fff;
  border: 1px solid;
  margin: .75rem .35rem;
  padding: .75rem 1rem;
  font-size: .95rem;
  border-radius: 2px
}
.nav--prospective .nav-link:hover, .nav--prospective .nav-link:focus, .nav--prospective .nav-link:active {
  color: var(--brand-accent-light)
}
.menu-triggers {
  display: flex
}
.btn.btn--menu {
  display: flex;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .9rem;
  color: #fff;
  border-radius: 0;
  background: inherit;
  border: 0;
  width: clamp(70px, 22vw, 95px);
  padding: clamp(1.75rem, 1vw + 1.25rem, 1.85rem) 0;
  transition: font-size 0.3s ease, padding 0.3s ease;
  flex-direction: column;
  gap: .15rem;
  align-items: center;
  min-width: auto;
}
.site-header--sticky .btn.btn--menu {
  padding: 1rem 0;
  font-size: .8rem;
}
.btn.btn--menu span {
  display: block;
  line-height: 1.2
}
.btn.btn--menu .icon {
  font-size: 1.25rem;
  transition: font-size 0.5s ease-in-out
}
.site-header--sticky .btn.btn--menu .icon {
  font-size: 1.2rem;
}
.btn.btn--menu:hover, .btn.btn--menu:focus, .btn.btn--menu:active {
  background-color: var(--color-teal-700);
  color: #fff
}
.offcanvas--mainmenu {
  position: fixed;
  inset: 0;
  max-height: 100%;
  background-color: var(--color-navy-800);
  color: #fff;
  transform: translateX(100%);
  transition: transform .35s ease-in-out;
  bottom: 0;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  visibility: hidden;
  background-clip: padding-box;
  outline: 0
}
.offcanvas--left {
  transform: translateX(-100%)
}
.offcanvas.showing, .offcanvas.show:not(.hiding) {
  transform: none
}
.offcanvas.showing, .offcanvas.hiding, .offcanvas.show {
  visibility: visible
}
.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.25rem .5rem 1rem;
  border-bottom: 1px solid var(--color-navy-950);
}
.offcanvas--mainmenu .btn-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.5rem;
  filter: invert(1) grayscale(100%) brightness(200%);
  padding: calc(1rem * 0.5) calc(1rem * 0.5);
}
.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000
}
.offcanvas-backdrop.fade {
  opacity: 0
}
.offcanvas-backdrop.show {
  opacity: .5
}
.offcanvas-body {
  flex-grow: 1;
  padding: 1rem 1rem;
  overflow-y: auto
}
.nav--main-nav {
  flex-direction: column
}
.nav-accordion-button {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 1.75rem 0 .75rem;
  font-family: var(--font-anton);
  font-size: 1.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  background-color: transparent;
  border-top: 1px solid var(--color-navy-800);
  border-bottom: 1px solid var(--color-navy-950);
  outline: 0
}
.nav-accordion-button:hover, .nav-accordion-button:focus, .nav-accordion-button:active {
  color: var(--brand-accent-light)
}
.nav-link.nav-accordion-button:not(.collapsed) {
  border-bottom: 0
}
.accordion-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  width: 1em;
  height: 1em
}
.accordion-icon .icon {
  width: 100%;
  height: 100%;
  fill: currentColor;
  transition: opacity .2s ease, transform .2s ease
}
.accordion-icon .icon-minus {
  opacity: 0;
  position: absolute
}
.nav-accordion-button:not(.collapsed) .accordion-icon .icon-plus {
  opacity: 0;
  position: absolute
}
.nav-accordion-button:not(.collapsed) .accordion-icon .icon-minus {
  opacity: 1;
  position: static
}
.menu-header-link {
  display: inline-block;
  margin: 1rem 0;
  padding: 0;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none
}
.menu-header-link:hover, .menu-header-link:focus, .menu-header-link:active {
  color: var(--brand-accent-light)
}
.main-menu-header {
  margin-bottom: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-accent-light);
  text-transform: uppercase;
  font-family: var(--font-opensans)
}
.menu-submenu {
  width: 100%;
  margin: 0;
  padding: .5rem 0 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  list-style: none;
  border: 0;
  border-radius: 0
}
.menu-submenu .nav-link {
  display: block;
  padding: .45rem 0;
  font-weight: 500;
  color: #fff;
  text-transform: none;
  font-size: 1rem
}
.menu-submenu .nav-link:hover, .menu-submenu .nav-link:focus, .menu-submenu .nav-link:active {
  text-decoration: underline
}
.secondary-navbar {
  margin: 2rem 0
}
.nav--subsection .nav-link {
  display: inline-block;
  margin: .75rem 0;
  padding: .25rem 0;
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff;
  font-family: var(--font-kanit);
  text-transform: uppercase;
  border-bottom: 10px solid var(--color-navy-700)
}
.nav--subsection .nav-link:hover, .nav--subsection .nav-link:focus, .nav--subsection .nav-link:active {
  border-bottom-color: var(--brand-accent-light);
  text-decoration: none
}
.quicklinks {
  background-color: var(--color-navy-850);
  border: 5px solid var(--brand-accent-light);
  padding: 2rem;
  margin-top: 2rem
}
.quicklinks-header {
  font-family: var(--font-anton);
  font-size: 2.5rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  color: #fff;
  margin: 0
}
.quicklinks-menu .nav-link {
  display: block;
  margin: 3px 0;
  padding: .25rem 0;
  font-size: 1.15rem;
  font-weight: 400;
  color: #fff
}
.quicklinks-menu .nav-link:hover, .quicklinks-menu .nav-link:focus, .quicklinks-menu .nav-link:active {
  color: var(--brand-accent-light);
  text-decoration: underline
}
.nav-popular-search {
  gap: .5rem
}
.nav-popular-search .nav-link {
  display: inline-block;
  color: #fff;
  margin: .25rem;
  padding: .75rem 1rem;
  font-size: 1rem;
  text-align: center;
  border: 1px solid var(--color-navy-950);
  border-radius: 4px;
  background: var(--color-navy-950);
}
.nav-popular-search .nav-link:hover, .nav-popular-search .nav-link:focus-visible, .nav-popular-search .nav-link:active {
  color: var(--color-teal-300);
  border-color: var(--color-teal-300);
  text-decoration: none;
}
.site-search {
  margin: 1rem 0 2rem
}
.form-control.form-control--search {
  padding: .25rem .5rem .15rem .75rem;
  display: block;
  color: #fff;
  border: 0 solid #fff;
  border-radius: 0;
  background-color: var(--color-navy-950);
  outline: 0;
  font-size: 1.5rem;
  font-style: italic;
}
.form-control.form-control--search::placeholder {
  color: #fff !important;
  opacity: 1
}
.form-control.form-control--search:focus {
  box-shadow: 0 8px 6px -6px #51cbee;
  border: solid #51cbee;
  background-color: var(--color-navy-950);
  border-width: 0 0 1px;
  color: #fff;
}
.form-control.form-control--search:focus::placeholder {
  color: transparent !important;
}
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control, .input-group > .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.form-control--search:focus, .form-control--search:focus-within {
  border: solid var(--color-teal-300);
  border-width: 0 0 1px;
  box-shadow: 0 8px 6px -6px var(--color-teal-300);
  will-change: box-shadow
}
.btn--search {
  position: relative;
  right: 0;
  bottom: 0;
  width: 70px !important;
  height: 70px !important;
  font-size: 1.25rem;
  color: #fff;
  background-color: transparent;
  border: 1px solid var(--color-navy-950);
  border-radius: 0 !important;
  padding: 0 !important;
  min-width: auto !important;
  border: 1px solid var(--color-navy-800) !important;
}
.btn--search .icon {
  font-size: 1.4rem;
  margin-top: .15rem
}
.btn--search:hover, .btn--search:focus, .btn--search:focus-within {
  background-color: var(--color-teal-400) !important;
  color: var(--color-navy-800) !important;
}
@media(min-width:576px) {
  .nav--inner-cta .nav-link {
    padding: .5rem .5rem
  }
}
@media(min-width:768px) {
  .offcanvas-header {
    padding: 1rem
  }
  .offcanvas--mainmenu .btn-close {
    position: relative;
    top: auto;
    right: 0;
    margin: 0
  }
  .nav--prospective .nav-link {
    margin: 0 .5rem;
    padding: 1rem .35rem;
    border: 0
  }
  .nav-accordion-button::after {
    font-size: .8em
  }
  .nav-accordion-button {
    font-size: 2.25rem;
    padding: 2rem 0 .5rem
  }
  .btn--search {
    width: 65px;
    height: 65px
  }
  .btn--search .icon {
    font-size: 2rem
  }
}
@media(min-width:992px) {
  .site-header .prospective-nav {
    display: flex;
    margin: 0 .25rem 0 auto
  }
  .site-header .nav--prospective .nav-link {
    margin: 0 .5rem;
    padding: .75rem .2rem;
    border: 0
  }
  .offcanvas-body {
    padding: 3rem 1rem
  }
  .site-header .container {
    max-width: 960px
  }
  .site-search {
    margin: 0 0 2rem
  }
  .form-control--search {
    padding: .75rem .5rem .25rem .75rem;
    font-size: 1.5rem
  }
  .quicklinks {
    padding: 3rem 3rem 5rem;
    border-width: 1px;
    margin-top: 0
  }
  .quicklinks-header {
    margin: 0
  }
  .navigation-trigger .icon {
    font-size: 1.15rem
  }
}
@media(min-width:1180px) {
  .site-header .container {
    max-width: 1140px
  }
  .site-header .prospective-nav {
    margin: 0 1rem 0 auto
  }
  .nav--prospective .nav-link {
    font-size: 1.05rem;
    font-weight: 600
  }
  .site-header .nav--prospective .nav-link {
    margin: 0 .5rem;
    padding: .75rem .7rem;
    border: 0
  }
  .prospective-nav {
    margin-left: auto;
    margin-right: 2rem
  }
  .nav-accordion-button {
    font-size: 2.5rem
  }
  .form-control--search {
    font-size: 1.75rem
  }
  .quicklinks {
    padding: 1.5rem
  }
}
@media(min-width:1300px) {
  .site-header .container {
    max-width: 1280px
  }
}
@media(min-width:1400px) {
  .site-header .container {
    max-width: 1320px
  }
  .nav--prospective .nav-link {
    padding: 1rem 1.25rem
  }
}
@media(min-width:1500px) {
  .site-header .container {
    max-width: 1400px
  }
}
@media(min-width:1600px) {
  .site-header .container {
    max-width: 1500px
  }
  .main-nav {
    padding: 1rem 4rem
  }
}
@media(min-width:1700px) {
  .site-header .container {
    max-width: 1600px
  }
}
@media(min-width:1800px) {
  .site-header .container {
    max-width: 1600px
  }
}
.footer-wrapper {
  background-color: var(--surface-darker);
  color: #fff;
  padding: 3rem 0 0;
}
.footer-contact {
  padding: 0;
}
.footer-wrapper h2, .footer-wrapper h3 {
  font-family: var(--font-kanit)
}
.footer-heading {
  font-size: 3rem;
  margin: 0 0 .5rem;
  line-height: 1;
  color: #fff
}
.footer-contact p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-teal-50);
  max-width: 720px
}
.contact-links {
  margin: 2rem 0
}
.contact-links .nav-item {
  margin-bottom: 1rem
}
.icon-location .icon, .icon-phone .icon {
  font-size: 1.75rem
}
.location-footer {
  color: var(--color-teal-300);
  text-transform: uppercase;
  font-size: 1.1rem;
}
.contact-links a {
  color: #fff;
  text-decoration: underline;
  transition: color .25s ease
}
.contact-links a:hover, .contact-links a:focus-visible {
  color: var(--color-teal-300)
}
.social-wrapper {
  margin-top: 2rem
}
.social-media-heading {
  font-size: 2rem;
  margin: 3rem 0 1rem;
  color: #fff
}
.nav--social .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: .25rem;
  border-radius: 50%;
  background-color: var(--color-navy-850);
  color: #fff;
  padding: .5rem;
  transition: background-color .25s ease
}
.nav--social .nav-link .icon {
  font-size: 2rem
}
.nav--social .nav-link:hover, .nav--social .nav-link:focus-visible {
  background-color: var(--color-teal-400)
}
.footer-links-heading {
  font-size: 2rem;
  margin: 3rem 0 1rem;
  color: #fff
}
.footer-links .nav-link {
  color: #fff;
  text-align: center;
  display: block;
  padding: .75rem 1rem;
  text-transform: uppercase;
  font-weight: 600;
  font-size: .9rem;
  border: 2px solid #fff;
  margin: .5rem;
  background-color: transparent;
  transition: background-color .25s ease, color .25s ease
}
.footer-links .nav-link:hover, .footer-links .nav-link:focus-visible {
  color: var(--surface-darker);
  background-color: var(--color-white);
}
.copyright-wrapper {
  background-color: var(--color-navy-950);
  font-size: .75rem;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
  line-height: 1.2;
}
.nav--copyright {
  margin-top: 1.5rem
}
.nav--copyright .nav-link {
  padding: .5rem .25rem;
  font-weight: 500;
  color: #fff;
  margin: .25rem
}
.nav--copyright .nav-link:hover, .nav--copyright .nav-link:focus-visible {
  color: var(--color-teal-400);
  text-decoration: underline
}
.footer-links .nav-link:focus-visible, .nav--social .nav-link:focus-visible {
  outline: 2px solid var(--color-teal-300);
  outline-offset: 2px
}
.nav--copyright .nav-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px
}
@media(min-width:768px) {
  .nav--social .nav-link {
    padding: .75rem
  }
}
@media(min-width:992px) {
  .footer-heading {
    font-size: 2.5rem
  }
  .footer-links-heading, .social-media-heading {
    font-size: 2rem
  }
  .footer-links-heading {
    margin: 0 0 1.15rem
  }
  .footer-links .nav-link {
    text-align: left;
    padding: .25rem 0;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 1.05rem;
    border: 0;
    margin: .25rem 0;
    transition: none;
    background-image: none;
    display: inline-block;
  }
  .footer-links .nav-link:hover, .footer-links .nav-link:focus-visible {
    color: #fff;
    background-color: transparent;
    text-decoration: underline
  }
}
@media(min-width:1180px) {
  .nav--copyright {
    margin-top: 0
  }
  .contact-links .nav-item {
    margin: 1rem 1.5rem 0 0;
    line-height: 1.2;
    font-size: 1.15rem;
  }
}
.scrollup {
  position: fixed;
  right: 20px;
  bottom: 15px;
  background: var(--color-navy-850);
  cursor: pointer;
  border: 2px solid var(--color-teal-300);
  color: #fff;
  padding: 10px 15px;
  font-size: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, background .25s ease;
  z-index: 999;
}
.scrollup .icon {
  width: .9em;
  height: .9em;
  fill: currentColor;
  vertical-align: middle;
  transition: fill .2s ease-in-out;
}
.scrollup.visible {
  opacity: 1;
  pointer-events: auto
}
.scrollup:hover {
  background: var(--color-teal-400)
}
/* =============================================================
   HERO
   Replaces: .hero--utility, .hero--institutional,
             .hero--promotional, .hero--campaign, .hero--large
   Two states: hero--section (title only) and hero--campaign
   (title + optional subtitle, blurb, buttons)
============================================================= */
/* ── Base ── */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end; /* section: title sits at bottom */
  color: #fff;
  margin-bottom: 0;
}
/* ── Background image layer ── */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}
/* ── Inner content wrapper ── */
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}
/* ── Title ── */
.hero-title {
  font-family: var(--font-kanit);
  font-size: clamp(3.75rem, 9vw, 8rem);
  color: #fff;
  font-weight: 500;
  line-height: 0.7;
  letter-spacing: -2px;
  text-align: center;
  text-transform: uppercase;
  word-break: break-word;
  padding: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* =============================================================
   SECTION HERO
   Full bleed image, title at bottom, no extras.
============================================================= */
.hero--section {
  height: clamp(200px, 30vw + 100px, 625px);
}

/* =============================================================
   CAMPAIGN HERO
   Full bleed image, content block centered vertically
   and horizontally. Title + optional subtitle/blurb/buttons.
============================================================= */
.hero--campaign {
  min-height: clamp(360px, 45vw, 650px);
  align-items: center;
  padding-bottom: 3rem;
}
.hero--promotional {
	min-height: clamp(360px, 45vw, 500px);
}
.hero--campaign .hero-inner {
	margin-top: clamp(4rem, 8vw, 6rem);
	display: flex;
	flex-direction: column;
}
.hero--campaign .hero-title {
	font-size: clamp(2.5rem, 5.75vw, 6rem);
	letter-spacing: 1px;
	line-height: .9;
	margin: 0;
	text-shadow: 2px 2px 3px #000000;
}

/* ── Subtitle (e.g. event dates) ── */
.hero-subtitle {
  margin-top: .5rem;
  font-size: clamp(1.25rem, 2.8vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .5px;
  text-shadow:  2px 2px 3px #000000;
}
/* ── Blurb ── */
.hero-text {
	font-size: clamp(1.5rem, 2vw, 1.375rem);
	font-weight: 500;
	text-shadow: 2px 2px 3px #000000;
	max-width: 1100px;
	text-align: center;
	margin: 1rem auto 0;
}
.hero-dates {
	font-size: clamp(2.5rem, 2vw, 3rem);
	font-weight: 500;
	text-shadow: 2px 2px 3px #000000;
	max-width: 1100px;
	text-align: center;
	margin: 1rem auto 0;
	font-family: var(--font-kanit);
}
/* ── CTA buttons ── */
.hero-actions {
  margin-top: clamp(2rem, 8vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 576px) {
  .hero-actions {
    flex-direction: row;
  }
}

/* ── Promotional title variant ───────────────────────────────
   Applied when 'variant' => 'promotional' is passed.
   Swaps the hero title to Amaranth.
   Selector specificity intentionally kept low — let the
   cascade do its job.
─────────────────────────────────────────────────────────── */
.hero-title--promotional {
  font-family: var(--font-amaranth);
  font-weight: 400; /* Amaranth only ships regular + italic — no 500/600 */
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-btn {
    transition: none !important;
  }
}
.vwu-token {
  background: linear-gradient(transparent 60%, rgba(255, 235, 59, .5) 0);
}
.vwu-token.is-preview {
  background: none;
}
/* ===== VWU / Batten internal banner buttons ===== */
#vwu-preview-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.vwu-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: .25rem .6rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vwu-btn:disabled {
  color: #fff;
  pointer-events: none;
  background-color: #ccc;
  border-color: #ccc;
  opacity: .65;
}
.vwu-btn--success {
  background: #2e7d32;
  color: #fff;
}
.vwu-btn--success:hover {
  background: #256628;
}
/* Primary action (Preview / Undo) */
.vwu-btn--primary {
  background: #ffffff;
  color: #000000;
}
.vwu-btn--primary:hover {
  background: #e5e5e5;
}
/* Secondary admin actions */
.vwu-btn--secondary {
  background: #1e1e1e;
  color: #ffffff;
  border-color: #555;
}
.vwu-btn--secondary:hover {
  background: #2a2a2a;
}
/* Destructive */
.vwu-btn--danger {
  background: #5c1a1a;
  color: #ffffff;
  border-color: #8a2a2a;
}
.vwu-btn--danger:hover {
  background: #7a2222;
}
/* Boss mode hidden */
.boss-hidden {
  display: none !important;
}
.vwu-banner-status {
  margin-right: .75rem;
}
/* ============================================================
   JUMP NAV
   Reusable in-page anchor navigation for section pages.
   Sits between hero and breadcrumbs on pages that define
   a $page_jumpnav array.
   Append to: global.css
   ============================================================ */
.jumpnav {
  background-color: var(--color-navy-850);
  /*border-bottom: 2px solid var(--color-teal-500);*/
}
.jumpnav--inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 calc(var(--gutter-x, 1.5rem) * .5);
  overflow-x: auto;
  /* hide scrollbar visually but keep it functional */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.jumpnav--inner::-webkit-scrollbar {
  display: none;
}
.jumpnav--list {
  display: flex;
  flex-wrap: nowrap; /* horizontal scroll on mobile */
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jumpnav--item {
  flex-shrink: 0; /* prevent items from squishing */
}
.jumpnav--link {
  display: block;
  padding: .8rem 1.25rem;
  font-family: var(--font-kanit);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-navy-text-light);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition:
    color .2s ease, border-color .2s ease, background-color .2s ease;
}
.jumpnav--link:hover, .jumpnav--link:focus-visible {
  color: #fff;
  border-bottom-color: var(--color-teal-500);
  background-color: var(--color-teal-700);
}
.jumpnav--link:focus-visible {
  outline: 2px solid var(--color-teal-500);
  outline-offset: -2px;
}
/* Active state — set via JS if you ever want scroll-spy,
   but works fine as a pure CSS hover nav without it */
.jumpnav--link.is-active {
  color: #fff;
  border-bottom-color: var(--color-teal-500);
}
@media (min-width: 768px) {
  .jumpnav--link {
    padding: 1.75rem 3rem 1rem;
    font-size: 1.15rem;
  }
}
@media (min-width: 992px) {
  .jumpnav--list {
    flex-wrap: wrap; /* allow wrap on desktop if many items */
    justify-content: center;
  }
  .jumpnav--item {
    flex-shrink: 1;
  }
}
@media print {
  .jumpnav {
    display: none;
  }
}