/* =========================================================
   RDS v2 — About
   ========================================================= */

.about-hero {
  overflow: hidden;

  padding-top: clamp(3rem,5vw,4.5rem);
  padding-bottom: clamp(4rem,7vw,6rem);

  color: #fff;

  background:
    radial-gradient(
      circle at 86% 22%,
      rgba(0,174,239,.18),
      transparent 27%
    ),
    radial-gradient(
      circle at 10% 95%,
      rgba(239,183,53,.12),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #071323,
      #0a213d
    );
}


.about-hero__grid {
  display: grid;

  grid-template-columns:
    minmax(0,.96fr)
    minmax(30rem,1.04fr);

  align-items: center;

  gap: clamp(3rem,6vw,6rem);
}


.about-hero .eyebrow,
.about-framework .eyebrow,
.about-cta .eyebrow {
  color: #efb735;
}


.about-hero h1 {
  max-width: 11ch;

  margin: 0 0 1.2rem;

  color: #fff;

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

  line-height: .95;

  letter-spacing: -.055em;
}


.about-hero__lead {
  max-width: 41rem;

  color: rgba(255,255,255,.84);

  font-size: 1.08rem;

  line-height: 1.6;
}


.about-hero__support {
  max-width: 41rem;

  color: rgba(255,255,255,.64);

  line-height: 1.62;
}


.about-actions {
  display: flex;

  flex-wrap: wrap;

  gap: .75rem;

  margin-top: 1.4rem;
}


.about-button {
  display: inline-flex;

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

  padding: .82rem 1.05rem;

  border-radius: 999px;

  font-size: .78rem;
  font-weight: 900;

  text-decoration: none;
}


.about-button--primary {
  color: #071323;

  background: #efb735;
}


.about-button--secondary,
.about-button--outline {
  color: #fff;

  border:
    1px solid
    rgba(255,255,255,.34);
}


/* Founder visual */

.about-founder-visual {
  position: relative;

  min-height: 30rem;

  display: grid;

  place-items: center;
}


.about-founder-photo {
  width: min(82%,24rem);

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.25);

  border-radius: 1.25rem;

  box-shadow:
    0 2rem 4.8rem
    rgba(0,0,0,.34);

  transform: rotate(1deg);

  animation:
    about-founder-photo-float
    6.7s
    ease-in-out
    infinite;
}


.about-founder-photo img {
  display: block;

  width: 100%;
  aspect-ratio: 4 / 5;

  object-fit: cover;

  object-position: center;
}


.about-founder-card,
.about-founder-signal {
  position: absolute;

  z-index: 4;

  display: grid;

  gap: .12rem;

  padding: .75rem .9rem;

  color: #071323;

  background:
    rgba(255,255,255,.97);

  border-radius: .8rem;

  box-shadow:
    0 1rem 2.6rem
    rgba(0,0,0,.25);

  will-change: transform;
}


.about-founder-card {
  right: 1rem;
  bottom: 2rem;

  min-width: 11rem;

  animation:
    about-founder-card-float
    5.5s
    ease-in-out
    infinite
    reverse;
}


.about-founder-card span,
.about-founder-signal span {
  color: #00718f;

  font-size: .52rem;
  font-weight: 900;

  letter-spacing: .09em;

  text-transform: uppercase;
}


.about-founder-card strong {
  font-size: 1rem;
}


.about-founder-card p {
  margin: 0;

  color: #5d6979;

  font-size: .7rem;
}


.about-founder-signal {
  font-size: .7rem;
}


.about-founder-signal--one {
  top: 2rem;
  right: .3rem;

  animation:
    about-founder-signal-one
    5.8s
    ease-in-out
    infinite;
}


.about-founder-signal--two {
  left: .4rem;
  bottom: 5rem;

  animation:
    about-founder-signal-two
    6.1s
    ease-in-out
    infinite
    reverse;
}


/* Shared sections */

.about-principles,
.about-founder-story,
.about-local,
.about-standard {
  padding-block:
    clamp(4rem,7vw,6rem);
}


.about-principles,
.about-standard {
  background: #f0f4f8;
}


.about-founder-story,
.about-local {
  background: #fff;
}


