/* ==========================================================
   CLEARCODE CREATIVE V2
   ABOUT PAGE
========================================================== */


/* ==========================================================
   PAGE COLOR REFINEMENT
========================================================== */

body {

  background:
    #c5c6c9;

}


.nav-current::after {

  transform:
    scaleX(1) !important;

}


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

.about-hero-v2 {

  position: relative;

  min-height: 100vh;

  padding:
    calc(var(--header-height) + 48px)
    0 35px;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 82% 22%,
      rgba(111, 106, 130, 0.15),
      transparent 32%
    ),

    linear-gradient(
      135deg,
      #c5c6c9,
      #b9bbc0
    );

}


.about-grid-lines {

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.55;

  background-image:

    linear-gradient(
      90deg,
      transparent calc(25% - 0.5px),
      rgba(20,22,27,0.08) 25%,
      transparent calc(25% + 0.5px)
    ),

    linear-gradient(
      90deg,
      transparent calc(50% - 0.5px),
      rgba(20,22,27,0.08) 50%,
      transparent calc(50% + 0.5px)
    ),

    linear-gradient(
      90deg,
      transparent calc(75% - 0.5px),
      rgba(20,22,27,0.08) 75%,
      transparent calc(75% + 0.5px)
    );

}


.about-hero-shell {

  position: relative;

  z-index: 2;

  width:
    min(
      calc(100% - 64px),
      1450px
    );

  min-height:
    calc(
      100vh
      - var(--header-height)
      - 83px
    );

  margin: 0 auto;

  display: flex;

  flex-direction: column;

}


.about-hero-meta {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding-bottom: 23px;

  border-bottom:
    1px solid var(--line);

  color:
    #656871;

  font-family:
    var(--mono);

  font-size:
    0.56rem;

  letter-spacing:
    0.14em;

  text-transform: uppercase;

}


.about-hero-main {

  flex: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(430px, 0.72fr);

  gap:
    clamp(
      45px,
      8vw,
      125px
    );

  align-items: center;

  padding:
    65px 0;

}


.about-hero-copy
.eyebrow {

  margin-bottom:
    25px;

}


.about-hero-copy h1 {

  max-width:
    900px;

  font-size:
    clamp(
      4.3rem,
      7vw,
      8rem
    );

  font-weight:
    500;

  letter-spacing:
    -0.075em;

  line-height:
    0.9;

}


.about-hero-copy h1 em {

  display:
    block;

  margin-top:
    5px;

  color:
    #696478;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.about-hero-lower {

  max-width:
    760px;

  margin-top:
    48px;

  display:
    grid;

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

  gap:
    45px;

}


.about-hero-lower p {

  color:
    #50535b;

  font-size:
    0.88rem;

  line-height:
    1.8;

}


.about-hero-footer {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  padding-top:
    22px;

  border-top:
    1px solid var(--line);

  color:
    #62656e;

  font-family:
    var(--mono);

  font-size:
    0.52rem;

  letter-spacing:
    0.13em;

}



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

.about-hero-art {

  position:
    relative;

  min-height:
    580px;

  overflow:
    hidden;

  color:
    #dadce0;

  background:

    radial-gradient(
      circle at 20% 80%,
      rgba(107, 102, 126, 0.36),
      transparent 35%
    ),

    radial-gradient(
      circle at 80% 18%,
      rgba(75, 91, 119, 0.28),
      transparent 30%
    ),

    linear-gradient(
      145deg,
      #2a303b,
      #1a1e26 60%,
      #15181e
    );

  box-shadow:
    0 35px 80px
    rgba(17,20,27,0.13);

  transform:
    rotate(1.2deg);

}


.about-art-grid {

  position:
    absolute;

  inset:
    0;

  opacity:
    0.15;

  background-image:

    linear-gradient(
      rgba(255,255,255,0.14)
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.14)
      1px,
      transparent 1px
    );

  background-size:
    90px 90px;

}


.about-orbit {

  position:
    absolute;

  border:
    1px solid
    rgba(173,171,190,0.18);

  border-radius:
    50%;

}


