/* Start custom CSS for html, class: .elementor-element-c6d221f *//* ===================================================
   MBD ASSOCIATES
   ABOUT PAGE - SHORT HERO
=================================================== */

.mbd-about-hero {
  position: relative;

  width: 100%;
  min-height: 460px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 135px 0 0;

  background: #f3efe8;

  overflow: hidden;
}


/* ===================================================
   INNER
=================================================== */

.mbd-about-hero-inner {
  position: relative;

  z-index: 2;

  width: calc(100% - 100px);
  max-width: 1440px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1.25fr 0.6fr;

  align-items: end;

  gap: 100px;
}


/* ===================================================
   EYEBROW
=================================================== */

.mbd-about-hero-eyebrow {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-bottom: 24px;

  color: #70685f;

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 0.18em;
  text-transform: uppercase;

  opacity: 0;

  transform: translateY(16px);

  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}


.mbd-about-hero-line {
  display: block;

  width: 38px;
  height: 1px;

  background: #8c8277;

  transform: scaleX(0);

  transform-origin: left;

  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ===================================================
   TITLE
=================================================== */

.mbd-about-hero-title {
  max-width: 900px;

  margin: 0;

  color: #171717;

  font-size: clamp(52px, 5vw, 78px);

  font-weight: 400;

  line-height: 0.98;

  letter-spacing: -0.052em;

  opacity: 0;

  transform: translateY(28px);

  transition:
    opacity 0.9s ease 0.08s,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}


.mbd-about-hero-title span {
  display: block;

  margin-top: 6px;

  color: #716a62;

  font-weight: 400;
}


/* ===================================================
   RIGHT DESCRIPTION
=================================================== */

.mbd-about-hero-side {
  position: relative;

  padding: 0 0 8px 27px;

  border-left: 1px solid rgba(23,23,23,0.14);

  opacity: 0;

  transform: translateY(22px);

  transition:
    opacity 0.8s ease 0.18s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}


.mbd-about-hero-number {
  display: block;

  margin-bottom: 16px;

  color: #a0978d;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.16em;
}


.mbd-about-hero-side p {
  max-width: 430px;

  margin: 0;

  color: #5e5851;

  font-size: 14px;

  line-height: 1.75;
}


/* ===================================================
   DECORATIVE CIRCLES
=================================================== */

.mbd-about-hero-decor {
  position: absolute;

  top: 0;
  right: 0;

  width: 460px;
  height: 100%;

  pointer-events: none;

  opacity: 0.55;
}


.mbd-about-circle {
  position: absolute;

  display: block;

  border: 1px solid rgba(23,23,23,0.07);

  border-radius: 50%;
}


.mbd-about-circle-one {
  width: 400px;
  height: 400px;

  right: -190px;
  top: -190px;
}


.mbd-about-circle-two {
  width: 270px;
  height: 270px;

  right: -95px;
  top: -120px;
}


/* ===================================================
   BOTTOM STRIP
=================================================== */

.mbd-about-hero-bottom {
  position: relative;

  z-index: 3;

  margin-top: 60px;

  border-top: 1px solid rgba(23,23,23,0.12);
}


.mbd-about-hero-bottom-inner {
  width: calc(100% - 100px);
  max-width: 1440px;

  min-height: 70px;

  margin: 0 auto;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;

  opacity: 0;

  transition:
    opacity 0.8s ease 0.28s;
}


/* ===================================================
   META
=================================================== */

.mbd-about-hero-meta {
  display: flex;
  align-items: center;

  gap: 11px;

  color: #837a70;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.mbd-about-meta-dot {
  width: 3px;
  height: 3px;

  display: block;

  background: #9d948a;

  border-radius: 50%;
}


/* ===================================================
   SCROLL LINK
=================================================== */

.mbd-about-scroll {
  display: inline-flex;
  align-items: center;

  gap: 12px;

  color: #171717;

  text-decoration: none;

  font-size: 11px;
  font-weight: 500;
}


.mbd-about-scroll-icon {
  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(23,23,23,0.18);

  border-radius: 50%;

  transition:
    background 0.35s ease,
    color 0.35s ease,
    transform 0.35s ease;
}


.mbd-about-scroll-icon svg {
  width: 16px;
  height: 16px;
}


.mbd-about-scroll:hover
.mbd-about-scroll-icon {
  background: #171717;

  color: #ffffff;

  transform: translateY(3px);
}


/* ===================================================
   REVEAL
=================================================== */

.mbd-about-hero.is-visible
.mbd-about-hero-eyebrow,

.mbd-about-hero.is-visible
.mbd-about-hero-title,

.mbd-about-hero.is-visible
.mbd-about-hero-side {
  opacity: 1;

  transform: translateY(0);
}


.mbd-about-hero.is-visible
.mbd-about-hero-line {
  transform: scaleX(1);
}


.mbd-about-hero.is-visible
.mbd-about-hero-bottom-inner {
  opacity: 1;
}


/* ===================================================
   ELEMENTOR EDITOR
=================================================== */

.elementor-editor-active
.mbd-about-hero-eyebrow,

.elementor-editor-active
.mbd-about-hero-title,

.elementor-editor-active
.mbd-about-hero-side,

.elementor-editor-active
.mbd-about-hero-bottom-inner {
  opacity: 1 !important;

  transform: none !important;
}


.elementor-editor-active
.mbd-about-hero-line {
  transform: scaleX(1) !important;
}


/* ===================================================
   TABLET
=================================================== */

@media (max-width: 900px) {

  .mbd-about-hero {
    min-height: 430px;

    padding-top: 75px;
  }


  .mbd-about-hero-inner,
  .mbd-about-hero-bottom-inner {
    width: calc(100% - 50px);
  }


  .mbd-about-hero-inner {
    grid-template-columns: 1fr;

    gap: 35px;
  }


  .mbd-about-hero-side {
    max-width: 600px;
  }


  .mbd-about-hero-bottom {
    margin-top: 45px;
  }

}


/* ===================================================
   MOBILE
=================================================== */

@media (max-width: 600px) {

  .mbd-about-hero {
    min-height: auto;

    padding-top: 60px;
  }


  .mbd-about-hero-inner,
  .mbd-about-hero-bottom-inner {
    width: calc(100% - 36px);
  }


  .mbd-about-hero-eyebrow {
    gap: 10px;

    margin-bottom: 19px;

    font-size: 9px;
  }


  .mbd-about-hero-line {
    width: 26px;
  }


  .mbd-about-hero-title {
    font-size: clamp(42px, 12vw, 58px);

    line-height: 1;
  }


  .mbd-about-hero-inner {
    gap: 28px;
  }


  .mbd-about-hero-side {
    padding-left: 18px;
  }


  .mbd-about-hero-side p {
    font-size: 13px;
  }


  .mbd-about-hero-number {
    margin-bottom: 10px;
  }


  .mbd-about-hero-bottom {
    margin-top: 40px;
  }


  .mbd-about-hero-bottom-inner {
    min-height: 64px;
  }


  .mbd-about-hero-meta {
    display: none;
  }


  .mbd-about-scroll {
    margin-left: auto;
  }

}


/* ===================================================
   REDUCED MOTION
=================================================== */

@media (prefers-reduced-motion: reduce) {

  .mbd-about-hero-eyebrow,
  .mbd-about-hero-title,
  .mbd-about-hero-side,
  .mbd-about-hero-line,
  .mbd-about-hero-bottom-inner {
    transition: none !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3a98609 *//* ===================================================
   MBD ASSOCIATES
   OUR STORY — WHITE VERSION
=================================================== */

.mbd-story-section {
  position: relative;
  width: 100%;

  padding: 115px 0;

  /* Different from warm ivory hero */
  background: #ffffff;

  overflow: visible;
}


.mbd-story-inner {
  width: calc(100% - 100px);
  max-width: 1440px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 0.78fr 1.22fr;

  gap: 100px;

  align-items: start;
}


/* ===================================================
   LEFT VISUAL
=================================================== */

.mbd-story-visual {
  position: sticky;

  top: 110px;
}


/* PORTRAIT IMAGE */

.mbd-story-image-wrap {
  position: relative;

  width: 100%;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  background: #e8ecee;
}


.mbd-story-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1.06);

  transition:
    transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}


/* subtle image overlay */

.mbd-story-image-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(36, 50, 58, 0) 55%,
      rgba(36, 50, 58, 0.30) 100%
    );

  pointer-events: none;
}


