/* ==========================================================================
   Akademi Kinetiq — About Us
   Figma frame "Akademi Kinetik - About Us" (10006:1305)

   The original export laid this page out with ~60 absolutely-positioned
   elements at fixed pixel coordinates, which cannot re-flow at any width.
   It has been rebuilt in flow (flex/grid). The mock's offsets are preserved
   as the paddings, gaps and column ratios they encoded, so the desktop
   rendering matches the design without carrying its fixed geometry.
   ========================================================================== */

.ab-stage-1152,
.ab-stage-1244,
.ab-stage-1280 {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.ab-stage-1152 { max-width: 1152px; }
.ab-stage-1244 { max-width: 1244px; }
.ab-stage-1280 { max-width: 1280px; }

/* --------------------------------------------------------------------------
   Hero — node 10006:1307
   The nav overlays this section: the hero starts at y=0 in the mock.
   -------------------------------------------------------------------------- */

.ab-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hero-min);
  padding-top: var(--nav-h);  /* the nav floats over the image */
  overflow: hidden;
}

.ab-hero__bg {
  position: absolute;
  inset: 0;
}

.ab-hero__media {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  overflow: hidden;
}

/* The mock scaled this to 527% of the frame — a 10x upscale of a 512px
   source. object-fit keeps the framing without the blur. */
.ab-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

.ab-hero__gradient {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    #131313 0%,
    rgba(19, 19, 19, 0.4) 50%,
    rgba(19, 19, 19, 0) 100%
  );
}

.ab-hero__stage {
  display: flex;
  align-items: center;
  padding-top: var(--hero-pad);
  padding-bottom: var(--hero-pad);
}

.ab-hero__block {
  max-width: 768px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.ab-hero__eyebrow {
  width: 100%;
  padding-bottom: 0.59px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  line-height: 1.4;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-cream);
}

.ab-hero__title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--c-off-white);
}

/* Targets the colour span by class, not by element: the headline's lines are
   now spans too, and a descendant `span` selector would tint all of them. */
.ab-hero__title .hero-title__alt { color: var(--c-line-bright); }

.ab-hero__lede {
  width: 100%;
  max-width: 576px;
  padding-top: 6.795px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   Philosophy — node 10006:1319
   Was a 652px stage with the copy and figure placed by coordinate; the
   609px figure origin inside a 1152px stage is the 1fr/1fr split below.
   -------------------------------------------------------------------------- */

.ab-philosophy .ab-stage-1152 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(48px, 6vw, 72px);
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.ab-philosophy__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.ab-philosophy__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-off-white);
}

.ab-philosophy__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.625;
  color: var(--c-muted);
}

.ab-philosophy__quote {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding-left: 24px;
  border-left: 4px solid var(--c-accent);
}

.ab-philosophy__quote-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  line-height: 1.4;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-line-bright);
}

.ab-philosophy__quote-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--c-off-white);
}

.ab-philosophy__figure {
  position: relative;
}

.ab-philosophy__frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 16px;
  border: 1px solid #444444;
}

.ab-philosophy__media {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ab-philosophy__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ab-philosophy__badge {
  position: absolute;
  right: -6px;
  bottom: -24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 200px;
  padding: 24px;
  background-color: var(--c-accent);
  color: var(--c-accent-ink-2);
  white-space: nowrap;
}

.ab-philosophy__badge-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
}

.ab-philosophy__badge-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: -0.6px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Who We Are & bento — node 10006:1336
   The mock's three cards were placed at coordinates that overlapped each
   other (598 + 380 + 380 into a 1116px row). The ratio below keeps the
   intended hierarchy — a wider heritage card — without the collision.
   -------------------------------------------------------------------------- */

.ab-who { background-color: var(--c-surface-deep); }

.ab-who .ab-stage-1244 {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.ab-who__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 64px);
}

.ab-who__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
}

.ab-who__headline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ab-who__eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 16.8px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

.ab-who__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-off-white);
}

.ab-who__intro {
  max-width: 448px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--c-muted);
}