.orbit-one {

  width:
    390px;

  height:
    390px;

  top:
    -210px;

  right:
    -110px;

}


.orbit-two {

  width:
    520px;

  height:
    520px;

  bottom:
    -330px;

  left:
    -250px;

}


.about-art-top {

  position:
    relative;

  z-index:
    3;

  display:
    flex;

  justify-content:
    space-between;

  padding:
    27px 30px;

  border-bottom:
    1px solid
    rgba(255,255,255,0.13);

  font-family:
    var(--mono);

  font-size:
    0.5rem;

  letter-spacing:
    0.14em;

}


.about-art-center {

  position:
    relative;

  z-index:
    3;

  min-height:
    395px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

}


.about-art-center small {

  margin-bottom:
    30px;

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

  font-family:
    var(--mono);

  font-size:
    0.5rem;

  letter-spacing:
    0.2em;

}


.equation-row {

  display:
    flex;

  align-items:
    center;

  gap:
    20px;

  font-size:
    clamp(
      2.5rem,
      4vw,
      4.3rem
    );

  font-weight:
    600;

  letter-spacing:
    -0.06em;

}


.equation-row i {

  color:
    #8d879d;

  font-family:
    var(--serif);

  font-style:
    italic;

  font-weight:
    500;

}


.about-art-center strong {

  margin-top:
    5px;

  color:
    #aaa5b8;

  font-family:
    var(--serif);

  font-size:
    clamp(
      4.7rem,
      7vw,
      7.2rem
    );

  font-style:
    italic;

  font-weight:
    500;

  letter-spacing:
    -0.07em;

  line-height:
    0.9;

}


.about-art-note {

  position:
    absolute;

  left:
    25px;

  bottom:
    92px;

  z-index:
    4;

  color:
    #aca8ba;

  font-family:
    var(--mono);

  font-size:
    0.5rem;

  transform:
    rotate(-3deg);

}


.about-art-bottom {

  position:
    relative;

  z-index:
    3;

  min-height:
    72px;

  padding:
    0 30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-top:
    1px solid
    rgba(255,255,255,0.13);

  font-family:
    var(--mono);

  font-size:
    0.46rem;

  letter-spacing:
    0.13em;

}



/* ==========================================================
   STATEMENT
========================================================== */

.about-statement-section {

  padding:
    155px 0;

  background:
    #bbbcc0;

}


.about-statement-grid {

  display:
    grid;

  grid-template-columns:
    0.3fr
    1.35fr
    0.55fr;

  gap:
    clamp(
      45px,
      8vw,
      125px
    );

  align-items:
    start;

}


.statement-index {

  display:
    flex;

  gap:
    17px;

  font-family:
    var(--mono);

  font-size:
    0.6rem;

  letter-spacing:
    0.1em;

}


.statement-index span {

  color:
    #625d76;

}


.statement-main h2 {

  margin-top:
    20px;

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

  font-weight:
    500;

  letter-spacing:
    -0.07em;

  line-height:
    0.93;

}


.statement-main h2 em {

  font-family:
    var(--serif);

  font-weight:
    500;

  color:
    #666177;

}


.statement-side {

  padding-top:
    45px;

}


.statement-side p {

  margin-bottom:
    26px;

  color:
    #51535a;

  font-size:
    0.82rem;

  line-height:
    1.8;

}



/* ==========================================================
   STORY
========================================================== */

.story-section-v2 {

  padding:
    155px 0;

  color:
    #e3e4e6;

  background:
    #181b22;

}


.story-grid-v2 {

  display:
    grid;

  grid-template-columns:
    0.9fr 1fr;

  gap:
    clamp(
      60px,
      10vw,
      150px
    );

}


.story-heading-v2 {

  position:
    sticky;

  top:
    135px;

  height:
    max-content;

}


.story-heading-v2 h2 {

  margin-top:
    18px;

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

  font-weight:
    500;

  letter-spacing:
    -0.07em;

  line-height:
    0.93;

}


