/* =========================================================
   RDS V2 — Public Framework Overview
   ========================================================= */

.framework-page {
  color: #071323;
  background: #eef4f8;
}

.framework-page-hero {
  overflow: hidden;

  padding:
    clamp(4rem,7vw,6rem)
    clamp(1.5rem,5vw,4.5rem);

  color: #fff;

  background:
    radial-gradient(
      circle at 86% 20%,
      rgba(0,174,239,.17),
      transparent 29rem
    ),
    linear-gradient(
      145deg,
      #071323,
      #0a2948
    );
}

.framework-page-hero__grid {
  width: min(100%,76rem);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0,.98fr)
    minmax(27rem,1.02fr);

  align-items: center;

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

.framework-page-hero .eyebrow {
  color: #efb735;
}

.framework-page-hero h1 {
  max-width: 10ch;

  margin: 0;

  color: #fff;

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

  line-height: .95;

  letter-spacing: -.055em;
}

.framework-page-hero__lead {
  max-width: 40rem;

  margin-top: 1.4rem;

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

  font-size: 1.05rem;

  line-height: 1.6;
}

.framework-page-hero__visual {
  display: grid;

  gap: .65rem;
}

.framework-page-hero__visual article {
  display: grid;

  grid-template-columns:
    auto
    1fr;

  align-items: center;

  gap: .8rem;

  padding: .9rem 1rem;

  color: #071323;

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

  border-radius: .75rem;

  box-shadow:
    0 1rem 2rem
    rgba(0,0,0,.18);
}

