/* =========================================================================
   Country sub-page — Mastercard-faithful pathway page (e.g. C-11).

   Inherits hero / stats card / oval feature block / dark CTA from
   country-hub.css + mc-opportunity.css via the shared .ao-mc-page body class.

   This file styles only the NEW components introduced by this template:
     • Stat units
     • How it works (H2 left, body right)
     • Value framework band (Earn · Keep · Grow · Preserve)
     • Statement band spacing on sub-pages
     • Poster section (2-col, huge headline + intro)
     • Tile grid (white rounded cards, icon ring)
     • Process 4-up grid (flat, 2x2)
     • Use-case 3-up cards (image + UPPERCASE tag + caption)
   ========================================================================= */

/* ── 0. Stats + optional section header ─────────────────────────────────── */

body.ao-mc-page .ao-country-subpage__stats .ao-country-hub__sechead {
  margin-bottom: var(--sp-8);
}

/* ── 1. Stat number variants: unit ───────────────────────────────────────── */

.ao-country-subpage__stat-unit {
  font-size: 0.45em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #525252;
  margin-left: 0.15em;
  vertical-align: 0.18em;
}

/* ── 1b. How it works — headline left, body right (Tap on Phone pattern) ─ */

body.ao-mc-page .ao-country-subpage__hiw {
  background: var(--ao-home-canvas);
  padding: clamp(var(--sp-12), 6vw, var(--sp-16)) 0;
}

.ao-country-subpage__hiw-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(var(--sp-8), 5vw, var(--sp-12));
  align-items: start;
}

@media (max-width: 900px) {
  .ao-country-subpage__hiw-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}

.ao-country-subpage__hiw-headline {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-strong);
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  max-width: 18ch;
  text-wrap: balance;
}

.ao-country-subpage__hiw-body {
  margin: 0;
}

.ao-country-subpage__hiw-body p {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  color: #404040;
  max-width: 52ch;
  font-weight: 400;
  text-wrap: pretty;
}

/* ── 1c. Statement band — tighter rhythm on sub-pages than opportunity pages */

body.ao-mc-page .ao-country-subpage__statement {
  padding: clamp(var(--sp-12), 6vw, var(--sp-16)) 0;
}

/* ── 2. Poster section ──────────────────────────────────────────────────── */
/* Mastercard "Simple, safe and low-cost payments" pattern: huge bold
   headline takes 60% of the row LEFT, short intro paragraph sits to the
   right, baseline-anchored at the bottom. No chrome, on canvas. */

body.ao-mc-page .ao-country-subpage__poster {
  background: var(--ao-home-canvas);
  padding: clamp(var(--sp-20), 10vw, var(--sp-24)) 0;
}

.ao-country-subpage__poster-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(var(--sp-8), 5vw, var(--sp-12));
  align-items: end;
}

@media (max-width: 900px) {
  .ao-country-subpage__poster-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

.ao-country-subpage__poster-headline {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #0a0a0a;
  max-width: 14ch;
  text-wrap: balance;
}

.ao-country-subpage__poster-intro {
  margin: 0;
  font-size: clamp(1.0625rem, 1.45vw, 1.1875rem);
  line-height: 1.55;
  color: #404040;
  max-width: 42ch;
  font-weight: 400;
  padding-bottom: 0.3em;
  text-wrap: pretty;
}

/* ── 2b. Tile grid — white cards (Community Pass pattern) ──────────────── */

body.ao-mc-page .ao-country-subpage__tiles {
  background: var(--ao-home-canvas);
  padding: clamp(var(--sp-12), 7vw, var(--sp-16)) 0;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.ao-country-subpage__tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--sp-5), 2.5vw, var(--sp-6));
  margin-top: var(--sp-4);
}

@media (max-width: 900px) {
  .ao-country-subpage__tiles-grid {
    grid-template-columns: 1fr;
  }
}

.ao-country-subpage__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: clamp(var(--sp-6), 3vw, var(--sp-8));
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(10, 10, 10, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  height: 100%;
}

/* Linked-tile variant: tile carries a "Learn more →" anchor at the bottom.
   Body grows so the link sits flush at the foot of the card, and the whole
   card lifts on hover to signal interactivity (mirrors .ao-country-subpage__cg-card). */
.ao-country-subpage__tile--linked {
  transition: transform var(--t-base) var(--ease-smooth),
              box-shadow var(--t-base) var(--ease-smooth),
              border-color var(--t-base) var(--ease-smooth);
}

.ao-country-subpage__tile--linked:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.06);
  border-color: rgba(10, 10, 10, 0.10);
}

.ao-country-subpage__tile--linked .ao-country-subpage__tile-body {
  flex: 1;
}

.ao-country-subpage__tile-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--sp-5);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0a0a0a;
  text-decoration: none;
  transition: color var(--t-fast);
}

.ao-country-subpage__tile-link:hover { color: var(--c-accent, #ff5f00); }

.ao-country-subpage__tile-arrow { transition: transform var(--t-fast); }
.ao-country-subpage__tile-link:hover .ao-country-subpage__tile-arrow { transform: translateX(3px); }

.ao-country-subpage__tile-icon-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-5);
  border-radius: 50%;
  border: 1.5px solid var(--c-accent, #ff5f00);
  color: var(--c-accent, #ff5f00);
  flex-shrink: 0;
}

.ao-country-subpage__tile-icon svg {
  display: block;
}

.ao-country-subpage__tile-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-strong);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  text-wrap: balance;
}

.ao-country-subpage__tile-body {
  margin: 0;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.5;
  color: #525252;
  max-width: 36ch;
  font-weight: 400;
}

/* ── 3. Process 4-up grid ────────────────────────────────────────────────── */
/* Mastercard "Contactless / Paperless / No terminal / Solution" pattern.
   Flat 2x2 grid on canvas. No card chrome. Thin icon, bold title,
   short body. Generous gutters. Centered text alignment like MC. */

body.ao-mc-page .ao-country-subpage__process {
  background: var(--ao-home-canvas);
  padding: clamp(var(--sp-16), 8vw, var(--sp-20)) 0;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.ao-country-subpage__process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-10), 5vw, var(--sp-16)) clamp(var(--sp-8), 5vw, var(--sp-12));
  margin-top: var(--sp-4);
}

@media (max-width: 900px) {
  .ao-country-subpage__process-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
}

.ao-country-subpage__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-2) 0;
}

.ao-country-subpage__step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
  color: var(--c-accent, #ff5f00);
}

.ao-country-subpage__step-icon svg {
  display: block;
}

.ao-country-subpage__step-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-weight: var(--fw-heading);
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  max-width: 22ch;
  text-wrap: balance;
}

.ao-country-subpage__step-body {
  margin: 0;
  font-size: clamp(0.95rem, 1.3vw, 1.0625rem);
  line-height: 1.5;
  color: #525252;
  max-width: 34ch;
  font-weight: 400;
}

/* ── 5. Use-case 3-up cards ─────────────────────────────────────────────── */
/* Mastercard "EVENTS AND CHARITY / CASH-ONLY MERCHANT / CURBSIDE PICKUP"
   pattern. Image (rounded rectangle) + tiny uppercase tag + short caption.
   No card chrome. */

