.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1120px;
}
body {font-family: 'Open Sans';}body {line-height: 1.6;font-size: 16px;font-weight: 400;color: #333333;}.oxy-nav-menu-hamburger-line {background-color: #333333;}h1, h2, h3, h4, h5, h6 {font-family: 'Poppins';line-height: 1.2;color: #313e5e;}h2, h3, h4, h5, h6{line-height: 1.2;color: #313e5e;}h3, h4, h5, h6{line-height: 1.3;color: #313e5e;}h4, h5, h6{line-height: 1.4;color: #313e5e;}h6{font-size: 16px;}a {color: #f6b22e;text-decoration: none;}a:hover {color: #313e5e;text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
}.ct-new-columns > .ct-div-block {
}.oxy-header-container {
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
/* Primary CTA Button — Gold background */
.mbc-btn-primary {
  background-color: #f6b22e;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mbc-btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* Secondary Button — Navy background */
.mbc-btn-secondary {
  background-color: #313e5e;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mbc-btn-secondary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* Outline Button — Transparent with white border (for dark backgrounds) */
.mbc-btn-outline-white {
  background-color: transparent;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 24px;
  border: 2px solid #ffffff;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.mbc-btn-outline-white:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Outline Button — Gold border (for light backgrounds) */
.mbc-btn-outline-gold {
  background-color: transparent;
  color: #f6b22e;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 24px;
  border: 2px solid #f6b22e;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mbc-btn-outline-gold:hover {
  background-color: #f6b22e;
  color: #ffffff;
}/* ============================================
   GLOBAL FIXED BACKGROUND TEXTURE
   Creates the depth effect where page content
   glides over the background image.
   ============================================ */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('/wp-content/uploads/2026/04/about-page-bg.png') center/cover no-repeat;
  pointer-events: none;
}/* ============================================
   GLOBAL FIXED BACKGROUND TEXTURE
   Creates the depth effect where page content
   glides over the background image.
   ============================================ */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('/wp-content/uploads/2026/04/about-page-bg.png') center/cover no-repeat;
  pointer-events: none;
}


/* ============================================
   DESIGN TOKENS
   All values defined once here. Reference with
   var(--token-name) throughout section files.
   ============================================ */
:root {

  /* --- Colors --- */
  --mbc-navy:          #313e5e;
  --mbc-navy-dark:     #252f4a;
  --mbc-gold:          #f6b22e;
  --mbc-gold-hover:    #dfa029;
  --mbc-gold-light:    #FFD45A;
  --mbc-cream:         #f5f3ee;
  --mbc-cream-alt:     #e8dfcb;
  --mbc-white:         #ffffff;
  --mbc-text-dark:     #333333;
  --mbc-text-medium:   #555555;
  --mbc-text-light:    #777777;
  --mbc-text-muted:    #888888;
  --mbc-border-light:  rgba(49, 62, 94, 0.1);
  --mbc-shadow-sm:     0 2px 16px rgba(0, 0, 0, 0.08);
  --mbc-shadow-md:     0 4px 20px rgba(0, 0, 0, 0.12);
  --mbc-error:         #c0392b;
  --mbc-success:       #3d6940;

  /* --- Typography --- */
  --mbc-font-primary:  'Poppins', sans-serif;
  --mbc-text-xs:       0.75rem;    /* 12px */
  --mbc-text-sm:       0.8125rem;  /* 13px */
  --mbc-text-base:     0.9375rem;  /* 15px */
  --mbc-text-md:       1rem;       /* 16px */
  --mbc-text-lg:       1.125rem;   /* 18px */
  --mbc-text-xl:       1.375rem;   /* 22px */
  --mbc-text-2xl:      1.75rem;    /* 28px */
  --mbc-text-3xl:      2rem;       /* 32px */
  --mbc-text-4xl:      3rem;       /* 48px */

  /* --- Spacing --- */
  --mbc-section-pad-y:    3.75rem;   /* 60px */
  --mbc-section-pad-y-lg: 5rem;      /* 80px */
  --mbc-section-pad-x:    1.25rem;   /* 20px */
  --mbc-gap-sm:           1rem;      /* 16px */
  --mbc-gap-md:           1.5rem;    /* 24px */
  --mbc-gap-lg:           2rem;      /* 32px */
  --mbc-gap-xl:           2.5rem;    /* 40px */
  --mbc-gap-2xl:          3rem;      /* 48px */
  --mbc-gap-section:      3.75rem;   /* 60px */

  /* --- Borders & Radii --- */
  --mbc-radius-sm:     0.25rem;   /* 4px */
  --mbc-radius-md:     0.375rem;  /* 6px */
  --mbc-radius-lg:     0.5rem;    /* 8px */
  --mbc-radius-xl:     0.75rem;   /* 12px */
  --mbc-radius-2xl:    1rem;      /* 16px */
  --mbc-radius-full:   50%;
  --mbc-avatar-border: 3px solid var(--mbc-gold);
}


/* ============================================
   BUTTONS
   Base shared by all variants via attribute
   selector. Variants set their own color pair.
   ============================================ */
[class*="mbc-btn-"] {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  font-family: var(--mbc-font-primary);
  font-size: var(--mbc-text-md);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--mbc-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  line-height: 1.4;
}
[class*="mbc-btn-"]:hover {
  transform: translateY(-1px);
}
[class*="mbc-btn-"]:focus-visible {
  outline: 3px solid var(--mbc-gold);
  outline-offset: 3px;
}

/* Gold — primary CTA (on light or dark backgrounds) */
.mbc-btn-gold {
  background: var(--mbc-gold);
  color: var(--mbc-navy);
  border-color: var(--mbc-gold);
}
.mbc-btn-gold:hover {
  background: var(--mbc-gold-hover);
  border-color: var(--mbc-gold-hover);
  color: var(--mbc-navy);
}

/* Navy — secondary CTA (on light backgrounds) */
.mbc-btn-navy {
  background: var(--mbc-navy);
  color: var(--mbc-white);
  border-color: var(--mbc-navy);
}
.mbc-btn-navy:hover {
  background: var(--mbc-navy-dark);
  border-color: var(--mbc-navy-dark);
  color: var(--mbc-white);
}

/* Outline Navy — tertiary action (on light backgrounds) */
.mbc-btn-outline-navy {
  background: transparent;
  color: var(--mbc-navy);
  border-color: var(--mbc-navy);
}
.mbc-btn-outline-navy:hover {
  background: var(--mbc-navy);
  color: var(--mbc-white);
}

/* Outline White — ghost button (on dark/image backgrounds) */
.mbc-btn-outline-white {
  background: transparent;
  color: var(--mbc-white);
  border-color: var(--mbc-white);
}
.mbc-btn-outline-white:hover {
  background: var(--mbc-white);
  color: var(--mbc-navy);
}

/* Outline Gold — accent action (on white/cream backgrounds) */
.mbc-btn-outline-gold {
  background: transparent;
  color: var(--mbc-gold);
  border-color: var(--mbc-gold);
}
.mbc-btn-outline-gold:hover {
  background: var(--mbc-gold);
  color: var(--mbc-navy);
}

/* Large modifier — for hero CTAs and primary conversion actions */
.mbc-btn-lg {
  padding: 1rem 3rem;
  font-size: var(--mbc-text-lg);
  font-weight: 600;
}


/* ============================================
   CONTAINERS
   Centered wrappers with standard horizontal
   padding. Content width varies by context.
   ============================================ */
.mbc-container,
.mbc-container-narrow,
.mbc-container-wide {
  width: 100%;
  margin: 0 auto;
  padding-left: var(--mbc-section-pad-x);
  padding-right: var(--mbc-section-pad-x);
}
.mbc-container        { max-width: 68.75rem; } /* 1100px */
.mbc-container-narrow { max-width: 50rem;    } /* 800px  */
.mbc-container-wide   { max-width: 71.25rem; } /* 1140px */


/* ============================================
   SECTION SURFACES
   Background + padding + font applied together.
   Section files set only their specific layout.
   ============================================ */
[class*="mbc-surface-"] {
  padding: var(--mbc-section-pad-y) var(--mbc-section-pad-x);
  font-family: var(--mbc-font-primary);
}
.mbc-surface-white       { background: var(--mbc-white); }
.mbc-surface-cream       { background: var(--mbc-cream); }
.mbc-surface-cream-alt   { background: var(--mbc-cream-alt); }
.mbc-surface-navy        { background: var(--mbc-navy); }
.mbc-surface-transparent { background: transparent; }


/* ============================================
   GLASS PANELS
   Semi-transparent frosted panels for content
   floating over the background texture.
   ============================================ */
.mbc-glass,
.mbc-glass-dense {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--mbc-radius-xl);
  box-shadow: var(--mbc-shadow-sm);
}
.mbc-glass       { background: rgba(255, 255, 255, 0.88); }
.mbc-glass-dense { background: rgba(255, 255, 255, 0.92); }

@supports not (backdrop-filter: blur(8px)) {
  .mbc-glass,
  .mbc-glass-dense {
    background: rgba(255, 255, 255, 0.95);
  }
}


/* ============================================
   LAYOUT PRIMITIVES
   Reusable grid/flex patterns for arranging
   content within sections.
   ============================================ */

/* Card grid — 3 columns default */
.mbc-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mbc-gap-md);
  max-width: 68.75rem;
  margin: 0 auto;
}
.mbc-card-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 992px) {
  .mbc-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mbc-card-grid,
  .mbc-card-grid--2col { grid-template-columns: 1fr; }
}

