/* ============================================================
   FABanner — Financial Aid Page Banner
   Two-column: navy/bracket left, photo right.
   Mobile: photo stacks above navy.
   ============================================================ */

.FABanner {
    display: flex;
    align-items: stretch;
    min-height: 200px;
}

.FABanner-blue {
    position: relative;
    background: #0C233F;
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    /* fallback: matches container's 15px gutter */
    padding: 48px 52px 48px 15px;
    overflow: hidden;
}

/* Align left edge of text with Bootstrap container at each breakpoint */
@media (min-width: 768px) {
    .FABanner-blue {
        padding-left: calc((100vw - 720px) / 2 + 15px);
    }
}

@media (min-width: 992px) {
    .FABanner-blue {
        padding-left: calc((100vw - 960px) / 2 + 15px);
    }
}

@media (min-width: 1200px) {
    .FABanner-blue {
        padding-left: calc((100vw - 1140px) / 2 + 15px);
    }
}

.FABanner-bracket {
    position: relative;
    padding: 10px 0 10px 24px;
    border-left: 4px solid #FFC62F;
}

.FABanner-bracket::before,
.FABanner-bracket::after {
    content: '';
    position: absolute;
    left: -4px;
    width: 16px;
    height: 4px;
    background: #FFC62F;
}

.FABanner-bracket::before { top: 0; }
.FABanner-bracket::after  { bottom: 0; }

.FABanner-heading {
    color: #ffffff;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: clamp(1.6rem, 4vw, 3rem);
    line-height: 1.2;
    margin: 0;
}

.FABanner-wm {
    position: absolute;
    right: 24px;
    bottom: -16px;
    width: 130px;
    height: auto;
    opacity: 0.1;
    pointer-events: none;
}

.FABanner-photo {
    flex: 0 0 50%;
    overflow: hidden;
    min-height: 200px;
}

.FABanner-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   CostTabs — Cost of Attendance Tabs Section
   ============================================================ */

.CostTabs {
    padding: 56px 0 0;
    overflow: hidden;
}

.CostTabs-intro {
    margin-bottom: 40px;
}

.CostTabs-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: 2rem;
    margin-bottom: 8px;
}

.CostTabs-subtitle {
    color: #0070B9;
    font-family: montserrat-bold, sans-serif;
    font-size: 1rem;
    margin: 0;
}

/* ----- Perch data source: hidden from display ----- */
.CostTabs-src {
    display: none;
}

/* ----- Desktop: two-column tab box ----- */
.CostTabs-box {
    display: flex;
    align-items: stretch;
    border: 2px solid #0C233F;
    margin-bottom: 0;
}

/* ----- Nav column ----- */
.CostTabs-nav {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    border-right: 2px solid #0C233F;
}

/* flex: 1 makes each tab grow to fill nav height equally */
.CostTabs-tab {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px 28px;
    background: #fff;
    border: none;
    border-top: 2px solid #0C233F;
    text-align: left;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1.25rem;
    color: #0C233F;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    z-index: 1;
}

.CostTabs-tab:first-child {
    border-top: none;
}

.CostTabs-tab:hover:not(.is-active) {
    background: #f0f4f8;
}

.CostTabs-tab.is-active {
    background: #0070B9;
    color: #fff;
    z-index: 2;
}

.CostTabs-tab.is-active::after {
    content: '';
    position: absolute;
    right: -19px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 19px solid transparent;
    border-bottom: 19px solid transparent;
    border-left: 19px solid #0070B9;
    z-index: 3;
}

/* ----- Panels column ----- */
.CostTabs-panels {
    flex: 1;
    position: relative;
}

.CostTabs-panel {
    display: none;
    height: 100%;
    flex-direction: column;
}

.CostTabs-panel.is-active {
    display: flex;
}

/* Gold hatched corner decoration */
.CostTabs-deco {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 100px;
    height: 100px;
    pointer-events: none;
    overflow: hidden;
}

.CostTabs-deco::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        #FFC62F 0,
        #FFC62F 1px,
        transparent 2px,
        transparent 7px
    );
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.CostTabs-panel-inner {
    padding: 32px 40px;
    flex: 1;
}

.CostTabs-label {
    font-family: montserrat, sans-serif;
    font-weight: bold;
    font-size: 2.25rem;
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    color: #000;
    margin-bottom: 4px;
}

.CostTabs-cost {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 2.75rem;
    color: #0070B9;
    margin-bottom: 20px;
    line-height: 1.1;
}

.CostTabs-cost::before {
    content: '[';
    color: #FFC62F;
    margin-right: 4px;
    font-family: montserrat, sans-serif;
}

.CostTabs-cost::after {
    content: ']';
    color: #FFC62F;
    margin-left: 4px;
    font-family: montserrat, sans-serif;
}

.CostTabs-items-label {
    font-size: 1.5rem;
    color: #000;
    margin-bottom: 16px;
}

.CostTabs-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 32px;
    margin-bottom: 28px;
}

.CostTabs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: montserrat, sans-serif;
    font-size: 0.95rem;
    color: #000;
}

.CostTabs-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0C233F;
    color: #FFC62F;
    flex-shrink: 0;
    font-size: 0.85rem;
}

.CostTabs-note {
    font-family: montserrat, sans-serif;
    font-size: 1rem;
    color: #000;
    margin: 0;
}

/* ----- CTA bar ----- */
.CostTabs-cta-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 50px;
}


.CostTabs-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #FFC62F;
    padding: 20px 32px;
    text-decoration: none;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #0C233F;
    transition: background 0.2s;
    min-width: 380px;
    position: relative;
}
.CostTabs-cta::before {
    content: "";
    position: absolute;
    left: 100%;
    width: 50vw;
    height: 100%;
    background-color: #FFC62F;
    transition: background 0.2s;
}

.CostTabs-cta:hover {
    background: #e6b000;
    color: #0C233F;
    text-decoration: none;
}
.CostTabs-cta:hover::before {
    background: #e6b000;
}

.CostTabs-cta-arrow {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* ----- Mobile accordion ----- */
.CostTabs-accordion {
    border: 2px solid #0C233F;
}

.CostTabs-acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 20px;
    background: #fff;
    border: none;
    border-top: 2px solid #0C233F;
    text-align: left;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #0C233F;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.CostTabs-acc-btn:first-child {
    border-top: none;
}

.CostTabs-acc-btn.is-active {
    background: #0070B9;
    color: #fff;
}

