/* ==========================================================================
   Bootstrap 5 Starter Theme — Custom Utility Classes
   Extends Bootstrap with: large spacing values, background-size, background-position
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom spacing scale (extends mt/mb/my, pt/pb/py only)
   Values: 64, 80, 96, 112 (px)
   -------------------------------------------------------------------------- */

:root {
    --space-64:  4rem;     /* 64px  */
    --space-80:  5rem;     /* 80px  */
    --space-96:  6rem;     /* 96px  */
    --space-112: 7rem;     /* 112px */

    /* Custom text-color palette (responsive utilities below) */
    --text-black:    #222222;
    --text-white:    #ffffff;
    --text-primary:  #2E6AEA;
    --text-charcoal: #777777;
}

/* Base (mobile-first) */
.mt-64  { margin-top: var(--space-64) !important; }
.mt-80  { margin-top: var(--space-80) !important; }
.mt-96  { margin-top: var(--space-96) !important; }
.mt-112 { margin-top: var(--space-112) !important; }

.mb-64  { margin-bottom: var(--space-64) !important; }
.mb-80  { margin-bottom: var(--space-80) !important; }
.mb-96  { margin-bottom: var(--space-96) !important; }
.mb-112 { margin-bottom: var(--space-112) !important; }

.my-64  { margin-top: var(--space-64) !important;  margin-bottom: var(--space-64) !important; }
.my-80  { margin-top: var(--space-80) !important;  margin-bottom: var(--space-80) !important; }
.my-96  { margin-top: var(--space-96) !important;  margin-bottom: var(--space-96) !important; }
.my-112 { margin-top: var(--space-112) !important; margin-bottom: var(--space-112) !important; }

.pt-64  { padding-top: var(--space-64) !important; }
.pt-80  { padding-top: var(--space-80) !important; }
.pt-96  { padding-top: var(--space-96) !important; }
.pt-112 { padding-top: var(--space-112) !important; }

.pb-64  { padding-bottom: var(--space-64) !important; }
.pb-80  { padding-bottom: var(--space-80) !important; }
.pb-96  { padding-bottom: var(--space-96) !important; }
.pb-112 { padding-bottom: var(--space-112) !important; }

.py-64  { padding-top: var(--space-64) !important;  padding-bottom: var(--space-64) !important; }
.py-80  { padding-top: var(--space-80) !important;  padding-bottom: var(--space-80) !important; }
.py-96  { padding-top: var(--space-96) !important;  padding-bottom: var(--space-96) !important; }
.py-112 { padding-top: var(--space-112) !important; padding-bottom: var(--space-112) !important; }

/* Breakpoint variants — matches Bootstrap 5 default breakpoints */
@media (min-width: 576px)  { /* sm */
    .mt-sm-64  { margin-top: var(--space-64) !important; }
    .mt-sm-80  { margin-top: var(--space-80) !important; }
    .mt-sm-96  { margin-top: var(--space-96) !important; }
    .mt-sm-112 { margin-top: var(--space-112) !important; }
    .mb-sm-64  { margin-bottom: var(--space-64) !important; }
    .mb-sm-80  { margin-bottom: var(--space-80) !important; }
    .mb-sm-96  { margin-bottom: var(--space-96) !important; }
    .mb-sm-112 { margin-bottom: var(--space-112) !important; }
    .my-sm-64  { margin-top: var(--space-64) !important;  margin-bottom: var(--space-64) !important; }
    .my-sm-80  { margin-top: var(--space-80) !important;  margin-bottom: var(--space-80) !important; }
    .my-sm-96  { margin-top: var(--space-96) !important;  margin-bottom: var(--space-96) !important; }
    .my-sm-112 { margin-top: var(--space-112) !important; margin-bottom: var(--space-112) !important; }
    .pt-sm-64  { padding-top: var(--space-64) !important; }
    .pt-sm-80  { padding-top: var(--space-80) !important; }
    .pt-sm-96  { padding-top: var(--space-96) !important; }
    .pt-sm-112 { padding-top: var(--space-112) !important; }
    .pb-sm-64  { padding-bottom: var(--space-64) !important; }
    .pb-sm-80  { padding-bottom: var(--space-80) !important; }
    .pb-sm-96  { padding-bottom: var(--space-96) !important; }
    .pb-sm-112 { padding-bottom: var(--space-112) !important; }
    .py-sm-64  { padding-top: var(--space-64) !important;  padding-bottom: var(--space-64) !important; }
    .py-sm-80  { padding-top: var(--space-80) !important;  padding-bottom: var(--space-80) !important; }
    .py-sm-96  { padding-top: var(--space-96) !important;  padding-bottom: var(--space-96) !important; }
    .py-sm-112 { padding-top: var(--space-112) !important; padding-bottom: var(--space-112) !important; }
}

