/* ==========================================================================
   About page — Figma BfXzfapKtNusKXflQn976p, frame 2569:6786
   Uses tokens.css + base.css. Prefix: .ab-*
   Premium tune 2026-10-15: gradient bands + glows, hairlines, graded photos, glass cards,
   no new copy. No new colours (tokens + alpha only).
   Band headings carry a copy-free 32px yellow rule (no label text). Breakpoints as site-v2:
   Architect stacks at <=1068; What + Mission stack at <=900 (What 901-1200: photo beside the cards, never under them).
   FAQ accordion base styles live in base.css; only About-specific spacing below.
   ========================================================================== */

/* ---- Page recipes: palette colours at alpha only (navy-900, navy-800, blue-700, blue-800, primary,
        yellow-400, white). Defined once here so the rules below stay token-only. ---- */
main {
  --ab-glow-band-light: radial-gradient(70% 45% at 50% 0%, rgba(35, 136, 255, 0.05) 0%, rgba(35, 136, 255, 0) 100%);
  --ab-shade-frame: linear-gradient(180deg, rgba(2, 6, 21, 0.55) 0%, rgba(2, 6, 21, 0) 36%, rgba(2, 6, 21, 0) 80%, rgba(2, 6, 21, 0.35) 100%);
  /* backlight behind Shay's portrait so the dark jacket separates from the navy band */
  --ab-glow-rim: radial-gradient(24% 44% at 76% 36%, rgba(35, 136, 255, 0.24) 0%, rgba(35, 136, 255, 0) 100%);
  --ab-glow-rim-low: radial-gradient(46% 24% at 50% 84%, rgba(35, 136, 255, 0.22) 0%, rgba(35, 136, 255, 0) 100%);
  /* the payoff line gets a warm glass so it reads as the conclusion of the band */
  --ab-glass-warm: linear-gradient(120deg, rgba(255, 193, 14, 0.16) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.03) 100%);
  --ab-line-warm: rgba(255, 193, 14, 0.32);
  --ab-overlay-cta-phone: linear-gradient(180deg, rgba(2, 6, 21, 0.9) 0%, rgba(2, 6, 21, 0.72) 55%, rgba(2, 6, 21, 0.88) 100%);
  --ab-blend-mission: linear-gradient(90deg, rgba(2, 6, 21, 0.1) 0%, rgba(2, 6, 21, 0.35) 42%, rgba(18, 48, 109, 0.78) 62%, rgba(18, 48, 109, 0.92) 100%),
                      linear-gradient(180deg, rgba(2, 6, 21, 0) 70%, rgba(2, 6, 21, 0.35) 100%);
}

/* ---- Page wrapper: tokens: container-max + gutter ---- */
.ab-wrap {
  width: 100%;
  margin-inline: auto;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  padding-inline: var(--gutter);
}
.ab-section { position: relative; padding-block: var(--section-pad-y); }
.ab-section .display-lg, .ab-what .display-lg, .ab-mission .display-lg { text-wrap: balance; }
.ab-section--grey { background: var(--gradient-light); }
.ab-section--white { background: var(--ab-glow-band-light), var(--color-white); }   /* never a flat fill */
/* hairline between two light bands */
.ab-faq, .ab-cta { border-top: 1px solid var(--hairline-light); }
/* FAQ and CTA are both light: share one seam instead of two full paddings (256px of air -> 160) */
.ab-faq { padding-bottom: calc(var(--section-pad-y) * 0.625); }
.ab-cta { padding-top: calc(var(--section-pad-y) * 0.625); }

/* copy-free eyebrow: a 24px yellow rule (same as .kicker) above every band H2 (CTA title excluded) */
.ab-section h2.display-lg, .ab-what h2, .ab-mission h2 { position: relative; padding-top: var(--space-5); }
.ab-section h2.display-lg::before, .ab-what h2::before, .ab-mission h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: var(--space-5); height: 2px; border-radius: 2px; background: var(--color-yellow-400);
}

