:root {

  --about-orange: #f4512c;
  --about-orange-light: #ff8c6d;
  --about-orange-pale: #fff0ea;

  --about-cream: #f7f5f1;
  --about-white: #ffffff;
  --about-black: #101010;
  --about-muted: #69635e;

  --about-yellow: #ffce5b;
  --about-yellow-dark: #dd8700;
  --about-brown: #844300;

  --about-display:
    "Anton",
    Impact,
    "Arial Narrow",
    sans-serif;

}


/* =========================================
   IMPORTANT STICKY FIX
========================================= */

html {
  overflow-x: clip;
}

body {
  overflow-x: clip !important;
}

.about-page {
  width: 100%;

  /*
    DO NOT use overflow:hidden here.
    It breaks position:sticky on mobile.
  */
  overflow: visible;

  background:
    var(--about-cream);

  color:
    var(--about-black);
}


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

.about-page-intro {
  padding:
    112px 18px
    72px;

  background:
    var(--about-cream);
}


.about-page-kicker {
  margin:
    0 0 16px;

  color:
    var(--about-orange);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.about-page-intro h1 {
  margin: 0;

  max-width:
    900px;

  color:
    var(--about-black);

  font-family:
    var(--about-display);

  font-size:
    clamp(
      62px,
      17vw,
      86px
    );

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.025em;

  text-transform:
    uppercase;
}


.about-page-copy {
  max-width:
    560px;

  margin:
    24px 0 0;

  color:
    var(--about-muted);

  font-size:
    15px;

  line-height:
    1.7;
}


/* =========================================
   COMMON
========================================= */

.about-intro,
.about-brands,
.about-what,
.about-purpose,
.about-values,
.about-discover {
  padding:
    76px 18px;
}


.about-section-label {
  display:
    inline-block;

  color:
    var(--about-orange);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;
}


.about-intro h2,
.about-brands h2,
.about-what h2,
.about-purpose h2,
.about-values h2,
.about-discover h2 {
  margin: 0;

  font-family:
    var(--about-display);

  font-size:
    clamp(
      52px,
      15vw,
      72px
    );

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.02em;

  text-transform:
    uppercase;
}


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

.about-intro {
  background:
    #ffffff;
}


.about-intro-grid {
  margin-top:
    19px;

  display:
    grid;

  gap:
    32px;
}


.about-intro-copy {
  color:
    var(--about-muted);

  font-size:
    15px;

  line-height:
    1.75;
}


.about-intro-copy p {
  margin:
    0 0 19px;
}


.about-intro-copy
.about-lead {
  color:
    var(--about-black);

  font-size:
    19px;

  font-weight:
    600;

  line-height:
    1.55;
}


/* =========================================
   BRAND FAMILY
========================================= */

.about-brands {
  background:
    var(--about-cream);
}


.about-brands-heading {
  max-width:
    620px;
}


.about-brands-heading h2 {
  margin-top:
    17px;
}


.about-brands-heading p {
  max-width:
    520px;

  margin:
    23px 0 0;

  color:
    var(--about-muted);

  font-size:
    15px;

  line-height:
    1.65;
}


.about-brand-grid {
  margin-top:
    40px;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10px;
}


.about-brand-card {
  min-height:
    170px;

  padding:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  border-radius:
    22px;

  background:
    #ffffff;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}


.about-brand-card img {
  display:
    block;

  width:
    auto;

  height:
    auto;

  max-width:
    90%;

  max-height:
    100px;

  object-fit:
    contain;
}


.about-brand-card-wide {
  grid-column:
    1 / -1;
}


.about-brand-card-wide img {
  max-width:
    68%;

  max-height:
    115px;
}


.about-center-button {
  margin-top:
    30px;

  display:
    flex;

  justify-content:
    center;
}


.about-primary-button {
  min-height:
    56px;

  padding:
    0 26px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    999px;

  background:
    var(--about-orange);

  color:
    #ffffff;

  font-size:
    15px;

  font-weight:
    800;
}


/* =========================================
   WHAT WE DO
========================================= */

.about-what {
  background:
    #ffffff;
}


.about-what-heading h2 {
  margin-top:
    17px;
}


.about-service-grid {
  margin-top:
    42px;

  display:
    grid;

  gap:
    12px;
}


.about-service {
  position:
    relative;

  min-height:
    260px;

  padding:
    23px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  overflow:
    hidden;

  border-radius:
    26px;
}


.about-service > span {
  position:
    absolute;

  top:
    21px;

  left:
    22px;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.12em;
}


.about-service h3 {
  margin:
    0 0 10px;

  font-family:
    var(--about-display);

  font-size:
    43px;

  font-weight:
    400;

  line-height:
    1;
}


.about-service p {
  max-width:
    300px;

  margin:
    0;

  font-size:
    13px;

  line-height:
    1.55;

  opacity:
    0.78;
}


.about-service-orange {
  background:
    var(--about-orange);

  color:
    #ffffff;
}


.about-service-cream {
  background:
    #ffe3da;
}


.about-service-black {
  background:
    var(--about-black);

  color:
    #ffffff;
}


.about-service-soft {
  background:
    var(--about-cream);
}


/* =========================================
   PURPOSE
========================================= */

.about-purpose {
  background:
    var(--about-orange);

  color:
    #ffffff;
}


.about-purpose .about-section-label {
  color:
    var(--about-black);
}


.about-purpose-inner {
  display:
    grid;

  gap:
    45px;
}


.about-purpose-copy h2 {
  margin-top:
    17px;
}


.about-purpose-copy p {
  max-width:
    520px;

  margin:
    24px 0 0;

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

  font-size:
    15px;

  line-height:
    1.7;
}


.about-dark-button {
  min-height:
    56px;

  margin-top:
    27px;

  padding:
    0 27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    999px;

  background:
    var(--about-black);

  color:
    #ffffff;

  font-size:
    14px;

  font-weight:
    800;
}


.about-purpose-art {
  position:
    relative;

  min-height:
    340px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.about-art-grid {
  width:
    min(
      100%,
      340px
    );

  display:
    grid;

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

  gap:
    8px;

  transform:
    rotate(-5deg);
}


.about-art-block {
  aspect-ratio:
    1;

  border-radius:
    15px;
}


.art-orange {
  background:
    #ff7653;
}


.art-black {
  background:
    var(--about-black);
}


.art-white {
  background:
    #ffffff;
}


.about-art-word {
  position:
    absolute;

  color:
    #ffffff;

  font-family:
    var(--about-display);

  font-size:
    145px;

  line-height:
    1;

  text-shadow:
    0 15px 35px
    rgba(0, 0, 0, 0.18);
}


/* =========================================
   STICKY SCROLL CAROUSEL
========================================= */

.about-scroll-carousel {
  position:
    relative;

  /*
    4 screens tall.

    Screen 1 = slide 1
    Screen 2 = slide 2
    Screen 3 = slide 3
    Screen 4 = hold slide 3

    The sticky panel remains fixed until
    this whole section has been crossed.
  */

  height:
    400dvh;

  min-height:
    400svh;

  overflow:
    visible;

  background:
    var(--about-yellow);

  isolation:
    isolate;
}


/* THIS IS THE PART THAT ACTUALLY STAYS FIXED */

.about-scroll-sticky {
  position:
    -webkit-sticky;

  position:
    sticky;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    100dvh;

  min-height:
    100svh;

  max-height:
    100dvh;

  overflow:
    hidden;

  background:
    var(--about-yellow);

  z-index:
    5;

  transform:
    translateZ(0);

  -webkit-transform:
    translateZ(0);
}


/* =========================================
   CAROUSEL SLIDES
========================================= */

.about-scroll-slide {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  display:
    grid;

  grid-template-rows:
    minmax(0, auto)
    minmax(0, 1fr);

  overflow:
    hidden;

  background:
    var(--about-yellow);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translate3d(
      100%,
      0,
      0
    );

  transition:
    transform
    0.65s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    ),
    opacity
    0.4s ease,
    visibility
    0.4s ease;

  will-change:
    transform,
    opacity;
}


.about-scroll-slide.is-active {
  z-index:
    5;

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translate3d(
      0,
      0,
      0
    );
}


.about-scroll-slide.is-before {
  z-index:
    3;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translate3d(
      -100%,
      0,
      0
    );
}


.about-scroll-slide.is-after {
  z-index:
    3;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translate3d(
      100%,
      0,
      0
    );
}


/* =========================================
   CAROUSEL COPY
========================================= */

.about-scroll-copy {
  position:
    relative;

  z-index:
    5;

  padding:
    78px 24px
    24px;

  overflow:
    hidden;
}


.about-scroll-dots {
  margin-bottom:
    17px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.about-scroll-dots span {
  width:
    48px;

  height:
    39px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    999px;

  background:
    rgba(
      132,
      67,
      0,
      0.15
    );

  color:
    var(--about-brown);

  font-size:
    14px;

  font-weight:
    900;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


.about-scroll-dots span.is-active {
  background:
    var(--about-brown);

  color:
    #ffffff;

  transform:
    scale(1.03);
}


.about-scroll-label {
  margin:
    0 0 9px;

  color:
    var(--about-brown);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


.about-scroll-copy h2 {
  margin: 0;

  max-width:
    500px;

  color:
    var(--about-brown);

  font-family:
    var(--about-display);

  font-size:
    clamp(
      48px,
      13vw,
      68px
    );

  font-weight:
    400;

  line-height:
    0.93;

  letter-spacing:
    -0.02em;

  text-transform:
    uppercase;
}


.about-scroll-description {
  max-width:
    470px;

  margin:
    18px 0 0;

  color:
    var(--about-black);

  font-size:
    14px;

  font-weight:
    500;

  line-height:
    1.55;
}


.about-scroll-button {
  min-height:
    52px;

  margin-top:
    20px;

  padding:
    0 25px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    999px;

  background:
    var(--about-yellow-dark);

  color:
    var(--about-black);

  font-size:
    14px;

  font-weight:
    800;
}


/* =========================================
   CAROUSEL MEDIA
========================================= */

.about-scroll-media {
  position:
    relative;

  width:
    100%;

  height:
    100%;

  min-height:
    0;

  overflow:
    hidden;

  background:
    var(--about-orange);
}


.about-scroll-media-one img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;
}


.about-scroll-media-one::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      to bottom,
      transparent 45%,
      rgba(0, 0, 0, 0.15)
    );
}


/* =========================================
   SLIDE 2
========================================= */

.about-scroll-slide-two {
  background:
    #ffe2d8;
}


.about-scroll-slide-two
.about-scroll-copy {
  background:
    #ffe2d8;
}


.about-scroll-slide-two
.about-scroll-copy h2,
.about-scroll-slide-two
.about-scroll-label {
  color:
    var(--about-orange);
}


.about-scroll-slide-two
.about-scroll-dots span {
  background:
    rgba(
      244,
      81,
      44,
      0.13
    );

  color:
    var(--about-orange);
}


.about-scroll-slide-two
.about-scroll-dots span.is-active {
  background:
    var(--about-orange);

  color:
    #ffffff;
}


.about-scroll-slide-two
.about-scroll-button {
  background:
    var(--about-orange);

  color:
    #ffffff;
}


.about-scroll-logo-media {
  padding:
    24px 18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--about-black);
}


.about-scroll-logo-grid {
  width:
    100%;

  max-width:
    500px;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    9px;
}


.about-scroll-logo-grid > div {
  min-height:
    110px;

  padding:
    14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    18px;

  background:
    #ffffff;
}


.about-scroll-logo-grid img {
  display:
    block;

  max-width:
    90%;

  max-height:
    78px;

  object-fit:
    contain;
}


/* =========================================
   SLIDE 3
========================================= */

.about-scroll-slide-three {
  background:
    var(--about-black);
}


.about-scroll-slide-three
.about-scroll-copy {
  background:
    var(--about-black);
}


.about-scroll-slide-three
.about-scroll-label {
  color:
    var(--about-orange);
}


.about-scroll-slide-three
.about-scroll-copy h2 {
  color:
    #ffffff;
}


.about-scroll-slide-three
.about-scroll-description {
  color:
    rgba(
      255,
      255,
      255,
      0.7
    );
}


.about-scroll-slide-three
.about-scroll-dots span {
  background:
    rgba(
      255,
      255,
      255,
      0.11
    );

  color:
    #ffffff;
}


.about-scroll-slide-three
.about-scroll-dots span.is-active {
  background:
    var(--about-orange);

  color:
    #ffffff;
}


.about-scroll-slide-three
.about-scroll-button {
  background:
    var(--about-orange);

  color:
    #ffffff;
}


.about-scroll-growth-media {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--about-orange);
}


