/*
==================================================================
ABOUT PAGE
Page-scoped styles for about.html. The page is assembled mostly
from the shared kit (tt-hp-* in hrms-page.css, the awards marquee
and logo ticker in style.css). Only two components have no
existing equivalent and live here: the figures band and the
global-offices grid.
==================================================================
*/

/* ==================================================================
   CENTERED HERO
   No hero artwork on this page - the copy runs full width and centered,
   so it needs its own measure. Without the caps the headline and lead
   would stretch the whole container and lose their line length.
   ================================================================== */
.tt-ab-hero-centered {
  max-width: 60rem;
  margin-inline: auto;
}
.tt-ab-hero-centered .tt-hero-title {
  margin-inline: auto;
}
.tt-ab-hero-centered .tt-hero-paragraph {
  max-width: 46rem;
  margin-inline: auto;
}

/* ==================================================================
   FIGURES BAND
   ================================================================== */
.tt-ab-figures {
  position: relative;
  padding: var(--tt-section-space-tight) 0;
  background: rgba(243, 244, 246, 0.9);
}

.tt-ab-figures-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(var(--tt-dark-rgb), 0.1);
  border: 1px solid rgba(var(--tt-dark-rgb), 0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--tt-shadow-md);
}

.tt-ab-figure {
  background: var(--tt-glass-bg-soft);
  backdrop-filter: var(--tt-glass-blur);
  -webkit-backdrop-filter: var(--tt-glass-blur);
  padding: clamp(1.25rem, 2.4vw, 2rem) 1rem;
  text-align: center;
}
.tt-ab-figure-num {
  display: block;
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.05;
  color: var(--tt-primary);
}
.tt-ab-figure-label {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--tt-fs-body-sm);
  font-weight: 500;
  color: var(--tt-muted);
}

/* ==================================================================
   GLOBAL OFFICES
   ================================================================== */
/* THREE COLUMNS, NOT FOUR - and the count is the alignment bug.
   This was repeat(4, ...) from when there were four offices. Dubai was
   removed on 2026-08-28 (see CLAUDE.md) and the track count was not, so
   three cards filled the first three of four columns and the whole row sat
   visibly left of centre with an empty track on the right.

   Capped and centred as well, so the cards keep roughly their old width
   instead of each growing by a third to fill the container. */
.tt-ab-offices {
  display: grid;
  gap: clamp(0.85rem, 1.6vw, 1.35rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: auto;
  max-width: 700px;
}

.tt-ab-office {
  display: flex;
  flex-direction: column;
  background: var(--tt-glass-bg-soft);
  backdrop-filter: var(--tt-glass-blur);
  -webkit-backdrop-filter: var(--tt-glass-blur);
  border: 1px solid var(--tt-glass-border);
  border-radius: 18px;
  padding: 1.5rem 1.35rem;
  box-shadow: var(--tt-glass-shadow);
  transition: var(--tt-transition-standard);
}
.tt-ab-office:hover {
  border-color: rgba(var(--tt-primary-rgb), 0.38);
  box-shadow: 0 14px 30px -6px rgba(var(--tt-primary-rgb), 0.22), var(--tt-shadow-md);
  transform: translateY(-5px);
}

.tt-ab-office-flag {
  width: 34px;
  height: auto;
  border-radius: 4px;
  margin-bottom: 0.9rem;
}
.tt-ab-office-city {
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-size: var(--tt-fs-h4);
  font-weight: 700;
  color: var(--tt-dark);
  margin-bottom: 0.15rem;
}
.tt-ab-office-country {
  font-size: var(--tt-fs-body-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tt-primary);
  margin-bottom: 0.7rem;
}
.tt-ab-office-address {
  font-size: var(--tt-fs-body-sm);
  line-height: 1.65;
  color: var(--tt-muted);
  margin: 0;
}

/* ==================================================================
   INLINE CROSS-LINK
   Carries the route to the clients page that the logo ticker used to
   provide, before it was dropped for sitting directly under the
   awards marquee (two auto-scrolling rails back to back read badly).
   ================================================================== */
.tt-ab-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  font-weight: 600;
  color: var(--tt-primary);
  text-decoration: none;
  transition: var(--tt-transition-fast);
}
.tt-ab-link:hover,
.tt-ab-link:focus-visible { color: var(--tt-primary-hover); gap: 0.7rem; }

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 991.98px) {
  .tt-ab-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .tt-ab-figures-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .tt-ab-offices { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .tt-ab-office { transition: none; }
  .tt-ab-office:hover { transform: none; }
}