.CostTabs-acc-btn .fa-chevron-down {
    transition: transform 0.25s;
    flex-shrink: 0;
}

.CostTabs-acc-btn.is-active .fa-chevron-down {
    transform: rotate(180deg);
}

.CostTabs-acc-panel {
    display: none;
    border-top: 2px solid #0C233F;
}

.CostTabs-acc-panel.is-active {
    display: block;
}

/* ----- Tablet ----- */
@media (max-width: 991px) {
    .CostTabs-nav {
        flex: 0 0 40%;
    }

    .CostTabs-panel-inner {
        padding: 24px 28px;
    }

    .CostTabs-cost {
        font-size: 2.25rem;
    }
}

/* ============================================================
   CenterBoxCTA — Full-width background photo, centered content box.
   ============================================================ */

.CenterBoxCTA {
    position: relative;
    padding: 80px 0;
    background-color: #0C233F;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 100px;
}

.CenterBoxCTA-overlay {
    position: absolute;
    inset: 0;
    background: rgba(16, 35, 61, 0.65);
    pointer-events: none;
}

.CenterBoxCTA .container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.CenterBoxCTA-box {
    width: 100%;
    max-width: 900px;
    background: #fff;
    border: 5px solid #FFC62F;
    padding: 48px 52px;
    text-align: center;
}

.CenterBoxCTA-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: 2rem;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    margin-bottom: 16px;
}

.CenterBoxCTA-text {
    font-family: montserrat, sans-serif;
    color: #000;
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 32px;
}

.CenterBoxCTA-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: #0C233F;
    color: #fff;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    padding: 14px 28px;
    text-decoration: none;
    transition: background 0.2s;
}

.CenterBoxCTA-btn:hover {
    background: #0070B9;
    color: #fff;
    text-decoration: none;
}

.CenterBoxCTA-btn-arrow {
    font-size: 1.1rem;
    flex-shrink: 0;
    color: #FFC62F;
}

/* ============================================================
   Deadlines — Key Financial Aid Deadlines
   A yellow rect border (absolute) sits behind everything.
   White bg on the header, cards-wrap, and link interrupts
   the border, leaving corner stubs and side lines visible.
   ============================================================ */

.Deadlines {
    padding: 100px 0 0;
}

.Deadlines-inner {
    position: relative;
}

.Deadlines-border {
    position: absolute;
    inset: 0;
    border: 3px solid #FFC62F;
    z-index: 0;
    pointer-events: none;
    top: 24px;
    left: 50px;
    right: 50px;
    bottom: 30px;
}

.Deadlines-header {
    position: relative;
    z-index: 1;
    background: #fff;
    text-align: center;
    padding: 0 40px;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.Deadlines-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: 16px;
}

.Deadlines-subtext {
    font-family: montserrat, sans-serif;
    color: #000;
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
}

.Deadlines-cards-wrap {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 25px 0;
    margin-bottom: 0;
}

.Deadlines-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* Stretch boxes evenly when there are 3 or fewer */
.Deadlines-cards:has(> .Deadlines-card:only-child) {
    grid-template-columns: 1fr;
}
.Deadlines-cards:has(> .Deadlines-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}
.Deadlines-cards:has(> .Deadlines-card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
}

.Deadlines-card {
    background: #0C233F;
    padding: 28px 24px;
    text-align: center;
}

.Deadlines-card-date {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #FFC62F;
    font-size: 1.75rem;
    margin-bottom: 16px;
    line-height: 1.2;
}

.Deadlines-card-desc {
    font-family: montserrat, sans-serif;
    color: #fff;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
}

.Deadlines-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    min-height: 64px;
    align-items: center;
}

.Deadlines-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    padding: 20px 48px;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #0C233F;
    text-decoration: none;
    transition: color 0.2s;
}

.Deadlines-link:hover {
    color: #0070B9;
    text-decoration: none;
}

.Deadlines-link-arrow {
    color: #FFC62F;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ----- Tablet: 2-column grid ----- */
@media (max-width: 991px) {
    .Deadlines-header {
        max-width: 100%;
        padding: 28px 32px;
    }

    .Deadlines-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .Deadlines-border {
        display: none;
    }
}

/* ----- Mobile: single column ----- */
@media (max-width: 767px) {
    .Deadlines {
        padding: 40px 0;
    }

    .Deadlines-header {
        padding: 24px 24px;
        margin-bottom: 32px;
    }

    .Deadlines-cards {
        grid-template-columns: 1fr;
    }

    .Deadlines-cards-wrap {
        padding: 0 16px;
        margin-bottom: 32px;
    }

    .Deadlines-link {
        padding: 18px 32px;
    }
}

/* ============================================================
   RightBoxBgImg — Background photo (container-width) with
   right-side white content box and link list.
   ============================================================ */

.RightBoxBgImg {
    padding: 100px 0 0;
}

.RightBoxBgImg-inner {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 380px;
    background-image: var(--bg-img);
    background-size: cover;
    background-position: center;
    padding: 150px 0 0 0;
}

.RightBoxBgImg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    pointer-events: none;
    z-index: 1;
}

.RightBoxBgImg-spacer {
    flex: 1;
}

.RightBoxBgImg-box {
    position: relative;
    z-index: 2;
    flex: 0 0 38%;
    background: #fff;
    padding: 40px 36px;
}

.RightBoxBgImg-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    margin-bottom: 12px;
}

.RightBoxBgImg-intro {
    font-family: montserrat, sans-serif;
    font-size: 1rem;
    color: #000;
    line-height: 1.6;
    margin-bottom: 24px;
}

.RightBoxBgImg-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.RightBoxBgImg-inner.no-top-pad {
    padding-top: 0;
}

.RightBoxBgImg-box.bordered {
    border: 2px solid #0C233F;
}

.RightBoxBgImg-plain-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.RightBoxBgImg-plain-item {
    padding: 8px 0;
    font-family: montserrat, sans-serif;
    font-size: 1rem;
    color: #000;
    line-height: 1.5;
}

.RightBoxBgImg-plain-item::before {
    content: '\2014\00a0';
    color: #FFC62F;
}

.RightBoxBgImg-outro {
    font-family: montserrat, sans-serif;
    font-size: 0.9rem;
    color: #000;
    line-height: 1.6;
    margin-top: 20px;
}

.RightBoxBgImg-outro p {
    margin: 0;
}

.RightBoxBgImg-bottom-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #0C233F;
    padding: 20px 36px;
    margin: 24px -36px -40px;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #fff;
    text-decoration: none !important;
    transition: background 0.2s;
}

