/* ==========================================================================
   PAGE: ABOUT US
   Loaded after sections.css, before responsive.css. Contains only what is
   unique to this page — everything shared (buttons, cards, section heads,
   stat cards) comes from components.css.

   React: these blocks map to components under sections/about/.
   ========================================================================== */

/* --------------------------------------------------------------------------
   COMPANY OVERVIEW
   -------------------------------------------------------------------------- */
.overview__title {
  font-family: var(--font-body);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.44px;
  color: var(--c-ink-900);
  margin: 1.1rem 0 1.5rem;
}

.overview__title span {
  display: block;
  font-weight: var(--fw-regular);
}

.overview__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-800);
  margin-bottom: 1.3rem;
}

.overview__media {
  position: relative;
}

.overview__media img {
  width: 100%;
  height: clamp(300px, 34vw, 420px);
  object-fit: cover;
  border-radius: var(--r-lg);
}

/* Small stat plate overlapping the photo's lower-left corner. */
.overview__plate {
  position: absolute;
  left: -14px;
  bottom: -26px;
  display: flex;
  background: var(--c-navy-850);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(11, 28, 45, 0.18);
}

.overview__plate .stat-card {
  padding: 1.15rem 1.5rem;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   VISION / MISSION  →  <VisionCard />

   Icon-led and interactive: the badge turns and fills under the pointer, the
   rule under the heading draws itself across, and an oversized ghost of the
   same glyph drifts in the corner. The card also leans toward the cursor —
   it is registered with the shared tilt system in assets/js/motion.js, so
   that part is inherited rather than reimplemented here.
   -------------------------------------------------------------------------- */
.vm-card {
  --accent: var(--c-primary);
  --tint: var(--c-tint-indigo);

  position: relative;
  height: 100%;
  /* Badge beside the heading rather than above it — the stacked version spent
     a badge, a margin and a heading before the first sentence. */
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 0.9rem;
  align-content: start;
  padding: clamp(1.35rem, 1rem + 1.1vw, 1.75rem);
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 2px 14px rgba(11, 28, 45, 0.05);
  transition: box-shadow var(--t-base), border-color var(--t-base);
}

.vm-card--mission {
  --accent: #16a394;
  --tint: var(--c-tint-cyan);
}

.vm-card:hover,
.vm-card:focus-visible {
  border-color: transparent;
  box-shadow: var(--sh-card-hover);
  outline: none;
}

/* Oversized ghost of the glyph, drifting in from the corner. */
.vm-card__glyph {
  position: absolute;
  top: -18px;
  right: -14px;
  z-index: -1;
  color: var(--accent);
  opacity: 0.07;
  transform: rotate(-8deg) scale(0.92);
  transition: transform 0.55s var(--ease), opacity 0.55s var(--ease);
  pointer-events: none;
}

.vm-card__glyph svg {
  width: 132px;
  height: 132px;
}

.vm-card:hover .vm-card__glyph,
.vm-card:focus-visible .vm-card__glyph {
  transform: rotate(0deg) scale(1.06);
  opacity: 0.12;
}

/* Badge: tinted at rest, solid and turned under the pointer. */
.vm-card__icon {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-lg);
  background: var(--tint);
  color: var(--accent);
  transition: background var(--t-base), color var(--t-base),
    transform 0.45s var(--ease), box-shadow var(--t-base);
}

.vm-card__icon svg {
  width: 23px;
  height: 23px;
}

.vm-card:hover .vm-card__icon,
.vm-card:focus-visible .vm-card__icon {
  background: var(--accent);
  color: var(--c-white);
  transform: rotate(-8deg) scale(1.06);
  box-shadow: 0 10px 22px rgba(11, 28, 45, 0.18);
}

/* The rule draws itself rather than sitting there. */
.vm-card__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  position: relative;
  padding-bottom: 0.55rem;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.7rem;
}

.vm-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width 0.45s var(--ease);
}

.vm-card:hover .vm-card__title::after,
.vm-card:focus-visible .vm-card__title::after {
  width: 76px;
}

.vm-card__text {
  grid-column: 1 / -1;
  margin-top: 0.85rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  letter-spacing: 0.3px;
  color: var(--c-ink-850);
  margin: 0;
}

/* --------------------------------------------------------------------------
   KEY STRENGTHS  →  <StrengthCard />
   -------------------------------------------------------------------------- */
/* White card on the section's tint, held by a soft shadow rather than a
   hairline — the border was doing all the work when card and page were the
   same white. */
