/* ============================================================
   Buttons / Forms / Cards / Carousel / Accordion / Badges
   ============================================================ */

/* ---------- Buttons (lifestyle-editorial: mocha primary, terracotta hover) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;             /* WCAG touch target */
  padding: 14px 28px;
  background: var(--text-heading);   /* deep mocha */
  color: var(--bg-main);             /* warm cream text */
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--text-heading);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
  text-decoration: none;
  line-height: 1;
}
.btn:hover { background: var(--primary); border-color: var(--primary); color: var(--bg-main); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Terracotta accent variant — the loudest CTA */
.btn-cta {
  background: var(--primary);
  border-color: var(--primary);
}
.btn-cta:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* Ghost: mocha border, transparent bg */
.btn-ghost {
  background: transparent;
  color: var(--text-heading);
  border-color: var(--text-heading);
}
.btn-ghost:hover { color: var(--bg-main); border-color: var(--text-heading); background: var(--text-heading); }

/* Light: cream-on-mocha-bg variant */
.btn-light {
  background: var(--bg-main);
  color: var(--text-heading);
  border-color: var(--bg-main);
}
.btn-light:hover { color: var(--bg-main); border-color: var(--primary); background: var(--primary); }

.btn-sm { min-height: 36px; padding: 10px 18px; font-size: 12px; }
.btn-lg { min-height: 52px; padding: 18px 36px; font-size: 14px; }
.btn-block { width: 100%; }

.btn-arrow svg { transition: transform var(--t-base); }
.btn:hover .btn-arrow svg { transform: translateX(3px); }

/* ---------- Forms (visible labels per design system) ---------- */
.field { margin-bottom: 16px; position: relative; }
.field label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-body);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-heading);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  min-height: 44px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.field textarea { min-height: 110px; resize: vertical; }
.field.error input,
.field.error textarea {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(198,40,40,0.12);
}
.field-error {
  font-size: 12px;
  color: var(--error);
  margin-top: 4px;
  display: none;
}
.field.error .field-error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }

.consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--text-muted); margin: 12px 0;
}
.consent input { margin-top: 3px; flex-shrink: 0; }

.form-msg { font-family: var(--font-body); font-size: 14px; padding: 12px 16px; border-radius: var(--radius-sm); margin-top: 12px; display: none; }
.form-msg.success { display: block; background: rgba(92, 107, 74, 0.10); color: var(--accent-sage); border: 1px solid rgba(92, 107, 74, 0.25); }
.form-msg.error   { display: block; background: rgba(181, 52, 27, 0.08);  color: var(--error);       border: 1px solid rgba(181, 52, 27, 0.22); }

/* ---------- Card (generic — warm linen surface, hairline border) ---------- */
.card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}
.card .card-img {
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  overflow: hidden;
}
.card .card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms ease-out;
}
.card:hover .card-img img { transform: scale(1.04); }
.card .card-body { padding: 20px 24px 24px; }
.card h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.005em; }
.card .card-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Product card ---------- */
.product-card .card-img {
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--primary-soft), var(--bg-main));
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.product-card .card-img .ph-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5rem;
  color: var(--primary);
  opacity: .45;
}
.product-card .sku {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}
.product-card .cat-tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(251, 245, 238, 0.95);  /* warm cream chip */
  color: var(--text-heading);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Color/segment swatch (used in featured strips) ---------- */
.swatch-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-main);
  border: 1px solid var(--border);
  transition: transform var(--t-base), box-shadow var(--t-base);
  cursor: pointer;
}
.swatch-card:hover { transform: scale(1.04); box-shadow: var(--shadow-2); }
.swatch-card .swatch {
  aspect-ratio: 1/1;
  background: var(--primary);
}
.swatch-card .swatch-body { padding: 16px 18px; }
.swatch-card .swatch-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-heading); letter-spacing: -0.005em; }
.swatch-card .swatch-code { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }

/* ---------- Carousel ---------- */
.carousel { position: relative; }
.carousel-track-wrap { overflow: hidden; }
.carousel-track {
  display: flex;
  gap: 20px;
  transition: transform var(--t-slow);
  will-change: transform;
}
.carousel-track > * { flex: 0 0 auto; }
.carousel-arrow {
  position: absolute;
  top: 50%;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  display: flex; align-items: center; justify-content: center;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 5;
  color: var(--text-heading);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.carousel-arrow:hover { background: #fff; box-shadow: var(--shadow-2); color: var(--primary); }
.carousel-arrow.prev { left: -10px; }
.carousel-arrow.next { right: -10px; }
.carousel-arrow:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 767px) {
  .carousel-arrow { width: 36px; height: 36px; }
  .carousel-arrow.prev { left: 0; }
  .carousel-arrow.next { right: 0; }
}

/* ---------- Accordion ---------- */
.accordion { border-top: 1px solid var(--border); }
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-trigger {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 22px 16px 22px 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-heading);
}
.accordion-icon {
  width: 24px; height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.accordion-trigger[aria-expanded="true"] .accordion-icon { background: var(--primary); border-color: var(--primary); color: #fff; }
.accordion-trigger[aria-expanded="true"] .accordion-icon svg { transform: rotate(45deg); }
.accordion-icon svg { transition: transform var(--t-base); }
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow);
}
.accordion-content-inner { padding: 0 16px 22px 0; color: var(--text-body); }

/* ---------- Badge / chip / filter pill ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  min-height: 36px;
}
.chip.active, .chip:hover {
  background: var(--text-heading);
  color: var(--bg-main);
  border-color: var(--text-heading);
}
.chip-light {
  background: var(--bg-main);
}

/* ---------- Section heading bar ---------- */
.section-head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head .section-sub { text-align: left; margin: 6px 0 0; }

/* ---------- Modal ---------- */
.ep-modal {
  position: fixed; inset: 0;
  z-index: 500;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.ep-modal.open { display: flex; }
.ep-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.ep-modal-card {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column;
  animation: epModalIn 220ms ease;
}
@keyframes epModalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ep-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--text-heading);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  transition: background var(--t-fast), transform var(--t-fast);
}
.ep-modal-close:hover { background: #fff; transform: scale(1.05); }
.ep-modal-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-alt);
  flex-shrink: 0;
}
.ep-modal-img img { width: 100%; height: 100%; object-fit: cover; }
.ep-modal-body {
  padding: 28px 32px 32px;
  overflow-y: auto;
}
@media (max-width: 540px) {
  .ep-modal-body { padding: 22px 20px; }
}

/* Project card hover when used as a button */
button.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

/* ---------- Icon bubble ---------- */
.icon-bubble {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-bubble.lg { width: 72px; height: 72px; }
.icon-bubble.blue   { background: rgba(30,92,156,0.10);  color: var(--accent-blue); }
.icon-bubble.purple { background: rgba(107,63,160,0.10); color: var(--accent-purple); }
.icon-bubble.yellow { background: rgba(245,166,35,0.12); color: var(--accent-yellow); }

/* ============================================================
   Region flag button — round 🇰🇪 / 🇹🇿 in the main header
   ============================================================ */
.region-flag-btn {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg-main);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 240ms cubic-bezier(.2, .7, .2, 1),
    border-color 220ms ease-out,
    box-shadow 220ms ease-out,
    background 220ms ease-out;
}
.region-flag-btn::after {
  /* Subtle ring pulse on focus / open invitation. */
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 240ms ease-out, transform 240ms ease-out;
  pointer-events: none;
}
.region-flag-btn:hover,
.region-flag-btn:focus-visible {
  transform: translateY(-1px) scale(1.06);
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 6px 16px rgba(28, 15, 10, 0.12);
  outline: none;
}
.region-flag-btn:hover::after,
.region-flag-btn:focus-visible::after { opacity: 0.6; transform: scale(1); }
.region-flag-btn:active { transform: scale(0.96); }

.region-flag-emoji {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
  transform: translateY(-0.5px);
}
.region-flag-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  transition: transform 240ms cubic-bezier(.2, .7, .2, 1);
}
.region-flag-btn:hover .region-flag-img { transform: scale(1.04); }
.region-flag-btn.is-switching .region-flag-img { animation: epFlagSpin 280ms ease-out forwards; }
@keyframes epFlagSpin {
  to { transform: rotateY(360deg) scale(1.06); }
}

/* Page dim while a region switch is in-flight (cookie write → reload). */
body.ep-region-switching {
  transition: opacity 240ms ease-out, filter 240ms ease-out;
  opacity: 0.4;
  filter: blur(2px);
  pointer-events: none;
}

@media (max-width: 540px) {
  .region-flag-btn { width: 32px; height: 32px; }
  .region-flag-emoji { font-size: 18px; }
}