.RightBoxBgImg-bottom-link:hover {
    background: #1a3a5c;
    color: #fff;
    text-decoration: none !important;
}

.RightBoxBgImg-bottom-arrow {
    color: #FFC62F;
    flex-shrink: 0;
    transition: transform 0.2s;
}

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

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

.RightBoxBgImg-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    font-family: montserrat-bold, sans-serif;
    font-size: 1rem;
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
}

.RightBoxBgImg-link:hover {
    color: #0070B9;
    text-decoration: none;
}

.RightBoxBgImg-arrow {
    color: #FFC62F;
    flex-shrink: 0;
    transition: transform 0.2s;
}

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

/* ----- Mobile ----- */
@media (max-width: 767px) {
    .RightBoxBgImg {
        padding: 40px 0 0;
    }

    .RightBoxBgImg-inner {
        flex-direction: column;
        min-height: 0;
        background-image: none;
        padding: 0;
    }

    .RightBoxBgImg-spacer {
        min-height: 200px;
        background-image: var(--bg-img);
        background-size: cover;
        background-position: center;
    }

    .RightBoxBgImg-box {
        flex: none;
        width: 100%;
        padding: 28px 24px;
    }

    .RightBoxBgImg-bottom-link {
        padding: 18px 24px;
        margin: 20px -24px -28px;
    }
}

/* ============================================================
   FundingCards — 4-up image cards with hover text reveal
   ============================================================ */

.FundingCards {
    padding: 100px 0 0;
}

.FundingCards-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: 2rem;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    text-align: center;
    line-height: 1.3;
    /* max-width: 700px; */
    margin: 0 auto 50px;
}

.FundingCards-outer {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 30px;
}

.FundingCards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.FundingCards-wrapper {
    flex: 0 0 calc(25% - 3px);
    padding: 0 13px;
    position: relative;
}

.FundingCards-card {
    position: relative;
    display: block;
    height: 400px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: inherit;
}

/* Bracket accent — full-width top bar + left serif (odd) or full-width bottom bar + left serif (even) */
.FundingCards-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 34px;
    z-index: 3;
    pointer-events: none;
}

.FundingCards-wrapper:nth-child(odd)::before {
    top: 0;
    border-top: 13px solid #FFC62F;
    border-left: 13px solid #FFC62F;
    border-right: 13px solid #FFC62F;
}

.FundingCards-wrapper:nth-child(even)::before {
    bottom: 0;
    border-bottom: 13px solid #FFC62F;
    border-left: 13px solid #FFC62F;
    border-right: 13px solid #FFC62F;
}

.FundingCards-card:hover {
    text-decoration: none;
}

.FundingCards-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(12, 35, 63, 0.88) 0%,
        rgba(12, 35, 63, 0.15) 55%,
        transparent 100%);
    transition: background 0.35s ease;
    pointer-events: none;
}

.FundingCards-card:hover .FundingCards-card-overlay {
    background: linear-gradient(to top,
        rgba(12, 35, 63, 0.95) 0%,
        rgba(12, 35, 63, 0.70) 55%,
        rgba(12, 35, 63, 0.35) 100%);
}

.FundingCards-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 30px 20px;
    z-index: 1;
}

.FundingCards-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.FundingCards-card-title {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.FundingCards-card-arrow {
    color: #FFC62F;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.FundingCards-card:hover .FundingCards-card-arrow {
    transform: translateX(4px);
}

.FundingCards-card-desc {
    font-family: montserrat, sans-serif;
    font-size: 1rem;
    color: #fff;
    line-height: 1.55;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: max-height 0.4s ease, opacity 0.3s ease 0.05s, transform 0.35s ease, margin-top 0.35s ease;
}

.FundingCards-card:hover .FundingCards-card-desc {
    max-height: 150px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 10px;
}

/* ----- Tablet: 2 columns ----- */
@media (max-width: 991px) {
    .FundingCards-outer {
        padding: 0 20px;
    }

    .FundingCards-wrapper {
        flex: 0 0 calc(50% - 2px);
    }

    .FundingCards-card {
        height: 340px;
    }
}

/* Mobile: photo stacks on top, blue below */
@media (max-width: 767px) {
    .FABanner {
        flex-direction: column;
    }

    .FABanner-photo {
        order: -1;
        min-height: 220px;
    }

    .FABanner-blue {
        flex: none;
        padding: 36px 28px;
    }

    /* CostTabs: accordion handles layout, just shrink a few values */
    .CostTabs {
        padding: 40px 0 0;
    }

    .CostTabs-panel-inner {
        padding: 24px 20px;
    }

    .CostTabs-cost {
        font-size: 2rem;
    }

    .CostTabs-items {
        grid-template-columns: 1fr;
    }

    .CostTabs-cta {
        min-width: 0;
        width: 100%;
    }

    .CenterBoxCTA {
        padding: 40px 0;
    }

    .CenterBoxCTA-box {
        padding: 28px 24px;
    }

    .CenterBoxCTA-btn {
        display: flex;
        justify-content: space-between;
    }

    /* FundingCards: single column, description always visible */
    .FundingCards {
        padding: 40px 0;
    }

    .FundingCards-outer {
        padding: 0 15px;
    }

    .FundingCards-grid {
        gap: 12px;
    }

    .FundingCards-wrapper {
        flex: 0 0 100%;
        padding: 0;
    }

    .FundingCards-card {
        height: 280px;
    }

    .FundingCards-card-desc {
        max-height: 150px;
        opacity: 1;
        transform: translateY(0);
        margin-top: 8px;
    }

    /* Overlay always on on mobile */
    .FundingCards-card-overlay {
        background: linear-gradient(to top,
            rgba(12, 35, 63, 0.95) 0%,
            rgba(12, 35, 63, 0.70) 55%,
            rgba(12, 35, 63, 0.35) 100%);
    }

    /* All brackets at the top on mobile */
    .FundingCards-wrapper:nth-child(even)::before {
        bottom: auto;
        top: 0;
        border-bottom: none;
        border-top: 13px solid #FFC62F;
    }
}

/* ============================================================
   BannerForm — Photo covers left 50vw (screen edge to form edge);
   form box aligns to container right. Mobile: photo top, stack below.
   ============================================================ */

.BannerForm {
    padding: 0 0 0;
    margin-top: 100px;
    position: relative;
}

/* Photo + dark overlay, clipped to exactly the left half of the viewport.
   Because the form box is flex: 0 0 50% of the centered container,
   its left edge always lands at 50vw across all desktop breakpoints. */
.BannerForm::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50vw;
    background-image: linear-gradient(rgba(0,0,0,0.52), rgba(0,0,0,0.52)), var(--bg-img);
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}

