/* About page: a company story layout. Loads after concept.css and shares only its tokens, type,
   buttons and chrome. Composition is its own so About never reads as a service page or a hub. */

.ab-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-center-head { display: grid; justify-items: center; gap: 8px; margin: 0 auto 36px; max-width: 52rem; text-align: center; }
.ab-center-head h2, .ab-center-head .lede { margin: 0; }
.ab-commit p a, .ab-solve p a, .ab-spec a {
  color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: var(--rule-link); text-underline-offset: 4px; transition: text-decoration-color .18s ease;
}
.ab-commit p a:hover, .ab-solve p a:hover, .ab-spec a:hover { text-decoration-color: currentColor; }
.ab-page main figure { margin: 0; }
.ab-page main figure img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero: the homepage's full-bleed stage, the crew held right ---------- */
.ab-hero .hero-bg img { object-position: 50% 0%; }
.ab-hero .hero-inner { padding-top: clamp(40px, calc(100svh - var(--top) - 500px), 400px); }
.ab-hero .rating .r-sub { color: var(--on-ink); }
.ab-note { order: 5; display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 15px; line-height: 1.45; color: var(--on-ink); }
.ab-note svg { flex: none; margin-top: 2px; color: var(--orange-hi); }

/* ---------- Commitment: intro, then a photo bento with a black statement card ---------- */
.ab-commit-head { display: grid; gap: 8px; margin-bottom: 28px; }
.ab-commit-head h2, .ab-commit-head .lede { margin: 0; }
.ab-bento { display: grid; gap: 12px; }
.ab-b-main { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: var(--smoke); }
.ab-b-main img { object-position: 36% 50%; }
.ab-b-side { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--smoke); }
.ab-b-side img { object-position: 50% 24%; }
.ab-b-card { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 22px; border-radius: 2px; background: var(--ink); color: var(--white); }
.ab-b-card p { font-size: 16.5px; line-height: 1.55; color: var(--on-ink); }
.ab-b-card .btn { margin-top: auto; }
.ab-b-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--grey); border-radius: 2px; color: var(--orange-hi); }

/* ---------- Values: one bordered panel, chained into three ---------- */
.ab-chain { list-style: none; margin: 0; padding: 0; display: grid; background: var(--white); border: 1px solid var(--line); border-radius: 2px; }
.ab-chain li { position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; padding: 32px 24px 36px; text-align: center; transition: box-shadow .2s ease; }
.ab-chain li + li { border-top: 1px solid var(--line); }
.ab-chain li:hover { box-shadow: inset 0 var(--rule) 0 var(--orange); }
.ab-chain h3 { margin: 6px 0 0; }
.ab-chain p { max-width: 22rem; color: var(--muted); font-size: 16px; line-height: 1.55; }
.ab-chain-ic { position: relative; display: grid; place-items: center; width: 128px; height: 104px; }
.ab-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(#cfcfcf 1px, transparent 1px), linear-gradient(90deg, #cfcfcf 1px, transparent 1px);
  background-size: 16px 16px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
}
.ab-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 2px; background: var(--ink); color: var(--white); }

/* ---------- Solutions: tall photo beside a spec sheet ---------- */
.ab-solve-grid { display: grid; gap: 32px; }
.ab-solve-media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--smoke); }
.ab-solve-media img { object-position: 50% 42%; }
.ab-solve-copy h2 { margin-bottom: 16px; }
.ab-solve-copy .lede { margin-bottom: 14px; }
.ab-solve-copy > p:not(.lede) { color: var(--muted); font-size: 16px; line-height: 1.55; }
.ab-spec { list-style: none; margin: 28px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.ab-spec li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 600; line-height: 1.4; }
.ab-tick { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 2px; background: var(--ink); }
.ab-tick:before { content: ""; width: 11px; height: 6px; margin-top: -3px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg); }
.ab-spec li:hover .ab-tick { background: var(--orange); }

/* ---------- Region: the service cities as a roll call on black ---------- */
.ab-region-head { display: grid; gap: 8px; max-width: 48rem; margin-bottom: 32px; }
.ab-region-head h2, .ab-region-head .lede { margin: 0; }
.ab-roll { list-style: none; margin: 0; padding: 28px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; border-top: 1px solid var(--grey); }
.ab-roll li { display: inline-flex; align-items: baseline; font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0; font-size: clamp(22px, 6.2vw, 28px); line-height: 1.35; }
.ab-roll li:not(:last-child):after { content: "/"; margin: 0 .3em; color: var(--grey); font-weight: 600; }
.ab-roll a { display: inline-flex; align-items: baseline; gap: .18em; color: var(--white); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--rule); text-underline-offset: var(--rule-gap); text-decoration-skip-ink: none; transition: text-decoration-color .18s ease; }
.ab-roll a:hover, .ab-roll a:focus-visible { text-decoration-color: var(--orange); }
.ab-roll .ab-home a svg { align-self: center; width: .62em; height: .62em; color: var(--orange-hi); }

