/* ==========================================================
   ABOUT BENTO
========================================================== */
.bee-section-page {
   padding-top: 6rem;
   padding-bottom: 6rem;
}

.bee-about-bento-section {
   position: relative;
   overflow: hidden;
}


/* ==========================================================
   INTRO
========================================================== */

.bee-about-bento__intro {

   max-width: 760px;

   margin:
      0 auto 4rem;

   text-align: center;

}


.bee-about-bento__title {
   font-size: clamp(2rem, 4vw, 54px);
   font-weight: 600;
   line-height: 1.05;
   letter-spacing: -1.5px;
   color: var(--bee-dark);
   margin: 0 0 20px 0;
   padding: 0;
   color: var(--bee-dark);


}


.bee-about-bento__description {

   max-width: 620px;

   margin: 0 auto;

   color:
      rgba(2, 16, 31, 0.65);

   font-size: 1rem;

   line-height: 1.8;

}


/* ==========================================================
   GRID
========================================================== */

.bee-about-bento {

   display: grid;

   grid-template-columns:
      repeat(12, minmax(0, 1fr));

   gap: 1rem;

}


/* ==========================================================
   CARD BASE
========================================================== */

.bee-about-bento__card {

   position: relative;

   overflow: hidden;

   border-radius: 22px;

   background:
      #ffffff;

}


/* ==========================================================
   IMAGES
========================================================== */

.bee-about-bento__card img {

   width: 100%;
   height: 100%;

   display: block;

   object-fit: cover;

}


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

.bee-about-bento__card--image {

   grid-column: span 4;

   min-height: 360px;

}


/* ==========================================================
   STAT
========================================================== */

.bee-about-bento__card--stat {

   grid-column: span 4;

   min-height: 360px;

   padding: 2rem;

   display: flex;
   flex-direction: column;
   justify-content: flex-end;

   background: var(--bee-dark-soft);

}


.bee-about-bento__stat {

   display: block;

   margin-bottom: 1rem;

   color: #fff;

   font-size:
      clamp(4rem, 6vw, 5rem);

   font-weight: 800;

   line-height: 0.9;

   letter-spacing: -0.06em;

}


.bee-about-bento__card--stat p {

   max-width: 220px;

   color: #fff;

   font-size: 0.95rem;

   line-height: 1.7;

}


/* ==========================================================
   EDITORIAL
========================================================== */

.bee-about-bento__card--editorial {

   grid-column: span 4;

   min-height: 360px;

   padding: 2rem;

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

}


.bee-about-bento__eyebrow {

   margin-bottom: 1rem;

   color:
      #63c2ff;

   font-size: 0.78rem;
   font-weight: 700;

   letter-spacing: 0.14em;

}


.bee-about-bento__card--editorial h3 {
   margin-bottom: 1rem;
   color:
      var(--bee-dark);
   font-size:
      clamp(1.8rem, 3vw, 2.6rem);
   font-weight: 600;
   line-height: 1.05;
   letter-spacing: -0.02em;
}


.bee-about-bento__card--editorial p {

   color:
      rgba(2, 16, 31, 0.68);

   font-size: 0.96rem;

   line-height: 1.8;

}


/* ==========================================================
   WIDE IMAGE
========================================================== */

.bee-about-bento__card--wide {

   grid-column: span 5;

   min-height: 360px;

}


/* ==========================================================
   TRUST
========================================================== */

.bee-about-bento__card--trust {

   grid-column: span 3;

   min-height: 360px;

   padding: 2rem;

   display: flex;
   flex-direction: column;
   justify-content: flex-end;

   background:
      #02101f;

}


.bee-about-bento__card--trust p {

   color:
      rgba(255, 255, 255, 0.82);

   font-size: 0.95rem;

   line-height: 1.8;

}


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

@media (max-width: 991px) {

   .bee-about-bento {

      grid-template-columns:
         repeat(2, minmax(0, 1fr));

   }

   .bee-about-bento__card {

      grid-column: auto !important;

   }

}


