/* ==========================================================
   Thaleria — Home page section styles
   News carousel · Flagship grid · About+KPI · Philosophy ·
   Certifications · Clients marquee
   Ported as-is from Claude Design "Full website WIP".
   ========================================================== */

/* ---------------- Geometric placeholder system ----------------
   Used wherever the CMS provides cover/logo images. Renders a
   design-system-styled mark (a glyph + a soft pattern) so we can
   iterate on layout without real assets.
   ----------------------------------------------------------- */
.tl-ph {
  position: relative;
  overflow: hidden;
  background: var(--surface-quiet, #EDF1F8);
  border-radius: var(--radius-lg);
  display: block;
  width: 100%;
  height: 100%;
  isolation: isolate;
}
.tl-ph__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.tl-ph__tag {
  position: absolute;
  left: 16px;
  top: 16px;
  background: rgba(11, 21, 36, 0.75);
  backdrop-filter: blur(6px);
  color: var(--fg-on-dark);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 2;
}
.tl-ph__glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(40px, 8vw, 96px);
  letter-spacing: -0.04em;
  z-index: 1;
  mix-blend-mode: normal;
  text-shadow: 0 2px 16px rgba(11, 21, 36, 0.22);
  pointer-events: none;
}
.tl-ph__glyph--sm { font-size: 22px; letter-spacing: 0.04em; color: var(--navy-700); text-shadow: none; }

/* ============================================================
   NEWS — auto-advancing carousel, pause-on-hover
   ============================================================ */
.tl-news { background: var(--surface-page); }
.tl-news__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
}
.tl-news__head .tl-section-head { margin-bottom: 0; }
.tl-news__controls {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.tl-news__btn {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: var(--surface-card);
  color: var(--fg-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tl-news__btn:hover { background: var(--navy-700); color: var(--fg-on-dark); border-color: var(--navy-700); }
.tl-news__btn:focus-visible { outline: 2px solid var(--fg-link); outline-offset: 2px; }
.tl-news__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.tl-news__viewport {
  overflow: hidden;
  /* allow the focus ring of a focused card to remain visible */
  padding: 4px;
  margin: -4px;
}
.tl-news__track {
  display: flex;
  gap: var(--space-5);
  transition: transform 600ms var(--ease-in-out);
  will-change: transform;
}
/* Fewer cards than fit in the viewport: centre them, nothing to page through. */
.tl-news__track.is-static { justify-content: center; }
.tl-news__slide {
  flex: 0 0 calc((100% - (var(--space-5) * 2)) / 3);
  min-width: 0;
}
@media (max-width: 1024px) {
  .tl-news__slide { flex-basis: calc((100% - var(--space-5)) / 2); }
}
@media (max-width: 720px) {
  .tl-news__slide { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-news__track { transition: none; }
}

.tl-news-card {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--fg-1);
  height: 100%;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.tl-news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: transparent;
  color: var(--fg-1);
}
.tl-news-card__cover {
  aspect-ratio: 16 / 9;
  position: relative;
  background: var(--navy-700);
}
.tl-news-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tl-news-card__body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.tl-news-card__meta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tl-news-card__meta::before {
  content: "";
  width: 14px; height: 2px; background: var(--fg-accent); border-radius: 2px;
}
.tl-news-card__title {
  font-size: 19px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 4px 0 0;
  text-wrap: balance;
}
.tl-news-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 8px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tl-news-card__footer {
  margin-top: auto;
  padding-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--fg-1);
}
.tl-news-card__footer svg { color: var(--orange-700); transition: transform var(--dur-fast) var(--ease-out); }
.tl-news-card:hover .tl-news-card__footer svg { transform: translateX(3px); }

.tl-news__dots {
  display: flex;
  gap: 8px;
  margin-top: var(--space-8);
  justify-content: center;
}
/* Scoped with the parent (specificity 0,2,0) so the background beats Tailwind
   preflight's `[type="button"]{background:transparent}` (0,1,0) — these dots are
   <button type="button">, otherwise the inactive ones render invisible. */
.tl-news__dots .tl-news__dot {
  width: 32px; height: 4px;
  border-radius: 4px;
  border: 0;
  background: var(--neutral-400);
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-fast), width var(--dur-fast);
}
.tl-news__dot.is-active { background: var(--orange-700); width: 48px; }
.tl-news__dot:focus-visible { outline: 2px solid var(--fg-link); outline-offset: 2px; }

/* ============================================================
   FLAGSHIP PROJECTS — 3-up full-image panels, text over a scrim
   ============================================================ */
/* Section head with a control on the right (shared with .tl-clients__head and
   .tl-entities__head — only the entities legend still uses that right slot) */
.tl-flagship__head,
.tl-clients__head,
.tl-entities__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
}
.tl-flagship__head .tl-section-head,
.tl-clients__head .tl-section-head,
.tl-entities__head .tl-section-head { margin-bottom: 0; }