.about-section-heading {
  display: grid;

  grid-template-columns:
    1.1fr
    .9fr;

  align-items: end;

  gap: clamp(2rem,6vw,6rem);

  margin-bottom: 2.4rem;
}


.about-section-heading h2,
.about-founder-story h2,
.about-framework h2,
.about-local h2,
.about-standard h2,
.about-cta h2 {
  margin: 0;

  color: #071323;

  font-size:
    clamp(
      2.6rem,
      4.5vw,
      4.4rem
    );

  line-height: .98;

  letter-spacing: -.05em;
}


.about-section-heading h2 {
  max-width: 16ch;
}


.about-section-heading > p {
  color: #58687a;

  line-height: 1.65;
}


/* Principles */

.about-principles__grid {
  display: grid;

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

  gap: 1rem;
}


.about-principles__grid article {
  padding: 1.4rem;

  background: #fff;

  border:
    1px solid
    rgba(7,19,35,.08);

  border-top:
    3px solid
    #00718f;

  border-radius: 1rem;
}


.about-principles__grid span,
.about-standard__grid span {
  color: #d59600;

  font-size: .64rem;
  font-weight: 900;
}


.about-principles__grid h3 {
  margin: .6rem 0;

  color: #071323;
}


.about-principles__grid p {
  margin: 0;

  color: #5c6b7c;

  font-size: .8rem;

  line-height: 1.55;
}


/* Founder story */

.about-founder-story__grid {
  display: grid;

  grid-template-columns:
    .7fr
    1.3fr;

  gap: clamp(3rem,7vw,7rem);
}


.about-founder-story__intro {
  align-self: start;
}


.about-founder-story h2 {
  max-width: 11ch;
}


.about-founder-story__intro > p:last-child {
  color: #59697a;

  line-height: 1.65;
}


.about-founder-story__content {
  display: grid;

  gap: .8rem;
}


.about-founder-story__content article {
  padding: 1.3rem;

  background: #f3f6f9;

  border:
    1px solid
    rgba(7,19,35,.08);

  border-radius: .9rem;
}


.about-founder-story__content span {
  color: #00718f;

  font-size: .55rem;
  font-weight: 900;

  letter-spacing: .09em;
}


.about-founder-story__content h3 {
  margin: .4rem 0;

  color: #071323;
}


.about-founder-story__content p {
  margin: .35rem 0 0;

  color: #5c6b7c;

  font-size: .81rem;

  line-height: 1.55;
}


/* Framework */

.about-framework {
  padding-block:
    clamp(4rem,7vw,6rem);

  color: #fff;

  background:
    radial-gradient(
      circle at 88% 24%,
      rgba(0,174,239,.16),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #071323,
      #0a2948
    );
}


.about-framework__grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  align-items: center;

  gap: clamp(3rem,7vw,7rem);
}


.about-framework h2 {
  max-width: 13ch;

  color: #fff;
}


.about-framework__grid > div:last-child > p {
  color: rgba(255,255,255,.7);

  line-height: 1.65;
}


.about-framework__steps {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .5rem;

  margin-top: 1.3rem;
}


.about-framework__steps span {
  padding: .42rem .6rem;

  color: #fff;

  background:
    rgba(255,255,255,.08);

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius: 999px;

  font-size: .62rem;
  font-weight: 900;
}


.about-framework__steps b {
  color: #efb735;
}


.about-framework__link {
  display: inline-block;

  margin-top: 1.3rem;

  color: #efb735;

  font-weight: 900;

  text-decoration: none;
}


/* Local */

.about-local__grid {
  display: grid;

  grid-template-columns:
    .9fr
    1.1fr;

  gap: clamp(3rem,7vw,7rem);
}


.about-local h2 {
  max-width: 15ch;
}


.about-local__content {
  align-self: center;
}


.about-local__content p {
  color: #58687a;

  line-height: 1.65;
}


/* Standard */

.about-standard__heading {
  max-width: 54rem;

  margin-bottom: 2.2rem;
}


.about-standard h2 {
  max-width: 16ch;
}


.about-standard__heading > p:last-child {
  color: #5b6a7b;

  line-height: 1.6;
}


.about-standard__grid {
  display: grid;

  grid-template-columns:
    repeat(5,1fr);

  gap: .8rem;
}