@media (max-width: 767px) {

   .bee-about-bento {

      grid-template-columns: 1fr;

   }

   .bee-about-bento__card {

      min-height: 320px !important;

   }

   .bee-about-bento__title {

      font-size:
         clamp(2.8rem, 11vw, 3rem);

   }



   .ast-container .bee-container {
      max-width: 100% !important;
   }
}




/* ==========================================================
   ABOUT PHILOSOPHY
========================================================== */

.bee-about-philosophy {

   position: relative;

   overflow: hidden;

   background:
      #ffffff;

}


/* ==========================================================
   TOP GRID
========================================================== */

.bee-about-philosophy__grid {

   display: grid;

   grid-template-columns:
      repeat(12, minmax(0, 1fr));

   gap: 4rem;

   align-items: start;

   margin-bottom: 5rem;

}


/* ==========================================================
   HEADLINE
========================================================== */

.bee-about-philosophy__headline {

   grid-column: span 5;

}


.bee-about-philosophy__headline h2 {
   margin-top: 1.5rem;
   color: var(--bee-dark);
   font-size: clamp(3rem, 5vw, 4rem);
   font-weight: 600;
   line-height: 1;
   letter-spacing: -0.07em;
   text-wrap: balance;
}


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

.bee-about-philosophy__content {

   grid-column: span 7;

}


.bee-about-philosophy__content p {

   color:
      rgba(2, 16, 31, 0.72);

   font-size: 1.05rem;

   line-height: 2;

}


.bee-about-philosophy__content p:not(:last-child) {

   margin-bottom: 2rem;

}


/* ==========================================================
   STATS STRIP
========================================================== */

.bee-about-philosophy__stats {

   display: grid;

   grid-template-columns:
      repeat(4, minmax(0, 1fr));

   gap: 2rem;

   padding-top: 3rem;

   border-top:
      1px solid rgba(2, 16, 31, 0.08);

}


/* ==========================================================
   STAT ITEM
========================================================== */

.bee-about-philosophy__stat {

   position: relative;

   padding-right: 2rem;

}


.bee-about-philosophy__stat:not(:last-child)::after {

   content: "";

   position: absolute;

   top: 50%;
   right: 0;

   transform:
      translateY(-50%);

   width: 1px;
   height: 48px;

   background:
      rgba(2, 16, 31, 0.12);

}


.bee-about-philosophy__stat strong {

   display: block;

   margin-bottom: 0.75rem;

   color:
      var(--bee-dark);

   font-size:
      clamp(2rem, 4vw, 2.25rem);

   font-weight: 600;

   line-height: 0.9;

   letter-spacing: -0.06em;

}


