/* ============================================================
   ABOUT PAGE — Scoped styles
   ────────────────────────────────────────────────────────
   Every rule here is prefixed `ab-` and only loaded on /about.
   Colors, spacing and motion come from the tokens in app.css —
   nothing is hardcoded that already exists as a token.

   Dark mode piggybacks on body.dark-theme, same as the rest of
   the site. All decorative motion is disabled under
   prefers-reduced-motion at the bottom of this file.
============================================================ */


/* ============================================================
   1. HERO
============================================================ */
.ab-hero{
  position:relative;
  background:var(--color-dark);
  padding:calc(var(--space-16) + 100px) 0 var(--space-20);
  overflow:hidden;
}
.ab-hero__orb{
  position:absolute;border-radius:50%;filter:blur(120px);
  opacity:.20;pointer-events:none;
  animation:abFloat 18s var(--ease) infinite alternate;
}
.ab-hero__orb--1{width:620px;height:620px;background:var(--color-primary);top:-240px;left:-180px}
.ab-hero__orb--2{width:520px;height:520px;background:var(--color-accent);bottom:-240px;right:-120px;animation-delay:-6s}
.ab-hero__orb--3{width:380px;height:380px;background:var(--palette-indigo);top:30%;right:28%;opacity:.10;animation-delay:-12s}
.ab-hero__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:60px 60px;
  /* Fade the grid out towards the edges so it reads as depth, not wallpaper. */
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%);
}
.ab-hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:var(--space-16);align-items:center;
}
.ab-hero__breadcrumb{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-sm);color:rgba(255,255,255,.45);margin-bottom:var(--space-6);
}
.ab-hero__breadcrumb a{color:rgba(255,255,255,.45);transition:color var(--duration) var(--ease)}
.ab-hero__breadcrumb a:hover{color:var(--color-accent)}
.ab-hero__breadcrumb svg{opacity:.4}

.ab-hero__eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);
  background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.22);
  color:var(--color-accent);border-radius:var(--radius-full);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-widest);text-transform:uppercase;
  margin-bottom:var(--space-6);
}
.ab-hero__dot{
  width:7px;height:7px;border-radius:50%;background:var(--color-accent);
  box-shadow:0 0 0 0 rgba(34,197,94,.7);
  animation:abPulse 2.4s var(--ease) infinite;
}
.ab-hero__title{
  font-family:var(--font-heading);font-size:var(--fs-5xl);font-weight:var(--fw-extrabold);
  line-height:1.08;letter-spacing:var(--ls-tight);color:#fff;margin-bottom:var(--space-6);
}
.ab-hero__accent{
  background:linear-gradient(120deg,var(--brand-accent),var(--brand-accent-light) 45%,var(--palette-teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;
  animation:abShimmer 6s linear infinite;
}
.ab-hero__lead{
  font-size:var(--fs-md);line-height:var(--lh-loose);
  color:rgba(255,255,255,.62);margin-bottom:var(--space-8);max-width:56ch;
}
.ab-hero__actions{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-10)}
.ab-hero__pills{display:flex;gap:var(--space-3);flex-wrap:wrap}
.ab-pill{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-full);
  font-size:var(--fs-xs);font-weight:var(--fw-medium);color:rgba(255,255,255,.75);
  transition:transform var(--duration) var(--ease),border-color var(--duration) var(--ease),background var(--duration) var(--ease);
}
.ab-pill:hover{transform:translateY(-2px);border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.ab-pill svg{color:var(--color-accent);flex:0 0 auto}


/* ============================================================
   2. HERO VISUAL — The company record
   ────────────────────────────────────────────────────────
   Absoft's own profile, laid out the way a CRM lays out an
   account — because that is what we build. The tiles pop in
   on a stagger, then a highlight walks tile to tile so one
   credential is always lit.

   Every value here is a fact about the company, not a claim
   about the work — the numbers live in the impact bar below.
============================================================ */
.ab-record__wrap{display:flex;align-items:center;justify-content:center;position:relative}
.ab-record{
  position:relative;width:100%;max-width:500px;
  background:linear-gradient(160deg,rgba(17,24,44,.92),rgba(9,13,26,.88));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 80px rgba(0,0,0,.50),0 0 70px rgba(34,197,94,.07);
  overflow:hidden;
}
/* Corner light so the card reads as a raised surface, not a flat box. */
.ab-record::before{
  content:'';position:absolute;top:-90px;right:-90px;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,197,94,.18),transparent 68%);
  pointer-events:none;
}

