@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/montserrat-300.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/montserrat-400.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/montserrat-500.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/montserrat-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/montserrat-700.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/montserrat-800.woff2') format('woff2')}
/* Иконки Tabler Icons самостоятельно (было подключено с cdnjs.cloudflare.com,
   но эта ссылка отдавала 404 — из-за неё пропадали все пиктограммы: этапы,
   иконки в контактах, стрелка на кнопке). Теперь шрифт лежит у нас, как и
   Montserrat, и обрезан только до реально используемых на сайте иконок
   (subset ~4.5KB вместо ~750KB полного набора). Если понадобится новая
   иконка — см. комментарий в build-map-svg.js о том, где искать код
   символа на tabler-icons.min.css, и добери subset через pyftsubset. */
@font-face{font-family:'tabler-icons';font-style:normal;font-weight:400;font-display:block;src:url('fonts/tabler-icons.woff2') format('woff2'),url('fonts/tabler-icons.woff') format('woff')}
.ti{font-family:'tabler-icons'!important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ti-bulb:before{content:"\ea51"}
.ti-file-text:before{content:"\eaa2"}
.ti-mountain:before{content:"\ef97"}
.ti-file-description:before{content:"\f028"}
.ti-truck:before{content:"\ebc4"}
.ti-package:before{content:"\eaff"}
.ti-trees:before{content:"\ec10"}
.ti-key:before{content:"\eac7"}
.ti-arrow-right:before{content:"\ea1f"}
.ti-chevron-down:before{content:"\ea5f"}
.ti-mail:before{content:"\eae5"}
.ti-map-pin:before{content:"\eae8"}
.ti-phone:before{content:"\eb09"}
.ti-brand-telegram:before{content:"\ec26"}
.ti-send:before{content:"\eb1e"}
.ti-x:before{content:"\eb55"}
.ti-circle-check:before{content:"\ea67"}
.ti-alert-circle:before{content:"\ea05"}
:root{
  --ink:#2b2d2e;
  --muted:#7a7d7e;
  --line:rgba(0,0,0,0.1);
  --bg:#ffffff;
  --card:#f6f7f6;
  --accent:#256356;
  --accent-2:#4db193;
  --accent-3:#6bc4a9;
  --hero-a:#1c2b26;
  --hero-b:#0f1a17;
  --wood:#9c7a4d;
}
html[data-theme="concrete"]{
  --accent:#4a4e51;
  --accent-2:#8b9296;
  --accent-3:#b5bcbe;
  --hero-a:#26282a;
  --hero-b:#141516;
  --wood:#6f7477;
}
*{box-sizing:border-box}
html{
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-image: linear-gradient(rgba(15,20,18,0.55),rgba(10,14,12,0.78)), url('images/hero-fon-forest.jpg');
transition:background-image 0.5s ease
}
html[data-theme="concrete"]{
background-image: linear-gradient(rgba(20,21,22,0.55),rgba(10,10,11,0.78)), url('images/hero-fon-concrete.jpg');
}
body{margin:0;color:var(--ink);font-family:'Montserrat',Arial,sans-serif;line-height:1.5;overflow-x:hidden}
h1,h2,h3{font-family:'Montserrat',Arial,sans-serif;font-weight:600;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.topbar img{height:46px;width:auto}
.liquid-glass{background:rgba(0,0,0,0.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;box-shadow:inset 0 1px 1px rgba(255,255,255,0.12);position:relative;overflow:hidden}
.liquid-glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
background:linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 100%);
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.toggle{display:flex;gap:6px;border-radius:999px;padding:4px}
.toggle button{border:none;background:transparent;padding:8px 18px;border-radius:999px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;color:rgba(255,255,255,0.75)}
.toggle button.active{background:#fff;color:var(--ink)}
.hero{position:relative;min-height:60vh;display:flex;align-items:flex-end;padding:0 0 56px;color:#fff}
.hero-content{max-width:640px}
.hero-content p.eyebrow{font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.75);margin:0 0 12px;font-weight:600}
.char{display:inline-block;opacity:0;transform:translateX(-18px);transition:opacity 0.5s ease,transform 0.5s ease}
.char.in{opacity:1;transform:translateX(0)}
.hero-fade{opacity:0;transform:translateY(10px);transition:opacity 1s ease,transform 1s ease}
.hero-fade.in{opacity:1;transform:translateY(0)}
.hero-content h1{font-size:44px;line-height:1.2;margin:0 0 14px}
.hero-content p.sub{font-size:14px;color:rgba(255,255,255,0.75);margin:0 0 22px}
.cta{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);border:none;padding:12px 22px;border-radius:999px;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer}
.hero-word{display:inline-block;text-align:left;min-width:var(--word-w, auto);transition:opacity 0.5s ease,transform 0.5s ease}
.hero-word.swap-out{opacity:0;transform:translateY(6px)}
.scroll-indicator{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);color:#fff;opacity:0.8;animation:bounce 1.8s infinite;transition:opacity 0.3s ease}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.section{padding:20px 0}
.card{background:rgba(255,255,255,0.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.4);border-radius:18px;padding:40px;opacity:0;transform:translateY(24px);transition:opacity 0.6s ease, transform 0.6s ease}
.card.visible{opacity:1;transform:translateY(0)}
.section-label{font-size:13px;color:var(--muted);margin-bottom:18px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{background:rgba(255,255,255,0.5);border-radius:14px;padding:20px 16px;text-align:center;cursor:pointer;border:1px solid rgba(255,255,255,0.3)}
.stat .num{font-size:28px;font-weight:700;margin:0;color:var(--accent)}
.stat .label{font-size:12px;color:var(--muted);margin:6px 0 0;transition:opacity 0.2s ease}
.stat .label.breakdown{font-size:10.5px;line-height:1.5}
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.project-img{aspect-ratio:4/3;background:
  repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 20px),
  linear-gradient(150deg, var(--accent-3), var(--accent));
  transition:transform 0.4s ease;border-radius:14px}
.project-block:hover .project-img{transform:scale(1.06)}
.project-info{padding:14px 16px}
.project-info .name{font-size:14px;font-weight:600;margin:0 0 4px}
.project-info .loc{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px;margin:0 0 8px}
.specs{display:flex;gap:12px;font-size:11px;color:var(--muted)}
.specs span{display:flex;align-items:center;gap:4px}
.about-text{font-size:19px;line-height:1.75;max-width:680px;color:#fff;margin-left:auto;margin-right:auto;text-align:center;font-weight:500}
.about-text b{color:#fff;font-weight:800}
.card-accent{background:linear-gradient(160deg, rgba(37,99,86,0.12), rgba(255,255,255,0.72));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(37,99,86,0.15);position:relative;overflow:hidden;padding-top:28px;padding-bottom:28px}
.card-accent::before{content:'\201C';position:absolute;top:-10px;left:24px;font-family:Georgia,serif;font-size:160px;line-height:1;color:var(--ink);opacity:0.15;pointer-events:none}
.card-accent .section-label{color:var(--ink);font-weight:700}
.big-photo{position:relative;aspect-ratio:21/9;border-radius:16px;background-size:cover;background-position:center 80%;overflow:hidden;
/* Замена фона на реальный файл */
background-image: url('images/photo_2023-04-25_15.01.51.jpeg');
filter:saturate(0.92) contrast(0.97);
transition:background-image 0.5s ease}
.big-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg, var(--hero-a) 0%, transparent 55%), linear-gradient(0deg, var(--hero-b) 0%, transparent 40%);opacity:0.35;pointer-events:none}
html[data-theme="concrete"] .big-photo{
background-image: url('images/concrete/G_01.jpg');
background-size: cover;
background-position: center 80%;
filter: saturate(0.92) contrast(0.97);
}
/* Раньше здесь была сегментированная полоса-прогресс (клик по сегменту
   переключал единственный видимый этап) со сменой раз в 3.5с — прочитать
   все 8 текстов целиком было невозможно, а связанный с ней постоянный
   scroll-слушатель (пересчёт прогресс-линии) и был источником
   подтормаживания. Теперь все этапы выводятся сразу списком (2 колонки на
   десктопе), с разовым мягким проявлением при скролле — см. script.js. */
.stages-list{display:grid;grid-template-columns:repeat(2,1fr);column-gap:32px}
.stage-item{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-top:1px solid var(--line);opacity:0;transform:translateY(8px);transition:opacity 0.5s ease,transform 0.5s ease}
.stage-item.visible{opacity:1;transform:translateY(0)}
.stage-item:nth-child(1),.stage-item:nth-child(2){border-top:none}
.stage-item-num{font-size:20px;font-weight:700;color:var(--accent);min-width:30px}
.stage-item-icon{font-size:20px;color:var(--accent);margin-top:2px}
.stage-item-text{font-size:14.5px;line-height:1.5;padding-top:1px}
.project-block{border-radius:14px;overflow:hidden;border:1px solid var(--line);cursor:pointer;transition:border-color 0.2s ease}
.project-block.selected{border-color:var(--accent);border-width:2px}
.card + .card{margin-top:20px}

.contacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.contact-card{background:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.3);border-radius:14px;padding:18px;display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;text-decoration:none;color:var(--ink);transition:background 0.2s ease}
.contact-card:hover{background:var(--accent);color:#fff}
.contact-card:hover i{color:#fff}
.contact-card i{font-size:20px;color:var(--accent)}
.carousel{position:relative;border-radius:16px;overflow:hidden}
.carousel-track{display:flex;transition:transform 0.5s ease}
.carousel-slide{position:relative;flex:0 0 100%;aspect-ratio:16/9;background-size:cover;background-position:center;filter:saturate(0.92) contrast(0.97)}
.carousel-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg, var(--hero-a) 0%, transparent 55%), linear-gradient(0deg, var(--hero-b) 0%, transparent 40%);opacity:0.3;pointer-events:none}
.carousel-slide-placeholder{background:
  repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 20px),
  linear-gradient(150deg, var(--accent-3), var(--accent))}
