/* ==========================================================
   FRUITY CLEAN ABOUT
   ========================================================== */

.fac-about{
  width:min(
    calc(100% - 64px),
    1320px
  );

  margin:34px auto 20px;

  color:#111;
}


/* HERO */

.fac-about-hero{
  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(300px,.65fr);

  gap:
    clamp(
      35px,
      6vw,
      90px
    );

  align-items:end;

  box-sizing:border-box;

  min-height:430px;

  padding:
    clamp(
      38px,
      6vw,
      76px
    );

  overflow:hidden;

  border-radius:30px;

  background:#fff;

  border:
    1px solid
    rgba(0,0,0,.05);
}


.fac-kicker{
  display:block;

  margin-bottom:9px;

  color:#e5a900;

  font-size:10px;

  font-weight:900;

  letter-spacing:.04em;

  text-transform:uppercase;
}


.fac-about-hero h1{
  max-width:800px;

  margin:0;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      58px,
      7.5vw,
      105px
    );

  line-height:.87;

  letter-spacing:-.045em;
}


.fac-about-hero-desc{
  position:relative;

  min-height:200px;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;
}


.fac-about-hero-desc p{
  position:relative;

  z-index:2;

  margin:0;

  color:#555;

  font-size:
    clamp(
      14px,
      1.3vw,
      17px
    );

  line-height:1.75;
}


.fac-about-mini{
  position:absolute;

  top:-52px;
  right:-18px;

  color:
    rgba(
      239,
      180,
      0,
      .14
    );

  font-family:
    "Permanent Marker",
    cursive;

  font-size:125px;

  line-height:1;

  transform:
    rotate(-8deg);
}


/* STORY */

.fac-about-story{
  display:grid;

  grid-template-columns:
    minmax(0,1.4fr)
    minmax(300px,.6fr);

  gap:14px;

  margin-top:14px;
}


.fac-story-primary,
.fac-story-secondary{
  min-height:325px;

  box-sizing:border-box;

  padding:
    clamp(
      30px,
      5vw,
      55px
    );

  border-radius:26px;
}


.fac-story-primary{
  background:#f0efe9;
}


.fac-story-secondary{
  background:#f0b900;
}


.fac-story-primary h2,
.fac-story-secondary h2{
  max-width:720px;

  margin:
    0 0 18px;

  font-family:
    "Permanent Marker",
    cursive;

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

  line-height:.95;
}


.fac-story-primary p,
.fac-story-secondary p{
  max-width:760px;

  margin:0;

  font-size:13px;

  line-height:1.8;
}


.fac-story-primary p{
  color:#555;
}


.fac-story-secondary p{
  color:#332800;
}


.fac-kicker-dark{
  color:#4c3900;
}


/* BREAKDOWN */

.fac-about-breakdown{
  padding:
    64px 0 12px;
}


.fac-about-breakdown > header{
  max-width:800px;

  margin-bottom:28px;
}


.fac-about-breakdown h2,
.fac-section-heading h2{
  margin:0;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      39px,
      5vw,
      66px
    );

  line-height:.94;
}


.fac-breakdown-grid{
  display:grid;

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

  gap:11px;
}


.fac-breakdown-grid article{
  min-height:205px;

  display:flex;

  flex-direction:column;

  box-sizing:border-box;

  padding:24px;

  border-radius:20px;

  background:#fff;

  border:
    1px solid
    rgba(0,0,0,.055);
}


.fac-breakdown-grid article > span{
  color:#daa200;

  font-size:9px;

  font-weight:900;
}


.fac-breakdown-grid strong{
  margin-top:auto;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      20px,
      2.3vw,
      31px
    );
}


.fac-breakdown-grid p{
  margin:
    10px 0 0;

  color:#666;

  font-size:10px;

  line-height:1.55;
}


/* STATEMENT */

.fac-about-statement{
  position:relative;

  min-height:330px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  box-sizing:border-box;

  overflow:hidden;

  margin-top:48px;

  padding:
    clamp(
      34px,
      6vw,
      70px
    );

  border-radius:29px;

  background:#111;

  color:#fff;
}