/* ── Header: logo, legal name, verified stamp ──────────── */
.ab-record__head{
  position:relative;
  display:flex;align-items:center;gap:var(--space-3);
  padding-bottom:var(--space-5);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ab-record__avatar{
  width:52px;height:52px;flex:0 0 auto;padding:9px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;
}
.ab-record__avatar img{width:100%;height:auto;display:block}
.ab-record__name{
  font-family:var(--font-heading);font-size:var(--fs-base);font-weight:var(--fw-bold);
  color:#fff;line-height:1.25;
}
.ab-record__meta{font-size:var(--fs-2xs);color:rgba(255,255,255,.45);margin-top:3px}

/* ── Credential tiles ──────────────────────────────────── */
.ab-record__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-3);
  padding:var(--space-5) 0 var(--space-2);
}
.ab-tile{
  position:relative;overflow:hidden;
  padding:var(--space-4);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  animation:abTileIn .55s var(--ease-spring) both;
  animation-delay:calc(.35s + var(--i) * .09s);
  transition:transform var(--duration) var(--ease),
             background var(--duration) var(--ease),
             border-color var(--duration) var(--ease);
}
.ab-tile:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.06);
  border-color:rgba(34,197,94,.32);
}
/* Highlight that walks tile to tile, so one credential is always lit.
   Offset by --i on a shared loop — see abTileGlow. */
.ab-tile::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 18% 0%,rgba(34,197,94,.18),transparent 72%);
  box-shadow:inset 0 0 0 1px rgba(34,197,94,.38);
  opacity:0;
  animation:abTileGlow 8.4s var(--ease) infinite;
  animation-delay:calc(1.6s + var(--i) * 1.1s);
}
.ab-tile__icon{
  width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(34,197,94,.12);color:var(--color-accent);
  margin-bottom:var(--space-3);
}
.ab-tile__val{
  display:block;
  font-family:var(--font-heading);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  color:#fff;line-height:1.25;
}
/* Numerals and tier words carry the accent so the eye lands on them first. */
.ab-tile__val em{font-style:normal;color:var(--color-accent)}
.ab-tile__label{
  display:block;margin-top:4px;
  font-size:var(--fs-2xs);letter-spacing:var(--ls-wide);
  color:rgba(255,255,255,.45);line-height:1.35;
}

/* ── Footer: the one outcome figure ────────────────────── */
.ab-record__foot{
  display:flex;align-items:center;gap:var(--space-4);
  margin-top:var(--space-3);padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,.08);
  animation:abRecordIn .6s var(--ease-spring) 1.1s both;
}
.ab-record__foot-num{
  font-family:var(--font-heading);font-size:var(--fs-3xl);font-weight:var(--fw-extrabold);
  line-height:var(--lh-none);flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-light));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ab-record__foot-body{flex:1;min-width:0}
.ab-record__foot-label{
  display:block;font-size:var(--fs-xs);color:rgba(255,255,255,.55);
  line-height:1.4;margin-bottom:var(--space-2);
}
.ab-record__bar{
  height:6px;border-radius:var(--radius-full);
  background:rgba(255,255,255,.07);overflow:hidden;
}
.ab-record__bar-fill{
  display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--brand-primary),var(--brand-accent));
  box-shadow:0 0 12px rgba(34,197,94,.5);
  animation:abBarGrow 1.5s var(--ease-out) 1.35s both;
}


/* ============================================================
   3. STORY — Who we are
============================================================ */
.ab-story__inner{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-16);align-items:center;
}
.ab-story__text{
  font-size:var(--fs-base);line-height:var(--lh-loose);
  color:var(--color-text);margin-bottom:var(--space-5);
}
.ab-story__text strong{color:var(--color-heading);font-weight:var(--fw-semibold)}
.ab-story__actions{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-8)}

