/* Where We Work - a brand-led location explorer based on the supplied visual brief. */
.footprint-intro{
  padding:clamp(56px,7vw,96px) clamp(22px,6vw,90px) clamp(36px,5vw,66px);
  background:#fff;
  border-bottom:1px solid var(--aurum-line);
}
.footprint-intro .eyebrow{color:var(--aurum-red)}
.footprint-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr);
  align-items:end;
  gap:clamp(30px,7vw,110px);
}
.footprint-intro h1{
  margin:20px 0 0;
  max-width:none;
  color:var(--aurum-ink);
  font-size:clamp(64px,8.5vw,126px);
  line-height:.82;
  letter-spacing:-.08em;
}
.footprint-intro h1 em{color:var(--aurum-red);font-family:var(--font-secondary)}
.footprint-intro-grid>p{
  max-width:450px;
  margin:0 0 8px;
  color:#625d56;
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.55;
}

/* 2026-08-17: "the map is far too small" — the country-list column was
   claiming up to 340px on a wide screen, well more than it actually needs
   for a compact list; trimmed its max so the map column (already
   minmax(0,1fr), i.e. everything left over) gets real width back. */
.footprint-explorer{
  display:grid;
  grid-template-columns:minmax(250px,280px) minmax(0,1fr);
  gap:clamp(18px,2vw,30px);
  padding:clamp(18px,2.2vw,32px);
  background:#fff;
}
.place-list{
  align-self:stretch;
  overflow:hidden;
  border:1px solid rgba(25,22,19,.11);
  border-radius:7px;
  background:#fff;
  box-shadow:0 22px 54px rgba(25,22,19,.09);
}
.place-list-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:24px 22px 20px;
  color:var(--aurum-red);
  border-bottom:1px solid var(--aurum-line);
  font-size:10px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.place-list-head small{color:var(--aurum-slate);font:inherit;white-space:nowrap}
.place-button{
  display:grid;
  grid-template-columns:30px 10px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:69px;
  padding:13px 20px;
  border:0;
  border-left:3px solid transparent;
  border-bottom:1px solid var(--aurum-line);
  background:transparent;
  color:var(--aurum-ink);
  text-align:left;
  transition:background .3s var(--ease-editorial),color .3s var(--ease-editorial),padding .3s var(--ease-editorial),border-color .3s var(--ease-editorial);
}
/* Subtle, persistent brand-colour accent per category — a thin edge,
   not a wash of colour, matching the map legend's office/entity/project
   coding. */