.growth-ring {
  position:
    absolute;

  border:
    3px solid
    rgba(
      255,
      255,
      255,
      0.42
    );

  border-radius:
    50%;
}


.growth-ring-one {
  width:
    330px;

  height:
    330px;
}


.growth-ring-two {
  width:
    235px;

  height:
    235px;
}


.growth-ring-three {
  width:
    140px;

  height:
    140px;
}


.growth-word {
  position:
    relative;

  z-index:
    3;

  color:
    #ffffff;

  font-family:
    var(--about-display);

  font-size:
    clamp(
      75px,
      23vw,
      120px
    );

  line-height:
    1;
}


.growth-badge {
  position:
    absolute;

  right:
    24px;

  bottom:
    25px;

  width:
    105px;

  height:
    105px;

  padding:
    15px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  border-radius:
    24px;

  background:
    var(--about-black);

  color:
    #ffffff;

  transform:
    rotate(-5deg);
}


.growth-badge span {
  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.12em;
}


.growth-badge strong {
  font-size:
    42px;

  line-height:
    1;
}


/* =========================================
   CAROUSEL PROGRESS
========================================= */

.about-scroll-progress {
  position:
    absolute;

  z-index:
    30;

  left:
    18px;

  right:
    18px;

  bottom:
    14px;

  height:
    4px;

  overflow:
    hidden;

  border-radius:
    999px;

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

  pointer-events:
    none;
}