/* Two-column layout */
.mbc-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mbc-gap-xl);
  align-items: start;
  max-width: 68.75rem;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .mbc-two-col {
    grid-template-columns: 1fr;
    gap: var(--mbc-gap-md);
  }
}

/* Section header — centered heading + subtitle */
.mbc-section-header {
  text-align: center;
  max-width: 43.75rem; /* 700px */
  margin: 0 auto var(--mbc-gap-xl);
}
.mbc-section-header h2 {
  font-size: var(--mbc-text-3xl);
  font-weight: 700;
  color: var(--mbc-navy);
  margin: 0 0 0.5rem;
}
.mbc-section-header p {
  font-size: var(--mbc-text-md);
  font-weight: 400;
  color: var(--mbc-text-muted);
  margin: 0;
}


/* ============================================
   CIRCULAR AVATARS
   Consistent photo and placeholder treatment
   for instructor photos across all pages.
   ============================================ */
.mbc-avatar--sm,
.mbc-avatar--md,
.mbc-avatar--lg {
  border-radius: var(--mbc-radius-full);
  border: var(--mbc-avatar-border);
  object-fit: cover;
  display: block;
}
.mbc-avatar--sm { width: 8.75rem;  height: 8.75rem;  } /* 140px */
.mbc-avatar--md { width: 11.25rem; height: 11.25rem; } /* 180px */
.mbc-avatar--lg { width: 12.5rem;  height: 12.5rem;  } /* 200px */