/* ===================================================
   YEAR BADGE
=================================================== */

.mbd-story-image-badge {
  position: absolute;

  left: 24px;
  bottom: 24px;

  min-width: 125px;

  padding: 15px 18px;

  display: flex;
  flex-direction: column;

  background: rgba(255, 255, 255, 0.93);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #24323a;

  opacity: 0;

  transform: translateY(18px);

  transition:
    opacity 0.7s ease 0.35s,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}


.mbd-story-image-badge span {
  color: #788287;

  font-size: 8px;
  font-weight: 600;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


.mbd-story-image-badge strong {
  margin-top: 3px;

  color: #24323a;

  font-size: 29px;
  font-weight: 500;

  line-height: 1;

  letter-spacing: -0.035em;
}


/* ===================================================
   IMAGE CAPTION
=================================================== */

.mbd-story-image-caption {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-top: 14px;

  color: #899195;

  font-size: 8px;
  font-weight: 600;

  line-height: 1.5;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.mbd-story-image-caption span:last-child {
  text-align: right;
}


/* ===================================================
   CONTENT
=================================================== */

.mbd-story-content {
  max-width: 750px;

  padding-top: 8px;
}


/* ===================================================
   EYEBROW
=================================================== */

.mbd-story-eyebrow {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-bottom: 24px;

  color: #6e8792;

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.19em;

  text-transform: uppercase;

  opacity: 0;

  transform: translateY(16px);

  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}


.mbd-story-eyebrow-line {
  display: block;

  width: 38px;
  height: 1px;

  background: #6e8792;

  transform: scaleX(0);

  transform-origin: left;

  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ===================================================
   TITLE
=================================================== */

.mbd-story-title {
  max-width: 730px;

  margin: 0;

  color: #24323a;

  font-size: clamp(40px, 3.55vw, 59px);

  font-weight: 400;

  line-height: 1.055;

  letter-spacing: -0.045em;

  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity 0.85s ease 0.07s,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.07s;
}


.mbd-story-title span {
  display: block;

  margin-top: 5px;

  color: #53656d;

  font-weight: 500;
}


/* ===================================================
   BODY COPY
=================================================== */

.mbd-story-copy {
  max-width: 690px;

  margin-top: 31px;
}


.mbd-story-copy p {
  margin: 0 0 21px;

  color: #687276;

  font-size: 14px;

  line-height: 1.85;

  opacity: 0;

  transform: translateY(18px);

  transition:
    opacity 0.75s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}


.mbd-story-copy p:last-child {
  margin-bottom: 0;
}


/* ===================================================
   PULL QUOTE
=================================================== */

.mbd-story-quote {
  position: relative;

  max-width: 690px;

  margin: 40px 0;

  padding: 32px 35px 32px 70px;

  /*
   * Blue-grey instead of another beige
   * to distinguish it from the hero.
   */
  background: #edf2f3;

  border-left: 2px solid #6e8792;

  opacity: 0;

  transform: translateY(20px);

  transition:
    opacity 0.8s ease 0.28s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.28s;
}


.mbd-story-quote-mark {
  position: absolute;

  left: 25px;
  top: 18px;

  color: #6e8792;

  font-size: 54px;
  font-weight: 400;

  line-height: 1;
}


.mbd-story-quote p {
  margin: 0;

  color: #35474f;

  font-size: clamp(20px, 1.8vw, 27px);

  font-weight: 400;

  line-height: 1.42;

  letter-spacing: -0.025em;
}


/* ===================================================
   REVEAL
=================================================== */

.mbd-story-section.is-visible
.mbd-story-eyebrow,

.mbd-story-section.is-visible
.mbd-story-title,

.mbd-story-section.is-visible
.mbd-story-copy p,

.mbd-story-section.is-visible
.mbd-story-quote,

.mbd-story-section.is-visible
.mbd-story-image-badge {
  opacity: 1;

  transform: translateY(0);
}


.mbd-story-section.is-visible
.mbd-story-eyebrow-line {
  transform: scaleX(1);
}


.mbd-story-section.is-visible
.mbd-story-image {
  transform: scale(1);
}


/* staggered body */

.mbd-story-section.is-visible
.mbd-story-copy p:nth-child(1) {
  transition-delay: 0.13s;
}


.mbd-story-section.is-visible
.mbd-story-copy p:nth-child(2) {
  transition-delay: 0.19s;
}


.mbd-story-section.is-visible
.mbd-story-copy p:nth-child(3) {
  transition-delay: 0.25s;
}


.mbd-story-section.is-visible
.mbd-story-copy-bottom p {
  transition-delay: 0.37s;
}


/* ===================================================
   ELEMENTOR EDITOR FIX
=================================================== */

.elementor-editor-active
.mbd-story-eyebrow,

.elementor-editor-active
.mbd-story-title,

.elementor-editor-active
.mbd-story-copy p,

.elementor-editor-active
.mbd-story-quote,

.elementor-editor-active
.mbd-story-image-badge {
  opacity: 1 !important;

  transform: none !important;
}


.elementor-editor-active
.mbd-story-eyebrow-line {
  transform: scaleX(1) !important;
}


.elementor-editor-active
.mbd-story-image {
  transform: none !important;
}


.elementor-editor-active
.mbd-story-visual {
  position: relative !important;

  top: auto !important;
}


/* ===================================================
   LAPTOP
=================================================== */

@media (max-width: 1200px) {

  .mbd-story-section {
    padding: 95px 0;
  }


  .mbd-story-inner {
    width: calc(100% - 70px);

    gap: 65px;
  }

}


/* ===================================================
   TABLET
=================================================== */

@media (max-width: 900px) {

  .mbd-story-section {
    padding: 80px 0;
  }


  .mbd-story-inner {
    width: calc(100% - 50px);

    grid-template-columns: 1fr;

    gap: 55px;
  }


  .mbd-story-visual {
    position: relative;

    top: auto;

    max-width: 540px;
  }


  .mbd-story-content {
    max-width: 100%;
  }


  .mbd-story-title,
  .mbd-story-copy,
  .mbd-story-quote {
    max-width: 100%;
  }

}


/* ===================================================
   MOBILE
=================================================== */

@media (max-width: 600px) {

  .mbd-story-section {
    padding: 68px 0;
  }


  .mbd-story-inner {
    width: calc(100% - 36px);

    gap: 42px;
  }


  .mbd-story-image-wrap {
    aspect-ratio: 4 / 5;
  }


  .mbd-story-image-badge {
    left: 16px;
    bottom: 16px;

    min-width: 110px;

    padding: 13px 15px;
  }


  .mbd-story-image-badge strong {
    font-size: 25px;
  }


  .mbd-story-image-caption {
    font-size: 7px;
  }


  .mbd-story-eyebrow {
    gap: 10px;

    margin-bottom: 19px;

    font-size: 9px;
  }


  .mbd-story-eyebrow-line {
    width: 25px;
  }


  .mbd-story-title {
    font-size: clamp(35px, 10vw, 47px);
  }


  .mbd-story-copy {
    margin-top: 25px;
  }


  .mbd-story-copy p {
    font-size: 14px;

    line-height: 1.75;

    margin-bottom: 18px;
  }


  .mbd-story-quote {
    margin: 31px 0;

    padding: 27px 22px 27px 53px;
  }


  .mbd-story-quote-mark {
    left: 16px;
    top: 14px;

    font-size: 43px;
  }


  .mbd-story-quote p {
    font-size: 19px;

    line-height: 1.45;
  }

}


/* ===================================================
   REDUCED MOTION
=================================================== */

@media (prefers-reduced-motion: reduce) {

  .mbd-story-eyebrow,
  .mbd-story-title,
  .mbd-story-copy p,
  .mbd-story-quote,
  .mbd-story-image,
  .mbd-story-image-badge,
  .mbd-story-eyebrow-line {
    transition: none !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5ab3575 *//* ===================================================
   MBD ASSOCIATES
   ABOUT PAGE CTA
=================================================== */

.mbd-about-cta {
  position: relative;

  width: 100%;

  padding: 85px 0;

  background: #e7eef0;

  overflow: hidden;
}


.mbd-about-cta-inner {
  width: calc(100% - 100px);
  max-width: 1440px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr auto;

  align-items: end;

  gap: 80px;
}


/* ===================================================
   EYEBROW
=================================================== */

.mbd-about-cta-eyebrow {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 20px;

  color: #6e8792;

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  opacity: 0;

  transform: translateY(16px);

  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}


.mbd-about-cta-line {
  width: 34px;
  height: 1px;

  display: block;

  background: #6e8792;

  transform: scaleX(0);

  transform-origin: left;

  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ===================================================
   HEADING
=================================================== */

.mbd-about-cta-title {
  margin: 0;

  color: #24323a;

  font-size: clamp(42px, 4vw, 64px);

  font-weight: 400;

  line-height: 1.02;

  letter-spacing: -0.045em;

  opacity: 0;

  transform: translateY(24px);

  transition:
    opacity 0.8s ease 0.08s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}


/* ===================================================
   BODY
=================================================== */

.mbd-about-cta-body {
  max-width: 610px;

  margin: 20px 0 0;

  color: #5e6a6f;

  font-size: 15px;

  line-height: 1.7;

  opacity: 0;

  transform: translateY(18px);

  transition:
    opacity 0.75s ease 0.16s,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.16s;
}


/* ===================================================
   ACTION
=================================================== */

.mbd-about-cta-action {
  opacity: 0;

  transform: translateY(18px);

  transition:
    opacity 0.75s ease 0.22s,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;
}


.mbd-about-cta-button {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  min-width: 185px;
  min-height: 56px;

  padding: 0 13px 0 22px;

  background: #24323a;

  color: #ffffff;

  text-decoration: none;

  font-size: 14px;
  font-weight: 500;

  transition:
    background 0.35s ease,
    transform 0.35s ease;
}


.mbd-about-cta-button:hover {
  background: #35474f;

  transform: translateY(-2px);
}


.mbd-about-cta-arrow {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(255,255,255,0.12);

  transition:
    transform 0.35s ease;
}


.mbd-about-cta-button:hover
.mbd-about-cta-arrow {
  transform: translateX(4px);
}


/* ===================================================
   VISIBLE STATE
=================================================== */

.mbd-about-cta.is-visible
.mbd-about-cta-eyebrow,

.mbd-about-cta.is-visible
.mbd-about-cta-title,

.mbd-about-cta.is-visible
.mbd-about-cta-body,

.mbd-about-cta.is-visible
.mbd-about-cta-action {
  opacity: 1;

  transform: translateY(0);
}


.mbd-about-cta.is-visible
.mbd-about-cta-line {
  transform: scaleX(1);
}


/* ===================================================
   ELEMENTOR EDITOR
=================================================== */

.elementor-editor-active
.mbd-about-cta-eyebrow,

.elementor-editor-active
.mbd-about-cta-title,

.elementor-editor-active
.mbd-about-cta-body,

.elementor-editor-active
.mbd-about-cta-action {
  opacity: 1 !important;

  transform: none !important;
}


.elementor-editor-active
.mbd-about-cta-line {
  transform: scaleX(1) !important;
}


/* ===================================================
   TABLET
=================================================== */

@media (max-width: 900px) {

  .mbd-about-cta {
    padding: 75px 0;
  }


  .mbd-about-cta-inner {
    width: calc(100% - 50px);

    grid-template-columns: 1fr;

    gap: 30px;
  }

}


/* ===================================================
   MOBILE
=================================================== */

@media (max-width: 600px) {

  .mbd-about-cta {
    padding: 65px 0;
  }


  .mbd-about-cta-inner {
    width: calc(100% - 36px);
  }


  .mbd-about-cta-eyebrow {
    gap: 10px;

    font-size: 9px;
  }


  .mbd-about-cta-line {
    width: 25px;
  }


  .mbd-about-cta-title {
    font-size: clamp(38px, 11vw, 50px);
  }


  .mbd-about-cta-body {
    font-size: 14px;

    line-height: 1.7;
  }


  .mbd-about-cta-button {
    min-height: 54px;

    min-width: 175px;
  }

}


/* ===================================================
   REDUCED MOTION
=================================================== */

@media (prefers-reduced-motion: reduce) {

  .mbd-about-cta-eyebrow,
  .mbd-about-cta-title,
  .mbd-about-cta-body,
  .mbd-about-cta-action,
  .mbd-about-cta-line {
    transition: none !important;
  }

}/* End custom CSS */