/*
  marble/template.css
  --------------------------------------------------------------------------
  Restyled to use dynamic tenant design tokens.

  TWO RULES THAT MUST NOT BE BROKEN:

    1. Every band selector must consume ALL FIVE surface variables
       (--mb-<band>-bg / -image / -size / -repeat / -position). Consuming only
       `-bg` silently discards the textures and images a client picks in the
       editor.

    2. Band class names must stay on the sections. The per-section surface
       override is emitted as `#id.mb-band--paper`, which wins on specificity
       only because the band class is present.
  --------------------------------------------------------------------------
*/

/* ============================== SHADOW DOM & ROOT CONTAINERS ============================== */
:host {
   display: block !important;
   width: 100% !important;
   max-width: 100% !important;
   min-height: 100vh;
   overflow-x: hidden !important;
}

:host,
html,
body,
body.mb,
main,
div[data-np-view] {
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 !important;
   padding: 0;
   box-sizing: border-box !important;
}

/* ============================== FONTS ============================== */
@font-face {
   font-family: 'BunkenTechSansPro-Bold';
   src: url('/fonts/marble/DINEngschriftStd.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'DINEngschriftStd';
   src: url('/fonts/marble/DINEngschriftStd.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'GillSans-Reguler';
   src: url('/fonts/marble/GillSans.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'THERIDGEBold';
   src: url('/fonts/marble/THERIDGEBold.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

/* ============================== TOKENS ============================== */
:root {
   /* Dynamic Token Contract */
   --mb-ink: #111811;
   --mb-black: #111811;
   --mb-panel: #F4F6F2;
   --mb-line: rgba(22, 28, 22, 0.12);
   --mb-text: #1C241B;
   --mb-muted: #5C645D;
   --mb-accent: #9EB82A;
   --mb-accent-ink: #111811;
   --mb-surface: #FFFFFF;
   --mb-band: #161B16;
   --mb-light: #FFFFFF;
   --mb-light-alt: #EBF0E6;

   /* Aliased bindings for theme component rules */
   --mb-navy: var(--mb-ink);
   --mb-navy-deep: var(--mb-ink);
   --mb-crimson: var(--mb-accent);
   --mb-paper: var(--mb-panel);
   --mb-body-grey: var(--mb-text);
   --mb-body-grey-dark: #D1CFCD;
   --mb-gold: #E4A44A;
   --mb-white: #FFFFFF;

   --mb-display: var(--mb-display-family, 'BunkenTechSansPro-Bold', 'Arial Narrow', sans-serif);
   --mb-body: var(--mb-text-family, 'Inter', system-ui, -apple-system, sans-serif);
   --mb-brand: 'GillSans-Reguler', Georgia, serif;
   --mb-label: var(--mb-display);

   --mb-wrap: 1320px;
   --mb-gap: 30px;
   --mb-section-y: 140px;
   --mb-display-weight: 700;
   --mb-display-transform: uppercase;
   --mb-display-spacing: -0.01em;

   --mb-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
   --mb-shadow-soft: 0 0 20px rgba(0, 0, 0, 0.05);
   --mb-radius: 0;

   --mb-btn-radius: var(--mb-radius);
   --mb-btn-border-w: 0px;
   --mb-btn-border-c: transparent;
   --mb-btn-shadow: none;
   --mb-btn-shadow-hover: none;
   --mb-btn-press-x: 0px;
   --mb-btn-press-y: 0px;
   --mb-btn-weight: 700;
   --mb-btn-transform: uppercase;
   --mb-btn-pad: 20px 26px;
   --mb-btn-size: 20px;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
   overflow: visible !important;
}

body.mb {
   margin: 0;
   width: 100% !important;
   max-width: 100% !important;
   background: var(--mb-surface);
   color: var(--mb-text);
   font-family: var(--mb-body);
   font-size: 20px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden !important;
   overflow-y: visible !important;
}

img {
   max-width: 100%;
   display: block;
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   *,
   *::before,
   *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
   }
}

/* ============================== IMAGE STATES ============================== */
img:not([src]),
img[src=""],
img[src="#"],
img.mb-img-empty {
   display: none !important;

}

img.mb-img-missing {
   min-height: 80px;
   outline: 2px dashed var(--mb-muted);
   outline-offset: -2px;
   position: relative;
}

img.mb-img-missing::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background-color: var(--mb-panel);
   background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.06) 0 10px, transparent 10px 20px);
}

img.mb-img-missing[src]:not([src=""]) {
   outline: none;
}

.mb-head__logo img.mb-img-empty,
.mb-head__logo img.mb-img-missing {
   min-height: 0;
   height: 40px;
   width: 120px;
}

.mb-proof__mark.mb-img-empty,
.mb-proof__mark.mb-img-missing {
   min-height: 0;
   height: 34px;
}

/* ============================== TYPOGRAPHY ============================== */
a {
   color: inherit;
   text-decoration: none;
}

h1,
h2,
h3,
h4 {
   font-family: var(--mb-display);
   font-weight: var(--mb-display-weight, 700);
   text-transform: var(--mb-display-transform, uppercase);
   line-height: 1.2;
   letter-spacing: var(--mb-display-spacing, -0.01em);
   margin: 0;
   color: var(--mb-ink);
}

p {
   margin: 0 0 1rem;
}

.mb-wrap {
   width: min(92%, var(--mb-wrap));
   margin-inline: auto;
}

.mb-center {
   display: flex;
   justify-content: center;
   margin-top: 60px;
}

.mb-h2 {
   font-size: 56px;
   line-height: 1.2;
}

.mb-h2--center {
   text-align: center;
}

.mb-kicker {
   font-family: var(--mb-body);
   font-size: 20px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--mb-accent);
   margin: 0 0 14px;
}

.mb-kicker--light {
   color: var(--mb-accent-ink);
}

.mb-hero .mb-kicker,
.mb-kicker--light {
   color: var(--mb-accent) !important;
}

.mb-body {
   font-size: 20px;
   line-height: 1.5;
   margin: 0 0 20px;
   color: var(--mb-text);
}

.mb-band--dark .mb-body,
.mb-band--dark .mb-head__lede,
.mb-band--dark p {
   color: var(--mb-light-alt);
}

.mb-head {
   margin-bottom: 50px;
}

.mb-head--center {
   text-align: center;
   max-width: 900px;
   margin-inline: auto;
}

.mb-head__lede {
   font-size: 20px;
   color: var(--mb-text);
   margin: 0;
}

.mb-band--dark .mb-head__lede {
   color: var(--mb-light-alt);
}

.mb-head-row {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
   gap: 60px;
   align-items: end;
   margin-bottom: 56px;
}

.mb-head-row--centered {
   grid-template-columns: 1fr;
   gap: 0;
   margin-bottom: 22px;
   text-align: center;
}

.mb-head-row__centered-copy {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
}

.mb-head-row__aside {
   margin: 0;
}

/* ============================== BANDS & LAYOUT ============================== */
.mb-band,
.mb-section {
   padding: 80px 0 !important;
   box-sizing: border-box;
   width: 100% !important;
}

.mb-wrap {
   width: min(92%, var(--mb-wrap, 1320px));
   margin-inline: auto;
   padding-left: 0;
   padding-right: 0;
}

.mb-band--dark {
   background-color: var(--mb-darkband-bg, var(--mb-band));
   background-image: var(--mb-darkband-image, none);
   background-size: var(--mb-darkband-size, auto);
   background-repeat: var(--mb-darkband-repeat, repeat);
   background-position: var(--mb-darkband-position, center);
   color: var(--mb-light-alt);
}

.mb-band--dark h1,
.mb-band--dark h2,
.mb-band--dark h3,
.mb-band--dark h4 {
   color: var(--mb-light);
}

.mb-band--light {
   background-color: var(--mb-lightband-bg, var(--mb-surface));
   background-image: var(--mb-lightband-image, none);
   background-size: var(--mb-lightband-size, auto);
   background-repeat: var(--mb-lightband-repeat, repeat);
   background-position: var(--mb-lightband-position, center);
   color: var(--mb-text);
}

.mb-band--light h1,
.mb-band--light h2,
.mb-band--light h3,
.mb-band--light h4,
.mb-band--paper h1,
.mb-band--paper h2,
.mb-band--paper h3,
.mb-band--paper h4 {
   color: var(--mb-ink);
}

.mb-band--paper {
   background-color: var(--mb-paper-bg, var(--mb-panel));
   background-image: var(--mb-paper-image, none);
   background-size: var(--mb-paper-size, auto);
   background-repeat: var(--mb-paper-repeat, repeat);
   background-position: var(--mb-paper-position, center);
   color: var(--mb-text);
}

/* Light surfaces / cards inside dark bands */
.mb-band--dark .mb-owner__name,
.mb-band--dark .mb-post__title,
.mb-band--dark .mb-card__title,
.mb-band--dark .mb-disc__title,
.mb-band--dark .mb-rev__name,
.mb-band--dark .mb-mv__title,
.mb-band--dark .mb-certbox__title,
.mb-band--dark .mb-certrow__title,
.mb-band--dark .mb-acc:not(.mb-acc--ticks) .mb-acc__q,
.mb-band--dark .mb-acc:not(.mb-acc--ticks) .mb-acc__label,
.mb-band--dark .mb-acc:not(.mb-acc--ticks) .mb-acc__num {
   color: var(--mb-ink);
}