.mbc-avatar-placeholder--sm,
.mbc-avatar-placeholder--md {
  border-radius: var(--mbc-radius-full);
  border: var(--mbc-avatar-border);
  background: var(--mbc-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mbc-font-primary);
  font-weight: 700;
  color: var(--mbc-gold);
}
.mbc-avatar-placeholder--sm { width: 8.75rem;  height: 8.75rem;  font-size: var(--mbc-text-xl); }
.mbc-avatar-placeholder--md { width: 11.25rem; height: 11.25rem; font-size: 3rem; }


/* ============================================
   ACCORDION CARDS
   Shared interactive pattern used on the
   Classes page (4-col) and Programs page (3-col).
   Triggered by mbcAccordionToggle() in JS tab.
   ============================================ */
.mbc-accordion {
  max-width: 60rem; /* 960px */
  margin: 0 auto;
  font-family: var(--mbc-font-primary);
}

/* Card grid — 3-col default, 4-col modifier */
.mbc-accordion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mbc-gap-md);
}
.mbc-accordion-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

/* Card trigger */
.mbc-accordion-card {
  background: var(--mbc-cream);
  border-radius: var(--mbc-radius-2xl);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform 0.2s ease, border-color 0.3s ease, box-shadow 0.2s ease;
  user-select: none;
}
.mbc-accordion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.mbc-accordion-card.active {
  border-color: var(--mbc-gold);
  background: var(--mbc-white);
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(246, 178, 46, 0.15);
}
.mbc-accordion-icon {
  font-size: 2.25rem;
  margin-bottom: 1rem;
  display: block;
}
.mbc-accordion-card h3 {
  font-size: var(--mbc-text-xl);
  font-weight: 700;
  color: var(--mbc-navy);
  margin: 0 0 0.25rem;
}
.mbc-accordion-tag {
  font-size: var(--mbc-text-sm);
  font-weight: 500;
  color: var(--mbc-gold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.75rem;
  display: block;
}
.mbc-accordion-card p {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--mbc-text-medium);
  line-height: 1.5;
  margin: 0 0 1rem;
}
.mbc-accordion-arrow {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--mbc-gold);
  transition: transform 0.3s ease;
}
.mbc-accordion-card.active .mbc-accordion-arrow {
  transform: rotate(180deg);
}