@media (min-width: 768px)  { /* md */
    .mt-md-64  { margin-top: var(--space-64) !important; }
    .mt-md-80  { margin-top: var(--space-80) !important; }
    .mt-md-96  { margin-top: var(--space-96) !important; }
    .mt-md-112 { margin-top: var(--space-112) !important; }
    .mb-md-64  { margin-bottom: var(--space-64) !important; }
    .mb-md-80  { margin-bottom: var(--space-80) !important; }
    .mb-md-96  { margin-bottom: var(--space-96) !important; }
    .mb-md-112 { margin-bottom: var(--space-112) !important; }
    .my-md-64  { margin-top: var(--space-64) !important;  margin-bottom: var(--space-64) !important; }
    .my-md-80  { margin-top: var(--space-80) !important;  margin-bottom: var(--space-80) !important; }
    .my-md-96  { margin-top: var(--space-96) !important;  margin-bottom: var(--space-96) !important; }
    .my-md-112 { margin-top: var(--space-112) !important; margin-bottom: var(--space-112) !important; }
    .pt-md-64  { padding-top: var(--space-64) !important; }
    .pt-md-80  { padding-top: var(--space-80) !important; }
    .pt-md-96  { padding-top: var(--space-96) !important; }
    .pt-md-112 { padding-top: var(--space-112) !important; }
    .pb-md-64  { padding-bottom: var(--space-64) !important; }
    .pb-md-80  { padding-bottom: var(--space-80) !important; }
    .pb-md-96  { padding-bottom: var(--space-96) !important; }
    .pb-md-112 { padding-bottom: var(--space-112) !important; }
    .py-md-64  { padding-top: var(--space-64) !important;  padding-bottom: var(--space-64) !important; }
    .py-md-80  { padding-top: var(--space-80) !important;  padding-bottom: var(--space-80) !important; }
    .py-md-96  { padding-top: var(--space-96) !important;  padding-bottom: var(--space-96) !important; }
    .py-md-112 { padding-top: var(--space-112) !important; padding-bottom: var(--space-112) !important; }
}

@media (min-width: 992px)  { /* lg */
    .mt-lg-64  { margin-top: var(--space-64) !important; }
    .mt-lg-80  { margin-top: var(--space-80) !important; }
    .mt-lg-96  { margin-top: var(--space-96) !important; }
    .mt-lg-112 { margin-top: var(--space-112) !important; }
    .mb-lg-64  { margin-bottom: var(--space-64) !important; }
    .mb-lg-80  { margin-bottom: var(--space-80) !important; }
    .mb-lg-96  { margin-bottom: var(--space-96) !important; }
    .mb-lg-112 { margin-bottom: var(--space-112) !important; }
    .my-lg-64  { margin-top: var(--space-64) !important;  margin-bottom: var(--space-64) !important; }
    .my-lg-80  { margin-top: var(--space-80) !important;  margin-bottom: var(--space-80) !important; }
    .my-lg-96  { margin-top: var(--space-96) !important;  margin-bottom: var(--space-96) !important; }
    .my-lg-112 { margin-top: var(--space-112) !important; margin-bottom: var(--space-112) !important; }
    .pt-lg-64  { padding-top: var(--space-64) !important; }
    .pt-lg-80  { padding-top: var(--space-80) !important; }
    .pt-lg-96  { padding-top: var(--space-96) !important; }
    .pt-lg-112 { padding-top: var(--space-112) !important; }
    .pb-lg-64  { padding-bottom: var(--space-64) !important; }
    .pb-lg-80  { padding-bottom: var(--space-80) !important; }
    .pb-lg-96  { padding-bottom: var(--space-96) !important; }
    .pb-lg-112 { padding-bottom: var(--space-112) !important; }
    .py-lg-64  { padding-top: var(--space-64) !important;  padding-bottom: var(--space-64) !important; }
    .py-lg-80  { padding-top: var(--space-80) !important;  padding-bottom: var(--space-80) !important; }
    .py-lg-96  { padding-top: var(--space-96) !important;  padding-bottom: var(--space-96) !important; }
    .py-lg-112 { padding-top: var(--space-112) !important; padding-bottom: var(--space-112) !important; }
}

