/*
  Admin Bookkeeping: homepage.
  Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.

  Composed from the luxury-dark motif's structural craft (type scale, whitespace
  rhythm, hairline detail, scroll-coupled motion) re-themed to this firm's own
  navy and orange. Not the motif's palette: a bookkeeper is precise and trusted,
  not luxurious, so the register is deep navy and paper white with one accent.

  The through-line is the ledger. Hairline rules, tabular figures, columns that
  align, numbers that sit on a baseline grid. "Order out of chaos" is their own
  line and it drives the design.
*/

:root {
  --navy:        #072b5f;
  --navy-deep:   #04203f;
  --navy-ink:    #0b1d33;
  --paper:       #ffffff;
  --paper-2:     #f4f6f9;
  --paper-3:     #eaeef4;
  --accent:      #ff7d21;   /* action: buttons, phone, the close */
  --accent-ink:  #d9600c;
  --cyan:        #05a1c7;   /* structure: rules, ticks, figures. Bob's colour */
  --cyan-ink:    #047b98;
  --cyan-soft:   rgba(5, 161, 199, .16);
  --text:        #1b2530;
  --text-soft:   #46515e;
  --on-navy:     #eaf0f8;
  --on-navy-soft: rgba(234, 240, 248, .72);
  --line:        rgba(7, 43, 95, .14);
  --line-navy:   rgba(255, 255, 255, .16);

  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sans:    "Open Sans", "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease:    cubic-bezier(.22, .61, .36, 1);
  --maxw:    1180px;
  --maxw-n:  760px;
}

/* ---- foundation ----------------------------------------------------------- */

.abk { color: var(--text); font-family: var(--sans); background: var(--paper); }
.abk *, .abk *::before, .abk *::after { box-sizing: border-box; }
.abk img { max-width: 100%; height: auto; display: block; }

.abk-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.abk-wrap--narrow { max-width: var(--maxw-n); }

.abk-section { padding: clamp(72px, 11vw, 132px) 0; position: relative; }
.abk-section--navy { background: var(--navy); color: var(--on-navy); }
.abk-section--tint { background: var(--paper-2); }

/* the eyebrow: a hairline, then small caps. Lifted from the motif, re-themed. */
.abk-eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font: 600 .74rem/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan-ink);
  margin: 0 0 1.1rem;
}
.abk-section--navy .abk-eyebrow,
.abk-hero .abk-eyebrow { color: var(--cyan); }
.abk-eyebrow::before {
  content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55;
}
.abk-eyebrow--center { justify-content: center; }

