/* =========================================================
   MINUVIA — ABOUT US

   Page-specific styling only.

   Shared header, navigation and footer
   remain controlled by styles.css.
========================================================= */


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

.about-hero {

  position: relative;

  min-height: 700px;

  padding:
    118px 0 145px;

  overflow: hidden;

  display: flex;

  align-items: center;

  background:
    linear-gradient(
      135deg,
      #FFFFFF 0%,
      #FBFDFF 50%,
      #EEF5FF 100%
    );

}



.about-hero-inner {

  position: relative;

  z-index: 3;

  max-width: 940px;

}



.about-hero h1 {

  max-width: 900px;

  margin:
    24px 0;

  color:
    #0B1F3C;

  font-size:
    clamp(
      50px,
      6vw,
      76px
    );

  line-height: 1.02;

  letter-spacing:
    -3.6px;

}



.about-hero h1 span {

  display: block;

  color:
    #246CF5;

}



.about-hero-lead {

  max-width: 760px;

  margin: 0;

  color:
    #2F4564;

  font-size: 19px;

  font-weight: 700;

  line-height: 1.65;

}



.about-hero-supporting {

  max-width: 720px;

  margin:
    18px 0 0;

  color:
    #65758B;

  font-size: 15px;

  line-height: 1.8;

}



/* =========================================================
   HERO BACKGROUND ORBS
========================================================= */

.about-hero-orb {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

}



.about-hero-orb-one {

  right: -165px;

  bottom: -245px;

  width: 630px;

  height: 630px;

  background:
    rgba(
      190,
      216,
      251,
      0.42
    );

}



.about-hero-orb-two {

  left: -230px;

  top: 70px;

  width: 430px;

  height: 430px;

  background:
    rgba(
      220,
      233,
      250,
      0.40
    );

}



/* =========================================================
   HERO DOWN BUTTON
========================================================= */

.about-hero-jump {

  position: absolute;

  left: 50%;

  bottom: -112px;

  width: 112px;

  height: 112px;

  transform:
    translateX(-50%);

  border:
    1px solid
    #D7E3F2;

  border-radius: 18px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  color:
    #0B1F3C;

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

  box-shadow:
    0 14px 32px
    rgba(
      11,
      31,
      60,
      0.10
    );

  text-align: center;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

}



.about-hero-jump:hover {

  transform:
    translateX(-50%)
    translateY(-5px);

  box-shadow:
    0 19px 38px
    rgba(
      11,
      31,
      60,
      0.15
    );

}



.about-hero-jump-arrow {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color:
    #FFFFFF;

  background:
    #246CF5;

  font-size: 20px;

  font-weight: 800;

  line-height: 1;

}



.about-hero-jump-text {

  color:
    #0B1F3C;

  font-size: 11px;

  font-weight: 800;

  line-height: 1.25;

}



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

.about-section-heading {

  max-width: 780px;

  margin:
    0 auto 54px;

  text-align: center;

}



.about-section-heading h2 {

  margin:
    17px 0 14px;

  color:
    #0B1F3C;

  font-size:
    clamp(
      39px,
      4.6vw,
      58px
    );

  line-height: 1.04;

  letter-spacing:
    -2.7px;

}



.about-section-heading h2 span {

  color:
    #246CF5;

}



.about-section-heading p {

  max-width: 690px;

  margin:
    0 auto;

  color:
    #65758B;

  font-size: 16px;

  line-height: 1.75;

}



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

.about-philosophy {

  position: relative;

  padding:
    112px 0 110px;

  overflow: hidden;

  background:
    #F7FAFE;

}



.about-principles {

  display: grid;

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

  gap: 18px;

}



.about-principle-card {

  min-height: 245px;

  padding:
    30px 28px;

  border:
    1px solid
    #DFE7F1;

  border-radius: 22px;

  background:
    #FFFFFF;

  box-shadow:
    0 18px 40px
    rgba(
      11,
      31,
      60,
      0.045
    );

}



.about-principle-card-featured {

  border-color:
    #246CF5;

  background:
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #F4F8FF 100%
    );

  box-shadow:
    0 20px 45px
    rgba(
      36,
      108,
      245,
      0.10
    );

}



.about-principle-number {

  width: 42px;

  height: 42px;

  border-radius: 12px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color:
    #246CF5;

  background:
    #EAF2FF;

  font-size: 12px;

  font-weight: 900;

}



.about-principle-card h3 {

  margin:
    28px 0 12px;

  color:
    #0B1F3C;

  font-size: 22px;

  line-height: 1.25;

  letter-spacing:
    -0.7px;

}



.about-principle-card p {

  margin: 0;

  color:
    #65758B;

  font-size: 14px;

  line-height: 1.75;

}



/* =========================================================
   MEET THE TEAM JUMP BUTTON
========================================================= */

.about-team-jump-wrap {

  position: relative;

  z-index: 10;

  height: 0;

}



.about-team-jump {

  position: absolute;

  left: 50%;

  top: 0;

  width: 112px;

  height: 112px;

  transform:
    translate(-50%, -50%);

  border:
    1px solid
    #D7E3F2;

  border-radius: 18px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  color:
    #0B1F3C;

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

  box-shadow:
    0 14px 32px
    rgba(
      11,
      31,
      60,
      0.10
    );

  text-align: center;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

}



.about-team-jump:hover {

  transform:
    translate(
      -50%,
      calc(-50% - 5px)
    );

  box-shadow:
    0 19px 38px
    rgba(
      11,
      31,
      60,
      0.15
    );

}



.about-team-jump-arrow {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color:
    #FFFFFF;

  background:
    #246CF5;

  font-size: 20px;

  font-weight: 800;

  line-height: 1;

}



