/** Shopify CDN: Minification failed

Line 156:3 Cannot use type selector "--center" directly after nesting selector "&"
Line 184:3 Cannot use type selector "--center" directly after nesting selector "&"

**/
/*
  About page.

  Hero band only (more bands land later). The animated dots are NOT defined here:
  the band opts into the shared c-dot-grid component (component-common-dot-grid.css)
  plus its pointer spotlight via data-dot-grid-spotlight in the markup. This file
  owns only the band background, layout, and typography, and tunes the shared dot
  tokens down for this navy surface.
*/

.c-about {
  display: block;
  width: 100%;
}

.c-about__hero {
  /* Surface (navy gradient + dots + 100svh + left align + padding) now comes
     from the shared c-page-hero component. This rule keeps only the entrance
     timing tokens the hero content's u-animation-* classes consume. */
  --c-about-enter-dur: 1.1s;
  --c-about-enter-ease: ease-in-out;
  --c-about-enter-base: 0.2s;
  --c-about-enter-stagger: 0.3s;
}

.c-about__hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lg-spacing);
  max-width: 48rem;
}

.c-about__eyebrow {
  padding-block: var(--xsm-spacing);
  padding-inline: var(--md-spacing);
  background-color: var(--color-accent);
  color: var(--color-primary);
  border-radius: 62.5rem;
  font-family: var(--font-heading);
  font-weight: var(--semibold-font-weight);
  font-size: var(--xsm-font-size);
  letter-spacing: var(--letter-spacing-uppercase);
  text-transform: uppercase;
}

.c-about__headline {
  font-family: var(--font-heading);
  font-weight: var(--bold-font-weight);
  font-size: clamp(var(--2xl-font-size), 5vw, var(--4xl-font-size));
  line-height: 1.1;
  color: var(--color-white);
}

.c-about__intro {
  max-width: 40rem;
  font-family: var(--font-body);
  font-weight: var(--regular-font-weight);
  font-size: var(--md-font-size);
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-white) 80%, transparent);
}


.c-about__eyebrow.u-animation-pop-in {
  animation: u-animation-pop-in var(--c-about-enter-dur) var(--c-about-enter-ease) var(--c-about-enter-base) forwards;
}

.c-about__headline.u-animation-slide-in-left {
  animation: u-animation-slide-in-left var(--c-about-enter-dur) var(--c-about-enter-ease) calc(var(--c-about-enter-base) + var(--c-about-enter-stagger)) forwards;
}

.c-about__intro.u-animation-slide-in-left {
  animation: u-animation-slide-in-left var(--c-about-enter-dur) var(--c-about-enter-ease) calc(var(--c-about-enter-base) + var(--c-about-enter-stagger) * 2) forwards;
}

/* ── Light bands (water-blue): Built by Owners + Built on Trust ─────────── */

.c-about__owners,
.c-about__trust {
  position: sticky;
  top: 0;
  min-height: 100svh;
}

/* Light bands share the water surface; the USA band is navy (defined below). */
.c-about__owners,
.c-about__trust {
  background-color: var(--c-about-water);
  color: var(--color-primary);
}

.c-about__owners {
  display: grid;
  align-content: center;
  gap: var(--3xl-spacing) var(--2xl-spacing);
  padding-block: var(--2xl-spacing);
  padding-inline: var(--md-gutter);

  --c-about-reveal-dur: 0.7s;
  --c-about-reveal-ease: ease-in-out;

  &[data-revealed="true"] {
    & .c-about__heading {
      opacity: 1;
      transform: none;
      transition-delay: 0.1s;
    }

    & .c-about__quote {
      opacity: 1;
      transform: none;
      transition-delay: 0.25s;
    }

    & .c-about__body {
      opacity: 1;
      transform: none;
      transition-delay: 0.4s;
    }

    & .c-about__owners-anchor {
      opacity: 1;
      transform: none;
      transition-delay: 0.55s;
    }
  }
}

