/* About page. Built from the home page's components (assets/home.css: ad-*);
   these are the few pieces only this page has. */

/* ---------- Opening ---------- */

.ad-sec.ab-hero { padding: 152px 0 48px; text-align: center; }
@media (min-width: 768px) { .ad-sec.ab-hero { padding: 184px 0 72px; } }
.ab-hero h1 {
  margin: 0;
  font-size: clamp(48px, 8vw, 104px) !important;
  line-height: 1 !important;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--ad-ink);
}
.ab-hero h1 span { color: var(--ad-brand); }
.ab-hero p { max-width: 640px; margin: 24px auto 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; color: var(--ad-soft); }

/* ---------- Story ---------- */

.ab-story {
  display: grid;
  gap: 40px;
  align-items: center;
  padding: 32px 20px;
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-r);
  background: #fff;
  background-image: radial-gradient(90% 120% at 0% 0%, rgba(76, 72, 157, .10), transparent 62%);
  box-shadow: var(--ad-shadow);
}
@media (min-width: 768px) { .ab-story { padding: 48px; } }
@media (min-width: 1024px) { .ab-story { grid-template-columns: 1.3fr 1fr; gap: 64px; padding: 64px; } }
.ab-story-copy p { margin: 18px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--ad-soft); }

.ab-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  border: 1px solid var(--ad-line);
  border-radius: 22px;
  background: #fafafe;
  overflow: hidden;
}
.ab-stats div { display: flex; flex-direction: column; padding: 24px 20px; border-color: var(--ad-line); border-style: solid; border-width: 0; }
.ab-stats div:nth-child(odd) { border-right-width: 1px; }
.ab-stats div:nth-child(-n+2) { border-bottom-width: 1px; }
.ab-stats dt { order: 2; margin-top: 6px; font-size: 14px; color: var(--ad-soft); }
.ab-stats dd { margin: 0; font-size: clamp(30px, 3.4vw, 42px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--ad-brand); }

/* ---------- Two teams ---------- */

.ab-teams { display: grid; gap: 20px; }
@media (min-width: 900px) { .ab-teams { grid-template-columns: 1fr 1fr; } }
.ab-team { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 24px; border-radius: var(--ad-r); }
@media (min-width: 768px) { .ab-team { padding: 48px; } }
.ab-team h3 { margin: 0; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.ab-team > p { margin: 14px 0 18px; font-size: 16px; line-height: 1.6; color: var(--ad-soft); }
.ab-team ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.ab-team li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.ab-team li i { margin-top: 4px; font-size: 13px; color: var(--ad-brand); }
.ab-team .ad-more { margin-top: auto; }

/* ---------- Where we are ---------- */

.ab-visit { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .ab-visit { grid-template-columns: 1fr 1fr; gap: 64px; } }
.ab-visit p { margin: 16px 0 0; max-width: 480px; font-size: 17px; line-height: 1.6; color: var(--ad-soft); }
.ab-visit-tiles { display: grid; gap: 12px; }
.ab-tile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--ad-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .85);
  color: var(--ad-ink);
  text-decoration: none;
  transition: border-color 150ms ease;
}
.ab-tile i { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--ad-lav); color: var(--ad-brand); font-size: 17px; }
.ab-tile small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ad-faint); }
.ab-tile span { display: block; margin-top: 3px; font-size: 16px; font-weight: 600; line-height: 1.45; }
@media (hover: hover) { a.ab-tile:hover { border-color: rgba(76, 72, 157, .4); } }