.bee-about-philosophy__stat span {

   display: block;

   max-width: 180px;

   color:
      rgba(2, 16, 31, 0.65);

   font-size: 0.95rem;

   line-height: 1.7;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {

   .bee-about-philosophy__grid {

      grid-template-columns: 1fr;

      gap: 2rem;

   }

   .bee-about-philosophy__headline,
   .bee-about-philosophy__content {

      grid-column: auto;

   }

   .bee-about-philosophy__stats {

      grid-template-columns:
         repeat(2, minmax(0, 1fr));

      gap: 2rem;

   }

   .bee-about-philosophy__stat:nth-child(2)::after {

      display: none;

   }

}


@media (max-width: 767px) {

   .bee-about-philosophy__headline h2 {

      font-size:
         clamp(2.8rem, 11vw, 4rem);

   }

   .bee-about-philosophy__stats {

      grid-template-columns: 1fr;

      gap: 1.5rem;

   }

   .bee-about-philosophy__stat {

      padding-right: 0;

      padding-bottom: 1.5rem;

      border-bottom:
         1px solid rgba(2, 16, 31, 0.08);

   }

   .bee-about-philosophy__stat::after {

      display: none !important;

   }

}

/* ==========================================================
   TEAM SECTION
========================================================== */

.bee-team-section {

   position: relative;

   overflow: hidden;

}


/* ==========================================================
   INTRO
========================================================== */

.bee-team-section__intro {

   max-width: 760px;

   margin:
      0 auto 5rem;

   text-align: center;

}

.read-more {
   margin-bottom: 0;
   color: var(--bee-dark);
   font-weight: 600;
   text-decoration: underline !important;
}

.bee-team-section__title {
   margin-top: 1.5rem;
   color: var(--bee-dark);
   font-size: clamp(3rem, 5vw, 4.25rem);
   font-weight: 600;
   line-height: 1;
   letter-spacing: -0.04em;
   text-wrap: balance;
}


/* ==========================================================
   GRID
========================================================== */

.bee-team-grid {

   display: grid;

   grid-template-columns:
      repeat(2, minmax(0, 1fr));

   gap: 2rem;

}


/* ==========================================================
   CARD
========================================================== */

.bee-team-card {
   position: relative;
   overflow: hidden;
   border-radius: 28px;
   background: #ffffff;
   box-shadow: 0 20px 50px rgba(2, 16, 31, 0.06);
}


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

.bee-team-card__media {
   position: relative;
   overflow: hidden;
   aspect-ratio: 6 / 4;
}

.bee-team-card__media img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.bee-team-card:hover .bee-team-card__media img {
   transform: scale(1.04);
}

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

.bee-team-card__content {
   padding: clamp(2rem, 4vw, 3rem);
}

.bee-team-card__role {
   display: inline-flex;
   margin-bottom: 1rem;
   color: #63c2ff;
   font-size: 0.82rem;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
}


.bee-team-card__content h3 {
   margin-bottom: 1rem;
   color: var(--bee-dark);
   font-size: clamp(2rem, 4vw, 2.25rem);
   font-weight: 600;
   line-height: 0.92;
   letter-spacing: -0.05em;
}

.bee-team-card__content p {
   color: rgba(2, 16, 31, 0.7);
   font-size: 1rem;
   line-height: 1.9;
}

/* ==========================================================
   SOCIALS
========================================================== */
.bee-team-card__socials {
   display: flex;
   align-items: center;
   gap: 0.8rem;
   margin-top: 2rem;
}

.bee-team-card__socials a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: rgba(2, 16, 31, 0.04);
   color: var(--bee-dark);
   transition: all 0.35s ease;
}

.bee-team-card__socials a:hover {
   transform: translateY(-3px);
   background: var(--bee-dark);
   color: #ffffff;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991px) {
   .bee-team-grid {
      grid-template-columns: 1fr;
   }
}


@media (max-width: 767px) {
   .bee-team-section__intro {
      margin-bottom: 3rem;
   }

   .bee-team-section__title {
      font-size: clamp(2.8rem, 11vw, 4rem);
   }

   .bee-team-card {
      border-radius: 22px;
   }
}

/* ==========================================================
   ABOUT VALUES SECTION
========================================================== */

.bee-about-values {

   position: relative;

   overflow: hidden;

   background:
      #ffffff;

}


/* ==========================================================
   GRID
========================================================== */

.bee-about-values__grid {

   display: grid;

   grid-template-columns:
      5fr 7fr;

   gap: 5rem;

   align-items: center;

}


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

.bee-about-values__media {

   position: relative;

   overflow: hidden;

   border-radius: 28px;

   min-height: 620px;

}


.bee-about-values__media img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   aspect-ratio: 4 / 5;
   transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);

}


.bee-about-values__media:hover img {

   transform:
      scale(1.04);

}


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

.bee-about-values__content {

   max-width: 760px;

}


.bee-about-values__title {
   margin:
      1.5rem 0;
   color:
      var(--bee-dark);
   font-size:
      clamp(3rem, 5vw, 3.75rem);
   font-weight: 600;
   line-height: 1;
   letter-spacing: -0.05em;
   text-wrap: balance;
}


.bee-about-values__description {

   max-width: 620px;

   margin-bottom: 3rem;

   color:
      rgba(2, 16, 31, 0.68);

   font-size: 1.02rem;

   line-height: 1.9;

}


/* ==========================================================
   VALUES GRID
========================================================== */

.bee-about-values__items {

   display: grid;

   grid-template-columns:
      repeat(2, minmax(0, 1fr));

   gap: 2rem 2.5rem;

}


/* ==========================================================
   ITEM
========================================================== */

.bee-about-values__item {

   display: flex;
   align-items: flex-start;

   gap: 1rem;

}