.story-heading-v2 h2 em {

  display:
    block;

  color:
    #aaa5b9;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.story-copy-v2 {

  border-top:
    1px solid var(--line-light);

}


.story-block {

  display:
    grid;

  grid-template-columns:
    55px 1fr;

  gap:
    25px;

  padding:
    50px 0;

  border-bottom:
    1px solid var(--line-light);

}


.story-block > span {

  color:
    #9994aa;

  font-family:
    var(--mono);

  font-size:
    0.62rem;

}


.story-block h3 {

  margin-bottom:
    16px;

  font-family:
    var(--serif);

  font-size:
    clamp(
      1.7rem,
      2.4vw,
      2.6rem
    );

  font-style:
    italic;

  font-weight:
    500;

}


.story-block p {

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

  font-size:
    0.83rem;

  line-height:
    1.85;

}



/* ==========================================================
   TWO SIDES
========================================================== */

.two-sides-section {

  padding:
    155px 0;

  background:
    #c2c3c6;

}


.two-sides-heading {

  margin-bottom:
    70px;

}


.two-sides-heading h2 {

  margin-top:
    18px;

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

  font-weight:
    500;

  letter-spacing:
    -0.075em;

  line-height:
    0.91;

}


.two-sides-heading h2 em {

  display:
    block;

  color:
    #686378;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.two-sides-grid {

  display:
    grid;

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

  gap:
    20px;

}


.side-card {

  position:
    relative;

  min-height:
    610px;

  padding:
    0 38px;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

}


.side-design {

  color:
    #dddde1;

  background:

    radial-gradient(
      circle at 80% 20%,
      rgba(119,111,139,0.32),
      transparent 32%
    ),

    linear-gradient(
      145deg,
      #32323b,
      #202128
    );

}


.side-business {

  color:
    #d9dce2;

  background:

    radial-gradient(
      circle at 20% 75%,
      rgba(82,98,126,0.28),
      transparent 36%
    ),

    linear-gradient(
      145deg,
      #303947,
      #1e252f
    );

}


.business-lines {

  position:
    absolute;

  inset:
    0;

  opacity:
    0.1;

  background-image:

    linear-gradient(
      rgba(255,255,255,0.18)
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.18)
      1px,
      transparent 1px
    );

  background-size:
    95px 95px;

}


.side-card-top {

  position:
    relative;

  z-index:
    2;

  min-height:
    85px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-bottom:
    1px solid
    rgba(255,255,255,0.13);

  font-family:
    var(--mono);

  font-size:
    0.52rem;

  letter-spacing:
    0.14em;

}


.side-card-center {

  position:
    relative;

  z-index:
    2;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

}


.side-card-center small {

  margin-bottom:
    25px;

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

  font-family:
    var(--mono);

  font-size:
    0.5rem;

  letter-spacing:
    0.16em;

}


.side-card-center h3 {

  max-width:
    520px;

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

  font-weight:
    500;

  letter-spacing:
    -0.07em;

  line-height:
    0.9;

}