/* band headings: 2–3 lines max on desktop */
.ab-architect .display-lg { max-width: var(--measure-head); }
.ab-who h2 { max-width: calc(var(--measure-head) * 1.5); }   /* 2 lines at 1440, not one 1180px line */

/* ---- 1. Hero ---- */
.ab-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  background: var(--gradient-hero-flat);
  color: var(--color-white);
}
.ab-hero > .ab-wrap { width: 100%; }
.ab-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 47%;
  opacity: .92;
}
/* navy-to-blue grade over the photo + a soft primary glow behind the title; bottom hairline drawn above the photo */
.ab-hero::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 -1px 0 var(--hairline-dark);   /* background = shared --overlay-hero (polish.css) */
}
.ab-hero__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-head-intro);
  text-align: center;
}
.ab-hero__title { max-width: var(--measure-head); text-wrap: balance; }
.ab-hero__text {
  max-width: var(--measure-intro);
  text-wrap: pretty;   /* size + colour = shared hero subtitle (polish.css) */
}

/* ---- 2. Architect ---- */
.ab-architect__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8);
  margin-top: var(--gap-intro-content); align-items: start;
}
.ab-architect__media { display: flex; flex-direction: column; gap: var(--space-4); }
.ab-architect__frame {
  position: relative; overflow: hidden;
  width: 100%;
  aspect-ratio: 829 / 553;
}
.ab-architect__frame img { position: absolute; max-width: none; }
.ab-architect__bg1 {
  left: 30.16%; top: -7.78%; width: 127.74%; height: 107.78%; object-fit: cover;
}
.ab-architect__bg2,
.ab-architect__shay { position: absolute; overflow: hidden; }
.ab-architect__bg2 { left: -23.16%; top: 0; width: 77.32%; height: 117.18%; }
.ab-architect__bg2 img { left: 0; top: 0; width: 179.72%; height: 100%; }
.ab-architect__shade {
  position: absolute; left: -5.43%; top: -23.15%; width: 109.41%; height: 134.54%;
  background: var(--gradient-media-shade);
}
.ab-architect__shay { left: -23.04%; top: 3.07%; width: 144.75%; height: 124.59%; }
.ab-architect__shay img { left: 0; top: -16.18%; width: 100.05%; height: 116.18%; }
/* top shade + hairline ring keep the composite calm inside the rounded frame */
.ab-architect__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: var(--ab-shade-frame);
  box-shadow: inset 0 0 0 1px var(--hairline-dark);
}
.ab-dots { display: none; }   /* decorative dots with no slider behind them */
.ab-architect__text {
  display: flex; flex-direction: column; gap: var(--space-5);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted);
}
.ab-architect__text p { text-wrap: pretty; }
/* awards card (the AIBF quote): white card, hairline, rest shadow, medal badge + yellow edge = a credential, not a callout */
.ab-architect__quote {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-5); align-items: center;
  margin-top: var(--space-3);
  padding: var(--card-pad);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  box-shadow: var(--shadow-card-soft);
}
.ab-architect__quote::before {
  content: ""; position: absolute; left: -1px; top: var(--space-6); bottom: var(--space-6); width: 3px;
  border-radius: 0 2px 2px 0; background: var(--color-yellow-400);
}
.ab-awards__icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: var(--icon); height: var(--icon); border-radius: var(--radius-pill);
  background: var(--color-yellow-400); color: var(--color-blue-700);
  box-shadow: var(--shadow-btn-yellow);
}
.ab-awards__icon svg { width: 22px; height: 22px; }
.ab-architect__quote p { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; color: var(--color-blue-700); text-wrap: pretty; }