.about-scroll-progress-fill {
  display:
    block;

  width:
    0%;

  height:
    100%;

  border-radius:
    inherit;

  background:
    #ffffff;

  transition:
    width
    0.08s
    linear;
}


.about-scroll-hint {
  display:
    none;
}


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

.about-values {
  background:
    var(--about-black);

  color:
    #ffffff;
}


.about-values .about-section-label {
  color:
    var(--about-orange);
}


.about-values-heading h2 {
  margin-top:
    17px;
}


.about-values-list {
  margin-top:
    42px;

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


.about-values-list article {
  padding:
    26px 0;

  display:
    grid;

  grid-template-columns:
    46px 1fr;

  gap:
    14px;

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


.about-values-list article > span {
  color:
    var(--about-orange);

  font-size:
    11px;

  font-weight:
    900;
}


.about-values-list h3 {
  margin: 0;

  font-family:
    var(--about-display);

  font-size:
    31px;

  font-weight:
    400;

  line-height:
    1;
}


.about-values-list p {
  max-width:
    500px;

  margin:
    11px 0 0;

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

  font-size:
    13px;

  line-height:
    1.6;
}


/* =========================================
   MARQUEE
========================================= */

.about-marquee {
  width:
    100%;

  overflow:
    hidden;

  background:
    var(--about-orange);
}


.about-marquee-track {
  width:
    max-content;

  padding:
    25px 0
    30px;

  display:
    flex;

  align-items:
    center;

  gap:
    28px;

  animation:
    aboutMarquee
    26s
    linear
    infinite;
}


.about-marquee-track span {
  flex:
    0 0 auto;

  color:
    #ffffff;

  font-family:
    var(--about-display);

  font-size:
    clamp(
      65px,
      19vw,
      110px
    );

  line-height:
    0.9;

  white-space:
    nowrap;
}


.about-marquee-track
.about-marquee-star {
  color:
    var(--about-black);

  font-size:
    28px;
}


@keyframes aboutMarquee {

  from {
    transform:
      translateX(0);
  }

  to {
    transform:
      translateX(-50%);
  }

}


/* =========================================
   DISCOVER
========================================= */

.about-discover {
  background:
    var(--about-cream);
}


.about-discover-heading h2 {
  margin-top:
    17px;
}


.about-discover-links {
  margin-top:
    40px;

  border-top:
    1px solid
    rgba(
      0,
      0,
      0,
      0.14
    );
}


.about-discover-links a {
  min-height:
    74px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  border-bottom:
    1px solid
    rgba(
      0,
      0,
      0,
      0.14
    );

  color:
    var(--about-black);

  font-size:
    16px;

  font-weight:
    700;
}


.about-discover-links strong {
  color:
    var(--about-orange);

  font-size:
    23px;
}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 380px) {

  .about-page-intro {
    padding:
      98px 14px
      62px;
  }


  .about-page-intro h1 {
    font-size:
      54px;
  }


  .about-intro,
  .about-brands,
  .about-what,
  .about-purpose,
  .about-values,
  .about-discover {
    padding-left:
      14px;

    padding-right:
      14px;
  }


  .about-intro h2,
  .about-brands h2,
  .about-what h2,
  .about-purpose h2,
  .about-values h2,
  .about-discover h2 {
    font-size:
      48px;
  }


  .about-brand-card {
    min-height:
      145px;
  }


  .about-service {
    min-height:
      235px;
  }


  .about-scroll-copy {
    padding:
      74px 16px
      18px;
  }


  .about-scroll-dots {
    margin-bottom:
      14px;
  }


  .about-scroll-dots span {
    width:
      42px;

    height:
      34px;

    font-size:
      12px;
  }


  .about-scroll-copy h2 {
    font-size:
      45px;
  }


  .about-scroll-description {
    margin-top:
      15px;

    font-size:
      13px;

    line-height:
      1.48;
  }


  .about-scroll-button {
    min-height:
      48px;

    margin-top:
      17px;

    padding:
      0 20px;

    font-size:
      13px;
  }


  .growth-ring-one {
    width:
      270px;

    height:
      270px;
  }


  .growth-ring-two {
    width:
      195px;

    height:
      195px;
  }


  .growth-ring-three {
    width:
      115px;

    height:
      115px;
  }

}


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

@media (min-width: 768px) {

  .about-page-intro {
    padding:
      135px 40px
      95px;
  }


  .about-page-intro h1 {
    font-size:
      100px;
  }


  .about-page-copy {
    max-width:
      650px;

    font-size:
      17px;
  }


  .about-intro,
  .about-brands,
  .about-what,
  .about-purpose,
  .about-values,
  .about-discover {
    padding:
      105px 40px;
  }


  .about-intro-grid {
    grid-template-columns:
      1fr 1fr;

    align-items:
      start;

    gap:
      70px;
  }


  .about-intro h2,
  .about-brands h2,
  .about-what h2,
  .about-purpose h2,
  .about-values h2,
  .about-discover h2 {
    font-size:
      clamp(
        72px,
        10vw,
        96px
      );
  }


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

    gap:
      14px;
  }


  .about-brand-card {
    min-height:
      220px;
  }


  .about-brand-card-wide {
    grid-column:
      auto;
  }


  .about-brand-card-wide img {
    max-width:
      90%;

    max-height:
      105px;
  }


  .about-service-grid {
    grid-template-columns:
      1fr 1fr;

    gap:
      14px;
  }


  .about-purpose-inner {
    grid-template-columns:
      1fr 1fr;

    align-items:
      center;

    gap:
      70px;
  }


  .about-purpose-art {
    min-height:
      430px;
  }


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

  .about-scroll-slide {
    grid-template-columns:
      0.95fr
      1.05fr;

    grid-template-rows:
      1fr;
  }


  .about-scroll-copy {
    padding:
      110px 45px
      55px;

    display:
      flex;

    flex-direction:
      column;

    justify-content:
      center;
  }


  .about-scroll-copy h2 {
    font-size:
      clamp(
        65px,
        8vw,
        96px
      );
  }


  .about-scroll-description {
    font-size:
      16px;
  }


  .about-scroll-media {
    height:
      100%;
  }


  .about-scroll-logo-media {
    padding:
      50px;
  }


  .about-scroll-logo-grid {
    gap:
      16px;
  }


  .about-scroll-logo-grid > div {
    min-height:
      170px;

    border-radius:
      28px;
  }


  .about-scroll-logo-grid img {
    max-height:
      115px;
  }


  .growth-ring-one {
    width:
      470px;

    height:
      470px;
  }


  .growth-ring-two {
    width:
      330px;

    height:
      330px;
  }


  .growth-ring-three {
    width:
      190px;

    height:
      190px;
  }


  .growth-badge {
    right:
      45px;

    bottom:
      45px;

    width:
      130px;

    height:
      130px;
  }


  .about-scroll-progress {
    left:
      40px;

    right:
      40px;

    bottom:
      24px;
  }


  .about-values-list article {
    grid-template-columns:
      70px 1fr;

    padding:
      31px 0;
  }


  .about-values-list h3 {
    font-size:
      40px;
  }

}