/* 3 equal full-image columns, stacking on narrow screens. The rows/banners
   alternatives and the segmented toggle (.tl-seg) that switched between them
   came out when panels was chosen. */
.tl-flagship__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 920px) {
  .tl-flagship__grid {
    grid-template-columns: 1fr;
  }
}

.tl-flagship-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--fg-1);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.tl-flagship-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); color: var(--fg-1); }

/* Flagship cover images (generated assets) fill their slots */
.tl-flagship-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fields shared by the three card designs */
.tl-flagship-card__client {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-accent);
  font-weight: var(--weight-semibold);
}
.tl-flagship-card__title {
  font-size: 20px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
.tl-flagship-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}
.tl-flagship-card__footer {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--fg-1);
}
.tl-flagship-card__footer svg { color: var(--orange-700); transition: transform var(--dur-fast) var(--ease-out); }
.tl-flagship-card:hover .tl-flagship-card__footer svg { transform: translateX(3px); }

/* The client-logo chip went with the banner design — it was the only one that
   placed a logo on the card. The images it used are still in projects-data.js
   as `iconImg` and under /design/flagship/, unused. */

/* Panel card: full-bleed image, text over a scrim */
.tl-flagship-card--panel {
  background: var(--navy-800);
  color: var(--fg-on-dark);
  min-height: 480px;
  justify-content: flex-end;
}
.tl-flagship-card--panel:hover { color: var(--fg-on-dark); }
.tl-flagship-card--panel .tl-flagship-card__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tl-flagship-card--panel .tl-flagship-card__img {
  transition: transform var(--dur-base) var(--ease-out);
}
.tl-flagship-card--panel:hover .tl-flagship-card__img { transform: scale(1.04); }
.tl-flagship-card--panel .tl-flagship-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(11, 21, 36, 0.05) 0%,
    rgba(11, 21, 36, 0.35) 45%,
    rgba(11, 21, 36, 0.88) 100%);
}
.tl-flagship-card--panel .tl-flagship-card__body {
  position: relative;
  z-index: 2;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tl-flagship-card--panel .tl-flagship-card__client { color: var(--orange-700); }
.tl-flagship-card--panel .tl-flagship-card__title { color: var(--fg-on-dark); }
.tl-flagship-card--panel .tl-flagship-card__desc { color: var(--neutral-200); }
.tl-flagship-card--panel .tl-flagship-card__footer { color: var(--fg-on-dark); }
@media (max-width: 920px) {
  .tl-flagship-card--panel { min-height: 400px; }
}


/* ============================================================
   ABOUT US — editorial copy + KPIs integrated
   ============================================================ */
.tl-about {
  background: var(--surface-page);
}
.tl-about__band {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 920px) {
  .tl-about__band { grid-template-columns: 1fr; padding: var(--space-8); gap: var(--space-8); }
}
.tl-about__copy { max-width: 640px; }
.tl-about__copy .tl-section-head { margin-bottom: var(--space-6); }
.tl-about__paras {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.tl-about__paras p {
  color: var(--fg-1);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  text-wrap: pretty;
}
.tl-about__paras p:first-child {
  font-size: 18px;
  color: var(--fg-1);
}
.tl-about__kpis {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tl-about__kpi {
  background: var(--surface-quiet, #EDF1F8);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 19px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.tl-about__kpi:hover { background: var(--surface-card); border-color: var(--orange-700); }
.tl-about__kpi-value {
  font-size: 45px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.024em;
  line-height: 1;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}
.tl-about__kpi-value::before {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: var(--orange-700);
  position: absolute;
  margin-top: -14px;
}
.tl-about__kpi-wrap {
  position: relative;
  padding-top: 11px;
}
.tl-about__kpi-label {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-2);
  margin-top: 6px;
  max-width: 30ch;
}
@media (max-width: 720px) {
  .tl-about__kpi-value { font-size: 35px; }
}

/* ============================================================
   PHILOSOPHY — 3 numbered InfoCards on a quiet band
   ============================================================ */
.tl-philosophy {
  background: var(--surface-page);
}
/* The section's `subtitle` field: a statement line above the body copy, carrying
   a little more weight than the paragraph that follows. Philosophy uses it for
   the "proudly European" belief statement, with the body then handing off to the
   three cards. Qualified with `p` so it outranks `.tl-section-head p`. */
.tl-section-head p.tl-section-head__subtitle {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-1);
  max-width: 680px;
}
@media (max-width: 720px) {
  .tl-section-head p.tl-section-head__subtitle { font-size: 17px; }
}
.tl-philosophy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}
@media (max-width: 920px) {
  .tl-philosophy__grid { grid-template-columns: 1fr; }
}
.tl-philosophy-card {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: 36px 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  overflow: hidden;
}
.tl-philosophy-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: transparent;
}
.tl-philosophy-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 4px;
  height: 0;
  background: var(--orange-700);
  transition: height var(--dur-base) var(--ease-out);
}
.tl-philosophy-card:hover::before { height: 100%; }
.tl-philosophy-card__num {
  font-size: 56px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.04em;
  color: var(--orange-700);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.tl-philosophy-card__title {
  font-size: 24px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 0;
}
.tl-philosophy-card__body {
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   CERTIFICATIONS — logo wall, some link out
   ============================================================ */
/* Centered flex so a small, variable number of cards (3–6) sits as a centred
   group rather than left-aligned in a fixed 6-track grid with dead space on the
   right. Cards get a wider basis for more presence. */
.tl-certs__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}
.tl-certs__grid > .tl-cert { flex: 0 1 185px; max-width: 190px; }
/* Mid desktop / mobile: shrink a touch so the row(s) stay centred. */
@media (max-width: 1180px) { .tl-certs__grid > .tl-cert { flex-basis: 170px; } }
@media (max-width: 540px)  { .tl-certs__grid > .tl-cert { flex-basis: 145px; } }
/* Logo on top, certification name below, centred on a flat hairline card.
   Static — the hover grow is a purely visual touch, not a click cue. */
.tl-cert {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  text-decoration: none;
  color: var(--fg-1);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.tl-cert:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: var(--border-2);
}
/* Fixed-height stage that fits any logo shape (wide partner marks or square
   badges) via object-fit: contain — never overflows the card. */
.tl-cert__logo {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-cert__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.tl-cert__name {
  font-size: 15px;
  font-weight: var(--weight-semibold, 600);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--navy-700);
}

/* --- Variant: BARE ---------------------------------------- */
.tl-certs--bare .tl-certs__grid {
  gap: var(--space-8) var(--space-6);
}
.tl-certs--bare .tl-cert {
  background: transparent;
  border: 0;
  padding: 8px 4px;
  gap: 14px;
}
.tl-certs--bare .tl-cert--link:hover {
  transform: translateY(-2px);
  box-shadow: none;
  border-color: transparent;
}
.tl-certs--bare .tl-cert__logo {
  width: 88px; height: 88px;
  border-radius: 18px;
  box-shadow: 0 6px 18px -10px rgba(11, 21, 36, 0.35),
              0 1px 0 rgba(11, 21, 36, 0.04) inset;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.tl-certs--bare .tl-cert--link:hover .tl-cert__logo {
  transform: scale(1.04);
  box-shadow: 0 12px 26px -10px rgba(11, 21, 36, 0.45);
}
.tl-certs--bare .tl-cert__detail {
  margin-top: -4px;
}

/* --- Variant: STRIP --------------------------------------- */
.tl-certs--strip .tl-certs__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.tl-certs--strip .tl-cert {
  flex: 1 1 0;
  min-width: 160px;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border-1);
  border-radius: 0;
  padding: 22px 22px;
}
.tl-certs--strip .tl-cert:last-child { border-right: 0; }
.tl-certs--strip .tl-cert--link:hover {
  transform: none;
  box-shadow: none;
  background: var(--surface-card);
  border-color: var(--border-1);
}
.tl-certs--strip .tl-cert--link:hover { border-right-color: var(--border-1); }
.tl-certs--strip .tl-cert__logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  flex: none;
}
.tl-certs--strip .tl-cert__name { font-size: 13px; }
.tl-certs--strip .tl-cert__detail { font-size: 11px; }
.tl-certs--strip .tl-cert__link { display: none; }
@media (max-width: 1024px) {
  .tl-certs--strip .tl-cert { flex-basis: 33.333%; border-bottom: 1px solid var(--border-1); }
  .tl-certs--strip .tl-cert:nth-child(3n) { border-right: 0; }
  .tl-certs--strip .tl-cert:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 540px) {
  .tl-certs--strip .tl-cert { flex-basis: 50%; }
  .tl-certs--strip .tl-cert:nth-child(3n) { border-right: 1px solid var(--border-1); }
  .tl-certs--strip .tl-cert:nth-child(2n) { border-right: 0; }
  .tl-certs--strip .tl-cert:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ============================================================
   CLIENTS — continuous marquee, pause-on-hover
   ============================================================ */
.tl-clients {
  background: var(--surface-page);
}
.tl-clients__viewport {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-8);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.tl-clients__track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  animation: tlClientMarquee 38s linear infinite;
}
.tl-clients__viewport:hover .tl-clients__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tl-clients__track { animation: none; }
}
@keyframes tlClientMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Base is bare — logos sit directly on the section background. The box is kept
   either way so the marquee rhythm and per-logo sizing don't shift between
   variants; `--cards` only adds the card chrome back on top. */