/* Expandable panel wrapper */
.mbc-accordion-panel-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  grid-column: 1 / -1;
}
.mbc-accordion-panel-wrap.open {
  max-height: 100rem; /* 1600px — tall enough for any panel */
}

/* Individual panel */
.mbc-accordion-panel {
  display: none;
  background: var(--mbc-white);
  border: 2px solid #f0ede6;
  border-radius: var(--mbc-radius-2xl);
  padding: 2.25rem 2rem;
  margin-top: 0.5rem;
}
.mbc-accordion-panel.visible {
  display: block;
}
.mbc-accordion-panel-intro {
  font-size: var(--mbc-text-md);
  font-weight: 400;
  color: var(--mbc-text-medium);
  line-height: 1.7;
  max-width: 43.75rem;
  margin: 0 0 1.75rem;
}

/* Content rows inside panel */
.mbc-accordion-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--mbc-cream);
  border-radius: var(--mbc-radius-lg);
  margin-bottom: 1rem;
  border-left: 4px solid var(--mbc-gold);
}
.mbc-accordion-row:last-of-type {
  margin-bottom: 0;
}
.mbc-accordion-row-info {
  flex: 1;
}
.mbc-accordion-row-info h4 {
  font-size: var(--mbc-text-md);
  font-weight: 700;
  color: var(--mbc-navy);
  margin: 0 0 0.25rem;
}
.mbc-accordion-meta {
  font-size: var(--mbc-text-sm);
  font-weight: 500;
  color: var(--mbc-gold);
  margin: 0 0 0.5rem;
  display: block;
}
.mbc-accordion-row-info p {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--mbc-text-light);
  line-height: 1.6;
  margin: 0;
}
.mbc-accordion-link {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--mbc-gold);
  text-decoration: none;
  white-space: nowrap;
  padding-top: 0.125rem;
}
.mbc-accordion-link:hover {
  text-decoration: underline;
}

/* Panel CTA */
.mbc-accordion-cta {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f0ede6;
  text-align: center;
}
.mbc-accordion-cta a {
  margin: 0 0.5rem;
}