.side-card-center h3 em {

  display:
    block;

  color:
    #aaa5b8;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.side-business
.side-card-center h3 em {

  color:
    #a4adbd;

}


.side-card-center p {

  max-width:
    430px;

  margin-top:
    30px;

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

  font-size:
    0.79rem;

  line-height:
    1.8;

}


.side-card-footer {

  position:
    relative;

  z-index:
    2;

  min-height:
    72px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-top:
    1px solid
    rgba(255,255,255,0.13);

  font-family:
    var(--mono);

  font-size:
    0.47rem;

  letter-spacing:
    0.13em;

}


.two-sides-note {

  max-width:
    600px;

  margin:
    50px 0 0 auto;

  display:
    grid;

  grid-template-columns:
    120px 1fr;

  gap:
    30px;

}


.two-sides-note span {

  color:
    #625d74;

  font-family:
    var(--mono);

  font-size:
    0.55rem;

}


.two-sides-note p {

  color:
    #50535a;

  font-family:
    var(--serif);

  font-size:
    1.35rem;

  font-style:
    italic;

  line-height:
    1.5;

}



/* ==========================================================
   PRINCIPLES
========================================================== */

.principles-section {

  padding:
    155px 0;

  background:
    #b8babf;

}


.principles-header {

  display:
    grid;

  grid-template-columns:
    1fr 0.35fr;

  gap:
    70px;

  align-items:
    end;

  margin-bottom:
    80px;

}


.principles-header h2 {

  margin-top:
    18px;

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

  font-weight:
    500;

  letter-spacing:
    -0.07em;

  line-height:
    0.91;

}


.principles-header h2 em {

  color:
    #666177;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.principles-header > p {

  color:
    #51545d;

  font-size:
    0.82rem;

}


.principle-list {

  border-top:
    1px solid var(--line);

}


.principle {

  min-height:
    145px;

  display:
    grid;

  grid-template-columns:
    70px
    0.65fr
    1fr
    60px;

  gap:
    30px;

  align-items:
    center;

  border-bottom:
    1px solid var(--line);

  transition:
    padding 0.3s ease,
    background 0.3s ease;

}


.principle:hover {

  padding:
    0 24px;

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

}


.principle-number {

  font-family:
    var(--mono);

  font-size:
    0.58rem;

}


.principle h3 {

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

  font-weight:
    500;

  letter-spacing:
    -0.05em;

}


.principle p {

  max-width:
    540px;

  color:
    #54565d;

  font-size:
    0.8rem;

  line-height:
    1.75;

}


.principle-mark {

  justify-self:
    end;

  color:
    #655f78;

  font-family:
    var(--mono);

  font-size:
    1.1rem;

}



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

.founder-section-v2 {

  padding:
    155px 0;

  color:
    #e4e5e7;

  background:
    #191c23;

}


.founder-grid-v2 {

  display:
    grid;

  grid-template-columns:
    0.6fr
    0.8fr
    0.8fr;

  gap:
    clamp(
      50px,
      7vw,
      110px
    );

  align-items:
    start;

}


.founder-intro h2 {

  margin-top:
    18px;

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

  font-weight:
    500;

  letter-spacing:
    -0.075em;

  line-height:
    0.9;

}


.founder-intro h2 em {

  display:
    block;

  color:
    #aaa6bb;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.founder-copy {

  padding-top:
    40px;

}


.founder-copy p {

  margin-bottom:
    24px;

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

  font-size:
    0.82rem;

  line-height:
    1.85;

}


.founder-copy
.founder-lead {

  color:
    #d7d8db;

  font-family:
    var(--serif);

  font-size:
    1.35rem;

  font-style:
    italic;

  line-height:
    1.5;

}


.founder-art {

  position:
    relative;

  min-height:
    525px;

  padding:
    26px;

  overflow:
    hidden;

  color:
    #dedfe2;

  background:

    radial-gradient(
      circle at 20% 20%,
      rgba(120,112,140,0.30),
      transparent 32%
    ),

    linear-gradient(
      145deg,
      #3c4050,
      #242832
    );

  transform:
    rotate(1.5deg);

}


.founder-card-meta {

  display:
    flex;

  justify-content:
    space-between;

  font-family:
    var(--mono);

  font-size:
    0.48rem;

  letter-spacing:
    0.14em;

}


.founder-monogram {

  position:
    absolute;

  top:
    88px;

  right:
    37px;

  width:
    115px;

  height:
    115px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    50%;

}


.founder-monogram span {

  font-family:
    var(--serif);

  font-size:
    3.7rem;

  font-style:
    italic;

}


.founder-art-copy {

  position:
    absolute;

  left:
    28px;

  bottom:
    105px;

}


.founder-art-copy small {

  display:
    block;

  margin-bottom:
    17px;

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

  font-family:
    var(--mono);

  font-size:
    0.48rem;

  letter-spacing:
    0.14em;

}


.founder-art-copy strong {

  font-family:
    var(--serif);

  font-size:
    clamp(
      2.6rem,
      4vw,
      4.2rem
    );

  font-style:
    italic;

  font-weight:
    500;

  line-height:
    0.95;

}


.founder-skills {

  position:
    absolute;

  left:
    26px;

  right:
    26px;

  bottom:
    25px;

  padding-top:
    18px;

  display:
    flex;

  justify-content:
    space-between;

  border-top:
    1px solid
    rgba(255,255,255,0.15);

  font-family:
    var(--mono);

  font-size:
    0.44rem;

  letter-spacing:
    0.13em;

}


.founder-side-text {

  position:
    absolute;

  right:
    12px;

  top:
    48%;

  writing-mode:
    vertical-rl;

  font-family:
    var(--mono);

  font-size:
    0.42rem;

  letter-spacing:
    0.14em;

  opacity:
    0.5;

}



/* ==========================================================
   DIFFERENCE
========================================================== */

.difference-section {

  padding:
    100px 0 145px;

  overflow:
    hidden;

  background:
    #c4c5c8;

}


.difference-track {

  width:
    max-content;

  display:
    flex;

  align-items:
    center;

  gap:
    38px;

  padding:
    30px 0 75px;

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

  font-weight:
    600;

  letter-spacing:
    -0.07em;

  line-height:
    1;

  transform:
    translateX(-3%);

}


.difference-track i {

  color:
    #777184;

  font-family:
    var(--serif);

  font-style:
    italic;

  font-weight:
    500;

}


.difference-bottom {

  display:
    grid;

  grid-template-columns:
    1fr 0.4fr;

  gap:
    80px;

  align-items:
    end;

  padding-top:
    60px;

  border-top:
    1px solid var(--line);

}


.difference-title h2 {

  margin-top:
    18px;

  font-size:
    clamp(
      3.5rem,
      5.3vw,
      6.2rem
    );

  font-weight:
    500;

  letter-spacing:
    -0.07em;

  line-height:
    0.93;

}


.difference-title h2 em {

  display:
    block;

  color:
    #686277;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.difference-copy p {

  color:
    #52545c;

  font-size:
    0.82rem;

  line-height:
    1.8;

}



/* ==========================================================
   FINAL CTA
========================================================== */

.about-final-cta {

  padding:
    110px 0 85px;

  background:

    radial-gradient(
      circle at 85% 10%,
      rgba(168,160,183,0.28),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      #858b99,
      #96929f
    );

}


.about-final-shell {

  width:
    min(
      calc(100% - 80px),
      1450px
    );

  margin:
    0 auto;

}


.about-final-meta {

  display:
    flex;

  justify-content:
    space-between;

  padding-bottom:
    24px;

  border-bottom:
    1px solid rgba(17,17,17,0.25);

  font-family:
    var(--mono);

  font-size:
    0.56rem;

  letter-spacing:
    0.13em;

}


.about-final-main {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    50px;

  padding:
    75px 0;

}


.about-final-main h2 {

  font-size:
    clamp(
      4.8rem,
      9vw,
      10rem
    );

  font-weight:
    600;

  letter-spacing:
    -0.085em;

  line-height:
    0.84;

}


.about-final-main h2 em {

  display:
    block;

  font-family:
    var(--serif);

  font-weight:
    500;

}


.about-cta-circle {

  width:
    clamp(
      145px,
      15vw,
      220px
    );

  height:
    clamp(
      145px,
      15vw,
      220px
    );

  flex-shrink:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--ink);

  border-radius:
    50%;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;

}