/* ---------- How we work: the live 1-2-3, outlined numerals ---------- */
.ab-steps-head { display: grid; gap: 8px; margin-bottom: 28px; }
.ab-steps-head h2, .ab-steps-head .lede { margin: 0; }
.ab-numerals { list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid var(--ink); }
.ab-numerals li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ab-num { font-family: var(--f-head); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ab-numerals h3 { margin: 4px 0 6px; }
.ab-numerals p { color: var(--muted); font-size: 16px; line-height: 1.5; }
.ab-steps .ab-actions { margin-top: 32px; }

/* ---------- Why: full-bleed photo split ---------- */
.ab-why { padding: 0; }
.ab-why-grid { display: grid; }
.ab-why-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--line); }
.ab-why-media img { object-position: 50% 45%; }
.ab-why-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 48px var(--gutter) 56px; }
.ab-why-copy h2 { margin: 0; }
.ab-why-copy p { max-width: 36rem; color: var(--muted); font-size: 16px; line-height: 1.55; }
.ab-sig { display: block; margin-top: 22px; padding-left: 16px; border-left: var(--rule) solid var(--orange); font-family: var(--f-head); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--ink); }

/* ---------- FAQ: numbered, every answer open ---------- */
.ab-qa { list-style: none; margin: 0 auto; padding: 0; max-width: 780px; border-top: 2px solid var(--ink); }
.ab-qa li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ab-qn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 2px; background: var(--ink); color: var(--white); font-family: var(--f-label); font-weight: 700; font-size: 20px; line-height: 1; }
.ab-qa h3 { margin: 6px 0 8px; }
.ab-qa p { color: var(--muted); font-size: 16px; line-height: 1.5; }

/* ---------- Close: the homepage final band, its own photo ---------- */
.ab-final .final-bg { object-position: 80% 59%; opacity: .5; }

@media (max-width: 359px) {
  .ab-hero .hero-inner { padding-top: 24px; }
  .ab-roll li { font-size: 21px; }
}
@media (max-width: 559px) {
  .ab-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .ab-actions .btn, .ab-final .actions .btn { justify-content: center; }
  .ab-b-card .btn, .ab-why-copy .btn { align-self: stretch; justify-content: center; }
}
@media (min-width: 700px) {
  .ab-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ab-b-main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .ab-b-side { aspect-ratio: auto; min-height: 320px; }
  .ab-b-card { padding: 32px 28px; }
  .ab-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-chain li + li { border-top: 0; border-left: 1px solid var(--line); }
  .ab-numerals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 0; }
  .ab-numerals li { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 0 0; border-top: 2px solid var(--ink); border-bottom: 0; transition: border-color .2s ease; }
  .ab-numerals li:hover { border-top-color: var(--orange); }
  .ab-num { font-size: 48px; }
  .ab-qa li { grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding: 26px 0; }
  .ab-qn { width: 44px; height: 44px; font-size: 22px; }
}
@media (min-width: 1000px) {
  .ab-hero .hero-inner { padding-top: 32px; padding-bottom: 96px; }
  .ab-hero .hero-lede { max-width: 35rem; }
  .ab-hero .trust { max-width: 46rem; }
  .ab-hero h1 { max-width: 12.5em; font-size: clamp(44px, 3.6vw, 56px); }
  .ab-note { margin-top: 18px; font-size: 16px; }

  .ab-commit-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; margin-bottom: 40px; }
  .ab-bento { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
  .ab-b-main { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; min-height: 560px; }
  .ab-b-card { grid-column: 2; grid-row: 1; padding: 36px 32px; }
  .ab-b-side { grid-column: 2; grid-row: 2; min-height: 260px; }

  .ab-chain li { padding: 40px 36px 44px; }
  .ab-chain-ic { width: 144px; height: 112px; }

  .ab-solve-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
  .ab-solve-media { aspect-ratio: 4 / 5; }
  .ab-spec li { padding: 16px 0; font-size: 17px; }

  .ab-region-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; max-width: none; margin-bottom: 40px; }
  .ab-roll { padding-top: 36px; }
  .ab-roll li { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.3; }

  .ab-steps-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end; margin-bottom: 40px; }
  .ab-num { font-size: 56px; }
  .ab-steps .ab-actions { margin-top: 44px; }

  .ab-why-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 620px; }
  .ab-why-media { aspect-ratio: auto; }
  .ab-why-copy { justify-content: center; gap: 28px; padding: 88px max(var(--gutter), calc(50vw - var(--max) / 2)) 88px 72px; }
  .ab-sig { font-size: 21px; }

}
@media (min-width: 1000px) and (max-height: 820px) {
  .ab-hero .hero-inner { padding-top: 24px; padding-bottom: 72px; }
  .ab-note { margin-top: 12px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-chain li, .ab-numerals li, .ab-roll a { transition: none; }
}