/* Introduction
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.about-intro-section {
   position: relative;
   padding: var(--section-padding-y) 0;
   overflow: hidden;
   background-color: var(--color-white);
}

.about-intro-content .section-title { max-width: 680px; }
.about-intro-content > p { max-width: 690px; }
.about-shift { margin-top: 2rem; }

.about-shift-label {
   display: block;
   margin-bottom: 0.15rem;
   color: var(--color-text-muted);
}

.about-shift-arrow {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   color: var(--mybone-accent-dark);
   background-color: var(--mybone-accent-soft);
}

.about-intro-visual {
   position: relative;
   max-width: 580px;
   margin-left: auto;
}

.about-intro-visual::before {
   content: "";
   position: absolute;
   top: -22px;
   right: -22px;
   z-index: 0;
   width: 130px;
   height: 130px;
   border-radius: 50%;
   background-color: var(--mybone-accent-soft);
}

.about-intro-image {
   position: relative;
   z-index: 1;
   display: block;
   width: 100%;
   min-height: 500px;
   object-fit: cover;
   border-radius: var(--border-radius-xl);
   box-shadow: var(--shadow-md);
}

@media (max-width: 991.98px) {
   .about-intro-section { padding: var(--section-padding-y-md) 0; }

   .about-intro-visual {
      max-width: 680px;
      margin: 1rem auto 0;
   }

   .about-intro-image { min-height: 440px; }
}

@media (max-width: 575.98px) {
   .about-intro-section { padding: var(--section-padding-y-sm) 0; }
   .about-shift-arrow { transform: rotate(90deg); }

   .about-intro-visual::before {
      top: -15px;
      right: -15px;
      width: 100px;
      height: 100px;
   }

   .about-intro-image { min-height: 380px; }
}


/* Bone Health Optimization
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.about-bho-section {
   position: relative;
   padding: var(--section-padding-y) 0;
   background-color: var(--mybone-primary-soft);
}

.about-bho-heading {
   max-width: 850px;
   margin: 0 auto 3rem;
}

.about-bho-heading .section-title { margin-bottom: 1.25rem; }

@media (max-width: 991.98px) {
   .about-bho-section { padding: var(--section-padding-y-md) 0; }
}

@media (max-width: 575.98px) {
   .about-bho-section { padding: var(--section-padding-y-sm) 0; }
   .about-bho-heading { margin-bottom: 2.25rem; }
}


/* President's Message
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.president-section {
   position: relative;
   padding: var(--section-padding-y) 0;
   background-color: var(--color-white);
}

.president-profile {
   max-width: 320px;
   margin: 0 auto;
}

.president-image {
   display: block;
   width: 100%;
   max-width: 298px;
   height: auto;
   margin: 0 auto;
   border-radius: var(--border-radius-xl);
   box-shadow: var(--shadow-md);
}

.president-identity {
   margin-top: 1.25rem;
   padding-left: 1.25rem;
   border-left: 3px solid var(--mybone-accent);
}

.president-content { max-width: 790px; }
.president-quote { margin: 2rem 0; }

.president-message > h3 { margin: 2.5rem 0 1rem; }

.president-outcomes {
   margin: 1.75rem 0 2.5rem;
}

.president-framework-list {
   margin: 1.5rem 0 2.5rem;
   padding-left: 1.5rem;
}

.president-framework-list li {
   margin-bottom: 1rem;
   padding-left: 0.4rem;
}

.president-framework-list li:last-child { margin-bottom: 0; }

.president-signature {
   margin-top: 2.5rem;
   padding-top: 1.5rem;
   border-top: var(--border-width) solid var(--color-border);
}

@media (max-width: 991.98px) {
   .president-section { padding: var(--section-padding-y-md) 0; }
   .president-content { max-width: none; }
}

@media (max-width: 575.98px) {
   .president-section { padding: var(--section-padding-y-sm) 0; }

   .president-identity {
      padding-left: 0;
      border-left: 0;
      text-align: center;
   }
}

/* Comprehensive Framework
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.framework-section {
   position: relative;
   padding: var(--section-padding-y) 0;
   overflow: hidden;
   background-color: var(--mybone-primary-soft);
}

.framework-heading { max-width: 850px; margin: 0 auto 4rem; }

.framework-timeline {
   position: relative;
   max-width: 1100px;
   margin: 0 auto;
}

.framework-timeline::before {
   content: "";
   position: absolute;
   top: 31px;
   left: 16.666%;
   right: 16.666%;
   z-index: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--mybone-primary), var(--mybone-accent));
}

.framework-step {
   position: relative;
   z-index: 1;
   text-align: center;
}

.framework-number {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 64px;
   height: 64px;
   margin-bottom: 1.5rem;
   border: 4px solid var(--mybone-primary-soft);
   border-radius: 50%;
   color: var(--color-white);
   background-color: var(--mybone-primary);
   box-shadow: var(--shadow-sm);
}

.framework-content { max-width: 300px; margin: 0 auto; }
.framework-content h3 { margin-bottom: 1rem; }

@media (max-width: 991.98px) {
   .framework-section { padding: var(--section-padding-y-md) 0; }
}

@media (max-width: 767.98px) {
   .framework-heading { margin-bottom: 3rem; }
   .framework-timeline { max-width: 620px; padding-left: 1rem; }

   .framework-timeline::before {
      top: 32px;
      bottom: 32px;
      left: 48px;
      right: auto;
      width: 2px;
      height: auto;
      background: linear-gradient(180deg, var(--mybone-primary), var(--mybone-accent));
   }

   .framework-step {
      display: flex;
      align-items: flex-start;
      gap: 1.5rem;
      text-align: left;
   }

   .framework-number { flex: 0 0 64px; margin-bottom: 0; }

   .framework-content {
      max-width: none;
      margin: 0;
      padding-top: 0.5rem;
   }
}

@media (max-width: 575.98px) {
   .framework-section { padding: var(--section-padding-y-sm) 0; }
   .framework-timeline { padding-left: 0; }
   .framework-timeline::before { left: 28px; }
   .framework-step { gap: 1.25rem; }

   .framework-number {
      flex-basis: 56px;
      width: 56px;
      height: 56px;
   }
}


/* Building a Stronger Foundation
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.foundation-section {
   position: relative;
   padding: var(--section-padding-y) 0;
   overflow: hidden;
   background: linear-gradient(135deg, var(--mybone-primary-deep) 0%, var(--mybone-primary-dark) 100%);
}

.foundation-section::before,
.foundation-section::after {
   content: "";
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
}

.foundation-section::before {
   top: -120px;
   right: -80px;
   width: 280px;
   height: 280px;
   background-color: rgba(223, 242, 252, 0.08);
}

.foundation-section::after {
   left: -80px;
   bottom: -130px;
   width: 240px;
   height: 240px;
   background-color: rgba(251, 193, 12, 0.12);
}

.foundation-section .container {
   position: relative;
   z-index: 1;
}

.foundation-section .section-eyebrow { color: var(--mybone-accent); }

.foundation-section .section-title,
.foundation-section p { color: var(--color-white); }

.foundation-highlight { color: var(--mybone-accent); }

.foundation-content {
   padding-left: 2.5rem;
   border-left: var(--border-width-thick) solid rgba(251, 193, 12, 0.65);
}

@media (max-width: 991.98px) {
   .foundation-section { padding: var(--section-padding-y-md) 0; }

   .foundation-content {
      padding-left: 0;
      border-left: 0;
   }
}

@media (max-width: 575.98px) {
   .foundation-section { padding: var(--section-padding-y-sm) 0; }

   .foundation-section::before {
      top: -90px;
      right: -110px;
      width: 220px;
      height: 220px;
   }

   .foundation-section::after {
      left: -100px;
      bottom: -110px;
      width: 200px;
      height: 200px;
   }
}