/* ABOUT PAGE (about.html). Loads after base.css. */

/* ABOUT PAGE HERO */

.about-hero {
  min-height: calc(100vh - 80px); /* Fallback: Safari < 15.4 lacks svh. */
  min-height: calc(100svh - 80px);
  margin-top: 80px;
  padding: clamp(2rem, 5vw, 5rem);
  background-image: url("../assets/images/about/about-hero.webp");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-hero__content {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
}

.about-hero__title {
  max-width: 100%;
  color: var(--charcoal);
  font-size: clamp(2.75rem, 5.2vw, 4.5rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.about-hero__title em {
  font-style: italic;
  font-weight: 700;
}

/* ABOUT PAGE: INTRO */

.about-intro {
  position: relative;
  overflow: hidden;
  color: var(--charcoal);
  background-color: var(--linen);
}

.about-intro .container {
  padding-top: clamp(6rem, 12vw, 11rem);
  padding-bottom: clamp(6rem, 12vw, 11rem);
}

.about-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 9rem);
}

.about-intro__title {
  display: grid;
  justify-items: center;
  font-size: clamp(5rem, 11vw, 11rem);
  letter-spacing: -0.05em;
  line-height: 0.72;
}

.about-intro__title-bottom {
  display: flex;
  align-items: center;
  gap: 0.1em;
  margin-top: 0.2em;
}

.about-intro__title,
.about-intro__title span,
.about-team__title,
.about-team__title span {
  font-family: "livermore-script-atf", cursive;
  font-style: normal;
  font-weight: 500;
}

/* Scoped to the title so this outranks ".about-intro__title span" above.
   Without it the star inherited the script font, and the missing glyph fell
   back to the cursive system font (slanted Apple Chancery on macOS). The
   fallback list names upright symbol fonts so every platform draws the same
   star. */
.about-intro__title .about-intro__star,
.about-team__title .about-team__star {
  color: var(--clementine);
  font-family:
    "brandon-grotesque", "Segoe UI Symbol", "Apple Symbols",
    "Noto Sans Symbols 2", "DejaVu Sans", sans-serif;
  font-size: 1em;
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0;
}

.about-intro__content {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  max-width: 46rem;
  text-align: center;
  isolation: isolate;
}

/* Three-color glow that follows the copy: blush top-left, golden hour right,
   clementine bottom. The section's overflow: hidden trims the soft edges. */
.about-intro__content::before {
  position: absolute;
  z-index: -1;
  top: -45%;
  right: -30%;
  bottom: -45%;
  left: -30%;
  content: "";
  background:
    radial-gradient(
      ellipse 30% 34% at 36% 42%,
      color-mix(in srgb, var(--blush) 62%, transparent) 0%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 28% 34% at 70% 38%,
      color-mix(in srgb, var(--goldenhour) 58%, transparent) 0%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 34% 28% at 52% 66%,
      color-mix(in srgb, var(--clementine) 50%, transparent) 0%,
      transparent 100%
    );
  pointer-events: none;
}

.about-intro__statement {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.35;
}

.about-intro__copy {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 400;
  line-height: 1.55;
}

/* ABOUT PAGE: EXPERIENCES */

/* Top glow raised above the section edge so its strongest color stays at the
   top and fades out before the clementine heading accent. */
.about-experiences {
  color: var(--charcoal);
  background:
    radial-gradient(
      ellipse 55% 40% at 32% -8%,
      color-mix(in srgb, var(--clementine) 78%, transparent) 0%,
      color-mix(in srgb, var(--lightclementine) 44%, transparent) 50%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 48% 36% at 80% -8%,
      color-mix(in srgb, var(--blush) 62%, transparent) 0%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 85% 42% at 50% 4%,
      color-mix(in srgb, var(--goldenhour) 48%, transparent) 0%,
      transparent 100%
    ),
    var(--lightgoldenhour);
}

.about-experiences .container {
  padding-top: clamp(5rem, 10vw, 9rem);
  padding-bottom: clamp(5rem, 10vw, 9rem);
}

.about-experiences__grid,
.about-people__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(2.5rem, 4vw, 4rem);
  width: min(100%, 1200px);
  padding-left: clamp(1.5rem, 5vw, 3rem);
  padding-right: clamp(1.5rem, 5vw, 3rem);
  container-type: inline-size;
}

/* One size for both sections' titles. The cqi cap (relative to the grid)
   shrinks it just enough that the longest Experiences line always fits. */