.about-team-jump-text {

  color:
    #0B1F3C;

  font-size: 11px;

  font-weight: 800;

  line-height: 1.25;

}



/* =========================================================
   FOUNDER SECTIONS
========================================================= */

.about-founder-section {

  padding:
    112px 0;

}



.about-founder-section-light {

  background:
    #FFFFFF;

}



.about-founder-section-tint {

  background:
    linear-gradient(
      135deg,
      #F8FBFF 0%,
      #F2F7FD 100%
    );

}



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

.about-founder-grid {

  display: grid;

  grid-template-columns:
    minmax(
      300px,
      0.72fr
    )
    minmax(
      0,
      1.28fr
    );

  gap: 74px;

  align-items: start;

}



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

.about-founder-intro {

  position: sticky;

  top: 112px;

}



.about-founder-kicker {

  color:
    #246CF5;

  font-size: 11px;

  font-weight: 900;

  letter-spacing:
    0.7px;

}



.about-founder-intro h2 {

  max-width: 450px;

  margin:
    13px 0 18px;

  color:
    #0B1F3C;

  font-size:
    clamp(
      36px,
      4vw,
      52px
    );

  line-height: 1.03;

  letter-spacing:
    -2.2px;

}



.about-founder-summary {

  max-width: 430px;

  margin: 0;

  color:
    #536780;

  font-size: 15px;

  line-height: 1.75;

}



/* =========================================================
   FOUNDER BIOGRAPHY CARD
========================================================= */

.about-founder-copy {

  box-sizing:
    border-box;

  height:
    510px;

  padding:
    36px 40px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  overscroll-behavior:
    contain;

  scrollbar-gutter:
    stable;

  border:
    1px solid
    #DFE7F1;

  border-radius: 25px;

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

  box-shadow:
    0 20px 50px
    rgba(
      11,
      31,
      60,
      0.06
    );

}



.about-founder-copy p {

  margin: 0;

  color:
    #536780;

  font-size: 15px;

  line-height: 1.88;

}



.about-founder-copy p + p {

  margin-top: 22px;

}



.about-founder-copy
.about-founder-quote {

  margin-top: 28px;

  padding-top: 24px;

  border-top:
    1px solid
    #E2E9F2;

  color:
    #246CF5;

  font-size: 21px;

  font-weight: 800;

  line-height: 1.4;

}



/* =========================================================
   CLOSING SECTION
========================================================= */

.about-closing {

  padding:
    92px 0 96px;

  color:
    #FFFFFF;

  background:
    #0B1F3C;

}



.about-closing-inner {

  max-width: 850px;

  text-align: left;

}



.about-closing h2 {

  margin:
    18px 0 16px;

  font-size:
    clamp(
      40px,
      5vw,
      62px
    );

  line-height: 1.03;

  letter-spacing:
    -2.8px;

}



.about-closing h2 span {

  display: block;

  color:
    #66A0FF;

}



.about-closing p {

  max-width: 680px;

  margin: 0;

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

  font-size: 16px;

  line-height: 1.75;

}



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

@media (max-width: 980px) {


  .about-hero {

    min-height: 650px;

    padding-top: 96px;

  }


  .about-principles {

    grid-template-columns:
      1fr;

    max-width: 760px;

    margin:
      0 auto;

  }


  .about-principle-card {

    min-height: 0;

  }


  .about-founder-grid {

    grid-template-columns:
      1fr;

    gap: 36px;

  }


  .about-founder-intro {

    position: static;

  }


  .about-founder-summary {

    max-width: 700px;

  }


  .about-founder-copy {

    width: 100%;

    height: 510px;

  }


}



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

@media (max-width: 620px) {


  .about-hero {

    min-height: auto;

    padding:
      72px 0 128px;

  }


  .about-hero h1 {

    font-size: 46px;

    letter-spacing:
      -2.5px;

  }


  .about-hero-lead {

    font-size: 16px;

  }


  .about-hero-supporting {

    font-size: 14px;

  }


  .about-hero-jump {

    bottom: -95px;

    width: 96px;

    height: 96px;

    border-radius: 16px;

  }


  .about-hero-jump-arrow {

    width: 30px;

    height: 30px;

    font-size: 18px;

  }


  .about-hero-jump-text {

    font-size: 10px;

  }


  .about-philosophy,
  .about-founder-section {

    padding:
      78px 0;

  }


  .about-section-heading {

    margin-bottom: 34px;

  }


  .about-section-heading h2 {

    font-size: 39px;

    letter-spacing:
      -1.8px;

  }


  .about-section-heading p {

    font-size: 14px;

  }


  .about-principle-card {

    padding:
      25px 22px;

  }


  .about-team-jump {

    width: 96px;

    height: 96px;

    border-radius: 16px;

  }


  .about-team-jump-arrow {

    width: 30px;

    height: 30px;

    font-size: 18px;

  }


  .about-team-jump-text {

    font-size: 10px;

  }


  .about-founder-intro h2 {

    font-size: 38px;

    letter-spacing:
      -1.8px;

  }


  .about-founder-summary {

    font-size: 14px;

  }


  .about-founder-copy {

    height:
      430px;

    padding:
      25px 20px;

    border-radius: 20px;

  }


  .about-founder-copy p {

    font-size: 14px;

    line-height: 1.82;

  }


  .about-founder-copy
  .about-founder-quote {

    font-size: 18px;

  }


  .about-closing {

    padding:
      75px 0 78px;

  }


  .about-closing h2 {

    font-size: 41px;

    letter-spacing:
      -2px;

  }


  .about-closing p {

    font-size: 14px;

  }


}