/* about.css: /about/ (P6). The story as statements beside a two-photo collage that drifts at two speeds; the three
   words as one huge night band with the stars; the chauffeur features as numbered columns; the company facts on
   celadon (the page's one quiet band). Tokens and grounds from base.css; motion hooks from motion.css. */

/* ---------- the story: H2 and statement left, the collage right ---------- */
.ab-story-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(40px, 6vw, 72px); }
.aj-site .ab-story-title {
  margin: 0; max-width: 11ch; font-size: var(--fs-h1); font-weight: 500; line-height: 1; letter-spacing: -0.04em;
  color: var(--heading); text-wrap: balance;
}
.ab-lead { margin: 0; max-width: 22ch; font-size: var(--fs-statement); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); text-wrap: pretty; }
.ab-prose-more { display: grid; gap: 20px; margin-top: clamp(32px, 3vw, 48px); padding-top: clamp(24px, 2vw, 32px); border-top: 1px solid var(--line); }
.ab-prose-more p { margin: 0; max-width: 46ch; font-size: var(--fs-lede); line-height: 1.55; color: var(--text-2); }

/* the collage: a tall frame of the hand on the door, the bay at dusk floating over its lower edge */
.ab-collage { position: relative; display: grid; padding-bottom: clamp(16px, 4vw, 48px); }
.ab-shot { position: relative; overflow: clip; background: var(--sunken); }
.ab-shot-door { width: 78%; margin-left: auto; aspect-ratio: 4 / 5; }
.ab-shot-door > img[data-speed] { top: -12%; height: 124%; }
.ab-shot-bay { position: relative; z-index: 1; width: 64%; margin-top: -30%; padding: clamp(8px, 0.8vw, 12px); background: var(--porcelain); }
.ab-shot-bay .ab-shot { aspect-ratio: 16 / 10; }
.ab-shot-bay img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.ab-founder { margin: 0; display: grid; gap: 16px; max-width: 40ch; }
.ab-founder blockquote { margin: 0; font-size: var(--fs-lede); line-height: 1.5; color: var(--text); }
.ab-founder figcaption { font-size: var(--fs-small); color: var(--text-2); }
.aj-site .ab-founder-photo { width: 160px; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: var(--r-arch); }

@media (min-width: 1024px) {
  .ab-story-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 0; align-items: start; }
  .ab-story-grid > * { grid-column: 1 / span 6; min-width: 0; }
  .ab-story-title { grid-row: 1; }
  .ab-founder { grid-row: 2; margin-top: 48px; }
  .ab-prose { grid-row: 3; margin-top: clamp(64px, 7vw, 128px); }
  .ab-prose-more p { font-size: var(--fs-body); }
  .ab-story-grid > .ab-collage { grid-column: 7 / -1; grid-row: 1 / span 3; margin-top: clamp(24px, 4vw, 72px); }
  .ab-shot-door { width: 86%; }
  .ab-shot-bay { width: 70%; margin-top: -34%; margin-left: -14%; }
}
@media (min-width: 1280px) {
  .ab-story-grid > .ab-prose { grid-column: 1 / span 5; }
  .ab-story-grid > .ab-collage { grid-column: 7 / -1; }
}

/* ---------- Punctual. Discreet. Personal.: one huge band, the words set across the grid, stars between ---------- */
.ab-values { overflow: clip; }
.ab-values-list {
  list-style: none; margin: 0; padding: clamp(24px, 3vw, 48px) 0; display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: center; row-gap: clamp(4px, 1vw, 16px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.aj-site .ab-v {
  font-size: clamp(3.25rem, 0.6rem + 10.6vw, 11.5rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.045em;
  color: var(--heading); white-space: nowrap;
}
.ab-v:nth-child(3) { justify-self: center; }
.ab-v:nth-child(5) { justify-self: end; }
.ab-star { line-height: 0; justify-self: end; }
.ab-star:nth-child(4) { justify-self: start; }
/* the stars are set in mist, like the words: past the stage the header's "Book a car" (the phone action bar under 1024) is
   the viewport's one vermilion thing, so the band holds none */
.ab-star svg { display: block; width: clamp(32px, 1rem + 4.4vw, 104px); height: auto; fill: var(--mist); }
html.mo .ab-star:not(.is-in) svg { rotate: -135deg; scale: 0.4; }
html.mo .ab-star.is-in:not(.no-anim) svg { transition: rotate 1600ms var(--ease-out) var(--rd, 0ms), scale 1600ms var(--ease-out) var(--rd, 0ms); }
@media (prefers-reduced-motion: no-preference) {
  .ab-star { animation: ab-turn 48s linear infinite; }
}
@keyframes ab-turn { to { rotate: 360deg; } }

@media (min-width: 900px) {
  .ab-values-list { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 0; }
  .ab-v:nth-child(1) { grid-row: 1; grid-column: 1 / span 9; justify-self: start; }
  .ab-star:nth-child(2) { grid-row: 1; grid-column: 10 / span 2; justify-self: center; }
  .ab-v:nth-child(3) { grid-row: 2; grid-column: 3 / -1; justify-self: start; }
  .ab-star:nth-child(4) { grid-row: 3; grid-column: 1 / span 2; justify-self: center; }
  .ab-v:nth-child(5) { grid-row: 3; grid-column: 3 / -1; justify-self: end; }
}

/* ---------- how we choose our chauffeurs: numbered columns, the title set large ---------- */
.ab-feats { counter-reset: abf; }
.ab-feats .fg-item { counter-increment: abf; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 12px; padding-top: 20px; }
.ab-feats .fg-item::before { content: counter(abf, decimal-leading-zero) / ""; grid-row: 1; grid-column: 1; font-size: var(--fs-small); font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ab-feats .fg-ic { grid-row: 1; grid-column: 2; margin: 0; color: var(--text-2); }
.ab-feats .fg-t, .ab-feats .fg-v { grid-column: 1 / -1; }
.aj-site .ab-feats .fg-t { margin-top: clamp(20px, 5vw, 88px); font-size: var(--fs-index); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; }
.ab-feats .fg-v { max-width: 26ch; }

/* "Drive with us" on its own line under the lede: a 44px inline-flex link inside the sentence doubled its leading */
.aj-site .ab-chauffeurs .sec-head-lede .btn-link { display: flex; width: fit-content; margin-top: 12px; }

/* ---------- the company: the facts on celadon ---------- */
.aj-site .ab-company-title { font-size: var(--fs-h2); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; }
.ab-facts > div { padding: clamp(18px, 1rem + 0.5vw, 26px) 0; }
.aj-site .ab-facts dd { font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem); overflow-wrap: anywhere; }