.about-experiences__title,
.about-people__title {
  /* Fallback for browsers without cq units (Safari < 16): the grid's
     content width, written in viewport units. */
  font-size: min(clamp(2rem, 3.2vw, 2.875rem), (min(100vw, 1200px) - 2 * clamp(1.5rem, 5vw, 3rem)) * 0.041);
  font-size: min(clamp(2rem, 3.2vw, 2.875rem), 4.1cqi);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* The text column keeps the width its nowrap title lines need; the photo
   column takes the rest. */
.about-experiences__grid {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
}

.about-experiences__title-accent {
  display: block;
  color: var(--clementine);
}

/* Fixed three-line heading: each line stays whole. */
.about-experiences__title-line {
  display: block;
  white-space: nowrap;
}

.about-experiences__copy,
.about-people__copy {
  max-width: 34rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  font-size: clamp(1.125rem, 1.6vw, 1.6rem);
  line-height: 1.55;
  text-align: justify;
}

.about-experiences__media,
.about-people__media {
  --media-radius: 3rem;
  --backing-offset: 0.75rem;
  /* Backing direction: side 1 = right, -1 = left; lift -1 = up, 1 = down.
     Stacked (one-column) layouts reset both to the top-right default. */
  --backing-side: 1;
  --backing-lift: -1;
  /* Soft blush / clementine / golden-hour waves, matching the supplied
     background gradient artwork. */
  --backing-gradient:
    radial-gradient(
      ellipse 75% 40% at 10% 8%,
      var(--blush) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 65% 35% at 90% 58%,
      var(--goldenhour) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 70% 40% at 15% 85%,
      var(--lightclementine) 0%,
      transparent 70%
    ),
    linear-gradient(
      160deg,
      var(--blush) 0%,
      var(--clementine) 30%,
      var(--lightclementine) 50%,
      var(--goldenhour) 68%,
      var(--clementine) 100%
    );

  position: relative;
  justify-self: center;
  width: min(100%, 36rem);
  isolation: isolate;
}

/* Gradient backing offset behind the photo, peeking out on one corner. */
.about-experiences__media::before,
.about-people__media::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background: var(--backing-gradient);
  border-radius: var(--media-radius);
  transform: translate(
    calc(var(--backing-offset) * var(--backing-side)),
    calc(var(--backing-offset) * var(--backing-lift))
  );
}

.about-experiences__image,
.about-people__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--charcoal);
  border-radius: var(--media-radius);
}

/* ABOUT PAGE: PEOPLE */

.about-people {
  color: var(--charcoal);
  background-color: var(--linen);
}

.about-people .container {
  padding-top: clamp(5rem, 10vw, 9rem);
  padding-bottom: clamp(5rem, 10vw, 9rem);
}

.about-people__grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

/* Landscape photo with its backing peeking out bottom-left. */
.about-people__media {
  --backing-side: -1;
  --backing-lift: 1;

  width: min(100%, 40rem);
}

.about-people__image {
  aspect-ratio: 5 / 4;
}

.about-people__content {
  justify-self: center;
  max-width: 34rem;
  text-align: center;
}

.about-people__title-accent {
  display: block;
  color: var(--clementine);
}

.about-people__copy {
  margin-left: auto;
  margin-right: auto;
  text-align-last: center;
}

/* ABOUT PAGE: TEAM */

.about-team {
  --team-top-glow:
    radial-gradient(
      ellipse 55% 42% at 28% 0%,
      color-mix(in srgb, var(--clementine) 66%, transparent) 0%,
      color-mix(in srgb, var(--lightclementine) 38%, transparent) 55%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 48% 38% at 78% 0%,
      color-mix(in srgb, var(--blush) 56%, transparent) 0%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 85% 44% at 50% 8%,
      color-mix(in srgb, var(--goldenhour) 42%, transparent) 0%,
      transparent 100%
    );
  color: var(--charcoal);
  background:
    var(--team-top-glow),
    radial-gradient(
      ellipse 28% 45% at 0% 95%,
      color-mix(in srgb, var(--blush) 72%, transparent) 0%,
      color-mix(in srgb, var(--clementine) 38%, transparent) 45%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 42% 50% at 15% 100%,
      color-mix(in srgb, var(--goldenhour) 48%, transparent) 0%,
      transparent 100%
    ),
    var(--lightgoldenhour);
}