.mb-band--dark .mb-rev__text,
.mb-band--dark .mb-rev__src,
.mb-band--dark .mb-owner__body,
.mb-band--dark .mb-post__body,
.mb-band--dark .mb-card__text,
.mb-band--dark .mb-disc__body,
.mb-band--dark .mb-mv__body,
.mb-band--dark .mb-certbox__body,
.mb-band--dark .mb-certrow__body,
.mb-band--dark .mb-acc:not(.mb-acc--ticks) .mb-acc__a,
.mb-band--dark .mb-acc:not(.mb-acc--ticks) .mb-acc__a p {
   color: var(--mb-text);
}

/* ============================== BADGE STRIP ============================== */
.mb-badges {
   padding: 70px 0;
   background: var(--mb-surface);
}

.mb-badges__track {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
   flex-wrap: wrap;
}

.mb-badges__img {
   max-height: 80px;
   width: auto;
   object-fit: contain;
}

/* ============================== MARQUEE ============================== */
.mb-marquee {
   position: relative;
   background: var(--mb-accent);
   color: var(--mb-accent-ink);
   overflow: hidden;
   padding: 14px 0;
   display: flex;
   align-items: center;
}

.mb-marquee__ekg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   color: rgba(255, 255, 255, 0.35);
   pointer-events: none;
}

.mb-marquee__track {
   display: flex;
   align-items: center;
   flex: 0 0 auto;
   animation: mb-marquee 38s linear infinite;
   will-change: transform;
}

.mb-marquee__item {
   display: inline-flex;
   align-items: center;
   gap: 16px;
   padding: 0 28px;
   flex: 0 0 auto;
   white-space: nowrap;
}

.mb-marquee__ico {
   width: 26px;
   height: 26px;
   color: var(--mb-accent-ink);
   flex: 0 0 26px;
}

.mb-marquee__text {
   font-family: var(--mb-display);
   font-size: 28px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.02em;
   color: var(--mb-accent-ink);
}

@keyframes mb-marquee {
   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(-50%);
   }
}

.mb-marquee+.mb-marquee {
   display: none;
}

/* ============================== CAROUSEL ============================== */
.mb-carousel {
   position: relative;
   padding: 0 40px;
}

.mb-carousel__track {
   --slides-per-view: 3;
   --slide-gap: 30px;
   display: flex;
   gap: var(--slide-gap);
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding-bottom: 8px;
}

.mb-carousel__track::-webkit-scrollbar {
   display: none;
}

.mb-carousel__track>* {
   flex: 0 0 calc((100% - (var(--slides-per-view) - 1) * var(--slide-gap)) / var(--slides-per-view));
   scroll-snap-align: start;
   min-width: 0;
}

.mb-carousel__arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;
   display: grid;
   place-items: center;
   width: 48px;
   height: 48px;
   border: 0;
   border-radius: 50%;
   background: var(--mb-ink);
   color: var(--mb-accent-ink);
   cursor: pointer;
   transition: background 0.2s ease, opacity 0.2s ease;
}

.mb-carousel__arrow svg {
   width: 18px;
   height: 18px;
}

.mb-carousel__arrow:hover {
   background: var(--mb-accent);
}

.mb-carousel__arrow:disabled {
   opacity: 0.35;
   cursor: default;
}

.mb-carousel__arrow--prev {
   left: 0px;
}

.mb-carousel__arrow--next {
   right: 0px;
}

.mb-carousel__dots {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-top: 30px;
}

.mb-dot {
   width: 12px;
   height: 12px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: var(--mb-line);
   cursor: pointer;
   transition: background 0.2s ease;
}

.mb-dot.is-active {
   background: var(--mb-ink);
}

/* ============================== TESTIMONIAL CARDS ============================== */
.mb-rev {
   position: relative;
   background: var(--mb-surface);
   padding: 30px;
   height: 100%;
   display: flex;
   flex-direction: column;
   box-shadow: var(--mb-shadow-soft);
}

.mb-rev__quote {
   font-family: Georgia, serif;
   font-size: 60px;
   line-height: 0.8;
   color: var(--mb-ink);
   opacity: 0.25;
   margin-bottom: 10px;
}

.mb-rev__stars {
   color: var(--mb-gold);
   font-size: 16px;
   margin-bottom: 12px;
   letter-spacing: 2px;
}

.mb-rev__text {
   font-size: 18px;
   line-height: 1.55;
   color: var(--mb-text);
   margin-bottom: 22px;
   flex: 1 1 auto;
}

.mb-rev__foot {
   display: flex;
   align-items: center;
   gap: 12px;
   border-top: 1px solid var(--mb-line);
   padding-top: 18px;
}

.mb-rev__av {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   object-fit: cover;
   flex: 0 0 56px;
}

.mb-rev__who {
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
}

.mb-rev__name {
   font-family: var(--mb-display);
   font-size: 20px;
   font-weight: 700;
   text-transform: uppercase;
   line-height: 1;
   color: var(--mb-ink);
}

.mb-rev__src {
   font-size: 14px;
   font-style: italic;
   color: var(--mb-muted);
}

.mb-rev__plate {
   width: 40px;
   height: 40px;
   margin-left: auto;
   object-fit: contain;
   flex: 0 0 40px;
}

/* ============================== VIDEO SLIDES ============================== */
.mb-reel__slide {
   position: relative;
   display: block;
   overflow: hidden;
}

.mb-reel__slide img {
   width: 100%;
   aspect-ratio: 16 / 9;
   object-fit: cover;
   transition: transform 0.4s ease;
}

.mb-reel__slide:hover img {
   transform: scale(1.05);
}

.mb-reel__play {
   position: absolute;
   inset: 0;
   margin: auto;
   width: 68px;
   height: 68px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.92);
   transition: background 0.2s ease;
   pointer-events: none;
}

.mb-reel__play::after {
   content: "";
   position: absolute;
   left: 27px;
   top: 21px;
   border-style: solid;
   border-width: 13px 0 13px 20px;
   border-color: transparent transparent transparent var(--mb-ink);
}

.mb-reel__slide:hover .mb-reel__play {
   background: var(--mb-accent);
}

.mb-reel__slide:hover .mb-reel__play::after {
   border-left-color: var(--mb-accent-ink);
}

.mb-reel__title {
   display: block;
   padding: 16px 0 0;
   font-family: var(--mb-display);
   font-size: 20px;
   font-weight: 700;
   text-transform: uppercase;
   color: var(--mb-ink);
}

.mb-reel {
   margin-top: 40px;
}

.mb-reel[hidden] {
   display: none;
}

.mb-reel__main {
   width: 100%;
   aspect-ratio: 16 / 9;
   background: var(--mb-band);
}

.mb-reel__thumbs {
   display: flex;
   gap: 12px;
   list-style: none;
   margin: 20px 0 0;
   padding: 0;
   flex-wrap: wrap;
}

.mb-reel__thumb {
   width: 140px;
   padding: 0;
   border: 2px solid transparent;
   background: none;
   cursor: pointer;
}

.mb-reel__thumb img {
   width: 100%;
   aspect-ratio: 16 / 9;
   object-fit: cover;
}

.mb-reel__thumb:hover,
.mb-reel__thumb.is-active {
   border-color: var(--mb-accent);
}

.mb-reel__note {
   font-size: 15px;
   color: var(--mb-muted);
   margin-top: 14px;
}

/* ============================== SPLIT SECTIONS ============================== */
.mb-split {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
   gap: 50px;
   align-items: start;
}

.mb-split--media-first .mb-split__media {
   order: 0;
}

.mb-split__media {
   display: grid;
   gap: 24px;
}

.mb-split__media img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

.mb-stackimg {
   width: 100%;
   aspect-ratio: 16 / 10;
   object-fit: cover;
}

/* ============================== ABOUT & MISSION ============================== */
.mb-about {
   display: grid;
   grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
   gap: 60px;
   align-items: start;
}

.mb-about__copy h2 {
   margin-bottom: 22px;
}

.mb-frameimg {
   width: 100%;
   object-fit: cover;
}

.mb-frameimg:not([src]:not([src=""]):not([src="#"])),
.mb-about__media img:not([src]:not([src=""]):not([src="#"])),
.mb-stackimg:not([src]:not([src=""]):not([src="#"])),
.mb-areas__map:not([src]:not([src=""]):not([src="#"])) {
   aspect-ratio: 4 / 3;
   height: auto;
   min-height: 0;
}

.mb-mv {
   display: grid;
   gap: 18px;
   margin-top: 30px;
}

.mb-mv__card {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   background: var(--mb-surface);
   border: 1px solid var(--mb-line);
   padding: 24px;
   box-shadow: var(--mb-shadow-soft);
}

.mb-mv__title {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 20px;
   margin-bottom: 8px;
   color: var(--mb-ink);
}

.mb-mv__body {
   font-size: 17px;
   line-height: 1.55;
   color: var(--mb-text);
   margin: 0;
}