.about-standard__grid article {
  padding: 1.15rem;

  background: #fff;

  border:
    1px solid
    rgba(7,19,35,.08);

  border-radius: .85rem;
}


.about-standard__grid strong {
  display: block;

  margin-top: .45rem;

  color: #071323;
}


.about-standard__grid p {
  margin: .35rem 0 0;

  color: #5c6b7c;

  font-size: .76rem;

  line-height: 1.5;
}


/* CTA */

.about-cta {
  padding-block:
    clamp(4rem,7vw,6rem);

  color: #fff;

  background:
    linear-gradient(
      110deg,
      #07516a,
      #071c35 65%,
      #071323
    );
}


.about-cta__grid {
  display: grid;

  grid-template-columns:
    1.15fr
    auto;

  align-items: center;

  gap: 3rem;
}


.about-cta h2 {
  max-width: 15ch;

  color: #fff;
}


.about-cta p:not(.eyebrow) {
  max-width: 42rem;

  color: rgba(255,255,255,.68);

  line-height: 1.6;
}


/* Motion */

@keyframes about-founder-photo-float {

  0%,
  100% {
    transform:
      rotate(1deg)
      translateY(0);
  }

  50% {
    transform:
      rotate(.45deg)
      translateY(-8px);
  }

}


@keyframes about-founder-card-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

}


@keyframes about-founder-signal-one {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }

}


@keyframes about-founder-signal-two {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }

}


/* Responsive */

@media (max-width: 1050px) {

  .about-hero__grid,
  .about-founder-story__grid,
  .about-framework__grid,
  .about-local__grid {
    grid-template-columns: 1fr;
  }

  .about-principles__grid {
    grid-template-columns:
      repeat(2,1fr);
  }

  .about-standard__grid {
    grid-template-columns:
      repeat(3,1fr);
  }

}


@media (max-width: 760px) {

  .about-section-heading,
  .about-cta__grid {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 600px) {

  .about-hero {
    padding-top: 2.5rem;
  }

  .about-hero h1 {
    max-width: none;

    font-size:
      clamp(
        2.7rem,
        12vw,
        4rem
      );
  }

  .about-principles__grid,
  .about-standard__grid {
    grid-template-columns: 1fr;
  }

}


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

  .about-founder-photo,
  .about-founder-card,
  .about-founder-signal {
    animation: none;
  }

}

/* =========================================================
   About hero — final 100% viewport calibration
   ========================================================= */

.about-hero {
  padding-top:
    clamp(
      2.5rem,
      3.5vw,
      3.25rem
    );

  padding-bottom:
    clamp(
      3.25rem,
      4.5vw,
      4rem
    );
}

.about-hero__grid {
  grid-template-columns:
    minmax(0, 1.03fr)
    minmax(26rem, .97fr);

  gap:
    clamp(
      2.5rem,
      5vw,
      4.5rem
    );
}

.about-hero h1 {
  max-width: 10.5ch;

  font-size:
    clamp(
      3.4rem,
      4.35vw,
      4.45rem
    );

  line-height: .96;
}

.about-hero__lead {
  font-size: 1.02rem;
  line-height: 1.55;
}

.about-hero__support {
  line-height: 1.55;
}

.about-founder-visual {
  min-height: 24.5rem;
}

.about-founder-photo {
  width:
    min(
      72%,
      20.5rem
    );
}

.about-founder-photo img {
  object-position: center 42%;
}

.about-founder-card {
  right: 1rem;
  bottom: 1.1rem;
}

.about-founder-signal--one {
  top: 1rem;
  right: .25rem;
}

.about-founder-signal--two {
  left: .4rem;
  bottom: 3.7rem;
}

@media (max-width: 1050px) {

  .about-founder-visual {
    min-height: 25rem;
  }

}

@media (max-width: 600px) {

  .about-hero h1 {
    max-width: none;
  }

  .about-founder-photo {
    width:
      min(
        78%,
        19rem
      );
  }

}

/* =========================================================
   About hero — lock composition
   ========================================================= */

.about-hero {
  padding-top: clamp(2rem, 2.8vw, 2.6rem);
  padding-bottom: clamp(2.8rem, 4vw, 3.6rem);
}