/* ============================================================
   Brand splash — 2-second preloader before everything
   Sits above the region gate (z-index 10000 vs 9999) so it
   paints first. Auto-fades via CSS animation, no JS required.
   ============================================================ */
.brand-splash {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--bg-main);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(196, 98, 45, 0.10) 0%, transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(46, 125, 91, 0.08) 0%, transparent 42%);
  opacity: 1;
  animation: epSplashOut 320ms ease-out 1700ms forwards;
}
.brand-splash-inner { text-align: center; }
.brand-splash-logo {
  width: clamp(88px, 9vw, 112px);
  height: clamp(88px, 9vw, 112px);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 16px 40px rgba(28, 15, 10, 0.18);
  animation: epSplashLogoIn 620ms cubic-bezier(.2, .7, .2, 1);
}
.brand-splash-wordmark {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  letter-spacing: 0.28em;
  margin: 22px 0 0;
  color: var(--text-heading);
  opacity: 0;
  animation: epSplashFadeIn 540ms ease-out 220ms forwards;
}
.brand-splash-bar {
  position: relative;
  width: clamp(180px, 22vw, 240px);
  height: 4px;
  margin: 26px auto 0;
  background: rgba(28, 15, 10, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.brand-splash-fill {
  position: absolute; inset: 0;
  width: 0%;
  background: linear-gradient(
    90deg,
    #C4622D 0%,    /* terracotta — KE accent */
    #1E5C9C 26%,   /* logo blue */
    #6B3FA0 52%,   /* logo purple */
    #F5A623 76%,   /* logo yellow */
    #2E7D5B 100%   /* forest green — TZ accent */
  );
  border-radius: 999px;
  animation: epSplashFill 1500ms cubic-bezier(.4, .0, .2, 1) 180ms forwards;
}
.brand-splash-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 20px 0 0;
  opacity: 0;
  animation: epSplashFadeIn 540ms ease-out 820ms forwards;
}

@keyframes epSplashLogoIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes epSplashFadeIn { to { opacity: 1; } }
@keyframes epSplashFill   { to { width: 100%; } }
@keyframes epSplashOut    {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-splash,
  .brand-splash-logo,
  .brand-splash-wordmark,
  .brand-splash-fill,
  .brand-splash-tag { animation-duration: 0ms; animation-delay: 0ms; }
  .brand-splash { animation: epSplashOut 1ms ease-out 600ms forwards; }
}

/* ============================================================
   Region gate — full-screen country preloader
   ============================================================ */

/* No-flash guard: when PHP has set data-region-unset on <body>,
   freeze the page and show the gate immediately — even before JS runs.
   This way the visitor sees the picker first, never a flash of the site. */
body[data-region-unset] { overflow: hidden; }
body[data-region-unset] .region-gate { display: flex; }
body.ep-region-gate-open { overflow: hidden; }

.region-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(20px, 4vw, 48px);
  background: var(--bg-main);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(196, 98, 45, 0.07) 0%, transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(46, 125, 91, 0.06)  0%, transparent 38%);
  text-align: center;
  overflow-y: auto;
  animation: epRegionFade 320ms ease-out;
}
.region-gate.is-open { display: flex; }

.region-gate-backdrop { display: none; } /* full-screen mode — no separate backdrop */

.region-gate-panel {
  position: relative;
  width: 100%;
  max-width: 880px;
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
  animation: epRegionRise 460ms cubic-bezier(.2, .7, .2, 1);
}

.region-gate-brand { display: flex; justify-content: center; margin-bottom: 22px; }
.region-gate-logo {
  width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(28, 15, 10, 0.14);
}

.region-gate-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  margin: 0 0 12px;
  font-weight: 500;
}
.region-gate-sub {
  color: var(--text-body);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
  margin: 0 auto 44px;
  max-width: 520px;
}

.region-gate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  width: 100%;
  margin-bottom: 28px;
}

.region-card {
  --card-accent: var(--primary);
  --card-accent-soft: var(--primary-soft);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: 16px;
  padding: clamp(28px, 3.6vw, 44px) clamp(20px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--text-heading);
  cursor: pointer;
  font: inherit;
  text-align: center;
  min-height: clamp(220px, 26vw, 280px);
  transition:
    border-color var(--t-base),
    transform var(--t-base),
    box-shadow var(--t-base),
    background var(--t-base);
}
.region-card:hover {
  border-color: var(--card-accent);
  background: var(--card-accent-soft);
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(28, 15, 10, 0.14);
}
.region-card:focus-visible {
  outline: 3px solid var(--card-accent);
  outline-offset: 4px;
}