.fac-kicker-yellow{
  color:#f0b900;
}


.fac-about-statement h2{
  position:relative;

  z-index:2;

  margin:
    0 0 16px;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      48px,
      6vw,
      80px
    );

  line-height:.9;
}


.fac-about-statement > p{
  position:relative;

  z-index:2;

  max-width:600px;

  margin:0;

  color:#ccc;

  font-size:13px;

  line-height:1.7;
}


.fac-statement-mark{
  position:absolute;

  right:-25px;
  bottom:-75px;

  color:
    rgba(
      240,
      185,
      0,
      .13
    );

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      180px,
      24vw,
      340px
    );

  line-height:1;

  transform:
    rotate(-6deg);
}


/* PARTNERS */

.fac-about-partners{
  padding:
    65px 0 10px;
}


.fac-section-heading{
  display:grid;

  grid-template-columns:
    minmax(0,1.2fr)
    minmax(260px,.65fr);

  align-items:end;

  gap:35px;

  margin-bottom:27px;
}


.fac-section-heading > p{
  margin:0;

  color:#666;

  font-size:12px;

  line-height:1.7;
}


.fac-partner-grid{
  display:grid;

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

  gap:11px;
}


.fac-partner-card,
.fac-no-partners{
  min-height:100px;

  display:grid;

  grid-template-columns:
    80px
    minmax(0,1fr)
    36px;

  align-items:center;

  gap:14px;

  box-sizing:border-box;

  padding:13px;

  border-radius:19px;

  background:#f0efe9;

  color:#111;

  text-decoration:none;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}


.fac-partner-card:hover{
  transform:
    translateY(-2px);

  box-shadow:
    0 9px 26px
    rgba(0,0,0,.06);
}


.fac-partner-brand{
  min-height:64px;

  display:grid;

  place-items:center;

  box-sizing:border-box;

  padding:7px;

  border-radius:14px;

  background:#111;
}


.fac-partner-brand img{
  width:100%;

  max-height:40px;

  object-fit:contain;
}


.fac-partner-brand span{
  color:#fff;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:20px;
}


.fac-partner-copy strong{
  display:block;

  margin-bottom:4px;

  font-size:12px;
}


.fac-partner-copy p{
  margin:0;

  color:#666;

  font-size:10px;

  line-height:1.5;
}


.fac-partner-arrow{
  width:33px;
  height:33px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:#f0b900;
}


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

@media(max-width:900px){

  .fac-about{
    width:
      calc(100% - 20px);

    margin-top:18px;
  }


  .fac-about-hero,
  .fac-about-story,
  .fac-section-heading{
    grid-template-columns:1fr;
  }


  .fac-about-hero{
    min-height:0;

    gap:28px;

    padding:
      35px 25px;

    border-radius:20px;
  }


  .fac-about-hero-desc{
    min-height:120px;
  }


  .fac-about-story{
    gap:10px;
  }


  .fac-story-primary,
  .fac-story-secondary{
    min-height:0;

    padding:
      31px 25px;

    border-radius:20px;
  }


  .fac-breakdown-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .fac-about-statement{
    min-height:300px;

    border-radius:20px;
  }


  .fac-partner-grid{
    grid-template-columns:1fr;
  }


  .fac-section-heading{
    gap:13px;
  }

}


@media(max-width:520px){

  .fac-about-hero h1{
    font-size:
      clamp(
        48px,
        16vw,
        67px
      );
  }


  .fac-about-breakdown{
    padding-top:45px;
  }


  .fac-breakdown-grid{
    grid-template-columns:1fr;
  }


  .fac-breakdown-grid article{
    min-height:160px;
  }


  .fac-about-statement{
    margin-top:34px;

    padding:
      34px 24px;
  }


  .fac-about-partners{
    padding-top:45px;
  }


  .fac-partner-card{
    grid-template-columns:
      65px
      minmax(0,1fr)
      31px;

    gap:10px;
  }


  .fac-partner-brand{
    min-height:54px;
  }

}