/* ============================================================================
   About Us page (AboutUs.cshtml). Global an-ab- prefixed classes, loaded via
   the page's @section Styles. Section rhythm: dark hero / paper story / white
   values / paper partnership / white community / dark leadership / red CTA.
   ============================================================================ */

/* ---- Hero: THE STATEMENT (Craig's styleframe pick, the site's only light
   hero). Paper, oversized ink type, vector STL ridgeline above the stats. -- */
.an-ab-hero {
  position: relative;
  background: var(--an-paper);
  padding: 168px 24px 0;
  overflow: hidden;
}
/* The anthem 4x seal, hero top right (768+). Full-strength red, stamp-in. */
.an-ab-hero .an-ab-hero__seal { display: none; }
.an-ab-hero__seal circle { stroke: var(--an-red); }
.an-ab-hero__seal-ring {
  font-family: var(--an-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--an-red);
}
.an-ab-hero__seal-x {
  font-weight: 800;
  font-size: 26px;
  fill: var(--an-red);
}
@keyframes an-ab-stamp {
  from { opacity: 0; transform: scale(1.45) rotate(-2deg); }
  60%  { opacity: 1; transform: scale(0.97) rotate(-13deg); }
  to   { opacity: 1; transform: scale(1) rotate(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .an-ab-hero .an-ab-hero__seal { animation: none !important; opacity: 1; transform: rotate(-12deg); }
}
.an-ab-hero__inner {
  position: relative;
  max-width: 1300px;
  margin-inline: auto;
}
.an-ab-hero__h1 {
  font-weight: 800;
  font-size: 38px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--an-ink);
  max-width: 1000px;
}
/* The red payoff clause holds together and drops to its own line. */
.an-ab-hero__h1 em { display: inline-block; }
.an-ab-hero__sub {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--an-gray-3);
  max-width: 720px;
}
/* The St. Louis skyline as a drafted ridgeline; the red peak is the Arch. */
.an-ab-hero__ridge-zone {
  position: relative;
  height: 84px;
  margin-top: 8px;
}
.an-ab-hero__ridge {
  position: absolute;
  right: 0;
  bottom: 6px;
  width: 100%;
  height: 72px;
}
.an-ab-hero__stats {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 36px 0 44px;
  border-top: 1px solid var(--an-border-2);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.an-ab-hero__n {
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--an-ink);
}
.an-ab-hero__n span { color: var(--an-red); }
.an-ab-hero__l {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--an-gray-5);
}

/* ---- Our company (white story; the light hero above owns the paper) --------- */
.an-ab-story { background: var(--an-white); border-top: 1px solid var(--an-border); padding: 88px 24px; }
.an-ab-story__grid {
  max-width: 1300px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.an-ab-story__h2 {
  font-weight: 800;
  font-size: 32px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--an-ink);
}
.an-ab-story__h2 em { display: inline-block; }
.an-ab-story__copy p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--an-gray-3);
}
.an-ab-story__copy p + p { margin-top: 20px; }
/* The team photo, in the left column under the section title (round 3). */
.an-ab-story__photo {
  position: relative;
  margin: 32px 0 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--an-border);
}
.an-ab-story__photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 35%;
}
.an-ab-story__photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 20px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  font-weight: 800;
  font-size: 13px;
  color: #fff;
}
/* The three service lanes close the story section (round 1). */
.an-ab-story__lanes {
  max-width: 1300px;
  margin: 56px auto 0;
  padding-top: 40px;
  border-top: 1px solid var(--an-border-2);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.an-ab-lane {
  display: block;
  background: var(--an-paper);
  border: 1px solid var(--an-border);
  border-radius: 20px;
  padding: 28px;
  transition: border-color 0.3s var(--an-ease), transform 0.3s var(--an-ease), box-shadow 0.3s var(--an-ease);
}
.an-ab-lane:hover {
  border-color: rgba(167, 37, 44, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(20, 20, 20, 0.08);
}
.an-ab-lane__num {
  font-weight: 900;
  font-size: 13px;
  color: var(--an-red);
  margin-bottom: 12px;
}
.an-ab-lane__h3 {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--an-ink);
}
.an-ab-lane__p {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--an-gray-3);
}
.an-ab-lane__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--an-red);
}

/* ---- Core values: compact PRINCIPLES GRID (round 5; researched Stripe /
   Linear / SaaS values patterns: short copy, strong titles, density through
   columns). Chromeless cells, inline mono number, desc aligned under title. */
