/* Maggie Dixon — About Maggie v5.2 — design polish + story alignment fix
   Fully scoped to .md-about so safe to enqueue globally. */

:root {
  --md-teal: #0E6F73;
  --md-peach: #D8995C;
  --md-cream: #F7F5EF;
  --md-card: #FFFFFF;
  --md-ink: #263134;
  --md-pale: #EEF7F7;
}

.md-about,
.md-about * {
  box-sizing: border-box;
}

.md-about .wpb_text_column {
  margin-bottom: 0 !important;
}

.md-about h1,
.md-about h2,
.md-about h3,
.md-about p {
  margin-top: 0;
}

.md-about h1,
.md-about h2,
.md-about h3 {
  font-weight: 400 !important;
  line-height: 1.06 !important;
}

.md-about p {
  color: var(--md-ink) !important;
  line-height: 1.58 !important;
}

.md-about .md-eyebrow {
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
  color: var(--md-peach) !important;
  margin: 0 0 16px !important;
  font-weight: 600 !important;
}


/* =========================================================
   HERO
   ========================================================= */

body .md-about-hero {
  min-height: 100vh !important;
  height: 100vh !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  overflow: hidden !important;
}

body.admin-bar .md-about-hero {
  min-height: calc(100vh - 32px) !important;
  height: calc(100vh - 32px) !important;
}

body .md-about-hero > .row_col_wrap_12,
body .md-about-hero > .row-bg-wrap + .row_col_wrap_12 {
  min-height: inherit !important;
  height: 100% !important;
  align-items: center !important;
}

body .md-about-hero .md-about-hero-copy {
  padding: 7% 4% 6% 5.5% !important;
  display: flex !important;
  align-items: center !important;
}

body .md-about-hero .md-about-hero-copy > .vc_column-inner,
body .md-about-hero .md-about-hero-copy > .column-inner {
  width: 100% !important;
}

body .md-about-hero h1 {
  color: var(--md-teal) !important;
  font-size: clamp(50px, 4.6vw, 86px) !important;
  line-height: 1.02 !important;
  max-width: 720px !important;
  margin: 0 0 26px !important;
}

body .md-about-hero .md-lead {
  font-size: 17px !important;
  line-height: 1.55 !important;
  max-width: 610px !important;
  margin: 0 0 28px !important;
  color: #40494b !important;
}

body .md-button-row {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

body a.md-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 26px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  transition: .2s ease !important;
}

body a.md-btn-solid {
  background: var(--md-teal) !important;
  color: #fff !important;
  border: 1px solid var(--md-teal) !important;
}

body a.md-btn-outline {
  background: rgba(255, 255, 255, .70) !important;
  color: var(--md-teal) !important;
  border: 1px solid var(--md-teal) !important;
}

body a.md-btn:hover {
  transform: translateY(-1px) !important;
  opacity: .96 !important;
}


/* =========================================================
   STORY
   ========================================================= */

body .md-story {
  position: relative !important;
  margin-top: 55px !important;
  background: var(--md-cream) !important;
  overflow: hidden !important;
}

body .md-story > .row_col_wrap_12 {
  min-height: 650px !important;
  align-items: stretch !important;
}

body .md-story .md-story-copy {
  min-height: 650px !important;
  padding: 7% 6% !important;
  display: flex !important;
  align-items: center !important;
}

body .md-story .md-story-copy > .vc_column-inner,
body .md-story .md-story-copy > .column-inner {
  width: 100% !important;
}

body .md-story h2 {
  color: var(--md-teal) !important;
  font-size: clamp(40px, 3.2vw, 62px) !important;
  line-height: 1.05 !important;
  margin: 0 0 26px !important;
}

body .md-story p {
  font-size: 15px !important;
  max-width: 620px !important;
  margin: 0 0 18px !important;
}

body .md-story .md-story-visual {
  min-height: 650px !important;
  background-size: cover !important;
  background-position: center center !important;
  position: relative !important;
  padding: 0 !important;
}

body .md-story .md-story-visual > .vc_column-inner,
body .md-story .md-story-visual > .column-inner {
  position: relative !important;
  width: 100% !important;
  height: 650px !important;
  min-height: 650px !important;
  padding: 0 !important;
}

body .md-story .md-story-visual .column-image-bg-wrap,
body .md-story .md-story-visual .column-image-bg-wrap .inner-wrap,
body .md-story .md-story-visual .column-image-bg {
  width: 100% !important;
  height: 100% !important;
}

