/* About page — leans on style.css tokens; scoped section styles only. */
:root { --about-approach: #ff914d; }

/* ── Hero ────────────────────────────────────────────────────────── */
.ab-hero { padding: clamp(120px,13vh,160px) clamp(24px,5vw,72px) clamp(48px,6vh,88px); }
.ab-hero__title {
  font-family: 'Barlow Condensed', 'Onest', sans-serif;
  font-weight: 800; font-size: clamp(2.6rem, 9vw, 10rem);
  line-height: 0.9; letter-spacing: -0.015em; text-transform: uppercase;
  margin: 0; color: #0d0d0d;
}
.ab-hero__title em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--about-approach); }
.ab-hero__title .w { display: inline-block; will-change: transform, opacity; }

/* Headline entrance — must match services.css and work.css exactly. All three
   are sibling top-level pages reached from the same nav, so a headline that
   cascades on one and pops as a single block on another makes navigation feel
   like three different sites. Values are the house entrance: 0.9s on
   var(--ease-out), words 70ms apart from 0.15s.
   Change one, change all three. */
@media (prefers-reduced-motion: no-preference) {
  .ab-hero__title .w {
    opacity: 0;
    transform: translateY(0.14em);
    animation: abIn 0.9s var(--ease-out) both;
  }
  .ab-hero__title .w:nth-child(1) { animation-delay: 0.15s; }
  .ab-hero__title .w:nth-child(2) { animation-delay: 0.22s; }
  .ab-hero__title .w:nth-child(3) { animation-delay: 0.29s; }
  .ab-hero__title .w:nth-child(4) { animation-delay: 0.36s; }
  .ab-hero__title .w:nth-child(5) { animation-delay: 0.43s; }
  .ab-hero__title .w:nth-child(6) { animation-delay: 0.5s;  }
  .ab-hero__title .w:nth-child(7) { animation-delay: 0.57s; }
  .ab-hero__title .w:nth-child(8) { animation-delay: 0.64s; }
  .ab-hero__title .w:nth-child(9) { animation-delay: 0.71s; }
  .ab-hero__title .w:nth-child(10){ animation-delay: 0.78s; }

  /* Supporting copy lands after the headline has finished reading, mirroring
     .svc-hero__foot / .svc-hero__kicker on services. */
  .ab-hero__intro {
    opacity: 0;
    animation: abIn 0.8s var(--ease-out) 0.9s both;
  }
}
@keyframes abIn { to { opacity: 1; transform: none; } }
.ab-hero__intro {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 96px);
  margin-top: clamp(48px, 8vh, 100px); max-width: 100%;
}
.ab-hero__intro p {
  font-family: 'Onest', sans-serif; font-weight: 400;
  font-size: clamp(15px, 1.05vw, 19px); line-height: 1.55; margin: 0;
  color: #0d0d0d;
}
.ab-hero__intro p + p { color: rgba(13,13,13,0.72); }