/* =========================================
   DESKTOP
========================================= */

@media (min-width: 1100px) {

  .desktop-nav
  .active-page::after {
    width:
      100%;
  }


  .about-page-intro {
    padding:
      160px 70px
      120px;
  }


  .about-page-kicker {
    font-size:
      13px;
  }


  .about-page-intro h1 {
    font-size:
      clamp(
        105px,
        8vw,
        150px
      );

    line-height:
      0.9;
  }


  .about-page-copy {
    max-width:
      720px;

    font-size:
      19px;
  }


  .about-intro,
  .about-brands,
  .about-what,
  .about-purpose,
  .about-values,
  .about-discover {
    padding:
      125px 70px;
  }


  .about-intro h2,
  .about-brands h2,
  .about-what h2,
  .about-purpose h2,
  .about-values h2,
  .about-discover h2 {
    font-size:
      clamp(
        92px,
        7vw,
        128px
      );
  }


  .about-intro-grid {
    gap:
      120px;
  }


  .about-intro-copy {
    max-width:
      580px;

    font-size:
      17px;
  }


  .about-intro-copy
  .about-lead {
    font-size:
      23px;
  }


  .about-brands-heading {
    max-width:
      800px;
  }


  .about-brands-heading p {
    max-width:
      600px;

    font-size:
      17px;
  }


  .about-brand-grid {
    grid-template-columns:
      repeat(
        4,
        1fr
      );

    gap:
      18px;
  }


  .about-brand-card {
    min-height:
      280px;

    border-radius:
      32px;
  }


  .about-brand-card-wide {
    grid-column:
      auto;
  }


  .about-brand-card:hover {
    transform:
      translateY(-7px);

    background:
      #fff0ea;
  }


  .about-brand-card img {
    max-height:
      150px;
  }


  .about-brand-card-wide img {
    max-width:
      90%;

    max-height:
      130px;
  }


  .about-primary-button:hover {
    background:
      var(--about-black);
  }


  .about-service-grid {
    grid-template-columns:
      repeat(
        4,
        1fr
      );

    gap:
      18px;
  }


  .about-service {
    min-height:
      390px;

    padding:
      30px;

    border-radius:
      34px;

    transition:
      transform 0.25s ease;
  }


  .about-service:hover {
    transform:
      translateY(-8px);
  }


  .about-service h3 {
    font-size:
      52px;
  }


  .about-service p {
    font-size:
      14px;
  }


  .about-purpose-inner {
    gap:
      120px;
  }


  .about-purpose-copy p {
    max-width:
      580px;

    font-size:
      17px;
  }


  .about-purpose-art {
    min-height:
      550px;
  }


  .about-art-grid {
    width:
      min(
        100%,
        500px
      );

    gap:
      12px;
  }


  .about-art-block {
    border-radius:
      24px;
  }


  .about-art-word {
    font-size:
      220px;
  }


  .about-dark-button:hover {
    background:
      #ffffff;

    color:
      var(--about-black);
  }


  /* =========================================
     DESKTOP CAROUSEL
  ========================================= */

  .about-scroll-carousel {
    height:
      400vh;
  }


  .about-scroll-sticky {
    height:
      100vh;

    min-height:
      100vh;

    max-height:
      100vh;
  }


  .about-scroll-copy {
    padding:
      130px 7vw
      70px;

    justify-content:
      center;
  }


  .about-scroll-copy h2 {
    max-width:
      620px;

    font-size:
      clamp(
        80px,
        6.5vw,
        120px
      );

    line-height:
      0.9;
  }


  .about-scroll-description {
    max-width:
      540px;

    font-size:
      18px;

    line-height:
      1.65;
  }


  .about-scroll-dots {
    margin-bottom:
      28px;

    gap:
      10px;
  }


  .about-scroll-dots span {
    width:
      58px;

    height:
      44px;

    font-size:
      15px;
  }


  .about-scroll-button {
    min-height:
      60px;

    margin-top:
      30px;

    padding:
      0 32px;

    font-size:
      16px;

    transition:
      transform 0.2s ease,
      background 0.2s ease,
      color 0.2s ease;
  }


  .about-scroll-button:hover {
    transform:
      translateY(-3px);

    background:
      var(--about-black);

    color:
      #ffffff;
  }


  .about-scroll-logo-grid {
    max-width:
      700px;

    gap:
      20px;
  }


  .about-scroll-logo-grid > div {
    min-height:
      230px;

    border-radius:
      34px;
  }


  .about-scroll-logo-grid img {
    max-height:
      155px;
  }


  .growth-ring-one {
    width:
      600px;

    height:
      600px;
  }


  .growth-ring-two {
    width:
      430px;

    height:
      430px;
  }


  .growth-ring-three {
    width:
      250px;

    height:
      250px;
  }


  .growth-word {
    font-size:
      clamp(
        120px,
        10vw,
        190px
      );
  }


  .growth-badge {
    right:
      65px;

    bottom:
      65px;

    width:
      150px;

    height:
      150px;

    padding:
      20px;

    border-radius:
      30px;
  }


  .growth-badge strong {
    font-size:
      55px;
  }


  .about-scroll-progress {
    left:
      70px;

    right:
      70px;

    bottom:
      30px;
  }


  .about-scroll-hint {
    position:
      absolute;

    z-index:
      20;

    right:
      70px;

    bottom:
      48px;

    display:
      flex;

    align-items:
      center;

    gap:
      8px;

    color:
      #ffffff;

    font-size:
      11px;

    font-weight:
      800;

    letter-spacing:
      0.1em;

    text-transform:
      uppercase;
  }


  .about-scroll-arrow {
    font-size:
      20px;
  }


  .about-values-list {
    margin-top:
      60px;
  }


  .about-values-list article {
    grid-template-columns:
      100px 1fr;

    padding:
      38px 0;
  }


  .about-values-list h3 {
    font-size:
      51px;
  }


  .about-values-list p {
    max-width:
      650px;

    font-size:
      15px;
  }


  .about-marquee-track {
    gap:
      50px;

    padding:
      40px 0 45px;

    animation-duration:
      32s;
  }


  .about-marquee-track span {
    font-size:
      clamp(
        110px,
        9vw,
        160px
      );
  }


  .about-discover {
    display:
      grid;

    grid-template-columns:
      0.9fr 1.1fr;

    gap:
      100px;

    align-items:
      start;
  }


  .about-discover-links {
    margin-top:
      0;
  }


  .about-discover-links a {
    min-height:
      92px;

    font-size:
      18px;

    transition:
      color 0.2s ease;
  }


  .about-discover-links a:hover {
    color:
      var(--about-orange);
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

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

  .about-marquee-track {
    animation:
      none;
  }


  .about-scroll-slide {
    transition:
      none;
  }

}