/* ============================================================
   Solto — About
   Three tonal zones (no flat cream): warm-white founder section
   with the photo bleeding off the right edge → full-bleed blush
   "who we work with" band → dark-green closing band. Editorial,
   asymmetric, same type system as the rest of the site.
   ============================================================ */

/* --- 1. Founder (warm white; photo bleeds right) --- */
.about-intro {
  position: relative; max-width: var(--page-max); margin-inline: auto;
  padding: clamp(6rem, 4rem + 6vw, 9rem) var(--gutter) var(--space-3xl);
  min-height: 68svh; display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: center;
}
@media (min-width: 860px) { .about-intro { grid-template-columns: 1.4fr 0.6fr; } }

.about-text { max-width: 44rem; }
.about-eyebrow {
  font-family: var(--font-mono); font-size: var(--type-mono); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--display-fg); margin-bottom: var(--space-lg);
}
.about-lead, .about-body { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); line-height: 1.55; max-width: 46ch; }
.about-lead { color: var(--page-fg); }
.about-lead .accent { color: var(--display-fg); }
.about-body { margin-top: var(--space-md); color: var(--muted-fg); }

/* founder photo — green/blush duotone (matches the home imagery), bleeds
   right; left edge fades softly into the warm white so it's not a hard slab. */
/* smaller, translucent, feathered — a subtle presence, not in-your-face */
.about-photo {
  position: relative; justify-self: end; align-self: center;
  width: 100%; max-width: 20rem; aspect-ratio: 3 / 4;
}
.about-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  opacity: 0.72; filter: saturate(1.02);
  -webkit-mask-image: radial-gradient(130% 125% at 50% 42%, #000 48%, transparent 100%);
          mask-image: radial-gradient(130% 125% at 50% 42%, #000 48%, transparent 100%);
}

/* --- 2. Who we work with (full-bleed blush band) --- */
.who-work { padding-block: clamp(5rem, 3.5rem + 6vw, 9rem); padding-inline: var(--gutter); }
.who-work-inner { max-width: var(--page-max); margin-inline: auto; }
.who-statement {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.3;
  color: var(--page-fg); max-width: 30ch; margin-top: var(--space-sm);
}
.who-statement .accent { color: var(--display-fg); }
/* the prospect's worries — italic bullets with a green dash marker */
.who-worries { list-style: none; margin-top: var(--space-xl); display: grid; gap: var(--space-md); max-width: 52ch; }
.who-worries li {
  position: relative; padding-left: 1.6rem;
  font-style: italic; font-synthesis: style;   /* Satoshi has no italic face — allow synthetic slant */
  font-size: var(--type-lead); line-height: 1.45; color: var(--muted-fg);
}
.who-worries li::before {   /* round green bullet */
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--display-fg);
}

/* --- 3. The belief (full-bleed dark-green closing) --- */
.belief { padding: clamp(6rem, 4rem + 7vw, 10rem) var(--gutter); }
.belief-inner { max-width: 40rem; margin-inline: auto; text-align: center; }
.belief-line { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); line-height: 1.12; color: var(--display-fg); }
.belief-cta { align-self: center; margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); }

@media (max-width: 859px) {
  .about-text { max-width: none; }
  .about-photo { justify-self: center; margin-inline: auto; max-width: 17rem; }
}