/* ============================== TEAM ============================== */
.mb-owner {
   background: var(--mb-surface);
   display: flex;
   flex-direction: column;
}

.mb-owner__media img {
   width: 100%;
   aspect-ratio: 1 / 1;
   object-fit: cover;
}

.mb-owner__card {
   padding: 20px;
}

.mb-owner__name {
   font-size: 20px;
   margin-bottom: 6px;
   color: var(--mb-ink);
}

.mb-owner__role {
   font-size: 15px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--mb-accent);
   margin: 0 0 10px;
}

.mb-owner__body {
   font-size: 16px;
   color: var(--mb-text);
   margin: 0;
}

/* ============================== CERTIFIED ============================== */
.mb-cert {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 60px;
   align-items: start;
}

.mb-cert__boxes {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-top: 30px;
}

.mb-certbox {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   background: var(--mb-surface);
   box-shadow: var(--mb-shadow-soft);
   padding: 20px;
}

.mb-certbox__ico {
   width: 36px;
   height: 36px;
   flex: 0 0 36px;
   object-fit: contain;
}

.mb-certbox__title {
   font-size: 18px;
   margin-bottom: 6px;
   color: var(--mb-ink);
}

.mb-certbox__body {
   font-size: 16px;
   line-height: 1.5;
   color: var(--mb-text);
   margin: 0;
}

.mb-cert__marks {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-top: 24px;
   flex-wrap: wrap;
   max-width: 100%;
}

.mb-cert__marks img {
   max-height: 48px;
   width: auto;
   object-fit: contain;
}

.mb-cert__lede {
   font-family: var(--mb-display);
   font-size: 24px;
   font-weight: 700;
   text-transform: uppercase;
   line-height: 1.3;
   color: var(--mb-ink);
   margin: 0 0 26px;
}

.mb-cert__rows {
   display: grid;
   gap: 18px;
}

.mb-certrow {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   border: 1px solid var(--mb-line);
   background: var(--mb-surface);
   padding: 20px;
}

.mb-certrow__title {
   font-size: 18px;
   margin-bottom: 6px;
   color: var(--mb-ink);
}

.mb-certrow__body {
   font-size: 16px;
   line-height: 1.5;
   color: var(--mb-text);
   margin: 0;
}

/* ============================== ACCORDIONS & FAQ ============================== */
.mb-acc__item {
   background: var(--mb-surface);
   border: 1px solid var(--mb-line);
   box-shadow: var(--mb-shadow-soft);
}

.mb-acc__q {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 18px 22px;
   cursor: pointer;
   list-style: none;
   font-family: var(--mb-display);
   font-size: 20px;
   font-weight: 700;
   text-transform: uppercase;
   line-height: 1.35;
   color: var(--mb-ink);
   transition: background 0.2s ease, color 0.2s ease;
}

.mb-acc__q::-webkit-details-marker,
.mb-acc__q::marker {
   display: none;
}

.mb-acc__q:hover {
   color: var(--mb-accent);
   background: var(--mb-panel);
}

.mb-acc__item[open] .mb-acc__q {
   background: var(--mb-panel);
   color: var(--mb-ink);
}

.mb-acc__num {
   font-family: var(--mb-display);
   font-size: 22px;
   font-weight: 700;
   color: var(--mb-accent);
   min-width: 34px;
   flex: 0 0 auto;
}

.mb-acc:not(.mb-acc--steps) .mb-acc__num {
   display: none;
}

.mb-acc--steps {
   counter-reset: mb-step;
}

.mb-acc--steps .mb-acc__item {
   counter-increment: mb-step;
   background: var(--mb-surface);
   border: 1px solid var(--mb-line);
   margin-bottom: 10px;
   border-radius: var(--mb-radius, 4px);
}

.mb-acc--steps .mb-acc__num::before {
   content: counter(mb-step, decimal-leading-zero);
}

.mb-acc--steps .mb-acc__q {
   color: var(--mb-ink);
   background: var(--mb-surface);
   font-size: 18px;
   padding: 16px 20px;
}

.mb-acc--steps .mb-acc__num {
   color: var(--mb-ink);
   font-weight: 800;
   font-size: 20px;
   min-width: 40px;
}

.mb-acc--steps .mb-acc__label {
   color: var(--mb-ink);
   font-weight: 700;
}

.mb-acc--steps .mb-acc__sign::before,
.mb-acc--steps .mb-acc__sign::after {
   background-color: var(--mb-ink);
}

.mb-acc--steps .mb-acc__a {
   background: var(--mb-surface);
   color: var(--mb-text);
}

.mb-acc--steps .mb-acc__a p {
   color: var(--mb-text);
}

.mb-acc--steps .mb-acc__item[open] .mb-acc__q {
   background: var(--mb-panel);
   color: var(--mb-ink);
}

.mb-acc--steps .mb-acc__item[open] .mb-acc__num {
   color: var(--mb-accent);
}

.mb-acc__label {
   flex: 1 1 auto;
   min-width: 0;
}

.mb-acc__sign {
   position: relative;
   width: 16px;
   height: 16px;
   flex: 0 0 16px;
   margin-left: auto;
   color: var(--mb-ink);
}

.mb-acc__sign::before,
.mb-acc__sign::after {
   content: "";
   position: absolute;
   inset: 0;
   margin: auto;
   background: currentColor;
}

.mb-acc__sign::before {
   width: 14px;
   height: 2px;
}

.mb-acc__sign::after {
   width: 2px;
   height: 14px;
   transition: opacity 0.2s ease;
}

.mb-acc__item[open] .mb-acc__sign::after {
   opacity: 0;
}

.mb-acc__a {
   padding: 18px 22px 22px;
   font-size: 18px;
   line-height: 1.55;
   color: var(--mb-text);
   background: var(--mb-surface);
}

.mb-acc__a p {
   color: var(--mb-text);
}

.mb-acc__a p:last-child {
   margin-bottom: 0;
}

.mb-acc__more {
   display: inline-block;
   margin-top: 12px;
   font-family: var(--mb-body);
   font-size: 15px;
   font-weight: 700;
   text-transform: uppercase;
   color: var(--mb-accent);
}

.mb-acc__more:hover {
   color: var(--mb-ink);
}

.mb-acc--ticks .mb-acc__item {
   background: rgba(255, 255, 255, 0.06);
   box-shadow: none;
   border: 1px solid rgba(255, 255, 255, 0.08);
}

.mb-acc--ticks .mb-acc__q,
.mb-band--dark .mb-acc--ticks .mb-acc__q,
.mb-acc--ticks .mb-acc__label,
.mb-band--dark .mb-acc--ticks .mb-acc__label {
   color: var(--mb-light);
   background: transparent;
}

.mb-acc--ticks .mb-acc__q:hover,
.mb-band--dark .mb-acc--ticks .mb-acc__q:hover {
   background: rgba(255, 255, 255, 0.10);
   color: var(--mb-accent);
}

.mb-acc--ticks .mb-acc__item[open] .mb-acc__q,
.mb-band--dark .mb-acc--ticks .mb-acc__item[open] .mb-acc__q {
   background: rgba(255, 255, 255, 0.12);
   color: var(--mb-light);
}

.mb-acc--ticks .mb-acc__sign,
.mb-band--dark .mb-acc--ticks .mb-acc__sign {
   color: var(--mb-light);
}

.mb-acc--ticks .mb-acc__a,
.mb-acc--ticks .mb-acc__a p,
.mb-band--dark .mb-acc--ticks .mb-acc__a,
.mb-band--dark .mb-acc--ticks .mb-acc__a p {
   background: transparent;
   color: var(--mb-light-alt);
}

.mb-why__closing {
   margin-top: 26px;
   font-size: 18px;
   font-weight: 700;
   color: var(--mb-light-alt);
}

.mb-list--bars {
   list-style: none;
   margin: 0 0 26px;
   padding: 0;
   display: grid;
   gap: 10px;
}

.mb-list--bars>li {
   margin: 0;
   padding: 13px 20px;
   text-align: center;
   font-weight: 700;
   font-size: 18px;
   line-height: 1.4;
   border-radius: 3px;
   background: var(--mb-surface);
   color: var(--mb-ink);
}

.mb-band--dark .mb-list--bars>li {
   background: rgba(255, 255, 255, 0.10);
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
   color: var(--mb-accent-ink);
}

.mb-head__accent {
   color: var(--mb-accent);
}

.mb-band--dark .mb-head__accent {
   color: var(--mb-body-grey-dark);
}

.mb-faq {
   max-width: 1170px;
   margin-inline: auto;
}

.mb-acc--faq {
   margin-top: 0;
}

.mb-acc--faq .mb-acc__item {
   background: var(--mb-surface);
   border: 1px solid var(--mb-line);
   border-radius: var(--mb-radius, 4px);
   margin-bottom: 12px;
   overflow: hidden;
   box-shadow: var(--mb-shadow-soft);
}

.mb-acc--faq .mb-acc__q {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-align: left;
   padding: 20px 60px 20px 24px;
   background: var(--mb-surface);
   color: var(--mb-ink);
   font-family: var(--mb-display);
   font-size: 18px;
   font-weight: 700;
}

.mb-acc--faq .mb-acc__label {
   color: var(--mb-ink);
}