/* ── Our Approach (brand-orange full-bleed band) ────────────────── */
.ab-approach { background: var(--about-approach); padding: clamp(72px, 10vh, 120px) clamp(24px, 5vw, 72px); position: relative; overflow: hidden; }
.ab-approach__reveal {
  position: absolute; inset: 0; background: var(--bg-primary, #fff3eb);
  transform-origin: right center;
  transition: transform 0.8s var(--ease-in-out);
  will-change: transform;
}
.ab-approach.is-visible .ab-approach__reveal { transform: scaleX(0); }
.ab-approach__inner { position: relative; z-index: 2; }
.ab-approach__title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 5vw, 4.6rem); line-height: 0.95; letter-spacing: -0.015em;
  text-transform: uppercase; color: #0d0d0d; margin: 0 0 clamp(40px, 6vh, 72px);
}
.ab-approach__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.ab-approach__card {
  background: #0d0d0d; color: #fff3eb; border-radius: 8px;
  padding: clamp(28px, 3vw, 40px); min-height: clamp(320px, 34vw, 440px);
  display: flex; flex-direction: column; gap: clamp(24px, 3vh, 40px);
  opacity: 0; transform: translateY(var(--rise-lg));
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.ab-approach.is-visible .ab-approach__card { opacity: 1; transform: none; }
/* 250ms lead-in holds the cards back until the orange band has wiped open,
   then the site-wide 70ms step. Was a 150ms step — the slowest cadence on the
   site, which made this section feel laboured next to the service grid. */
.ab-approach.is-visible .ab-approach__card:nth-child(1) { transition-delay: 250ms; }
.ab-approach.is-visible .ab-approach__card:nth-child(2) { transition-delay: 320ms; }
.ab-approach.is-visible .ab-approach__card:nth-child(3) { transition-delay: 390ms; }
.ab-approach__asterisk { width: 44px; height: 44px; color: #fff3eb; }
.ab-approach__ct { font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1; letter-spacing: -0.01em;
  text-transform: uppercase; margin: 0; }
.ab-approach__cd { font-family: 'Onest', sans-serif; font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.55; color: rgba(255,243,235,0.72); margin: auto 0 0; }

/* ── What We Believe In ────────────────────────────────────────── */
.ab-believe { padding: clamp(72px, 10vh, 120px) clamp(24px, 5vw, 72px); }
.ab-believe__row { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.ab-believe__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 5vw, 4.6rem); line-height: 0.95; letter-spacing: -0.015em;
  text-transform: uppercase; color: #0d0d0d; margin: 0 0 clamp(48px, 8vh, 88px); }
.ab-believe__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.ab-believe__item { padding: clamp(20px, 3vh, 32px) 0; border-top: 1px solid rgba(13,13,13,0.14); }
.ab-believe__item:last-child { border-bottom: 1px solid rgba(13,13,13,0.14); }
.ab-believe__vh { font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1; text-transform: uppercase;
  color: rgba(13,13,13,0.35); margin: 0;
  transition: color 0.4s ease;
}
.ab-believe__vd { font-family: 'Onest', sans-serif; font-size: 14px; line-height: 1.55;
  color: rgba(13,13,13,0.72); max-height: 0; overflow: hidden; margin: 0;
  transition: max-height 0.5s var(--ease-out), padding 0.4s ease, opacity 0.4s ease;
  opacity: 0; padding-top: 0;
}
.ab-believe__item.is-active .ab-believe__vh { color: #0d0d0d; }
.ab-believe__item.is-active .ab-believe__vd { max-height: 200px; padding-top: 12px; opacity: 1; }

/* Octagon graphic — cluster morph on scroll */
.ab-believe__viz { display: flex; align-items: center; justify-content: center; height: clamp(240px, 34vw, 460px); }
.ab-believe__viz svg { width: 100%; height: 100%; max-width: 460px; }
.ab-believe__oct { fill: #0d0d0d; transition: transform 0.9s var(--ease-in-out), fill 0.6s ease; transform-origin: 50% 50%; transform-box: fill-box; }
/* Long-term thinking → cluster tight center; other → spread */
.ab-believe.long-term .ab-believe__oct { transform: scale(0.72) rotate(45deg); }
.ab-believe.long-term .ab-believe__oct--tl { transform: translate(20px, 20px) scale(0.72); }
.ab-believe.long-term .ab-believe__oct--tr { transform: translate(-20px, 20px) scale(0.72); }
.ab-believe.long-term .ab-believe__oct--bl { transform: translate(20px, -20px) scale(0.72); }
.ab-believe.long-term .ab-believe__oct--br { transform: translate(-20px, -20px) scale(0.72); }
.ab-believe.long-term .ab-believe__oct { fill: var(--about-approach); }

/* ── How We Work ─────────────────────────────────────────────── */
.ab-work { padding: clamp(72px, 10vh, 120px) clamp(24px, 5vw, 72px); }
.ab-work__head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end;
  margin-bottom: clamp(40px, 6vh, 72px); }
.ab-work__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 5vw, 4.6rem); line-height: 0.95; text-transform: uppercase;
  color: #0d0d0d; margin: 0; }
.ab-work__sub { font-family: 'Onest', sans-serif; font-size: clamp(14px, 1vw, 17px);
  line-height: 1.55; color: rgba(13,13,13,0.72); max-width: 40ch; justify-self: end; text-align: right; margin: 0; }
.ab-work__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.4vw, 24px); }
.ab-work__card {
  background: #fff3eb; border: 1px solid rgba(13,13,13,0.06);
  border-radius: 4px; padding: clamp(24px, 2.4vw, 36px);
  min-height: clamp(320px, 36vw, 440px);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(var(--rise-lg));
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-state);
  box-shadow: 0 12px 40px -20px rgba(0,0,0,0.12);
}
.ab-work.is-visible .ab-work__card { opacity: 1; transform: none; }
.ab-work.is-visible .ab-work__card:nth-child(1) { transition-delay: 0ms; }
/* Card 2's -24px is its RESTING offset — this row is deliberately uneven, and
   its -32px hover is measured from here. Not an entrance direction. */