@media (min-width: 1200px) { /* xl */
    .mt-xl-64  { margin-top: var(--space-64) !important; }
    .mt-xl-80  { margin-top: var(--space-80) !important; }
    .mt-xl-96  { margin-top: var(--space-96) !important; }
    .mt-xl-112 { margin-top: var(--space-112) !important; }
    .mb-xl-64  { margin-bottom: var(--space-64) !important; }
    .mb-xl-80  { margin-bottom: var(--space-80) !important; }
    .mb-xl-96  { margin-bottom: var(--space-96) !important; }
    .mb-xl-112 { margin-bottom: var(--space-112) !important; }
    .my-xl-64  { margin-top: var(--space-64) !important;  margin-bottom: var(--space-64) !important; }
    .my-xl-80  { margin-top: var(--space-80) !important;  margin-bottom: var(--space-80) !important; }
    .my-xl-96  { margin-top: var(--space-96) !important;  margin-bottom: var(--space-96) !important; }
    .my-xl-112 { margin-top: var(--space-112) !important; margin-bottom: var(--space-112) !important; }
    .pt-xl-64  { padding-top: var(--space-64) !important; }
    .pt-xl-80  { padding-top: var(--space-80) !important; }
    .pt-xl-96  { padding-top: var(--space-96) !important; }
    .pt-xl-112 { padding-top: var(--space-112) !important; }
    .pb-xl-64  { padding-bottom: var(--space-64) !important; }
    .pb-xl-80  { padding-bottom: var(--space-80) !important; }
    .pb-xl-96  { padding-bottom: var(--space-96) !important; }
    .pb-xl-112 { padding-bottom: var(--space-112) !important; }
    .py-xl-64  { padding-top: var(--space-64) !important;  padding-bottom: var(--space-64) !important; }
    .py-xl-80  { padding-top: var(--space-80) !important;  padding-bottom: var(--space-80) !important; }
    .py-xl-96  { padding-top: var(--space-96) !important;  padding-bottom: var(--space-96) !important; }
    .py-xl-112 { padding-top: var(--space-112) !important; padding-bottom: var(--space-112) !important; }
}

@media (min-width: 1400px) { /* xxl */
    .mt-xxl-64  { margin-top: var(--space-64) !important; }
    .mt-xxl-80  { margin-top: var(--space-80) !important; }
    .mt-xxl-96  { margin-top: var(--space-96) !important; }
    .mt-xxl-112 { margin-top: var(--space-112) !important; }
    .mb-xxl-64  { margin-bottom: var(--space-64) !important; }
    .mb-xxl-80  { margin-bottom: var(--space-80) !important; }
    .mb-xxl-96  { margin-bottom: var(--space-96) !important; }
    .mb-xxl-112 { margin-bottom: var(--space-112) !important; }
    .my-xxl-64  { margin-top: var(--space-64) !important;  margin-bottom: var(--space-64) !important; }
    .my-xxl-80  { margin-top: var(--space-80) !important;  margin-bottom: var(--space-80) !important; }
    .my-xxl-96  { margin-top: var(--space-96) !important;  margin-bottom: var(--space-96) !important; }
    .my-xxl-112 { margin-top: var(--space-112) !important; margin-bottom: var(--space-112) !important; }
    .pt-xxl-64  { padding-top: var(--space-64) !important; }
    .pt-xxl-80  { padding-top: var(--space-80) !important; }
    .pt-xxl-96  { padding-top: var(--space-96) !important; }
    .pt-xxl-112 { padding-top: var(--space-112) !important; }
    .pb-xxl-64  { padding-bottom: var(--space-64) !important; }
    .pb-xxl-80  { padding-bottom: var(--space-80) !important; }
    .pb-xxl-96  { padding-bottom: var(--space-96) !important; }
    .pb-xxl-112 { padding-bottom: var(--space-112) !important; }
    .py-xxl-64  { padding-top: var(--space-64) !important;  padding-bottom: var(--space-64) !important; }
    .py-xxl-80  { padding-top: var(--space-80) !important;  padding-bottom: var(--space-80) !important; }
    .py-xxl-96  { padding-top: var(--space-96) !important;  padding-bottom: var(--space-96) !important; }
    .py-xxl-112 { padding-top: var(--space-112) !important; padding-bottom: var(--space-112) !important; }
}