.region-card-flag {
  width:  clamp(72px, 8vw, 112px);
  height: clamp(72px, 8vw, 112px);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.region-card-flag img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.region-card:hover .region-card-flag {
  transform: scale(1.06);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.20);
}

.region-card-body {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
}
.region-card-name {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 32px);
  font-weight: 500;
  color: var(--text-heading);
  line-height: 1.1;
}
.region-card-meta {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 240px;
  line-height: 1.45;
}

.region-card-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 8px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--card-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform var(--t-fast), background var(--t-fast);
}
.region-card-cta::before {
  content: "Continue";
  margin-right: 6px;
}
.region-card-cta svg { display: none; }
.region-card:hover .region-card-cta { transform: translateX(2px); background: var(--card-accent); filter: brightness(1.05); }

.region-card.is-active {
  border-color: var(--card-accent);
  background: var(--card-accent-soft);
  transform: scale(0.985);
  box-shadow: 0 12px 28px rgba(28, 15, 10, 0.12);
}

.region-gate-foot {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 8px 0 0;
  letter-spacing: 0.02em;
}

@keyframes epRegionFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes epRegionRise {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1);     }
}

/* Smooth fade-out when a region is picked, before the reload fires. */
.region-gate.is-leaving {
  animation: epRegionLeave 280ms ease-out forwards;
}
.region-gate.is-leaving .region-card:not(.is-active) {
  opacity: 0.4;
  transform: scale(0.985);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
@keyframes epRegionLeave {
  to { opacity: 0; }
}

@media (max-width: 720px) {
  .region-gate-grid { grid-template-columns: 1fr; gap: 14px; }
  .region-card { min-height: 0; padding: 26px 22px; flex-direction: row; gap: 18px; text-align: left; }
  .region-card-body { align-items: flex-start; flex: 1 1 auto; min-width: 0; }
  .region-card-flag { font-size: 56px; }
  .region-card-name { font-size: 22px; }
  .region-card-cta { display: none; }
  .region-gate-sub { margin-bottom: 28px; }
  .region-gate-logo { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .region-gate,
  .region-gate-panel { animation: none; }
}

/* ============================================================
   Contact map — three offices on one Leaflet/OSM map
   ============================================================ */
.offices-map-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  align-items: stretch;
}
.offices-map-tabs {
  display: flex; flex-direction: column;
  gap: 10px;
}
.offices-map-tab {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-heading);
  transition:
    border-color 200ms ease-out,
    background 200ms ease-out,
    transform 200ms ease-out,
    box-shadow 200ms ease-out;
}
.offices-map-tab:hover,
.offices-map-tab.is-active {
  border-color: var(--primary);
  border-left-color: var(--primary);
  background: var(--primary-soft);
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(28, 15, 10, 0.10);
}
.offices-map-tab-flag {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.offices-map-tab-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.offices-map-tab-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}
.offices-map-tab-place {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.offices-map-card { padding: 0; overflow: hidden; }
.offices-map {
  width: 100%;
  height: 480px;
  border-radius: var(--radius-md);
  background: #e8eef2;
}

/* Leaflet custom flag pin */
.ep-flag-pin {
  position: relative;
  width: 44px; height: 56px;
}
.ep-flag-pin-inner {
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  display: block;
}
.ep-flag-pin-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.ep-flag-pin-tail {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 14px; height: 14px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  z-index: -1;
}
.ep-flag-pin-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 22px;
}

/* Leaflet popup contents */
.ep-pop { padding: 4px 2px; min-width: 200px; }
.ep-pop-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.ep-pop-flag-img {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  flex: 0 0 auto;
}
.ep-pop-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--text-heading);
  line-height: 1.15;
}
.ep-pop-country {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ep-pop-addr {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-body);
  margin: 6px 0 10px;
}
.ep-pop-cta { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-pop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--primary);
  color: #fff !important;
  border-radius: var(--radius-pill);
  text-decoration: none !important;
  transition: filter 160ms ease-out;
}
.ep-pop-btn:hover { filter: brightness(1.07); }

@media (max-width: 900px) {
  .offices-map-wrap { grid-template-columns: 1fr; }
  .offices-map-tabs {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }
  .offices-map-tab {
    flex: 0 0 auto;
    min-width: 220px;
    scroll-snap-align: start;
  }
  .offices-map { height: 380px; }
}