.BannerForm-photo-mob {
    display: none;
}

.BannerForm .container {
    position: relative;
    z-index: 1;
}

.BannerForm-row {
    display: flex;
    align-items: stretch;
    min-height: 480px;
}

.BannerForm-left {
    align-self: center;
    margin-left: auto;
    padding: 40px;
    background: #fff;
}

.BannerForm-list-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    color: #0C233F;
    margin-bottom: 16px;
}

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

.BannerForm-list-item {
    position: relative;
    padding: 5px 0 5px 28px;
    font-family: montserrat, sans-serif;
    font-size: 1rem;
    color: #000;
    line-height: 1.5;
}

.BannerForm-list-item::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #FFC62F;
}

.BannerForm-box {
    flex: 0 0 50%;
    background: #fff;
    border: 2px solid #0C233F;
    border-left: 0px solid transparent;
    position: relative;
    z-index: 2;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.BannerForm-box-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2;
    margin-bottom: 24px;
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
    .BannerForm {
        padding: 40px 0 0;
    }

    .BannerForm::before {
        display: none;
    }

    .BannerForm-photo-mob {
        display: block;
        background-image: var(--bg-img);
        background-size: cover;
        background-position: center;
        min-height: 240px;
    }

    .BannerForm .container {
        margin-top: -24px;
        position: relative;
        z-index: 3;
    }

    .BannerForm-row {
        flex-direction: column;
        min-height: 0;
    }

    .BannerForm-left {
        margin-left: 0;
        align-self: stretch;
        padding: 28px 24px 20px;
    }

    .BannerForm-box {
        flex: none;
        width: 100%;
        padding: 20px 24px 32px;
        justify-content: flex-start;
        border-left: 2px solid #0C233F;
        
    }
}

/* ============================================================
   PicText — Two-column picture/video + text section.
   Options: photo side, video swap, hatched gold deco, multi-CTA.
   ============================================================ */

.PicText {
    padding: 100px 0 0;
}

.PicText-media {
    position: relative;
}

.PicText-media img {
    width: 100%;
    height: auto;
    display: block;
}

.PicText-media iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
}

/* Hatched gold corner decoration — same pattern as CostTabs panels */
.PicText-deco {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 100px;
    height: 100px;
    pointer-events: none;
    overflow: hidden;
}

.PicText-deco::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        45deg,
        #FFC62F 0,
        #FFC62F 1px,
        transparent 2px,
        transparent 7px
    );
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Corner variants via data-corner attribute */
.PicText-deco[data-corner="top-left"] {
    top: -15px;
    right: auto;
    left: -15px;
}
.PicText-deco[data-corner="top-left"]::before {
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.PicText-deco[data-corner="bottom-right"] {
    top: auto;
    right: -15px;
    bottom: -15px;
}
.PicText-deco[data-corner="bottom-right"]::before {
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.PicText-deco[data-corner="bottom-left"] {
    top: auto;
    right: auto;
    bottom: -15px;
    left: -15px;
}
.PicText-deco[data-corner="bottom-left"]::before {
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

@media (min-width: 992px) {
    .PicText-text {
        padding-left: 2rem;
    }
}

.PicText-subtitle {
    color: #0070B9;
    font-family: montserrat-bold, sans-serif;
    font-size: 1rem;
    margin-bottom: 8px;
}

.PicText-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    margin-bottom: 16px;
}

.PicText-body {
    font-family: montserrat, sans-serif;
    color: #000;
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 28px;
}

.PicText-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.PicText-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: #0C233F;
    color: #fff;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    padding: 14px 28px;
    text-decoration: none !important;
    transition: background 0.2s;
}

.PicText-btn:hover {
    background: #0070B9;
    color: #fff;
    text-decoration: none;
}

.PicText-btn-arrow {
    color: #FFC62F;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
    .PicText {
        padding: 40px 0 0;
    }

    .PicText-deco {
        width: 70px;
        height: 70px;
        top: -10px;
        right: -10px;
    }

    .PicText-deco[data-corner="top-left"] {
        right: auto;
        left: -10px;
    }

    .PicText-deco[data-corner="bottom-right"] {
        top: auto;
        right: -10px;
        bottom: -10px;
    }

    .PicText-deco[data-corner="bottom-left"] {
        top: auto;
        right: auto;
        bottom: -10px;
        left: -10px;
    }

    .PicText-btn {
        width: 100%;
        justify-content: space-between;
    }
}

/* ----- Bleed variant -----
   Image spans flush to the left (or right) page edge.
   Text stays aligned with the container's inner content edge.
   Outer-padding formula: 50vw - (container-max / 2) + 15px (BS4 gutter)
   Bootstrap 4 container widths: 960px at lg, 1140px at xl.
   ------------------------------------------------------------------ */

/* Flex structure — active at all desktop breakpoints */
@media (min-width: 992px) {
    .PicText--bleed .PicText-bleed-row {
        display: flex;
        align-items: stretch;
    }

    /* Image column: exactly half the viewport, flush to the page edge */
    .PicText--bleed .PicText-bleed-img {
        flex: 0 0 50%;
        overflow: hidden;
    }

    .PicText--bleed .PicText-bleed-img .PicText-media {
        height: 100%;
    }

    .PicText--bleed .PicText-bleed-img .PicText-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Text column base — inner padding (image side) is always 3rem */
    .PicText--bleed .PicText-bleed-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 3rem;
        padding-bottom: 3rem;
        padding-left: 3rem;
    }

    .PicText--bleed.PicText--img-right .PicText-bleed-row {
        flex-direction: row-reverse;
    }

    .PicText--bleed.PicText--img-right .PicText-bleed-content {
        padding-left: 0;
        padding-right: 3rem;
    }
}

/* lg (992–1199px): BS4 container = 960px → outer = 50vw - 480px + 15px */
@media (min-width: 992px) and (max-width: 1199px) {
    .PicText--bleed .PicText-bleed-content {
        padding-right: max(15px, calc(50vw - 465px));
    }

    .PicText--bleed.PicText--img-right .PicText-bleed-content {
        padding-left: max(15px, calc(50vw - 465px));
    }
}