/* --------------------------------------------------------------------------
   Background-size utilities (responsive)
   -------------------------------------------------------------------------- */

.bg-cover   { background-size: cover !important; }
.bg-contain { background-size: contain !important; }
.bg-auto    { background-size: auto !important; }

@media (min-width: 576px)  {
    .bg-sm-cover   { background-size: cover !important; }
    .bg-sm-contain { background-size: contain !important; }
    .bg-sm-auto    { background-size: auto !important; }
}
@media (min-width: 768px)  {
    .bg-md-cover   { background-size: cover !important; }
    .bg-md-contain { background-size: contain !important; }
    .bg-md-auto    { background-size: auto !important; }
}
@media (min-width: 992px)  {
    .bg-lg-cover   { background-size: cover !important; }
    .bg-lg-contain { background-size: contain !important; }
    .bg-lg-auto    { background-size: auto !important; }
}
@media (min-width: 1200px) {
    .bg-xl-cover   { background-size: cover !important; }
    .bg-xl-contain { background-size: contain !important; }
    .bg-xl-auto    { background-size: auto !important; }
}
@media (min-width: 1400px) {
    .bg-xxl-cover   { background-size: cover !important; }
    .bg-xxl-contain { background-size: contain !important; }
    .bg-xxl-auto    { background-size: auto !important; }
}

/* --------------------------------------------------------------------------
   Background-position utilities (responsive)
   -------------------------------------------------------------------------- */

.bg-pos-center       { background-position: center center !important; }
.bg-pos-top          { background-position: center top !important; }
.bg-pos-bottom       { background-position: center bottom !important; }
.bg-pos-left         { background-position: left center !important; }
.bg-pos-right        { background-position: right center !important; }
.bg-pos-top-left     { background-position: left top !important; }
.bg-pos-top-right    { background-position: right top !important; }
.bg-pos-bottom-left  { background-position: left bottom !important; }
.bg-pos-bottom-right { background-position: right bottom !important; }