.c-about__owners .c-wave-divider {
  bottom: 100%;
}

.c-about__owners-copy {
  display: flex;
  flex-direction: column;
  gap: var(--xl-spacing);
}

.c-about__heading {
  margin-block: 0;
  font-family: var(--font-heading);
  font-weight: var(--bold-font-weight);
  font-size: var(--xl-font-size);
  line-height: 1.2;
  color: var(--color-primary);

  &--center {
    text-align: center;
  }
}

.c-about__quote {
  margin: 0;
  padding-inline-start: var(--lg-spacing);
  border-inline-start: 0.25rem solid var(--color-accent);
  font-family: var(--font-heading);
  font-weight: var(--semibold-font-weight);
  font-style: italic;
  font-size: var(--2xl-font-size);
  line-height: 1.15;
  color: var(--color-primary);
}

.c-about__body {
  font-family: var(--font-body);
  font-weight: var(--regular-font-weight);
  font-size: var(--md-font-size);
  line-height: 1.65;
  color: var(--color-text-mid);

  & p {
    margin-block: 0;
  }

  &--center {
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
    color: color-mix(in srgb, var(--color-primary) 80%, transparent);
  }
}

.c-about__owners-anchor {
  display: block;
  justify-self: center;
  width: min(100%, 28rem);
  height: auto;
}

.c-about__trust {
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--lg-spacing);
  padding-block: var(--3xl-spacing);
  padding-inline: max(var(--md-gutter), (100% - 56rem) / 2);
  text-align: center;

  --c-about-reveal-dur: 0.7s;
  --c-about-reveal-ease: ease-in-out;

  &[data-revealed="true"] {
    & .c-about__heading {
      opacity: 1;
      transform: none;
      transition-delay: 0.1s;
    }

    & .c-about__body {
      opacity: 1;
      transform: none;
      transition-delay: 0.25s;
    }

    & .c-about__emphasis {
      opacity: 1;
      transform: none;
      transition-delay: 0.4s;
    }
  }
}

.c-about__emphasis {
  max-width: 44rem;
  margin-block: var(--lg-spacing) 0;
  padding-block-start: var(--xl-spacing);
  border-block-start: 0.125rem solid color-mix(in srgb, var(--color-primary) 12%, transparent);
  font-family: var(--font-heading);
  font-weight: var(--bold-font-weight);
  font-size: var(--xl-font-size);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-primary);
}


/* ── Made in the USA (navy band: location card + copy) ──────────────────── */


.c-about__usa {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--3xl-spacing);
  background: radial-gradient(ellipse 140% 100% at 50% -10%,
      var(--color-primary) 0%,
      color-mix(in srgb, var(--color-primary) 60%, var(--color-shadow)) 80%);
  color: var(--color-white);
  padding-block: var(--3xl-spacing);
  padding-inline: var(--md-gutter);

  --c-about-reveal-dur: 0.7s;
  --c-about-reveal-ease: ease-in-out;
}

.c-about__usa .c-about__heading {
  color: var(--color-white);
  font-size: clamp(var(--2xl-font-size), 5vw, var(--3xl-font-size));
}

.c-about__usa .c-about__body {
  color: color-mix(in srgb, var(--color-white) 50%, var(--color-primary));
  letter-spacing: 0.02em;
}

.c-about__usa[data-revealed="true"] {
  & .c-about__heading {
    opacity: 1;
    transform: none;
    transition-delay: 0.1s;
  }

  & .c-about__body {
    opacity: 1;
    transform: none;
    transition-delay: 0.25s;
  }

  & .c-about__usa-card {
    opacity: 1;
    transform: none;
    transition-delay: 0.4s;
  }
}

.c-about__usa-copy {
  display: flex;
  flex-direction: column;
  gap: var(--lg-spacing);
}