body .md-story .md-story-visual .column-image-bg {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

body .md-story-image {
  position: relative !important;
  width: 100% !important;
  height: 650px !important;
  min-height: 650px !important;
}

body .md-quote-card {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(500px, 72%) !important;
  min-height: 390px !important;

  padding: 55px 58px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  background: rgba(247, 245, 239, .96) !important;
  border-radius: 10px !important;

  box-shadow: 0 18px 45px rgba(46, 49, 43, .10) !important;

  text-align: left !important;

  z-index: 5 !important;

  color: var(--md-peach) !important;
  font-size: 27px !important;
  line-height: 1.35 !important;
}

body .md-quote-card .md-quote-mark {
  display: block !important;
  margin: 0 0 28px !important;

  color: var(--md-peach) !important;

  font-family: Georgia, serif !important;
  font-size: 58px !important;
  line-height: .6 !important;
}

body .md-quote-card p {
  color: var(--md-peach) !important;
  font-size: 27px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

body .md-quote-card .md-quote-name {
  display: block !important;
  margin-top: 44px !important;

  color: #555 !important;

  font-size: 12px !important;
  line-height: 1.4 !important;

  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}


/* =========================================================
   SHARED SECTIONS
   ========================================================= */

body .md-foundation,
body .md-journey,
body .md-approach {
  background: #FBF9F4 !important;
}

body .md-foundation,
body .md-journey,
body .md-approach,
body .md-audiences {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body .md-foundation h2,
body .md-journey h2,
body .md-approach h2,
body .md-audiences h2 {
  color: var(--md-teal) !important;
  font-size: clamp(38px, 3vw, 58px) !important;
  line-height: 1.08 !important;
  margin: 0 0 28px !important;
}

body .md-section-intro {
  max-width: 780px !important;
  margin: 0 auto 28px !important;
  font-size: 16px !important;
}

body .md-card-grid {
  margin-top: 24px !important;
  display: flex !important;
  align-items: stretch !important;
}

body .md-card-grid > .vc_column_container {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body .md-card-grid > .vc_column_container > .vc_column-inner,
body .md-card-grid > .vc_column_container > .column-inner {
  height: 100% !important;
}

body .md-info-card {
  height: 100% !important;
  min-height: 285px !important;

  background: #fff !important;

  border-radius: 12px !important;

  padding: 42px 28px 38px !important;

  box-shadow: 0 14px 34px rgba(31, 43, 42, .10) !important;

  text-align: center !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

body .md-info-card h3 {
  color: var(--md-teal) !important;

  font-size: 24px !important;
  line-height: 1.13 !important;

  margin: 14px 0 14px !important;
}

body .md-info-card p {
  font-size: 15px !important;
  line-height: 1.52 !important;
  margin: 0 !important;
}

body .md-svg-icon {
  width: 54px !important;
  height: 54px !important;

  color: var(--md-teal) !important;

  margin: 0 auto 3px !important;

  display: block !important;
}

body .md-svg-icon svg {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  stroke: currentColor !important;
  fill: none !important;

  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body .md-approach-card .md-svg-icon {
  color: var(--md-peach) !important;
}


/* =========================================================
   PROFESSIONAL JOURNEY
   ========================================================= */

body .md-journey {
  padding-top: 5% !important;
  padding-bottom: 5% !important;
}

body .md-timeline {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

  gap: 28px !important;

  position: relative !important;

  margin-top: 40px !important;
}

body .md-timeline:before {
  content: "" !important;

  position: absolute !important;

  top: 24px !important;

  left: 12.5% !important;
  right: 12.5% !important;

  height: 2px !important;

  background: var(--md-peach) !important;

  opacity: .58 !important;

  z-index: 0 !important;
}

body .md-timeline-item {
  position: relative !important;
  z-index: 1 !important;

  text-align: center !important;

  padding: 0 12px !important;
}

body .md-step {
  display: flex !important;

  width: 50px !important;
  height: 50px !important;

  border-radius: 50% !important;

  background: var(--md-peach) !important;
  color: #fff !important;

  align-items: center !important;
  justify-content: center !important;

  margin: 0 auto 20px !important;

  font-size: 16px !important;
  font-weight: 600 !important;
}

body .md-timeline-item h3 {
  color: var(--md-teal) !important;

  font-size: 24px !important;
  line-height: 1.13 !important;

  margin: 0 0 12px !important;
}

body .md-timeline-item p {
  font-size: 15px !important;
  line-height: 1.48 !important;

  margin: 0 !important;
}


/* =========================================================
   HOW MAGGIE WORKS
   ========================================================= */

body .md-approach {
  padding-top: 5% !important;
  padding-bottom: 5% !important;
}

body .md-approach .md-card-grid {
  margin-top: 26px !important;
}

body .md-approach-card {
  min-height: 305px !important;
}


/* =========================================================
   AUDIENCES
   ========================================================= */

body .md-audiences {
  background: var(--md-pale) !important;

  padding-top: 5% !important;
  padding-bottom: 5% !important;
}

body .md-audience-grid {
  margin-top: 40px !important;

  display: flex !important;
  align-items: stretch !important;
}

body .md-audience-card-col {
  position: relative !important;

  min-height: 390px !important;

  padding-left: 10px !important;
  padding-right: 10px !important;

  border-radius: 12px !important;

  overflow: hidden !important;

  background: transparent !important;

  box-shadow: 0 12px 35px rgba(30, 45, 45, .10) !important;
}

body .md-audience-card-col > .vc_column-inner,
body .md-audience-card-col > .column-inner {
  position: relative !important;

  min-height: 390px !important;
  height: 100% !important;

  padding: 0 !important;

  background: transparent !important;

  border-radius: 12px !important;

  overflow: hidden !important;

  box-shadow: none !important;
}

body .md-audience-card-col .column-image-bg-wrap {
  display: block !important;

  position: absolute !important;

  top: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 225px !important;

  z-index: 1 !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: none !important;
}

body .md-audience-card-col .column-image-bg-wrap .inner-wrap,
body .md-audience-card-col .column-image-bg {
  width: 100% !important;
  height: 100% !important;
}

body .md-audience-card-col .column-image-bg {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  opacity: 1 !important;
  visibility: visible !important;
}

body .md-audience-card-col .wpb_wrapper {
  position: relative !important;

  z-index: 2 !important;

  height: 100% !important;

  background: transparent !important;
}

body .md-audience-card-col .wpb_text_column {
  height: 100% !important;

  margin: 0 !important;

  background: transparent !important;
}

body .md-audience-photo-space {
  display: block !important;

  height: 225px !important;

  background: transparent !important;
}

body .md-audience-copy {
  min-height: 165px !important;

  padding: 25px 28px 28px !important;

  text-align: left !important;

  background: #fff !important;
}

body .md-audience-copy h3 {
  color: var(--md-teal) !important;

  font-size: 25px !important;
  line-height: 1.12 !important;

  margin: 0 0 10px !important;
}

body .md-audience-copy p {
  color: #404040 !important;

  font-size: 16px !important;
  line-height: 1.5 !important;

  margin: 0 !important;
}


/* =========================================================
   CTA
   ========================================================= */

body .md-about-cta {
  min-height: 390px !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  display: flex !important;
  align-items: center !important;

  overflow: hidden !important;
}

body .md-about-cta > .row_col_wrap_12 {
  width: 100% !important;

  align-items: center !important;
}

body .md-about-cta .md-cta-inner {
  max-width: 730px !important;

  margin-left: 6% !important;
}

body .md-about-cta h2 {
  color: var(--md-teal) !important;

  font-size: clamp(40px, 3.3vw, 64px) !important;
  line-height: 1.05 !important;

  margin: 0 0 18px !important;
}

body .md-about-cta .md-cta-inner p {
  max-width: 650px !important;

  font-size: 16px !important;

  margin: 0 0 25px !important;
}


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

@media (max-width: 1000px) {

  body .md-about-hero {
    height: auto !important;
    min-height: 780px !important;

    background-position: 62% center !important;
  }

  body.admin-bar .md-about-hero {
    height: auto !important;
    min-height: 780px !important;
  }

  body .md-about-hero > .row_col_wrap_12 {
    min-height: 780px !important;
  }

  body .md-about-hero .md-about-hero-copy {
    width: 58% !important;
  }

  body .md-about-hero h1 {
    font-size: 54px !important;
  }


  /* Story */

  body .md-story {
    margin-top: 35px !important;
  }

  body .md-story > .row_col_wrap_12 {
    min-height: 560px !important;
  }

  body .md-story .md-story-copy {
    min-height: 560px !important;
  }

  body .md-story .md-story-visual,
  body .md-story .md-story-visual > .vc_column-inner,
  body .md-story .md-story-visual > .column-inner,
  body .md-story-image {
    height: 560px !important;
    min-height: 560px !important;
  }

  body .md-quote-card {
    width: 78% !important;
    min-height: 340px !important;

    padding: 42px !important;

    font-size: 23px !important;
  }

  body .md-quote-card p {
    font-size: 23px !important;
  }


  /* Timeline */

  body .md-timeline {
    grid-template-columns: repeat(2, 1fr) !important;

    gap: 44px 28px !important;
  }

  body .md-timeline:before {
    display: none !important;
  }


  body .md-card-grid-4 > .vc_column_container {
    width: 50% !important;

    margin-bottom: 20px !important;
  }


  /* Audience cards */

  body .md-audience-card-col,
  body .md-audience-card-col > .vc_column-inner,
  body .md-audience-card-col > .column-inner {
    min-height: 360px !important;
  }

  body .md-audience-card-col .column-image-bg-wrap,
  body .md-audience-photo-space {
    height: 200px !important;
  }
}


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

@media (max-width: 690px) {

  body .md-about-hero {
    min-height: 760px !important;

    background-position: 68% center !important;
  }

  body .md-about-hero:before {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, .94) 0%,
      rgba(255, 255, 255, .86) 48%,
      rgba(255, 255, 255, .16) 100%
    ) !important;

    z-index: 1 !important;
  }

  body .md-about-hero > .row_col_wrap_12 {
    position: relative !important;

    z-index: 2 !important;
  }

  body .md-about-hero .md-about-hero-copy {
    width: 100% !important;

    padding: 12% 7% !important;
  }

  body .md-about-hero h1 {
    font-size: 42px !important;

    max-width: 94% !important;
  }

  body .md-about-hero .md-lead {
    font-size: 16px !important;

    max-width: 92% !important;
  }


  /* Story */

  body .md-story {
    margin-top: 25px !important;
  }

  body .md-story > .row_col_wrap_12 {
    display: flex !important;
    flex-direction: column !important;

    min-height: 0 !important;
  }

  body .md-story .md-story-copy,
  body .md-story .md-story-visual {
    width: 100% !important;
  }

  body .md-story .md-story-copy {
    min-height: auto !important;

    padding: 12% 7% !important;
  }

  body .md-story .md-story-visual,
  body .md-story .md-story-visual > .vc_column-inner,
  body .md-story .md-story-visual > .column-inner,
  body .md-story-image {
    height: 500px !important;
    min-height: 500px !important;
  }

  body .md-quote-card {
    width: calc(100% - 50px) !important;

    min-height: auto !important;

    padding: 40px 34px !important;

    font-size: 22px !important;
  }

  body .md-quote-card p {
    font-size: 22px !important;
  }

  body .md-quote-card .md-quote-name {
    margin-top: 32px !important;
  }


  /* Cards */

  body .md-card-grid,
  body .md-audience-grid {
    display: block !important;
  }

  body .md-card-grid > .vc_column_container,
  body .md-card-grid-4 > .vc_column_container,
  body .md-audience-card-col {
    width: 100% !important;

    padding: 0 !important;

    margin: 0 0 20px !important;
  }


  /* Timeline */

  body .md-timeline {
    grid-template-columns: 1fr !important;

    gap: 30px !important;
  }


  /* Audience */

  body .md-audience-card-col {
    margin-bottom: 25px !important;

    min-height: auto !important;
  }

  body .md-audience-card-col > .vc_column-inner,
  body .md-audience-card-col > .column-inner {
    min-height: auto !important;
  }

  body .md-audience-card-col .column-image-bg-wrap,
  body .md-audience-photo-space {
    height: 240px !important;
  }

  body .md-audience-copy {
    min-height: auto !important;

    padding: 24px !important;
  }


  /* CTA */

  body .md-about-cta {
    min-height: 500px !important;

    background-position: 68% center !important;
  }

  body .md-about-cta .md-cta-inner {
    margin: 0 !important;

    padding: 0 7% !important;

    max-width: 92% !important;
  }
}


/* =========================================================
   SECTION RHYTHM
   ========================================================= */

body .md-foundation,
body .md-journey,
body .md-approach,
body .md-audiences {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

body .md-foundation + .md-journey,
body .md-journey + .md-approach,
body .md-approach + .md-audiences {
  margin-top: 0 !important;
}

body .md-foundation .row_col_wrap_12,
body .md-journey .row_col_wrap_12,
body .md-approach .row_col_wrap_12,
body .md-audiences .row_col_wrap_12 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 1000px) {

  body .md-foundation,
  body .md-journey,
  body .md-approach,
  body .md-audiences {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }
}

@media (max-width: 690px) {

  body .md-foundation,
  body .md-journey,
  body .md-approach,
  body .md-audiences {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}