/* ==========================================================
   ICON
========================================================== */

.bee-about-values__icon {

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

   width: 52px;
   height: 52px;

   border-radius: 50%;

   background:
      rgba(99, 194, 255, 0.08);

   flex-shrink: 0;

}


.bee-about-values__icon i {

   width: 20px;
   height: 20px;

   color:
      #63c2ff;

}


/* ==========================================================
   TEXT
========================================================== */

.bee-about-values__text h3 {

   margin-bottom: 0.75rem;

   color:
      var(--bee-dark);

   font-size: 1.2rem;
   font-weight: 700;

   line-height: 1.2;

}


.bee-about-values__text p {

   color:
      rgba(2, 16, 31, 0.68);

   font-size: 0.95rem;

   line-height: 1.8;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1200px) {

   .bee-about-values__grid {

      gap: 3rem;

   }

}


@media (max-width: 991px) {

   .bee-about-values__grid {

      grid-template-columns: 1fr;

   }

   .bee-about-values__media {

      min-height: 620px;

   }

}


@media (max-width: 767px) {

   .bee-about-values__title {

      font-size:
         clamp(2.8rem, 11vw, 4rem);

   }

   .bee-about-values__items {

      grid-template-columns: 1fr;

      gap: 2rem;

   }

   .bee-about-values__media {

      min-height: 460px;

      border-radius: 22px;

   }

}


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

.bee-global-cta {

   position: relative;

   overflow: hidden;

   padding:
      clamp(5rem, 8vw, 8rem) 0;

   /* background:
      linear-gradient(180deg,
         #02101f 0%,
         #041a31 100%); */
   background-image: url(https://beediversdiving.com/wp-content/uploads/2026/05/advance-open-water-3.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;

}


/* ==========================================================
   BACKGROUND
========================================================== */

.bee-global-cta__background {

   position: absolute;

   inset: 0;

   background: rgb(0 21 49 / 80%);

   pointer-events: none;

}


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

.bee-global-cta__inner {

   position: relative;

   z-index: 2;

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

   text-align: center;

}


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

.bee-global-cta__content {

   max-width: 920px;

}


.bee-global-cta__title {

   margin: 1.5rem 0;

   color: #ffffff;

   font-size: clamp(3.5rem, 7vw, 5rem);

   font-weight: 600;

   line-height: 1.05;

   letter-spacing: -0.03em;

   text-wrap: balance;

}


.bee-global-cta__description {

   max-width: 760px;

   margin:
      0 auto;

   color:
      rgba(255, 255, 255, 0.72);

   font-size:
      clamp(1rem, 1.4vw, 1.15rem);

   line-height: 2;

}


/* ==========================================================
   ACTIONS
========================================================== */

.bee-global-cta__actions {

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

   gap: 1rem;

   margin-top: 3rem;

}


/* ==========================================================
   PRIMARY BUTTON
========================================================== */

.bee-global-cta .btn-primary {

   min-width: 190px;

}


/* ==========================================================
   OUTLINE LIGHT
========================================================== */

.bee-global-cta .btn-outline-light {

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

   min-height: 58px;

   min-width: 220px;

   padding:
      0 2rem;

   border:
      1px solid rgba(255, 255, 255, 0.14);

   border-radius:
      var(--bee-radius-pill);

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

   backdrop-filter:
      blur(10px);

   color:
      #ffffff;

   font-size: 0.95rem;
   font-weight: 700;

   letter-spacing: 0.02em;

   text-decoration: none;

   transition:
      transform 0.35s ease,
      background 0.35s ease,
      border-color 0.35s ease;

}


.bee-global-cta .btn-outline-light:hover {

   transform:
      translateY(-3px);

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

   border-color:
      rgba(255, 255, 255, 0.24);

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 767px) {

   .bee-global-cta {

      padding:
         4.5rem 0;

   }



   .bee-global-cta__description {

      font-size: 1rem;

      line-height: 1.9;

   }

   .bee-global-cta__actions {

      flex-direction: column;

      align-items: stretch;

   }

   .bee-global-cta__actions .btn,
   .bee-global-cta__actions .btn-outline-light {

      width: 100%;

   }

}