.c-about__usa-card {
  order: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--lg-spacing);
  padding: var(--2xl-spacing);
  background-color: color-mix(in srgb, var(--color-white) 5%, var(--color-primary));
  border: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent);
  border-radius: var(--xl-border-radius);
}

.c-about__usa-factory {
  justify-self: center;
  width: 9rem;
  height: 9rem;
  color: var(--color-white);
  opacity: 0.07;
  pointer-events: none;
}

.c-about__usa-locations {
  display: flex;
  flex-direction: column;
  gap: var(--xl-spacing);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-about__usa-location {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--md-spacing);
  align-items: center;
}

.c-about__usa-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 3rem;
  height: 3rem;
  background-color: var(--color-accent);
  color: var(--color-primary);
  border-radius: var(--pill-border-radius);

  & svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.c-about__usa-place {
  align-self: end;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--bold-font-weight);
  font-size: var(--lg-font-size);
  color: var(--color-accent);
}

.c-about__usa-role {
  align-self: start;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--sm-font-size);
  color: color-mix(in srgb, var(--color-white) 65%, transparent);
}

/* ── Looking Forward (white finale: manifesto + stat) ───────────────────── */

/* Not sticky: this band scrolls up over the pinned navy stack as the closing.
   position+z-index lift the whole band (white bg included) into its own stacking
   context ABOVE the sibling sticky bands; without it the sticky navy bands paint
   over this band's background while the transformed manifesto lines punch through.
   z-index 1 is internal to .c-about (above the sibling sticky bands), not a
   cross-component layer, so it stays a raw integer. */
.c-about__forward {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--3xl-spacing);
  background-color: var(--color-white);
  color: var(--color-primary);
  padding-block: var(--4xl-spacing);
  padding-inline: max(var(--md-gutter), (100% - 72rem) / 2);
}

.c-about__forward-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lg-spacing);
}

.c-about__forward-lead {
  max-width: 40rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--lg-font-size);
  line-height: 1.65;
  color: var(--color-text-mid);
}

/* Looking Forward manifesto: a CSS-only vertical "wheel". The lines stack in one
   centered cell and revolve upward; only the centered (active) line is full size,
   neighbours sit smaller and faded. A single static accent dot marks the active
   slot. Motion is gated to prefers-reduced-motion: no-preference (see below),
   matching the band reveals; the static fallback shows the first line only. */
.c-about__manifesto {
  --c-about-wheel-slot: clamp(3.5rem, 8vw, 5.5rem); /* spacing of prev / active / next */

  position: relative;
  block-size: calc(var(--c-about-wheel-slot) * 3);   /* room for prev + active + next */
  overflow: hidden;
  display: grid;
  align-items: center;
  justify-items: start;

  /* Static accent dot pinned to the center slot, i.e. whichever line is active. */
  &::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--color-accent);
    border-radius: var(--pill-border-radius);
    z-index: 1;
  }
}