.strength {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--c-white);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  box-shadow: 0 2px 14px rgba(11, 28, 45, 0.06);
  transition: transform var(--t-base), box-shadow var(--t-base),
    border-color var(--t-base);
}

.strength::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.9rem;
  width: 3px;
  height: 34px;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--c-primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-base);
}

.strength:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--sh-card-hover);
}

.strength:hover::before {
  transform: scaleY(1);
}

.strength__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-tint-indigo);
  color: var(--c-primary);
  margin-bottom: 1.2rem;
  transition: background var(--t-base), color var(--t-base);
}

.strength:hover .strength__icon {
  background: var(--c-primary);
  color: var(--c-white);
}

.strength__icon svg {
  width: 23px;
  height: 23px;
}

.strength__title {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--c-ink-800);
  margin-bottom: 0.6rem;
}

.strength__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-850);
  margin: 0;
}

/* --------------------------------------------------------------------------
   ABOUT OUR LEADER
   -------------------------------------------------------------------------- */
.leader {
  background: var(--c-surface-alt);
}

.leader__portrait {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
}

.leader__portrait img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-lg);
}

/* Offset outline frame behind the portrait. */
.leader__portrait::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--c-primary);
  border-radius: var(--r-lg);
  opacity: 0.35;
  z-index: -1;
}

.leader__badge {
  position: absolute;
  left: -12px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  background: var(--c-white);
  border-radius: var(--r-md);
  box-shadow: 0 12px 28px rgba(11, 28, 45, 0.14);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.5px;
  color: var(--c-navy-900);
}

.leader__badge svg {
  width: 18px;
  height: 18px;
  color: var(--c-primary);
}

.leader__quote {
  position: relative;
  margin: 0 0 1.6rem;
  padding-left: 1.4rem;
  border-left: 3px solid var(--c-primary);
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: 1.6;
  color: var(--c-navy-900);
}

.leader__text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-800);
  margin-bottom: 1.2rem;
}

.leader__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.15rem;
}

.leader__role {
  font-family: var(--font-alt);
  font-size: 1.02rem;
  font-weight: var(--fw-medium);
  color: var(--c-ink-400);
  margin: 0;
}

/* --------------------------------------------------------------------------
   TEAM  →  <TeamCard />
   -------------------------------------------------------------------------- */
/* Column stretch gives every card in a row the same height, so the card is a
   flex column and the body takes the slack. Without it a one-line role stops
   the white panel short and the card's own tint shows through underneath —
   which reads as the cards being different heights. */
.team-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-tint-indigo);
  isolation: isolate;
}

.team-card__media {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1.06;
  overflow: hidden;
  background: linear-gradient(160deg, var(--c-tint-indigo), var(--c-tint-cyan));
}

.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}

.team-card:hover .team-card__media img,
.team-card:focus-within .team-card__media img {
  transform: scale(1.06);
}

/* Fallback tile when there is no photograph yet — the person's initials. */
.team-card__initials {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 1.5rem + 3vw, 3.6rem);
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
  color: var(--c-primary);
  opacity: 0.55;
}

/* Social strip that rises out of the bottom on hover. */
.team-card__social {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9rem;
  background: linear-gradient(180deg, rgba(0, 42, 85, 0) 0%, rgba(0, 42, 85, 0.88) 60%);
  transform: translateY(100%);
  opacity: 0;
  transition: transform var(--t-base), opacity var(--t-base);
}

.team-card:hover .team-card__social,
.team-card:focus-within .team-card__social {
  transform: none;
  opacity: 1;
}

.team-card__social a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  color: var(--c-white);
  transition: background var(--t-base), color var(--t-base);
}

.team-card__social a:hover {
  background: var(--c-white);
  color: var(--c-primary);
}

.team-card__social svg {
  width: 15px;
  height: 15px;
}

.team-card__body {
  flex: 1 1 auto;
  padding: 1.15rem 1.25rem 1.35rem;
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  transition: border-color var(--t-base);
}

.team-card:hover .team-card__body {
  border-color: transparent;
}

.team-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.2rem;
}

.team-card__role {
  font-family: var(--font-alt);
  font-size: 0.97rem;
  font-weight: var(--fw-medium);
  color: var(--c-ink-400);
  margin: 0;
}

/* --------------------------------------------------------------------------
   COMPANY CREDENTIALS

   Was three thin horizontal bands (an almost-empty logo strip, four floating
   outlined boxes, then a list). Now: real certification cards, and the
   figures + achievements merged into one two-column block.
   -------------------------------------------------------------------------- */
.credentials {
  background: var(--c-surface-alt);
}