.ab-work.is-visible .ab-work__card:nth-child(2) { transition-delay: var(--stagger); transform: translateY(-24px); }
.ab-work.is-visible .ab-work__card:nth-child(3) { transition-delay: 140ms; }
.ab-work.is-visible .ab-work__card:nth-child(4) { transition-delay: 210ms; }
.ab-work__card:hover { transform: translateY(-8px) !important; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.22); }
.ab-work__card:nth-child(2):hover { transform: translateY(-32px) !important; }
.ab-work__num { font-family: 'Onest', sans-serif; font-size: 14px; font-weight: 500;
  padding-bottom: 12px; border-bottom: 1px solid rgba(13,13,13,0.2); margin-bottom: clamp(48px, 8vh, 96px); color: #0d0d0d; }
.ab-work__ct { font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(1.2rem, 1.6vw, 1.7rem); line-height: 1; letter-spacing: -0.01em;
  text-transform: uppercase; margin: 0 0 clamp(20px, 3vh, 32px); }
.ab-work__cd { font-family: 'Onest', sans-serif; font-size: clamp(12px, 0.85vw, 14px);
  line-height: 1.55; color: rgba(13,13,13,0.72); margin: auto 0 0; }

/* ── Closing ─────────────────────────────────────────────────── */
.ab-close { padding: clamp(72px, 10vh, 120px) clamp(24px, 5vw, 72px) clamp(72px, 10vh, 120px); }
.ab-close__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end; }
.ab-close__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(2.6rem, 8.6vw, 9.4rem); line-height: 0.9; letter-spacing: -0.015em;
  text-transform: uppercase; color: #0d0d0d; margin: 0; }
.ab-close__title em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--about-approach); }
.ab-close__body { font-family: 'Onest', sans-serif; font-size: clamp(14px, 1vw, 17px); line-height: 1.55; color: rgba(13,13,13,0.72); max-width: 50ch; margin: 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .ab-hero { padding: clamp(96px, 12vh, 140px) 24px 48px; min-height: auto; }
  .ab-hero__title { font-size: clamp(2.4rem, 12vw, 6rem); }
  .ab-hero__intro { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .ab-approach__grid { grid-template-columns: 1fr; }
  .ab-approach__card { min-height: auto; }
  .ab-believe__row { grid-template-columns: 1fr; gap: 40px; }
  .ab-believe__viz { height: 280px; }
  .ab-work__head { grid-template-columns: 1fr; }
  .ab-work__sub { justify-self: start; text-align: left; }
  .ab-work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-work__card:nth-child(2), .ab-work__card:nth-child(4) { transform: translateY(0) !important; }
  .ab-close__row { grid-template-columns: 1fr; gap: 32px; }
  .ab-close__title { font-size: clamp(2.6rem, 13vw, 5.4rem); }
}
@media (max-width: 575.98px) {
  .ab-work__grid { grid-template-columns: 1fr; }
  .ab-hero__title { font-size: clamp(2rem, 12vw, 3rem); }
}