.mb-acc--faq .mb-acc__q:hover {
   background: var(--mb-panel);
   color: var(--mb-accent);
}

.mb-acc--faq .mb-acc__item[open] .mb-acc__q {
   background: var(--mb-panel);
   color: var(--mb-ink);
   border-bottom: 1px solid var(--mb-line);
}

.mb-acc--faq .mb-acc__sign {
   position: absolute;
   right: 20px;
   top: 50%;
   transform: translateY(-50%);
   width: 32px;
   height: 32px;
   margin: 0;
   border-radius: 50%;
   background: var(--mb-ink);
   color: var(--mb-surface);
   display: flex;
   align-items: center;
   justify-content: center;
}

.mb-acc--faq .mb-acc__sign::before,
.mb-acc--faq .mb-acc__sign::after {
   background-color: currentColor;
}

.mb-acc--faq .mb-acc__sign::before {
   width: 14px;
   height: 2px;
}

.mb-acc--faq .mb-acc__sign::after {
   width: 2px;
   height: 14px;
}

.mb-acc--faq .mb-acc__item[open] .mb-acc__sign {
   background: var(--mb-accent);
   color: var(--mb-accent-ink);
}

.mb-acc--faq .mb-acc__a {
   padding: 20px 24px 24px;
   background: var(--mb-surface);
   color: var(--mb-text);
}

.mb-acc--faq .mb-acc__a p {
   color: var(--mb-text);
}

/* ============================== GRID & GENERIC CARDS ============================== */
.mb-grid {
   display: grid;
   gap: 24px;
}

.mb-grid--3 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--mb-gap);
}

