/* Home sections (hero, consul, countries). Shared kit lives in kit.css. */
/* ---------- Hero ---------- */
/* Bottom padding keeps the buttons >= 32px above the ribbon's visible top edge
   (22.7% down the ribbon image, so 0.0756 x ribbon width) at every viewport. */
.h-hero { --pb: 160px; position: relative; overflow: hidden; padding: 196px 24px max(var(--pb), calc(var(--rw) * (0 - var(--rtop) - 0.0756) + 32px)); text-align: center; }
.h-hero__sky {
  position: absolute; left: 50%; bottom: calc(var(--rw) * var(--sky-drop)); width: var(--rw); max-width: none; height: auto;
  transform: translateX(-50%); opacity: 0.8; mix-blend-mode: multiply; pointer-events: none;
}
.h-hero__in { position: relative; display: flex; flex-direction: column; align-items: center; }
.h-hero__title {
  margin: 0; color: #000; text-transform: uppercase;
  font: 900 80px/1.1 "Inter", sans-serif; letter-spacing: -2px;
}
.h-hero__title span { display: block; margin-top: 12px; color: var(--navy); font-size: 52px; font-weight: 600; letter-spacing: 6px; }
.h-hero__lede { max-width: 620px; margin: 31px 0 0; color: var(--text); font: 400 20px/1.55 "Inter", sans-serif; }
.h-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 48px; }
.h-hero__actions .h-btn { text-transform: uppercase; }