.ab-idcard{
  position:relative;
  background:var(--card-bg,var(--color-white));
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-xl);
  padding:var(--space-8);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.ab-idcard::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(34,197,94,.06),transparent 55%);
}
.ab-idcard__head{
  display:flex;align-items:center;gap:var(--space-3);
  padding-bottom:var(--space-5);margin-bottom:var(--space-5);
  border-bottom:1px solid var(--color-border);
  position:relative;
}
.ab-idcard__badge{
  width:40px;height:40px;flex:0 0 auto;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--color-primary-light);color:var(--color-primary);
}
.ab-idcard__title{
  font-family:var(--font-heading);font-size:var(--fs-lg);font-weight:var(--fw-bold);
  color:var(--color-heading);margin:0;
}
.ab-idcard__sub{font-size:var(--fs-xs);color:var(--color-gray);margin-top:2px}
.ab-idcard__list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-4);position:relative}
.ab-idcard__item{
  display:flex;gap:var(--space-3);align-items:flex-start;
  font-size:var(--fs-sm);line-height:var(--lh-snug);color:var(--color-text);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.revealed .ab-idcard__item{opacity:1;transform:none}
.revealed .ab-idcard__item:nth-child(1){transition-delay:.10s}
.revealed .ab-idcard__item:nth-child(2){transition-delay:.18s}
.revealed .ab-idcard__item:nth-child(3){transition-delay:.26s}
.revealed .ab-idcard__item:nth-child(4){transition-delay:.34s}
.revealed .ab-idcard__item:nth-child(5){transition-delay:.42s}
.revealed .ab-idcard__item:nth-child(6){transition-delay:.50s}
.revealed .ab-idcard__item:nth-child(7){transition-delay:.58s}
.ab-idcard__check{
  width:20px;height:20px;flex:0 0 auto;border-radius:50%;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-success-light);color:var(--color-success);
}
.dark-theme .ab-idcard__check{background:rgba(34,197,94,.14);color:var(--color-accent)}
.dark-theme .ab-idcard__badge{background:rgba(34,197,94,.12);color:var(--color-accent)}


/* ============================================================
   4. JOURNEY — Scroll-driven delivery timeline
============================================================ */
/* Tinted band used to separate consecutive light sections. */
.ab-band{background:var(--color-gray-light);overflow:hidden}
/* Marker size and the gap to the cards drive everything else here — the
   rail, the step indent and the marker offset are all derived from them,
   so the line always runs dead through the centre of the circles. */
.ab-timeline{
  --marker:42px;   /* circle diameter                  */
  --gap:28px;      /* space between circle and card    */
  --rail:2px;      /* rail thickness                   */
  --marker-top:2px;/* circle offset from its step's top */
  position:relative;max-width:920px;
  margin:var(--space-16) auto 0;
  padding-left:calc(var(--marker) + var(--gap));
}
/* The rail track and the green fill that follows the scroll position.
   Starts at the first circle's centre rather than the very top, so there
   is no orphaned stub of line above step one. */
.ab-timeline__rail{
  position:absolute;
  left:calc(var(--marker) / 2 - var(--rail) / 2);
  top:calc(var(--marker-top) + var(--marker) / 2);
  bottom:6px;width:var(--rail);
  background:var(--color-border-strong);border-radius:var(--rail);
}
.ab-timeline__fill{
  position:absolute;left:0;top:0;width:100%;height:var(--ab-fill,0%);
  background:linear-gradient(180deg,var(--brand-accent),var(--brand-primary));
  border-radius:2px;
  box-shadow:0 0 14px rgba(34,197,94,.45);
  transition:height .15s linear;
}
.ab-step{position:relative;padding:0 0 var(--space-12)}
.ab-step:last-child{padding-bottom:0}
/* Pulled back out of the timeline's padding so the circle sits on the rail. */
.ab-step__marker{
  position:absolute;
  left:calc(-1 * (var(--marker) + var(--gap)));
  top:var(--marker-top);
  width:var(--marker);height:var(--marker);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  background:var(--color-white);color:var(--color-gray);
  border:2px solid var(--color-border-strong);
  transition:all var(--duration-slow) var(--ease-spring);
  z-index:2;
}
.ab-step.is-active .ab-step__marker{
  background:var(--brand-primary);color:#fff;border-color:var(--brand-accent);
  transform:scale(1.08);
  box-shadow:0 0 0 6px rgba(34,197,94,.14),var(--shadow-primary);
}
.ab-step__card{
  background:var(--card-bg,var(--color-white));
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-8);
  box-shadow:var(--shadow-sm);
  transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease),border-color var(--duration) var(--ease);
}
.ab-step.is-active .ab-step__card{
  border-color:rgba(34,197,94,.28);
  box-shadow:var(--shadow-lg);
  transform:translateX(4px);
}
.ab-step__eyebrow{
  display:block;font-size:var(--fs-2xs);letter-spacing:var(--ls-widest);
  text-transform:uppercase;color:var(--color-primary);
  font-weight:var(--fw-bold);margin-bottom:var(--space-2);
}
.dark-theme .ab-step__eyebrow{color:var(--color-accent)}
.ab-step__title{
  font-family:var(--font-heading);font-size:var(--fs-xl);font-weight:var(--fw-bold);
  color:var(--color-heading);margin:0 0 var(--space-3);
}
.ab-step__text{font-size:var(--fs-sm);line-height:var(--lh-loose);color:var(--color-text);margin:0}
.ab-step__tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.ab-step__tag{
  font-size:var(--fs-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);
  padding:5px 11px;border-radius:var(--radius-full);
  background:var(--color-primary-light);color:var(--color-primary-dark);
}
.dark-theme .ab-step__tag{background:rgba(34,197,94,.10);color:var(--color-accent)}
.dark-theme .ab-step__marker{background:#0f1424;color:rgba(255,255,255,.45)}


/* ============================================================
   5. VALUES — Cursor-tracked spotlight cards
============================================================ */
.ab-values__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);
  margin-top:var(--space-16);
}
.ab-value{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--card-bg,var(--color-white));
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-6);
  transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease),border-color var(--duration) var(--ease);
}
/* Radial highlight that follows the cursor — coordinates set in about.js. */
.ab-value::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(34,197,94,.13),transparent 62%);
  transition:opacity var(--duration) var(--ease);
}
.ab-value:hover::before{opacity:1}
.ab-value:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl);border-color:rgba(34,197,94,.30)}
.ab-value__icon{
  width:52px;height:52px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--space-5);
  transition:transform var(--duration) var(--ease-bounce);
}
.ab-value:hover .ab-value__icon{transform:scale(1.08) rotate(-5deg)}
.ab-value__num{
  position:absolute;top:var(--space-5);right:var(--space-6);
  font-family:var(--font-heading);font-size:var(--fs-2xl);font-weight:var(--fw-extrabold);
  color:var(--color-heading);opacity:.06;line-height:1;
}
.ab-value__title{
  font-family:var(--font-heading);font-size:var(--fs-lg);font-weight:var(--fw-bold);
  color:var(--color-heading);margin:0 0 var(--space-3);
}
.ab-value__text{font-size:var(--fs-sm);line-height:var(--lh-loose);color:var(--color-text);margin:0}


