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

  BRAND COLORS:
  
  Navy: #003c69
  Gray: #8996a0
  Teal: #0091b9 (accent)

   WORKFLOW:
   Exploring a new color? Hard-code it in the component.
   Used it more than once? Promote it:
     1. Add to the Palette layer below (if not already there)
     2. Replace the hard-coded values with the token
     4. Never look back.
============================================================ */ 
:root {
 /* ── Navy ───────────────────────────────────────────────────
     Primary brand color family.
     700 is official brand blue. 800 is preferred high-contrast.
     850–950 handle layered dark backgrounds
     (header → footer → copyright strip).
  ── */
  --color-navy-10:          #EBF7FF;
  --color-navy-25:          #EEF4F9;
  --color-navy-50:          #F4F8FB;
  --color-navy-100:         #EAF3FA;
  --color-navy-200:         #C8DDED;
  --color-navy-300:         #9DC0DA;
  --color-navy-400:         #5A90B3;
  --color-navy-500:         #1a5c8a;
  --color-navy-600:         #0d4a73;
  --color-navy-700:         #003c69;
  --color-navy-750:         #00345C;
  --color-navy-800:         #002a4c;
  --color-navy-850:         #00223d;
  --color-navy-900:         #0b2336;
  --color-navy-925:         #001f38;
  --color-navy-950:         #001d35;
  --color-navy-text-light:  #DBF0FF;  /* light text on dark navy backgrounds */
  
  --color-navyAlt-5:           #E6ECF0;
  --color-navyAlt-10:          #CCD8E1;
  --color-navyAlt-25:          #B3C5D2;
  --color-navyAlt-50:          #99B1C3;
  --color-navyAlt-75:          #809EB4;
  --color-navyAlt-100:         #668AA5;
  --color-navyAlt-200:         #4D7796;
  --color-navyAlt-300:         #336387;
  --color-navyAlt-400:         #1A5078;
  --color-navyAlt-500:         #003C69;
  --color-navyAlt-600:         #00365F;
  --color-navyAlt-700:         #003054;
  --color-navyAlt-800:         #002A4A;
  --color-navyAlt-900:         #00243F;
  --color-navyAlt-925:         #001E35;
  --color-navyAlt-950:         #00182A;
  --color-navyAlt-975:         #001220;
  --color-navyAlt-980:         #000C15;
  --color-navyAlt-1000:        #00060B;


  /* ── Slate ──────────────────────────────────────────────────
     Blue-gray family. Muted, desaturated cousin of navy.
     Good for section backgrounds, borders, UI elements
     where navy is too saturated.
  ── */
  --color-slate-25:         #EFF4F7;
  --color-slate-50:         #F5F8FA;
  --color-slate-100:        #F3F7FA;
  --color-slate-200:        #E7EEF4;
  --color-slate-300:        #DEE8ED;
  --color-slate-400:        #BACDD9;
  --color-slate-500:        #91AEC1;
  --color-slate-600:        #6A8FA6;
  --color-slate-700:        #4E7089;
  --color-slate-800:        #345669;
  --color-slate-900:        #1E3A4A;

  /* ── Teal ───────────────────────────────────────────────────
     Brand accent / action color family.
     500 is official brand teal.
     400 is slightly lighter — good for focus rings.
     300 is light enough for stat labels on dark backgrounds.
     10–25 are tinted washes for section backgrounds.
  ── */
  --color-teal-0:          #F0F8FB;
  --color-teal-25:          #E5F3F9;
  --color-teal-50:          #F0F9FF;
  --color-teal-75:          #D6ECF5;
  --color-teal-100:         #D4F4FF;
  --color-teal-200:         #A8E6F7;
  --color-teal-300:         #51cbee;
  --color-teal-400:         #00a9d6;
  --color-teal-450:         #199cbf;
  --color-teal-500:         #0091b9;
  --color-teal-600:         #0080a3;  /* button teal — passes WCAG AA on white where 500 fails */
  --color-teal-700:         #006494;
  --color-teal-800:         #004d6e;
  
  --color-tealAlt-0:           #E6F4F8;
  --color-tealAlt-10:          #CCE9F1;
  --color-tealAlt-25:          #B3DEEA;
  --color-tealAlt-50:          #99D3E3;
  --color-tealAlt-75:          #80C8DC;
  --color-tealAlt-100:         #66BDD5;
  --color-tealAlt-200:         #4DB2CE;
  --color-tealAlt-300:         #33A7C7;
  --color-tealAlt-400:         #1A9CC0;
  --color-tealAlt-500:         #0091b9;
  --color-tealAlt-600:         #0083A7;
  --color-tealAlt-700:         #007494;
  --color-tealAlt-800:         #006682;
  --color-tealAlt-800:         #004d6e;
  --color-tealAlt-900:         #00576F;
  --color-tealAlt-925:         #00495D;
  --color-tealAlt-950:         #004d6e;
  --color-tealAlt-975:         #003A4A;
  --color-tealAlt-1000:         #002C38;

  /* ── Gray ───────────────────────────────────────────────────
     Neutral gray family. Slightly cool-toned.
     --color-gray is an alias for 500 — retire on contact.
  ── */
  --color-gray-25:          #F4F4F4;
  --color-gray-26:          #EDEDED;
  --color-gray-50:          #F9F9F9;
  --color-gray-100:         #f1f1f1;
  --color-gray-200:         #e7e7e7;
  --color-gray-300:         #cccccc;
  --color-gray-400:         #adb8bf;
  --color-gray-500:         #8996a0;
  --color-gray-600:         #687882;
  --color-gray-700:         #536069;
  --color-gray-800:         #39454d;
  --color-gray-900:         #232d33;
  --color-gray:             #8996a0;
  
  --color-grayAlt-5:           #F3F5F6;
  --color-grayAlt-10:           #E7EAEC;
  --color-grayAlt-25:          #DCE0E3;
  --color-grayAlt-50:          #D0D5D9;
  --color-grayAlt-75:          #C4CBD0;
  --color-grayAlt-100:         #B8C0C6;
  --color-grayAlt-200:         #ACB6BD;
  --color-grayAlt-300:         #A1ABB3;
  --color-grayAlt-400:         #95A1AA;
  --color-grayAlt-500:         #8996a0;
  --color-grayAlt-600:         #7B8790;
  --color-grayAlt-700:         #6E7880;
  --color-grayAlt-800:         #606970;
  --color-grayAlt-900:         #525A60;
   --color-grayAlt-925:         #454B50;
   --color-grayAlt-950:         #373C40;
   --color-grayAlt-975:         #292D30;
   --color-grayAlt-990:         #1B1E20;
  --color-grayAlt-1000:         #0E0F10;
  
  /* ── Orange ─────────────────────────────────────────────────
   Brand orange family.
   400 is the hero CTA orange (#F26419 — vivid, punchy).
   600 is the original arts orange (#CC5803 — aliased).
   Hover and border values fold into 600–700 range.
  ── */
  --color-orange-100:         #FEF0E6;  /* pale peach — barely orange        */
  --color-orange-200:         #FDD4B0;  /* light warm orange                 */
  --color-orange-300:         #FAB27A;  /* soft orange, usable on dark bg    */
  --color-orange-400:         #F26419;  /* hero CTA orange ← primary use     */
  --color-orange-500:         #D95A10;  /* one step darker — active states   */
  --color-orange-600:         #CC5803;  /* ← --color-arts-orange             */
  --color-orange-700:         #B34D02;  /* ← --color-orange-hover            */
  --color-orange-800:         #8A3A01;  /* deep burnt orange                 */
  --color-orange-900:         #5C2501;  /* darkest — almost mahogany         */
  --color-orange-cta:         #BF5103;  /* for orange ctas with white text   */
  --color-orange-cta-hover:   #B54D03;

  /* Aliases — retire on contact */
  --color-arts-orange:        var(--color-orange-600);
  --color-orange:             var(--color-orange-600);
  --color-orange-border:      var(--color-orange-600);
  --color-orange-hover:       var(--color-orange-700);
  --color-orange-hover-border: var(--color-orange-700);


  /* ── Blue tint ──────────────────────────────────────────────
     One-off cool whites that don't fit neatly into a scale.
     Used for section backgrounds and subtle tinted borders.
  ── */
  --color-blue-5:           #F5FBFF;

  /* ── Utility ────────────────────────────────────────────────  */
  --color-white:            #ffffff;
  --color-black:            #000000;
  --color-gold:             #f7b801;
  --color-arts-orange:      #CC5803;

  /* ── Borders ────────────────────────────────────────────────
     Blue-gray border values used across content, forms, tables.
     Promoted here because they're referenced in multiple files.
  ── */
  --color-content-border:   #e5edf3;
  --color-inner-border:     #dce8f0;
  --color-form-border:      #c5d4e0;
  --color-bg-subtle:        #f1f5f9;
   --color-border-tint:  #EBF7FF   /*subtle blue-tinted borders*/
     --text-muted-mid:     #555555   
     --text-muted-dark:    #666666   

  /* ----------------------------------------------------------
     LAYER 2 · TOKENS
     Named by purpose. Promoted on contact.
     If a color is used in more than one place, it lives here.
     If it's only used once, leave it as a palette value.
  ---------------------------------------------------------- */

  /* ── Text ───────────────────────────────────────────────────  */
  --text-body:              #333333;
  --text-content:           #444444;           /* long-form prose — slightly softer than body */
  --text-heading:           var(--color-navy-700);
  --text-heading-dark:      var(--color-navy-800);
  --text-on-dark:           var(--color-white);
  --text-muted:             var(--color-gray);  /* #8996a0 */
  --text-muted-mid:         #555555;
  --text-muted-dark:        #666666; /* event timestamps, secondary info */
  --text-subtle:            #64727d;
  --text-subdued:           #687482;
  --text-meta:              #4b5463;
  --text-teal:              var(--color-teal-700);
  --text-nav-light:         var(--color-navy-text-light);
  --text-nav-accent:        var(--color-teal-400);
  --text-footer-para:       var(--color-teal-50);
  --text-footer-location:   var(--color-teal-300);
  --text-alert-dark:        var(--color-navy-800);
  /* ── Fonts ──────────────────────────────────────────────────  */
  --font-opensans: "Open Sans", sans-serif;
  --font-kanit: "Kanit", sans-serif;
  --font-anton: "Anton", Impact, sans-serif;
  --font-merriweather: "Merriweather", serif;
  --font-amaranth: "Amaranth", sans-serif;
  /* ── Focus / Accessibility ──────────────────────────────────  */
  --focus-ring: var(--color-teal-400);
  --focus-selection-bg: var(--color-teal-400);
  /* ── Shadows ────────────────────────────────────────────────  */
  --text-shadow-hero: rgb(0, 0, 0) 1.6px 1.6px 3.2px;
}
@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: 'Kanit';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/css/fonts/kanit-v17-latin-700.woff2') format('woff2'); 
}