.an-ab-vals { background: var(--an-dark); padding: 88px 24px; }
.an-ab-vals__inner { max-width: 1300px; margin-inline: auto; }
.an-ab-vals__h2 {
  font-weight: 800;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 760px;
}
.an-ab-vals__h2 em { display: inline-block; }
.an-ab-vals__list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px 44px;
}
.an-ab-vals__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.an-ab-vals__num {
  font-family: var(--an-font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--an-red-light);
  flex: none;
}
.an-ab-vals__t {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #fff;
  transition: color 0.3s var(--an-ease);
}
.an-ab-vals__cell:hover .an-ab-vals__t { color: var(--an-red-light); }
.an-ab-vals__d {
  margin-top: 6px;
  padding-left: 24px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Microsoft partnership --------------------------------------------------- */
.an-ab-partner { background: var(--an-paper); padding: 88px 24px; }
.an-ab-partner__inner { max-width: 1300px; margin-inline: auto; }
.an-ab-partner__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.an-ab-partner__h2 {
  font-weight: 800;
  font-size: 30px;
  line-height: 1.07;
  letter-spacing: -0.03em;
  color: var(--an-ink);
  max-width: 620px;
}
/* Anthem-film credentials seal (RexQL Why-head treatment, paper palette). */
.an-ab-partner__seal { display: none; }
.an-ab-partner__seal circle { stroke: var(--an-red); }
.an-ab-partner__seal-ring {
  font-family: var(--an-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--an-red);
}
.an-ab-partner__seal-x {
  font-weight: 800;
  font-size: 26px;
  fill: var(--an-red);
}
.an-ab-partner__grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.an-ab-partner__p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--an-gray-3);
  max-width: 560px;
}
.an-ab-partner__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 700;
  color: var(--an-red);
  transition: color 0.3s var(--an-ease);
}
.an-ab-partner__link:hover { color: var(--an-red-deep); }
.an-ab-partner__h3 {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--an-ink);
}
.an-ab-partner__col p { margin-top: 16px; }
/* Round 1: the four designation badges on white plates, equal heights. */
.an-ab-partner__badges {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.an-ab-partner__badge {
  background: var(--an-white);
  border: 1px solid var(--an-border);
  border-radius: 16px;
  padding: 20px;
  height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The four badge arts mix near-square lockups (digital-app, data-ai) with
   wide ones (infrastructure, support); two height tiers balance the visual
   mass on uniform plates. */
.an-ab-partner__badge img {
  height: 84px;
  width: auto;
  max-width: 100%;
}
.an-ab-partner__badge.is-tall img { height: 118px; }

/* ---- Community involvement ---------------------------------------------------- */
.an-ab-comm { background: var(--an-white); padding: 88px 24px; }
.an-ab-comm__inner { max-width: 1300px; margin-inline: auto; }
.an-ab-comm__h2 {
  font-weight: 800;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--an-ink);
  max-width: 760px;
}
.an-ab-comm__h2 em { display: inline-block; }
.an-ab-comm__intro {
  margin-top: 20px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--an-gray-3);
  max-width: 640px;
}

/* CAS marquee, ALPINE CLEAN (the CAS brand's light theme, round 2): CAS
   surface + brand blue + navy + the mountain-ridge motif along the foot.
   Deliberately CAS-branded inside the AN page; type stays DM Sans. */
.an-ab-cas {
  position: relative;
  margin-top: 48px;
  background: #f7f8fa;  /* brand-gate:allow Cloud & AI Summit partner brand */
  border: 1px solid #e6e8ec;  /* brand-gate:allow Cloud & AI Summit partner brand */
  border-radius: 20px;
  padding: 36px 28px 96px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(14, 42, 74, 0.10);
}
.an-ab-cas__wash {
  position: absolute;
  top: -45%;
  right: -8%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 160, 232, 0.18), transparent 70%);
  pointer-events: none;
}
/* The CAS cloud mark: card-brand plate on the right at desktop, compact
   header mark on phones. Two-class selector (the .an-body img reset). */
.an-ab-cas .an-ab-cas__logo {
  position: relative;
  width: 88px;
  height: auto;
  margin-bottom: 18px;
}
.an-ab-cas__top {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #1E67C4;  /* brand-gate:allow Cloud & AI Summit partner brand */
}
.an-ab-cas__top span + span { color: #0E2A4A; }  /* brand-gate:allow Cloud & AI Summit partner brand */
.an-ab-cas__h3 {
  position: relative;
  margin-top: 20px;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #0E2A4A;  /* brand-gate:allow Cloud & AI Summit partner brand */
}
.an-ab-cas__h3 span {
  display: inline-block;
  margin-left: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: #8a8f98;  /* brand-gate:allow Cloud & AI Summit partner brand */
}
.an-ab-cas__p {
  position: relative;
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #4a4a4a;
  max-width: 760px;
}
.an-ab-cas__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 15px;
  font-weight: 700;
  color: #1E67C4;  /* brand-gate:allow Cloud & AI Summit partner brand */
  transition: color 0.3s var(--an-ease);
}
.an-ab-cas__link:hover { color: #0E2A4A; }  /* brand-gate:allow Cloud & AI Summit partner brand */
.an-ab-cas__ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* Two channel cards under the marquee. */
.an-ab-channels {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.an-ab-chan {
  background: var(--an-paper);
  border: 1px solid var(--an-border);
  border-radius: 20px;
  padding: 30px 28px;
}
.an-ab-chan__h3 {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--an-ink);
}
.an-ab-chan__p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--an-gray-3);
}
.an-ab-chan__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--an-red);
  transition: color 0.3s var(--an-ease);
}
.an-ab-chan__link:hover { color: var(--an-red-deep); }