body.ao-mc-page .ao-country-subpage__cases {
  background: var(--ao-home-canvas);
  padding: clamp(var(--sp-12), 7vw, var(--sp-16)) 0 clamp(var(--sp-16), 9vw, var(--sp-20));
}

.ao-country-subpage__cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--sp-6), 3.5vw, var(--sp-10));
  margin-top: var(--sp-4);
}

@media (max-width: 900px) {
  .ao-country-subpage__cases-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

.ao-country-subpage__case {
  display: flex;
  flex-direction: column;
}

.ao-country-subpage__case-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: #e8e0d4;
  margin-bottom: var(--sp-5);
}

.ao-country-subpage__case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-smooth);
}

.ao-country-subpage__case:hover .ao-country-subpage__case-media img {
  transform: scale(1.03);
}

.ao-country-subpage__case-tag {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #525252;
}

.ao-country-subpage__case-body {
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.45;
  color: #0a0a0a;
  max-width: 28ch;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ── 6. Closer (single oval) — needs less top padding since it follows cases */

body.ao-mc-page .ao-country-subpage__closer.ao-country-hub__features {
  padding-top: 0;
}

/* ── 9. Image band (overlay text on rounded image) ───────────────────────
   Mastercard "Merchant Cloud enables payments worldwide" pattern. */

body.ao-mc-page .ao-country-subpage__imageband {
  background: var(--ao-home-canvas);
  padding: clamp(var(--sp-12), 7vw, var(--sp-16)) 0;
}

.ao-country-subpage__imageband-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 32px;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
}

@media (max-width: 900px) {
  .ao-country-subpage__imageband-stage {
    aspect-ratio: 4 / 5;
    border-radius: 24px;
  }
}

.ao-country-subpage__imageband-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ao-country-subpage__imageband-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.30) 45%, rgba(0, 0, 0, 0) 70%);
}

.ao-country-subpage__imageband-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(var(--sp-6), 5vw, var(--sp-12));
  color: #ffffff;
  max-width: 55%;
}

@media (max-width: 900px) {
  .ao-country-subpage__imageband-content {
    max-width: 100%;
    justify-content: flex-end;
  }
}

.ao-country-subpage__imageband-eyebrow {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
}

.ao-country-subpage__imageband-headline {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-strong);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #ffffff;
  max-width: 22ch;
  text-wrap: balance;
}

.ao-country-subpage__imageband-lead {
  margin: 0 0 var(--sp-6);
  font-size: clamp(0.95rem, 1.35vw, 1.0625rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 44ch;
  font-weight: 400;
}

.ao-country-subpage__imageband-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.6rem;
  background: #ffffff;
  color: #0a0a0a;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.ao-country-subpage__imageband-cta:hover {
  background: #0a0a0a;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ── 10. White panel (4-up image cards inside one panel) ─────────────────
   Mastercard "Optimize payments and liquidity" pattern. */

body.ao-mc-page .ao-country-subpage__panel {
  background: var(--ao-home-canvas);
  padding: clamp(var(--sp-12), 7vw, var(--sp-16)) 0;
}

.ao-country-subpage__panel-card {
  background: #ffffff;
  border-radius: 32px;
  border: 1px solid rgba(10, 10, 10, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  padding: clamp(var(--sp-8), 5vw, var(--sp-16));
}

.ao-country-subpage__panel-headline {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-strong);
  font-size: clamp(1.875rem, 4.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: #0a0a0a;
  max-width: 18ch;
  text-wrap: balance;
}

.ao-country-subpage__panel-sub {
  margin: 0 0 var(--sp-10);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.55;
  color: #525252;
  max-width: 60ch;
  font-weight: 400;
}

.ao-country-subpage__panel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(var(--sp-5), 2.5vw, var(--sp-8));
}

@media (max-width: 1100px) {
  .ao-country-subpage__panel-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .ao-country-subpage__panel-grid { grid-template-columns: 1fr; }
}

.ao-country-subpage__panel-item {
  display: flex;
  flex-direction: column;
}

.ao-country-subpage__panel-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: #e8e0d4;
  margin-bottom: var(--sp-5);
}

.ao-country-subpage__panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ao-country-subpage__panel-item-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-strong);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: #0a0a0a;
  max-width: 22ch;
  text-wrap: balance;
}

.ao-country-subpage__panel-item-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #525252;
  max-width: 32ch;
  font-weight: 400;
}

/* ── 11. Card grid (icon + title + body + arrow link) ─────────────────────
   Mastercard "Commercial cards / Travel cards / Purchasing cards" pattern. */

body.ao-mc-page .ao-country-subpage__cardgrid {
  background: var(--ao-home-canvas);
  padding: clamp(var(--sp-12), 7vw, var(--sp-16)) 0;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.ao-country-subpage__cardgrid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--sp-5), 2.5vw, var(--sp-6));
  margin-top: var(--sp-4);
}

@media (max-width: 900px) {
  .ao-country-subpage__cardgrid-grid { grid-template-columns: 1fr; }
}

.ao-country-subpage__cg-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(var(--sp-6), 3vw, var(--sp-8));
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(10, 10, 10, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  height: 100%;
  transition: transform var(--t-base) var(--ease-smooth),
              box-shadow var(--t-base) var(--ease-smooth),
              border-color var(--t-base) var(--ease-smooth);
}

.ao-country-subpage__cg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.06);
  border-color: rgba(10, 10, 10, 0.10);
}

.ao-country-subpage__cg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
  color: var(--c-accent, #ff5f00);
}

.ao-country-subpage__cg-icon svg { display: block; }

.ao-country-subpage__cg-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-strong);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  text-wrap: balance;
}

.ao-country-subpage__cg-body {
  margin: 0 0 var(--sp-5);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #525252;
  max-width: 38ch;
  font-weight: 400;
  flex: 1;
}

.ao-country-subpage__cg-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0a0a0a;
  text-decoration: none;
  transition: color var(--t-fast);
}

.ao-country-subpage__cg-link:hover { color: var(--c-accent, #ff5f00); }

.ao-country-subpage__cg-arrow { transition: transform var(--t-fast); }
.ao-country-subpage__cg-link:hover .ao-country-subpage__cg-arrow { transform: translateX(3px); }

/* ── 12. Image features (3-up image cards, no link) ──────────────────────
   Mastercard "How we drive innovation" pattern. */

body.ao-mc-page .ao-country-subpage__imgfeat {
  background: var(--ao-home-canvas);
  padding: clamp(var(--sp-12), 7vw, var(--sp-16)) 0;
}

.ao-country-subpage__imgfeat-headline {
  margin: 0 0 var(--sp-10);
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-strong);
  font-size: clamp(1.875rem, 4.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: #0a0a0a;
  max-width: 16ch;
  text-wrap: balance;
}

.ao-country-subpage__imgfeat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--sp-6), 3vw, var(--sp-8));
}

@media (max-width: 900px) {
  .ao-country-subpage__imgfeat-grid { grid-template-columns: 1fr; }
}

.ao-country-subpage__imgfeat-item {
  display: flex;
  flex-direction: column;
}

.ao-country-subpage__imgfeat-media {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 22px;
  overflow: hidden;
  background: #e8e0d4;
  margin-bottom: var(--sp-5);
}

.ao-country-subpage__imgfeat-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-smooth);
}

.ao-country-subpage__imgfeat-item:hover .ao-country-subpage__imgfeat-media img {
  transform: scale(1.03);
}

