/* ═══════════════════════════════════════════════════════════════
   markets.css — flags, market pages (/markets, country and service
   guides) and the home page "Markets I serve" strip.
   Brand rule: only #000, #FFF and #F5E500. Flags are shown in grey
   and take their own colours only on hover or focus.
   ═══════════════════════════════════════════════════════════════ */

.mk-fl{ display:block; flex:none; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.14); filter:grayscale(1) contrast(1.05); transition:filter .35s ease; }
a:hover .mk-fl, a:focus-visible .mk-fl, .mk-art .mk-fl, .mk-guide:hover .mk-fl, .mk-guide:focus-within .mk-fl{ filter:none; }

/* Chips: flag + country name */
.mk-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.mk-chip{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; background:#fff; color:#000; border:1px solid rgba(0,0,0,.16); font-size:14px; font-weight:500; line-height:1.2; text-decoration:none; transition:background .2s, border-color .2s; }
.mk-chip .mk-fl{ width:28px; height:21px; }
.mk-chip i{ font-size:12px; margin-left:2px; }
.mk-chip:hover, .mk-chip:focus-visible{ border-color:#000; background:#F5E500; }
.mk-chip:focus-visible{ outline:3px solid #000; outline-offset:2px; }
.mk-chip.has-guide{ border-color:#000; font-weight:600; }
.mk-chip--all{ background:#000; color:#fff; border-color:#000; padding-left:14px; }
.mk-chip--all:hover, .mk-chip--all:focus-visible{ background:#F5E500; color:#000; }
.mk-region{ display:flex; align-items:baseline; gap:12px; margin:28px 0 14px; font-family:var(--font-heading); font-size:20px; letter-spacing:-.01em; }
.mk-region span{ font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--color-muted); }

/* Hero art: animated scene with the flag pinned on it */
.mk-art{ position:relative; }
.mk-art-flag{ position:absolute; left:18px; top:18px; z-index:3; display:flex; align-items:center; gap:12px; padding:10px 16px 10px 10px; background:#fff; color:#000; border:2px solid #000; box-shadow:6px 6px 0 #F5E500; }
.mk-art-flag .mk-fl{ width:56px; height:42px; }
.mk-art-flag b{ font-family:var(--font-heading); font-size:18px; letter-spacing:-.01em; }

/* Market facts under the hero */
.mk-facts{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); margin:36px 0 0; border-top:var(--rule, 1px solid #000); }
.mk-facts > div{ padding:18px 20px 4px 0; }
.mk-facts > div + div{ padding-left:20px; border-left:1px solid rgba(0,0,0,.14); }
.mk-facts dt{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--color-muted); margin-bottom:6px; }
.mk-facts dd{ margin:0; font-size:15px; line-height:1.45; font-weight:500; color:#000; }
@media (max-width:900px){ .mk-facts{ grid-template-columns:1fr 1fr; } .mk-facts > div:nth-child(3){ padding-left:0; border-left:0; } }
@media (max-width:520px){ .mk-facts{ grid-template-columns:1fr; } .mk-facts > div, .mk-facts > div + div{ padding:14px 0 0; border-left:0; } }

/* Services for this market */
.mk-svc{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.mk-svc-card{ position:relative; display:flex; flex-direction:column; gap:10px; padding:24px; background:#fff; border:1px solid rgba(0,0,0,.14); transition:border-color .2s, transform .25s var(--ease, ease); }
.mk-svc-card:hover{ border-color:#000; transform:translateY(-2px); }
.mk-svc-ico{ width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; background:#000; color:#F5E500; }
.mk-svc-card h3{ margin:6px 0 0; font-family:var(--font-heading); font-size:19px; line-height:1.25; letter-spacing:-.01em; }
.mk-svc-card h3 a{ color:#000; text-decoration:none; }
.mk-svc-card h3 a:hover{ text-decoration:underline; text-underline-offset:3px; }
.mk-svc-card p{ margin:0; font-size:15px; line-height:1.55; color:var(--color-text); flex:1; }
.mk-svc-links{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.mk-pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #000; font-size:13px; font-weight:600; color:#000; text-decoration:none; }
.mk-pill:hover, .mk-pill:focus-visible{ background:#000; color:#fff; }
.mk-pill.is-hi{ background:#F5E500; }
.mk-pill.is-hi:hover{ background:#000; color:#F5E500; }
.mk-more{ margin:22px 0 0; font-size:15px; color:var(--color-text); }
.mk-more a{ color:#000; font-weight:600; }

.mk-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none; }
.mk-tags li{ padding:8px 12px; border:1px solid #000; font-size:14px; font-weight:500; background:#fff; }
.mk-check{ margin-top:20px; }

/* Guides grid on /markets */
.mk-guides{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.mk-guide{ position:relative; display:flex; flex-direction:column; gap:12px; padding:26px; background:#fff; border:1px solid rgba(0,0,0,.14); transition:border-color .2s; }
.mk-guide:hover, .mk-guide:focus-within{ border-color:#000; }
.mk-guide-hit{ position:absolute; inset:0; z-index:1; }
.mk-guide-hit:focus-visible{ outline:3px solid #000; outline-offset:2px; }
.mk-guide-top{ display:flex; align-items:center; justify-content:space-between; }
.mk-guide-top .mk-fl{ width:56px; height:42px; }
.mk-guide h3{ margin:4px 0 0; font-family:var(--font-heading); font-size:22px; line-height:1.2; letter-spacing:-.015em; }
.mk-guide p{ margin:0; font-size:15px; line-height:1.55; color:var(--color-text); }
.mk-guide ul{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 0; padding:0; list-style:none; }
.mk-guide ul a{ display:inline-block; padding:5px 9px; border:1px solid #000; font-size:13px; font-weight:600; color:#000; text-decoration:none; background:#fff; }
.mk-guide ul a:hover, .mk-guide ul a:focus-visible{ background:#F5E500; }
.mk-guide .bm-arrow{ margin-top:auto; }

/* ── Home page strip: two rows of flags that drift slowly ── */
.hm-markets{ overflow:hidden; }
.mk-rows{ display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; margin-top:8px; }
.mk-row{ position:relative; display:flex; align-items:center; gap:16px; }
.mk-row-label{ flex:none; width:96px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.mk-track{ position:relative; flex:1; min-width:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image:linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.mk-belt{ display:flex; gap:8px; width:max-content; animation:mk-drift var(--mk-dur, 80s) linear infinite; }
.mk-row--rev .mk-belt{ animation-direction:reverse; }
.mk-belt .mk-chips{ flex-wrap:nowrap; }
.mk-track:hover .mk-belt, .mk-track:focus-within .mk-belt{ animation-play-state:paused; }
@keyframes mk-drift{ to{ transform:translateX(-50%); } }
.mk-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:26px; }
@media (max-width:640px){ .mk-row{ flex-direction:column; align-items:stretch; gap:8px; } .mk-row-label{ width:auto; } }
@media (prefers-reduced-motion:reduce){
  .mk-belt{ animation:none; width:auto; }
  .mk-belt .mk-chips{ flex-wrap:wrap; }
  .mk-belt [aria-hidden="true"]{ display:none; }
  .mk-track{ -webkit-mask-image:none; mask-image:none; }
}

/* Facts on the dark hero */
.mk-hero .mk-facts{ border-top:1px solid rgba(255,255,255,.22); }
.mk-hero .mk-facts > div + div{ border-left-color:rgba(255,255,255,.18); }
.mk-hero .mk-facts dt{ color:#F5E500; }
.mk-hero .mk-facts dd{ color:#fff; }
.mk-hero .mk-art-flag{ border-color:#fff; }

/* ── Home: "Tools I work with" logo band ── */
.tl-band{ background:#fff; border-bottom:1px solid rgba(0,0,0,.1); padding:26px 0 22px; overflow:hidden; }
.tl-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.tl-h{ margin:0; font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#000; }
.tl-count{ font-size:12px; color:var(--color-muted); }
.tl-track{ overflow:hidden; padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tl-belt{ display:flex; gap:12px; width:max-content; margin:0; padding:0; list-style:none; animation:mk-drift var(--tl-dur, 60s) linear infinite; }
.tl-track--rev .tl-belt{ animation-direction:reverse; }
.tl-track:hover .tl-belt{ animation-play-state:paused; }
.tl-i{ width:76px; height:60px; flex:none; display:flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.1); background:#fff; transition:border-color .2s, background .2s; }
.tl-i img{ width:30px; height:30px; object-fit:contain; transition:filter .3s, opacity .3s; }
.tl-mono img{ filter:brightness(0); opacity:.72; }
.tl-color img{ filter:grayscale(1) contrast(1.2); opacity:.72; }
.tl-i:hover{ border-color:#000; box-shadow:4px 4px 0 #F5E500; }
.tl-i:hover img{ filter:none; opacity:1; }
@media (max-width:640px){ .tl-i{ width:64px; height:52px; } .tl-i img{ width:26px; height:26px; } }
@media (prefers-reduced-motion:reduce){
  .tl-belt{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .tl-belt [aria-hidden="true"]{ display:none; }
  .tl-track{ -webkit-mask-image:none; mask-image:none; }
}

/* Service-in-country pages: six steps in two rows of three */
.mk-steps{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:28px 32px; }
@media (max-width:900px){ .mk-steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .mk-steps{ grid-template-columns:1fr; } }