@media (min-width: 576px) {
    .bg-pos-sm-center       { background-position: center center !important; }
    .bg-pos-sm-top          { background-position: center top !important; }
    .bg-pos-sm-bottom       { background-position: center bottom !important; }
    .bg-pos-sm-left         { background-position: left center !important; }
    .bg-pos-sm-right        { background-position: right center !important; }
    .bg-pos-sm-top-left     { background-position: left top !important; }
    .bg-pos-sm-top-right    { background-position: right top !important; }
    .bg-pos-sm-bottom-left  { background-position: left bottom !important; }
    .bg-pos-sm-bottom-right { background-position: right bottom !important; }
}
@media (min-width: 768px) {
    .bg-pos-md-center       { background-position: center center !important; }
    .bg-pos-md-top          { background-position: center top !important; }
    .bg-pos-md-bottom       { background-position: center bottom !important; }
    .bg-pos-md-left         { background-position: left center !important; }
    .bg-pos-md-right        { background-position: right center !important; }
    .bg-pos-md-top-left     { background-position: left top !important; }
    .bg-pos-md-top-right    { background-position: right top !important; }
    .bg-pos-md-bottom-left  { background-position: left bottom !important; }
    .bg-pos-md-bottom-right { background-position: right bottom !important; }
}
@media (min-width: 992px) {
    .bg-pos-lg-center       { background-position: center center !important; }
    .bg-pos-lg-top          { background-position: center top !important; }
    .bg-pos-lg-bottom       { background-position: center bottom !important; }
    .bg-pos-lg-left         { background-position: left center !important; }
    .bg-pos-lg-right        { background-position: right center !important; }
    .bg-pos-lg-top-left     { background-position: left top !important; }
    .bg-pos-lg-top-right    { background-position: right top !important; }
    .bg-pos-lg-bottom-left  { background-position: left bottom !important; }
    .bg-pos-lg-bottom-right { background-position: right bottom !important; }
}
@media (min-width: 1200px) {
    .bg-pos-xl-center       { background-position: center center !important; }
    .bg-pos-xl-top          { background-position: center top !important; }
    .bg-pos-xl-bottom       { background-position: center bottom !important; }
    .bg-pos-xl-left         { background-position: left center !important; }
    .bg-pos-xl-right        { background-position: right center !important; }
    .bg-pos-xl-top-left     { background-position: left top !important; }
    .bg-pos-xl-top-right    { background-position: right top !important; }
    .bg-pos-xl-bottom-left  { background-position: left bottom !important; }
    .bg-pos-xl-bottom-right { background-position: right bottom !important; }
}
@media (min-width: 1400px) {
    .bg-pos-xxl-center       { background-position: center center !important; }
    .bg-pos-xxl-top          { background-position: center top !important; }
    .bg-pos-xxl-bottom       { background-position: center bottom !important; }
    .bg-pos-xxl-left         { background-position: left center !important; }
    .bg-pos-xxl-right        { background-position: right center !important; }
    .bg-pos-xxl-top-left     { background-position: left top !important; }
    .bg-pos-xxl-top-right    { background-position: right top !important; }
    .bg-pos-xxl-bottom-left  { background-position: left bottom !important; }
    .bg-pos-xxl-bottom-right { background-position: right bottom !important; }
}

/* --------------------------------------------------------------------------
   Inline-image variant: when bg-pos-* classes are placed on a
   .module-container that is in inline image mode, translate them into
   object-position on the inner <picture> <img>. The img also gets
   object-fit:cover so the position has visible effect once a height
   (or aspect-ratio) is applied to the image.
   -------------------------------------------------------------------------- */

.module-container > .module-container__bg-img > img {
    object-fit: cover;
}

.module-container.bg-pos-center       > .module-container__bg-img > img { object-position: center center !important; }
.module-container.bg-pos-top          > .module-container__bg-img > img { object-position: center top !important; }
.module-container.bg-pos-bottom       > .module-container__bg-img > img { object-position: center bottom !important; }
.module-container.bg-pos-left         > .module-container__bg-img > img { object-position: left center !important; }
.module-container.bg-pos-right        > .module-container__bg-img > img { object-position: right center !important; }
.module-container.bg-pos-top-left     > .module-container__bg-img > img { object-position: left top !important; }
.module-container.bg-pos-top-right    > .module-container__bg-img > img { object-position: right top !important; }
.module-container.bg-pos-bottom-left  > .module-container__bg-img > img { object-position: left bottom !important; }
.module-container.bg-pos-bottom-right > .module-container__bg-img > img { object-position: right bottom !important; }