.about-cta-circle span {

  font-family:
    var(--mono);

  font-size:
    0.6rem;

}


.about-cta-circle strong {

  margin-top:
    8px;

  font-size:
    2rem;

}


.about-cta-circle:hover {

  color:
    white;

  background:
    #191c23;

  transform:
    rotate(7deg);

}


.about-final-bottom {

  padding-top:
    28px;

  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    40px;

  border-top:
    1px solid rgba(17,17,17,0.25);

}


.about-final-bottom p {

  max-width:
    320px;

  font-size:
    0.78rem;

  line-height:
    1.7;

}



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

@media
(max-width: 1100px) {

  .about-hero-main {

    grid-template-columns:
      1fr 0.7fr;

    gap:
      50px;

  }


  .founder-grid-v2 {

    grid-template-columns:
      0.65fr 1fr;

  }


  .founder-art {

    grid-column:
      2 / 3;

  }

}



@media
(max-width: 900px) {

  .about-hero-shell {

    width:
      calc(100% - 38px);

  }


  .about-hero-main {

    grid-template-columns:
      1fr;

  }


  .about-hero-copy {

    max-width:
      760px;

  }


  .about-hero-art {

    width:
      90%;

    min-height:
      520px;

    margin-left:
      auto;

  }


  .about-statement-grid,
  .story-grid-v2 {

    grid-template-columns:
      1fr;

  }


  .story-heading-v2 {

    position:
      static;

  }


  .two-sides-grid {

    grid-template-columns:
      1fr;

  }


  .side-card {

    min-height:
      540px;

  }


  .principles-header {

    grid-template-columns:
      1fr;

    gap:
      25px;

  }


  .principle {

    grid-template-columns:
      50px 0.5fr 1fr 40px;

  }


  .founder-grid-v2 {

    grid-template-columns:
      1fr 1fr;

  }


  .founder-art {

    grid-column:
      1 / 3;

    width:
      65%;

    margin-left:
      auto;

  }


  .difference-bottom {

    grid-template-columns:
      1fr;

  }

}