/* Certification card ------------------------------------------------------ */
.cert-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.4rem 1.8rem;
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
  transition: transform var(--t-base), box-shadow var(--t-base),
    border-color var(--t-base);
}

.cert-card:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--sh-card-hover);
}

.cert-card__logo {
  height: 74px;
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
}

.cert-card__logo img {
  max-height: 74px;
  width: auto;
  /* The source marks are low-contrast on white; a touch of saturation keeps
     them legible without recolouring them. */
  filter: saturate(1.05);
}

.cert-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
  margin-bottom: 0.35rem;
}

.cert-card__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: 1.65;
  color: var(--c-ink-500);
  margin: 0;
}

/* Figures panel — one card, hairline-divided cells (the 1px grid gap over a
   tinted background draws the rules). Replaces four floating boxes. -------- */
/* Deliberately NOT height:100% — matching the taller achievements list would
   stretch these four cells and leave them looking half-empty. It hugs its
   content and top-aligns instead. */
.figure-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-border-mid);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.figure-cell {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  background: var(--c-white);
}

.figure-cell__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-tint-indigo);
  color: var(--c-primary);
  margin-bottom: 0.9rem;
}

.figure-cell__icon svg {
  width: 18px;
  height: 18px;
}

.figure-cell__value {
  font-family: var(--font-body);
  font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.25rem);
  font-weight: var(--fw-bold);
  letter-spacing: -1px;
  line-height: 1;
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.4rem;
}

.figure-cell__label {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--c-ink-400);
}

/* Achievements panel ------------------------------------------------------ */
.achievements-panel {
  height: 100%;
  padding: 0.5rem clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-lg);
}

.achievement {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--c-border);
}

.achievement:last-child {
  border-bottom: 0;
}

.achievement__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-tint-indigo);
  color: var(--c-primary);
  transition: background var(--t-base), color var(--t-base);
}

.achievement:hover .achievement__icon {
  background: var(--c-primary);
  color: var(--c-white);
}

.achievement__icon svg {
  width: 17px;
  height: 17px;
}

.achievement__title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-ink-800);
  margin-bottom: 0.2rem;
}

.achievement__text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-500);
  margin: 0;
}

/* --------------------------------------------------------------------------
   JOURNEY / LOCATIONS band backgrounds
   -------------------------------------------------------------------------- */
.journey {
  background: var(--c-surface-alt);
}

.locations {
  background: var(--c-white);
}

/* --------------------------------------------------------------------------
   BANNER  →  <AboutHero />

   Extends the shared .page-hero rather than replacing it — same background,
   same title and lead styles — and swaps the bare 2×2 stat grid for one card
   that carries the figures and the accreditation marks together. Two objects
   in the banner instead of six.
   -------------------------------------------------------------------------- */
.about-hero__pill {
  display: inline-block;
  margin: 0.9rem 0 1.1rem;
  padding: 0.34rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  box-shadow: var(--sh-card);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-navy-900);
}

.glance {
  padding: clamp(1.35rem, 1.1rem + 1.1vw, 1.48rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border-mid);
  /* Sits over a photographic background, so it needs to be opaque enough to
     read while still letting the pattern show at the edges. */
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--sh-card);
}

.glance__title {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 0 0 1.1rem;
}

/* The 1px gap over a tinted parent draws the hairlines — no per-cell borders
   to get wrong at the edges of the grid. */
.glance__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-border-mid);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-md);
  overflow: hidden;
}

.glance__fig {
  padding: 1.1rem 1.15rem;
  background: var(--c-white);
}

.glance__fig dt {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--c-ink-400);
  margin-bottom: 0.3rem;
}

.glance__fig dd {
  font-family: var(--font-body);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--c-navy-900);
  margin: 0;
}

.glance__certs {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--c-border-mid);
}

.glance__certs-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--c-ink-400);
  margin-bottom: 0.7rem;
}

.glance__marks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 0.6rem + 1vw, 1.6rem);
  flex-wrap: wrap;
}

.glance__marks img {
  display: block;
  height: 34px;
  width: auto;
  /* The marks are printed in several different colours; muting them keeps the
     row from competing with the headline, and full colour returns on hover. */
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--t-base), opacity var(--t-base);
}

.glance__marks li:hover img {
  filter: none;
  opacity: 1;
}