/* ============================================================
   6. EXPERTISE — Capability cards + stack marquee
   ────────────────────────────────────────────────────────
   The cards are the fixed, linkable list of what we build.
   The marquee below is atmosphere — never the only place a
   capability appears, since it scrolls out of view.
============================================================ */
.ab-caps__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);
  margin-top:var(--space-14);
  /* Must clear the 40px [data-reveal] offset: until a card reveals it paints
     40px below its layout box, and with the marquee butted up underneath the
     bottom row lands on top of the scrolling pills. */
  margin-bottom:var(--space-14);
}
.ab-cap{
  display:flex;flex-direction:column;
  padding:var(--space-5);
  background:var(--card-bg,var(--color-white));
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  transition:transform var(--duration) var(--ease),
             box-shadow var(--duration) var(--ease),
             border-color var(--duration) var(--ease);
}
.ab-cap:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(34,197,94,.30);
}
.ab-cap__icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-primary-light);color:var(--color-primary);
  margin-bottom:var(--space-4);
  transition:transform var(--duration) var(--ease-bounce);
}
.ab-cap:hover .ab-cap__icon{transform:scale(1.09) rotate(-5deg)}
.dark-theme .ab-cap__icon{background:rgba(34,197,94,.12);color:var(--color-accent)}
.ab-cap__title{
  font-family:var(--font-heading);font-size:var(--fs-base);font-weight:var(--fw-bold);
  color:var(--color-heading);margin:0 0 var(--space-2);line-height:1.3;
}
.ab-cap__text{
  font-size:var(--fs-xs);line-height:var(--lh-normal);
  color:var(--color-gray);margin:0 0 var(--space-4);
}
/* Pinned to the card foot so the arrows line up across a ragged row. */
.ab-cap__link{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  color:var(--color-primary);
}
.dark-theme .ab-cap__link{color:var(--color-accent)}
.ab-cap__link svg{transition:transform var(--duration) var(--ease)}
.ab-cap:hover .ab-cap__link svg{transform:translateX(4px)}

/* ============================================================
   7. CERTIFICATIONS / CREDENTIALS
============================================================ */
.ab-creds{background:var(--color-dark);position:relative;overflow:hidden}
.ab-creds__glow{
  position:absolute;width:700px;height:700px;border-radius:50%;
  background:var(--color-primary);filter:blur(140px);opacity:.14;
  top:-300px;left:50%;transform:translateX(-50%);pointer-events:none;
}
.ab-creds__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);
  margin-top:var(--space-14);
}
.ab-cred{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-lg);
  padding:var(--space-8);
  transition:transform var(--duration) var(--ease),border-color var(--duration) var(--ease),background var(--duration) var(--ease);
}
/* Diagonal sheen that sweeps across on hover. */
.ab-cred::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent);
  transition:left .8s var(--ease);
  pointer-events:none;
}
.ab-cred:hover::after{left:130%}
.ab-cred:hover{transform:translateY(-6px);border-color:rgba(34,197,94,.30);background:rgba(255,255,255,.06)}
.ab-cred__icon{
  width:56px;height:56px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:rgba(34,197,94,.10);color:var(--color-accent);
  margin-bottom:var(--space-5);
}
.ab-cred__eyebrow{
  display:block;font-size:var(--fs-2xs);letter-spacing:var(--ls-widest);
  text-transform:uppercase;color:var(--color-accent);
  font-weight:var(--fw-bold);margin-bottom:var(--space-2);
}
.ab-cred__title{
  font-family:var(--font-heading);font-size:var(--fs-lg);font-weight:var(--fw-bold);
  color:#fff;margin:0 0 var(--space-3);
}
.ab-cred__text{font-size:var(--fs-sm);line-height:var(--lh-loose);color:rgba(255,255,255,.55);margin:0}


