/* =============================================================================
   YesBOS 2.0 — About page: "Why YesBOS exists."
   Not company history. The mission. The emotional centre of the brand.
   Signature transformation: Fragmentation becomes purpose.
   Talks about work, not the company. Builds on design-system.css.
   ============================================================================= */

/* --- Intro (the tension) --- */
.ab-intro { padding-block: clamp(4.5rem, 3rem + 6vw, 8rem) clamp(2rem, 1.5rem + 3vw, 4rem); }
.ab-intro__head { max-width: 46rem; }
.ab-intro h1 { margin-top: var(--sp-3); font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.6rem); font-weight: 800; letter-spacing: -0.038em; line-height: 1.05; }
.ab-intro h1 .soft { color: var(--text-soft); }

/* --- The belief (reading beats) --- */
.ab-belief { padding-block: clamp(1rem, 0.5rem + 2vw, 3rem) clamp(3rem, 2rem + 4vw, 5rem); }
.ab-beat { font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; color: var(--text-muted); text-wrap: pretty; }
.ab-beat + .ab-beat { margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.ab-beat em { font-style: normal; font-weight: 600; color: var(--forest); }
.ab-beat--turn { color: var(--ink); font-weight: 700; }

/* --- The transformation: fragmentation becomes purpose --- */
.ab-transform { background: var(--forest-wash); border-block: 1px solid color-mix(in srgb, var(--forest) 10%, transparent); padding-block: clamp(4rem, 3rem + 4vw, 7rem); text-align: center; }
.ab-frag { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-3) var(--sp-4); max-width: 44rem; margin-inline: auto; }
.ab-frag__chip {
  display: inline-block; padding: .5rem 1rem; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
}
/* Each chip drifts in from a scattered position and settles into order.
   Overrides the default [data-reveal] transform; base .is-in resets it. */
.ab-frag__chip:nth-child(1) { --scatter: translate(-54px, -30px) rotate(-8deg); }
.ab-frag__chip:nth-child(2) { --scatter: translate(46px, -34px) rotate(7deg); }
.ab-frag__chip:nth-child(3) { --scatter: translate(-62px, 26px) rotate(6deg); }
.ab-frag__chip:nth-child(4) { --scatter: translate(58px, 22px) rotate(-6deg); }
.ab-frag__chip:nth-child(5) { --scatter: translate(-30px, 38px) rotate(9deg); }
.ab-frag__chip:nth-child(6) { --scatter: translate(38px, -20px) rotate(-9deg); }
.ab-frag__chip:nth-child(7) { --scatter: translate(-8px, 40px) rotate(5deg); }
.ab-frag__chip[data-reveal] { transform: var(--scatter, none); }
.ab-frag__chip[data-reveal].is-in { transform: none; }

.ab-transform__line { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); text-wrap: balance; }

/* --- The mission (held statement) --- */
.ab-mission { padding-block: clamp(4rem, 3rem + 4vw, 7rem); text-align: center; }
.ab-mission p { font-size: clamp(1.8rem, 1.25rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; color: var(--ink); text-wrap: balance; max-width: 22ch; margin-inline: auto; }
.ab-mission p .soft { color: var(--text-soft); }

/* --- Memorable close --- */
.ab-statement { background: var(--night); color: #fff; padding-block: clamp(4.5rem, 3.5rem + 5vw, 8rem); text-align: center; }
.ab-statement h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.7vw, 3.3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; max-width: 24ch; margin-inline: auto; }
.ab-statement h2 .accent { color: var(--emerald); }
.ab-statement__philo { margin-top: var(--sp-6); font-size: var(--fs-lead); line-height: 1.55; color: var(--on-dark); max-width: 40rem; margin-inline: auto; text-wrap: pretty; }

/* --- CTA --- */
.ab-cta { text-align: center; }
.ab-cta__inner { max-width: 40rem; margin-inline: auto; }
.ab-cta h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.ab-cta p { margin-top: var(--sp-5); color: var(--text-muted); font-size: var(--fs-lead); max-width: 34rem; margin-inline: auto; }
.ab-cta .btn { margin-top: var(--sp-7); }