.carousel-zone{position:absolute;top:0;bottom:0;width:50%}
.carousel-zone.left{left:0}
.carousel-zone.right{right:0}
.carousel-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.carousel-dots button{width:8px;height:8px;border-radius:50%;border:none;background:var(--line);cursor:pointer;padding:0}
.carousel-dots button.active{background:var(--accent);width:20px;border-radius:4px}
/* Кастомный курсор включается через JS только после первого движения мыши,
   чтобы при отключённом/сбойном JS у пользователя оставался обычный курсор */
@media (pointer:fine){ .js-cursor body, .js-cursor a, .js-cursor button {cursor:none} }
#cursor-dot{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:opacity 0.2s ease}
#cursor-outline{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;border:1px solid #fff;mix-blend-mode:difference;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width 0.25s ease,height 0.25s ease,opacity 0.2s ease;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:0.03em;color:#fff;text-transform:uppercase}
#cursor-outline.hover{width:56px;height:56px}
#cursor-outline.label-mode{background:#fff;color:var(--ink);mix-blend-mode:normal;width:70px;height:70px;border-color:transparent}
.magnetic{display:inline-flex;will-change:transform}

/* === СТРАНИЦА ПОЛИТИКИ (privacy.html) — обычный светлый текстовый лист,
   а не карточки поверх фото-фона: на <html> этой страницы фон отключён
   инлайн-стилем в самом privacy.html, здесь только типографика и логотип
   (белый монохромный PNG инвертирован в тёмный, иначе он не виден на
   светлом фоне — на index.html он всегда лежит на тёмной фотографии). */