.mb-card {
   border: 1px solid var(--mb-line, rgba(47, 46, 46, 0.12));
   background: var(--mb-surface, #ffffff);
   border-radius: 4px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

.mb-card__media {
   aspect-ratio: 16/9;
   overflow: hidden;
   background: var(--mb-panel, #F4F3EF);
}

.mb-card__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.mb-card__body {
   padding: 20px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
}

.mb-card__title {
   font-size: 1.25rem;
   font-weight: 700;
   margin-bottom: 8px;
   color: var(--mb-ink);
}

.mb-card__text {
   font-size: 0.95rem;
   color: var(--mb-text);
   margin-bottom: 16px;
   flex-grow: 1;
}

/* ============================== GALLERY / WORK ============================== */
.mb-work-section {
   padding: 90px 0 !important;
}

.mb-work-headline {
   font-family: var(--mb-display);
   font-size: 52px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: -0.01em;
   color: var(--mb-ink);
   margin: 0;
   text-align: center;
}

.mb-filters {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 32px;
   flex-wrap: wrap;
   margin-bottom: 36px;
}

.mb-filters__list {
   display: flex;
   gap: 32px;
   list-style: none;
   margin: 0;
   padding: 0;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

/* ==========================================================================
   PAST WORK / GALLERY FILTER TABS (DYNAMIC VARIABLE MAPPING)
   ========================================================================== */

.mb-filter {
   font-family: var(--mb-body);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   padding: 4px 0 6px;
   border: none;
   border-bottom: 2px solid transparent;
   border-radius: 0;
   background: transparent;
   color: var(--mb-muted, #777);
   cursor: pointer;
   transition: color 0.2s ease, border-color 0.2s ease;
}

.mb-filter.is-active,
.mb-filter:hover {
   color: var(--mb-ink);
   border-bottom-color: var(--mb-ink);
   background: transparent;
}

/* ============================== 3-COLUMN MASONRY GRID ============================== */
.mb-gallery-grid {
   columns: 3;
   column-gap: 16px;
   width: 100%;
}

.mb-gallery-grid .mb-gallery__item,
.mb-gallery__item {
   break-inside: avoid;
   page-break-inside: avoid;
   margin-bottom: 16px;
   position: relative;
   overflow: hidden;
   display: block;
   background: var(--mb-panel);
}

.mb-gallery-grid .mb-gallery__item img,
.mb-gallery__item img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
   transition: transform 0.4s ease;
}

.mb-gallery-grid .mb-gallery__item:hover img,
.mb-gallery__item:hover img {
   transform: scale(1.03);
}

.mb-gallery__wm {
   position: absolute;
   right: 14px;
   bottom: 14px;
   left: auto;
   border: 2px solid rgba(255, 255, 255, 0.92);
   background: rgba(0, 0, 0, 0.2);
   color: #ffffff;
   font-family: var(--mb-display);
   font-size: 19px;
   font-weight: 700;
   letter-spacing: 0.04em;
   padding: 2px 8px;
   line-height: 1.15;
   text-transform: uppercase;
   pointer-events: none;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(2px);
}

.mb-gallery__empty {
   text-align: center;
   color: var(--mb-muted);
   margin-top: 40px;
}

/* ============================== DISCOUNTS ============================== */
.mb-disc {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-top: 30px;
}

.mb-disc__item {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   background: var(--mb-surface);
   box-shadow: var(--mb-shadow-soft);
   padding: 22px;
}

.mb-disc__icobox {
   display: grid;
   place-items: center;
   width: 64px;
   height: 64px;
   flex: 0 0 64px;
   background: var(--mb-paper);
}

.mb-disc__ico {
   width: 40px;
   height: 40px;
   object-fit: contain;
}

.mb-disc__title {
   font-size: 18px;
   margin-bottom: 6px;
   color: var(--mb-ink);
}

.mb-disc__body {
   font-size: 16px;
   line-height: 1.5;
   color: var(--mb-text);
   margin: 0;
}

/* ============================== BLOG CARDS ============================== */
.mb-post {
   display: flex;
   flex-direction: column;
   background: var(--mb-surface);
   height: 100%;
}

.mb-post__media {
   display: block;
   overflow: hidden;
}

.mb-post__media img {
   width: 100%;
   aspect-ratio: 16 / 10;
   object-fit: cover;
   transition: transform 0.4s ease;
}

.mb-post:hover .mb-post__media img {
   transform: scale(1.05);
}

.mb-post__body-wrap {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   padding: 24px 20px;
}

.mb-post__meta {
   font-size: 14px;
   font-style: italic;
   color: var(--mb-muted);
   margin: 0 0 10px;
}

.mb-post__title {
   font-size: 20px;
   line-height: 1.3;
   margin: 0 0 12px;
   color: var(--mb-ink);
   word-wrap: break-word;
   overflow-wrap: break-word;
}

.mb-post__title a:hover {
   color: var(--mb-accent);
}

.mb-post__body {
   font-size: 17px;
   line-height: 1.5;
   color: var(--mb-text);
   margin: 0 0 16px;
   flex: 1 1 auto;
}

.mb-post__more {
   font-family: var(--mb-body);
   font-size: 15px;
   font-weight: 700;
   text-transform: uppercase;
   color: var(--mb-accent);
}

.mb-post__more:hover {
   color: var(--mb-ink);
}

/* ============================== BUTTONS ============================== */
.mb-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   font-family: var(--mb-body);
   font-size: var(--mb-btn-size);
   font-weight: var(--mb-btn-weight);
   line-height: 1;
   text-transform: var(--mb-btn-transform);
   padding: var(--mb-btn-pad);
   border: var(--mb-btn-border-w) solid var(--mb-btn-border-c);
   border-radius: var(--mb-btn-radius);
   box-shadow: var(--mb-btn-shadow);
   cursor: pointer;
   background: var(--mb-accent);
   color: var(--mb-accent-ink);
   transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
      box-shadow 0.15s ease, transform 0.15s ease;
}

.mb-btn:hover {
   box-shadow: var(--mb-btn-shadow-hover);
   transform: translate(var(--mb-btn-press-x), var(--mb-btn-press-y));
}

.mb-btn:active {
   box-shadow: none;
   transform: translate(calc(var(--mb-btn-press-x) * 2), calc(var(--mb-btn-press-y) * 2));
}

.mb-btn--red {
   background: var(--mb-accent);
   color: var(--mb-accent-ink);
}

.mb-btn--red:hover {
   background: var(--mb-ink);
   color: var(--mb-accent-ink);
}

.mb-btn--navy {
   background: var(--mb-ink);
   color: var(--mb-accent-ink);
}

.mb-btn--navy:hover {
   background: var(--mb-accent);
   color: var(--mb-accent-ink);
}

/* ==========================================================================
   EXPLICIT TOKEN MAPPINGS FOR ACADIA MARBLE & GRANITE
   ========================================================================== */

.mb-head__book,
.mb-btn--red {
   background-color: var(--mb-accent, #9EB82A) !important;
   color: var(--mb-accent-ink, #111811) !important;
}

.mb-head__book:hover,
.mb-btn--red:hover {
   background-color: var(--mb-ink, #111811) !important;
}

.mb-head__call,
.mb-btn--navy {
   background-color: var(--mb-ink, #111811) !important;
}

.mb-head__call:hover,
.mb-btn--navy:hover {
   background-color: var(--mb-accent, #9EB82A) !important;
   color: var(--mb-accent-ink, #111811) !important;
}

.mb-hero__sub {
   background-color: rgba(158, 184, 42, 0.25) !important;
   background-image: linear-gradient(90deg, rgba(158, 184, 42, 0.4) 0%, rgba(17, 24, 17, 0.85) 100%) !important;
   border-left: 4px solid var(--mb-accent, #9EB82A) !important;
}

.mb-quote__submit,
.mb-btn--submit {
   background-color: var(--mb-accent, #9EB82A) !important;
   color: var(--mb-accent-ink, #111811) !important;
   border-radius: var(--mb-radius, 4px) !important;
   font-weight: 700 !important;
}

.mb-quote__submit:hover,
.mb-btn--submit:hover {
   background-color: var(--mb-ink, #111811) !important;
}

.mb-btn--light {
   background: var(--mb-surface);
   color: var(--mb-ink);
}

.mb-btn--light:hover {
   background: var(--mb-accent);
   color: var(--mb-accent-ink);
}

.mb-btn--ghost,
.mb-btn--outline {
   background: transparent;
   border: 2px solid currentColor;
   color: inherit;
}

.mb-btn--ghost:hover,
.mb-btn--outline:hover {
   background: var(--mb-accent);
   border-color: var(--mb-accent);
   color: var(--mb-accent-ink);
}

.mb-btn-row {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   margin-top: 30px;
}

.mb-btn-row--center {
   justify-content: center;
}

/* ============================== ICON CHIPS ============================== */
.mb-ico {
   display: inline-grid;
   place-items: center;
   width: 34px;
   height: 34px;
   flex: 0 0 34px;
}

.mb-ico svg {
   width: 20px;
   height: 20px;
}

.mb-ico--navy {
   background: var(--mb-ink);
   color: var(--mb-accent-ink);
}

.mb-ico--gold {
   background: var(--mb-gold);
   color: var(--mb-ink);
}

.mb-ico[data-icon]:not([data-icon=""])::before {
   content: "";
   grid-area: 1 / 1;
   width: 20px;
   height: 20px;
   margin: auto;
   background-color: currentColor;
   -webkit-mask-image: var(--mb-glyph);
   mask-image: var(--mb-glyph);
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
   -webkit-mask-size: contain;
   mask-size: contain;
}

.mb-ico__img {
   display: none;
   width: 34px;
   height: 34px;
   object-fit: contain;
}

.mb-ico__img[src]:not([src=""]) {
   display: block;
}

.mb-icobox:has(.mb-ico__img[src]:not([src=""])) .mb-ico {
   display: none;
}

.mb-icobox {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
}

/* ==========================================================================
   FIX FOR WHY ACADIA ICON ALIGNMENT (.mb-ico)
   ========================================================================== */

.mb-certrow,
.mb-certbox {
   display: flex !important;
   align-items: flex-start !important;
   gap: 16px !important;
}

.mb-ico.mb-ico--navy {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   width: 34px !important;
   height: 34px !important;
   min-width: 34px !important;
   min-height: 34px !important;
   flex: 0 0 34px !important;
   background-color: var(--mb-ink, #111811) !important;
   border-radius: 4px !important;
   box-sizing: border-box !important;
}

.mb-ico.mb-ico--navy svg {
   width: 18px !important;
   height: 18px !important;
   fill: currentColor !important;
   display: block !important;
}

/* ==========================================================================
   FIX FOR DARK-ON-DARK HEADINGS & CAROUSEL ARROW CONTRAST
   ========================================================================== */



.mb-carousel__arrow {
   background-color: var(--mb-accent, #9EB82A) !important;
   color: var(--mb-accent-ink, #111811) !important;
   border: 1px solid rgba(255, 255, 255, 0.2) !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
   opacity: 1 !important;
   transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.mb-carousel__arrow svg {
   fill: currentColor !important;
   width: 20px !important;
   height: 20px !important;
}

.mb-carousel__arrow:hover {
   background-color: var(--mb-ink, #111811) !important;
   transform: translateY(-50%) scale(1.08) !important;
}

.mb-dot {
   background: rgba(255, 255, 255, 0.3) !important;
}

.mb-dot.is-active {
   background: var(--mb-accent, #9EB82A) !important;
   transform: scale(1.2) !important;
}

/* ============================== HEADER ============================== */
header.mb-head {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   width: 100% !important;
   z-index: 100000 !important;
   margin-bottom: 0 !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mb-head__topbar {
   background-color: var(--mb-ink);
   color: var(--mb-accent-ink);
   font-size: 15px;
   padding: 10px 0;
   position: relative;
   z-index: 1;
}

.mb-head__topbar-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 0 32px;
}

.mb-head__topbar-right {
   display: flex;
   align-items: center;
   gap: 20px;
}

.mb-head__email {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.mb-head__email:hover {
   text-decoration: underline;
}

.mb-head__soc {
   display: flex;
   gap: 8px;
}

.mb-head__mark {
   display: inline-grid;
   place-items: center;
   width: 26px;
   height: 26px;
   background: var(--mb-surface);
   color: var(--mb-ink);
   border-radius: 2px;
   transition: background 0.2s ease, color 0.2s ease;
}

.mb-head__mark svg {
   width: 15px;
   height: 15px;
}

.mb-head__mark:hover {
   background: var(--mb-accent);
   color: var(--mb-accent-ink);
}

header.mb-head .mb-head__main,
.mb-head__main {
   position: relative !important;
   top: auto !important;
   left: auto !important;
   right: auto !important;
   width: 100% !important;
   box-sizing: border-box !important;
   background-color: var(--mb-surface);
   border-bottom: 1px solid var(--mb-line);
   z-index: 1000 !important;
}

.mb-head__main.is-fixed {
   position: relative !important;
}

/* ============================== SECTION TITLE WRAPPERS ============================== */
div.mb-head,
.mb-head--center {
   position: static !important;
   z-index: auto !important;
   margin-bottom: 50px;
}

.mb-head--center {
   text-align: center;
   max-width: 900px;
   margin-inline: auto;
}

.mb-head__main-row {
   width: min(92%, var(--mb-wrap, 1320px));
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 20px;
   min-height: 88px;
   padding: 0;
}

/* ============================== TOP PADDING OFFSETS ============================== */
.mb-hero {
   position: relative;
   width: 100% !important;
   overflow: hidden;
   padding-top: 20px !important;
   padding-bottom: 0 !important;
}

.mb-page-head,
[data-np-page-header],
.mb-section--first,
main>.mb-section:first-child,
main>div:first-child {
   padding-top: 90px !important;
}

.mb-burger {
   display: none;
}

.mb-nav__list {
   display: flex;
   align-items: center;
   gap: 24px;
   list-style: none;
   margin: 0;
   padding: 0;
}

.mb-nav__item {
   position: relative;
}

.mb-nav__link {
   font-size: 16px;
   font-weight: 600;
   color: var(--mb-ink);
   padding: 8px 0;
   transition: color 0.2s ease;
}

.mb-nav__link:hover,
.mb-nav__link.is-active {
   color: var(--mb-accent);
}

.mb-nav__sub {
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 230px;
   background: var(--mb-surface);
   border: 1px solid var(--mb-line);
   box-shadow: var(--mb-shadow-soft);
   list-style: none;
   margin: 0;
   padding: 6px 0;
   display: none;
   z-index: 100;
}

.mb-nav__item:hover>.mb-nav__sub {
   display: block;
}

.mb-nav__sub-link {
   display: block;
   padding: 10px 16px;
   font-size: 15px;
   color: var(--mb-text);
}

.mb-nav__sub-link:hover {
   background: var(--mb-panel);
   color: var(--mb-accent);
}

.mb-head__logo-wrap {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 0;
   z-index: 10;
}

.mb-head__logo {
   display: grid;
   place-items: center;
   position: relative;
   z-index: 2;
}

.mb-head__logo img {
   height: 110px;
   width: auto;
   object-fit: contain;
}

.mb-head__roof-shape {
   position: absolute;
   top: -12px;
   width: 0;
   height: 0;
   border-left: 120px solid transparent;
   border-right: 120px solid transparent;
   border-bottom: 45px solid var(--mb-accent);
   z-index: 1;
   pointer-events: none;
}

.mb-head__aside {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 12px;
}

.mb-head__book,
.mb-head__call {
   font-size: 16px;
   padding: 16px 20px;
   white-space: nowrap;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mb-head__phoneico {
   display: none;
   place-items: center;
   width: 46px;
   height: 46px;
   background: var(--mb-ink);
   color: var(--mb-accent-ink);
}

/* ============================== HERO ============================== */
.mb-hero {
   position: relative;
   background-color: var(--mb-hero-bg, var(--mb-band));
   background-image: var(--mb-hero-image, none);
   background-size: var(--mb-hero-size, cover);
   background-repeat: var(--mb-hero-repeat, no-repeat);
   background-position: var(--mb-hero-position, center);
   color: var(--mb-hero-ink, var(--mb-accent-ink));
   width: 100% !important;
   overflow: hidden;
}

.mb-hero>.mb-wrap {
   width: 100% !important;
   max-width: 100% !important;
   margin-inline: 0 !important;
   padding-left: max(4%, calc((100% - var(--mb-wrap, 1320px)) / 2)) !important;
   padding-right: 0 !important;
}

.mb-hero__wrap {
   width: min(92%, var(--mb-wrap, 1320px)) !important;
   max-width: 100% !important;
   margin: 0 auto !important;
   padding: 0 !important;
}

.mb-hero__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 40px;
   align-items: stretch;
   position: relative;
   width: 100%;
}

.mb-hero__copy {
   position: relative;
   z-index: 2;
   max-width: 100% !important;
   margin-left: 0 !important;
   padding-left: 0 !important;
   padding-bottom: 40px !important;
}

.mb-hero__title {
   font-size: 74px;
   line-height: 1.3;
   color: var(--mb-hero-ink, var(--mb-accent-ink));
   margin: 0 0 20px;
}

.mb-hero__brand {
   color: var(--mb-hero-ink, var(--mb-accent-ink));
   margin-right: 0.24em;
}

.mb-hero__sub {
   font-size: 24px;
   font-weight: 600;
   line-height: 1.35;
   text-transform: uppercase;
   color: var(--mb-accent-ink, #FFFFFF) !important;
   margin: 0 0 28px;
   padding: 14px 20px;
   background-color: transparent !important;
   background-image: linear-gradient(90deg, var(--mb-accent, #67752B) 0%, transparent 100%) !important;
   border-left: 4px solid var(--mb-accent, #67752B) !important;
}



.mb-hero__media {
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 100%;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   margin: 0 !important;
   padding: 0;
   overflow: hidden;
}

.mb-hero__img {
   width: 100%;
   height: 100%;
   min-height: 100%;
   max-height: none;
   object-fit: cover;
   object-position: center;
   margin: 0;
   padding: 0;
   display: block;
}

.mb-hero__img--overlay {
   position: absolute;
   right: 0;
   bottom: 0;
   max-height: 90%;
   width: auto;
   object-fit: contain;
   z-index: 2;
   margin: 0;
   padding: 0;
}

.mb-proof {
   display: flex;
   gap: 16px;
   list-style: none;
   margin: 0;
   padding: 0;
   flex-wrap: wrap;
}

.mb-proof__link {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 16px;
   background: rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.18);
}

.mb-proof__mark {
   width: 44px;
   height: 44px;
   object-fit: contain;
}

.mb-proof__line {
   display: flex;
   align-items: center;
   gap: 8px;
}

.mb-proof__score {
   font-size: 18px;
   font-weight: 700;
   color: var(--mb-accent-ink);
}

.mb-proof__stars {
   color: var(--mb-gold);
   font-size: 15px;
   letter-spacing: 2px;
}

.mb-proof__note {
   display: block;
   font-size: 14px;
   font-style: italic;
   color: var(--mb-body-grey-dark);
}

/* ============================== QUOTE CARD ============================== */
.mb-quote {
   background: var(--mb-lightband-bg, var(--mb-surface));
   padding: 40px 0 !important;
   position: relative;
   z-index: 20;
   margin-top: 0 !important;
   width: 100% !important;
}

.mb-quote__box {
   background: var(--mb-surface);
   box-shadow: var(--mb-shadow-soft);
   padding: 32px;
   position: relative;
   z-index: 5;
   border-radius: var(--mb-radius);
}

.mb-quote__title {
   font-size: 28px;
   text-align: center;
   margin: 0 0 24px;
   color: var(--mb-ink);
}

.mb-quote__row {
   display: grid;
   grid-template-columns: repeat(5, 1fr) auto;
   gap: 12px;
   align-items: center;
   width: 100%;
}

.mb-quote__field {
   width: 100%;
}

.mb-quote__row input {
   width: 100%;
   box-sizing: border-box;
   font-family: var(--mb-body);
   font-size: 16px;
   padding: 16px 20px;
   background: var(--mb-paper);
   border: 1px solid var(--mb-line);
   border-radius: var(--mb-radius);
   color: var(--mb-text);
   outline: none;
   min-height: 54px;
}

.mb-quote__row input::placeholder {
   color: var(--mb-muted);
}

.mb-quote__row input:focus {
   border-color: var(--mb-ink);
}

.mb-quote__row .mb-btn,
.mb-quote__submit {
   white-space: nowrap;
   font-size: 18px;
   width: 100%;
   min-height: 54px;
   box-sizing: border-box;
}

.mb-quote__badges {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 36px;
   flex-wrap: wrap;
   margin-top: 28px;
   padding-top: 22px;
   border-top: 1px solid var(--mb-line, rgba(0, 0, 0, 0.08));
}

.mb-quote__badges .mb-badges__img {
   max-height: 50px;
   width: auto;
   object-fit: contain;
   filter: grayscale(0.2);
   transition: filter 0.2s ease, transform 0.2s ease;
}

.mb-quote__badges .mb-badges__img:hover {
   filter: grayscale(0);
   transform: scale(1.05);
}

.mb-quote+#badges,
.mb-quote~#badges {
   display: none;
}

.mb-quote__note {
   text-align: center;
   font-size: 15px;
   color: var(--mb-muted);
   margin: 16px 0 0;
}

/* ============================== CTA & FORMS ============================== */
.mb-cta {
   position: relative;
}

.mb-cta__row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 60px;
   align-items: center;
}

.mb-cta__tagline {
   font-size: 18px;
   font-style: italic;
   color: var(--mb-body-grey-dark);
   margin-bottom: 28px;
}

.mb-cta__phone {
   display: inline-flex;
   align-items: center;
   gap: 16px;
   background: var(--mb-accent);
   color: var(--mb-accent-ink);
   padding: 16px 26px;
}

.mb-cta__phone:hover {
   background: var(--mb-surface);
   color: var(--mb-ink);
}

.mb-cta__phoneico svg {
   width: 26px;
   height: 26px;
   display: block;
}

.mb-cta__phone-label {
   display: block;
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   opacity: 0.9;
}

.mb-cta__phone-num {
   display: block;
   font-family: var(--mb-display);
   font-size: 24px;
   font-weight: 700;
   line-height: 1.2;
}

.mb-cta__formwrap {
   background: var(--mb-surface);
   box-shadow: var(--mb-shadow);
   padding: 30px;
}

.mb-split>.mb-cta__formwrap {
   position: sticky;
   top: 110px;
}

#service-hero .mb-split {
   grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}

.mb-cta__formtitle {
   font-size: 26px;
   text-align: center;
   margin: 0 0 22px;
   color: var(--mb-ink);
}

.mb-cta__form {
   display: grid;
   gap: 16px;
   width: 100%;
}

.mb-field-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   width: 100%;
}

.mb-field {
   display: grid;
   gap: 6px;
   width: 100%;
}

.mb-field__lbl {
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--mb-ink);
}

.mb-field__lbl b {
   color: var(--mb-accent);
}

.mb-field input,
.mb-field textarea,
.mb-field select {
   width: 100%;
   box-sizing: border-box;
   font-family: var(--mb-body);
   font-size: 16px;
   padding: 15px 18px;
   background: var(--mb-paper);
   border: 1px solid var(--mb-line);
   border-radius: var(--mb-radius);
   color: var(--mb-text);
   outline: none;
   min-height: 50px;
}

.mb-field textarea {
   resize: vertical;
   min-height: 130px;
}

.mb-field input:focus,
.mb-field textarea:focus,
.mb-field select:focus {
   border-color: var(--mb-ink);
}

/* ============================== AREAS ============================== */
.mb-areas {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
   gap: 50px;
   align-items: start;
}

.mb-areas__map {
   width: 100%;
   object-fit: cover;
}

.mb-areas__list {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 14px 22px;
   list-style: none;
   margin: 0;
   padding: 0;
}

.mb-areas__list a {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 17px;
   font-weight: 600;
   text-transform: uppercase;
   color: var(--mb-accent-ink);
   padding: 8px 0;
   transition: color 0.2s ease;
}

.mb-areas__list a:hover {
   color: var(--mb-gold);
}

.mb-areas__pin {
   color: var(--mb-accent);
   flex: 0 0 16px;
   display: inline-grid;
   place-items: center;
}

.mb-areas__pin svg {
   width: 14px;
   height: 14px;
}

/* ============================== FOOTER ============================== */
.mb-foot {
   background-color: var(--mb-foot-bg, var(--mb-band));
   background-image: var(--mb-foot-image, none);
   background-size: var(--mb-foot-size, auto);
   background-repeat: var(--mb-foot-repeat, repeat);
   background-position: var(--mb-foot-position, center);
   padding: 80px 0 30px;
   color: var(--mb-body-grey-dark);
}

.mb-foot h1,
.mb-foot h2,
.mb-foot h3,
.mb-foot h4 {
   color: var(--mb-light);
}

.mb-foot__top {
   padding-bottom: 30px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mb-foot__logo img {
   max-width: 260px;
   height: auto;
}

.mb-foot__line {
   margin: 18px 0 0;
   font-size: 18px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--mb-light);
}

.mb-foot__mid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
   gap: 60px;
   padding: 44px 0;
}

.mb-foot__contacts {
   display: grid;
   gap: 20px;
}

.mb-foot__item {
   display: flex;
   align-items: center;
   gap: 14px;
}

.mb-foot__ico {
   display: grid;
   place-items: center;
   width: 46px;
   height: 46px;
   flex: 0 0 46px;
   background: rgba(255, 255, 255, 0.12);
   color: var(--mb-light);
}

.mb-foot__ico svg {
   width: 20px;
   height: 20px;
}

.mb-foot__item-body {
   display: flex;
   flex-direction: column;
}

.mb-foot__item-body em {
   font-style: normal;
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--mb-gold);
}

.mb-foot__item-body b {
   font-size: 18px;
   font-weight: 600;
   color: var(--mb-light);
}

.mb-foot__item:hover .mb-foot__item-body b {
   color: var(--mb-gold);
}

.mb-foot__cols {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 30px;
}

.mb-foot__lbl {
   font-family: var(--mb-display);
   font-size: 18px;
   font-weight: 700;
   text-transform: uppercase;
   color: var(--mb-light);
   margin: 0 0 14px;
}

.mb-foot__links {
   list-style: none;
   padding: 0;
   margin: 0;
   display: grid;
   gap: 10px;
}

.mb-foot__links a {
   font-size: 16px;
   color: var(--mb-body-grey-dark);
}

.mb-foot__links a:hover {
   color: var(--mb-light);
}

.mb-foot__cta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
   background: rgba(255, 255, 255, 0.06);
   padding: 24px 30px;
   flex-wrap: wrap;
}

.mb-foot__cta-text {
   font-family: var(--mb-display);
   font-size: 26px;
   font-weight: 700;
   text-transform: uppercase;
   color: var(--mb-light);
   margin: 0;
}

.mb-foot__bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   margin-top: 30px;
   padding-top: 24px;
   border-top: 1px solid rgba(255, 255, 255, 0.15);
   flex-wrap: wrap;
}

.mb-foot__copy {
   margin: 0;
   font-size: 15px;
}

.mb-foot__soc {
   display: flex;
   gap: 8px;
}

.mb-foot .mb-head__mark {
   background: rgba(255, 255, 255, 0.12);
   color: var(--mb-light);
}

.mb-foot .mb-head__mark:hover {
   background: var(--mb-accent);
}

/* ============================== STICKY MOBILE CTA ============================== */
.mb-fab {
   display: none;
   position: sticky;
   bottom: 0;
   z-index: 60;
   background: var(--mb-accent);
   color: var(--mb-accent-ink);
   text-align: center;
   padding: 18px;
   font-family: var(--mb-body);
   font-size: 18px;
   font-weight: 700;
   text-transform: uppercase;
}

/* ============================== SUB-PAGE / ARTICLE ============================== */
.mb-page-head {
   padding: 90px 0 30px;
   background: var(--mb-ink);
   color: var(--mb-accent-ink);
}

.mb-page-head h1,
.mb-page-head h2 {
   color: var(--mb-accent-ink);
}

.mb-article {
   max-width: 820px;
   margin: 0 auto;
}

.mb-article__hero {
   width: 100%;
   aspect-ratio: 16 / 9;
   object-fit: cover;
   margin-bottom: 40px;
}

.mb-article__back {
   display: inline-block;
   font-family: var(--mb-body);
   font-size: 15px;
   font-weight: 700;
   text-transform: uppercase;
   color: var(--mb-accent);
   margin-bottom: 28px;
}

.mb-article__back:hover {
   color: var(--mb-ink);
}

.mb-article__body {
   font-size: 20px;
   line-height: 1.75;
   color: var(--mb-text);
}

/* ============================== MARKDOWN BODY ============================== */
.mb-md__p {
   font-size: 20px;
   line-height: 1.75;
   color: var(--mb-text);
   margin-bottom: 26px;
}

.mb-md__h2,
.mb-md__h3,
.mb-md__h4 {
   color: var(--mb-ink);
   line-height: 1.12;
}

.mb-md__h2 {
   font-size: 34px;
   margin: 48px 0 20px;
   padding-bottom: 12px;
   border-bottom: 1px solid var(--mb-line);
}

.mb-md__h3 {
   font-size: 27px;
   margin: 38px 0 16px;
}

.mb-md__h4 {
   font-size: 21px;
   margin: 30px 0 14px;
}

.mb-md__ul,
.mb-md__ol {
   margin: 0 0 26px 26px;
   font-size: 20px;
   line-height: 1.75;
   color: var(--mb-text);
}

.mb-md__ul {
   list-style: disc;
}

.mb-md__ol {
   list-style: decimal;
}

.mb-md__ul li,
.mb-md__ol li {
   margin-bottom: 10px;
}

.mb-md__quote {
   margin: 32px 0;
   padding: 24px 28px;
   border-left: 4px solid var(--mb-accent);
   background: var(--mb-paper);
   font-size: 20px;
   line-height: 1.65;
}

.mb-md__quote .mb-md__p {
   margin: 0;
   font-size: inherit;
}

.mb-md__hr {
   border: 0;
   border-top: 1px solid var(--mb-line);
   margin: 44px 0;
}

.mb-md__table-wrap {
   overflow-x: auto;
   margin: 32px 0;
}

.mb-md__table {
   width: 100%;
   border-collapse: collapse;
   font-size: 17px;
}

.mb-md__table th,
.mb-md__table td {
   border: 1px solid var(--mb-line);
   padding: 12px 14px;
   text-align: left;
}

.mb-md__table th {
   font-family: var(--mb-display);
   text-transform: uppercase;
   font-size: 15px;
   background: var(--mb-paper);
   color: var(--mb-ink);
}

/* ============================== RESPONSIVE / TABLET & MOBILE ============================== */
@media (max-width: 1480px) {
   .mb-carousel__arrow--prev {
      left: 0;
   }

   .mb-carousel__arrow--next {
      right: 0;
   }

   .mb-hero__title {
      font-size: 62px;
   }
}

@media (max-width: 1200px) {
   :root {
      --mb-section-y: 100px;
   }

   .mb-h2 {
      font-size: 44px;
   }

   .mb-hero__title {
      font-size: 52px;
   }

   .mb-quote__row {
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
   }

   .mb-quote__row .mb-btn,
   .mb-quote__submit {
      grid-column: span 3;
      width: 100%;
   }

   .mb-cert,
   .mb-cta__row,
   .mb-foot__mid {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .mb-carousel__arrow {
      width: 44px;
      height: 44px;
   }
}

@media (max-width: 1024px) {
   :root {
      --mb-section-y: 80px;
   }

   .mb-band,
   .mb-section {
      padding: 50px 0 !important;
   }

   .mb-head__main-row {
      grid-template-columns: auto 1fr auto;
      gap: 12px;
      padding: 0 16px;
      width: 100%;
   }

   .mb-burger {
      display: grid !important;
      gap: 4px;
      width: 44px;
      height: 44px;
      place-content: center;
      background: var(--mb-ink);
      border: 0;
      cursor: pointer;
      position: relative;
      z-index: 100;
      pointer-events: auto !important;
   }

   .mb-burger span {
      display: block;
      width: 20px;
      height: 2px;
      background: var(--mb-accent-ink);
      pointer-events: none;
   }

   .mb-nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--mb-surface);
      border-bottom: 1px solid var(--mb-line);
      display: none;
      z-index: 60;
   }

   .mb-nav.is-open {
      display: block;
   }

   .mb-nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 10px 0;
   }

   .mb-nav__item {
      border-bottom: 1px solid var(--mb-line);
   }

   .mb-nav__link {
      display: block;
      padding: 14px 4%;
   }

   .mb-nav__sub {
      position: static;
      border: 0;
      box-shadow: none;
      padding-left: 12px;
   }

   .mb-nav__item:hover>.mb-nav__sub {
      display: block;
   }

   .mb-head__aside {
      display: flex !important;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
   }

   .mb-head__book {
      display: none !important;
   }

   .mb-head__call {
      display: inline-flex !important;
      align-items: center;
      gap: 6px;
      padding: 8px 12px !important;
      font-size: 14px !important;
      white-space: nowrap;
      border-radius: 4px;
   }

   .mb-head__call .mb-btn__ico svg {
      width: 16px;
      height: 16px;
   }

   .mb-head__phoneico {
      display: grid;
   }

   .mb-head__logo-wrap {
      margin-top: 0;
   }

   .mb-head__roof-shape {
      display: none;
   }

   .mb-head__logo img {
      height: 65px;
   }

   .mb-hero {
      padding-top: 20px !important;
   }

   .mb-hero>.mb-wrap {
      width: 100% !important;
      max-width: 100% !important;
      margin-inline: auto !important;
      padding-left: 4% !important;
      padding-right: 4% !important;
   }

   .mb-hero__row,
   .mb-about,
   .mb-split,
   .mb-cert,
   .mb-areas {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .mb-split--media-first .mb-split__media {
      order: 2;
   }

   .mb-hero__media {
      position: relative;
      width: 100%;
      min-height: 340px;
   }

   .mb-quote__box {
      margin-top: -50px;
      padding: 24px 20px;
   }

   .mb-quote__row {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
   }

   .mb-quote__row .mb-btn,
   .mb-quote__submit {
      grid-column: span 2;
      width: 100%;
   }

   .mb-head-row {
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: start;
   }

   .mb-grid--3 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .mb-gallery-grid {
      columns: 2;
      column-gap: 14px;
   }

   .mb-gallery-grid .mb-gallery__item {
      margin-bottom: 14px;
   }

   .mb-foot__cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .mb-split>.mb-cta__formwrap {
      position: static;
   }

   #service-hero .mb-split {
      grid-template-columns: minmax(0, 1fr);
   }

   .mb-page-head,
   [data-np-page-header],
   .mb-section--first,
   main>.mb-section:first-child,
   main>div:first-child {
      padding-top: 90px !important;
   }
}

@media (max-width: 767px) {
   body.mb {
      font-size: 18px;
   }

   :root {
      --mb-section-y: 60px;
   }

   .mb-h2 {
      font-size: 30px;
   }

   .mb-h2--center,
   .mb-head--center {
      text-align: left;
   }

   .mb-hero__row {
      padding: 40px 0 80px;
   }

   .mb-hero__title {
      font-size: 34px;
      line-height: 1.2;
   }

   .mb-hero__sub {
      font-size: 17px;
   }

   .mb-head__topbar-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 0 32px;
   }

   .mb-quote__row,
   .mb-field-row,
   .mb-cert__boxes,
   .mb-disc,
   .mb-areas__list,
   .mb-foot__cols,
   .mb-grid--3 {
      grid-template-columns: 1fr;
   }

   .mb-quote__submit {
      grid-column: auto;
      width: 100%;
   }

   .mb-field input,
   .mb-field textarea,
   .mb-field select {
      width: 100%;
      box-sizing: border-box;
   }

   .mb-quote__box {
      margin-top: 0;
      padding: 20px 16px;
   }

   .mb-quote__title {
      font-size: 22px;
      margin-bottom: 18px;
   }

   .mb-quote__row .mb-btn,
   .mb-quote__submit {
      grid-column: auto;
      width: 100%;
   }

   .mb-carousel__track {
      --slides-per-view: 1;
   }

   .mb-carousel__track>* {
      flex-basis: 100%;
   }

   .mb-carousel__arrow {
      display: none;
   }

   .mb-work-headline {
      font-size: 36px;
   }

   .mb-filters,
   .mb-filters__list {
      gap: 16px;
   }

   .mb-gallery-grid {
      columns: 1;
   }

   .mb-gallery-grid .mb-gallery__item {
      margin-bottom: 12px;
   }

   .mb-btn {
      font-size: 17px;
      padding: 17px 20px;
   }

   .mb-marquee__text {
      font-size: 20px;
   }

   .mb-marquee__ico {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
   }

   .mb-foot__cta {
      flex-direction: column;
      align-items: flex-start;
   }

   .mb-foot__cta-text {
      font-size: 20px;
   }

   .mb-fab {
      display: block;
   }
}

@media (max-width: 540px) {
   .mb-head__call [data-slot="business.phone"] {
      display: none !important;
   }

   .mb-head__call {
      padding: 10px !important;
      border-radius: 50% !important;
      width: 40px;
      height: 40px;
      justify-content: center;
   }

   .mb-hero__title {
      font-size: 32px;
   }
}

@media (max-width: 480px) {
   .mb-hero__title {
      font-size: 28px;
   }

   .mb-areas__list {
      grid-template-columns: 1fr;
   }
}

/* ============================== PRINT ============================== */
@media print {

   .mb-nav,
   .mb-fab,
   .mb-head__soc,
   .mb-badges,
   .mb-carousel__arrow,
   .mb-carousel__dots,
   .mb-marquee {
      display: none;
   }

   body.mb {
      background: #fff;
      color: #000;
   }
}

/* ============================== ICON GLYPHS ============================== */
.mb-ico[data-icon="phone"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 7.5C10.5 12.75 11.25 15 17.15 17.15 19 17.8 20.2 16.5 20.5 14.9 20.75 13.6 19.9 12.6 18.4 12.5 17.25 12.45 16.45 12.7 15.9 13.2 14.7 12.4 13.2 11.2 11.9 9.9 11.25 8.7 11.2 7.1 11.25 5.8 11.3 4.1 10.1 3.2 8.8 3.6 7.3 4.1 5.1 5.9 5.9 7.9 6.6 9.9 9.8 10.2 10.5 7.5Z' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="chat"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v12H8.5L3 20z' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="mail"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='4' width='20' height='16' rx='2.5' fill='black'/%3E%3Cpath d='M4 7l8 5.5L20 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="map-pin"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="clock"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='black'/%3E%3Cpath d='M12 6.5V12l4 2.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="calendar"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='3' fill='black'/%3E%3Cpath d='M3 10.5h18M9 10.5V21M15 10.5V21' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="calendar-check"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='16' rx='3' fill='black'/%3E%3Cpath d='M8 11.5l2.6 2.6 5.4-5.2' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="file-search"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h8l6 6v6.5h-3.2A5.3 5.3 0 0 0 12 12.5a5.3 5.3 0 0 0-.6 10.5H5z' fill='black'/%3E%3Ccircle cx='12' cy='17.5' r='4' fill='black'/%3E%3Cpath d='M15 20.5l4.5 4.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="clipboard-check"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='14' height='17' rx='2.5' fill='black'/%3E%3Crect x='9' y='2' width='6' height='4' rx='1.5' fill='black'/%3E%3Cpath d='M8.5 13l2.5 2.5 4.5-4.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="clipboard-search"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='14' height='17' rx='2.5' fill='black'/%3E%3Crect x='9' y='2' width='6' height='4' rx='1.5' fill='black'/%3E%3Ccircle cx='11.5' cy='14' r='3.4' fill='white' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M13.9 16.4l3.6 3.6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="search"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='black' stroke-width='2.8'/%3E%3Cpath d='M15.2 15.2L21 21' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="list-check"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10.5l2 2 3.8-4M12 11.5h9M5 18.3l2 2 3.8-4' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5h9' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="hard-hat"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 17a9 9 0 0 1 3.2-6.4V8.2h10.6v2.4A9 9 0 0 1 20.5 17z' fill='black'/%3E%3Crect x='7.5' y='4' width='9' height='3.6' rx='1.8' fill='black'/%3E%3Crect x='2' y='16.6' width='20' height='3' rx='1.5' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="hammer"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 16.5 6.5 13.5 17 4l3 3-9.5 10.5z' fill='black'/%3E%3Cpath d='M13 2l5 5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="wrench"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 3a6 6 0 0 0-5.6 8.2L3 18.1V21h3.9l6.3-6.3A6 6 0 0 0 21 9.5c0-.7-.1-1.3-.3-1.9l-3.4 3.4-2.8-2.8 3.4-3.4c-.6-.5-1.5-.8-2.4-.8z' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="home"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 22 11.5h-3v9H5v-9H2z' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="roof"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 13 12 3l10 10' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="paint-roller"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='2.5' width='15' height='7' rx='2' fill='black'/%3E%3Cpath d='M18 5h3.5v6.5H12v3' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='9.5' y='14.5' width='5' height='7' rx='1.5' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="droplet"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5 6 7 9.5 7 13a7 7 0 0 1-14 0c0-3.5 2-7 7-13z' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="star"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.6 7 .8-5.2 4.8 1.4 7L12 17.8 5.8 21.2l1.4-7L2 9.4l7-.8z' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="thumbs-up"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 10.5h4l-.6-4.3c-.1-.6 0-1.2.4-1.6l1-1.1 1.4 3.5c.3.8.5 1.7.5 2.5v6.2H9z' fill='black'/%3E%3Crect x='2.5' y='10.5' width='5' height='11' rx='1.5' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="shield-check"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 20 5v7c0 5-3.4 8.4-8 10-4.6-1.6-8-5-8-10V5z' fill='black'/%3E%3Cpath d='M8 11.5l2.8 2.8L16.5 8.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="users"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='7' r='4' fill='black'/%3E%3Cpath d='M2 21v-2a6 6 0 0 1 6-6h2a6 6 0 0 1 6 6v2z' fill='black'/%3E%3Ccircle cx='17.5' cy='8' r='3.2' fill='black'/%3E%3Cpath d='M17 13.2c2.8 0 5 2.2 5 5v2.8h-4.5V19a7.5 7.5 0 0 0-2-5.4z' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="truck"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='6' width='12' height='9' fill='black'/%3E%3Cpath d='M14 8h4l3 4v3h-7z' fill='black'/%3E%3Ccircle cx='7' cy='17.5' r='2.5' fill='black'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="ruler"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='8.5' width='20' height='7' rx='1.5' fill='black'/%3E%3Cpath d='M6.5 8.5v3M11 8.5v3M15.5 8.5v3M20 8.5v3' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="arrow-right"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10.5h10V6l7 6-7 6v-4.5H4z' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="play"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5 20.5 12 6 20.5z' fill='black'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="check"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5 11-11' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="badge-check"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l4 2 4.5 1.5L19 10l1 5-5 1.5L12 22l-3-5.5L4 15l1-5L3.5 5.5 8 4z' fill='black'/%3E%3Cpath d='M8 11.8l2.8 2.8 5.2-5.4' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mb-ico[data-icon="banknote"] {
   --mb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='6' width='20' height='12' rx='2' fill='black'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='white' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
}