/* xl+ (≥1200px): BS4 container = 1140px → outer = 50vw - 570px + 15px */
@media (min-width: 1200px) {
    .PicText--bleed .PicText-bleed-content {
        padding-right: max(15px, calc(50vw - 555px));
    }

    .PicText--bleed.PicText--img-right .PicText-bleed-content {
        padding-left: max(15px, calc(50vw - 555px));
    }
}

/* Mobile: bleed collapses — image full-width, text padded normally */
@media (max-width: 991px) {
    .PicText--bleed .PicText-bleed-row {
        display: flex;
        flex-direction: column;
    }

    .PicText--bleed .PicText-bleed-img {
        margin-bottom: 2rem;
    }

    .PicText--bleed .PicText-bleed-img .PicText-media img {
        width: 100%;
        height: auto;
        display: block;
    }

    .PicText--bleed .PicText-bleed-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* split-yellowwhite left column heading */
.syw-l .syw-in h2 {
    color: #000;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
}

/* split-yellowwhite list (right column) */
.syw-list-label {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 10px;
    color: #000;
}

.syw-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.syw-list li {
    padding: 7px 0;
    border-bottom: 1px dashed #000;
    font-size: 1rem;
    color: #000;
}

.syw-list li:first-child {
    border-top: 1px dashed #000;
}

.syw-cost-label {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #000;
    margin-top: 20px;
    margin-bottom: 8px;
}

.syw-cost-value {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: #0C233F;
    line-height: 1.2;
    margin: 0;
}

.syw-cost-value::before {
    content: '[ ';
    color: #fff;
    font-family: montserrat, sans-serif;
}

.syw-cost-value::after {
    content: ' ]';
    color: #fff;
    font-family: montserrat, sans-serif;
}

/* ============================================================
   FAProcess — Image left (screen edge), numbered steps right.
   Mobile: image stacks above content.
   ============================================================ */

.FAProcess {
    display: flex;
    align-items: stretch;
    min-height: 400px;
    padding: 100px 0 0
}

.FAProcess-photo {
    flex: 0 0 50%;
    overflow: hidden;
}

.FAProcess-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.FAProcess-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 15px 60px 48px;
}

/* Align right edge of content with Bootstrap container */
@media (min-width: 768px) {
    .FAProcess-content {
        padding-right: calc((100vw - 720px) / 2 + 15px);
    }
}

@media (min-width: 992px) {
    .FAProcess-content {
        padding-right: calc((100vw - 960px) / 2 + 15px);
    }
}

@media (min-width: 1200px) {
    .FAProcess-content {
        padding-right: calc((100vw - 1140px) / 2 + 15px);
    }
}

.FAProcess-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    margin-bottom: 32px;
}

.FAProcess-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.FAProcess-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 0;
}

.FAProcess-numwrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-left: 20px;
}

/* Bracket decoration — mirrors .FABanner-bracket */
.FAProcess-bracket {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #FFC62F;
}

.FAProcess-bracket::before,
.FAProcess-bracket::after {
    content: '';
    position: absolute;
    left: 0;
    width: 12px;
    height: 4px;
    background: #FFC62F;
}

.FAProcess-bracket::before { top: 0; }
.FAProcess-bracket::after  { bottom: 0; }

.FAProcess-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.FAProcess-num--navy {
    background: #0C233F;
    color: #fff;
}

.FAProcess-num--gold {
    background: #FFC62F;
    color: #0C233F;
}

.FAProcess-num--blue {
    background: #0070B9;
    color: #fff;
}

.FAProcess-intro {
    font-size: 1rem;
    color: #10233D;
    line-height: 1.6;
    margin-bottom: 28px;
}

.FAProcess-intro p {
    margin: 0 0 12px;
}

.FAProcess-intro p:last-child {
    margin-bottom: 0;
}

.FAProcess-step-body {
    flex: 1;
}

.FAProcess-text {
    font-family: montserrat-bold, sans-serif;
    font-size: 1rem;
    color: #10233D;
    line-height: 1.5;
    margin: 0;
}

.FAProcess-detail {
    font-size: 0.95rem;
    color: #10233D;
    line-height: 1.6;
    margin-top: 6px;
}

.FAProcess-detail p {
    margin: 0 0 8px;
}

.FAProcess-detail p:last-child {
    margin-bottom: 0;
}

.FAProcess-content .PicText-btn {
    align-self: flex-start;
}

/* Media wrapper — fills photo column height, anchors deco element */
.FAProcess-photo .FAProcess-media {
    position: relative;
    height: 100%;
}

.FAProcess-photo .FAProcess-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ----- Image-right variant (non-bleed) ----- */
.FAProcess--img-right .FAProcess-photo {
    order: 2;
}

.FAProcess--img-right .FAProcess-content {
    padding-left: 15px;
    padding-right: 48px;
}

@media (min-width: 768px) {
    .FAProcess--img-right .FAProcess-content {
        padding-left: calc((100vw - 720px) / 2 + 15px);
        padding-right: 3rem;
    }
}

@media (min-width: 992px) {
    .FAProcess--img-right .FAProcess-content {
        padding-left: calc((100vw - 960px) / 2 + 15px);
    }
}

@media (min-width: 1200px) {
    .FAProcess--img-right .FAProcess-content {
        padding-left: calc((100vw - 1140px) / 2 + 15px);
    }
}

/* ----- Bleed variant -----
   Image spans flush to the page edge; text aligns with container.
   Mirrors PicText--bleed logic.
   ---------------------------------------------------------------- */

/* Override inherited flex from .FAProcess so bleed-row takes full width */
.FAProcess--bleed {
    display: block;
}

@media (min-width: 992px) {
    .FAProcess--bleed .FAProcess-bleed-row {
        display: flex;
        align-items: stretch;
    }

    .FAProcess--bleed .FAProcess-bleed-img {
        flex: 0 0 50%;
        overflow: hidden;
    }

    .FAProcess--bleed .FAProcess-bleed-img .FAProcess-media {
        position: relative;
        height: 100%;
    }

    .FAProcess--bleed .FAProcess-bleed-img .FAProcess-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .FAProcess--bleed .FAProcess-bleed-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 60px;
        padding-bottom: 60px;
        padding-left: 48px;
    }

    .FAProcess--bleed.FAProcess--img-right .FAProcess-bleed-row {
        flex-direction: row-reverse;
    }

    .FAProcess--bleed.FAProcess--img-right .FAProcess-bleed-content {
        padding-left: 0;
        padding-right: 48px;
    }
}

