:root{--color-text-tertiary:#94a3b8}
/*
 * Country landing pages (CountryLandingPage.jsx) — the client's 14-market
 * "Global Country Page" handoff.
 *
 * Almost nothing lives here on purpose. The page is built from the section
 * blocks the site's own country pages already use (.us-intro,
 * .us-section-head, .grid-3/.grid-4, .us-service-card, .svc-service-card +
 * .us-image-card, .us-contact), all of which are defined in
 * assets/content.css and already loaded by every country page. This file
 * only carries the handful of things content.css has no equivalent for.
 *
 * Section padding runs tighter than the 96px sitewide default, same
 * reasoning (and same ratio) as CountryPage.jsx's own inline override:
 * six sections back to back at full size read as too sparse.
 */
.ctry-page .section {
  padding-top: calc(var(--space-96) * 0.6) !important;
  padding-bottom: calc(var(--space-96) * 0.6) !important;
}

.ctry-page .section--tight {
  padding-top: calc(var(--space-80) * 0.6) !important;
  padding-bottom: calc(var(--space-80) * 0.6) !important;
}

/* The credibility strip belongs to the hero block, not to the page body —
   it reads as a band under the hero rather than a section of its own.
   One continuous panel divided by hairlines, per the handoff doc's mockup,
   rather than four separate cards floating in a row. (About's .metric-strip
   is the same device, but it is scoped to .handoff-page and so can't be
   reused directly here.) */
.ctry-credibility {
  background: var(--color-surface-card);
  border-bottom: var(--border-thin) solid var(--color-border-light);
}

.ctry-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--border-thin);
  background: var(--color-border-light);
  border: var(--border-thin) solid var(--color-border-light);
  border-radius: var(--radius-large);
  overflow: hidden;
}

.ctry-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-24);
  background: var(--color-surface-card);
}

.ctry-strip__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  color: var(--color-text-primary);
  text-wrap: balance;
  /* Three of the four labels wrap to two lines; the short one would
     otherwise centre on its own and sit off the others' first baseline. */
  min-height: 2.7em;
}

/* content.css holds .grid-4 at four columns down to 900px. At ~1024px that
   leaves each card about 220px, which wraps these labels and the Solutions
   titles onto a third line and breaks the row's shared baseline. Both drop
   to two columns earlier here instead. */
/* Lower bound matters: content.css takes .grid-4 to a single column at
   639px with a lower-specificity selector, so an unbounded rule here would
   outrank it and hold two cramped columns on phones. */
@media (min-width: 640px) and (max-width: 1100px) {
  .ctry-strip,
  .ctry-page .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .ctry-strip {
    grid-template-columns: 1fr;
  }
}

/* ---- Water Challenges: the "Ion Exchange response" line ----
   .us-image-card__body gives every <p> flex:1 so the description fills the
   card; the response line opts out and pins to the bottom instead, so the
   rules line up across all three cards whatever the description length. */
.us-image-card__body > .ctry-response {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-20) 0 0;
  padding-top: var(--space-16);
  border-top: var(--border-thin) solid var(--color-border-light);
}

/* Titles and response values run to one or two lines depending on the
   market's wording. The card, its photo and its body already align across
   the row; without a reserved second line the varying line counts shift
   the description down on some cards and lift the response rule on others.
   Reserving the second line holds every element on one baseline.

   A reserve has to be two line-boxes, not two font-sizes: em resolves
   against font-size, so the multiplier is the element's own line-height
   doubled. The heading runs 1.3, the caption 1.5. */
.ctry-challenge-card .us-image-card__body h3 {
  min-height: 2.6em;
}

.ctry-challenge-card .ctry-response .ds-caption {
  min-height: 3em;
}

/* ---- Solutions cards ----
   .us-service-card__head sets the icon beside the title, which works in the
   three-across grid it was built for. Solutions run four-across, leaving
   ~176px beside the 44px icon — enough to wrap a title onto three lines,
   strand the icon against it and push that card's body copy out of line
   with its neighbours. Stacking the icon above the title gives the title
   the full card width and levels the bodies again. Scoped to .ctry-page so
   the shared three-across usage elsewhere is untouched. */
.ctry-page .us-service-card__head {
  flex-direction: column;
  gap: var(--space-16);
  min-height: 0;
  margin-bottom: var(--space-4);
}

