/* ==========================================================================
   About page — uses the shared tokens from theme.css, scoped under .ab-*
   ========================================================================== */

.ab {
  background-color: var(--vd-paper);
}

.ab-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.ab-eyebrow {
  font-family: var(--vd-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vd-sand);
  margin: 0 0 16px;
}

.ab-crumb {
  font-family: var(--vd-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vd-muted);
  margin: 0 0 18px;
}

.ab-crumb a {
  color: var(--vd-muted);
  text-decoration: none;
}

.ab-crumb a:hover {
  color: var(--vd-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ab-crumb b {
  color: var(--vd-sand);
  font-weight: 500;
}

.ab h1,
.ab h2 {
  font-family: var(--vd-display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--vd-ink);
  margin: 0;
  text-transform: none;
}

.ab h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.3rem);
  max-width: 16ch;
}

.ab h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  max-width: 20ch;
}

.ab-lede {
  margin: 20px 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--vd-muted);
  max-width: 46ch;
}

/* --- hero -------------------------------------------------------------- */

.ab-hero {
  padding: 84px 0 64px;
}

.ab-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}

.ab-hero-media {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--vd-line);
  aspect-ratio: 4 / 3;
}

.ab-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- statement --------------------------------------------------------- */

.ab-statement {
  padding: 24px 0 64px;
  text-align: center;
}

.ab-statement p {
  margin: 0 auto;
  max-width: 44ch;
  font-family: var(--vd-display);
  font-variation-settings: "wdth" 106;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--vd-ink);
}

/* the tail of the sentence steps back, as in the reference */
.ab-statement p span {
  color: #a4aeaf;
}

/* --- stats ------------------------------------------------------------- */

.ab-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--vd-line);
  border-bottom: 1px solid var(--vd-line);
  margin-bottom: 76px;
}

.ab-stat {
  padding: 34px 28px;
  border-right: 1px solid var(--vd-line);
  text-align: center;
}

.ab-stat:last-child {
  border-right: 0;
}

/* tabular figures: digits keep an even width while counting, so the
   number does not jitter as it goes from one digit to two */
.ab-stat-n {
  font-variant-numeric: tabular-nums;
  font-family: var(--vd-display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--vd-ink);
}

.ab-stat-l {
  margin: 10px 0 0;
  font-family: var(--vd-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vd-muted);
}

/* --- alternating text / media blocks ----------------------------------- */

.ab-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding-bottom: 76px;
}

.ab-split-media {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--vd-line);
  aspect-ratio: 5 / 4;
}

.ab-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* reversed row: media on the right */
.ab-split.is-reversed .ab-split-media {
  order: 2;
}

.ab-checks {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.ab-checks li {
  position: relative;
  padding: 9px 0 9px 30px;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--vd-ink);
  border-bottom: 1px solid var(--vd-line);
}

.ab-checks li:last-child {
  border-bottom: 0;
}

.ab-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23b29e84' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

/* --- process ----------------------------------------------------------- */

.ab-process {
  padding: 0 0 84px;
}

.ab-process-head {
  text-align: center;
  margin-bottom: 46px;
}

.ab-process-head .ab-lede {
  margin-left: auto;
  margin-right: auto;
  max-width: 54ch;
}

/* an ol for the semantics, but the visible numbering is the mono "Step 01"
   label — so the default markers have to go, or you get both */
.ab-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--vd-line);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ab-step {
  padding: 32px 30px 32px 0;
  border-right: 1px solid var(--vd-line);
}

.ab-step:not(:first-child) {
  padding-left: 30px;
}

.ab-step:last-child {
  border-right: 0;
  padding-right: 0;
}

/* the numbering is real: this is an ordered sequence */
.ab-step-n {
  font-family: var(--vd-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--vd-sand);
  margin: 0 0 14px;
}

.ab-step h3 {
  font-family: var(--vd-display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--vd-ink);
  margin: 0 0 10px;
  text-transform: none;
}

.ab-step p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--vd-muted);
}

/* --- partner form ------------------------------------------------------ */

.ab-partner {
  padding: 0 0 96px;
}

.ab-partner-card {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  border: 1px solid var(--vd-line);
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 42, 46, .04), 0 24px 48px -32px rgba(28, 42, 46, .2);
}

.ab-partner-aside {
  background: var(--vd-slate);
  color: #e8edee;
  padding: 40px 36px;
}

.ab-partner-aside h2 {
  color: #fff;
  font-size: clamp(1.4rem, 2.1vw, 1.8rem);
  max-width: 16ch;
}

.ab-partner-aside p {
  margin: 16px 0 0;
  font-size: .9375rem;
  line-height: 1.65;
  color: #a8b7bb;
}

.ab-partner-contact {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(232, 237, 238, .18);
}

.ab-partner-contact a {
  display: block;
  font-family: var(--vd-mono);
  font-size: .875rem;
  color: #e8edee;
  text-decoration: none;
  padding: 8px 0;
}

.ab-partner-contact a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ab-partner-form {
  padding: 40px 36px;
}

/* the form keeps its Webflow classes; theme.css already restyles the
   fields and the submit, so only layout is needed here */
.ab-partner-form .w-layout-grid.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.ab-partner-form .field-label {
  display: block;
  margin-bottom: 8px;
}

.ab-partner-form .partner-text-field {
  width: 100%;
  padding: 13px 14px;
  margin: 0;
}