.framework-page-hero__visual span {
  display: grid;

  width: 2.15rem;
  height: 2.15rem;

  place-items: center;

  color: #071323;
  background: #efb735;

  border-radius: 50%;

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

.framework-page-hero__visual strong {
  font-size: .84rem;
}

.framework-page-section {
  padding:
    clamp(4.5rem,7vw,6.5rem)
    clamp(1.5rem,5vw,4.5rem);
}

.framework-page-section--white {
  background: #fff;
}

.framework-page-section--soft {
  background: #eef4f8;
}

.framework-page-section--dark {
  color: #fff;

  background:
    linear-gradient(
      120deg,
      #071323,
      #08314b
    );
}

.framework-page-section__inner {
  width: min(100%,76rem);

  margin: 0 auto;
}

.framework-page-section__split {
  display: grid;

  grid-template-columns:
    minmax(0,.82fr)
    minmax(0,1.18fr);

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

.framework-page-section h2 {
  max-width: 13ch;

  margin: 0;

  color: #071323;

  font-size:
    clamp(
      2.75rem,
      4.4vw,
      4.35rem
    );

  line-height: .97;

  letter-spacing: -.05em;
}

.framework-page-section--dark h2 {
  color: #fff;
}

.framework-page-section__intro {
  color: #58687a;

  line-height: 1.65;
}

.framework-page-section--dark
.framework-page-section__intro {
  color: rgba(255,255,255,.72);
}

.framework-page-flow {
  display: grid;

  gap: .75rem;
}

.framework-page-flow article {
  display: grid;

  grid-template-columns:
    auto
    1fr;

  gap: 1rem;

  padding: 1.2rem;

  background: #f3f6f9;

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

  border-radius: .9rem;
}

.framework-page-flow span {
  display: grid;

  width: 2.4rem;
  height: 2.4rem;

  place-items: center;

  color: #071323;

  background: #efb735;

  border-radius: 50%;

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

.framework-page-flow h3 {
  margin: 0 0 .3rem;

  color: #071323;
}

.framework-page-flow p {
  margin: 0;

  color: #59697a;

  font-size: .8rem;

  line-height: 1.55;
}

.framework-page-boundary {
  padding: 1.5rem;

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

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

  border-left:
    3px solid
    #efb735;

  border-radius: .9rem;
}

.framework-page-boundary strong {
  display: block;

  color: #fff;

  font-size: 1.1rem;
}

.framework-page-boundary p {
  margin: .55rem 0 0;

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

  line-height: 1.6;
}

.framework-page-benefits {
  display: grid;

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

  gap: 1rem;

  margin-top: 2.2rem;
}

.framework-page-benefits article {
  padding: 1.3rem;

  background: #fff;

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

  border-top:
    3px solid
    #00718f;

  border-radius: .9rem;
}

.framework-page-benefits h3 {
  margin: 0 0 .45rem;

  color: #071323;
}

.framework-page-benefits p {
  margin: 0;

  color: #59697a;

  font-size: .8rem;

  line-height: 1.55;
}

.framework-page-cta {
  padding:
    clamp(4rem,7vw,6rem)
    clamp(1.5rem,5vw,4.5rem);

  color: #fff;

  background:
    linear-gradient(
      110deg,
      #07566d,
      #07172d 70%
    );
}

.framework-page-cta__inner {
  width: min(100%,76rem);

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    1fr
    auto;

  align-items: center;

  gap: 3rem;
}

.framework-page-cta h2 {
  max-width: 12ch;

  margin: 0;

  color: #fff;

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

  line-height: .96;

  letter-spacing: -.05em;
}

.framework-page-cta p {
  max-width: 39rem;

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

  line-height: 1.6;
}

@media (max-width: 1000px) {

  .framework-page-hero__grid,
  .framework-page-section__split {
    grid-template-columns: 1fr;
  }

  .framework-page-benefits {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 700px) {

  .framework-page-hero h1 {
    max-width: none;

    font-size:
      clamp(
        3rem,
        13vw,
        4.3rem
      );
  }

  .framework-page-cta__inner {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   Framework final commercial calibration
   ========================================================= */

.framework-page-hero {
  min-height: auto;

  padding:
    clamp(3.25rem, 5vw, 4.75rem)
    clamp(1.5rem, 5vw, 4.5rem);
}

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

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

.framework-page-hero h1 {
  max-width: 12ch;

  font-size:
    clamp(
      3.15rem,
      4.4vw,
      4.55rem
    );

  line-height: .96;
}

.framework-page-hero__lead {
  max-width: 38rem;
}

.framework-page-hero .button--secondary {
  color: #fff;

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

  border-color:
    rgba(255,255,255,.48);
}

.framework-page-hero .button--secondary:hover,
.framework-page-hero .button--secondary:focus-visible {
  color: #071323;

  background: #fff;

  border-color: #fff;
}

@media (max-width: 1000px) {

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

}

@media (max-width: 700px) {

  .framework-page-hero {
    padding-top: 3rem;
    padding-bottom: 3.75rem;
  }

  .framework-page-hero h1 {
    max-width: none;

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

}

/* === FRAMEWORK FINAL SPACING LOCK START === */

/*
   Final desktop calibration:
   - give the dark section heading more usable width
   - reduce unnecessary vertical height
   - tighten Why It Matters without compressing readability
*/

.framework-page-section--dark {
  padding-top:
    clamp(3.5rem, 5vw, 4.75rem);

  padding-bottom:
    clamp(3.5rem, 5vw, 4.75rem);
}

.framework-page-section--dark
.framework-page-section__split {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.05fr);

  align-items: start;

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

.framework-page-section--dark h2 {
  max-width: 16ch;

  font-size:
    clamp(
      2.75rem,
      3.75vw,
      3.85rem
    );

  line-height: .98;
}

.framework-page-section--dark
.framework-page-section__intro {
  max-width: 39rem;

  margin-top: .1rem;
}

.framework-page-section--dark
.framework-page-boundary {
  margin-top: 1.2rem;
}


/* Why It Matters */

.framework-page-section--soft {
  padding-top:
    clamp(3.75rem, 5.5vw, 5rem);

  padding-bottom:
    clamp(3.75rem, 5.5vw, 5rem);
}

.framework-page-section--soft
.framework-page-section__split {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.05fr);

  align-items: start;

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

.framework-page-section--soft h2 {
  max-width: 15ch;

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

  line-height: .98;
}

.framework-page-section--soft
.framework-page-section__intro {
  max-width: 39rem;

  margin-top: .2rem;
}

.framework-page-section--soft
.framework-page-benefits {
  margin-top:
    clamp(
      1.75rem,
      3vw,
      2.4rem
    );
}


/* Keep tablet/mobile layout comfortably stacked. */

@media (max-width: 1000px) {

  .framework-page-section--dark
  .framework-page-section__split,

  .framework-page-section--soft
  .framework-page-section__split {
    grid-template-columns: 1fr;

    gap: 2rem;
  }

  .framework-page-section--dark h2,
  .framework-page-section--soft h2 {
    max-width: 14ch;
  }

}

@media (max-width: 700px) {

  .framework-page-section--dark,
  .framework-page-section--soft {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }

  .framework-page-section--dark h2,
  .framework-page-section--soft h2 {
    max-width: none;

    font-size:
      clamp(
        2.55rem,
        11vw,
        3.4rem
      );
  }

}

/* === FRAMEWORK FINAL SPACING LOCK END === */