.legal-logo{filter:invert(1)}
.legal-page{padding-bottom:40px}
.legal-back{display:inline-block;margin:24px 0 20px;font-size:13px;color:var(--accent);text-decoration:none}
.legal-back:hover{text-decoration:underline}
.legal-title{font-size:28px;margin:0 0 8px;color:var(--ink)}
.legal-updated{font-size:13px;color:var(--muted);margin:0 0 32px}
.legal-main{max-width:720px;font-size:15px;line-height:1.7;color:var(--ink)}
.legal-main h2{font-size:17px;margin:32px 0 10px;color:var(--ink)}
.legal-main p{margin:0 0 14px}
.legal-main a{color:var(--accent)}

/* === ПОДВАЛ (юр. реквизиты + ссылка на политику, требование 152-ФЗ) === */
.site-footer{margin-top:40px;background:rgba(0,0,0,0.28);border-top:1px solid rgba(255,255,255,0.08)}
.footer-inner{padding:26px 32px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;color:rgba(255,255,255,0.55);font-size:12.5px;line-height:1.6}
.footer-legal p{margin:0}
.footer-links a{color:rgba(255,255,255,0.75);text-decoration:underline}
.footer-copy{margin:0;color:rgba(255,255,255,0.4);white-space:nowrap}

.carousel-slide-name{
position: absolute;
bottom: 30px;
left: 30px;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
border-radius: 4px;
backdrop-filter: blur(4px);
z-index: 2;
pointer-events: none;
}
.carousel-slide-title{font-size:24px;font-weight:300}
.carousel-slide-meta{font-size:13px;font-weight:500;opacity:0.75;margin-top:4px}