/* ============================================================
   8. FOOTPRINT — Reach stats
============================================================ */
.ab-reach__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);
  margin-top:var(--space-14);
}
.ab-reach__card{
  text-align:center;padding:var(--space-8) var(--space-6);
  background:var(--card-bg,var(--color-white));
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease);
}
.ab-reach__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.ab-reach__num{
  font-family:var(--font-heading);font-size:var(--fs-4xl);font-weight:var(--fw-extrabold);
  line-height:var(--lh-none);margin-bottom:var(--space-3);
  background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ab-reach__label{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--color-heading);margin-bottom:var(--space-1)}
.ab-reach__sub{font-size:var(--fs-xs);color:var(--color-gray)}


/* ============================================================
   9. KEYFRAMES
============================================================ */

/* ── Hero company record ───────────────────── */
@keyframes abRecordIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes abTileIn{
  from{opacity:0;transform:translateY(14px) scale(.96)}
  to{opacity:1;transform:none}
}
/* One tile lit at a time; --i offsets each onto its own slot in the loop. */
@keyframes abTileGlow{
  0%,3%{opacity:0}
  7%{opacity:1}
  17%{opacity:0}
  100%{opacity:0}
}
@keyframes abBarGrow{
  from{width:0}
  to{width:var(--target,68%)}
}
@keyframes abShimmer{from{background-position:0% 50%}to{background-position:200% 50%}}
@keyframes abFloat{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(24px,-32px,0) scale(1.08)}
}
@keyframes abPulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}


/* ============================================================
   10. RESPONSIVE
============================================================ */
@media (max-width:1100px){
  .ab-hero__inner{gap:var(--space-10)}
  .ab-values__grid{grid-template-columns:repeat(2,1fr)}
  .ab-caps__grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:991px){
  .ab-hero{padding-top:calc(var(--space-12) + 100px)}
  .ab-hero__inner{grid-template-columns:1fr;gap:var(--space-14)}
  .ab-hero__lead{max-width:none}
  .ab-record{max-width:560px}
  .ab-story__inner{grid-template-columns:1fr;gap:var(--space-10)}
  .ab-caps__grid{grid-template-columns:repeat(2,1fr)}
  .ab-creds__grid{grid-template-columns:1fr}
  .ab-reach__grid{grid-template-columns:1fr}
}

@media (max-width:768px){
  .ab-hero__title{font-size:var(--fs-3xl)}
  .ab-record{padding:var(--space-5)}
  /* Rail, indent and offset all follow from these two — nothing else to move. */
  .ab-timeline{--marker:34px;--gap:16px}
  .ab-step{padding-bottom:var(--space-10)}
  .ab-step__marker{font-size:var(--fs-xs)}
  .ab-step__card{padding:var(--space-5) var(--space-6)}
}

@media (max-width:576px){
  .ab-values__grid{grid-template-columns:1fr}
  .ab-caps__grid{grid-template-columns:1fr}
  .ab-hero__actions .btn{width:100%}
  /* Two tile columns get too narrow for the values below this width. */
  .ab-record__grid{grid-template-columns:1fr}
}


/* ============================================================
   11. REDUCED MOTION
   Decorative motion off. The record is shown fully populated
   rather than waiting on an animation that never runs.
============================================================ */
@media (prefers-reduced-motion:reduce){
  .ab-hero__orb,
  .ab-hero__dot,
  .ab-hero__accent,
  .ab-tile::after{
    animation:none !important;
  }
  .ab-hero__accent{background-position:0 50%}
  .ab-tile,
  .ab-record__foot{animation:none !important;opacity:1;transform:none}
  .ab-record__bar-fill{animation:none !important;width:var(--target,68%)}
  .ab-idcard__item{opacity:1;transform:none;transition:none}
  .ab-timeline__fill{transition:none}
  .ab-cred::after{display:none}
}