@font-face {
  font-display: swap; 
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/css/fonts/kanit-v17-latin-800.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;
  scroll-padding-top: 150px;
}
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);
}
@media (min-width: 768px) {
  img.float-right {
    float: right;
    margin: 0 0 .5rem .5rem;
  }
  img.float-left {
    float: left;
    margin: 0 .5rem .5rem 0;
  }
}
.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.15rem);
  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, .container-sm {
    max-width: 540px
  }
}
@media (min-width:768px) {
  .container, .container-md, .container-sm {
    max-width: 720px
  }
}
@media (min-width:992px) {
  .container, .container-lg, .container-md, .container-sm {
    max-width: 960px
  }
}
@media (min-width:1180px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1140px
  }
}
@media (min-width:1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1320px
  }
}
: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-auto {
  flex: 0 0 auto;
  width: auto;
}
.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}
.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.col-3 {
  flex: 0 0 auto;
  width: 25%;
}
.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}
.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}
.col-6 {
  flex: 0 0 auto;
  width: 50%;
}
.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}
.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}
.col-9 {
  flex: 0 0 auto;
  width: 75%;
}
.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}
.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}
.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-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;
}
@media (min-width: 576px) {
  .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;
  }
}
@media (min-width: 768px) {
  .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;
  }
}
@media (min-width: 992px) {
  .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;
  }
}
@media (min-width: 1200px) {
  .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;
  }
}
@media (min-width: 1400px) {
  .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
}
/* BEGIN JPBHC GLOBAL STYLES */
/* Skip to main content link for keyboard/screen reader users */
a.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--color-teal-500);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 4px 4px;
  text-decoration: none;
  transition: top 0.1s;
}
a.skip-link:focus, a.skip-link:focus-visible {
  top: 0;
}
/* ── 3. Header: utility bar ─────────────────────────────────── */
.header--utility {
	background-color: var(--color-navy-800);
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--color-black);
}
.header--utility-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: .5rem 0;
}
.header--parent-link {
  text-decoration: none;
  color: var(--color-navy-200);
  font-family: var(--font-kanit);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--transition);
}
.header--parent-link:hover, .header--parent-link:focus-visible {
  color: #ffffff;
}
.header--quick-links {
  display: none;
}
.header--quick-links a {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition);
}
.header--quick-links a:hover, .header--quick-links a:focus-visible {
  color: var(--color-teal-300);
  text-decoration: none;
}
/* ── 4. Header: main bar + logo ─────────────────────────────── */
.header--main {
	/* background: #003057; */
	background: var(--color-navy-800);
	border-bottom: 1px solid var(--color-navy-600);
	padding: .75rem 0;
	border-top: 1px solid var(--color-navy-600);
	box-shadow: 0 3px 3px rgba(0, 0, 0, .15);
	position: relative;
	z-index: 999;
}
.header--logo-link {
  display: block;
  text-decoration: none;
}
.header--logo {
  display: block;
  height: auto;
  width: clamp(225px, 33vw, 275px);
}
/* =============================================================
   BODY SCROLL LOCK  (mobile nav open)
   Released at desktop breakpoint — nav doesn't take
   over the full viewport at ≥1180px.
============================================================= */
body.nav-open {
  overflow: hidden;
}
@media (min-width: 1180px) {
  body.nav-open {
    overflow: auto;
  }
}
/* =============================================================
   SITE HEADER
   .site-header (sticky)
     .header-top
       .container
         .header-inner   ← logo + hamburger flex row
         .enrollment-nav ← desktop only CTA buttons
============================================================= */
.site-header {
  background: var(--color-white, #ffffff);
  border-bottom: 1px solid #d6dfe8;
  position: sticky;
  top: 0;
  z-index: 500; /* above .main-nav fixed panel (z-index: 399) */
}
.header-top {
  width: 100%;
  padding: 0.675rem 1rem;
}
.header-top .container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
}
/* ── Logo + hamburger row ─────────────────────────────────── */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0;
}
.header-logo {
  flex-shrink: 0;
  padding: 0;
}
.header-logo a {
  display: block;
  text-decoration: none;
}
.header-logo--img {
  display: block;
  width: clamp(220px, 35vw, 300px);
  height: auto;
}
/* ── Hamburger button ─────────────────────────────────────── */
.nav-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-navy-800, #002a4c);
  border: none;
  border-radius: 6px;
  color: var(--color-white, #ffffff);
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-family: var(--font-opensans, "Open Sans", sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.nav-toggle[aria-expanded="true"] {
  background: var(--color-navy-900, #001a30);
}
.nav-toggle--label {
  display: block;
  line-height: 1;
}
.nav-toggle--icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-toggle .icon-menu, .nav-toggle .icon-close {
  flex-shrink: 0;
}
/* Icon swap — CSS only, driven by aria-expanded */
.nav-toggle .icon-close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}
.nav-toggle:hover {
  background: var(--color-navy-900, #001a30);
}
.nav-toggle:focus-visible {
  outline: 2px solid #00a9d6;
  outline-offset: 2px;
}
/* ── Enrollment nav ───────────────────────────────────────────
   Hidden on mobile — CTAs live in .mobile-enrollment inside
   the slide-in panel. Visible as a flex row on desktop only.
─────────────────────────────────────────────────────────────── */
.enrollment-nav {
  display: none;
}
/* ── Mobile enrollment CTAs ──────────────────────────────── */
.mobile-enrollment {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem 1.25rem 2rem;
  background: var(--color-navy-850);
}
.mobile-enrollment .enroll-btn {
  justify-content: center;
  text-align: center;
  padding: 0.85rem 1.25rem;
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--color-white, #ffffff);
  border-radius: 4px;
  background: transparent;
}
.mobile-enrollment .enroll-btn:hover, .mobile-enrollment .enroll-btn:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white, #ffffff);
}
.mobile-enrollment .enroll-btn--apply {
  background: var(--color-teal-600, #0091b9);
  border-color: var(--color-teal-600, #0091b9);
}
.mobile-enrollment .enroll-btn--apply:hover, .mobile-enrollment .enroll-btn--apply:focus-visible {
  background: var(--color-teal-450, #199cbf);
  border-color: var(--color-teal-450, #199cbf);
}
/* ── Enroll button base ───────────────────────────────────── */
.enroll-btn {
  display: inline-block;
  font-family: var(--font-opensans, "Open Sans", sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  background-color: transparent;
  color: var(--color-navy-700, #003c69);
  border: 2px solid var(--color-navy-700, #003c69);
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.enroll-btn:hover, .enroll-btn:focus-visible {
  background-color: var(--color-navy-700, #003c69);
  color: var(--color-white, #ffffff);
  border-color: var(--color-navy-700, #003c69);
  text-decoration: none;
}
.enroll-btn--apply {
  background-color: var(--color-teal-600, #0080a3);
  color: var(--color-white, #ffffff);
  border-color: var(--color-teal-600, #0080a3);
}
.enroll-btn--apply:hover, .enroll-btn--apply:focus-visible {
  background-color: var(--color-teal-700, #006494);
  border-color: var(--color-teal-700, #006494);
  color: var(--color-white, #ffffff);
  text-decoration: none;
}
/* =============================================================
   MAIN NAV — SHELL
   Base styles shared by both mobile and desktop.
   Mobile overrides below reset to fixed panel.
   Desktop overrides below reset to sticky bar.
============================================================= */
.main-nav {
  background-color: var(--color-navy-800, #002a4c);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  position: sticky;
  top: 0;
  z-index: 400;
}
.main-nav .container {
  padding: 20px;
}
/* ── Nav list ─────────────────────────────────────────────── */
.main-nav--list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* ── Nav items ────────────────────────────────────────────── */
.main-nav--item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* ── Nav links (shared: <a> and <button> triggers) ────────── */
.main-nav--link {
  display: block;
  width: 100%;
  padding: clamp(1.2rem, 2.5vw, 1.3rem) clamp(1rem, 3vw, 1.5rem);
  font-family: var(--font-opensans, "Open Sans", sans-serif);
  font-size: clamp(1.1rem, 4vw, 1.25rem);
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  line-height: 1.5;
  transition: background 0.15s ease, color 0.15s ease;
}
.main-nav--link:hover, .main-nav--link:focus-visible {
  background-color: var(--color-teal-500, #0091b9);
  color: #ffffff;
  outline: none;
  text-decoration: none;
}
/*.main-nav--link .dropdown-chevron {
  width: clamp(12px, 4vw, 13px);
  height: clamp(12px, 4vw, 13px);
}*/
/* ── Dropdown toggle ──────────────────────────────────────── */
.main-nav--dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-right: clamp(1.25rem, 3vw, 1.75rem);
}
.main-nav--dropdown-toggle[aria-expanded="true"] {
  background-color: var(--color-teal-500, #0091b9);
}
/* Chevron SVG — rotates when open (mobile) */
.dropdown-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.main-nav--item.is-open .dropdown-chevron {
  transform: rotate(180deg);
}
/* =============================================================
   MOBILE NAV PANEL (< 1180px)
   Fixed full-height panel. Slides in from the left.
   Starts below the sticky header via --header-height which JS
   sets on the nav element from site-header.offsetHeight.
   Fallback keeps it usable before JS fires.
============================================================= */
.main-nav {
  position: fixed;
  top: var(--header-height, 68px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 399;
  overflow-y: auto;
  padding-top: 0;
  transform: translateX(-100%);
  transition: transform 0.3s var(--ease-out);
  box-shadow: none;
}
.main-nav.is-open {
  transform: translateX(0);
}
.main-nav .container {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100%;
  padding: 0;
}
/* ── Mobile dropdown panels (inline collapse) ────────────── */
.main-nav--dropdown, .main-nav--mega {
  position: static;
  display: none;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
  background: var(--color-navy-850, #00223d);
  min-width: 0;
  width: 100%;
  padding: 0;
  transition: none;
}
.main-nav--item.is-open > .main-nav--dropdown, .main-nav--item.is-open > .main-nav--mega {
  display: block;
  pointer-events: auto;
}
/* ── Mobile single-column dropdown links ─────────────────── */
.main-nav--dropdown .main-nav--dropdown-link {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: clamp(1rem, 4vw, 1.25rem);
  padding: 1rem 0 1rem 1.5rem;
  text-decoration: none;
  transition: color 0.1s, border-color 0.1s;
  line-height: 1.35;
}
.main-nav--dropdown li:last-child .main-nav--dropdown-link {
  border-bottom: none;
}
.main-nav--dropdown .main-nav--dropdown-link:hover, .main-nav--dropdown .main-nav--dropdown-link:focus-visible {
  background: var(--color-navy-25, #EEF4F9);
  color: var(--color-navy-800, #002a4c);
}
/* =============================================================
   DESKTOP NAV (≥ 1180px)
   Sticky bar. Horizontal item list, centered.
   Dropdowns animate via shared opacity/visibility/transform base.
============================================================= */
@media (min-width: 1180px) {
  .nav-toggle {
    display: none;
  }
  .main-nav .container {
    max-width: 100%;
  }
  .header--quick-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  .site-header {
    border-bottom: 1px solid #e5edf3;
  }
  .header-top .container {
    max-width: 1140px;
  }
  .header--utility-inner {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0.2rem 0 0.3rem;
  }
  .header-inner {
    padding: 0;
    align-items: flex-end;
    justify-content: space-between;
  }
.header-logo {
	padding-bottom: 1rem;
}
  .header-logo--img {
    width: 325px;
  }
  .mobile-enrollment {
    display: none;
  }
  .site-header, .main-nav {
    position: relative;
    top: 0;
    transform: none;
    transition: none;
    overflow: visible;
    padding-top: 0;
    background: none;
  }
  .main-nav .container {
    display: flex;
    align-items: stretch;
  }
.header--main {
	position: relative;
	padding: 1rem 0 0;
}
  /* Horizontal list */
  .main-nav--list {
    display: flex !important;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
  }
  .main-nav--item {
    position: relative;
    display: flex;
    width: 20%;
    align-items: stretch;
    border-bottom: none;
  }
  /* Desktop nav link */
  .main-nav--link {
    display: flex;
    align-items: center;
    padding: .75rem clamp(2.5rem, 4vw, 3.25rem) 1.25rem;
    font-size: clamp(0.95rem, 1vw, 1rem);
    font-weight: 500;
    border: none;
    text-align: center;
    white-space: nowrap;
    line-height: normal;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    justify-content: center;
    gap: .35rem;
    position: relative;
  }
  .main-nav--link:hover, .main-nav--link:focus-visible {
    /*background: var(--color-teal-600, #0080a3);*/
    color: var(--color-teal-200, #A8E6F7);
    background: transparent;
    border-bottom-color: transparent;
  }
  .main-nav--link[aria-expanded="true"] {
    border-radius: 6px 6px 0 0;
  }
  .main-nav--link.is-active {
    border-bottom-color: var(--color-teal-400, #00c2e8);
    background: rgba(0, 122, 140, 0.15);
  }
  .main-nav--item.is-open > .main-nav--dropdown-toggle, .main-nav--dropdown-toggle[aria-expanded="true"] {
    /*background: var(--color-teal-600, #0080a3);*/
    background: transparent;
    color: var(--color-teal-200, #A8E6F7);
    border-bottom-color: transparent;
  }
  /* ── Shared animation base — dropdown + mega ──────────────
     Both panel types start hidden. .is-open reveals them.
     visibility delay on close keeps them in the tab order
     until the fade-out finishes.
  ──────────────────────────────────────────────────────────── */
  .main-nav--dropdown {
    position: absolute;
    left: 0;
    display: block;
    background: var(--color-white, #ffffff);
    border-bottom: 3px solid var(--color-teal-200, #A8E6F7);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 12px 40px rgba(0, 42, 76, 0.18), 0 2px 8px rgba(0, 42, 76, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition:
      opacity var(--hover-close-delay) var(--ease-out), transform var(--hover-close-delay) var(--ease-out), visibility 0s linear var(--hover-close-delay);
  }
  .main-nav--item.is-open > .main-nav--dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity var(--hover-open-delay) var(--ease-out), transform var(--hover-open-delay) var(--ease-out), visibility 0ms;
  }
  /* ── Standard dropdown panel ─────────────────────────────── */
  .main-nav--dropdown {
    top: 100%;
    min-width: 250px;
    width: 100%;
    padding: 0.5rem 0;
    list-style: none;
  }
  .main-nav--dropdown .main-nav--dropdown-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--color-navy-800, #002a4c);
    text-decoration: none;
    font-size: .9rem;
    border-bottom: 1px solid #f0f4f8;
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease, margin 0.1s ease;
    line-height: 1.4;
  }
  .main-nav--dropdown li:last-child .main-nav--dropdown-link {
    border-bottom: none;
  }
  .main-nav--dropdown .main-nav--dropdown-link:hover, .main-nav--dropdown .main-nav--dropdown-link:focus-visible {
    background: var(--color-navy-50, #f0f4f8);
    color: var(--color-navy-800, #002a4c);
    outline: none;
    margin-left: 4px;
  }
  .main-nav--dropdown .main-nav--dropdown-link:focus-visible {
    outline: 2px solid var(--color-teal-600, #0080a3);
    outline-offset: -2px;
  }
}
@media (min-width: 1400px) {
  .header-top .container {
    max-width: 1320px;
  }
  .header-logo--img {
    width: 350px;
  }
}
/* ── 9. Footer: main ─────────────────────────────────────────── */
.footer--main {
  background-color: var(--color-navyAlt-900);
  padding: 2rem 0 2.5rem;
}
.footer--logo-link {
  display: inline-block;
  text-decoration: none;
}
.footer--logo {
  height: 48px;
  width: auto;
}
.footer--address {
	color: #fff;
	font-size: .95rem;
	line-height: 1.6;
}
.footer--tagline {
  color: var(--footer-text);
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 0;
}
.footer--social {
  display: flex;
  gap: 1rem;
}
.footer--social a {
  color: var(--color-navy-300);
  font-size: 1.25rem;
  text-decoration: none;
  transition: color var(--transition);
}
.footer--social a:hover, .footer--social a:focus-visible {
  color: var(--footer-link-hover);
}
.footer--col-heading {
  font-family: var(--font-kanit);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--footer-heading);
  margin-bottom: 1rem;
}
.footer--nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer--nav-list li {
  margin-bottom: 0.5rem;
}
.footer--nav-list a {
  color: var(--footer-text);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color var(--transition);
}
.footer--nav-list a:hover, .footer--nav-list a:focus-visible {
  color: var(--footer-link-hover);
  text-decoration: none;
}
/* ── 10. Footer: bottom bar ──────────────────────────────────── */
.footer--bottom {
  background-color: var(--color-navyAlt-925);
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer--copyright {
  color: var(--color-gray-500);
  font-size: 0.8rem;
  margin: 0;
}
.footer--legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
}
.footer--legal-links a {
  color: var(--color-gray-500);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color var(--transition);
}
.footer--legal-links a:hover, .footer--legal-links a:focus-visible {
  color: var(--footer-link-hover);
}
@media (max-width: 767.98px) {
  .footer--legal-links {
    justify-content: flex-start;
    margin-top: 0.5rem;
  }
}
.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)
}