.place-button--office{border-left-color:rgba(205,32,38,.32)}
.place-button--entity{border-left-color:rgba(224,172,38,.4)}
.place-button--project{border-left-color:rgba(7,113,135,.32)}
.place-button:last-child{border-bottom:0}
.place-button:hover,.place-button[aria-selected="true"]{
  padding-left:22px;
  background:var(--aurum-red);
  border-left-color:var(--aurum-gold);
  color:#fff;
}
.place-number{color:var(--aurum-red);font-size:9px;letter-spacing:.1em}
.place-button:hover .place-number,.place-button[aria-selected="true"] .place-number{color:var(--aurum-gold)}
.place-dot{width:7px;height:7px;border-radius:50%;background:var(--aurum-slate)}
.place-dot--office{background:var(--aurum-red)}
.place-dot--entity{background:var(--aurum-gold)}
.place-dot--project{background:var(--aurum-teal)}
.place-button:hover .place-dot,.place-button[aria-selected="true"] .place-dot{background:#fff;opacity:.9}
/* 2026-08-17: swapped off Cabinet Grotesk (the site's bold/expressive
   display face, used for big headlines) for the country list specifically —
   client wants it "more sophisticated" than a heavy display treatment. This
   is the brand's own Neue Haas Grotesk/Archivo body face instead, at a
   lighter weight with open tracking — reads as a refined editorial list
   rather than a headline, and is actually closer to brand-guide typography
   than Cabinet Grotesk was (see aurum_font_fix memory: Cabinet Grotesk was
   flagged as a deliberate, already-approved departure from the guide). */
/* 2026-08-17e: "the writing is far too big... smaller and thinner" —
   dropped from 17px/600 to 14px/500. */
.place-name{font-family:var(--font-primary),Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:.005em}
.place-type{color:var(--aurum-slate);font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.place-button:hover .place-type,.place-button[aria-selected="true"] .place-type{color:#fff}
.mobile-location-guide{display:none}

.footprint-stage{
  position:relative;
  min-width:0;
  overflow:hidden;
  padding:clamp(24px,3.5vw,52px);
  padding-top:clamp(14px,2vw,26px);
  border-radius:7px;
  /* 2026-08-17: was a cream/beige gradient (#faf8f3→#f5eee8) — client wants
     no cream anywhere on this page, plain modern white instead. Kept the
     faint gold radial for a touch of texture rather than a completely flat
     fill, since it reads as an accent tint, not cream. */
  background:
    radial-gradient(circle at 56% 43%,rgba(224,172,38,.08),transparent 30%),
    #fff;
  box-shadow:0 22px 54px rgba(25,22,19,.1);
}
.stage-heading{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
}
.stage-heading .eyebrow{color:var(--aurum-red)}
.stage-heading h2{
  margin:12px 0 0;
  font-size:clamp(38px,4.5vw,66px);
  line-height:.88;
  letter-spacing:-.07em;
}
.stage-heading h2 em{color:var(--aurum-red)}
/* 2026-08-09: was undersized and pinned to flex-start, so it sat above the
   heading text instead of reading alongside it — bumped in size and the
   parent now centre-aligns it against the full eyebrow+heading block. */
.map-legend{
  display:flex;
  flex-direction:column;
  flex:0 0 auto;
  gap:15px;
  padding:22px 26px;
  border:1px solid rgba(25,22,19,.09);
  border-radius:8px;
  background:rgba(255,255,255,.86);
  box-shadow:0 8px 22px rgba(25,22,19,.06);
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.map-legend span{display:flex;align-items:center;gap:12px}
/* display:inline-block is required here — <i> is inline by default, so the
   width/height below were silently ignored and the "dot" painted as a thin
   sliver along the text baseline instead of a filled circle. */
.legend-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--aurum-red)}
.legend-dot.entity{background:var(--aurum-gold)}

.orbit-map{
  position:relative;
  width:min(720px,94%);
  aspect-ratio:1.36;
  margin:10px auto 0;
  isolation:isolate;
}
.orbit{
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  width:50%;
  aspect-ratio:1;
  border:1px solid rgba(205,32,38,.12);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.orbit-two{width:69%;border-color:rgba(224,172,38,.17)}
.orbit-three{width:88%;border-color:rgba(205,32,38,.1)}
.orbit-line{
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  width:40%;
  height:1px;
  background:linear-gradient(90deg,rgba(205,32,38,.34),rgba(224,172,38,.12));
  transform-origin:left center;
}
.line-n{transform:rotate(-90deg)}.line-ne{transform:rotate(-45deg)}.line-e{transform:rotate(0)}
.line-se{transform:rotate(45deg)}.line-s{transform:rotate(90deg)}.line-sw{transform:rotate(135deg)}
.line-w{transform:rotate(180deg)}.line-nw{transform:rotate(225deg)}
.orbit-centre{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  display:grid;
  place-items:center;
  width:142px;
  aspect-ratio:1;
  padding:18px;
  border:7px solid #fff;
  border-radius:50%;
  background:radial-gradient(circle at 34% 26%,#ed5e62,var(--aurum-red) 62%,#7f1015);
  color:#fff;
  box-shadow:0 0 0 1px rgba(205,32,38,.24),0 18px 40px rgba(128,16,21,.24);
  transform:translate(-50%,-50%);
}
.orbit-centre::before,.node-disc::before{
  content:"";
  position:absolute;
  inset:-10px;
  border:1px solid rgba(205,32,38,.13);
  border-radius:50%;
}
.orbit-centre img{
  width:72px;
  height:62px;
  object-fit:contain;
  padding:6px;
  border-radius:2px;
  background:#fff;
}
.orbit-centre span,.orbit-centre strong{
  position:absolute;
  left:50%;
  width:180px;
  text-align:center;
  transform:translateX(-50%);
}
.orbit-centre span{top:-29px;color:var(--aurum-red);font-size:8px;letter-spacing:.1em;text-transform:uppercase}
.orbit-centre strong{bottom:-34px;color:var(--aurum-ink);font-size:19px;letter-spacing:-.04em}
.orbit-node{
  position:absolute;
  z-index:2;
  display:grid;
  justify-items:center;
  gap:8px;
  width:112px;
  padding:0;
  border:0;
  background:none;
  color:var(--aurum-ink);
  text-align:center;
}
.node-disc{
  position:relative;
  display:grid;
  place-items:center;
  width:58px;
  aspect-ratio:1;
  border:4px solid #fff;
  border-radius:50%;
  background:linear-gradient(145deg,#ec5b60,var(--aurum-red) 64%,#98151a);
  color:#fff;
  box-shadow:0 9px 22px rgba(128,16,21,.18);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  transition:transform .28s var(--ease-editorial),box-shadow .28s var(--ease-editorial);
}
.orbit-node.entity .node-disc{background:linear-gradient(145deg,#efc75f,var(--aurum-gold) 62%,#c78008)}
.orbit-node b{font-size:12px;line-height:1.15;letter-spacing:-.02em}
.orbit-node:hover .node-disc,.orbit-node.is-active .node-disc{
  transform:translateY(-4px) scale(1.08);
  box-shadow:0 0 0 4px rgba(205,32,38,.12),0 15px 30px rgba(128,16,21,.2);
}
.orbit-node.is-active b{color:var(--aurum-red)}
.pos-n{left:50%;top:2%;transform:translateX(-50%)}
.pos-ne{right:11%;top:14%}.pos-e{right:1%;top:45%;transform:translateY(-50%)}
.pos-se{right:10%;bottom:7%}.pos-s{left:50%;bottom:-3%;transform:translateX(-50%)}
.pos-sw{left:10%;bottom:7%}.pos-w{left:1%;top:45%;transform:translateY(-50%)}
.pos-nw{left:10%;top:14%}
.explore-hint{
  margin:-2px 0 24px;
  color:var(--aurum-slate);
  font-size:10px;
  letter-spacing:.07em;
  text-align:right;
  text-transform:uppercase;
}
.explore-hint span{color:var(--aurum-red);font-size:18px}

/* 2026-08-09: was a flat near-black card (#1b1917) — replaced with the
   brand red/gold treatment already used elsewhere on this page (the map's
   office/entity markers, the legend) instead of an off-brand black block. */
.place-detail{
  position:relative;
  z-index:3;
  padding:clamp(24px,3vw,38px);
  border-radius:7px;
  background:linear-gradient(135deg,#e5393f 0%,var(--aurum-red) 55%,#8c1116 100%);
  color:#fff;
  box-shadow:0 20px 46px rgba(205,32,38,.28);
}
.place-detail-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.24);
}
.detail-type{
  display:block;
  margin-bottom:7px;
  color:var(--aurum-gold);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.place-detail h3{
  margin:0;
  font-family:"Cabinet Grotesk",var(--font-primary),Arial,sans-serif;
  font-size:clamp(36px,4.8vw,67px);
  line-height:.88;
  letter-spacing:-.07em;
}
.detail-index{color:rgba(255,255,255,.6);font-size:11px;letter-spacing:.12em}
/* 2026-08-16: client wants the detail panel to read as a proper "here's
   what Aurum does in this country" block, not a cramped strip that ends
   the moment you glance at it — Related work used to be squeezed into a
   third ~30%-width column, easy to miss entirely for South Africa's long
   5-item list. It now gets its own full-width row with real room, and its
   links are rendered as the same .button-invert pills used everywhere else
   on the site (see workMarkup() in footprint.js) instead of a plain
   underlined list — matching the "Explore IMPAACT4HIV" CTA in the teal
   panel below this one, per the client's own comparison. */
.detail-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:0 32px;
  padding-top:26px;
}
.detail-block{padding:0}
.detail-block:first-child{padding-right:28px;border-right:1px solid rgba(255,255,255,.24)}
.detail-block:nth-child(3){
  grid-column:1/-1;
  margin-top:28px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.24);
}
.detail-block b{
  display:block;
  margin-bottom:10px;
  color:var(--aurum-gold);
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.detail-block:nth-child(3) b{
  font-size:11px;
  margin-bottom:16px;
}
.detail-block p,.detail-block li{
  margin:0;
  color:rgba(255,255,255,.92);
  font-size:12px;
  line-height:1.6;
}
.detail-block ul{display:grid;gap:4px;margin:0;padding-left:16px}
.detail-block a{color:#fff;text-decoration:underline;text-decoration-color:var(--aurum-gold);text-underline-offset:3px}
.detail-work-links{display:flex;flex-wrap:wrap;gap:10px}
/* 2026-08-17: some project geographies (from the audit's country lists)
   have no dedicated project/health-area page to link to yet — rendered as
   this plain, non-interactive chip instead of a .button-invert link so it
   doesn't look like a dead/broken button. */
.detail-work-label{
  display:inline-flex;
  align-items:center;
  padding:10px 18px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  color:rgba(255,255,255,.72);
  font-family:var(--font-primary);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

@media(max-width:1050px){
  .footprint-explorer{grid-template-columns:260px minmax(0,1fr)}
  .orbit-map{width:100%}
  .orbit-node{width:96px}.node-disc{width:52px}.orbit-centre{width:126px}
}
@media(max-width:850px){
  .footprint-intro{padding-top:44px}
  .footprint-intro-grid{grid-template-columns:1fr;gap:22px}
  .footprint-intro h1{font-size:clamp(58px,17vw,92px)}
  .footprint-explorer{display:flex;flex-direction:column;padding:10px;background:#fff}
  .place-list{
    order:2;
    align-self:stretch;
    width:100%;
    max-width:100%;
    overflow:hidden
  }
  .place-list-head{padding:17px 18px}
  .mobile-location-guide{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:10px 10px 0;
    padding:12px 12px 12px 15px;
    border-left:4px solid var(--aurum-gold);
    border-radius:4px;
    color:#fff;
    background:var(--aurum-red);
    font-size:12px;
    line-height:1.35;
  }
  .mobile-location-guide b{
    display:block;
    margin-bottom:2px;
    color:var(--aurum-gold);
    font-size:10px;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .mobile-location-controls{display:flex;flex:0 0 auto;gap:6px}
  .mobile-location-controls button{
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(255,255,255,.5);
    border-radius:3px;
    color:#fff;
    background:transparent;
    font:inherit;
    font-size:21px;
    cursor:pointer;
  }
  .mobile-location-controls button:hover,
  .mobile-location-controls button:focus-visible{
    border-color:var(--aurum-gold);
    color:var(--aurum-ink);
    background:var(--aurum-gold);
  }
  [data-place-list]{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:10px 52px 10px 10px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none
  }
  [data-place-list]::-webkit-scrollbar{display:none}
  .place-button{
    flex:0 0 auto;
    grid-template-columns:20px 8px auto;
    gap:7px;
    min-height:46px;
    padding:11px 14px;
    border:1px solid var(--aurum-line);
    border-left:3px solid transparent;
    border-radius:4px;
    scroll-snap-align:start;
  }
  .place-button--office{border-left-color:rgba(205,32,38,.32)}
  .place-button--entity{border-left-color:rgba(224,172,38,.4)}
  .place-button--project{border-left-color:rgba(7,113,135,.32)}
  .place-button:hover,.place-button[aria-selected="true"]{padding-left:11px;border-left-color:var(--aurum-gold)}
  .place-type{display:none}
  .place-name{font-size:14px;white-space:nowrap}
  .footprint-stage{order:1;padding:26px 14px 14px}
  .stage-heading{padding:0 5px}.stage-heading h2{font-size:clamp(36px,10vw,56px)}
  .map-legend{padding:9px}.map-legend span{font-size:7px}
  .orbit-map{width:112%;margin-left:-6%;aspect-ratio:1/1.12;margin-top:8px}
  .orbit-three{width:82%}.orbit-two{width:63%}.orbit-one{width:44%}
  .orbit-centre{width:104px;border-width:5px}.orbit-centre img{width:58px;height:50px}
  .orbit-centre strong{bottom:-28px;font-size:15px}.orbit-centre span{top:-24px}
  .orbit-node{width:76px;gap:5px}.node-disc{width:46px;border-width:3px}.orbit-node b{font-size:9px}
  .pos-n{top:6%}.pos-ne{right:8%;top:17%}.pos-e{right:0;top:46%}.pos-se{right:7%;bottom:12%}
  .pos-s{bottom:3%}.pos-sw{left:7%;bottom:12%}.pos-w{left:0;top:46%}.pos-nw{left:8%;top:17%}
  .explore-hint{margin:-10px 6px 16px}
  .place-detail{padding:24px 20px}
  .place-detail-head{align-items:start}
  .detail-grid{grid-template-columns:1fr}
  .detail-block,.detail-block:first-child,.detail-block:last-child,.detail-block:nth-child(2),.detail-block:nth-child(3){
    grid-column:auto;
    padding:15px 0;
    margin:0;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .detail-block:last-child{border-bottom:0;padding-bottom:0}
}
@media(max-width:480px){
  .footprint-intro{padding-left:20px;padding-right:20px}
  /* 2026-08-16: below ~480px the h1 column got too narrow for its own
     font-size, wrapping onto 6+ lines — with .stage-heading's base
     align-items:center still in effect, the short .map-legend box then
     centred itself against that full wrapped height and landed visually on
     top of the middle lines of text. Stacking instead of sitting side by
     side avoids the overlap entirely; .map-legend already switches to a
     horizontal row layout at this width (see the max-width:850px block),
     so it reads as a tidy strip under the heading rather than a sidebar. */
  .stage-heading{display:grid;grid-template-columns:1fr;gap:14px}
  .stage-heading h2{font-size:40px}.stage-heading .eyebrow{font-size:8px}
  .map-legend{transform:none;align-self:start}
  .orbit-map{width:110%;margin-left:-5%}
  .pos-e{right:2%}.pos-w{left:2%}
}
@media(prefers-reduced-motion:reduce){
  .place-button,.node-disc{transition:none}
}
/* Client audit map requirement: real clickable countries, not an illustrative diagram. */
.footprint-explorer{padding-top:clamp(14px,1.6vw,22px)}
/* 2026-08-11: three earlier passes at this (align-self:stretch + height:100%,
   then align-self:stretch alone, then + min-height:0) all failed because a
   CSS-grid auto row track sizes itself from EVERY item's own max-content
   size, regardless of align-self or min-height — min-height only affects an
   item's floor, not what it contributes to track sizing. With no cap here,
   .place-list's full unclipped list (all 27 buttons, ~1860px) was what set
   the row height, which is why the list looked "right" but the map/detail
   column then got stretched (align-self:stretch) down to match that same
   inflated row, leaving a big blank gap under the real map content.
   max-height DOES cap what an item contributes to auto track sizing (this
   is how the original static max-height:920px build worked correctly,
   before it was pulled out for being the wrong fixed number for every
   country's detail-card height). So the real fix keeps max-height, but sets
   it dynamically from JS (see syncPanelHeight() in footprint.js) to exactly
   match .footprint-stage's own rendered height every time that height can
   change: on load, after the map SVG loads, whenever a country is selected
   (detail-card height varies by country), and on resize. The value below is
   just the pre-JS fallback so nothing balloons before that script runs. */
.place-list{display:flex;flex-direction:column;min-height:0;max-height:640px}
.place-list [data-place-list]{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.stage-heading h1{margin:12px 0 0;max-width:840px;font-size:clamp(38px,4.2vw,64px);line-height:.94;letter-spacing:-.055em}
.stage-heading h1 em{color:var(--aurum-red);font-family:var(--font-secondary)}
.legend-dot.project{background:var(--aurum-teal)}
.world-map-shell{position:relative;margin:clamp(14px,1.8vw,22px) 0 20px;padding:clamp(10px,1.2vw,18px);border:1px solid rgba(25,22,19,.1);border-radius:14px;background:#fff}
.world-map-scroll{position:relative}
/* Country-name callout for the interactive map: positioned in JS against
   the selected <path>'s bounding box (see selectCountry() in footprint.js),
   shown whenever a country is selected from the map or the list. */
/* 2026-08-16: client wants this callout big enough to also carry each
   country's Related work links (see mapTooltipMarkup() in footprint.js),
   not just the bare name — was a fixed-height nowrap pill, now a small
   card that grows with its content. max-width + wrapping keep it from
   spanning the whole globe when a country has several project links. */
.map-tooltip{
  position:absolute;
  z-index:6;
  top:0;
  left:0;
  transform:translate(-50%,calc(-100% - 16px));
  width:max-content;
  max-width:min(180px,52vw);
  padding:10px 13px;
  border-radius:12px;
  background:var(--aurum-red);
  color:#fff;
  font-family:"Cabinet Grotesk",var(--font-primary),Arial,sans-serif;
  text-align:left;
  white-space:normal;
  box-shadow:0 12px 26px rgba(25,22,19,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.map-tooltip.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,calc(-100% - 22px))}
.map-tooltip-name{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
}
.map-tooltip-related{
  display:block;
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.28);
  color:var(--aurum-gold);
  font-size:7.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.map-tooltip-links{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.map-tooltip-more{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.7);
  font-size:9px;
  font-style:italic;
}
/* !important on color: modern-refresh.css has a sitewide
   "a, a:visited{color:inherit!important}" rule (added for .health-link's
   visited-state) that otherwise wins regardless of specificity here and
   forces these to inherit .map-tooltip's white — invisible on the white
   pill background.
   2026-08-16: color is a literal hex, not var(--aurum-red), on purpose —
   traced the "some pills have no visible text" bug all the way down to
   the CSS custom property itself: forcing a literal #CD2026 (confirmed
   live via devtools to be var(--aurum-red)'s own resolved value) fixed
   pills that were reproducibly blank with the var() version, in the same
   browser, same page, same everything else unchanged. Whatever the exact
   mechanism, this is the confirmed, tested fix — don't change it back to
   var(--aurum-red) without re-testing in an actual browser (not just
   checking getComputedStyle, which reported the var() version as correct
   even while it was visibly failing to paint). */
.map-tooltip-links a{
  display:block;
  padding:5px 10px;
  border-radius:999px;
  background:#fff;
  color:#CD2026!important;
  font-family:var(--font-primary);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .2s ease,color .2s ease;
}
.map-tooltip-links a:hover,.map-tooltip-links a:focus-visible{background:var(--aurum-gold);color:#191613!important}
/* Plain, non-clickable chip for project geographies with no dedicated page
   (see workMarkup()/mapTooltipMarkup() in footprint.js) — same shape as the
   pill links above, dimmed, no hover state, so it doesn't read as a broken
   link. */
.map-tooltip-links .map-tooltip-label{
  background:transparent;
  border:1px solid rgba(255,255,255,.4);
  color:rgba(255,255,255,.75)!important;
  cursor:default;
}
/* 2026-08-17: ambient flag marker for a country as it rotates past
   front-center on its own (see onAutoPopup in rotating-globe.js) — a small
   real flag, no name, distinct from .map-tooltip (which carries the name +
   Related work and only appears once a country is actually clicked). */
.map-auto-popup{
  position:absolute;
  z-index:5;
  top:0;
  left:0;
  width:30px;
  height:20px;
  border-radius:4px;
  overflow:hidden;
  transform:translate(-50%,-50%) scale(.7);
  box-shadow:0 3px 10px rgba(25,22,19,.35),0 0 0 1.5px rgba(255,255,255,.92);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.map-auto-popup.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
.map-auto-popup-flag{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:850px){.map-auto-popup{width:24px;height:16px}}

.map-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:0;
  height:0;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:var(--aurum-red);
}
@media(max-width:850px){
  .map-tooltip{max-width:min(150px,50vw);padding:9px 11px}
  .map-tooltip-name{font-size:12px}
  .map-tooltip-links a{font-size:9px;padding:4px 8px}
}
/* 2026-08-16: client feedback — the callout used to float directly ON the
   globe (glued to the selected country's rotated screen position), which
   sat on top of neighbouring countries and blocked clicking them. On
   desktop, where there's room, it now docks as a permanent side panel next
   to the globe instead — .map-tooltip becomes a normal flex item (not an
   absolutely-positioned overlay) with a fixed flex-basis, so the globe's
   own size stays constant whether or not the panel has content.
   Then: client feedback again — most of the ~27 locations have no
   Related work at all, and a permanent panel with nothing useful in it
   was pointless clutter. So the docked treatment below is scoped to
   .map-tooltip--docked, a class positionMapLabel() in footprint.js only
   adds on desktop AND when the selected country actually has work[]
   entries — everything else (including desktop) falls through to the
   plain .map-tooltip rules above: the original small floating name-only
   pin, unchanged. Placed AFTER the base/mobile .map-tooltip rules above
   (same specificity, so source order decides) so this still wins for the
   countries it does apply to. */
@media(min-width:851px){
  /* 2026-08-17: client wants the map itself bigger — this used to reserve a
     permanent ~215px side column for the docked panel, which capped the
     map's own width. The panel now docks as a full-width bar ABOVE the map
     instead (order:-1), so .world-map-scroll can claim the whole shell
     width and the map grows accordingly. */
  .world-map-shell{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}
  .world-map-scroll{width:100%}
  .map-tooltip--docked{
    position:static;
    order:-1;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:12px 18px;
    width:100%;
    max-width:none;
    margin:0;
    padding:12px 20px;
    transform:none;
  }
  .map-tooltip--docked.is-visible{transform:none}
  .map-tooltip--docked::after{display:none}
  .map-tooltip--docked .map-tooltip-name{flex:0 0 auto}
  .map-tooltip--docked .map-tooltip-related{
    flex:0 0 auto;
    margin:0;
    padding:0 0 0 16px;
    border-top:none;
    border-left:1px solid rgba(255,255,255,.28);
  }
  .map-tooltip--docked .map-tooltip-links{flex-direction:row;flex-wrap:wrap;margin-top:0}
}
.world-map{min-height:560px;display:grid;place-items:center}
/* 2026-08-16: the globe could already be zoomed (ctrl/cmd+scroll), but
   nothing visible said so — client asked for a discoverable way in. Two
   stacked circular buttons, matching the circular icon-button language
   used elsewhere on the site (nav search toggle, hero slider arrows).
   Anchored to .world-map-scroll (not .world-map-shell) so it stays glued
   to the globe itself regardless of the side panel's presence at desktop
   widths — .world-map-shell's own padding no longer needs compensating
   for since this sits inside a different, unpadded parent now. */
.map-zoom-controls{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:6;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.map-zoom-controls button{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(25,22,19,.18);
  background:#fff;
  color:var(--aurum-ink);
  font-size:18px;
  line-height:1;
  display:grid;
  place-items:center;
  box-shadow:0 8px 20px rgba(25,22,19,.12);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.map-zoom-controls button:hover,.map-zoom-controls button:focus-visible{background:var(--aurum-red);border-color:transparent;color:#fff}
@media(max-width:850px){
  .map-zoom-controls{right:16px;bottom:16px}
  .map-zoom-controls button{width:34px;height:34px;font-size:16px}
}
/* touch-action:none hands single-finger drag entirely to rotating-globe.js's
   own touch handlers instead of letting the browser also try to scroll the
   page with it — without this, dragging the globe on a touchscreen fights
   the page's native scroll gesture. */
.world-map canvas{display:block;width:100%;height:auto;max-height:620px;touch-action:none}
.world-map svg{display:block;width:100%;height:auto;max-height:880px}
.world-map svg path{fill:#d8d4cb;stroke:#fbf8f1;stroke-width:.7;vector-effect:non-scaling-stroke;transition:fill .18s ease,filter .18s ease,stroke .18s ease}
.world-map svg path.is-location{cursor:pointer;stroke:#fff;stroke-width:1.1}
.world-map svg path.is-project{fill:var(--aurum-teal)}
.world-map svg path.is-office{fill:var(--aurum-red)}
.world-map svg path.is-entity{fill:var(--aurum-gold)}
.world-map svg path.is-location:hover,
.world-map svg path.is-location:focus,
.world-map svg path.is-location.is-active{fill:#171412;stroke:var(--aurum-gold);stroke-width:2.4;filter:drop-shadow(0 3px 5px rgba(25,22,19,.28));outline:none}
/* 2026-08-17: South Africa zoom-in detail view — a flat 2D map (sa-map.js)
   that crossfades over the 3D globe canvas rather than replacing/reflowing
   the layout, so "zooming in" reads as diving into the same space rather
   than navigating to a different section. .sa-map sits absolutely inset
   over .world-map-scroll (which sizes itself off .world-map, still in
   normal flow underneath), and .sa-mode on the shell drives the crossfade
   both ways. */
.sa-map{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s ease;border-radius:8px;overflow:hidden}
.world-map-shell.sa-mode .world-map{opacity:0;pointer-events:none;transition:opacity .5s ease}
.world-map-shell.sa-mode .sa-map{opacity:1;pointer-events:auto}
.sa-map canvas{display:block;width:100%;height:auto}
.sa-enter-hint[hidden],.sa-exit-button[hidden]{display:none}
.sa-enter-hint,.sa-exit-button{
  position:absolute;
  left:14px;
  top:14px;
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px 10px 14px;
  border-radius:999px;
  border:none;
  background:rgba(23,20,18,.86);
  color:#fff;
  font-family:var(--font-primary);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow:0 8px 20px rgba(25,22,19,.2);
  transition:background .2s ease,opacity .2s ease,transform .2s ease;
}
.sa-enter-hint .aurum-arrow-icon{transform:rotate(45deg)}
.sa-exit-button .aurum-arrow-icon{transform:scaleX(-1)}
.sa-enter-hint:hover,.sa-exit-button:hover,.sa-enter-hint:focus-visible,.sa-exit-button:focus-visible{background:var(--aurum-red)}
/* Gentle pulse instead of a static label — the only cue that South Africa
   specifically (not the globe generally) has more detail to zoom into. */
.sa-enter-hint{animation:sa-hint-pulse 2.6s ease-in-out infinite}
@keyframes sa-hint-pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.sa-enter-hint{animation:none}}
.sa-programme-tags{display:flex;flex-wrap:wrap;gap:8px}
.sa-programme-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid color-mix(in srgb, var(--tag-color) 55%, transparent);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.03em;
}
.sa-programme-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tag-color);flex:none}
@media(max-width:850px){
  .sa-enter-hint,.sa-exit-button{left:10px;top:10px;font-size:10px;padding:8px 13px 8px 11px}
}
.map-error{max-width:460px;text-align:center;color:#625d56}
.map-preview-note{max-width:480px;text-align:center;padding:22px 24px;border-radius:10px;background:#fff;border:1px solid rgba(224,172,38,.32)}
.map-preview-note p{margin:0 0 10px;font-size:14px;line-height:1.55;color:#625d56}
.map-preview-note p:last-child{margin-bottom:0}
.map-preview-note strong{color:var(--aurum-ink);font-size:15px}
.detail-block li a{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.32)}
.detail-block li a:hover,.detail-block li a:focus{color:var(--aurum-gold);border-bottom-color:var(--aurum-gold)}
.global-reach{padding-top:clamp(42px,5vw,70px)!important}
@media(max-width:850px){
  .footprint-explorer{padding-top:14px}
  .footprint-stage{padding:28px 18px;overflow:visible}
  .stage-heading{display:grid}
  .stage-heading h1{font-size:clamp(34px,10.5vw,48px)}
  .map-legend{flex-direction:row;flex-wrap:wrap}
  /* 2026-08-09: the OLD flat SVG map needed horizontal scroll on narrow
     screens (it was wider than the viewport). The canvas globe replacing it
     (2026-08-15) is circular and sizes itself to whatever width its
     container reports — see setupCanvas() in rotating-globe.js — so forcing
     a 700px min-width here no longer keeps anything legible, it just
     starves the globe of the width it could otherwise measure and use,
     leaving it undersized inside a horizontally-scrolling strip. Globe just
     needs to fit the viewport width like everything else on mobile. */
  .world-map-shell{margin-top:26px;padding:8px}
  .world-map-scroll{overflow:visible}
  .world-map{min-height:0}
  .world-map svg{max-height:none}
  .explore-hint{margin-top:12px}
  .place-list{max-height:none}
  .place-list [data-place-list]{overflow-x:auto;overflow-y:hidden}
}