@media (min-width: 576px) {
    .module-container.bg-pos-sm-center       > .module-container__bg-img > img { object-position: center center !important; }
    .module-container.bg-pos-sm-top          > .module-container__bg-img > img { object-position: center top !important; }
    .module-container.bg-pos-sm-bottom       > .module-container__bg-img > img { object-position: center bottom !important; }
    .module-container.bg-pos-sm-left         > .module-container__bg-img > img { object-position: left center !important; }
    .module-container.bg-pos-sm-right        > .module-container__bg-img > img { object-position: right center !important; }
    .module-container.bg-pos-sm-top-left     > .module-container__bg-img > img { object-position: left top !important; }
    .module-container.bg-pos-sm-top-right    > .module-container__bg-img > img { object-position: right top !important; }
    .module-container.bg-pos-sm-bottom-left  > .module-container__bg-img > img { object-position: left bottom !important; }
    .module-container.bg-pos-sm-bottom-right > .module-container__bg-img > img { object-position: right bottom !important; }
}
@media (min-width: 768px) {
    .module-container.bg-pos-md-center       > .module-container__bg-img > img { object-position: center center !important; }
    .module-container.bg-pos-md-top          > .module-container__bg-img > img { object-position: center top !important; }
    .module-container.bg-pos-md-bottom       > .module-container__bg-img > img { object-position: center bottom !important; }
    .module-container.bg-pos-md-left         > .module-container__bg-img > img { object-position: left center !important; }
    .module-container.bg-pos-md-right        > .module-container__bg-img > img { object-position: right center !important; }
    .module-container.bg-pos-md-top-left     > .module-container__bg-img > img { object-position: left top !important; }
    .module-container.bg-pos-md-top-right    > .module-container__bg-img > img { object-position: right top !important; }
    .module-container.bg-pos-md-bottom-left  > .module-container__bg-img > img { object-position: left bottom !important; }
    .module-container.bg-pos-md-bottom-right > .module-container__bg-img > img { object-position: right bottom !important; }
}
@media (min-width: 992px) {
    .module-container.bg-pos-lg-center       > .module-container__bg-img > img { object-position: center center !important; }
    .module-container.bg-pos-lg-top          > .module-container__bg-img > img { object-position: center top !important; }
    .module-container.bg-pos-lg-bottom       > .module-container__bg-img > img { object-position: center bottom !important; }
    .module-container.bg-pos-lg-left         > .module-container__bg-img > img { object-position: left center !important; }
    .module-container.bg-pos-lg-right        > .module-container__bg-img > img { object-position: right center !important; }
    .module-container.bg-pos-lg-top-left     > .module-container__bg-img > img { object-position: left top !important; }
    .module-container.bg-pos-lg-top-right    > .module-container__bg-img > img { object-position: right top !important; }
    .module-container.bg-pos-lg-bottom-left  > .module-container__bg-img > img { object-position: left bottom !important; }
    .module-container.bg-pos-lg-bottom-right > .module-container__bg-img > img { object-position: right bottom !important; }
}
@media (min-width: 1200px) {
    .module-container.bg-pos-xl-center       > .module-container__bg-img > img { object-position: center center !important; }
    .module-container.bg-pos-xl-top          > .module-container__bg-img > img { object-position: center top !important; }
    .module-container.bg-pos-xl-bottom       > .module-container__bg-img > img { object-position: center bottom !important; }
    .module-container.bg-pos-xl-left         > .module-container__bg-img > img { object-position: left center !important; }
    .module-container.bg-pos-xl-right        > .module-container__bg-img > img { object-position: right center !important; }
    .module-container.bg-pos-xl-top-left     > .module-container__bg-img > img { object-position: left top !important; }
    .module-container.bg-pos-xl-top-right    > .module-container__bg-img > img { object-position: right top !important; }
    .module-container.bg-pos-xl-bottom-left  > .module-container__bg-img > img { object-position: left bottom !important; }
    .module-container.bg-pos-xl-bottom-right > .module-container__bg-img > img { object-position: right bottom !important; }
}
@media (min-width: 1400px) {
    .module-container.bg-pos-xxl-center       > .module-container__bg-img > img { object-position: center center !important; }
    .module-container.bg-pos-xxl-top          > .module-container__bg-img > img { object-position: center top !important; }
    .module-container.bg-pos-xxl-bottom       > .module-container__bg-img > img { object-position: center bottom !important; }
    .module-container.bg-pos-xxl-left         > .module-container__bg-img > img { object-position: left center !important; }
    .module-container.bg-pos-xxl-right        > .module-container__bg-img > img { object-position: right center !important; }
    .module-container.bg-pos-xxl-top-left     > .module-container__bg-img > img { object-position: left top !important; }
    .module-container.bg-pos-xxl-top-right    > .module-container__bg-img > img { object-position: right top !important; }
    .module-container.bg-pos-xxl-bottom-left  > .module-container__bg-img > img { object-position: left bottom !important; }
    .module-container.bg-pos-xxl-bottom-right > .module-container__bg-img > img { object-position: right bottom !important; }
}