@media (max-width: 400px) {
  .glance__figures {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   BANNER MOTION  →  <AboutHero /> decorative layer

   The layout is unchanged; this only adds movement. A dotted mesh travelling
   along its own paths, pulsing nodes, and three marks drifting behind the
   copy. All of it is aria-hidden and none of it is clickable, so it cannot
   get between a reader and the content — and it all stops for anyone who has
   asked for reduced motion.
   -------------------------------------------------------------------------- */
.about-hero .container {
  position: relative;
  z-index: 1;
}

/* Sits in the gutter to the RIGHT of the copy and BEHIND the card, faded out
   on every edge so no stroke can ever end on a visible hard edge. `meet`
   (not `slice`) keeps the whole viewBox inside the box, so nothing is
   cropped mid-path either. */
.about-hero__fx {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  width: min(52%, 620px);
  height: 88%;
  z-index: 0;
  pointer-events: none;
  mask-image: radial-gradient(72% 72% at 50% 50%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 30%, transparent 78%);
}

.about-hero__mesh path {
  fill: none;
  stroke: var(--c-primary);
  stroke-width: 1.3;
  stroke-dasharray: 3 9;
  opacity: 0.22;
  animation: about-dash 3.2s linear infinite;
}

.about-hero__dots circle {
  fill: var(--c-accent);
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: center;
  animation: about-pulse 3.4s var(--ease) infinite;
}

.about-hero__dots circle:nth-child(2n) { animation-delay: -0.9s; }
.about-hero__dots circle:nth-child(3n) { animation-delay: -1.8s; }

/* ---- badges pinned to the card ----
   These replaced three marks that floated loose in the gutter between the two
   columns. Attached to a corner of the card they read as part of the object;
   floating in empty space they read as something unfinished. */
.glance {
  position: relative;
}

.glance__badge {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  box-shadow: 0 10px 24px rgba(11, 28, 45, 0.12);
  color: var(--c-primary);
  pointer-events: none;
  animation: about-drift 7s ease-in-out infinite;
}

.glance__badge svg {
  width: 46%;
  height: 46%;
}

.glance__badge--a {
  width: 54px;
  height: 54px;
  top: -22px;
  left: -22px;
}

.glance__badge--b {
  width: 44px;
  height: 44px;
  bottom: -18px;
  left: -18px;
  animation-duration: 8.5s;
  animation-delay: -2.5s;
}

@keyframes about-dash {
  to { stroke-dashoffset: -24; }
}

@keyframes about-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.7; }
  50%      { transform: scale(1.5); opacity: 0.2; }
}

@keyframes about-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__mesh path,
  .about-hero__dots circle,
  .glance__badge {
    animation: none;
  }
}

/* Below lg the columns stack and the card runs edge to edge, so a badge
   hanging off its left corner would be clipped by the container. */
@media (max-width: 991.98px) {
  .glance__badge,
  .about-hero__fx {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   TEAM CERTIFICATIONS  →  <QualGrid />

   The company accreditations above (QRO, EGAC, IAF, ISO) say the organisation
   is audited. These say the people are qualified — a different claim, so a
   different treatment: no logo plates, because a vendor badge reproduced small
   reads as clip art and we hold no artwork for most of them.

   Each tile leads with the issuing vendor set in the mono face, the same
   micro-label the solution pages use on their why-panel, then the credential
   and the track it was taken in.
   -------------------------------------------------------------------------- */
.team-quals {
  background: var(--c-white);
}

.qual-tile {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.2rem 1.2rem;
  background: var(--c-white);
  border: 1px solid var(--c-border-mid);
  border-radius: var(--r-md);
  transition: transform var(--t-base), box-shadow var(--t-base),
    border-color var(--t-base);
}

.qual-tile:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--sh-card-hover);
}

/* Badge plate. A fixed height would make the wide wordmarks (Fortinet, 3CX,
   MCSE) tower over the square seals, so the plate bounds BOTH axes and each
   mark settles into whichever limit it hits first — the usual compromise on a
   wall of logos that were never drawn to one grid. */
.qual-tile__plate {
  height: 62px;
  display: flex;
  align-items: center;
  margin-bottom: 0.7rem;
}

.qual-tile__plate img {
  max-height: 100%;
  max-width: 74%;
  width: auto;
  /* The supplied marks are cut from a screenshot and sit a touch flat on white;
     a little saturation puts them back where the vendors drew them. */
  filter: saturate(1.06);
}

.qual-tile__vendor {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 0.6rem;
}

.qual-tile__vendor svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--c-accent);
}

.qual-tile__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.26;
  color: var(--c-navy-900);
  margin-bottom: 0.35rem;
}

/* Pinned to the foot so the track lines sit level across a row of tiles
   whose credential names run to different lengths. */
.qual-tile__track {
  margin: auto 0 0;
  padding-top: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-500);
}