/* ==========================================================================
   About — redesign per mockup
   --------------------------------------------------------------------------
   Three stacked bands inside one section:

     .about-intro   light   badge + opening statement + centred portrait
     .about-band    navy    the problem, then the promise
     .about-outro   light   the offer, then the stats grid

   Copy alternates across a two-column rhythm: .about-col sits left, and
   .about-col.is-right is pushed to the right half. Each block is ~47% of the
   content width, so the two columns leave a ~6% gutter.

   Scroll reveals are unchanged (js/about-reveal.js): [data-reveal="lines"]
   masked line reveal, "img" the portrait wipe, "rise" the stats grid.
   ========================================================================== */

.section-about {
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */
.about-intro {
  padding-top: 4rem;
  padding-bottom: 3rem;
}

.about-band {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  background-color: var(--color-navy-primary);
}

.about-outro {
  padding-top: 4rem;
  padding-bottom: 3rem;
}

/* --------------------------------------------------------------------------
   Two-column rhythm
   -------------------------------------------------------------------------- */
/* The bands own the vertical rhythm, so the shared container contributes
   only its side gutters here. */
.section-about .container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 0;
  padding-bottom: 0;
}

.about-col {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.about-text {
  color: var(--color-navy-primary);
  font-family: var(--font-family-primary);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}

/* Emphasis is bold in both bands; only the colour differs against the ground */
.section-about .highlight {
  background: none;
  padding: 0;
  font-weight: 600;
}

.about-band .about-text { color: var(--color-white); }
.about-band .highlight { color: var(--color-orange-accent); }
.about-outro .highlight,
.about-intro .highlight { color: var(--color-navy-primary); }

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.section-about .badge {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 2rem;
  color: var(--color-navy-primary);
  white-space: nowrap;
}

.section-about .dot-small {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: var(--color-navy-primary);
  flex-shrink: 0;
}

.section-about .kicker {
  font-family: var(--font-family-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--color-navy-primary);
}

/* --------------------------------------------------------------------------
   Portrait — centred, wipes open on scroll
   -------------------------------------------------------------------------- */
.about-img {
  position: relative;
  width: 78%;
  max-width: 30rem;
  margin: 2.5rem auto 0;
  padding-top: 70%;
  border-radius: 1rem;
  overflow: clip;
}

.about-img-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  overflow: clip;
}

.about-img-h {
  position: absolute;
  inset: 0;
  padding-top: 84%;
  object-fit: cover;
  object-position: 50% 0%;
}

.about-img .img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Stats grid
   -------------------------------------------------------------------------- */
.counter-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  column-gap: 3rem;
  row-gap: 2.5rem;
  margin-top: 3rem;
}

/* Inset a bit further than the rest of the band's content */
@media (min-width: 480px) {
  .counter-grid { padding: 0 1.5rem; }
}

.counter-col.is-wide { grid-column: span 1 / span 1; }

.counter-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 0 0 0 1.5rem;
  border: 0;
  border-left: 1px solid rgba(234, 121, 70, .55);
  border-radius: 0;
  background: none;
  text-align: left;
  transition: none;
}

.counter-card:hover {
  background: none;
  transform: none;
}

.counter-title {
  margin: 0;
  color: var(--color-navy-primary);
  font-family: var(--font-family-primary);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.counter-text {
  color: var(--color-navy-primary);
  font-family: var(--font-family-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.counter-inner-div {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 3rem;
  row-gap: 2.5rem;
}

/* --------------------------------------------------------------------------
   Scroll reveals
   Hidden states apply only once js/about-reveal.js has claimed the page, so
   everything stays readable without JS and under prefers-reduced-motion.

   The two display:block rules are load-bearing, not cosmetic: the splitter
   drops the space at each line boundary, so if the masks flow inline the
   words either side collide ("ecommerce" + "agency," -> "ecommerceagency").
   -------------------------------------------------------------------------- */
.section-about .split-line-mask {
  display: block;
  overflow: clip;
}

.section-about .split-line {
  display: block;
}

.js-reveal .section-about [data-reveal="lines"] .split-line {
  transform: translateY(100%);
}

.js-reveal .section-about [data-reveal="lines"].is-revealed .split-line {
  transform: translateY(0);
}

/* Portrait: the wrapper wipes open, the photo settles out of a 1.2 scale */
.js-reveal .section-about .about-img-wrapper {
  height: 0;
  transition: height 1.4s cubic-bezier(.215, .61, .355, 1);
}

.js-reveal .section-about .about-img.is-revealed .about-img-wrapper {
  height: 100%;
}

.js-reveal .section-about .img {
  transform: scale(1.2);
  transition: transform 1.2s cubic-bezier(.215, .61, .355, 1) .1s;
}

.js-reveal .section-about .about-img.is-revealed .img {
  transform: scale(1);
}

/* Stats grid rises into place (plays once — no reverse) */
.js-reveal .section-about [data-reveal="rise"] {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .5s cubic-bezier(.25, .46, .45, .94) .2s,
              transform .5s cubic-bezier(.25, .46, .45, .94) .2s;
}

.js-reveal .section-about [data-reveal="rise"].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   768px and up — the two columns split
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .about-intro { padding-top: 5rem; padding-bottom: 3.5rem; }
  .about-band  { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .about-outro { padding-top: 5rem; padding-bottom: 4rem; }

  .section-about .container { gap: 3rem; }

  .about-col { max-width: 47%; }
  .about-col.is-right { margin-left: auto; }

  /* Badge and opening statement share a row */
  .about-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
  }

  .section-about .badge { margin-bottom: 0; }

  .about-text { font-size: 1.5rem; }

  .about-img {
    width: 40%;
    max-width: none;
    margin-top: 3.5rem;
    padding-top: 36%;
  }

  .counter-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 3rem;
    margin-top: 4rem;
    padding: 0 3rem;
  }

  .counter-col.is-wide { grid-column: span 3 / span 3; }

  .counter-inner-div { grid-template-columns: repeat(2, 1fr); }

  .counter-title { font-size: 2rem; }
}

/* --------------------------------------------------------------------------
   992px and up
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .about-intro { padding-top: 6rem; padding-bottom: 4rem; }
  .about-band  { padding-top: 5rem; padding-bottom: 5rem; }
  .about-outro { padding-top: 6rem; padding-bottom: 4rem; }

  .section-about .container { gap: 3.5rem; }

  .about-text { font-size: 1.875rem; }

  .about-img {
    width: 29vw;
    margin-top: 4rem;
    padding-top: 26vw;
  }

  .counter-title { font-size: 2.25rem; }

  /* The paired stats sit on the same rhythm as the right-hand copy column */
  .counter-inner-div { column-gap: 3rem; }

  .counter-grid { padding: 0 5rem; }
}