/* Most of these titles run to two lines, so reserving the second line keeps
   the body copy on one baseline instead of the shortest title lifting its
   card's paragraph above its neighbours'. Applied at every width on
   purpose: the card is narrow enough to wrap at four-across and again at
   two-across on tablets, and only in the ~900-1100px band do all four fit
   on one line. Holding the reserve everywhere costs a little space in that
   one band and keeps the row aligned in all the others. */
.ctry-page .us-service-card__title {
  min-height: 2.6em;
}

/* ---- Priority Industries: the industry selector ----
   The pills are a tablist over the photo panel beside them. Everything below
   is state on the existing chip design rather than a new one — the resting
   pill is unchanged from when these were static <span>s. */
.ctry-industries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.ctry-industries__pill {
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-pill);
  border: var(--border-thin) solid var(--color-border-medium);
  background: transparent;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

/* Hover is an invitation to select, so it excludes the pill that is already
   selected — that one is filled with the brand colour and has nothing to
   invite. Without :not(), hovering it would tint its border and text toward
   a colour it is already sitting on. */
.ctry-industries__pill:not(.is-active):hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
}

.ctry-industries__pill:focus-visible {
  outline: var(--border-thick) solid var(--color-state-focus-ring);
  outline-offset: 2px;
}

/* The selected pill is the section's one filled element, so it reads as the
   thing driving the photograph rather than as one chip among equals. */
.ctry-industries__pill.is-active {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

/* .us-intro__visual carries a dark gradient wash for the chips the live
   country pages overlay on it. The Industries panel has no chips over the
   photo, so it opts out of the wash. */
.us-intro__visual--plain::after {
  display: none;
}

/* .us-intro__visual is already position:relative with a fixed min-height and
   overflow:hidden, so stacking the shots inside it costs no layout work and
   switching cannot change the section's height. Its `> img` rule only reaches
   direct children, so the nested images get their own fill rule here. */
.ctry-industries__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* visibility (not display) so the fade still runs, and so the hidden shots
     leave the accessibility tree and the tab order without any aria juggling.
     It flips instantly on the way in and waits out the fade on the way out. */
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.ctry-industries__shot.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0s;
}

.ctry-industries__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .ctry-industries__pill,
  .ctry-industries__shot {
    transition: none;
  }
}

/* ---- Proven Performance: unvalidated references ----
   Markets with no client-validated named reference yet get a labelled
   placeholder in the card's media slot — never a stand-in photograph
   presented as the market's own project. */
.ctry-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-12);
  height: 210px;
  padding: var(--space-24);
  text-align: center;
  background: var(--color-surface-neutral-light);
  border-bottom: var(--border-thin) solid var(--color-border-light);
  color: var(--color-text-tertiary);
}

/* A placeholder card has no tag or title to sit above its text, so its
   paragraph would otherwise start midway between a real card's tag and
   title and read as floating. Dropping the leading margin starts it on the
   same line as the real cards' first line of text. It deliberately does not
   mimic the full case-study structure — there is no validated title to put
   there, and inventing one is exactly what a placeholder exists to avoid. */
.ctry-pending-card .us-image-card__body > p:first-child {
  margin-top: 0;
}

.ctry-placeholder__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* .us-image-card__body is a flex column sized for image cards that lead with
   a heading; the case cards lead with a small tag above it. */
.us-image-card__body > .us-case-study-card__tag {
  margin-bottom: var(--space-8);
}

/* This page's CTA column holds a single button rather than the contact
   detail list .us-contact__inner is otherwise laid out for. */
.ctry-page .us-contact__inner {
  align-items: center;
}

/* The Regional contact band that closes each landing page (added by
   scripts/apply-country-reps.mjs) keeps the sub-pages' top alignment. */
.ctry-page #regional-contact .us-contact__inner {
  align-items: start;
}

.us-image-card__body > .ds-caption {
  margin-top: var(--space-12);
  color: var(--color-text-tertiary);
}

/* Hero provenance caption (PageBanner imageCaption) — the client's Oct 2026
   change doc asks unverified hero photography to be labelled illustrative
   rather than implying a local installation. Sits over the photo's bottom
   corner, clear of the left copy column and the frost gradient. */
.page-banner {
  position: relative;
}

.page-banner__media-caption {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(10, 22, 40, 0.55);
  padding: 4px 10px;
  border-radius: 4px;
  pointer-events: none;
}