/* ---- 3. What is Future State ---- */
.ab-what {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  padding-block: var(--section-pad-y);
  background: var(--ab-glow-rim), var(--gradient-dark-glow); color: var(--color-white);
  border-top: 1px solid var(--hairline-dark);
  border-bottom: 1px solid var(--hairline-dark);
}
.ab-what::before {
  content: ""; position: absolute; inset: 0;
  background: var(--glow-yellow), var(--glow-blue-corner);
  opacity: .7;
}
.ab-what__photo {
  position: absolute; z-index: 2; pointer-events: none;
  top: 0; bottom: 0; right: 0; left: auto;
  width: auto; height: 100%; max-width: 50%;
  object-fit: cover; object-position: 50% 0;
}
.ab-what__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
}
.ab-what__lead { margin-top: var(--gap-head-intro); max-width: var(--measure-statement); text-wrap: balance; line-height: var(--lh-display); }
.ab-glass {
  max-width: min(1077px, calc(50% - var(--space-6))); width: 100%;   /* desktop: never runs under the photo */
  background: var(--gradient-card-glass); border-color: var(--glass-line);
  box-shadow: var(--shadow-rest);
}
.ab-what__card {
  margin-top: var(--gap-intro-content);
  display: flex; flex-direction: column; gap: var(--space-4);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-on-dark-muted);
}
.ab-what__card p { max-width: var(--measure-body); text-wrap: pretty; }
.ab-what__objective {
  margin-top: var(--grid-gap); display: flex; align-items: center;
  background: var(--ab-glass-warm); border-color: var(--ab-line-warm);
}
.ab-what__objective-inner {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-1) 0 var(--space-1) var(--space-5); border-left: 3px solid var(--color-yellow-400);
}
.ab-what__objective .display-sm { max-width: var(--measure-statement); line-height: var(--lh-display); text-wrap: balance; }
.ab-what .ab-what__label { margin-bottom: 0; color: var(--color-on-dark-muted); }

/* ---- 4. Who it's for ---- */
.ab-who__intro { display: flex; flex-direction: column; }
/* lead + text share one measure so the stack has one right edge */
.ab-who__body { max-width: var(--measure-intro); font-size: var(--fs-lead); }
.ab-who__lead { margin-top: var(--space-5); text-wrap: pretty; max-width: var(--measure-statement); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--color-blue-700); }
.ab-who__text { margin-top: var(--space-4); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-text-muted); text-wrap: pretty; }
.ab-who__subtitle { margin-top: var(--space-8); line-height: var(--lh-display); }
.ab-signs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--space-5); counter-reset: sign; }
.ab-sign {
  position: relative; counter-increment: sign;
  display: flex; flex-direction: column; gap: var(--space-3);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text);
  background: var(--color-white); border: 1px solid var(--color-hairline);
  box-shadow: var(--shadow-card-soft);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.ab-sign:hover { box-shadow: var(--shadow-rest); border-color: var(--hairline-light-strong); }   /* not a link: deepen, no lift */
/* index 01-12 top-right: gives the 12 tiles an order */
.ab-sign::after {
  content: counter(sign, decimal-leading-zero);
  position: absolute; top: var(--card-pad-sm); right: var(--card-pad-sm);
  font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label); line-height: 1;
  letter-spacing: var(--ls-kicker); color: var(--color-brand-faint);
}
.ab-sign__icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: var(--icon); height: var(--icon); border-radius: var(--radius-md); background: var(--color-yellow-400);
}
.ab-sign p { text-wrap: pretty; }

.ab-who__close {
  margin-top: var(--space-8);
  max-width: var(--measure-statement); line-height: var(--lh-display); text-wrap: balance;
}
.ab-who__close::before {
  content: ""; display: block; width: var(--space-6); height: 2px; border-radius: 2px;
  background: var(--color-yellow-400); margin-bottom: var(--space-5);
}