.tl-client {
  flex: 0 0 auto;
  width: 200px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* Logos sit bare — the card chrome that .tl-clients--cards used to add here
   came out when the bare treatment was chosen. */
@media (max-width: 720px) {
  .tl-client { width: 168px; height: 84px; }
}
/* Client logos vary from 1:1 to ~6:1, so the tile caps both dimensions and
   `contain` letterboxes each mark inside it — no cropping, no distortion. */
.tl-client__logo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
}
.tl-client__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.tl-client__name {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--navy-700);
  text-align: center;
  padding: 0 14px;
  text-wrap: balance;
  line-height: 1.2;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  opacity: 0.85;
  transition: opacity var(--dur-fast);
}
.tl-client:hover .tl-client__name { opacity: 1; }

/* ============================================================
   ENTITIES MAP — animated Europe map. Moved here from about.css when the
   map moved from the Our Entities page to the home page.
   ============================================================ */
.tl-entities-map {
  background: var(--surface-card);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}
/* The legend lives on the section head row, not inside the map card — the map
   card's own title/eyebrow were collapsed into the single section head. */
.tl-entities-map__legend { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.tl-entities-map__legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); font-weight: var(--weight-medium); }
.tl-entities-map__legend-dot { width: 12px; height: 12px; border-radius: 999px; flex: none; }
.tl-entities-map__legend-dot--office  { background: var(--orange-700); box-shadow: 0 0 0 3px rgba(255, 165, 59, 0.25); }
.tl-entities-map__legend-dot--service { background: var(--navy-700);   box-shadow: 0 0 0 3px rgba(30, 47, 79, 0.18); }
.tl-entities-map__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #F7F9FD 0%, #EDF1F8 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-1);
  overflow: hidden;
}
.tl-entities-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tl-map-bg-grid { fill: none; stroke: rgba(30, 47, 79, 0.06); stroke-width: 1; }
.tl-map-pin-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: 0.5;
  transform-origin: center;
  transform-box: fill-box;
  animation: tlMapPulse 2.6s ease-out infinite;
}
.tl-map-pin--office  { color: var(--orange-700); }
.tl-map-pin--service { color: var(--navy-700); }
@keyframes tlMapPulse {
  0%   { transform: scale(0.6); opacity: 0.85; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .tl-map-pin-ring { animation: none; } }
.tl-map-pin-core { fill: currentColor; stroke: var(--surface-card); stroke-width: 2; }
.tl-map-label {
  font-size: 11px;
  fill: var(--fg-1);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  paint-order: stroke;
  stroke: var(--surface-card);
  stroke-width: 3;
  stroke-linejoin: round;
}

/* Phone fallback for the pin labels. .tl-map-label is sized in viewBox user
   units, so it shrinks with the card — around 4px at 375px wide, and no padding
   change reaches a readable size (the stage would have to roughly triple). So
   below the breakpoint the labels come off the map and the same information is
   listed underneath at reading size, which also covers the service locations,
   whose only other identification is a hover tooltip that touch never fires. */
.tl-entities-map__locations { display: none; }
@media (max-width: 720px) {
  .tl-entities-map { padding: var(--space-4); }
  /* Scoped to the pins so the "Loading map…" placeholder still shows. */
  .tl-map-pin .tl-map-label { display: none; }
  .tl-entities-map__locations {
    display: flex;
    flex-wrap: wrap;
    gap: 10px var(--space-5);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
  }
  .tl-entities-map__location {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--weight-medium);
    color: var(--fg-1);
  }
}