/* ---------- Consul ---------- */
.h-consul { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 53.7vw; background: var(--navy); }
.h-ribbon {
  position: absolute; z-index: 3; left: 50%; top: calc(var(--rw) * var(--rtop)); width: var(--rw); max-width: none; height: auto;
  transform: translateX(-50%); pointer-events: none;
}
.h-consul__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.h-consul__side { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; padding: calc(var(--rw) * 0.096 + 100px) 48px 48px; }
.h-card {
  display: flex; flex-direction: column; max-width: 624px; padding: 40px; border-radius: 28px;
  background: linear-gradient(160deg, #fff, #EEF2FA);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 2px 6px rgba(11, 21, 51, 0.1), 0 24px 56px rgba(11, 21, 51, 0.28);
}
.h-card p { margin: 0; }
.h-card__title { margin: 0 0 24px; color: var(--ink); font: 700 44px/1.1 "Inter", sans-serif; letter-spacing: -1px; }
.h-card__name { color: var(--navy); font: 700 28px/1.2 "Inter", sans-serif; }
.h-card__role { margin-top: 8px !important; color: var(--text); font: 600 18px/1.4 "Inter", sans-serif; }
.h-card__bio { margin-top: 24px !important; color: #1F2633; font: 500 22px/1.55 "Inter", sans-serif; }

/* ---------- Countries ---------- */
.h-countries { position: relative; color: #fff; padding: 80px 96px 0; }
.h-countries__bg { position: absolute; inset: 0 0 calc(94px * var(--k)); overflow: hidden; background: var(--ink); }
.h-countries__bg img { width: 100%; height: 100%; object-fit: cover; transition: opacity 400ms var(--ease); }
.h-countries__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 21, 51, 0.92), rgba(11, 21, 51, 0.6) 50%, rgba(11, 21, 51, 0.15)),
    linear-gradient(180deg, rgba(11, 21, 51, 0.35), rgba(11, 21, 51, 0) 50%, rgba(11, 21, 51, 0.95));
}
.h-countries__in { position: relative; }
.h-countries__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.h-countries__title { margin: 0; color: #fff; font: 700 44px/1.1 "Inter", sans-serif; letter-spacing: -1px; }
.h-countries__sub { margin: 14px 0 0; color: rgba(255, 255, 255, 0.7); font: 500 18px/1.4 "Inter", sans-serif; }
.h-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.h-ctrl__count { margin-right: 4px; color: rgba(255, 255, 255, 0.8); font: 600 16px/1.2 "Inter", sans-serif; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.h-ctrl__btn {
  display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 999px; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: transform 160ms var(--ease), background-color 200ms var(--ease);
}
.h-ctrl__btn--solid { background: #fff; color: var(--navy); box-shadow: 0 8px 24px rgba(11, 21, 51, 0.3); }
.h-ctrl__btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .h-ctrl__btn:not(.h-ctrl__btn--solid):hover { background: rgba(255, 255, 255, 0.16); } }

.h-country { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 560px; margin-top: 43px; }
.h-country__name { margin: 0; color: #fff; font: 900 112px/1 "Inter", sans-serif; letter-spacing: -4px; }
.h-country__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.h-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); font: 500 14px/1.2 "Inter", sans-serif; }
.h-pill svg { width: 14px; height: 14px; fill: #fff; }
.h-country__text { margin: 0; color: rgba(255, 255, 255, 0.82); font: 400 18px/1.6 "Inter", sans-serif; min-height: 4.8em; }
.h-country [data-c-name], .h-country [data-c-text] { transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.h-country.is-swapping [data-c-name], .h-country.is-swapping [data-c-text] { opacity: 0; transform: translateY(6px); }

.h-flags { position: relative; height: calc(311px * var(--k)); margin: 0 -96px; overflow-x: clip; overflow-y: visible; }
.h-flag {
  --x: 0; --s: 1; --o: 1;
  position: absolute; left: 50%; top: 0; width: calc(276px * var(--k)); padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  transform: translateX(calc(-50% + var(--x) * var(--k) * 1px)); opacity: var(--o);
  transition: transform 450ms var(--ease), opacity 300ms var(--ease);
}
.h-flag img {
  width: calc(276px * var(--k)); height: calc(276px * var(--k)); border-radius: 50%; object-fit: cover;
  box-sizing: border-box; border: max(3px, calc(8px * var(--k))) solid #fff; background: #fff;
  box-shadow: 0 2px 4px rgba(11, 21, 51, 0.08), 0 12px 28px rgba(11, 21, 51, 0.2);
  transform: scale(var(--s)); transition: transform 450ms var(--ease);
}
.h-flag span {
  margin-top: calc(16px * var(--k));
  transform: translateY(calc(-138px * var(--k) * (1 - var(--s))));
  color: var(--mute); font: 500 16px/1.2 "Inter", sans-serif; white-space: nowrap; transition: transform 450ms var(--ease), color 200ms;
}
.h-flag[aria-current] span { color: var(--navy); font-weight: 700; }
.h-flag[data-pos="0"] { --x: 0; --s: 1; --o: 1; z-index: 3; }
.h-flag[data-pos="-1"] { --x: -278; --s: 0.667; --o: 0.9; z-index: 2; }
.h-flag[data-pos="1"] { --x: 278; --s: 0.667; --o: 0.9; z-index: 2; }
.h-flag[data-pos="-2"] { --x: -482; --s: 0.464; --o: 0.75; z-index: 1; }
.h-flag[data-pos="2"] { --x: 482; --s: 0.464; --o: 0.75; z-index: 1; }
.h-flag[data-pos="-3"] { --x: -640; --s: 0.3; --o: 0; }
.h-flag[data-pos="3"] { --x: 640; --s: 0.3; --o: 0; }
.h-flag:not([data-pos]) { --o: 0; visibility: hidden; }

@media (max-width: 1099px) {
  .h-hero { --pb: 143px; padding-top: 142px; padding-left: 40px; padding-right: 40px; }
  .h-hero__title { font-size: 54px; letter-spacing: -1.5px; }
  .h-hero__title span { margin-top: 16px; font-size: 34px; letter-spacing: 4px; }
  .h-hero__lede { max-width: 520px; margin-top: 16px; font-size: 18px; }
  .h-hero__actions { margin-top: 16px; }
  .h-hero__actions .h-btn { font-size: 16px; padding: 14px 24px; gap: 8px; }
  .h-consul { min-height: 0; }
  .h-consul__side { gap: 20px; padding: calc(var(--rw) * 0.096 + 72px) 24px 48px; }
  .h-card { padding: 24px; border-radius: 20px; }
  .h-card__title { margin-bottom: 16px; font-size: 30px; letter-spacing: -0.5px; }
  .h-card__name { font-size: 20px; }
  .h-card__role { font-size: 13px; }
  .h-card__bio { margin-top: 16px !important; font-size: 15px; }
  .h-consul__side .h-btn { font-size: 15px; padding: 12px 20px; gap: 8px; letter-spacing: 0.4px; }

  .h-countries { padding: 72px 40px 0; }
  .h-countries__title { font-size: 34px; }
  .h-countries__sub { font-size: 16px; }
  .h-country { margin-top: 32px; }
  .h-country__name { font-size: 80px; letter-spacing: -3px; }
  .h-country__text { font-size: 16px; }
  .h-country .h-btn { font-size: 16px; padding: 12px 22px; gap: 8px; }
  .h-ctrl__btn { width: 48px; height: 48px; }
  .h-flags { margin: 24px -40px 0; }
  .h-flag span { font-size: 14px; }
}

@media (max-width: 599px) {
  .h-hero { --pb: 112px; padding-top: 109px; padding-left: 20px; padding-right: 20px; }
  .h-hero__title { font-size: 36px; letter-spacing: -1px; }
  .h-hero__title span { margin-top: 14px; font-size: 18px; letter-spacing: 2px; }
  .h-hero__lede { margin-top: 14px; font-size: 15px; }
  .h-hero__actions { margin-top: 14px; gap: 10px; }
  .h-hero__actions .h-btn { font-size: 13px; padding: 10px 16px; gap: 6px; letter-spacing: 0.5px; }
  .h-hero__actions .h-ico { width: 14px; height: 14px; }

  .h-consul { grid-template-columns: 1fr; }
  .h-consul__photo { height: 420px; }
  .h-consul__side { align-items: stretch; margin-top: -80px; padding: 0 20px 48px; }
  .h-card { padding: 28px; border-radius: 28px; }
  .h-card__title { font-size: 30px; }
  .h-card__name { font-size: 22px; }
  .h-card__role { font-size: 15px; }
  .h-card__bio { font-size: 17px; }
  .h-consul__side .h-btn { font-size: 16px; padding: 16px 24px; }

  .h-countries { padding: 56px 20px 0; }
  .h-countries__head { flex-direction: column; }
  .h-countries__title { font-size: 30px; }
  .h-country__name { font-size: 56px; letter-spacing: -2px; }
  .h-country__text { font-size: 15px; }
  .h-ctrl { margin-top: 0; }
  .h-flags { margin: 24px -20px 0; }
  .h-flag span { font-size: 12px; }
}