/* Equal tracks at rest. As on the home Pathway grid, the wide slot has to be
   able to move on hover and a grid-column span cannot animate, so the
   proportions live in the tracks. See the :has() block below. */
.ab-who__cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

/* The three were never really one component: Heritage bottom-ranged its copy
   on the left at a larger type size with a smaller icon, the other two centred
   theirs. That was coherent while Heritage was permanently the wide card and
   the others permanently narrow — it read as "feature plus two supports". Now
   that any of the three can be the wide one, the same difference just reads as
   three cards that do not match, so they share one treatment.

   Left-ranged rather than centred because the paragraph that appears on hover
   runs three to four lines: centred, it gives the eye no fixed left edge to
   return to on each new line, and the block visibly reshapes as it opens.
   Against a left margin it simply grows downward. */
.ab-who__card--heritage,
.ab-who__card--focus,
.ab-who__card--intensity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  min-height: 400px;
  padding: clamp(28px, 3.5vw, 48px);
  text-align: left;
  border: 1px solid #444444;
}

/* One type scale across all three. Heritage's heading used to be the larger
   --fs-card in the dimmer --c-line-bright, being the feature card; its
   paragraph was 16px against the others' 14px with no measure limit. */
.ab-who__card-title,
.ab-who__card-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-off-white);
}

.ab-who__card-text,
.ab-who__card-body {
  max-width: 240px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--c-muted);
}

.ab-who__icon { display: flex; }

/* Matched on height, not width: the three glyphs are 36x36, 32x40 and 24x31.5,
   so matching widths would leave the tall narrow bolt looking the largest.
   Height is what the eye compares. */
.ab-who__icon img {
  display: block;
  height: 36px;
  width: auto;
}

/* --------------------------------------------------------------------------
   Hover to open

   Same interaction as the home Pathway grid, different reveal. These cards
   have no room for a photo block under the copy, so the photo becomes the
   card's ground under a scrim instead.

   That is also what the original design wanted. The Heritage card carried
   `backdrop-filter: blur(5px)` over a translucent background — a frosted-glass
   treatment, which only means anything on top of an image. There was no image,
   so the blur cost a compositing layer, bought nothing, and left the card
   rendering as an empty box. The photo below is the image it was waiting for,
   and the frosting is gone with it.

   Below 1024px the photo is simply always on. There is no hover to reveal it
   with, and hiding it left the section as three empty outlines on exactly the
   screens that have the least else to look at. Everything except the fade
   lives out here, so the small-screen card is the desktop card in its open
   state.

   Negative z-index puts this above the card's own background but below every
   child — including the accent corner wedge, which keeps working untouched.
   It cannot escape the card because base.css already sets isolation: isolate
   on all three.
   -------------------------------------------------------------------------- */
.ab-who__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.ab-who__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text over an uncontrolled photo is a contrast gamble, and every card carries
   a whole paragraph, not just a heading.

   Flatter and heavier at the edges than the desktop scrim below, because the
   cards are not one height here: Heritage collapses to ~245px at tablet while
   its neighbours hold 400px, and the copy fills whatever it gets. A scrim that
   lifts off at the top and bottom would leave the first and last lines of the
   short card sitting on bare photo. */
.ab-who__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 19, 19, 0.55) 0%, rgba(19, 19, 19, 0.86) 55%, rgba(19, 19, 19, 0.72) 100%);
}