.abk-display {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
.abk-display--xl { font-size: clamp(2.4rem, 5.4vw, 4.1rem); }
.abk-h3 {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.25; letter-spacing: -.012em; font-weight: 650;
  margin: 0;
}
.abk-lead {
  font-size: clamp(1.06rem, 1.5vw, 1.25rem);
  line-height: 1.65; color: var(--text-soft);
  margin: 1.4rem 0 0; max-width: 62ch;
}
.abk-section--navy .abk-lead,
.abk-hero .abk-lead { color: #dce6f3; }
.abk-body { font-size: 1rem; line-height: 1.72; color: var(--text-soft); margin: 1rem 0 0; }
.abk-section--navy .abk-body,
.abk-hero .abk-body { color: #cfdcec; }

/* buttons: solid accent, and a ghost that inverts */
.abk-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 1.9rem;
  font: 650 .95rem/1 var(--sans);
  letter-spacing: .01em;
  border-radius: 4px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.abk-btn--solid { background: var(--accent); color: #fff; }
.abk-btn--solid:hover { background: var(--accent-ink); transform: translateY(-2px); }
.abk-btn--ghost { border-color: var(--line-navy); color: var(--on-navy); }
.abk-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.abk-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* figures are tabular everywhere: this is a bookkeeper */
.abk-fig { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

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

.abk-hero {
  position: relative;
  background: var(--navy);
  color: var(--on-navy);
  padding: clamp(96px, 15vw, 168px) 0 clamp(72px, 10vw, 116px);
  overflow: hidden;
}
/* a faint ledger grid, the quietest possible nod to ruled paper */
.abk-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(5, 161, 199, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 161, 199, .5) 1px, transparent 1px);
  background-size: 100% 68px, 68px 100%;
  opacity: .5;
  mask-image: radial-gradient(120% 90% at 82% 12%, #000 12%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 82% 12%, #000 12%, transparent 72%);
  pointer-events: none;
}
.abk-hero > * { position: relative; z-index: 1; }
.abk-hero__grid {
  display: grid; gap: clamp(2.4rem, 5vw, 4.4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .abk-hero__grid { grid-template-columns: 1.35fr .78fr; } }

.abk-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.abk-hero__phone {
  display: inline-flex; align-items: baseline; gap: .6rem;
  margin-top: 2rem; color: var(--on-navy); text-decoration: none;
  font-family: var(--mono); font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  letter-spacing: -.02em;
}
.abk-hero__phone span { font: 600 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.abk-hero__phone:hover { color: var(--accent); }

/* portrait sits in a frame with an offset accent rule */
.abk-portrait { position: relative; }
.abk-portrait img {
  border-radius: 6px; box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
  width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; object-position: center 22%;
}
.abk-portrait::after {
  content: ""; position: absolute; left: -14px; bottom: -14px;
  width: 46%; height: 3px; background: var(--cyan);
}
.abk-portrait figcaption {
  margin-top: 1rem; font-size: .86rem; color: var(--on-navy-soft);
}

/* the certification sitting with the man it belongs to. Small, on paper tiles
   so light artwork reads on the navy, and both open the full certificate. */
.abk-hero__certs {
  display: flex; align-items: center; gap: .7rem;
  margin-top: 1.3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line-navy);
}
.abk-hero__certs a {
  display: grid; place-items: center;
  background: #fff; border-radius: 4px;
  padding: .35rem .5rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.abk-hero__certs a:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, .3); }
.abk-hero__certs a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.abk-hero__certs img { height: 46px; width: auto; }
.abk-hero__certs span {
  display: grid; line-height: 1.3; margin-left: .2rem;
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan);
}
.abk-hero__certs span b { color: #fff; font-weight: 650; letter-spacing: .05em; }
@media (max-width: 520px) {
  .abk-hero__certs { flex-wrap: wrap; }
  .abk-hero__certs span { flex-basis: 100%; margin-left: 0; }
}

/* ---- proof strip: the figures ---------------------------------------------- */

.abk-proof { background: var(--navy-deep); color: var(--on-navy); padding: 0; }
.abk-proof__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--line-navy);
}
@media (max-width: 640px) { .abk-proof__grid { grid-template-columns: 1fr; } }
.abk-proof__cell {
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.2rem, 3vw, 2.4rem);
  border-right: 1px solid var(--line-navy);
  border-bottom: 1px solid var(--line-navy);
}
.abk-proof__n {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1;
  letter-spacing: -.04em; color: #fff; margin: 0;
}
.abk-proof__l {
  margin: .7rem 0 0; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan);
}

/* ---- services -------------------------------------------------------------- */

.abk-cards { display: grid; gap: 1.4rem; grid-template-columns: 1fr; margin-top: 3rem; align-items: stretch; }
.abk-card { display: flex; flex-direction: column; }
@media (min-width: 780px) { .abk-cards { grid-template-columns: repeat(3, 1fr); } }
.abk-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.abk-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 0; height: 3px;
  background: var(--cyan); border-radius: 8px 0 0 0;
  transition: width .5s var(--ease);
}
@media (hover: hover) {
  .abk-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(7, 43, 95, .13); border-color: transparent; }
  .abk-card:hover::before { width: 100%; }
}
.abk-card__n {
  font-family: var(--mono); font-size: .8rem; color: var(--cyan-ink);
  letter-spacing: .1em; display: block; margin-bottom: .9rem;
}
.abk-card .abk-body { margin-top: .8rem; }

/* ---- editorial split (about / MTD) ----------------------------------------- */