/* ---- 5. Mission ---- */
.ab-mission {
  position: relative; overflow: hidden;
  container-type: inline-size;
  background: var(--gradient-band-blue); color: var(--color-white);
}
.ab-mission__photo {
  position: absolute;
  left: -28.02cqw;           /* -537.94 / 1920 */
  top: -12.19cqw;            /* -234.02 / 1920 */
  width: 147.55cqw;          /* 2832.88 / 1920 */
  max-width: none; height: auto;
  min-height: calc(100% + 12.19cqw); object-fit: cover; object-position: 50% 0; /* cover band, no blue strip */
}
/* blend the studio photo into the blue band on the right + glow behind the text */
.ab-mission::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--glow-primary-soft), var(--ab-blend-mission);
}
.ab-mission__inner {
  position: relative; z-index: 1;
  display: flex; justify-content: flex-end; align-items: center;
  padding-block: var(--section-pad-y);
}
.ab-mission__content {
  width: 50%;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding-left: var(--space-7);
}
.ab-mission .display-sm { line-height: var(--lh-display); max-width: var(--measure-statement); }
.ab-mission__text { max-width: var(--measure-intro); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-on-dark-muted); }

/* ---- 6. How Future State helps ---- */
.ab-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--gap-intro-content); }
.ab-service {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.ab-service h3 { line-height: var(--lh-display); margin-top: var(--space-2); }
.ab-service p { font-size: var(--fs-body); line-height: var(--lh-body); }
/* number: same Roboto 600 19px as site-v2, set in a hairline circle */
.ab-service__num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--btn-h-sm); height: var(--btn-h-sm); border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--fs-tagline); line-height: 1;
}
/* blue + white cards both carry a real 1px border, so text lines up across a row and the line survives hover.
   The two looks are custom-property sets so they can be swapped by position (2-col and 1-col keep a checkerboard / alternation). */
.ab-service { background: var(--svc-bg); border: 1px solid var(--svc-line); box-shadow: var(--svc-shadow); color: var(--svc-ink); }
.ab-service__num { color: var(--svc-num-ink); background: var(--svc-num-bg); box-shadow: inset 0 0 0 1px var(--svc-num-ring); }
.ab-service p { color: var(--svc-text); }
.ab-service--blue {
  --svc-bg: var(--glow-primary-soft), var(--gradient-band-blue-flat); --svc-line: var(--hairline-dark); --svc-shadow: none; --svc-ink: var(--color-on-dark);
  --svc-num-ink: var(--color-yellow-400); --svc-num-bg: var(--glass-bg); --svc-num-ring: var(--hairline-dark-strong); --svc-text: var(--color-on-dark-muted);
}
.ab-service--white {
  --svc-bg: var(--color-white); --svc-line: var(--color-hairline); --svc-shadow: var(--shadow-card-soft); --svc-ink: var(--color-blue-700);
  --svc-num-ink: var(--color-blue-700); --svc-num-bg: var(--tint-brand); --svc-num-ring: var(--hairline-light-strong); --svc-text: var(--color-text-muted);
}
.ab-service:hover { box-shadow: var(--shadow-lift); }

/* ---- 7. FAQ: shared .faq component (base.css); band depth = same as Home/Contact ---- */
.ab-faq { background: radial-gradient(60% 70% at 0% 0%, rgba(35, 136, 255, 0.06) 0%, rgba(35, 136, 255, 0) 70%), var(--gradient-light); }