@media (min-width: 1024px) {
  /* Doubled for the same reason as the home Pathway grid — see the note there.
     This grid also carries `rv rv--d2 seq`, and `.js-rv .rv.seq` in base.css
     sets `transition: none` at a specificity a bare class cannot beat. */
  .ab-who__cards,
  .js-rv .ab-who__cards.rv.seq {
    transition: grid-template-columns 520ms var(--ease-wipe);
  }

  /* See the matching note in home.css: scopes each card's internal relayout.
     A safeguard, not the reason the animation is smooth — measured, it makes
     no material difference either way. */
  .ab-who__card--heritage,
  .ab-who__card--focus,
  .ab-who__card--intensity { contain: layout paint; }

  .ab-who__cards:has(.ab-who__card--heritage:hover)  { grid-template-columns: 1.45fr 1fr 1fr; }
  .ab-who__cards:has(.ab-who__card--focus:hover)     { grid-template-columns: 1fr 1.45fr 1fr; }
  .ab-who__cards:has(.ab-who__card--intensity:hover) { grid-template-columns: 1fr 1fr 1.45fr; }

  /* After the :hover trio so the remembered card wins any overlap. */
  .ab-who__cards:has(.ab-who__card--heritage.is-open)  { grid-template-columns: 1.45fr 1fr 1fr; }
  .ab-who__cards:has(.ab-who__card--focus.is-open)     { grid-template-columns: 1fr 1.45fr 1fr; }
  .ab-who__cards:has(.ab-who__card--intensity.is-open) { grid-template-columns: 1fr 1fr 1.45fr; }

  /* The only thing the desktop adds: the photo starts hidden and fades in on
     hover. Everything that positions it is above, outside this query. */
  .ab-who__photo {
    opacity: 0;
    transition: opacity 520ms var(--ease-wipe);
  }

  /* All three cards hold a level 400px here and only one is ever open, so the
     scrim can be shaped rather than flat: heaviest through the middle where
     the copy sits, lifting off above and below so the picture is never dimmed
     edge to edge. */
  .ab-who__photo::after {
    background: linear-gradient(180deg, rgba(19, 19, 19, 0.35) 0%, rgba(19, 19, 19, 0.88) 50%, rgba(19, 19, 19, 0.35) 100%);
  }

  .ab-who__cards > article:hover .ab-who__photo,
  .ab-who__cards > article.is-open .ab-who__photo { opacity: 1; }

  /* The icon marks the closed state, so it leaves as the card opens — same as
     the pathway cards. */
  .ab-who__icon { transition: opacity 260ms linear; }

  .ab-who__cards > article:hover .ab-who__icon,
  .ab-who__cards > article.is-open .ab-who__icon { opacity: 0; }

  /* Rest state: Heritage open. Same construction as the home Pathway grid —
     see the long note there. Heritage is the first card and the one the
     section's argument starts from. */
  .ab-who__cards { grid-template-columns: 1.45fr 1fr 1fr; }

  .ab-who__cards:not(:has(> article:hover)):not(:has(> article.is-open)) .ab-who__card--heritage .ab-who__photo {
    opacity: 1;
  }

  .ab-who__cards:not(:has(> article:hover)):not(:has(> article.is-open)) .ab-who__card--heritage .ab-who__icon {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   The Kinetiq Standard: 7 Pillars — node 10006:1372
   -------------------------------------------------------------------------- */

.ab-pillars .ab-stage-1280 {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.ab-pillars__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-off-white);
}

.ab-pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 36px);
  margin-top: clamp(48px, 7vw, 96px);
}

.pillar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.pillar__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 3.6vw, 3rem);
  line-height: 1;
  color: #444444;
}

.pillar__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-card);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-off-white);
}

.pillar__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   RPO — node 10006:1425
   A cream panel: everything inside is dark ink on --c-line-bright.
   -------------------------------------------------------------------------- */

.ab-rpo {
  margin-top: 0;
  background-color: var(--c-line-bright);
}

.ab-rpo .ab-stage-1244 {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.ab-rpo__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(48px, 6vw, 72px);
}

.ab-rpo__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.ab-rpo__tag {
  align-self: flex-start;
  padding: 4px 16px;
  background-color: var(--c-accent-ink-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  line-height: 1.4;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-line-bright);
}

.ab-rpo__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-accent-ink-2);
}

.ab-rpo__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ab-rpo__body p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  color: var(--c-accent-ink-2);
}

.ab-rpo__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin-top: 8px;
}

.ab-rpo__fact {
  padding: 16px;
  border: 2px solid var(--c-accent-ink-2);
}

.ab-rpo__fact-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.1;
  color: var(--c-accent-ink-2);
}