/* --- Topo map: country layer, hover tooltip (stylized approach) --- */
.tl-entities-map__svg { pointer-events: none; }
.tl-map-country {
  fill: rgba(30, 47, 79, 0.06);
  stroke: rgba(30, 47, 79, 0.22);
  stroke-width: 0.7;
  stroke-linejoin: round;
  transition: fill var(--dur-base) var(--ease-out), stroke var(--dur-base) var(--ease-out);
}
.tl-map-country.is-service { fill: rgba(74, 105, 161, 0.32); }
.tl-map-country.is-office-country { fill: rgba(255, 165, 59, 0.34); stroke: rgba(190, 105, 31, 0.45); }
.tl-map-country.is-active { cursor: pointer; pointer-events: auto; }
.tl-map-country.is-active.is-hovered { fill: rgba(74, 105, 161, 0.55); stroke: rgba(30, 47, 79, 0.55); }
.tl-map-country.is-office-country.is-hovered { fill: rgba(255, 165, 59, 0.55); stroke: rgba(190, 105, 31, 0.7); }
.tl-map-skeleton { }
.tl-map-tooltip {
  position: absolute;
  pointer-events: none;
  transform: translate(12px, -50%);
  background: var(--navy-900);
  color: var(--fg-on-dark);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  font-size: 12px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 4;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tl-map-tooltip__role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--weight-semibold);
  opacity: 0.75;
}
.tl-map-tooltip--office .tl-map-tooltip__role  { color: var(--orange-700); opacity: 1; }
.tl-map-tooltip--service .tl-map-tooltip__role { color: #9DB6E0; opacity: 1; }
.tl-map-tooltip__name { font-size: 13px; font-weight: var(--weight-semibold); }