/* ---------- tokens ---------- */
 :root {
     --primary: #ba0c2f;
     --primary-text: #9a0e2a;
     --primary-text-hover: #8a0a24;
     --primary-active: #7a0c20;
     --gold: #eaab00;
     --golden: #fbd872;
     --water: #002853;
     --teal: #63cdd4;
     --white: #fff;
     --steel:#5d666f;
     --gray-lightest: #f5f5f5;
     --silver:#d9d8d6;
     --gray-light: #d9d8d6;
     --border-light: #ccc;
     --text-heading: #243142;
    /* 12.1:1 */
     --text-body: #1f2429;
    /* 14.6:1 */
     --text-muted: #445260;
    /* 8.0:1 white, 7.4:1 on --gray-lightest */
     --link: #0b4689;
    /* 9.3:1 */
     --link-hover: #093a70;
    /* 11.4:1 */
     --on-gold: #22262b;
    /* 7.5:1 on gold */
     --radius: 4px;
     --wrap: 1600px;
     --wrap-sm: 1280px;
     --ease-drawer: cubic-bezier(.23, 1, .32, 1);
     --font-display: Oswald, "Roboto Condensed", sans-serif;
     --font-body: Roboto, system-ui, sans-serif;
     --font-serif: "Lora", Georgia, serif;
     --font-script:"mojito",serif;
}
/* ---------- base ---------- */
 *, *::before, *::after {
     box-sizing: border-box;
}
 html {
     color-scheme: light;
}
 body {
     margin: 0;
     background: var(--white);
     color: var(--text-body);
     font-family: var(--font-body);
     font-size: 16px;
     line-height: 1.6;
     -webkit-text-size-adjust: 100%;
}
 img {
     display: block;
     max-width: 100%;
}
 fieldset {
     border: 0;
     margin: 0;
     padding: 0;
     min-width: 0;
}
 legend {
     padding: 0;
}
 a {
     color: var(--link);
}
 a:hover {
     color: var(--link-hover);
}
 :focus-visible {
     outline: 3px solid var(--link);
     outline-offset: 2px;
}
 .text-white{
    color:#fff
}
 .text-white:hover{
    text-decoration:none;
     color:#fff
}
 .text-red{
    color:var(--primary)
}
 .text-gold{
    color:#eab000
}
 .u-visually-hidden {
     position: absolute;
     width: 1px;
     height: 1px;
     margin: -1px;
     padding: 0;
     overflow: hidden;
     clip-path: inset(50%);
     white-space: nowrap;
}
 .u-skip-link {
     position: absolute;
     left: 12px;
     top: -60px;
     z-index: 30;
     padding: 12px 18px;
     background: var(--white);
     color: var(--link);
     font-family: var(--font-display);
     letter-spacing: .08em;
     text-transform: uppercase;
     transition: top .15s ease-in-out;
}
 .u-skip-link:focus {
     top: 12px;
}
 .msi {
     font-family: 'Material Symbols Outlined';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;
     display: inline-block;
     white-space: nowrap;
     word-wrap: normal;
     direction: ltr;
     font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
 h1{
     font-size: clamp(48px, 6vw, 72px);
}
 h2{
     font-size:clamp(1.875rem,2.3vw + 0.8rem,3.25rem) 
}
 h3,.h3,p.h3 {
     font-size: clamp(32px, 4vw, 40px);
     font-family: var(--font-display);
     margin:0px 0px 5px 0px;
}
 h4,.h4{
     font-family: var(--font-display);
}
 p.h4{
     font-size: clamp(26px, 3vw, 27px);
     font-weight: 500;
}
 @media (max-width: 640px) {
     h1{
         font-size: 48px;
    }
     h3,.h3,p.h3 {
         font-size: 32px;
    }
     h4,.h4,p.h4 {
         font-size: 26px;
    }
     .hero-example {
         margin-top: 48px;
    }
}
 .serif{
     font-family:var(--font-serif);
}
 .script{
    font-family: 'mojito', sans-serif;
}
/* ========================================================================== block: page ========================================================================== */
 .page {
     position: relative;
    /* overflow-x: hidden;
     */
}
 .page__wrap {
     width: 100%;
     max-width: var(--wrap);
     margin-inline: auto;
     padding-inline: clamp(20px, 4vw, 56px);
}
 .page__wrap-sm{
     width: 100%;
     max-width: var(--wrap-sm);
     margin-inline: auto;
     padding-inline: clamp(20px, 4vw, 56px);
}
/* ========================================================================== block: site-header ========================================================================== */
 .header-eyebrow{
     background:var(--primary);
     width:100%;
}
 .header-eyebrow .page__wrap{
     padding: 1px clamp(10px, 3vw, 40px);
}
 .header-eyebrow__link {
     font-family: var(--font-display);
     font-size: 13px;
     letter-spacing: .1em;
     text-transform: uppercase;
     color:#fff;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     border-bottom: .1rem solid transparent;
     transition: all .18s cubic-bezier(.25,0,.5,1),outline 0s,outline-offset 0s 
}
 .header-eyebrow__link:hover{
     color: #fff;
     border-color: #fff 
}
 .site-header {
     position: fixed;
     width:100%;
     top: 0;
     z-index: 10;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     padding: 15px 0px 15px 0px;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 70%, transparent 100%);
     transition: background 0.4s ease;
}
 .site-header__logo {
     height: 40px;
     width: auto;
}
 .site-header__nav {
     display: flex;
     align-items: center;
     gap: clamp(14px, 2vw, 26px);
}
 .site-header__link {
     font-family: var(--font-display);
     font-weight:500;
     font-size: 16px;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: #fff;
     text-decoration: none;
     min-height: 44px;
     display: inline-flex;
     align-items: center;
}
 .site-header__link:hover {
     color:#fff;
     text-decoration: none;
     cursor:pointer
}
 .site-header__toggle {
     display: none;
}
 .site-header__nav .btn{
     font-size: 14px;
     padding: 0px 12px;
     min-height: 40px;
     font-family: var(--font-display);
     font-weight: 500;
     font-size: 16px;
     letter-spacing: .1em;
     text-transform: uppercase;
}
 .site-header__nav .btn.btn--arrow::after{
     font-size:14px;
}
 @media (max-width: 767px) {
     .site-header{
         padding:5px 0px 5px 0px;
    }
     .site-header__nav > .site-header__link {
         display: none;
    }
     .site-header__toggle {
         display: flex;
         flex-direction: column;
         justify-content: center;
         gap: 5px;
         width: 44px;
         height: 44px;
         padding: 0 9px;
         background: none;
         border: 0;
         cursor: pointer;
    }
     .site-header__toggle span {
         display: block;
         height: 2px;
         background:#fff;
    }
}
 .nav-brand {
     display: flex;
     align-items: center;
     gap: 16px;
}
 .nav-logo-site {
     height: 35px;
     width: 150px;
}
 @media (max-width: 767px) {
     .nav-logo-site {
         width:117px;
        ;
         height:auto;
    }
}
 #nav.scrolled {
     background: #ba0c2f;
}
 #nav.scrolled .btn-cta-nav{
     background:var(--gold);
     color:#000;
}
 #nav.scrolled .btn-cta-nav:hover;
{
    background: var(--golden);
}
/* ========================================================================== block: drawer (right off-canvas menu) ========================================================================== */
 .drawer {
     position: fixed;
     inset: 0;
     z-index: 20;
     visibility: hidden;
}
 .drawer.is-open {
     visibility: visible;
}
 .drawer__scrim {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, .55);
     opacity: 0;
     transition: opacity .3s cubic-bezier(.4, 0, .6, 1);
}
 .drawer.is-open .drawer__scrim {
     opacity: 1;
}
 .drawer__panel {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     z-index:1;
     width: min(86%, 420px);
     background: var(--primary);
     box-shadow: 0 0 20px rgba(0, 0, 0, .4);
     transform: translateX(100%);
     transition: transform .32s var(--ease-drawer);
     display: flex;
     flex-direction: column;
     overflow-y: auto;
}
 .drawer.is-open .drawer__panel {
     transform: translateX(0);
}
 .drawer__head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 16px 18px;
     border-bottom: 1px solid rgba(255, 255, 255, .3);
}
 .drawer__logos {
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 0;
}
 .drawer__logo {
     height: 20px;
     width: auto;
}
 .drawer__logo--lockup {
     height: auto;
     width: 170px
}
 .drawer__rule {
     width: 1px;
     height: 22px;
     background: rgba(255, 255, 255, .4);
}
 .drawer__close {
     display: flex;
     align-items: center;
     gap: 8px;
     min-height: 44px;
     padding: 0 4px;
     background: none;
     border: 0;
     cursor: pointer;
     font-family: var(--font-display);
     font-size: 12px;
     letter-spacing: .1em;
     text-transform: uppercase;
     color: var(--white);
     white-space: nowrap;
}
 .drawer__close:hover {
     text-decoration: underline;
}
 .drawer__close-x {
     font-size: 20px;
     line-height: 1;
}
 .drawer__cta {
     padding: 14px 18px;
     border-bottom: 1px solid rgba(255, 255, 255, .3);
}
 .drawer__nav {
     display: flex;
     flex-direction: column;
}
 .drawer__link {
     display: flex;
     align-items: center;
     min-height: 56px;
     padding: 0 18px;
     border-bottom: 1px solid rgba(255, 255, 255, .22);
     font-family: var(--font-display);
     font-weight: 500;
     font-size: 20px;
     letter-spacing: .06em;
     text-transform: uppercase;
     color: var(--white);
     text-decoration: none;
     transition: background .15s ease-in-out, color .15s ease-in-out;
}
 .drawer__link:hover, .drawer__link:focus-visible {
     background: var(--white);
     color: var(--primary-text);
}
/* ========================================================================== block: wordmark ("Find your" italic serif over "MORE") ========================================================================== */
 .wordmark {
     margin: 0;
     display: flex;
     flex-direction: column;
     line-height:0.9;
     color: var(--text-heading);
}
 .wordmark__script {
     font-family: var(--font-script);
     font-style: italic;
     font-weight: 400;
     font-size: clamp(64px, 5.4vw, 110px);
     letter-spacing: -.01em;
}
 .wordmark__shout {
     font-family: var(--font-display);
     font-weight: 600;
    /*font-size: clamp(56px, 10vw, 138px);
    */
     font-size:clamp(100px, 13vw, 195px);
     text-transform: uppercase;
}
 .wordmark--light {
     color: var(--white);
}
 .wordmark--sm {
     flex-direction: row;
     align-items: baseline;
     gap: 8px;
}
 .wordmark--sm .wordmark__script {
     font-size: clamp(30px, 10vw, 90px);
     margin-right:10px
}
 .wordmark--sm .wordmark__shout {
     font-size: clamp(40px, 10vw, 80px);
     color: var(--primary-text);
}
 .wordmark--sm.wordmark--light .wordmark__shout, .wordmark--sm.wordmark--light .wordmark__script {
     color: var(--white);
}
/* ========================================================================== block: hero ========================================================================== */
 .hero {
     position: relative;
     height:90vh;
     display: flex;
     background: #10141a;
     overflow:hidden;
}
 .hero__media {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .hero__scrim {
     position: absolute;
     inset: 0;
    /* dark wash for legibility of white text over photography */
     background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
}
 .hero__inner {
     position: relative;
     width: 100%;
     max-width: var(--wrap);
     margin-inline: auto;
     padding: clamp(28px, 4vw, 64px) clamp(20px, 4vw, 56px);
     display: grid;
     grid-template-columns: 1fr min(400px, 38%);
     gap: clamp(28px, 4vw, 56px);
     align-items:center;
}
 .hero__copy {
     display: flex;
     flex-direction: column;
     gap: 1.5rem
}
 @media (max-width: 899px) {
     .hero__copy {
         margin-top:50px;
    }
}
 .hero__lede {
     margin: 0;
     font-family: var(--font-serif);
     font-size: clamp(17px, 1.8vw, 20px);
     font-weight:500;
     line-height: 1.4;
     color: #f2f4f6;
     max-width: 44ch;
     text-wrap: pretty;
}
 .hero__cta {
     display: none;
}
 @media (max-width: 899px) {
     .hero {
        height: 520px;
    }
     .hero__inner {
         grid-template-columns: 1fr;
    }
     .hero__form {
         display: none;
    }
     .hero__cta {
         display: flex;
         margin-top: 4px;
    }
}
/* ========================================================================== block: stats ========================================================================== */
 .stats {
     background: var(--primary);
     padding: clamp(24px, 3vw, 40px) 0;
}
 .stats__grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: clamp(20px, 2.4vw, 32px);
     align-items: start;
}
 .stats__item {
     display: flex;
     flex-direction: column;
     gap: 6px;
}
 .stats__figure {
     font-family: var(--font-display);
     font-weight: 600;
     font-size: clamp(30px, 3.4vw, 60px);
     line-height: 1;
     color: #fff;
}
 .stats__label {
     font-size: clamp(13px, 1.1vw, 14px);
     line-height: 1.4;
     color: rgba(255, 255, 255, .92);
}
/* Tablet */
 @media (max-width: 991px) {
     .stats__grid {
         grid-template-columns: repeat(2, 1fr);
    }
}
/* Mobile */
 @media (max-width: 575px) {
     .stats__grid {
         grid-template-columns: 1fr;
    }
}
/* ========================================================================== block: pillar ========================================================================== */
 .pillars {
     display: flex;
     flex-direction: column;
     gap: clamp(36px, 4.4vw, 64px);
     padding: clamp(36px, 5vw, 72px) 0;
}
 .pillar {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: clamp(20px, 3vw, 36px);
     align-items: center;
}
 .pillar__media {
     width: 100%;
    /*height: clamp(240px, 28vw, 380px);
     */
     object-fit: cover;
}
 .pillar__body {
     display: flex;
     flex-direction: column;
     gap: 12px;
}
 .pillar__eyebrow {
     font-family: var(--font-display);
     font-weight: 600;
     font-size: 16px;
     letter-spacing: .18em;
     text-transform: uppercase;
     color: var(--primary-text);
}
 .pillar__title {
     margin: 0;
     font-family: var(--font-display);
     font-weight: 600;
     line-height: 1.05;
     color: var(--text-heading);
}
 .pillar__text {
     margin: 0;
     text-wrap: pretty;
     font-size: clamp(17px, 1.8vw, 20px);
     font-family:'Lora',georgia,sans-serif
}
 .pillar__list {
     margin: 6px 0 0;
     padding: 0;
     list-style: none;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem 2rem;
     font-size: 1rem;
     line-height: 1.8;
     color: var(--text-muted);
}
 @media (max-width: 768px) {
     .pillar__list {
         grid-template-columns: repeat(1, 1fr);
    }
}
 .pillar__figures {
     display: flex;
     flex-wrap: wrap;
     gap: 28px;
     margin-top: 6px;
}
 .pillar__figure {
     display: flex;
     flex-direction: column;
}
 .pillar__figure-value {
     font-family: var(--font-display);
     font-weight: 600;
     font-size:clamp(30px, 3.4vw, 63px);
     line-height: 1;
     color: var(--primary);
     margin-bottom:10px;
}
 .pillar__figure-label {
     font-size: 14px;
}
 .pillar__badges {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 4px;
}
 .pillar--reverse .pillar__media {
     order: 2;
}
 .pillar--card {
     background: var(--gray-lightest);
     grid-template-columns: 1fr 1fr;
     align-items: stretch;
     gap: 0;
}
 .pillar--card > .pillar__pane {
     display: flex;
     flex-direction: column;
}
 .pillar--card > .pillar__pane + .pillar__pane {
     border-left: 1px solid var(--border-light);
}
 .pillar__pane .pillar__body {
     padding: 26px clamp(20px, 2.4vw, 32px) 32px;
}
 .pillar__pane .pillar__media {
     height: clamp(180px, 20vw, 240px);
}
 @media (max-width: 767px) {
     .pillar, .pillar--card {
         grid-template-columns: 1fr;
    }
     .pillar--reverse .pillar__media {
         order: 0;
    }
     .pillar--card > .pillar__pane + .pillar__pane {
         border-left: 0;
         border-top: 1px solid var(--border-light);
    }
}
/* ========================================================================== block: badge ========================================================================== */
 .badge {
     display: inline-flex;
     align-items: center;
     padding: 5px 12px;
     border-radius: 999px;
     background: var(--primary-text);
     color: var(--white);
     font-family: var(--font-display);
     font-size: 12px;
     letter-spacing: .08em;
     text-transform: uppercase;
}
 .badge--gold {
     background: var(--golden);
     color: var(--on-gold);
}
/* ========================================================================== block: btn ========================================================================== */
 .btn, .form_button_submit {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     min-height: 48px;
     padding: 0 22px;
     border: 1px solid transparent;
     border-radius: var(--radius);
     background: var(--primary);
     color: var(--white);
     font-family: var(--font-display);
     font-weight: 600;
     font-size: 15px;
     letter-spacing: .1em;
     text-transform: uppercase;
     text-decoration: none;
     cursor: pointer;
     transition: background .15s ease-in-out, color .15s ease-in-out;
}
 .btn:hover, .form_button_submit:hover{
     background: var(--primary-text-hover);
     color: var(--white);
}
 .btn:active, .form_button_submit:active {
     background: var(--primary-active);
}
 .btn--gold {
     background: var(--gold);
     color: var(--on-gold);
     border-color: var(--gold);
}
 .btn--gold:hover {
     background: var(--golden);
     color: var(--on-gold);
}
 .btn--ghost {
     background: transparent;
     color: var(--white);
     border-color: var(--white);
}
/* outline on light backgrounds (secondary step-form action) */
 .btn--outline {
     background: transparent;
     color: var(--primary-text);
     border-color: var(--primary-text);
}
 .btn--outline:hover {
     background: var(--primary-text);
     color: var(--white);
}
 .btn--ghost:hover {
     background: var(--white);
     color: var(--primary-text);
}
 .btn--block {
     width: fit-content 
}
/* Trailing arrow. Uses the Material Symbols ligature as generated content so the glyph stays out of the markup (and out of the accessibility tree). */
 .btn--arrow::after {
     content: 'arrow_forward';
     font-family: 'Material Symbols Outlined';
     font-weight: normal;
     font-style: normal;
     font-size: 20px;
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;
     white-space: nowrap;
     direction: ltr;
     -webkit-font-feature-settings: 'liga';
     font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
     transition: transform .15s ease-in-out;
}
 .btn--arrow:hover::after {
     transform: translateX(3px);
}
 a.cta-link{
     display: inline-flex;
     align-items: center;
     gap: 10px;
     min-height: 48px;
     font-weight:600;
     width: fit-content;
     text-decoration:none;
}
 .cta-link::after {
     content: 'arrow_forward';
     font-family: 'Material Symbols Outlined';
     font-weight: normal;
     font-style: normal;
     font-size: 20px;
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;
     white-space: nowrap;
     direction: ltr;
     -webkit-font-feature-settings: 'liga';
     font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
     transition: transform .15s ease-in-out;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
}
 .cta-link:hover::after {
     transform: translateX(3px);
}
 .vm-button.vm-style{
     display:none;
}
/* ========================================================================== block: rfi (request-info card) ========================================================================== */
 .rfi {
     background: var(--white);
     border-top: 5px solid var(--primary);
     padding: 26px 26px 28px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
 .rfi__eyebrow {
     font-family: var(--font-display);
     font-weight: 600;
     font-size: 12px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--primary-text);
}
 .rfi__title {
     margin: 6px 0 16px;
}
/* ========================================================================== block: field (one form question) ========================================================================== */
 .field {
     margin: 0 0 14px;
}
 .field__label, .form_label, div.form_question label {
     display: block;
     font-size: 13px;
     line-height: 1.4;
     color: var(--text-heading);
     margin: 0 0 6px;
}
 .field__required {
     color: var(--primary);
}
 .form_question[data-required="1"] .form_label::after{
     position:absolute;
}
 .field__control, select,input {
     width: 100%;
     padding: 7px 12px;
     font-family: var(--font-body);
     font-size: 16px;
     color: var(--text-heading);
     background: var(--white);
     border: 1px solid var(--border-light);
     border-radius: var(--radius);
}
 input[type="radio" i] {
     margin:0px;
}
 div.form_responses{
     white-space:normal!important;
}
 .field__control:focus-visible {
     outline: none;
     border-color: var(--link);
     box-shadow: 0 0 0 3px rgba(11, 70, 137, .28);
}
 .field__note {
     font-size: 12px;
     line-height: 1.5;
     color: var(--text-muted);
}
 .field.is-invalid .field__control {
     border-color: var(--primary-text);
     box-shadow: 0 0 0 3px rgba(186, 12, 47, .2);
}
 .field--hidden {
     display: none;
}
/* ========================================================================== block: stepform (paging chrome around a set of .field elements) ========================================================================== */
 .stepform__progress {
     display: flex;
     gap: 8px;
     margin: 0 0 18px;
}
 .stepform__progress-item {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 6px;
     font-family: var(--font-display);
     font-size: 10px;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--text-muted);
}
 .stepform__progress-bar {
     height: 4px;
     background: var(--gray-light);
     transition: background .2s ease-in-out;
}
 .stepform__progress-item.is-current, .stepform__progress-item.is-done {
     color: var(--primary);
}
 .stepform__progress-item.is-current .stepform__progress-bar, .stepform__progress-item.is-done .stepform__progress-bar {
     background: var(--primary);
}
 .stepform__step[hidden] {
     display: none;
}
 .stepform__nav {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin-top: 8px;
}
 .stepform__error {
     margin: 10px 0 0;
     font-size: 14px;
     color: var(--primary-text);
}
 .stepform__error[hidden] {
     display: none;
}
 .stepform__legend {
     margin: 0 0 14px;
     font-size: 13px;
     color: var(--text-muted);
}
 .stepform__consent {
     margin: 4px 0 12px;
     font-size: 12px;
     line-height: 1.5;
     color: var(--text-muted);
}
/* ========================================================================== block: modal (mobile request-info) ========================================================================== */
 .modal {
     position: fixed;
     inset: 0;
     z-index: 25;
     visibility: hidden;
}
 .modal.is-open {
     visibility: visible;
}
 .modal__scrim {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, .6);
     opacity: 0;
     transition: opacity .25s cubic-bezier(.4, 0, .6, 1);
}
 .modal.is-open .modal__scrim {
     opacity: 1;
}
 .modal__dialog {
     position: absolute;
     inset: 12px 12px auto;
     max-height: calc(100% - 24px);
     max-width:650px;
     margin:0px auto;
     display: flex;
     flex-direction: column;
     background: var(--white);
     box-shadow: 0 0 20px rgba(0, 0, 0, .4);
     overflow: hidden;
     opacity: 0;
     transform: translateY(16px);
     transition: opacity .25s ease-out, transform .28s var(--ease-drawer);
}
 .modal.is-open .modal__dialog {
     opacity: 1;
     transform: translateY(0);
}
 .modal__head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 10px 12px 10px 18px;
     background: var(--primary);
}
 .modal__title {
     margin: 0;
     font-family: var(--font-display);
     font-weight: 500;
     font-size: 13px;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--white);
}
 .modal__close {
     width: 44px;
     height: 44px;
     min-height: 0;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: none;
     border: 0;
     cursor: pointer;
     color: var(--white);
     font-size: 22px;
     line-height: 1;
}
 .modal__body {
     padding: 20px 18px 24px;
     overflow-y: auto;
}
 .modal__heading{
     margin-bottom: 30px;
}
 #request-form .rfi-more {
     font-family: Oswald, "Roboto Condensed", sans-serif;
     font-style: normal;
     text-transform: uppercase;
}
 #request-form .rfi-sub {
     color: #000;
     font-family: Roboto, sans-serif;
}
 .ms-progress {
     display: flex;
     gap: 8px;
     margin: 0 0 20px;
}
 .ms-progress-step {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 6px;
     font-family: Oswald, "Roboto Condensed", sans-serif;
     font-size: 11px;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: #5d666f;
}
 .ms-progress-step .ms-bar {
     height: 4px;
     background: #d9d8d6;
     transition: background .2s ease-in-out;
}
 .ms-progress-step.is-done .ms-bar, .ms-progress-step.is-current .ms-bar {
     background: #ba0c2f;
}
 .ms-progress-step.is-current {
     color: #ba0c2f;
}
/* Slate marks its own conditionally hidden questions with .hidden — never override that. This class is ours, applied to whole steps. */
 .ms-step[hidden] {
     display: none !important;
}
 div.form_container{
     max-width:550px;
     margin:0px auto;
}
 #request-form .form_question {
     margin:0 0 1em 0 
}
 #request-form .form_question.hidden {
     display: none;
}
 #request-form .form_label {
     display: block;
     font-family: Roboto, sans-serif;
     font-size: 14px;
     line-height: 1.4;
     color: #212529;
     margin: 0 0 6px;
     font-weight: 400;
}
 #request-form .form_required, #request-form .form_label .required {
     color: #ba0c2f;
}
 #request-form .form_responses input[type="text"], #request-form .form_responses input[type="email"], #request-form .form_responses input[type="tel"], #request-form .form_responses textarea {
     width: 100%;
     min-height: 44px;
     padding: 10px 12px;
     font-family: Roboto, sans-serif;
     font-size: 15px;
     color: #212529;
     background: #fff;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
}
 #request-form .form_responses input:focus-visible, #request-form .form_responses select:focus-visible, #request-form .form_responses textarea:focus-visible {
     outline: none;
     border-color: #0b4689;
     box-shadow: 0 0 0 3px rgba(11, 70, 137, .28);
}
/* Slate floats radio/checkbox responses;
 lay them out as a wrapping row so long option labels wrap instead of running past the card edge. */
 #request-form .form_responses {
     display: flex;
     flex-wrap: wrap;
     gap: 4px 16px;
}
 #request-form .form_responses .form_response {
     float: none;
     margin: 0;
     display: flex;
     align-items: center;
     gap: 6px;
     margin-left:5px;
     white-space: nowrap;
}
/* A single text/select control should still fill the row. */
 #request-form .form_responses input[type="text"], #request-form .form_responses input[type="email"], #request-form .form_responses input[type="tel"], #request-form .form_responses select, #request-form .form_responses textarea {
     flex: 1 1 100%;
}
 #request-form .form_responses .form_response label {
     font-family: Roboto, sans-serif;
     font-size: 15px;
     margin-bottom:0px;
     color: #212529;
}
 #request-form .form_responses .form_response label{
     margin-left:0px;
}
 #request-form .form_instructions, #request-form .form_help {
     font-family: Roboto, sans-serif;
     font-size: 12px;
     line-height: 1.5;
     color: #5d666f;
}
 .ms-nav {
     display: flex;
     gap: 12px;
     align-items: center;
     margin-top: 8px;
}
 .ms-btn,.form_action_continue button {
     font-family: Oswald, "Roboto Condensed", sans-serif;
     font-size: 15px;
     letter-spacing: .04em;
     text-transform: uppercase;
     padding: 12px 22px;
     border: 1px solid #ba0c2f;
     border-radius: 4px;
     background: #ba0c2f;
     color: #fff;
     cursor: pointer;
     transition: background .15s ease-in-out, color .15s ease-in-out;
}
 .ms-btn:hover {
     background: #d20e35;
     border-color: #d20e35;
}
 .ms-btn.ms-btn-secondary {
     background: transparent;
     color: #ba0c2f;
}
 .ms-btn.ms-btn-secondary:hover {
     background: rgba(186,12,47,.08);
}
 .form_action_back{
     font-family: Oswald, "Roboto Condensed", sans-serif;
     font-size: 15px;
     color:#ba0c2f;
     letter-spacing: .04em;
     text-transform: uppercase;
     padding: 12px 22px;
     border: 1px solid #ba0c2f;
     border-radius: 4px;
     color: #ba0c2f;
     cursor: pointer;
     transition: background .15s ease-in-out, color .15s ease-in-out;
}
 .form_action_back:hover{
     color:#fff;
     background:var(--primary);
}
 form[data-page = "2"] div.form_action_submit {
     display: flex !important;
     flex-direction: row-reverse;
     justify-content: flex-end;
     gap: 10px;
}
 .ms-error {
     font-family: Roboto, sans-serif;
     font-size: 13px;
     color: #ba0c2f;
     margin: 10px 0 0;
}
 .ms-error[hidden] {
     display: none;
}
/* Slate's real submit is hidden until the final step. */
 .ms-submit-hidden {
     display: none !important;
}
/* ...and when shown, it should match the wrapper's buttons. */
 #request-form input[type="submit"], #request-form button[type="submit"] {
     font-family: Oswald, "Roboto Condensed", sans-serif;
     font-size: 15px;
     letter-spacing: .04em;
     text-transform: uppercase;
     padding: 12px 22px;
     border: 1px solid #ba0c2f;
     border-radius: 4px;
     background: #ba0c2f;
     color: #fff;
     cursor: pointer;
     transition: background .15s ease-in-out;
}
 #request-form input[type="submit"]:hover, #request-form button[type="submit"]:hover {
     background: #d20e35;
     border-color: #d20e35;
}
/* Field-level invalid state */
 .form_question.ms-invalid input, .form_question.ms-invalid select {
     border-color: #ba0c2f !important;
     box-shadow: 0 0 0 2px rgba(186,12,47,.18);
}
/* ========================================================================== block: nextsteps ========================================================================== */
 .nextsteps {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 12px 28px;
     border-top: 1px solid var(--border-light);
     padding: 24px 0 40px;
}
 .nextsteps__label {
     font-family: var(--font-display);
     font-weight: 600;
     font-size: 12px;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--text-muted);
}
 .nextsteps__link {
     font-size: 15px;
     min-height: 44px;
     display: inline-flex;
     align-items: center;
}
/* ========================================================================== block: cta ========================================================================== */
 .cta {
     background: var(--primary);
     padding: clamp(32px, 4vw, 56px) 0;
     position:relative;
     overflow:hidden
}
 .cta__inner {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 24px 48px;
}
 .cta__copy {
     display: flex;
     flex-direction: column;
     gap: 10px;
     max-width: 62ch;
}
 .cta__text {
     margin: 0;
     font-family: var(--font-serif);
     font-size: clamp(17px, 1.6vw, 19px);
     line-height: 1.45;
     color: rgba(255, 255, 255, .95);
}
 .cta__actions {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
     z-index:1;
}
 @media (max-width: 767px) {
     .cta__actions {
         width: 100%;
         flex-direction: column;
    }
}
/* ========================================================================== block: site-footer ========================================================================== */
/* Footer */
 footer {
     position: relative;
     background: #5D666f;
     color: #fff;
     overflow: hidden;
}
 footer .colorblock {
     height: 10px;
     background: url(https://www.umsl.edu/files/images/umsl-colorblock.jpg);
     top: 0px;
     background-size: 100%;
     background-repeat: no-repeat;
     background-position: 0 -5px;
     width: 100%;
     position:relative;
     z-index:1;
}
 .footer-inner {
     position:relative;
    max-width: 1536px;
     margin: 0 auto;
     padding: 56px 32px 32px 32px;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     gap: 32px;
     flex-wrap: wrap;
     z-index:1
}
 .footer-section {
     display: flex;
     flex-direction: column;
     gap: 20px;
     max-width: 420px;
}
 .footer-logo{
    height: 50px;
     width: 200px;
}
 .footer-university-eyebrow {
     display: block;
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
     letter-spacing: 0.3em;
     font-size: 13px;
     text-transform: uppercase;
     margin: 0 0 2px 0;
}
 .footer-university-name {
     font-family: 'Oswald', sans-serif;
     font-weight: 700;
     font-size: 26px;
     text-transform: uppercase;
     letter-spacing: 0.01em;
     margin: 0;
}
 .footer-section p {
     font-size: 15px;
     margin: 0;
     line-height: 1.5;
     padding-bottom:5px
}
 .footer-section p a:hover{
    text-decoration:underline;
     color:#fff
}
 .footer-section a {
     opacity: 0.9;
     transition: opacity 0.2s ease;
     color:#fff 
}
 .footer-section a:hover, .footer-section a:focus-visible {
     opacity: 1;
}
 .social-icons {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
     text-decoration:none 
}
 .social-icon {
     width: 44px;
     height: 44px;
     border-radius: 9999px;
     background: #eeeeee;
     color: #1b1b1b;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: background 0.2s ease;
}
 .social-icon i {
     font-size: 18px;
}
 a.social-icon{
    text-decoration:none
}
 .social-icon:hover{
     cursor: pointer;
     background:#ba0c2f;
     text-decoration:none;
     color:#fff;
}
 .footer-legal {
     position:relative;
     z-index:2;
    border-top: 1px solid rgba(255,255,255,0.2);
     margin-top: 40px;
     padding-top: 24px;
     padding-bottom: 24px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     text-align: center;
     font-size: 14px;
     opacity: 0.9;
}
 .footer-legal p{
    padding:0px;
    margin-top:5px;
    margin-bottom:0px;
}
 .footer-legal a {
     text-decoration: underline;
     color:#fff
}
 footer .spirit-mark {
     background: url(https://www.umsl.edu/files/images/umsl-spirit-mark_silver.svg);
     background-repeat: no-repeat;
     background-position: 99% -60px;
     height: 600px;
     width: 100%;
     position: absolute;
     right: 0;
     z-index: 0;
     opacity: 0.2;
     top: 0;
}
/* ========================================================================== Corner Patterns ========================================================================== */
 .geo-pattern {
     --geo-pattern-size: 500px;
    /* footprint of the box (square) */
     --geo-pattern-scale: 1;
    /* set by --lg/--sm + the mobile media query */
     --geo-pattern-flip-x: 1;
    /* set to -1 by .geo-pattern--flip-x */
     --geo-pattern-flip-y: 1;
    /* set to -1 by .geo-pattern--flip-y */
     position: absolute;
     width: var(--geo-pattern-size);
     height: var(--geo-pattern-size);
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     pointer-events: none;
     z-index: 0;
     transform: scale( calc(var(--geo-pattern-scale) * var(--geo-pattern-flip-x)), calc(var(--geo-pattern-scale) * var(--geo-pattern-flip-y)) );
}
/* Corner placement -------------------------------------------------------- Positions the box only. Pair with --flip-x/--flip-y if you're reusing one image across multiple corners (see note above). */
 .geo-pattern--br {
     right: 0;
     bottom: 0;
}
 .geo-pattern--bl {
     left: 0;
     bottom: 0;
}
 .geo-pattern--tr {
     right: 0;
     top: 0;
}
 .geo-pattern--tl {
     left: 0;
     top: 0;
}
/* Flip helpers ------------------------------------------------------------ */
 .geo-pattern--flip-x {
     --geo-pattern-flip-x: -1;
}
 .geo-pattern--flip-y {
     --geo-pattern-flip-y: -1;
}
/* Size variants ---------------------------------------------------------- Adjust these two numbers to change the "large" and "small" look site-wide. */
 .geo-pattern--lg {
     --geo-pattern-scale: 1.5;
}
 .geo-pattern--sm {
     --geo-pattern-scale: 0.55;
}
/* Mobile — shrink further. Tune the breakpoint/values to your site. */
 @media (max-width: 767px) {
     .geo-pattern--lg {
         --geo-pattern-scale: 0.6;
    }
     .geo-pattern--sm {
         --geo-pattern-scale: 0.35;
    }
}
/* Image variants ---------------------------------------------------------- Point each one at your own file. Naming is generic (a/b/c) so this stays portable across sites — rename or add more as needed. */
 .geo-pattern--img-sq-red {
     background-image: url("https://www.umsl.edu/choose/files/imgs/2026/square-pattern-red-lg.webp");
}
 .geo-pattern--img-sq-dark-red {
     background-image: url("https://www.umsl.edu/choose/files/imgs/2026/square-pattern-dark-red-lg.webp");
}
 .geo-pattern--img-sq-red-gold {
     background-image: url("https://www.umsl.edu/choose/files/imgs/2026/square-pattern-red-gold-lg.webp");
}
 .geo-pattern--img-sq-gold {
     background-image: url("https://www.umsl.edu/choose/files/imgs/2026/square-pattern-gold-lg.webp");
}
 .geo-pattern--img-sq-golden {
     background-image: url("https://www.umsl.edu/choose/files/imgs/2026/square-pattern-img-sq-golden-lg.webp");
}
 .geo-pattern--img-sq-water {
     background-image: url("https://www.umsl.edu/choose/files/imgs/2026/square-pattern-water-lg.webp.svg");
}
 .geo-pattern--img-sq-gray-lg.webp {
     background-image: url("https://www.umsl.edu/choose/files/imgs/2026/square-pattern-gray-lg.svg");
}
 .geo-pattern--img-sq-white-lg.webp {
     background-image: url("https://www.umsl.edu/choose/files/imgs/2026/square-pattern-white-lg.svg");
}
 .geo-pattern--mask-a {
     background-color: currentColor;
     background-image: none;
     -webkit-mask-image: url("https://www.umsl.edu/choose/files/imgs/2026/square-pattern-red.svg");
     mask-image: url("https://www.umsl.edu/choose/files/imgs/2026/square-pattern-red.svg");
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-size: contain;
     mask-size: contain;
}
.photo-overlay{
    background-image: url(http://umsl.edu/choose/files/imgs/2026/student-cta-bg.webp);
    background-repeat: no-repeat;
    background-size: 77%;
    position: absolute;
    z-index: 1;
    background-position: bottom;
    top: -120px;
}
 .photo-overlay--sm {
     --geo-pattern-scale: 0.55;
}

 @media (max-width: 767px) {
     .hidden-sm{
        display:none
    }
}
 .pillar__list {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 1.75rem 2.5rem;
     margin-top: 1.5rem;
     padding: 0;
     list-style: none;
}
 .pillar__list li {
     margin: 0;
}
 .pillar__list strong {
     display: block;
     margin-bottom: 0.3rem;
     font-weight: 700;
     line-height: 1.3;
}
 .pillar__list span {
     display: block;
     line-height: 1.5;
}
 @media (max-width: 991px) {
     .pillar__list {
         grid-template-columns: 1fr;
    }
     .pillar {
         grid-template-columns: 1fr;
    }
}