.ao-country-subpage__imgfeat-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-strong);
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  max-width: 22ch;
  text-wrap: balance;
}

.ao-country-subpage__imgfeat-body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #525252;
  max-width: 38ch;
  font-weight: 400;
}

/* ── 13. Circle icon row (3-up coral outline circles) ────────────────────
   Mastercard "Current focus areas" pattern. */

body.ao-mc-page .ao-country-subpage__circles {
  background: var(--ao-home-canvas);
  padding: clamp(var(--sp-12), 7vw, var(--sp-16)) 0;
}

.ao-country-subpage__circles-headline {
  margin: 0 0 var(--sp-12);
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-strong);
  font-size: clamp(1.875rem, 4.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: #0a0a0a;
  max-width: 18ch;
  text-wrap: balance;
}

.ao-country-subpage__circles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--sp-8), 5vw, var(--sp-12));
  justify-items: center;
}

@media (max-width: 900px) {
  .ao-country-subpage__circles-grid { grid-template-columns: 1fr; }
}

.ao-country-subpage__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ao-country-subpage__circle-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(140px, 16vw, 180px);
  height: clamp(140px, 16vw, 180px);
  border-radius: 50%;
  border: 1.25px solid var(--c-accent, #ff5f00);
  margin-bottom: var(--sp-5);
  color: var(--c-accent, #ff5f00);
}

.ao-country-subpage__circle-icon svg { display: block; }

.ao-country-subpage__circle-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-strong);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: #0a0a0a;
  max-width: 18ch;
  text-wrap: balance;
}

/* ── 14. Feature image card (formerly "dark_card") ────────────────────────
   Mastercard light-theme "feature story" pattern. The stage holds a
   full-strength image; only a small bottom-left gradient sits under the
   text panel for legibility. Reads as a vibrant photo card on cream —
   not a black section. The class names remain *darkcard* for backwards
   compatibility with the template + registry. */

body.ao-mc-page .ao-country-subpage__darkcard {
  background: var(--ao-home-canvas);
  padding: clamp(var(--sp-12), 7vw, var(--sp-16)) 0;
}

.ao-country-subpage__darkcard-section-h {
  margin: 0 0 var(--sp-8);
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-strong);
  font-size: clamp(1.875rem, 4.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: #0a0a0a;
  text-wrap: balance;
}

.ao-country-subpage__darkcard-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 28px;
  overflow: hidden;
  background: #f3ede5;
  box-shadow: 0 6px 28px rgba(10, 10, 10, 0.06);
}

@media (max-width: 900px) {
  .ao-country-subpage__darkcard-stage {
    aspect-ratio: 4 / 5;
    border-radius: 22px;
  }
}

.ao-country-subpage__darkcard-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
}

/* Minimal gradient — only enough darkening at the bottom-left to keep the
   text panel legible over varied imagery. No full overlay. */
.ao-country-subpage__darkcard-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,   rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.05) 45%, transparent 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.20) 0%, transparent 50%);
}

.ao-country-subpage__darkcard-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(var(--sp-6), 5vw, var(--sp-12));
  color: #ffffff;
  max-width: 55%;
}

@media (max-width: 900px) {
  .ao-country-subpage__darkcard-content {
    max-width: 100%;
  }
}

.ao-country-subpage__darkcard-eyebrow {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
}

.ao-country-subpage__darkcard-title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-strong);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #ffffff;
  max-width: 24ch;
  text-wrap: balance;
}

.ao-country-subpage__darkcard-body {
  margin: 0 0 var(--sp-6);
  font-size: clamp(0.95rem, 1.3vw, 1.0625rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  max-width: 46ch;
  font-weight: 400;
}

.ao-country-subpage__darkcard-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.7rem 1.6rem;
  background: #ffffff;
  color: #0a0a0a;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.ao-country-subpage__darkcard-cta:hover {
  background: transparent;
  color: #ffffff;
  box-shadow: inset 0 0 0 1.5px #ffffff;
  transform: translateY(-1px);
}

/* ── 15. Reduced motion ──────────────────────────────────────────────────
   The .ao-mc-page family already has a global motion-suppression in
   country-hub.css (covers transitions + animations). This block exists for
   belt-and-braces coverage of hover transforms specific to sub-page cards. */

@media (prefers-reduced-motion: reduce) {
  .ao-country-subpage__case:hover .ao-country-subpage__case-media img,
  .ao-country-subpage__imgfeat-item:hover .ao-country-subpage__imgfeat-media img,
  .ao-country-subpage__cg-card:hover,
  .ao-country-subpage__tile--linked:hover,
  .ao-country-subpage__tile-link:hover .ao-country-subpage__tile-arrow,
  .ao-country-subpage__darkcard-cta:hover,
  .ao-country-subpage__imageband-cta:hover {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION VARIANTS
   ════════════════════════════════════════════════════════════════════════════

   Each pattern can be rendered in several distinct visual variants by setting
   a `variant` key in the registry — the template echoes a BEM modifier class
   `.ao-country-subpage__<short>--<variant>` on the section element. The
   selectors below scope variant styles to that modifier so the *default*
   look is untouched.

   This is what lets two pages share a pattern type (closer, card_grid,
   stats, etc.) without sharing a look — the per-page Mastercard cadence.
   ──────────────────────────────────────────────────────────────────────── */

/* ── HERO VARIANTS ────────────────────────────────────────────────────────
   Default: full-bleed image with bottom-left content, dark scrim.
   Variants move the content (centered / right / top) or strip the image
   entirely (clean → minimal hero on cream). */

@media (min-width: 900px) {
  /* centered — content moves to centre horizontally */
  .ao-country-subpage__hero--centered .ao-home-hero__content {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: min(900px, 80vw);
  }
  .ao-country-subpage__hero--centered .ao-country-hub__hero-ctas {
    justify-content: center;
  }

  /* right — content moves to bottom-right; scrim mirror-flipped */
  .ao-country-subpage__hero--right .ao-home-hero__content {
    left: auto;
    right: clamp(2rem, 4.5vw, 5rem);
    text-align: right;
  }
  .ao-country-subpage__hero--right .ao-home-hero__scrim {
    background:
      linear-gradient(to top,   rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.08) 48%, transparent 100%),
      linear-gradient(to left,  rgba(0,0,0,0.32) 0%, transparent 55%);
  }
  .ao-country-subpage__hero--right .ao-country-hub__hero-ctas {
    justify-content: flex-end;
  }

  /* top — content moves to top-left; scrim flipped vertically */
  .ao-country-subpage__hero--top .ao-home-hero__content {
    bottom: auto;
    top: clamp(3.5rem, 8vh, 6rem);
  }
  .ao-country-subpage__hero--top .ao-home-hero__scrim {
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.08) 48%, transparent 100%),
      linear-gradient(to right,  rgba(0,0,0,0.32) 0%, transparent 55%);
  }
}

/* compact — shorter hero (≈65vh) with default content position. Useful for
   pages where the hero is a quick orient, not the main visual moment. */
.ao-country-subpage__hero--compact .ao-home-hero__stage {
  height: 65vh;
  min-height: 420px;
  max-height: 640px;
}

/* bright — image reads at full strength with only the minimum scrim
   needed for contrast under the text. Mood is open / optimistic — the
   opposite of "dim", and on-brand for the light theme. */