/* lg (992–1199px): align right edge of content with BS4 container */
@media (min-width: 992px) and (max-width: 1199px) {
    .FAProcess--bleed .FAProcess-bleed-content {
        padding-right: max(15px, calc(50vw - 465px));
    }

    .FAProcess--bleed.FAProcess--img-right .FAProcess-bleed-content {
        padding-left: max(15px, calc(50vw - 465px));
    }
}

/* xl+ */
@media (min-width: 1200px) {
    .FAProcess--bleed .FAProcess-bleed-content {
        padding-right: max(15px, calc(50vw - 555px));
    }

    .FAProcess--bleed.FAProcess--img-right .FAProcess-bleed-content {
        padding-left: max(15px, calc(50vw - 555px));
    }
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
    .FAProcess {
        flex-direction: column;
    }

    .FAProcess-photo {
        flex: none;
        min-height: 240px;
    }

    .FAProcess-photo .FAProcess-media {
        height: 100%;
    }

    .FAProcess-content {
        padding: 40px 15px;
    }

    .FAProcess-content .PicText-btn {
        width: auto;
        justify-content: flex-start;
    }
}

@media (max-width: 991px) {
    .FAProcess--bleed .FAProcess-bleed-row {
        display: flex;
        flex-direction: column;
    }

    .FAProcess--bleed .FAProcess-bleed-img {
        margin-bottom: 2rem;
        min-height: 240px;
    }

    .FAProcess--bleed .FAProcess-bleed-img .FAProcess-media img {
        width: 100%;
        height: auto;
        display: block;
    }

    .FAProcess--bleed .FAProcess-bleed-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ============================================================
   LAB — List And Boxes: two-col text/list top, 2×2 link boxes below.
   Reuses .syw-list / .syw-list-label for the list column.
   Box corner animation mirrors .schoolBox / .schoolBoxY pattern.
   ============================================================ */

.LAB {
    padding: 100px 0 0;
}

.LAB-top {
    margin-bottom: 48px;
}

.LAB-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    margin-bottom: 16px;
}

.LAB-body {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #000;
    line-height: 1.6;
    margin-bottom: 28px;
}

.LAB-boxes {
    margin-left: -10px;
    margin-right: -10px;
}

.LAB-box-col {
    padding: 0 10px;
    margin-bottom: 20px;
}

.LAB-box {
    display: flex;
    align-items: center;
    background: #0C233F;
    color: #fff;
    padding: 24px 28px;
    min-height: 110px;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
}

.LAB-box-text {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0;
    position: relative;
    z-index: 2;
    transition: color ease 0.5s;
}

.LAB-box:hover .LAB-box-text {
    color: #0C233F;
}

.LAB-box-arrow {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 1.1rem;
    line-height: 1;
    z-index: 2;
    transition: color ease 0.5s;
}

.LAB-box:hover .LAB-box-arrow {
    color: #0C233F;
}

.LAB-box-corner {
    position: absolute;
    bottom: 0;
    right: 0;
    border-right: 25px solid #FFC62F;
    border-bottom: 25px solid #FFC62F;
    border-left: 25px solid transparent;
    border-top: 25px solid transparent;
    transition: all ease 0.5s;
}

.LAB-box:hover .LAB-box-corner {
    border-width: 300px;
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
    .LAB {
        padding: 40px 0;
    }

    .LAB-top {
        margin-bottom: 32px;
    }
}

/* ============================================================
   CMUTabs — What Makes Up the Cost of Attendance tabs.
   Horizontal gold tab nav (top), white active tab with bracket
   decorations, panel with two-column cost breakdown.
   Mobile: accordion.
   ============================================================ */

.CMUTabs {
    padding: 100px 0 0;
}

.CMUTabs-intro {
    text-align: center;
    margin-bottom: 48px;
}

.CMUTabs-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 12px;
}

.CMUTabs-subtitle {
    font-family: montserrat, sans-serif;
    font-size: 1rem;
    color: #000;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* ----- Hidden Perch data source ----- */
.CMUTabs-src {
    display: none;
}

/* ----- Tab nav ----- */
.CMUTabs-nav {
    display: flex;
    background: #FFC62F;
    padding: 15px 15px 0;
}

.CMUTabs-tab {
    flex: 1;
    padding: 20px 16px;
    background: #FFC62F;
    border: none;
    text-align: center;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #0C233F;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
}


.CMUTabs-tab:hover:not(.is-active) {
    background: #e6b000;
}

.CMUTabs-tab.is-active {
    background: #fff;
}



/* ----- Panels ----- */

.CMUTabs-panel {
    display: none;
    padding: 48px 52px;
}

.CMUTabs-panel.is-active {
    display: block;
}

/* Column headers */
.CMUTabs-col-headers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.CMUTabs-col-label {
    font-family: montserrat-bold, sans-serif;
    font-size: 1rem;
    color: #000;
}

.CMUTabs-col-label::before {
    content: '[ ';
    color: #FFC62F;
    font-family: montserrat, sans-serif;
}

.CMUTabs-col-label::after {
    content: ' ]';
    color: #FFC62F;
    font-family: montserrat, sans-serif;
}

/* Line items */
.CMUTabs-items {
    margin-bottom: 24px;
}

.CMUTabs-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px dashed #ccc;
}


.CMUTabs-item-label {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #000;
}

.CMUTabs-item-cost {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    color: #0070B9;
    flex-shrink: 0;
}

/* Estimated Total row */
.CMUTabs-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
}

.CMUTabs-total-label {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    color: #000;
}

.CMUTabs-total-cost {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 2rem;
    color: #0070B9;
}

.CMUTabs-total-cost::before {
    content: '[ ';
    color: #FFC62F;
    font-family: montserrat, sans-serif;
}

.CMUTabs-total-cost::after {
    content: ' ]';
    color: #FFC62F;
    font-family: montserrat, sans-serif;
}

/* ----- Mobile accordion ----- */
.CMUTabs-accordion {
    border: 2px solid #FFC62F;
}

.CMUTabs-acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 20px;
    background: #FFC62F;
    border: none;
    border-top: 1px solid rgba(12, 35, 63, 0.2);
    text-align: left;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #0C233F;
    cursor: pointer;
    transition: background 0.2s;
}

.CMUTabs-acc-btn:first-child {
    border-top: none;
}

.CMUTabs-acc-btn.is-active {
    background: #0C233F;
    color: #fff;
}

.CMUTabs-acc-btn .fa-chevron-down {
    transition: transform 0.25s;
    flex-shrink: 0;
}