.abk-split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) {
  .abk-split { grid-template-columns: 1fr 1fr; }
  .abk-split--reverse > :first-child { order: 2; }
}
.abk-certs { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.abk-certs a {
  display: block; border: 1px solid var(--line); border-radius: 6px;
  padding: .7rem; background: #fff;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.abk-certs a:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(7, 43, 95, .14); }
.abk-certs img { width: auto; max-height: 92px; }

/* checklist, in the ledger register: a rule per line and a tick in the accent */
.abk-list { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.abk-list li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: .8rem;
  padding: .82rem 0; border-bottom: 1px solid var(--line);
  line-height: 1.6; color: var(--text-soft);
}
.abk-section--navy .abk-list li,
.abk-hero .abk-list li { border-color: var(--line-navy); color: #cfdcec; }
.abk-list li::before {
  content: "✓"; color: var(--cyan); font-weight: 700; line-height: 1.6;
}

/* ---- testimonials ---------------------------------------------------------- */

.abk-quote { max-width: 46rem; margin: 0 auto; text-align: center; }
.abk-quote__mark {
  font-family: var(--display); font-size: 4rem; line-height: .8;
  color: var(--cyan); opacity: .7; display: block; margin-bottom: .6rem;
}
.abk-quote blockquote {
  margin: 0; font-size: clamp(1.08rem, 1.9vw, 1.42rem); line-height: 1.62;
  color: var(--text); font-weight: 400;
}
.abk-section--navy .abk-quote blockquote { color: var(--on-navy); }
.abk-quote__who {
  margin-top: 1.6rem; display: flex; align-items: center; justify-content: center;
  gap: .9rem; flex-wrap: wrap;
}
.abk-quote__who img { max-height: 46px; width: auto; }
.abk-quote__who cite {
  font-style: normal; font-size: .92rem; color: var(--text-soft);
}
.abk-section--navy .abk-quote__who cite { color: var(--on-navy-soft); }
.abk-quote__who b { display: block; color: var(--text); font-weight: 650; }
.abk-section--navy .abk-quote__who b { color: #fff; }

/* ---- closing call ---------------------------------------------------------- */

.abk-call { text-align: center; }
.abk-call__num {
  display: inline-block; margin-top: 1.4rem;
  font-family: var(--mono); font-size: clamp(1.9rem, 5.4vw, 3.2rem);
  letter-spacing: -.03em; color: #fff; text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.abk-call__num:hover { color: var(--accent); border-color: var(--accent); }

/* ---- motion hooks ---------------------------------------------------------- */
/* Hidden states live under .abk-motion, which JavaScript adds. No JS means no
   class, which means nothing is ever hidden.                                   */

.abk-motion .abk-rise { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s var(--ease); }
.abk-motion .abk-rise.is-in { opacity: 1; transform: none; }
.abk-motion .abk-rise[data-d="1"] { transition-delay: .08s; }
.abk-motion .abk-rise[data-d="2"] { transition-delay: .16s; }
.abk-motion .abk-rise[data-d="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .abk-motion .abk-rise { opacity: 1 !important; transform: none !important; transition: none; }
  .abk-card, .abk-btn, .abk-certs a, .abk-call__num { transition: none; }
  .abk-hero::before { display: none; }
}

/* ---- section boundaries: graduations, not a rule ---------------------------
   A plain horizontal line between sections is the default every template
   reaches for. This firm measures things, so the boundary is a ruler: fine
   ticks at a regular interval with a taller mark every fifth, drawn in the
   structural cyan. It reads as precision at a glance and as a deliberate
   detail up close.                                                            */

.abk-section + .abk-section::before,
.abk-proof + .abk-section::before,
.abk-section--tint + .abk-section::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(var(--maxw), calc(100% - 56px));
  height: 13px;
  background-image:
    repeating-linear-gradient(90deg, var(--cyan) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(90deg, var(--cyan) 0 1px, transparent 1px 75px);
  background-size: 100% 5px, 100% 12px;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x, repeat-x;
  opacity: .38;
  pointer-events: none;
}
/* on navy the graduations are struck in the same cyan but need more presence */
.abk-section--navy::before { opacity: .55; }
/* the closing call is the end of the document: it gets the accent, ruled off
   the way the intro rules off */
.abk-section--navy[data-abk="cta"]::before {
  background-image:
    repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 75px);
  opacity: .5;
}

@media (max-width: 640px) {
  .abk-section + .abk-section::before,
  .abk-proof + .abk-section::before { height: 9px; background-size: 100% 4px, 100% 9px; }
}

/* ---- masthead -------------------------------------------------------------- */

.abk-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.abk-head__inner {
  display: flex; align-items: center; gap: 1.6rem;
  padding-top: .8rem; padding-bottom: .8rem;
}
.abk-head__logo img { height: 42px; width: auto; }
.abk-head__nav { display: flex; gap: 1.5rem; margin-left: auto; }
.abk-head__inner > .abk-head__cert { margin-left: 0; }
.abk-head__nav a {
  color: var(--text); text-decoration: none;
  font-size: .93rem; font-weight: 550;
  padding: .3rem 0; position: relative;
}
.abk-head__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.abk-head__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
/* the certification, small, in the masthead. It is the one third-party proof
   this firm has, so it earns a place above the fold. Clicking opens the full
   certificate in the lightbox (vibed-lightbox.js binds image links). */
.abk-head__cert {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
  transition: opacity .3s var(--ease);
}
.abk-head__cert img {
  height: 34px; width: auto;
  transition: transform .35s var(--ease);
}
.abk-head__cert span {
  display: grid; line-height: 1.15;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft);
}
.abk-head__cert span b { color: var(--navy); font-weight: 650; letter-spacing: .06em; }
.abk-head__cert:hover img { transform: translateY(-2px) scale(1.04); }
.abk-head__cert:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 3px; }

/* below the nav breakpoint the masthead is logo + phone only: the badge would
   crowd the one thing that has to stay tappable */
@media (max-width: 900px) { .abk-head__cert { display: none; } }

.abk-head__tel {
  color: var(--navy); text-decoration: none; font-weight: 600;
  font-size: 1rem; letter-spacing: -.01em;
  padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 4px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.abk-head__tel:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (max-width: 780px) {
  .abk-head__nav { display: none; }
  /* the certification, small, in the masthead. It is the one third-party proof
   this firm has, so it earns a place above the fold. Clicking opens the full
   certificate in the lightbox (vibed-lightbox.js binds image links). */
.abk-head__cert {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
  transition: opacity .3s var(--ease);
}
.abk-head__cert img {
  height: 34px; width: auto;
  transition: transform .35s var(--ease);
}
.abk-head__cert span {
  display: grid; line-height: 1.15;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft);
}
.abk-head__cert span b { color: var(--navy); font-weight: 650; letter-spacing: .06em; }
.abk-head__cert:hover img { transform: translateY(-2px) scale(1.04); }
.abk-head__cert:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 3px; }

/* below the nav breakpoint the masthead is logo + phone only: the badge would
   crowd the one thing that has to stay tappable */
@media (max-width: 900px) { .abk-head__cert { display: none; } }

.abk-head__tel { margin-left: auto; }
}

.abk-center { text-align: center; }
.abk-mtd .abk-split { align-items: center; }
.abk-mtd__action { display: flex; justify-content: flex-start; }
@media (min-width: 880px) { .abk-mtd__action { justify-content: flex-end; } }

/* ---- the pinned reconciliation ---------------------------------------------
   Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.

   The one section that holds the viewport while its own sequence plays. Three
   rules govern it:

   1. FAIL-SAFE. Everything below is scoped under .is-live, a class abk-pin.js
      adds to the section. No JavaScript, a script error, or reduced motion
      means no class, so this whole block never applies and the section renders
      as the ordinary three-card grid it is underneath. Copy is never at the
      mercy of a script.
   2. It only pins where there is room. The graphic needs width to read and the
      stage needs height to hold a promise without clipping it, so below
      900x660 the section stays a plain grid. A cramped pin is worse than none.
   3. The canvas is the full stage, sitting behind the words, and is masked out
      on the left with the page's own white. Loose paper drifts in from beyond
      the frame and dissolves rather than being cut off at a box edge, and
      nothing ever passes behind text to spoil its contrast.                  */

.abk-pin { padding: clamp(72px, 11vw, 132px) 0; }
.abk-pin__steps { display: none; }
.abk-pin__figure { display: none; }

@media (min-width: 900px) and (min-height: 660px) {
  .abk-motion .abk-pin.is-live { padding: 0; }
  .abk-motion .abk-pin.is-live .abk-pin__track { height: 320vh; }

  /* the masthead is sticky, so the stage starts underneath it */
  .abk-motion .abk-pin.is-live .abk-pin__stage {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    padding-top: var(--abk-head-h, 0px);
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .abk-motion .abk-pin.is-live .abk-pin__figure {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .abk-motion .abk-pin.is-live .abk-pin__canvas { display: block; width: 100%; height: 100%; }
  /* the left third of the frame is page, not graphic */
  .abk-motion .abk-pin.is-live .abk-pin__figure::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
      var(--paper) 0 32%,
      rgba(255, 255, 255, .86) 46%,
      rgba(255, 255, 255, 0) 60%);
  }

  .abk-motion .abk-pin.is-live .abk-pin__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 52%);
    align-items: center;
    width: 100%;
  }

  /* the step marks: 01 02 03, the live one ruled out in the accent */
  .abk-motion .abk-pin.is-live .abk-pin__steps {
    display: flex; gap: 1.5rem;
    list-style: none; margin: 1.7rem 0 0; padding: 0;
  }
  .abk-motion .abk-pin.is-live .abk-pin__steps li {
    display: flex; align-items: center; gap: .55rem;
    font: 600 .74rem/1 var(--mono);
    letter-spacing: .12em;
    color: rgba(7, 43, 95, .34);
    transition: color .5s var(--ease);
  }
  .abk-motion .abk-pin.is-live .abk-pin__steps li::after {
    content: ""; width: 20px; height: 2px;
    background: var(--line);
    transition: width .55s var(--ease), background-color .55s var(--ease);
  }
  .abk-motion .abk-pin.is-live .abk-pin__steps li.is-on { color: var(--accent-ink); }
  .abk-motion .abk-pin.is-live .abk-pin__steps li.is-on::after { width: 52px; background: var(--accent); }

  /* the three promises share one grid cell and cross-fade, so the column is as
     tall as the longest of them and never jumps between steps */
  .abk-motion .abk-pin.is-live .abk-pin__cards {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 1.6rem;
    /* the cell stays as tall as the longest promise so the column never jumps
       between steps, but each card is only as tall as its own words */
    align-items: start;
  }
  .abk-motion .abk-pin.is-live .abk-pin__card {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  /* .abk-rise sets opacity too; the pin owns these cards, so it has to win */
  .abk-motion .abk-pin.is-live .abk-pin__card.is-lit {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .abk-motion .abk-pin.is-live .abk-pin__card::before { width: 0; }
  .abk-motion .abk-pin.is-live .abk-pin__card.is-lit::before { width: 100%; }
}

/* anyone who asks for less motion gets the plain section, at any size */
@media (prefers-reduced-motion: reduce) {
  .abk-motion .abk-pin.is-live { padding: clamp(72px, 11vw, 132px) 0; }
  .abk-motion .abk-pin.is-live .abk-pin__track { height: auto; }
  .abk-motion .abk-pin.is-live .abk-pin__stage { position: static; height: auto; display: block; padding-top: 0; }
  .abk-motion .abk-pin.is-live .abk-pin__figure,
  .abk-motion .abk-pin.is-live .abk-pin__steps { display: none; }
  .abk-motion .abk-pin.is-live .abk-pin__grid { grid-template-columns: 1fr; }
  .abk-motion .abk-pin.is-live .abk-pin__cards { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
  .abk-motion .abk-pin.is-live .abk-pin__card {
    grid-area: auto; opacity: 1; transform: none; pointer-events: auto; transition: none;
  }
}