/* ---- 8. CTA + About ---- */
.ab-cta__card {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.ab-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* overlay + hairline ring sit above the photo, so the ring is visible */
.ab-cta__card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background: var(--glow-primary-soft), var(--overlay-photo-side), var(--overlay-photo-bottom);
  box-shadow: inset 0 0 0 1px var(--hairline-dark);
}
.ab-cta__content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-head-intro);
  max-width: calc(var(--measure-intro) + 2 * var(--space-7)); padding: var(--panel-pad) var(--space-7);
}
.ab-cta__title { max-width: var(--measure-head); text-wrap: balance; font-size: var(--fs-display-lg); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.ab-cta__text { max-width: var(--measure-intro); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-on-dark-muted); text-wrap: pretty; }
.ab-cta__btn { margin-top: var(--space-5); }
.ab-cta__logo { position: absolute; z-index: 2; right: var(--space-8); bottom: var(--space-8); opacity: .92; }
/* label + paragraph on the FAQ grid (340px label column) so the block spans the container */
.ab-cta__about {
  margin-top: var(--space-8); padding-top: var(--space-7);
  border-top: 1px solid var(--hairline-light);
  display: grid; grid-template-columns: 340px minmax(0, 1fr); column-gap: var(--space-9); align-items: start;
}
.ab-cta__label { margin-bottom: 0; margin-top: var(--space-1); }
.ab-cta__about p { max-width: var(--measure-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1280px) {
  .ab-signs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
  .ab-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 2 columns: checkerboard by position (the 3-col classes would put two blue cards side by side) */
  .ab-service:nth-child(4n+2), .ab-service:nth-child(4n+3) {
    --svc-bg: var(--color-white); --svc-line: var(--color-hairline); --svc-shadow: var(--shadow-card-soft); --svc-ink: var(--color-blue-700);
    --svc-num-ink: var(--color-blue-700); --svc-num-bg: var(--tint-brand); --svc-num-ring: var(--hairline-light-strong); --svc-text: var(--color-text-muted);
  }
  .ab-service:nth-child(4n+1), .ab-service:nth-child(4n) {
    --svc-bg: var(--glow-primary-soft), var(--gradient-band-blue-flat); --svc-line: var(--hairline-dark); --svc-shadow: none; --svc-ink: var(--color-on-dark);
    --svc-num-ink: var(--color-yellow-400); --svc-num-bg: var(--glass-bg); --svc-num-ring: var(--hairline-dark-strong); --svc-text: var(--color-on-dark-muted);
  }
  /* What: portrait stays beside the cards (never under the blurred glass) */
  .ab-what__photo { max-width: 42%; z-index: 2; opacity: 1; object-position: 62% 0; }
  .ab-glass { max-width: calc(58% - var(--space-6)); }
}

@media (min-width: 1069px) {
  /* the portrait stays in view while the long bio scrolls beside it */
  .ab-architect__media { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

@media (max-width: 1068px) {
  .ab-architect__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .ab-architect__text > p { max-width: var(--measure-body); }   /* readable line length once the column is full width */
  /* CTA card: text over the brightest faces needs the deep overlay and a shorter line */
  .ab-cta__text { max-width: var(--measure-statement); }
  .ab-cta__card::before { background: var(--glow-primary-soft), var(--overlay-photo-deep); }
  .ab-cta__bg { object-position: 80% 50%; }
  .ab-cta__content { max-width: calc(var(--measure-statement) + 2 * var(--space-7)); }   /* keep the text left of the brightest faces */
}

@media (max-width: 900px) {
  .ab-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* What: card runs full width, portrait moves below and fades in from the top */
  .ab-what { flex-direction: column; align-items: stretch; padding-bottom: 0; background: var(--ab-glow-rim-low), var(--gradient-dark-glow); }
  .ab-what__photo {
    position: relative; display: block; top: auto; bottom: auto; right: auto; left: auto;
    width: 100%; height: auto; max-width: none; max-height: var(--split-img-max-h);
    object-fit: contain; object-position: 50% 100%;
    margin: calc(-1 * var(--space-5)) 0 0; order: 2; z-index: 0; opacity: 1;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 32%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 32%);
  }
  .ab-glass { max-width: none; }
  .ab-what__objective { position: relative; z-index: 1; }
  /* Mission: photo on top, text below */
  .ab-mission { display: flex; flex-direction: column; }
  .ab-mission__photo {
    position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 0;
    aspect-ratio: 4 / 3; object-fit: cover; object-position: 22% 30%;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 100%);
  }
  .ab-mission::after { background: var(--glow-primary-soft); }
  .ab-mission__inner { justify-content: flex-start; padding-top: var(--space-6); }
  .ab-mission__content { width: 100%; padding-left: 0; }
  .ab-cta__about { grid-template-columns: 1fr; row-gap: var(--space-3); }
  .ab-cta__content { padding: var(--space-7) var(--space-6) 120px; }
  .ab-cta__logo { right: var(--space-6); bottom: var(--space-6); }
}

@media (max-width: 768px) {
  .ab-what__objective-inner { padding-left: var(--space-4); }
}

@media (max-width: 734px) {
  .ab-architect__grid { gap: var(--space-6); }
  .ab-architect__quote { padding: var(--card-pad-sm); column-gap: var(--space-4); }
  .ab-architect__quote::before { top: var(--space-5); bottom: var(--space-5); }
  /* What: square crop so head + shoulders fill the width (was a small contained figure) */
  .ab-what__photo { aspect-ratio: 1 / 1; max-height: none; object-fit: cover; object-position: 50% 0; }
  /* CTA: calmer navy over the faces, photo pushed right */
  .ab-cta__bg { object-position: 72% 100%; }
  .ab-cta__card::before { background: var(--glow-primary-soft), var(--ab-overlay-cta-phone); }
  .ab-what__card { margin-top: var(--gap-intro-content); }
  .ab-who__lead { font-size: calc(var(--fs-display-sm) * 0.875); }   /* 21px: 4 lines, not 5 */
  .ab-who__subtitle { margin-top: var(--space-7); }
  .ab-who__close { margin-top: var(--space-7); }
  .ab-services { grid-template-columns: 1fr; }
  /* 1 column: alternate by position */
  .ab-service:nth-child(odd) {
    --svc-bg: var(--glow-primary-soft), var(--gradient-band-blue-flat); --svc-line: var(--hairline-dark); --svc-shadow: none; --svc-ink: var(--color-on-dark);
    --svc-num-ink: var(--color-yellow-400); --svc-num-bg: var(--glass-bg); --svc-num-ring: var(--hairline-dark-strong); --svc-text: var(--color-on-dark-muted);
  }
  .ab-service:nth-child(even) {
    --svc-bg: var(--color-white); --svc-line: var(--color-hairline); --svc-shadow: var(--shadow-card-soft); --svc-ink: var(--color-blue-700);
    --svc-num-ink: var(--color-blue-700); --svc-num-bg: var(--tint-brand); --svc-num-ring: var(--hairline-light-strong); --svc-text: var(--color-text-muted);
  }
  .ab-cta__text { font-size: var(--fs-body); line-height: var(--lh-body); }
  .ab-cta__about { margin-top: var(--space-7); padding-top: var(--space-6); }
}

@media (max-width: 560px) {
  /* the 12 signs read as one checklist: one white card, hairline rows, index on the right */
  .ab-signs {
    grid-template-columns: 1fr; gap: 0;
    background: var(--color-white); border: 1px solid var(--color-hairline); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-card-soft);
  }
  .ab-sign {
    flex-direction: row; align-items: center; gap: var(--space-4);
    padding: var(--space-3) calc(var(--space-4) + 28px) var(--space-3) var(--space-4);
    border: 0; border-radius: 0; box-shadow: none;
  }
  .ab-sign + .ab-sign { border-top: 1px solid var(--color-hairline); }
  .ab-sign:hover { box-shadow: none; }
  .ab-sign::after { top: 50%; right: var(--space-4); transform: translateY(-50%); }
  .ab-cta__content { padding: var(--space-6) var(--space-4) 110px; }   /* 16px sides: CTA text 4 lines at 390 */
  .ab-cta__logo { width: 170px; right: var(--space-4); bottom: var(--space-5); }
}

/* ---- Reduced motion: no lifts ---- */
@media (prefers-reduced-motion: reduce) {
  .ab-sign:hover, .ab-service:hover { transform: none; }
}