.about-team .container {
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.about-team__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.05fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  width: min(100%, 1200px);
  padding-left: clamp(1.5rem, 5vw, 3rem);
  padding-right: clamp(1.5rem, 5vw, 3rem);
}

.about-team__content {
  display: grid;
  justify-items: start;
  gap: clamp(2rem, 4vw, 3rem);
}

.about-team__title {
  display: grid;
  font-size: clamp(3.5rem, 7vw, 6rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
}

.about-team__title-top {
  display: flex;
  align-items: center;
  gap: 0.25em;
}

/* text-wrap: pretty avoids a one-word last line; the &nbsp; in
   "final&nbsp;recap" guarantees it in browsers without support. */
.about-team__copy {
  max-width: 22em;
  text-wrap: pretty;
  font-size: clamp(1.125rem, 1.6vw, 1.35rem);
  line-height: 1.55;
}

.about-team__members {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem) clamp(1rem, 2.25vw, 2rem);
  list-style: none;
}

.about-team__member {
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  container-type: inline-size;
}

.about-team__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 5;
  object-fit: cover;
  object-position: center 20%;
  background-color: var(--linen);
  border: 1px solid var(--charcoal);
  border-radius: 999px;
}

/* On wide screens the cqi cap (card width) keeps the longest name,
   "Michelle Hutchinson" (~8.3em), on one line. Narrower cards keep the
   1.075rem minimum and let long names wrap. */
.about-team__name {
  margin: 0.9rem 0 0;
  font-size: 1.075rem; /* Fallback without cq units: the minimum never wraps. */
  font-size: clamp(1.075rem, min(calc(1.2vw + 0.125rem), 11.8cqi), 1.225rem);
  font-weight: 700;
  line-height: 1.2;
}

.about-team__role {
  margin: 0.2rem 0 0;
  font-size: clamp(0.875rem, calc(0.95vw + 0.125rem), 1rem);
  line-height: 1.25;
}

/* ABOUT PAGE: BRANDS */

.about-brands {
  --autoscroll-gap: clamp(2.5rem, 4.2vw, 3.75rem);
  --autoscroll-duration: 40s;

  color: var(--charcoal);
  background-color: var(--linen);
}

.about-brands .container {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.about-brands__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: min(100%, 1200px);
  padding-left: clamp(1.5rem, 5vw, 3rem);
  padding-right: clamp(1.5rem, 5vw, 3rem);
}

/* Matches the mockup: same size as the page's other h2s, split after "that".
   The right border is the divider, padded so it runs taller than the text. */
.about-brands__title {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem clamp(1.5rem, 2.5vw, 2rem) 2.5rem 0;
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  border-right: 1px solid var(--charcoal);
}

.about-brands__title-line {
  white-space: nowrap;
}