.c-about__manifesto-list {
  grid-area: 1 / 1;
  display: grid;
  align-items: center;
  justify-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-about__manifesto-line {
  grid-area: 1 / 1;                          /* stack every line in one centered cell */
  padding-inline-start: var(--xl-spacing);   /* clear the active-slot dot */
  transform-origin: left center;             /* keep the left edge fixed while scaling */
  font-family: var(--font-heading);
  font-weight: var(--bold-font-weight);
  font-size: clamp(var(--2xl-font-size), 6vw, var(--4xl-font-size));
  line-height: 1.1;
  white-space: nowrap;
  color: var(--color-primary);
  opacity: 0;                                /* hidden until JS assigns a slot */
  transform: scale(0.45);

  /* No-JS fallback: show the first line full size. JS overrides via [data-pos]
     below (same specificity, later in source order, so it wins when present). */
  &:first-child {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Slots the rotator (about-manifesto.js) cycles each line through on its timer.
   One line is active (centered, full size) while its neighbours sit faded and
   smaller; the rest are hidden. The CSS transition does the slide between slots. */
.c-about__manifesto-line[data-pos="active"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.c-about__manifesto-line[data-pos="prev"] {
  opacity: 0.3;
  transform: translateY(calc(var(--c-about-wheel-slot) * -1)) scale(0.55);
}

.c-about__manifesto-line[data-pos="next"] {
  opacity: 0.3;
  transform: translateY(var(--c-about-wheel-slot)) scale(0.55);
}

/* Exited: faded out ABOVE the window, so a leaving line keeps moving up. */
.c-about__manifesto-line[data-pos="hidden"] {
  opacity: 0;
  transform: translateY(calc(var(--c-about-wheel-slot) * -1.8)) scale(0.45);
}

/* Entry point: parked BELOW the window, invisible. The rotator snaps a wrapping
   line here (no transition) before it rises in as next, so it never slides down
   across the view. */
.c-about__manifesto-line[data-pos="enter"] {
  opacity: 0;
  transform: translateY(calc(var(--c-about-wheel-slot) * 1.8)) scale(0.45);
}

.c-about__forward-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--2xl-spacing);
}

.c-about__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sm-spacing);

  &::after {
    content: "";
    width: 4rem;
    height: 0.25rem;
    background-color: var(--color-accent);
  }
}

.c-about__stat-number {
  font-family: var(--font-heading);
  font-weight: var(--bold-font-weight);
  font-size: clamp(var(--4xl-font-size), 10vw, var(--5xl-font-size));
  line-height: 1;
  color: var(--color-primary);
}

.c-about__stat-label {
  font-family: var(--font-body);
  font-size: var(--sm-font-size);
  letter-spacing: var(--letter-spacing-uppercase);
  text-transform: uppercase;
  color: var(--color-text-mid);
}

.c-about__forward-close {
  max-width: 28rem;
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--md-font-size);
  line-height: 1.65;
  color: var(--color-text-mid);
}

@media (width >=900px) {
  .c-about__usa {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--4xl-spacing);
    padding-inline: var(--xl-gutter);
    padding-block: var(--4xl-spacing);
  }

  .c-about__usa-card {
    order: 0;
  }

  .c-about__intro {
    font-size: var(--lg-font-size);
  }

  .c-about__owners {
    padding-inline: var(--md-gutter);
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
    gap: var(--4xl-spacing);
  }

  .c-about__heading {
    font-size: var(--2xl-font-size);
  }

  .c-about__quote {
    font-size: var(--3xl-font-size);
  }

  .c-about__body {
    font-size: var(--lg-font-size);
  }

  .c-about__emphasis {
    font-size: var(--2xl-font-size);
  }

  .c-about__forward-foot {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

@media (width >=1600px) {
  .c-about__owners {
    padding-inline: var(--xl-gutter);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The rotator (about-manifesto.js) does not auto-advance under reduced-motion,
     so un-stack every manifesto line out of the single shared cell into static,
     fully-readable flow. Without this only the active slot would show and the
     rest of the manifesto would stay hidden (opacity 0). */
  .c-about__manifesto-line,
  .c-about__manifesto-line[data-pos] {
    grid-area: auto;
    opacity: 1;
    transform: none;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .c-about__manifesto-line {
    transition:
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.55s ease;
  }

  .c-about__owners .c-about__heading,
  .c-about__owners .c-about__quote,
  .c-about__owners .c-about__body,
  .c-about__owners-anchor,
  .c-about__trust .c-about__heading,
  .c-about__trust .c-about__body,
  .c-about__trust .c-about__emphasis,
  .c-about__usa .c-about__heading,
  .c-about__usa .c-about__body,
  .c-about__usa-card {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
      opacity var(--c-about-reveal-dur) var(--c-about-reveal-ease),
      transform var(--c-about-reveal-dur) var(--c-about-reveal-ease);
  }
}

@keyframes c-about-reveal {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}