/* --- Видимый фокус для клавиатурной навигации --- */
.stat:focus-visible,
.carousel-zone:focus-visible,
.carousel-dots button:focus-visible,
.toggle button:focus-visible,
.contact-card:focus-visible,
.cta:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* --- АДАПТИВ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ --- */
@media (max-width: 768px) {
html {
  background-attachment: scroll;
  background-size: cover;
  background-position: top center;
  /* Первый экран на телефоне не должен тянуть тот же файл, что и десктоп
     (738KB/1MB, снят под 1920px) — здесь версия под мобильный экран
     (800px, ~140-200KB): именно об этом был замечание "без версий под
     телефон". */
  background-image: linear-gradient(rgba(15,20,18,0.55),rgba(10,14,12,0.78)), url('images/hero-fon-forest-mobile.jpg');
}

html[data-theme="concrete"] {
  background-image: linear-gradient(rgba(20,21,22,0.55),rgba(10,10,11,0.78)), url('images/hero-fon-concrete-mobile.jpg');
}

.big-photo {
  background-image: url('images/photo_2023-04-25_15.01.51-mobile.jpeg');
}

html[data-theme="concrete"] .big-photo {
  background-image: url('images/concrete/G_01-mobile.jpg');
}

.wrap {
  padding: 0 16px;
}

.topbar {
  padding: 12px 0;
}

.topbar img {
  height: 24px;
}

.hero {
  min-height: 70vh;
  padding: 0 0 32px;
  align-items: flex-end;
}

.hero-content h1 {
  font-size: 28px;
  line-height: 1.3;
}

.hero-content p.sub {
  font-size: 13px;
}

.hero-word {
  min-width: auto;
}

.hero-content {
  max-width: 100%;
}

.scroll-indicator {
  display: none;
}

.card {
  padding: 24px 16px;
  border-radius: 14px;
}

.section {
  padding: 12px 0;
}

.section-label {
  font-size: 11px;
  margin-bottom: 14px;
}

.stats {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.stat {
  padding: 16px 12px;
}

.stat .num {
  font-size: 22px;
}

.stat .label {
  font-size: 11px;
}

.stat .label.breakdown {
  font-size: 10px;
}

.about-text {
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.card-accent::before {
  font-size: 100px;
  top: -5px;
  left: 16px;
}

.big-photo {
  aspect-ratio: 4/3;
  border-radius: 12px;
}

.stages-list {
  grid-template-columns: 1fr;
}

.stage-item:nth-child(2) {
  border-top: 1px solid var(--line);
}

.stage-item {
  padding: 12px 0;
  gap: 12px;
}

.stage-item-num {
  font-size: 16px;
  min-width: 22px;
}

.stage-item-icon {
  font-size: 18px;
}

.stage-item-text {
  font-size: 13px;
}

.carousel-slide {
  aspect-ratio: 4/3;
}

.carousel-slide-name {
  bottom: 16px;
  left: 16px;
  padding: 6px 14px;
}

.carousel-slide-title {
  font-size: 16px;
}

.carousel-slide-meta {
  font-size: 11px;
}

.contacts {
  grid-template-columns: 1fr;
  gap: 10px;
}

.footer-inner {
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 16px;
  text-align: left;
}

.contact-card {
  padding: 14px 16px;
  font-size: 13px;
}

.contact-card i {
  font-size: 18px;
}

.toggle button {
  font-size: 12px;
  padding: 6px 14px;
}

.cta {
  padding: 10px 18px;
  font-size: 13px;
}

.carousel-dots button {
  width: 6px;
  height: 6px;
}

.carousel-dots button.active {
  width: 16px;
}

/* Отключаем кастомный курсор на мобильных */
#cursor-dot,
#cursor-outline {
  display: none !important;
}

body,
a,
button {
  cursor: auto !important;
}
}

@media (max-width: 480px) {
.hero-content h1 {
  font-size: 22px;
}

.stat .num {
  font-size: 20px;
}

.about-text {
  font-size: 14px;
}

.stage-item-num {
  font-size: 15px;
  min-width: 20px;
}

.stage-item-icon {
  font-size: 16px;
}

.stage-item-text {
  font-size: 12px;
}

.carousel-slide-name {
  bottom: 12px;
  left: 12px;
  padding: 4px 12px;
}

.carousel-slide-title {
  font-size: 14px;
}
}
/* === PARALLAX === */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

@media (max-width: 768px) {
  .compare-circle {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .compare-label {
    font-size: 10px;
    padding: 4px 12px;
    top: 10px;
  }
  .compare-label-before { left: 10px; }
  .compare-label-after { right: 10px; }

  /* Disable parallax on mobile for performance */
  .parallax-layer {
    transform: none !important;
  }
}

/* === GEOGRAPHY === */
.geo-dark {
  background: linear-gradient(165deg, #1a1d1f 0%, #0f1112 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  padding: 40px !important;
}
.geo-dark-label {
  color: rgba(255,255,255,0.4) !important;
}
.geo-counter {
  font-size: 14px;
  color: rgba(255,255,255,0.35);
  font-weight: 500;
  margin-bottom: 22px;
  letter-spacing: 0.03em;
}
.geo-counter-num {
  color: var(--accent-2);
  font-weight: 700;
  font-size: 16px;
}
/* Map + city list side by side — this is the compact layout (2026-09-14
   rework): stacking a full-width map above a full-width list read as one
   very tall block, so the list now sits beside the map instead, capping
   the section's height to whichever of the two is taller. */
.geo-map-row {
  display: flex;
  align-items: center;
  gap: 32px;
}
.geo-map-wrap {
  position: relative;
  flex: 1 1 60%;
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, rgba(77,177,147,0.08), transparent 60%);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.geo-map-wrap.visible {
  opacity: 1;
  transform: translateY(0);
}
.geo-map-svg { display: block; width: 100%; height: auto; }
/* Russia's real border runs well past this map's display window, so its
   path is generated with the d3 projection's own clipExtent (see
   genmap.js) set to the SVG's viewBox — d3 then emits a valid closed
   polygon that follows the frame's edges wherever the coastline exits it,
   like any zoomed-in map extract, instead of a raw shape the browser cuts
   off wherever it happens to cross the viewBox (which read as broken/
   cropped rather than intentional). No CSS/SVG masking is needed on top
   of this — do not reintroduce a fade here, it hid the real fix without
   solving it. */

.geo-pin { cursor: pointer; }
/* Layered drop-shadow glow — several blur radii stacked so the light
   falls off gradually (a single soft shadow reads as a blur, not a
   glow). Applied to the pin's dot/pole/flag AND to the country outline
   below, tying the whole map to the same "glowing night map" look. */
.geo-pin-halo {
  fill: rgba(77,177,147,0.22);
  transform-origin: center;
  animation: geoPulse 2.6s ease-in-out infinite;
}
.geo-pin-dot {
  fill: #4db193;
  stroke: #0f1112;
  stroke-width: 1.5;
  /* Kept small — these markers are tiny (r≈2.5), so the same blur radii
     used on the country outline would blow the dot into a formless
     blob instead of reading as a glowing point of light. */
  filter: drop-shadow(0 0 1px #4db193) drop-shadow(0 0 2.5px rgba(77,177,147,0.75));
}
/* Flag planted on top of the anchor dot — a bare dot read as invisible
   against the map at this scale, the pole+pennant is what actually
   catches the eye. Pole and pennant share the dot's accent color. */
.geo-pin-pole {
  stroke: #4db193;
  stroke-width: 1.1;
  stroke-linecap: round;
}
.geo-pin-flag {
  fill: #4db193;
  stroke: #0f1112;
  stroke-width: 0.6;
  filter: drop-shadow(0 0 1px #4db193) drop-shadow(0 0 2.5px rgba(77,177,147,0.75));
}
/* When two markers sit close enough to collide, build-map-svg.js nudges
   them apart and draws a dashed leader line + small anchor dot back to
   the true geographic point, so the map stays honest about location
   while the flag/label pair still gets room to breathe. */
.geo-pin-leader {
  stroke: rgba(255,255,255,0.4);
  stroke-width: 1;
  stroke-dasharray: 2,2;
}
.geo-pin-anchor {
  fill: #4db193;
  opacity: 0.85;
}
html[data-theme="concrete"] .geo-pin-anchor { fill: #8b9296; }
/* Map country fill/stroke come from genmap.js as inline SVG attributes
   (green, matching the forest theme's --accent-2) — a CSS property beats
   a presentation attribute in specificity, so restating the same green
   here lets the concrete-theme override below actually take effect.
   The glow is a stack of drop-shadows at increasing blur/falling opacity
   — drop-shadow follows the shape's own alpha, so it hugs the coastline
   itself rather than a rectangular box, which is what makes it read as
   the country "glowing" instead of a generic blurred rectangle behind it. */
.geo-country {
  fill: rgba(77,177,147,0.13);
  stroke: #4db193;
  filter: drop-shadow(0 0 1px #4db193) drop-shadow(0 0 3px rgba(77,177,147,0.8)) drop-shadow(0 0 8px rgba(77,177,147,0.45)) drop-shadow(0 0 16px rgba(77,177,147,0.22));
}
html[data-theme="concrete"] .geo-map-wrap {
  background: radial-gradient(ellipse at 50% 30%, rgba(139,146,150,0.07), transparent 60%);
}
html[data-theme="concrete"] .geo-country {
  fill: rgba(139,146,150,0.13);
  stroke: #8b9296;
  filter: drop-shadow(0 0 1px #8b9296) drop-shadow(0 0 3px rgba(139,146,150,0.75)) drop-shadow(0 0 8px rgba(139,146,150,0.4)) drop-shadow(0 0 16px rgba(139,146,150,0.2));
}
html[data-theme="concrete"] .geo-pin-halo { fill: rgba(139,146,150,0.22); }
html[data-theme="concrete"] .geo-pin-dot { fill: #8b9296; filter: drop-shadow(0 0 1px #8b9296) drop-shadow(0 0 2.5px rgba(139,146,150,0.7)); }
html[data-theme="concrete"] .geo-pin-pole { stroke: #8b9296; }
html[data-theme="concrete"] .geo-pin-flag { fill: #8b9296; filter: drop-shadow(0 0 1px #8b9296) drop-shadow(0 0 2.5px rgba(139,146,150,0.7)); }
.geo-pin-label {
  fill: rgba(255,255,255,0.75);
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  /* A dark stroke "halo" behind the letterforms (painted first, via
     paint-order) keeps the label readable wherever it happens to cross
     the lighter country fill — labels are permanent now, not
     hover-only, so they can't rely on a quiet patch of background. */
  paint-order: stroke;
  stroke: rgba(15,17,18,0.85);
  stroke-width: 3;
  stroke-linejoin: round;
}
.geo-pin:hover .geo-pin-label,
.geo-pin:focus .geo-pin-label { fill: #fff; }
.geo-pin:hover .geo-pin-dot,
.geo-pin:focus .geo-pin-dot { fill: #fff; }
.geo-pin:hover .geo-pin-flag,
.geo-pin:focus .geo-pin-flag { fill: #fff; }
@keyframes geoPulse {
  0%, 100% { transform: scale(0.75); opacity: 0.45; }
  50% { transform: scale(1.0); opacity: 0.1; }
}
.geo-country { transition: fill 0.2s ease; }
/* City list — a compact single-column strip beside the map, one line
   per city with a hairline rule between rows (an editorial "index" feel
   rather than a grid of cards). */
.geo-list {
  flex: 1 1 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255,255,255,0.07);
  padding-left: 26px;
}
.geo-entry {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.geo-entry.visible {
  opacity: 1;
  transform: translateY(0);
}
.geo-entry:first-child {
  padding-top: 0;
  border-top: none;
}
.geo-entry-num {
  flex: 0 0 auto;
  font-size: 10px;
  color: rgba(255,255,255,0.22);
  font-weight: 600;
  font-family: 'Montserrat', monospace;
}
.geo-entry-city {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  transition: color 0.2s ease;
}
.geo-entry:hover .geo-entry-city {
  color: var(--accent-2);
}
.geo-entry-projects {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: rgba(255,255,255,0.32);
  text-align: right;
}

@media (max-width: 768px) {
  .geo-dark {
    padding: 32px 20px !important;
  }
  .geo-map-wrap {
    display: none;
  }
  .geo-list {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
    border-left: none;
    padding-left: 0;
  }
  .geo-entry {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0 14px;
    border-top: none;
    border-left: 1px solid rgba(255,255,255,0.06);
  }
  .geo-entry:nth-child(odd) {
    padding-left: 0;
    border-left: none;
  }
  .geo-entry-city { font-size: 14px; }
  .geo-entry-projects { font-size: 10px; text-align: left; }
  .geo-counter { margin-bottom: 24px; }
}

@media (max-width: 480px) {
  .geo-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 0;
  }
  .geo-entry-city { font-size: 13px; }
}