/* Fades both edges of the scrolling logos (see .autoscroll in base.css). */
.about-brands__viewport {
  align-self: center;
  margin-left: var(--autoscroll-gap);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.about-brands__list {
  align-items: center;
  list-style: none;
}

.about-brands__item {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
}

.about-brands__logo {
  display: block;
  height: auto;
}

/* ABOUT PAGE: CTA */

/* Like the home hero: runs under the whole marquee and is cut along its wave. */
.about-cta {
  position: relative;
  z-index: 1;
  padding-bottom: var(--marquee-overlap);
  color: var(--charcoal);
  background-color: var(--lightgoldenhour);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100%
      calc(100% - var(--marquee-height) + 1px) no-repeat,
    var(--marquee-mask-above) bottom / 100% var(--marquee-height) no-repeat;
  mask:
    linear-gradient(#000 0 0) top / 100%
      calc(100% - var(--marquee-height) + 1px) no-repeat,
    var(--marquee-mask-above) bottom / 100% var(--marquee-height) no-repeat;
}

/* Full-height pull-ups (adjacent negative margins collapse, so they can't be split):
   the marquee sits over the CTA's bottom, and the footer starts at the marquee's
   top so its color fills right up to the wave. */
.about-cta + .marquee {
  margin-top: calc(var(--marquee-height) * -1);
}

/* about.css only loads on the About page, whose main ends with the CTA.
   (Was main:has(> .about-cta), which Safari < 15.4 ignores.) */
.page-about main + footer {
  margin-top: calc(var(--marquee-height) * -1);
  padding-top: calc(5rem + var(--marquee-overlap));
}

.about-cta .container {
  /* Bottom padding clears the half of the marquee that overlaps this section. */
  padding-top: clamp(4rem, 8vw, 6rem);
  padding-bottom: calc(clamp(2.5rem, 5vw, 4rem) + var(--marquee-overlap));
}

.about-cta__content {
  display: grid;
  justify-items: center;
  gap: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}

.about-cta__title {
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Large tablets, 768px and below */
@media (max-width: 768px) {
  .about-hero {
    padding: 2rem 1.5rem;
    background-position: 58% center;
  }

  .about-hero__content {
    container-type: inline-size;
  }

  /* Two centered lines, matching desktop: the font scales with the content
     width (cqi) so "Great Reputations Aren't Given." (~11.6em) always fits. */
  .about-hero__title {
    max-width: none;
    font-size: min(4rem, (100vw - 3rem) * 0.083); /* Fallback without cq units. */
    font-size: min(4rem, 8.3cqi);
    white-space: nowrap;
  }

  .about-intro .container {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .about-intro__grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .about-intro__title {
    font-size: clamp(5rem, 24vw, 8rem);
  }

  .about-intro__content {
    margin: 0 auto;
  }

  .about-experiences__grid,
  .about-people__grid {
    grid-template-columns: 1fr;
    gap: max(3rem, 8vw);
  }

  /* The stacked section is very tall, so percentage glows would reach the
     heading; fixed heights keep the glow above it. */
  .about-experiences {
    background:
      radial-gradient(
        ellipse 70% 7rem at 28% -1.5rem,
        color-mix(in srgb, var(--clementine) 78%, transparent) 0%,
        color-mix(in srgb, var(--lightclementine) 44%, transparent) 50%,
        transparent 100%
      ),
      radial-gradient(
        ellipse 60% 6rem at 82% -1.5rem,
        color-mix(in srgb, var(--blush) 62%, transparent) 0%,
        transparent 100%
      ),
      radial-gradient(
        ellipse 100% 8rem at 50% 0,
        color-mix(in srgb, var(--goldenhour) 48%, transparent) 0%,
        transparent 100%
      ),
      var(--lightgoldenhour);
  }

  /* Stacked: the column is the full grid, so the cap can be much larger. */
  .about-experiences__title,
  .about-people__title {
    font-size: min(2rem, (100vw - 2 * clamp(1.5rem, 5vw, 3rem)) * 0.084); /* Fallback without cq units. */
    font-size: min(2rem, 8.4cqi);
  }

  .about-experiences__media,
  .about-people__media {
    --media-radius: 2rem;
    --backing-offset: 0.5rem;
    --backing-side: 1;
    --backing-lift: -1;

    width: min(100%, 31.5rem);
  }

  .about-people__content {
    order: -1;
  }

  .about-experiences__content {
    justify-self: center;
    width: 100%;
    max-width: 34rem;
    text-align: center;
  }

  .about-experiences__copy {
    margin-left: auto;
    margin-right: auto;
    text-align-last: center;
  }

  .about-team {
    background: var(--team-top-glow), var(--lightgoldenhour);
  }

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

  .about-team__content {
    justify-items: center;
    text-align: center;
  }

  .about-team__title {
    justify-items: center;
  }

  .about-team__members {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 2rem;
    width: min(100%, 26rem);
    margin-left: auto;
    margin-right: auto;
  }

  .about-brands__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .about-brands__viewport {
    margin-left: 0;
  }

  .about-brands__title {
    display: block;
    padding: 0;
    text-align: center;
    border-right: 0;
  }

  .about-brands__title-line {
    display: inline;
    white-space: normal;
  }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* Show one still, wrapped row of logos instead of the moving loop. */
  .about-brands__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .about-brands__list {
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2rem;
    padding: 0;
  }
}

/* Safari before 15 has no aspect-ratio, so the People photo would show at
   its natural 3:2. A 5:4 spacer sizes the figure and the image is pinned
   over it, cropped by object-fit. Modern browsers skip this block. */
@supports not (aspect-ratio: 1) {
  .about-people__media::after {
    content: "";
    display: block;
    padding-top: 80%;
  }

  .about-people__image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}

/* Safari 14.0 ignores gap on flex containers (see the matching block in
   base.css). Modern browsers skip this block. */
@supports not (inset: 0) {
  .about-intro__title-bottom > * + * {
    margin-left: 0.1em;
  }

  .about-team__title-top > * + * {
    margin-left: 0.25em;
  }
}