/* Photo mosaic: ArchitectNow's own event photos, never stock. The wide
   tech-center stage shot takes the double slot (round 2; booth shot moved
   to the hero). */
.an-ab-strip {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.an-ab-strip__tile {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--an-border);
}
.an-ab-strip__tile img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.an-ab-strip__tile.is-wide { grid-column: span 2; }
.an-ab-strip__tile.is-wide img { aspect-ratio: 8 / 3; }

/* ---- Leadership -------------------------------------------------------------- */
.an-ab-lead {
  position: relative;
  background: var(--an-dark-3);
  padding: 88px 24px;
  overflow: hidden;
}
.an-ab-lead__glow {
  position: absolute;
  top: -96px;
  right: -96px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(167, 37, 44, 0.13);
  filter: blur(130px);
  pointer-events: none;
}
.an-ab-lead__grid {
  position: relative;
  max-width: 1300px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
.an-ab-lead__h2 {
  font-weight: 800;
  font-size: 32px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #fff;
}
.an-ab-lead__h2 em { display: inline-block; }
.an-ab-lead__p {
  margin-top: 20px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--an-gray-6);
  max-width: 520px;
}
.an-ab-lead__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}
.an-ab-lead__ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  transition: border-color 0.3s var(--an-ease);
}
.an-ab-lead__ghost:hover { border-color: #fff; }
.an-ab-lead__faces {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.an-ab-lead__face {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s var(--an-ease);
}
.an-ab-lead__face:hover { border-color: rgba(255, 255, 255, 0.4); }
/* Inner wrapper owns the image clip so the tooltip can escape the tile. */
.an-ab-lead__clip {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.an-ab-lead__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--an-ease);
}
.an-ab-lead__face:hover img { transform: scale(1.05); }

/* ---- Name/title tooltip -------------------------------------------------------
   Built from the anchor's data-name / data-title. Hidden until hover or
   keyboard focus; the caret is a rotated square under the bubble. */
.an-ab-lead__face::after,
.an-ab-lead__face::before {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s var(--an-ease), transform 0.2s var(--an-ease);
  z-index: 3;
}
.an-ab-lead__face::after {
  content: attr(data-name) "\A" attr(data-title);
  white-space: pre;
  text-align: center;
  padding: 8px 12px;
  min-width: max-content;
  max-width: 220px;
  background: #fff;
  color: var(--an-ink);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.an-ab-lead__face::before {
  content: "";
  bottom: calc(100% + 4px);
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 2px;
  transform: translate(-50%, 4px) rotate(45deg);
}
.an-ab-lead__face:hover::after,
.an-ab-lead__face:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.an-ab-lead__face:hover::before,
.an-ab-lead__face:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) rotate(45deg);
}

/* ---- CTA: red band (homepage an-cta treatment) --------------------------------
   Top fades from the dark leadership section above, bottom into the dark
   footer, so the band bridges instead of striping (Cloud-page blend fix). */
.an-ab-cta {
  position: relative;
  background: var(--an-red);
  padding: 88px 24px 72px;
  text-align: center;
  overflow: hidden;
}
.an-ab-cta__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(255, 255, 255, 0.12), transparent 70%);
}
.an-ab-cta__dark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(13, 13, 13, 0.55), transparent 30%, transparent 60%, var(--an-red-deep));
}
.an-ab-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin-inline: auto;
}
.an-ab-cta__h2 {
  font-weight: 800;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 20px;
}
.an-ab-cta__h2 em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.95);
  display: inline-block;
}
.an-ab-cta__p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  margin-bottom: 36px;
}
.an-ab-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--an-red);
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  transition: transform 0.3s var(--an-ease), box-shadow 0.3s var(--an-ease);
}
.an-ab-cta__btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
}