.ab-rpo__fact-sub {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(0.8125rem, 1.1vw, 1rem);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--c-accent-ink-2);
}

.ab-rpo__video {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ab-rpo__video-frame {
  padding: 4px;
  background-color: var(--c-accent-ink-2);
}

.ab-rpo__video-inner {
  position: relative;
  width: 100%;
}

.ab-rpo__video-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

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

.ab-rpo__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ab-rpo__play span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 8vw, 80px);
  height: clamp(56px, 8vw, 80px);
  background-color: var(--c-line-bright);
}

.ab-rpo__caption {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label);
  line-height: 1.6;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  text-align: center;
  color: var(--c-accent-ink-2);
}

/* --------------------------------------------------------------------------
   Our Coaching Approach — node 10006:1456
   -------------------------------------------------------------------------- */

.ab-coaching__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 6vw, 64px);
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.ab-coaching__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.ab-coaching__title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-off-white);
}

.ab-coaching__rule {
  width: 96px;
  height: 4px;
  background-color: var(--c-line-bright);
}

.ab-coaching__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(24px, 3.5vw, 48px);
  width: 100%;
}

.coach-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: clamp(24px, 3vw, 33px);
  border: 1px solid #444444;
}

.coach-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background-color: #2a2a2a;
}

.coach-card__title {
  width: 100%;
  padding-top: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-card);
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-off-white);
}

.coach-card__text {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  text-align: center;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   Footer CTAs — node 10006:1486
   -------------------------------------------------------------------------- */

.ab-ctas {
  background-color: #1c1b1b;
  border-top: 1px solid #444444;
  padding: var(--space-section) 0;
}

.ab-ctas__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 5vw, 48px);
}

.ab-ctas__title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-off-white);
}

.ab-ctas__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.ab-ctas__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

.ab-ctas__btn--solid {
  padding: 20px 40px;
  background-color: var(--c-line-bright);
  color: var(--c-accent-ink-2);
  --btn-fill: #ffffff;
}

.ab-ctas__btn--outline {
  padding: 22px 42px;
  border: 2px solid var(--c-line-bright);
  color: var(--c-line-bright);
  --btn-fill: var(--c-line-bright);
}

.ab-ctas__btn--outline:hover { color: var(--c-accent-ink-2); }

.ab-ctas__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  line-height: 1.4;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-off-white);
}

.ab-ctas__link img {
  flex: none;
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   About Us — responsive re-flow
   ========================================================================== */

/* ---- Tablet ---- */
@media (max-width: 1023px) {
  .ab-philosophy .ab-stage-1152 { grid-template-columns: minmax(0, 1fr); }

  /* The badge overhangs the figure; with the figure now full-width it would
     hang past the gutter. */
  .ab-philosophy__badge { right: 0; }

  .ab-who__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-who__card--heritage { grid-column: 1 / -1; min-height: 0; }

  .ab-pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ab-rpo__inner { grid-template-columns: minmax(0, 1fr); }

  .ab-coaching__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* ---- Phone ---- */
@media (max-width: 767px) {
  .ab-coaching__cards { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599px) {
  .ab-who__cards { grid-template-columns: minmax(0, 1fr); }
  .ab-who__card--focus,
  .ab-who__card--intensity { min-height: 0; padding-top: 40px; padding-bottom: 40px; }

  .ab-pillars__grid { grid-template-columns: minmax(0, 1fr); }

  .ab-rpo__facts { grid-template-columns: minmax(0, 1fr); }

  .ab-philosophy__badge {
    position: static;
    align-self: flex-start;
    margin-top: 16px;
    min-width: 0;
  }

  .ab-philosophy__figure { display: flex; flex-direction: column; }

  .ab-ctas__row { flex-direction: column; align-items: stretch; }
  .ab-ctas__btn { width: 100%; padding-left: 16px; padding-right: 16px; }
}

/* --------------------------------------------------------------------------
   Footer offset on this page
   -------------------------------------------------------------------------- */

.ab-footer { margin-top: 0; }