.ab-partner-form textarea.partner-text-field {
  min-height: 132px;
  margin-bottom: 22px;
}

.ab-partner-form .submit-button {
  padding: 15px 30px;
  cursor: pointer;
}

.ab-partner-form .w-form-done,
.ab-partner-form .w-form-fail {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: .9375rem;
  text-align: left;
  background: #eef4f0;
  border: 1px solid #cadbd1;
  color: #1f5340;
}

.ab-partner-form .w-form-fail {
  background: #fdf0ee;
  border-color: #f0cec7;
  color: #8a3423;
}

/* --- responsive -------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .ab-hero-grid,
  .ab-split,
  .ab-partner-card {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .ab-split.is-reversed .ab-split-media {
    order: -1;
  }

  .ab-steps {
    grid-template-columns: 1fr;
  }

  .ab-step {
    border-right: 0;
    border-bottom: 1px solid var(--vd-line);
    padding: 26px 0 !important;
  }

  .ab-step:last-child {
    border-bottom: 0;
  }
}

@media screen and (max-width: 640px) {
  .ab-wrap {
    padding: 0 20px;
  }

  .ab-hero {
    padding: 56px 0 44px;
  }

  .ab-stats {
    grid-template-columns: 1fr;
  }

  .ab-stat {
    border-right: 0;
    border-bottom: 1px solid var(--vd-line);
    padding: 26px 0;
  }

  .ab-stat:last-child {
    border-bottom: 0;
  }

  .ab-partner-aside,
  .ab-partner-form {
    padding: 28px 22px;
  }

  .ab-partner-form .w-layout-grid.grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Motion
   Same system as the projects and contact pages: one orchestrated load
   sequence, restrained scroll reveals, and the safety inversion from
   home.css — visible by default, hidden only once the script sets
   html.ab-ready. Never runs under prefers-reduced-motion.

   The signature here is the checklists completing: each item ticks in one
   after another, which is what a checklist does. The process steps reuse the
   plotted rule from the other two pages so all three read as one system.

   Deliberately NOT animated: anything inside the partner form, and its
   .w-form-done / .w-form-fail blocks, which the form handler display-toggles.
   -------------------------------------------------------------------------- */

html.ab-ready .ab-anim {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

html.ab-ready .ab-anim.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .65s cubic-bezier(.22, .61, .36, 1);
}

html.ab-ready .ab-d1.is-in { transition-delay: .04s; }
html.ab-ready .ab-d2.is-in { transition-delay: .12s; }
html.ab-ready .ab-d3.is-in { transition-delay: .20s; }
html.ab-ready .ab-d4.is-in { transition-delay: .30s; }

/* the hero image settles rather than sliding */
html.ab-ready .ab-hero-media img {
  transform: scale(1.05);
}

html.ab-ready .ab-hero-media.is-in img {
  transform: none;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1) .15s;
}

/* stats: numbers rise, their dividers draw down */
html.ab-ready .ab-stat {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

html.ab-ready .ab-stats.is-in .ab-stat {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}

html.ab-ready .ab-stats.is-in .ab-stat:nth-child(1) { transition-delay: .05s; }
html.ab-ready .ab-stats.is-in .ab-stat:nth-child(2) { transition-delay: .15s; }
html.ab-ready .ab-stats.is-in .ab-stat:nth-child(3) { transition-delay: .25s; }

/* signature: checklist items tick in, one after another */
html.ab-ready .ab-checks li {
  opacity: 0;
  transform: translate3d(-6px, 0, 0);
}

html.ab-ready .ab-checks.is-in li {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

html.ab-ready .ab-checks.is-in li:nth-child(1) { transition-delay: .06s; }
html.ab-ready .ab-checks.is-in li:nth-child(2) { transition-delay: .17s; }
html.ab-ready .ab-checks.is-in li:nth-child(3) { transition-delay: .28s; }
html.ab-ready .ab-checks.is-in li:nth-child(4) { transition-delay: .39s; }

/* the tick itself lands a beat after its row */
html.ab-ready .ab-checks li::before {
  opacity: 0;
  transform: scale(.6);
}

html.ab-ready .ab-checks.is-in li::before {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

html.ab-ready .ab-checks.is-in li:nth-child(1)::before { transition-delay: .20s; }
html.ab-ready .ab-checks.is-in li:nth-child(2)::before { transition-delay: .31s; }
html.ab-ready .ab-checks.is-in li:nth-child(3)::before { transition-delay: .42s; }
html.ab-ready .ab-checks.is-in li:nth-child(4)::before { transition-delay: .53s; }

/* process steps: the shared plotted rule */
html.ab-ready .ab-step {
  position: relative;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

html.ab-ready .ab-steps.is-in .ab-step {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}

html.ab-ready .ab-steps.is-in .ab-step:nth-child(1) { transition-delay: .05s; }
html.ab-ready .ab-steps.is-in .ab-step:nth-child(2) { transition-delay: .17s; }
html.ab-ready .ab-steps.is-in .ab-step:nth-child(3) { transition-delay: .29s; }

html.ab-ready .ab-steps::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--vd-sand);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

html.ab-ready .ab-steps {
  position: relative;
}

html.ab-ready .ab-steps.is-in::after {
  transform: scaleX(1);
  opacity: 0;
  transition: transform .85s cubic-bezier(.22, .61, .36, 1),
              opacity .5s ease .8s;
}