.CMUTabs-acc-btn.is-active .fa-chevron-down {
    transform: rotate(180deg);
}

.CMUTabs-acc-panel {
    display: none;
    padding: 28px 20px;
    border-top: 1px solid #FFC62F;
}

.CMUTabs-acc-panel.is-active {
    display: block;
}

/* ----- Mobile overrides ----- */
@media (max-width: 767px) {
    .CMUTabs {
        padding: 48px 0;
    }

    .CMUTabs-col-headers {
        display: none;
    }

    .CMUTabs-item-cost {
        font-size: 1.2rem;
    }

    .CMUTabs-total-cost {
        font-size: 1.5rem;
    }

    .CMUTabs-panel {
        padding: 28px 20px;
    }
}

/* ============================================================
   PTag — Price Tag section.
   SVG badge overlaps top-left of the navy/white two-column box.
   ============================================================ */

.PTag {
    padding: 80px 0 0;
}

.PTag-wrap {
    position: relative;
    padding-top: 90px;
}

.PTag-badge {
    position: absolute;
    top: 0;
    left: -10px;
    width: 280px;
    z-index: 2;
    pointer-events: none;
}

.PTag-badge svg {
    width: 100%;
    height: auto;
    display: block;
}

.PTag-badge-price {
    position: absolute;
    left: 18%;
    top: 36%;
    transform: translateY(-60%);
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 2rem;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    transform: rotate(-8deg);
}

.PTag-box {
    display: flex;
    align-items: stretch;
}

.PTag-left {
    flex: 0 0 45%;
    background: #0C233F;
    padding: 120px 40px 48px;
}

.PTag-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    margin-bottom: 8px;
}

.PTag-subtitle {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #FFC62F;
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.PTag-body {
    font-family: montserrat, sans-serif;
    font-size: 1rem;
    color: #fff;
    line-height: 1.65;
    margin: 0;
}

.PTag-right {
    flex: 1;
    background: #fff;
    border: 2px solid #0C233F;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.PTag-items {
    margin-bottom: 24px;
}

.PTag-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px dashed #ccc;
}


.PTag-item-label {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #000;
}

.PTag-item-cost {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    color: #0070B9;
    flex-shrink: 0;
}

.PTag-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.PTag-total-label {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    color: #000;
}

.PTag-total-cost {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 2rem;
    color: #0070B9;
}

.PTag-total-cost::before {
    content: '[ ';
    color: #FFC62F;
    font-family: montserrat, sans-serif;
}

.PTag-total-cost::after {
    content: ' ]';
    color: #FFC62F;
    font-family: montserrat, sans-serif;
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
    .PTag {
        padding: 40px 0;
    }

    .PTag-wrap {
        padding-top: 60px;
    }

    .PTag-badge {
        width: 200px;
    }

    .PTag-badge-price {
        font-size: 1.4rem;
    }

    .PTag-box {
        flex-direction: column;
    }

    .PTag-left {
        flex: none;
        padding: 100px 24px 32px;
    }

    .PTag-right {
        padding: 28px 24px;
    }

    .PTag-item-cost {
        font-size: 1.2rem;
    }

    .PTag-total-cost {
        font-size: 1.5rem;
    }
}

/* ============================================================
   CBT — Center Bracket Text: centered heading inside yellow bracket
   rectangle, followed by a row of navy link boxes.
   ============================================================ */

.CBT {
    padding: 80px 0 0;
    text-align: center;
}

.CBT-bracket-wrap {
    position: relative;
    display: inline-block;
    padding: 40px 80px;
    margin-bottom: 56px;
}

/* Top bracket: horizontal bar + short vertical stubs on each end, facing down */
.CBT-bracket-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 28px;
    border-top: 14px solid rgba(255, 198, 47, 0.25);
    border-left: 14px solid rgba(255, 198, 47, 0.25);
    border-right: 14px solid rgba(255, 198, 47, 0.25);
    pointer-events: none;
}

/* Bottom bracket: horizontal bar + short vertical stubs on each end, facing up */
.CBT-bracket-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 28px;
    border-bottom: 14px solid rgba(255, 198, 47, 0.25);
    border-left: 14px solid rgba(255, 198, 47, 0.25);
    border-right: 14px solid rgba(255, 198, 47, 0.25);
    pointer-events: none;
}

.CBT-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    line-height: 1.3;
    margin: 0;
}

.CBT-heading p {
    margin: 0;
}

/* ----- Link boxes (3-up row) ----- */
.CBT-link-col {
    margin-bottom: 20px;
}

.CBT-link-box {
    display: flex;
    align-items: center;
    background: #0C233F;
    color: #fff;
    padding: 18px 24px;
    min-height: 75px;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
}

.CBT-link-text {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1.05rem;
    margin: 0;
    position: relative;
    z-index: 2;
    transition: color ease 0.5s;
}

.CBT-link-box:hover .CBT-link-text {
    color: #0C233F;
}

.CBT-link-arrow {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 1.1rem;
    line-height: 1;
    z-index: 2;
    transition: color ease 0.5s;
}

.CBT-link-box:hover .CBT-link-arrow {
    color: #0C233F;
}

.CBT-link-corner {
    position: absolute;
    bottom: 0;
    right: 0;
    border-right: 25px solid #FFC62F;
    border-bottom: 25px solid #FFC62F;
    border-left: 25px solid transparent;
    border-top: 25px solid transparent;
    transition: all ease 0.5s;
}

.CBT-link-box:hover .CBT-link-corner {
    border-width: 300px;
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
    .CBT {
        padding: 48px 0 0;
    }

    .CBT-bracket-wrap {
        padding: 32px 36px;
        margin-bottom: 40px;
    }
}

/* ============================================================
   TBI — Text Blocks with Icons.
   2-col block grid + full-width navy result bar + optional CTA.
   ============================================================ */

.TBI {
    padding: 80px 0 0;
}

.TBI-section-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.2;
    margin-bottom: 40px;
}

/* ----- Block grid ----- */
.TBI-blocks {
    margin-bottom: 0;
}

.TBI-block-col {
    margin-bottom: 0;
    padding-top: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #e0e0e0;
}

/* Inner borders only — vertical divider between columns, no outer edges */
@media (min-width: 768px) {
    .TBI-block-col:nth-child(odd) {
        border-right: 1px solid #e0e0e0;
    }
    .TBI-block-col:nth-last-child(-n+2) {
        border-bottom: none;
    }
    /* Catch single-item last row */
    .TBI-block-col:last-child {
        border-bottom: none;
    }
}