/* Common defaults applied to any element with a background-image */
[style*="background-image"] {
    background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Custom text-color utilities (responsive)
   Values: black (#222), white, primary (#2E6AEA), charcoal (#777)
   -------------------------------------------------------------------------- */

.text-black    { color: var(--text-black) !important; }
.text-white    { color: var(--text-white) !important; }
.text-primary  { color: var(--text-primary) !important; }
.text-charcoal { color: var(--text-charcoal) !important; }

@media (min-width: 576px) {
    .text-sm-black    { color: var(--text-black) !important; }
    .text-sm-white    { color: var(--text-white) !important; }
    .text-sm-primary  { color: var(--text-primary) !important; }
    .text-sm-charcoal { color: var(--text-charcoal) !important; }
}
@media (min-width: 768px) {
    .text-md-black    { color: var(--text-black) !important; }
    .text-md-white    { color: var(--text-white) !important; }
    .text-md-primary  { color: var(--text-primary) !important; }
    .text-md-charcoal { color: var(--text-charcoal) !important; }
}
@media (min-width: 992px) {
    .text-lg-black    { color: var(--text-black) !important; }
    .text-lg-white    { color: var(--text-white) !important; }
    .text-lg-primary  { color: var(--text-primary) !important; }
    .text-lg-charcoal { color: var(--text-charcoal) !important; }
}
@media (min-width: 1200px) {
    .text-xl-black    { color: var(--text-black) !important; }
    .text-xl-white    { color: var(--text-white) !important; }
    .text-xl-primary  { color: var(--text-primary) !important; }
    .text-xl-charcoal { color: var(--text-charcoal) !important; }
}
@media (min-width: 1400px) {
    .text-xxl-black    { color: var(--text-black) !important; }
    .text-xxl-white    { color: var(--text-white) !important; }
    .text-xxl-primary  { color: var(--text-primary) !important; }
    .text-xxl-charcoal { color: var(--text-charcoal) !important; }
}

/* --------------------------------------------------------------------------
   Typography
   - Body default: Geist, #777
   - H1/H2/H3 map to the first three Bricolage styles
   - Text-style classes: <font>-<mobile>[-<desktop>][-<weight>]
   -------------------------------------------------------------------------- */

:root {
    --font-bricolage: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-geist:     "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
    font-family: var(--font-geist);
    color: #777777;
}

/* Headings inherit Bricolage Bold via the text-style classes */
h1, .h1 {
    font-family: var(--font-bricolage);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.1;
}
h2, .h2 {
    font-family: var(--font-bricolage);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.15;
}
h3, .h3 {
    font-family: var(--font-bricolage);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
}

@media (min-width: 992px) {
    h1, .h1 { font-size: 48px; }
    h2, .h2 { font-size: 40px; }
    h3, .h3 { font-size: 32px; }
}

/* -- Bricolage text-style classes -- */
.bricolage-32-48-bold,
.bricolage-30-40-bold,
.bricolage-28-32-bold,
.bricolage-24-bold,
.bricolage-18-semibold,
.bricolage-16-semibold {
    font-family: var(--font-bricolage);
}

.bricolage-32-48-bold  { font-size: 32px; font-weight: 700; line-height: 1.1; }
.bricolage-30-40-bold  { font-size: 30px; font-weight: 700; line-height: 1.15; }
.bricolage-28-32-bold  { font-size: 28px; font-weight: 700; line-height: 1.2; }
.bricolage-24-bold     { font-size: 24px; font-weight: 700; line-height: 1.25; }
.bricolage-18-semibold { font-size: 18px; font-weight: 600; line-height: 1.4; }
.bricolage-16-semibold { font-size: 16px; font-weight: 600; line-height: 1.4; }

@media (min-width: 992px) {
    .bricolage-32-48-bold { font-size: 48px; }
    .bricolage-30-40-bold { font-size: 40px; }
    .bricolage-28-32-bold { font-size: 32px; }
}

/* -- Geist text-style classes (single size, mobile = desktop) -- */
.geist-18,
.geist-16,
.geist-14,
.geist-12 {
    font-family: var(--font-geist);
}

.geist-18 { font-size: 18px; line-height: 1.5; }
.geist-16 { font-size: 16px; line-height: 1.5; }
.geist-14 { font-size: 14px; line-height: 1.5; }
.geist-12 { font-size: 12px; line-height: 1.5; }