@media
(max-width: 650px) {

  .about-hero-v2 {

    min-height:
      auto;

    padding-top:
      calc(var(--header-height) + 30px);

  }


  .about-hero-shell {

    width:
      calc(100% - 30px);

  }


  .about-hero-meta
  span:nth-child(2),
  .about-hero-meta
  span:nth-child(3) {

    display:
      none;

  }


  .about-hero-copy h1 {

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

  }


  .about-hero-lower {

    grid-template-columns:
      1fr;

    gap:
      20px;

  }


  .about-hero-art {

    width:
      100%;

    min-height:
      460px;

  }


  .equation-row {

    flex-wrap:
      wrap;

    justify-content:
      center;

  }


  .about-art-center strong {

    font-size:
      4.5rem;

  }


  .about-hero-footer {

    flex-wrap:
      wrap;

  }


  .about-statement-section,
  .story-section-v2,
  .two-sides-section,
  .principles-section,
  .founder-section-v2 {

    padding:
      100px 0;

  }


  .about-statement-grid {

    gap:
      35px;

  }


  .statement-main h2,
  .story-heading-v2 h2,
  .two-sides-heading h2,
  .principles-header h2,
  .founder-intro h2,
  .difference-title h2 {

    font-size:
      clamp(
        3.2rem,
        14vw,
        4.8rem
      );

  }


  .side-card {

    min-height:
      470px;

    padding:
      0 22px;

  }


  .side-card-center h3 {

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

  }


  .two-sides-note {

    grid-template-columns:
      1fr;

    gap:
      10px;

  }


  .principle {

    grid-template-columns:
      35px 1fr 25px;

    gap:
      15px;

    padding:
      27px 0;

  }


  .principle h3 {

    font-size:
      1.7rem;

  }


  .principle p {

    grid-column:
      2 / 4;

  }


  .principle-mark {

    grid-column:
      3;

    grid-row:
      1;

  }


  .founder-grid-v2 {

    grid-template-columns:
      1fr;

  }


  .founder-art {

    grid-column:
      auto;

    width:
      100%;

    min-height:
      480px;

  }


  .difference-section {

    padding:
      75px 0 100px;

  }


  .difference-track {

    font-size:
      3.7rem;

  }


  .about-final-cta {

    padding:
      80px 0 55px;

  }


  .about-final-shell {

    width:
      calc(100% - 34px);

  }


  .about-final-main {

    display:
      block;

  }


  .about-final-main h2 {

    font-size:
      clamp(
        4.2rem,
        18vw,
        6rem
      );

  }


  .about-cta-circle {

    width:
      135px;

    height:
      135px;

    margin:
      45px 0 0 auto;

  }


  .about-final-bottom {

    flex-direction:
      column;

    align-items:
      flex-start;

  }

}