/* Accordion responsive */
@media (max-width: 992px) {
  .mbc-accordion-grid,
  .mbc-accordion-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .mbc-accordion-grid,
  .mbc-accordion-grid--4col {
    grid-template-columns: 1fr;
  }
  .mbc-accordion-card {
    padding: 1.5rem 1.25rem;
  }
  .mbc-accordion-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  .mbc-accordion-cta a {
    display: block;
    margin: 0.5rem auto;
    max-width: 17.5rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mbc-accordion-card {
    transition: border-color 0.3s ease;
  }
  .mbc-accordion-card:hover {
    transform: none;
  }
  .mbc-accordion-panel-wrap {
    transition: none;
  }
}


/* ============================================
   HERO PATTERNS
   Layout and typography for hero sections.
   Each section file sets its own background
   image and overlay opacity locally.
   ============================================ */

/* Full-page hero (home page) */
.mbc-hero {
  position: relative;
  min-height: 31.25rem; /* 500px */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 9rem var(--mbc-section-pad-x) var(--mbc-section-pad-y);
  font-family: var(--mbc-font-primary);
}
.mbc-hero > * { position: relative; z-index: 1; }
.mbc-hero h1 {
  font-size: var(--mbc-text-4xl);
  font-weight: 700;
  color: var(--mbc-white);
  margin: 0;
  line-height: 1.1;
}
.mbc-hero p {
  font-size: var(--mbc-text-lg);
  font-weight: 300;
  color: var(--mbc-white);
  margin: 0.75rem auto 0;
  max-width: 43.75rem;
}

/* Sub-page hero (all pages except home) */
.mbc-page-hero {
  position: relative;
  min-height: 25rem; /* 400px */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 11rem var(--mbc-section-pad-x) 2.5rem;
  font-family: var(--mbc-font-primary);
}
.mbc-page-hero > div { position: relative; z-index: 1; }
.mbc-page-hero h1 {
  font-size: var(--mbc-text-4xl);
  font-weight: 700;
  color: var(--mbc-white);
  margin: 0;
  line-height: 1.1;
}
.mbc-page-hero p {
  font-size: var(--mbc-text-lg);
  font-weight: 300;
  color: var(--mbc-white);
  margin: 0.75rem auto 0;
  max-width: 38.75rem; /* 620px */
}
.mbc-page-hero-cta {
  margin-top: 1.5rem;
}

/* Hero responsive — tablet landscape */
@media (max-width: 992px) {
  .mbc-page-hero {
    min-height: 21.875rem; /* 350px */
    padding: 12rem var(--mbc-section-pad-x) 2.2rem;
  }
  .mbc-page-hero h1 {
    font-size: var(--mbc-text-4xl); /* 32px */
  }
  .mbc-page-hero p {
    font-size: var(--mbc-text-base); /* 15px */
  }
}

/* Hero responsive — tablet portrait / mobile */
@media (max-width: 768px) {
  .mbc-hero {
    min-height: 25rem;
    padding: 6rem var(--mbc-section-pad-x) var(--mbc-section-pad-y);
  }
  .mbc-hero h1 {
    font-size: var(--mbc-text-3xl);
  }
  .mbc-page-hero {
    min-height: 18.75rem; /* 300px — room for wrapped text */
    padding: 11rem var(--mbc-section-pad-x) 2rem;
  }
  .mbc-page-hero h1 {
    font-size: var(--mbc-text-3xl); /* 28px — second step-down */
  }
  .mbc-page-hero p {
    font-size: var(--mbc-text-sm); /* 13px */
  }
}


/* ============================================
   GOLD ACCENT BORDER
   Left-border treatment for quote blocks,
   program rows, and callout content.
   ============================================ */
.mbc-accent-border {
  border-left: 4px solid var(--mbc-gold);
  padding-left: 1.25rem;
}


/* ============================================
   UTILITY: SCREEN READER ONLY
   Visually hidden but accessible to assistive
   technology. Remove local definitions from
   all section files — this is the single source.
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}