.about-hero__grid {
  align-items: start;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(24rem, .92fr);

  gap: clamp(2.75rem, 5vw, 4.75rem);
}

.about-hero__content {
  padding-top: clamp(.75rem, 1.5vw, 1.25rem);
}

.about-hero h1 {
  max-width: 10.5ch;

  font-size:
    clamp(
      3.3rem,
      4.05vw,
      4.15rem
    );
}

.about-founder-visual {
  min-height: 21.5rem;

  align-self: start;
}

.about-founder-photo {
  width: min(64%, 18rem);
}

.about-founder-photo img {
  object-position: center 40%;
}

.about-founder-signal--one {
  top: .65rem;
  right: .65rem;
}

.about-founder-signal--two {
  left: 2.1rem;
  bottom: 3.2rem;
}

.about-founder-card {
  right: 1.1rem;
  bottom: .8rem;
}

@media (max-width: 1050px) {

  .about-founder-visual {
    min-height: 23rem;
  }

}

@media (max-width: 600px) {

  .about-hero__content {
    padding-top: 0;
  }

  .about-founder-photo {
    width: min(72%, 18rem);
  }

}

/* =========================================================
   About hero — final height lock
   Preserve approved composition; remove excess vertical space
   ========================================================= */

.about-hero {
  padding-top: 1.9rem;
  padding-bottom: 2.4rem;
}

.about-hero__grid {
  align-items: center;
}

.about-hero__content {
  padding-top: 0;
}

.about-founder-visual {
  min-height: 20rem;
}

.about-founder-photo {
  width: min(62%, 17.5rem);
}

.about-founder-signal--one {
  top: .45rem;
}

.about-founder-signal--two {
  bottom: 2.5rem;
}

.about-founder-card {
  bottom: .35rem;
}

@media (max-width: 1050px) {

  .about-founder-visual {
    min-height: 22rem;
  }

}

@media (max-width: 600px) {

  .about-hero {
    padding-top: 2rem;
    padding-bottom: 2.75rem;
  }

  .about-founder-visual {
    min-height: 21rem;
  }

}

/* =========================================================
   About founder portrait — compact final composition

   Goal:
   Keep founder presence while reducing the portrait's
   visual footprint by approximately 50 percent.
   The visual should be approximately the same height as
   the primary copy block on the left.
   ========================================================= */

.about-hero {
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.about-hero__grid {
  align-items: center;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(20rem, .88fr);

  gap: clamp(3rem, 6vw, 6rem);
}

.about-founder-visual {
  min-height: 22rem;

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

.about-founder-photo {
  width: min(46%, 13.25rem);

  margin: 0;
}

.about-founder-photo img {
  display: block;

  width: 100%;
  height: 20rem;

  aspect-ratio: auto;

  object-fit: cover;
  object-position: center 34%;

  border-radius: inherit;
}

/* Keep the information tiles attached to the smaller portrait. */

.about-founder-signal--one {
  top: 1.4rem;
  right: 1.5rem;
}

.about-founder-signal--two {
  left: 1.6rem;
  bottom: 3.2rem;
}

.about-founder-card {
  right: 1.25rem;
  bottom: 1rem;
}

/* Slightly reduce floating cards so they do not overpower
   the now-smaller founder portrait. */

.about-founder-signal,
.about-founder-card {
  padding: .62rem .75rem;
}

.about-founder-card {
  min-width: 9.75rem;
}

.about-founder-card strong {
  font-size: .9rem;
}

.about-founder-card p {
  font-size: .64rem;
}

/* Preserve the motion already approved. */

@media (max-width: 1050px) {

  .about-founder-visual {
    min-height: 22rem;
  }

  .about-founder-photo {
    width: min(15rem, 52%);
  }

  .about-founder-photo img {
    height: 20rem;
  }

}

@media (max-width: 700px) {

  .about-hero__grid {
    grid-template-columns: 1fr;
  }

  .about-founder-visual {
    min-height: 22rem;
    margin-top: 1rem;
  }

  .about-founder-photo {
    width: min(13rem, 58%);
  }

}

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

  .about-founder-photo,
  .about-founder-card,
  .about-founder-signal {
    animation: none;
  }

}