/* =====================================================================
   Global Footprint — inside page (global-footprint.html)
   ---------------------------------------------------------------------
   Loaded AFTER main.css (tokens, nav/footer, #site-waves, [data-reveal])
   and about.css (the container/row/col grid and the shared .abt-hero
   furniture). Only what differs on this page lives here.

   TYPE SCALE — fixed px, as on the other inside pages:
     30px  stat numbers and the Key Certifications heading
     16px  body copy and stat labels
   ===================================================================== */

/* ---- hero ------------------------------------------------------------
   This chapter has no banner photograph — the plate is type only. Every
   part of .abt-hero that exists to serve a picture has to be undone: the
   min-height sized for a photo, the bottom alignment, and the white title
   that relies on the image for contrast. The section paints its own brand
   gradient instead, so the same light label and white title still read,
   and it stands shorter because there's no picture to show. */
   .gf-hero .abt-hero__title {
    
    color: var(--brand-blue);
    text-shadow: none;
   }
.gf-hero {
  min-height: 0;
  display: block;
  /* top pad clears the fixed nav, which sits over the hero on every page */
  padding: 150px 0 0;
  background:#fff;
}
.gf-hero .abt-hero__inner { padding-bottom: 0; }

/* ---- 2. intro + stats + certifications ------------------------------- */
.gf-section { padding: 40px 0 30px; 
  background:#fff;
}

.gf-intro p {
  font-size: 16px;
  line-height: 1.8;
  color: #2b2b2b;
  margin: 0 0 1.3rem;
}
.gf-intro p:last-child { margin-bottom: 0; }

/* the report's three-dash rule (see .report-overlay__divider in main.css),
   scaled to page sizes rather than overlay sizes */
.gf-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1.6rem 0 0;
}
.gf-divider span {
  display: block;
  height: 8px;
  border-radius: 999px;
}
.gf-divider span:nth-child(1) { background: #5bc0e8; width: 56px; }
.gf-divider span:nth-child(2) { background: #8bc751; width: 18px; }
.gf-divider span:nth-child(3) { background: #ffcb05; width: 18px; }

/* the three figures run on one line */
.gf-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin: 2.2rem 0 0;
}
.gf-stat__value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--brand-blue);
  margin: 0 0 0.35rem;
  font-variant-numeric: tabular-nums;
}
.gf-stat__label {
  font-size: 16px;
  line-height: 1.5;
  color: #2b2b2b;
  margin: 0;
}

/* Certifications sit in an open bracket, not a closed box: the rule runs
   along the top, turns the two right-hand corners and comes back along the
   bottom, with the left side left open. The heading straddles that top rule
   and carries a white background, so the line is broken where the words are
   and only the half to their right is drawn — the way the printed panel
   reads. The bottom half of the return is the brand gradient. */
.gf-certs {
  --gf-pad: clamp(1.2rem, 3vw, 2.4rem);
  --gf-radius: 28px;
  --gf-hair: #a9cfe9;
  position: relative;
  margin: 3.4rem 0 0;
  /* no top padding: the heading is pulled up onto the rule and the space it
     leaves behind is what separates the rule from the first row of marks */
  padding: 0 var(--gf-pad) clamp(1.8rem, 3vw, 2.6rem);
  border: 1px solid var(--gf-hair);
  border-left: 0;
  border-radius: 0 var(--gf-radius) var(--gf-radius) 0;
  background: #fff;
}
.gf-certs__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--brand-blue);
  /* Pulled flush to the card's left edge so the mask starts where the rule
     starts; the right padding is the gap between the words and the line.
     The lift onto the rule is a negative margin, NOT translateY: this
     heading carries [data-reveal], and .is-revealed sets `transform:
     none`, which would drop it back onto the rule the moment it animated
     in. At line-height 1.2 the box is 1.2em tall, so -0.6em is half. */
  width: fit-content;
  max-width: 100%;
  margin: -0.6em 0 1.6rem calc(-1 * var(--gf-pad));
  padding: 0 22px 0 0;
  background: #fff;
}
.gf-certs__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: center;
}
/* The marks carry their own shapes, so each slot is left open — no tile and
   no hairline around it. The alt text still stands in if a file is missing. */
/* .gf-certs__item {
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 0.6rem;
  font-size: 11px;
  line-height: 1.35;
  color: var(--abt-faint);
  text-align: center;
} */
 .globalmaphed{
  margin-top: 20px;
 }
.gf-certs__item img {
  display: block;
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
}
/* The gradient lies on top of the bottom border rather than under the grid,
   so the return reads as one line that changes colour: gradient along the
   open left stretch, hairline blue through the rounded right corner. */
.gf-certs__rule {
  position: absolute;
  left: 0;
  right: calc(var(--gf-radius) + 14px);
  bottom: -2px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5bc0e8, #8bc751 55%, #ffcb05);
}

/* ---- 3. map ---------------------------------------------------------- */
.gf-map { margin: 2.6rem 0 0; }
.gf-map img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 1000px) {
  .gf-certs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .gf-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
  }
  .gf-certs {
    --gf-radius: 20px;
    margin-top: 2.8rem;
  }
  .gf-certs__title {
    font-size: 24px;
    padding-right: 16px;
  }
  .gf-certs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gf-certs__item { min-height: 76px; }
  .gf-divider span:nth-child(1) { width: 44px; }
}