/* ---- Responsive --------------------------------------------------------------- */
@media (min-width: 768px) {
  .an-ab-hero__h1 { font-size: 50px; }
  .an-ab-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .an-ab-hero__n { font-size: 38px; }
  .an-ab-story__lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-ab-vals__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-ab-hero .an-ab-hero__seal {
    display: block;
    position: absolute;
    top: -72px;
    right: 8px;
    width: 116px;
    height: 116px;
    transform: rotate(-12deg);
    animation: an-ab-stamp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
  }
  .an-ab-cas { padding-right: 240px; }
  .an-ab-cas .an-ab-cas__logo {
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-56%);
    width: 168px;
    margin: 0;
  }
  .an-ab-partner__seal {
    display: block;
    flex: none;
    width: 116px;
    height: 116px;
    transform: rotate(-12deg);
    opacity: 0.92;
    margin-right: 12px;
  }
  .an-ab-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .an-ab-cas__h3 { font-size: 32px; }
  .an-ab-cta__h2 { font-size: 40px; }
}

@media (min-width: 1024px) {
  .an-ab-hero { padding: 176px 48px 0; }
  .an-ab-hero__h1 { font-size: 58px; max-width: 860px; }
  .an-ab-hero__sub { font-size: 18px; }
  .an-ab-hero .an-ab-hero__seal { width: 128px; height: 128px; }
  .an-ab-hero__ridge-zone { height: 122px; }
  .an-ab-hero__ridge { width: 74%; height: 110px; bottom: 10px; }
  .an-ab-hero__stats { padding: 40px 0 52px; gap: 32px; }
  .an-ab-hero__n { font-size: 42px; }
  .an-ab-story { padding: 104px 48px; }
  .an-ab-story__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }
  .an-ab-story__h2 { font-size: 42px; }
  .an-ab-story__copy { padding-top: 12px; }
  .an-ab-vals { padding: 96px 48px; }
  .an-ab-vals__h2 { font-size: 42px; }
  .an-ab-vals__list { margin-top: 52px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
  .an-ab-partner { padding: 104px 48px; }
  .an-ab-partner__h2 { font-size: 38px; }
  .an-ab-partner__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }
  .an-ab-partner__col { padding-top: 6px; }
  .an-ab-partner__badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .an-ab-comm { padding: 104px 48px; }
  .an-ab-comm__h2 { font-size: 46px; }
  .an-ab-cas { padding: 44px 300px 132px 56px; }
  .an-ab-cas .an-ab-cas__logo { right: 64px; width: 196px; }
  .an-ab-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-ab-lead { padding: 104px 48px; }
  .an-ab-lead__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }
  .an-ab-lead__h2 { font-size: 42px; }
  .an-ab-cta { padding: 88px 48px 72px; }
  .an-ab-cta__h2 { font-size: 42px; }
}

@media (min-width: 1280px) {
  /* Enough whitespace right of the copy: the seal centers in it. */
  .an-ab-hero .an-ab-hero__seal { top: 44px; right: 112px; width: 192px; height: 192px; }
}

/* Mobile tap targets (audit SW-05): quiet text links measure ~22px tall at
   375; padding grows the hit area without changing the visual weight. */
@media (max-width: 767px) {
  .an-ab-lane__link, .an-ab-cas__link, .an-ab-chan__link, .an-ab-partner__link { padding-block: 10px; }
}

/* ===========================================================================
   MOBILE UX PASS (2026-07-18). Mobile-breakpoint-gated; desktop untouched.
   (ABOUT-M01 first-screen-CTA is addressed by the shared nav's pinned Contact
   CTA (NAV-M03) rather than editing the locked light hero.)
=========================================================================== */
@media (max-width: 767px) {
  /* ABOUT-M02: 168px top padding left ~104px of dead paper under the nav. */
  .an-ab-hero { padding-top: 128px; }

  /* ABOUT-M03: reading-level support copy under the phone floor; the values
     descriptions also get a contrast bump on the dark surface. */
  .an-ab-vals__d { font-size: 15px; color: rgba(255,255,255,0.65); }
  .an-ab-lane__p,
  .an-ab-chan__p { font-size: 15px; }

  /* ABOUT-M04: the 2x2 plates kept a fixed 156px height while art capped at
     ~114px, so wide badges floated in ~60% empty plates; hug the art at equal
     widths. */
  .an-ab-partner__badge { height: auto; padding: 22px 16px; }
  .an-ab-partner__badge img,
  .an-ab-partner__badge.is-tall img { height: auto; width: 100%; max-width: 200px; }

  /* ABOUT-M05: even out the 4-line hero H1 stack (the red clause otherwise
     orphans '2009.' on its own line). */
  .an-ab-hero__h1 { text-wrap: balance; }
  .an-ab-hero__h1 em { display: inline; }
}