.ao-country-subpage__hero--bright .ao-home-hero__scrim {
  background:
    linear-gradient(to top,   rgba(0, 0, 0, 0.28) 0%, transparent 50%),
    linear-gradient(to right, rgba(0, 0, 0, 0.10) 0%, transparent 60%);
}

/* clean — light, image-less hero on cream: maximal typography moment */
.ao-country-subpage__hero--clean .ao-home-hero__media,
.ao-country-subpage__hero--clean .ao-home-hero__scrim {
  display: none;
}

.ao-country-subpage__hero--clean .ao-home-hero__stage {
  background: var(--ao-home-canvas, #f5f1ec);
  height: auto;
  min-height: 0;
  max-height: none;
  padding-block: clamp(var(--sp-16), 12vw, var(--sp-24));
  border-radius: 0;
}

.ao-country-subpage__hero--clean .ao-home-hero__content {
  position: static;
  max-width: min(960px, 92vw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 5rem);
  text-align: center;
}

.ao-country-subpage__hero--clean .ao-home-hero__headline,
.ao-country-subpage__hero--clean .ao-mc-opp-hero__lead,
.ao-country-subpage__hero--clean .ao-home-hero__eyebrow {
  color: #0a0a0a;
}

.ao-country-subpage__hero--clean .ao-home-hero__eyebrow .ao-home-kicker__dot {
  background: var(--c-accent, #ff5f00);
}

.ao-country-subpage__hero--clean .ao-country-hub__hero-ctas {
  justify-content: center;
}

/* ── STATS VARIANTS ───────────────────────────────────────────────────────
   Default: 3 white rounded cards on cream.
   All variants stay inside the Mastercard light palette — no dark fills.
   bordered → hairline outline cards (no fill, no shadow).
   accent   → coral-light tinted cards (warm wash).
   flat     → no cards; numbers separated by a thin top rule. */

.ao-country-subpage__stats--bordered .ao-country-hub__stat {
  background: transparent;
  box-shadow: none;
  border: 1px solid rgba(10, 10, 10, 0.12);
}

/* flat — strip all card chrome, separate items with a 1px top rule */
.ao-country-subpage__stats--flat .ao-country-hub__stat {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  min-height: 0;
  padding: var(--sp-6) var(--sp-1) var(--sp-4);
}

.ao-country-subpage__stats--flat .ao-country-hub__stats-grid {
  column-gap: var(--sp-10);
  gap: 0;
}

/* ── CARD_GRID VARIANTS ───────────────────────────────────────────────────
   Default: 3 white cards with flat coral icon + arrow link.
   numbered → 01/02/03 counter replaces the icon.
   bordered → hairline-outlined cards (no fill, no shadow) on cream. */

.ao-country-subpage__cardgrid--numbered .ao-country-subpage__cardgrid-grid {
  counter-reset: ao-cg;
}

.ao-country-subpage__cardgrid--numbered .ao-country-subpage__cg-card {
  counter-increment: ao-cg;
}

.ao-country-subpage__cardgrid--numbered .ao-country-subpage__cg-icon {
  display: none;
}

.ao-country-subpage__cardgrid--numbered .ao-country-subpage__cg-title::before {
  content: counter(ao-cg, decimal-leading-zero);
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--c-accent, #ff5f00);
  margin-bottom: var(--sp-4);
}

/* bordered — outline cards on cream, no fill, no shadow */
.ao-country-subpage__cardgrid--bordered .ao-country-subpage__cg-card {
  background: transparent;
  border: 1px solid rgba(10, 10, 10, 0.14);
  box-shadow: none;
}

.ao-country-subpage__cardgrid--bordered .ao-country-subpage__cg-card:hover {
  border-color: rgba(10, 10, 10, 0.30);
  box-shadow: 0 6px 24px rgba(10, 10, 10, 0.05);
}

/* ── CIRCLE_ICONS VARIANTS ────────────────────────────────────────────────
   Default: 3 coral-outlined circles with SVG icons, transparent fill.
   square   → squared rings (16px radius) instead of circles.
   numbered → CSS counter (01/02/03) replaces the icon SVG.
   solid    → solid WHITE circle interior (no coral tint), thicker coral
              ring — pops cleanly against the cream section. */

.ao-country-subpage__circles--square .ao-country-subpage__circle-ring {
  border-radius: 16px;
}

.ao-country-subpage__circles--numbered .ao-country-subpage__circles-grid {
  counter-reset: ao-circle;
}

.ao-country-subpage__circles--numbered .ao-country-subpage__circle {
  counter-increment: ao-circle;
}

.ao-country-subpage__circles--numbered .ao-country-subpage__circle-icon {
  display: none;
}

.ao-country-subpage__circles--numbered .ao-country-subpage__circle-ring::before {
  content: counter(ao-circle, decimal-leading-zero);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  letter-spacing: -0.04em;
  color: var(--c-accent, #ff5f00);
  line-height: 1;
}

/* solid — solid white interior with a thicker coral ring. No tinted fill,
   just clean white on cream with the brand coral on the perimeter. */
.ao-country-subpage__circles--solid .ao-country-subpage__circle-ring {
  background: #ffffff;
  border-width: 2px;
}

/* ── IMAGE_BAND VARIANTS ──────────────────────────────────────────────────
   Default: dark image, dark scrim, white text overlay.
   coral → subtle coral accent over the natural image. The image reads
           normally — the coral is a warm tint on the bottom-left text
           gutter, NOT a full orange wash. Keeps the Mastercard light feel.
   light → minimal scrim, image reads brighter, only enough darkening
           under the text to keep contrast. */

.ao-country-subpage__imageband--coral .ao-country-subpage__imageband-scrim {
  background:
    linear-gradient(to top,           rgba(0, 0, 0, 0.55)  0%, rgba(0, 0, 0, 0.05) 55%, transparent 100%),
    linear-gradient(to right,         rgba(0, 0, 0, 0.25)  0%, transparent 50%),
    linear-gradient(135deg,           rgba(255, 95, 0, 0.22) 0%, rgba(255, 95, 0, 0.06) 40%, transparent 70%);
}

.ao-country-subpage__imageband--light .ao-country-subpage__imageband-scrim {
  background:
    linear-gradient(to top,   rgba(0, 0, 0, 0.32) 0%, transparent 60%),
    linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, transparent 70%);
}

.ao-country-subpage__imageband--light .ao-country-subpage__imageband-eyebrow {
  color: rgba(255, 255, 255, 0.92);
}

/* ── CLOSER VARIANTS ──────────────────────────────────────────────────────
   Default: stadium-pill (.ao-feature-block) with rounded image, cream fill.
   framed → rectangular card, 16px radius, soft shadow, on white.
   coral  → transparent fill, coral outline only (1.5px), coral CTA.
   solid  → Mastercard-style outline pill: transparent interior, coral
            border only (no left accent stripe), orange-outline CTA.
   tight  → denser pill (padding + type), cream fill, hairline border —
            "post-it" feel; image still fills the media capsule like default. */

.ao-country-subpage__closer--framed .ao-feature-block {
  border-radius: 16px;
  border: 1px solid rgba(10, 10, 10, 0.10);
  background: #ffffff;
  box-shadow: 0 6px 28px rgba(10, 10, 10, 0.06);
}

.ao-country-subpage__closer--framed .ao-feature-block__media img {
  border-radius: 12px;
}

.ao-country-subpage__closer--coral .ao-feature-block {
  background: transparent;
  border: 1.5px solid var(--c-accent, #ff5f00);
}

.ao-country-subpage__closer--coral .ao-feature-block__cta {
  color: var(--c-accent, #ff5f00);
}

/* solid — transparent stadium pill, coral outline only (no inner fill, no
   left stripe). CTA matches the rim: outlined orange, not a solid fill. */
.ao-country-subpage__closer--solid .ao-feature-block {
  background: transparent;
  border: 1.5px solid var(--c-accent, #ff5f00);
  box-shadow: none;
}

.ao-country-subpage__closer--solid .ao-feature-block__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  background: transparent;
  color: var(--c-accent, #ff5f00);
  border: 1.5px solid var(--c-accent, #ff5f00);
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.ao-country-subpage__closer--solid .ao-feature-block__cta:hover {
  background: rgba(255, 95, 0, 0.1);
  color: var(--c-accent-warm, #e05500);
  border-color: var(--c-accent-warm, #e05500);
  transform: translateY(-1px);
}

/* tight — same pill chrome as default but denser. Compact padding, tighter
   typography. Reads as a punchier "post-it" closer; image uses default fill
   (no max-height cap — that exposed the media background band at bottom). */
.ao-country-subpage__closer--tight .ao-feature-block {
  padding: clamp(var(--sp-4), 1.6vw, var(--sp-7));
  background: #faf8f5;
  border: 1px solid rgba(10, 10, 10, 0.06);
}

.ao-country-subpage__closer--tight .ao-feature-block__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.ao-country-subpage__closer--tight .ao-feature-block__body {
  font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
}

/* ── Contact (embedded contact_layout) — canvas band + paper panels ─────── */

#ao-contact-mc {
  scroll-margin-top: var(--header-h, 90px);
}

body.ao-mc-page .ao-country-subpage__contact-wrap {
  background: var(--ao-home-canvas, #faf9f7);
  padding: clamp(var(--sp-10), 5vw, var(--sp-16)) 0;
}

/* Override the hub-style 2-col section head inside the contact wrap so the
   label / H2 / sub stack as a single LEFT-aligned column (instead of label
   + sub landing in col 1 while the big title floats off to col 2). Applies
   to both the form header and the offices header so the form/offices
   content beneath sits flush with its own section title. */
body.ao-mc-page .ao-country-subpage__contact-wrap .ao-country-hub__sechead {
  display: block;
  text-align: left;
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 clamp(var(--sp-6), 3vw, var(--sp-8));
  max-width: 56rem;
}

body.ao-mc-page .ao-country-subpage__contact-wrap .ao-country-hub__sechead-label {
  display: block;
  margin: 0 0 var(--sp-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent, #ff5f00);
}

body.ao-mc-page .ao-country-subpage__contact-wrap .ao-country-hub__sechead-title {
  max-width: none;
  margin: 0 0 var(--sp-3);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

body.ao-mc-page .ao-country-subpage__contact-wrap .ao-country-hub__sechead-sub {
  max-width: 52rem;
  margin: 0;
  padding-bottom: 0;
  text-wrap: pretty;
}

body.ao-mc-page .ao-country-subpage__contact-note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 var(--sp-5);
  padding: 0.55rem 0.85rem;
  background: rgba(255, 95, 0, 0.06);
  border: 1px solid rgba(255, 95, 0, 0.18);
  border-radius: 9999px;
  font-size: var(--text-sm);
  color: #404040;
}

body.ao-mc-page .ao-country-subpage__contact-note > span[aria-hidden] {
  color: var(--c-accent, #ff5f00);
  font-weight: 700;
}

body.ao-mc-page .ao-country-subpage__contact-note .ao-link {
  font-weight: 600;
  color: var(--c-accent, #ff5f00);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Calmer than legacy contact: form column is not a hover “card”. */
body.ao-mc-page .ao-country-subpage__contact-grid > div {
  transition: none;
}
body.ao-mc-page .ao-country-subpage__contact-grid > div:hover {
  transform: none;
  box-shadow: none;
}

/* Override legacy 2fr/1.2fr split: sidebar is now a compact direct-contact
   card, so a tighter ratio reads better and the row no longer stretches
   tall waiting for the (now relocated) offices column. */
@media (min-width: 1024px) {
  body.ao-mc-page .ao-country-subpage__contact-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
  }
}

body.ao-mc-page .ao-country-subpage__contact-form {
  margin: 0;
  padding: clamp(var(--sp-6), 3vw, var(--sp-8));
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: var(--r-lg, 12px);
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.04);
}

body.ao-mc-page .ao-country-subpage__contact-form:hover {
  box-shadow: 0 4px 24px rgba(10, 10, 10, 0.06);
}

/* Submit aligns to Mastercard coral accent — overrides the global red
   .ao-btn--primary inside this form only so the rest of the page system
   remains untouched. */
body.ao-mc-page .ao-country-subpage__contact-form .ao-btn--primary,
body.ao-mc-page .ao-country-subpage__contact-form .ao-btn--primary:focus-visible {
  background: var(--c-brand-orange, #ff5f00);
  color: #fff;
  box-shadow: none;
}

body.ao-mc-page .ao-country-subpage__contact-form .ao-btn--primary:hover {
  background: var(--c-brand-orange-hover, #e05500);
  box-shadow: 0 6px 20px -8px rgba(255, 95, 0, 0.45);
}

/* ── Direct-contact sidebar (compact, no longer carries offices) ───────── */

body.ao-mc-page .ao-country-subpage__contact-wrap .ao-contact-sidebar {
  padding: clamp(var(--sp-6), 3vw, var(--sp-8));
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: var(--r-lg, 12px);
  align-self: start;
}

body.ao-mc-page .ao-country-subpage__contact-aside-title {
  margin: var(--sp-2) 0 var(--sp-3);
  font-family: var(--font-sans);
  font-weight: var(--fw-heading-strong, 600);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #0a0a0a;
}

body.ao-mc-page .ao-country-subpage__contact-aside-body {
  margin: 0 0 var(--sp-6);
  color: #404040;
  font-size: var(--text-base);
  line-height: 1.55;
}

body.ao-mc-page .ao-country-subpage__contact-direct-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  font-size: var(--text-sm);
}

body.ao-mc-page .ao-country-subpage__contact-direct-row:first-of-type {
  border-top: none;
}

body.ao-mc-page .ao-country-subpage__contact-direct-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.7rem;
  color: #525252;
}

body.ao-mc-page .ao-country-subpage__contact-direct-value {
  color: #0a0a0a;
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
  text-align: right;
  transition: color var(--t-fast);
}

body.ao-mc-page .ao-country-subpage__contact-direct-value:hover {
  color: var(--c-accent, #ff5f00);
}

body.ao-mc-page .ao-country-subpage__contact-aside-cta {
  margin-top: var(--sp-5);
  width: 100%;
  justify-content: center;
}

/* ── Offices — horizontal Mastercard-style row beneath the form ───────── */

body.ao-mc-page .ao-country-subpage__offices {
  margin-top: clamp(var(--sp-10), 5vw, var(--sp-14));
  padding-top: clamp(var(--sp-8), 4vw, var(--sp-12));
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}

#ao-contact-offices-heading {
  scroll-margin-top: var(--header-h, 90px);
}

body.ao-mc-page .ao-country-subpage__offices-head {
  margin-bottom: clamp(var(--sp-6), 3vw, var(--sp-8));
  text-align: center;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

body.ao-mc-page .ao-country-subpage__offices-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--sp-4), 1.8vw, var(--sp-6));
}

@media (max-width: 1100px) {
  body.ao-mc-page .ao-country-subpage__offices-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body.ao-mc-page .ao-country-subpage__offices-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Compact, paper-card office tile — overrides the legacy .ao-office-card
   chrome inside the contact block so the row reads as a clean MC strip. */
body.ao-mc-page .ao-country-subpage__offices-grid .ao-office-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: clamp(var(--sp-5), 2vw, var(--sp-6));
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: var(--r-lg, 12px);
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.03);
  transition: border-color var(--t-fast), box-shadow var(--t-fast),
              transform var(--t-fast);
}

body.ao-mc-page .ao-country-subpage__offices-grid .ao-office-card:hover {
  border-color: rgba(10, 10, 10, 0.18);
  box-shadow: 0 6px 24px rgba(10, 10, 10, 0.06);
  transform: translateY(-2px);
}

body.ao-mc-page .ao-country-subpage__offices-grid .ao-office-card__flag {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: var(--sp-2);
}

body.ao-mc-page .ao-country-subpage__offices-grid .ao-office-card__city {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0a0a0a;
  margin: 0;
}

body.ao-mc-page .ao-country-subpage__offices-grid .ao-office-card__country {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #525252;
  margin: 0 0 var(--sp-3);
}

body.ao-mc-page .ao-country-subpage__offices-grid .ao-office-card__address,
body.ao-mc-page .ao-country-subpage__offices-grid .ao-office-card__address--link {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #404040;
  margin: 0 0 var(--sp-2);
}

body.ao-mc-page .ao-country-subpage__offices-grid .ao-office-card__address--link:hover {
  color: var(--c-accent, #ff5f00);
}

body.ao-mc-page .ao-country-subpage__offices-grid .ao-office-card__directions {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-accent, #ff5f00);
  text-decoration: none;
  margin: 0 0 var(--sp-2);
}

body.ao-mc-page .ao-country-subpage__offices-grid .ao-office-card__phone {
  font-size: 0.85rem;
  font-weight: 500;
  color: #0a0a0a;
  text-decoration: none;
  margin: 0 0 var(--sp-2);
}

body.ao-mc-page .ao-country-subpage__offices-grid .ao-office-card__phone:hover,
body.ao-mc-page .ao-country-subpage__offices-grid .ao-office-card__directions:hover {
  color: var(--c-accent-warm, #e05500);
}

body.ao-mc-page .ao-country-subpage__offices-grid .ao-office-hours {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(10, 10, 10, 0.06);
  font-size: 0.78rem;
  color: #525252;
  line-height: 1.45;
}

/* ── FAQ (embedded faq_layout) — canvas band + topic tabs ───────────────── */

#ao-faq-mc {
  scroll-margin-top: var(--header-h, 90px);
}

body.ao-mc-page .ao-country-subpage__faq-wrap {
  background: var(--ao-home-canvas, #faf9f7);
  padding: clamp(var(--sp-10), 5vw, var(--sp-16)) 0;
}

body.ao-mc-page .ao-country-subpage__faq-wrap .ao-country-hub__sechead {
  display: block;
  text-align: left;
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 clamp(var(--sp-6), 3vw, var(--sp-8));
  max-width: 56rem;
}

body.ao-mc-page .ao-country-subpage__faq-wrap .ao-country-hub__sechead-label {
  display: block;
  margin: 0 0 var(--sp-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent, #ff5f00);
}

body.ao-mc-page .ao-country-subpage__faq-wrap .ao-country-hub__sechead-title {
  max-width: none;
  margin: 0 0 var(--sp-3);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

body.ao-mc-page .ao-country-subpage__faq-wrap .ao-country-hub__sechead-sub {
  max-width: 52rem;
  margin: 0;
  padding-bottom: 0;
  text-wrap: pretty;
}

body.ao-mc-page .ao-country-subpage__faq-kicker {
  margin-bottom: clamp(var(--sp-5), 2vw, var(--sp-7));
}

body.ao-mc-page .ao-country-subpage__faq-wrap .ao-faq-tabs {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(var(--sp-6), 3vw, var(--sp-9));
}

body.ao-mc-page .ao-country-subpage__faq-wrap .ao-faq-tab {
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

body.ao-mc-page .ao-country-subpage__faq-wrap .ao-faq-tab--active {
  border-color: rgba(255, 95, 0, 0.35);
}

body.ao-mc-page .ao-country-subpage__faq-wrap .ao-accordion {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(10, 10, 10, 0.06);
  overflow: hidden;
}

body.ao-mc-page .ao-country-subpage__faq-wrap .ao-accordion__item + .ao-accordion__item {
  border-top: 1px solid rgba(10, 10, 10, 0.06);
}

body.ao-mc-page .ao-country-subpage__faq-wrap .ao-accordion__content .ao-link {
  font-weight: 600;
  color: var(--c-accent, #ff5f00);
}

/* ── Legal (privacy / terms long-form prose) ─────────────────────────────
   Mastercard canvas band with a white rounded "paper" panel containing the
   structured policy sections. Uses the standard `.ao-container` width so
   the block aligns with hero / stats / other subpage sections.
*/

#ao-legal-mc {
  scroll-margin-top: var(--header-h, 90px);
}

body.ao-mc-page .ao-country-subpage__legal-wrap {
  background: var(--ao-home-canvas, #faf9f7);
  padding: clamp(var(--sp-10), 5vw, var(--sp-16)) 0;
}

body.ao-mc-page .ao-country-subpage__legal-wrap .ao-country-hub__sechead {
  display: block;
  text-align: left;
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 clamp(var(--sp-5), 2.4vw, var(--sp-7));
  max-width: none;
}

body.ao-mc-page .ao-country-subpage__legal-wrap .ao-country-hub__sechead-label {
  display: block;
  margin: 0 0 var(--sp-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent, #ff5f00);
}

body.ao-mc-page .ao-country-subpage__legal-wrap .ao-country-hub__sechead-title {
  max-width: none;
  margin: 0 0 var(--sp-3);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

body.ao-mc-page .ao-country-subpage__legal-meta {
  margin: 0;
  font-size: 0.85rem;
  color: #525252;
  font-weight: 500;
}

body.ao-mc-page .ao-country-subpage__legal-panel {
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: 1.25rem;
  padding: clamp(var(--sp-5), 3.2vw, var(--sp-10));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

body.ao-mc-page .ao-country-subpage__legal-prose {
  max-width: none;
  color: #1a1a1a;
}

body.ao-mc-page .ao-country-subpage__legal-prose .ao-country-subpage__legal-intro {
  margin: 0 0 var(--sp-6);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  color: #2a2a2a;
}

body.ao-mc-page .ao-country-subpage__legal-section {
  margin-top: clamp(var(--sp-5), 2.4vw, var(--sp-7));
}

body.ao-mc-page .ao-country-subpage__legal-section:first-of-type {
  margin-top: 0;
}

body.ao-mc-page .ao-country-subpage__legal-h {
  margin: 0 0 var(--sp-3);
  font-size: clamp(1.125rem, 1.6vw, 1.35rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #0a0a0a;
}

body.ao-mc-page .ao-country-subpage__legal-prose p {
  margin: 0 0 var(--sp-3);
  font-size: 1rem;
  line-height: 1.65;
  color: #2a2a2a;
}

body.ao-mc-page .ao-country-subpage__legal-prose p:last-child {
  margin-bottom: 0;
}

body.ao-mc-page .ao-country-subpage__legal-prose a {
  color: var(--c-accent, #ff5f00);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Narrow phones: balanced image bands, full-width titles, slightly smaller icon rings ─ */
@media (max-width: 767px) {
  body.ao-mc-page .ao-country-subpage__imageband-stage {
    aspect-ratio: 3 / 2;
    border-radius: clamp(14px, 3vw, 22px);
  }

  .ao-country-subpage__imageband-content {
    max-width: 100%;
    justify-content: flex-end;
    padding: var(--sp-5);
  }

  .ao-country-subpage__imgfeat-media {
    border-radius: clamp(12px, 3vw, 18px);
  }

  .ao-country-subpage__circles-headline,
  .ao-country-subpage__imgfeat-headline {
    max-width: none;
  }

  .ao-country-subpage__imgfeat-title,
  .ao-country-subpage__tile-title {
    max-width: none;
  }

  .ao-country-subpage__circle-ring {
    width: min(132px, 38vw);
    height: min(132px, 38vw);
  }

  /* Tighter vertical rhythm on long MC subpages */
  body.ao-mc-page .ao-country-subpage__tiles,
  body.ao-mc-page .ao-country-subpage__process,
  body.ao-mc-page .ao-country-subpage__cases,
  body.ao-mc-page .ao-country-subpage__imageband,
  body.ao-mc-page .ao-country-subpage__panel,
  body.ao-mc-page .ao-country-subpage__imgfeat,
  body.ao-mc-page .ao-country-subpage__circles,
  body.ao-mc-page .ao-country-subpage__darkcard,
  body.ao-mc-page .ao-country-subpage__statement,
  body.ao-mc-page .ao-country-subpage__poster,
  body.ao-mc-page .ao-country-subpage__hiw,
  body.ao-mc-page .ao-country-subpage__stats,
  body.ao-mc-page .ao-country-subpage__ekgp {
    padding-top: clamp(var(--sp-8), 5vw, var(--sp-12));
    padding-bottom: clamp(var(--sp-8), 5vw, var(--sp-12));
  }

  body.ao-mc-page .ao-country-subpage__process-grid {
    gap: var(--sp-6);
  }
}

/* ══ STABILITY (EKGP): Earn · Keep · Grow · Preserve — optional band ══
   Do not strip or merge this block without updating template + JS + registry.
   Motion contract: staggered nodes → delayed track scaleX → staggered copy; --inview from main.js (double rAF).
   See .cursor/rules/ekgp-value-framework-stable.mdc
   ─────────────────────────────────────────────────────────────────────── */

/* No JS / scripting disabled: show framework content (otherwise it waits for --inview) */
@media (scripting: none) {
  .ao-country-subpage__ekgp-nodecol,
  .ao-country-subpage__ekgp-copycol {
    opacity: 1;
    transform: none;
  }

  .ao-country-subpage__ekgp-node-icon {
    opacity: 1;
    transform: none;
  }

  .ao-country-subpage__ekgp-track-fill {
    transform: scaleX(1);
  }

  .ao-country-subpage__ekgp-node-ring {
    animation-play-state: running;
  }
}

body.ao-mc-page .ao-country-subpage__ekgp {
  background: var(--ao-home-canvas, #f9f7f2);
  padding: clamp(var(--sp-8), 4vw, var(--sp-12)) 0 clamp(var(--sp-10), 5vw, var(--sp-14));
}

/* Same horizontal inset as `.ao-mc-opp-hero` so the card lines up with the hero stage */
body.ao-mc-page .ao-country-subpage__ekgp > .ao-container {
  max-width: none;
  width: 100%;
  padding-inline: clamp(1.5rem, 2.8vw, 3rem);
}

.ao-country-subpage__ekgp-surface {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(22px, 2.5vw, 36px);
  padding: clamp(var(--sp-12), 6vw, var(--sp-20)) clamp(var(--sp-8), 5vw, var(--sp-16));
  background: #fff;
  border: 1px solid var(--c-border, #e8e6e1);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ao-country-subpage__ekgp-shine {
  position: absolute;
  inset: -60%;
  background: conic-gradient(
    from 210deg,
    transparent 0deg,
    rgba(255, 95, 0, 0.12) 55deg,
    rgba(255, 255, 255, 0.5) 110deg,
    transparent 200deg,
    rgba(235, 0, 27, 0.1) 280deg,
    transparent 360deg
  );
  opacity: 0.22;
  pointer-events: none;
  animation: ao-ekgp-shine-rotate 22s linear infinite;
  transition: opacity 0.45s ease;
}

.ao-country-subpage__ekgp-inner {
  position: relative;
  z-index: 1;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.ao-country-subpage__ekgp-eyebrow {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-primary-600, #525252);
}

.ao-country-subpage__ekgp-headline {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.65rem, 4.2vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--c-ink, #0a0a0a);
  text-wrap: balance;
}

.ao-country-subpage__ekgp-lead {
  margin: 0 auto var(--sp-10);
  max-width: min(72ch, 100%);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.65;
  color: var(--c-primary-700, #404040);
  text-wrap: pretty;
}

.ao-country-subpage__ekgp-matrix {
  margin-bottom: clamp(var(--sp-8), 4vw, var(--sp-10));
}

.ao-country-subpage__ekgp-nodes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-8));
  margin-bottom: var(--sp-3);
}

.ao-country-subpage__ekgp-nodecol {
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.05s linear,
    transform 0.05s linear;
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-nodecol:nth-child(1) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.04s,
    transform 0.72s cubic-bezier(0.34, 1.25, 0.52, 1) 0.04s;
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-nodecol:nth-child(2) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.14s,
    transform 0.72s cubic-bezier(0.34, 1.25, 0.52, 1) 0.14s;
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-nodecol:nth-child(3) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.24s,
    transform 0.72s cubic-bezier(0.34, 1.25, 0.52, 1) 0.24s;
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-nodecol:nth-child(4) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.34s,
    transform 0.72s cubic-bezier(0.34, 1.25, 0.52, 1) 0.34s;
}

.ao-country-subpage__ekgp-node {
  position: relative;
  display: grid;
  place-items: center;
  width: min(4.5rem, 14vw);
  height: min(4.5rem, 14vw);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ao-country-subpage__ekgp-node--icon {
  width: min(5rem, 16vw);
  height: min(5rem, 16vw);
}

.ao-country-subpage__ekgp-node-media {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ao-country-subpage__ekgp-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-brand-orange, #ff5f00);
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity 0.05s linear,
    transform 0.05s linear;
}

.ao-country-subpage__ekgp-node-icon-svg {
  display: block;
  width: clamp(1.35rem, 3.2vw, 1.65rem);
  height: clamp(1.35rem, 3.2vw, 1.65rem);
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-nodecol:nth-child(1) .ao-country-subpage__ekgp-node-icon {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
    transform 0.55s cubic-bezier(0.34, 1.25, 0.52, 1) 0.18s;
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-nodecol:nth-child(2) .ao-country-subpage__ekgp-node-icon {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.28s,
    transform 0.55s cubic-bezier(0.34, 1.25, 0.52, 1) 0.28s;
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-nodecol:nth-child(3) .ao-country-subpage__ekgp-node-icon {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.38s,
    transform 0.55s cubic-bezier(0.34, 1.25, 0.52, 1) 0.38s;
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-nodecol:nth-child(4) .ao-country-subpage__ekgp-node-icon {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.48s,
    transform 0.55s cubic-bezier(0.34, 1.25, 0.52, 1) 0.48s;
}

.ao-country-subpage__ekgp-node-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brand-orange, #ff5f00), var(--c-brand-red, #eb001b));
  opacity: 0.9;
  animation: ao-ekgp-node-pulse 2.8s ease-in-out infinite;
  animation-play-state: paused;
  transition:
    opacity 0.3s ease,
    filter 0.3s ease,
    transform 0.3s ease;
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-node-ring {
  animation-play-state: running;
}

.ao-country-subpage__ekgp-nodecol:nth-child(1) .ao-country-subpage__ekgp-node-ring { animation-delay: 0s; }
.ao-country-subpage__ekgp-nodecol:nth-child(2) .ao-country-subpage__ekgp-node-ring { animation-delay: 0.25s; }
.ao-country-subpage__ekgp-nodecol:nth-child(3) .ao-country-subpage__ekgp-node-ring { animation-delay: 0.5s; }
.ao-country-subpage__ekgp-nodecol:nth-child(4) .ao-country-subpage__ekgp-node-ring { animation-delay: 0.75s; }

.ao-country-subpage__ekgp-node-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: clamp(0.7rem, 1.5vw, 0.8125rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a0a0a;
}

.ao-country-subpage__ekgp-node::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 0;
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ao-country-subpage__ekgp-track {
  position: relative;
  height: 4px;
  margin: 0 auto var(--sp-8);
  max-width: 100%;
  border-radius: 9999px;
  overflow: hidden;
}

.ao-country-subpage__ekgp-track-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.07);
  border-radius: inherit;
}

.ao-country-subpage__ekgp-track-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    var(--c-brand-orange, #ff5f00) 0%,
    #ff8a4c 45%,
    var(--c-brand-red, #eb001b) 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation: none;
  transition:
    transform 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.52s,
    filter 0.35s ease,
    box-shadow 0.35s ease;
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-track-fill {
  transform: scaleX(1);
}

.ao-country-subpage__ekgp-copyrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-10));
  text-align: center;
}

.ao-country-subpage__ekgp-copycol {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  padding: var(--sp-4);
  margin: calc(-1 * var(--sp-4));
  border-radius: 16px;
  transition:
    opacity 0.05s linear,
    transform 0.05s linear,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-copycol:nth-child(1) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.72s,
    transform 0.78s cubic-bezier(0.34, 1.2, 0.52, 1) 0.72s,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-copycol:nth-child(2) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.84s,
    transform 0.78s cubic-bezier(0.34, 1.2, 0.52, 1) 0.84s,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-copycol:nth-child(3) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.96s,
    transform 0.78s cubic-bezier(0.34, 1.2, 0.52, 1) 0.96s,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.ao-country-subpage__ekgp--inview .ao-country-subpage__ekgp-copycol:nth-child(4) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1) 1.08s,
    transform 0.78s cubic-bezier(0.34, 1.2, 0.52, 1) 1.08s,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.ao-country-subpage__ekgp-step-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-ink, #0a0a0a);
  transition: color 0.25s ease;
}

.ao-country-subpage__ekgp-step-body {
  margin: 0;
  font-size: clamp(0.9375rem, 1.25vw, 1rem);
  line-height: 1.55;
  color: var(--c-primary-700, #404040);
  text-wrap: pretty;
}

.ao-country-subpage__ekgp-foot {
  margin: 0 auto;
  max-width: min(62ch, 100%);
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.6;
  font-weight: 500;
  color: var(--c-slate, #262626);
  text-wrap: balance;
}

/* Hover / focus: fine pointer + motion OK — card lift + faster shine; pillars + nodes react */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ao-country-subpage__ekgp-surface:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 95, 0, 0.35);
    box-shadow:
      0 20px 48px rgba(0, 0, 0, 0.07),
      0 0 0 1px rgba(255, 95, 0, 0.08);
  }

  .ao-country-subpage__ekgp-surface:hover .ao-country-subpage__ekgp-shine {
    opacity: 0.38;
    animation-duration: 12s;
  }

  .ao-country-subpage__ekgp-surface:hover .ao-country-subpage__ekgp-track-fill {
    filter: brightness(1.06);
    box-shadow: 0 0 20px rgba(255, 95, 0, 0.35);
    animation: ao-ekgp-track-shimmer 2.2s ease-in-out infinite;
  }

  .ao-country-subpage__ekgp-copycol:hover {
    background-color: rgba(255, 95, 0, 0.07);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px);
  }

  .ao-country-subpage__ekgp-copycol:hover .ao-country-subpage__ekgp-step-title {
    color: var(--c-brand-orange-hover, #e05500);
  }

  .ao-country-subpage__ekgp-nodecol:hover .ao-country-subpage__ekgp-node {
    transform: scale(1.08);
  }

  .ao-country-subpage__ekgp-nodecol:hover .ao-country-subpage__ekgp-node-ring {
    filter: brightness(1.12) saturate(1.1);
    opacity: 1;
  }

  .ao-country-subpage__ekgp-nodecol:hover .ao-country-subpage__ekgp-node::after {
    box-shadow: 0 8px 22px rgba(235, 0, 27, 0.12);
  }
}

@keyframes ao-ekgp-shine-rotate {
  to { transform: rotate(360deg); }
}

@keyframes ao-ekgp-node-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes ao-ekgp-track-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (max-width: 900px) {
  .ao-country-subpage__ekgp-nodes,
  .ao-country-subpage__ekgp-copyrow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ao-country-subpage__ekgp-track {
    margin-bottom: var(--sp-7);
  }
}

@media (max-width: 520px) {
  .ao-country-subpage__ekgp-nodes,
  .ao-country-subpage__ekgp-copyrow {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .ao-country-subpage__ekgp-track {
    display: none;
  }

  .ao-country-subpage__ekgp-nodes {
    margin-bottom: 0;
  }

  .ao-country-subpage__ekgp-matrix {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
  }

  .ao-country-subpage__ekgp-nodes,
  .ao-country-subpage__ekgp-copyrow {
    display: contents;
  }

  .ao-country-subpage__ekgp-nodecol {
    order: var(--ekgp-o, 0);
  }

  .ao-country-subpage__ekgp-copycol {
    order: var(--ekgp-c, 0);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .ao-country-subpage__ekgp-copycol:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ao-country-subpage__ekgp-shine {
    animation: none;
    opacity: 0.12;
  }

  .ao-country-subpage__ekgp-node-ring {
    animation: none !important;
  }

  .ao-country-subpage__ekgp-track-fill {
    transform: scaleX(1) !important;
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .ao-country-subpage__ekgp-nodecol,
  .ao-country-subpage__ekgp-copycol {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .ao-country-subpage__ekgp-node-icon {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}