.TBI-block {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.TBI-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #0C233F;
    display: flex;
    align-items: center;
    justify-content: center;
}

.TBI-icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.TBI-block-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: 1.7rem;
    line-height: 1.3;
    margin-bottom: 10px;
}

.TBI-block-body {
    font-family: montserrat, sans-serif;
    font-size: 0.95rem;
    color: #000;
    line-height: 1.65;
    margin: 0;
}

.TBI-block-body p {
    margin: 0;
}

/* ----- Result bar — background constrained to container width ----- */
.TBI-result {
    padding: 40px 0;
}

.TBI-result .container {
    background: #0C233F;
    padding-top: 40px;
    padding-bottom: 40px;
}

.TBI-result-row {
    display: flex;
    align-items: center;
    gap: 40px;
}

.TBI-result-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.TBI-result-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.TBI-result-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.TBI-result-eq {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #FFC62F;
    color: #0C233F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 3.5rem;
    flex-shrink: 0;
    line-height: 1;
}

.TBI-result-label {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    color: #fff;
    margin: 0;
    white-space: nowrap;
}

.TBI-result-right {
    flex: 1;
}

.TBI-result-body {
    font-family: montserrat, sans-serif;
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.65;
}

.TBI-result-body p {
    margin: 0;
}

/* ----- CTA ----- */
.TBI-cta {
    padding: 40px 0;
}

.TBI-cta .container {
    display: flex;
    justify-content: center;
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
    .TBI {
        padding: 48px 0 0;
    }

    .TBI-result-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .TBI-result-label {
        white-space: normal;
    }

    .TBI-cta .container {
        justify-content: flex-start;
    }
}

/* ============================================================
   BTB — Bracket and Text Boxes: centered heading + bracket label
   above a row of image/navy card boxes.
   ============================================================ */

.BTB {
    padding: 100px 0 0;
    text-align: center;
}

.BTB-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #000;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    line-height: 1.2;
    margin: 0 0 20px;
}

.BTB-intro {
    color: #000;
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    max-width: 560px;
    margin: 0 auto 0;
    line-height: 1.6;
}

.BTB-intro p {
    margin: 0;
}

/* Bracket decoration — left [ and right ] flanking the heading+intro */
.BTB-bracket-wrap {
    position: relative;
    display: inline-block;
    padding: 16px 40px;
    margin-bottom: 40px;
}

/* Left [ bracket */
.BTB-bracket-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30px;
    border-top: 12px solid #FFC62F;
    border-left: 12px solid #FFC62F;
    border-bottom: 12px solid #FFC62F;
    pointer-events: none;
}

/* Right ] bracket */
.BTB-bracket-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 30px;
    border-top: 12px solid #FFC62F;
    border-right: 12px solid #FFC62F;
    border-bottom: 12px solid #FFC62F;
    pointer-events: none;
}

/* ----- Cards ----- */
.BTB-card-col {
    margin-bottom: 30px;
}

.BTB-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #0C233F;
}

.BTB-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 20px 20px 0;
}

.BTB-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.BTB-card-body {
    color: #fff;
    padding: 28px 24px;
    flex: 1;
    text-align: left;
    text-align: center;
}

.BTB-card-title {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.3;
}

.BTB-card-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.6;
}

.BTB-card-text p {
    margin: 0;
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
    .BTB {
        padding: 48px 0 40px;
    }

    .BTB-bracket-wrap {
        padding: 20px 36px;
        margin-bottom: 32px;
    }
}

/* ============================================================
   SchTabs — Scholarship Opportunities tabs.
   Horizontal gold tab nav (top), white active tab,
   panel with 2-column grid of navy link buttons.
   Mobile: accordion.
   ============================================================ */

.SchTabs {
    padding: 80px 0 80px;
}

.SchTabs-intro {
    text-align: center;
    margin-bottom: 48px;
}

.SchTabs-heading {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    color: #0C233F;
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 12px;
}

.SchTabs-subtitle {
    font-family: montserrat, sans-serif;
    font-size: 1rem;
    color: #000;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* ----- Hidden Perch data source ----- */
.SchTabs-src {
    display: none;
}

/* ----- Tab nav ----- */
.SchTabs-nav {
    display: flex;
    background: #FFC62F;
    padding: 15px 15px 0;
}

.SchTabs-tab {
    flex: 1;
    padding: 20px 16px;
    background: #FFC62F;
    border: none;
    text-align: center;
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #0C233F;
    cursor: pointer;
    transition: background 0.2s;
}

.SchTabs-tab:hover:not(.is-active) {
    background: #e6b000;
}

.SchTabs-tab.is-active {
    background: #fff;
}

/* ----- Panels ----- */
.SchTabs-panels {
    border-top: none;
}

.SchTabs-panel {
    display: none;
    padding: 36px 0 0;
}

.SchTabs-panel.is-active {
    display: block;
}

/* ----- 2-column button grid ----- */
.SchTabs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.SchTabs-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #0C233F;
    padding: 20px 24px;
    text-decoration: none !important;
    transition: background 0.2s;
}

.SchTabs-btn:hover {
    background: #1a3a5c;
    text-decoration: none !important;
}

.SchTabs-btn-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.SchTabs-btn-name {
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #fff;
    line-height: 1.3;
}

.SchTabs-btn-amount {
    font-family: montserrat, sans-serif;
    font-size: 0.95rem;
    color: #FFC62F;
}

.SchTabs-btn-arrow {
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ----- Accordion (mobile) ----- */
.SchTabs-accordion {
    border-top: 2px solid #FFC62F;
}

.SchTabs-acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 20px;
    background: #FFC62F;
    border: none;
    border-bottom: 2px solid rgba(12, 35, 63, 0.2);
    font-family: montserrat-bold, sans-serif;
    font-weight: bold;
    font-size: 1rem;
    color: #0C233F;
    cursor: pointer;
    text-align: left;
}

.SchTabs-acc-btn .fa-chevron-down {
    transition: transform 0.2s;
}

.SchTabs-acc-btn.is-active .fa-chevron-down {
    transform: rotate(180deg);
}

.SchTabs-acc-panel {
    display: none;
    padding: 24px 0;
}

.SchTabs-acc-panel.is-active {
    display: block;
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
    .SchTabs {
        padding: 48px 0 48px;
    }

    .SchTabs-grid {
        grid-template-columns: 1fr;
    }
}