/* ==========================================================================
   Interactive modules
   ========================================================================== */

/* ---- Hero slider ---- */
.hero { position: relative; height: 100svh; min-height: 600px; color: var(--white); overflow: hidden; background: var(--graphite); }
.hero__slides { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease); }
.hero__slide[data-active="true"] { opacity: 1; visibility: visible; }
.hero__slide picture, .hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide img { transform: scale(1.06); transition: transform 7s linear; }
.hero__slide[data-active="true"] img { transform: scale(1); }
/* Layered overlay: vertical (top 40% / mid 20% / bottom 60%) + side wash for
   left-aligned text — guarantees WCAG-AA contrast over any image. */
.hero__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,12,13,0.50) 0%, rgba(11,12,13,0.20) 38%, rgba(11,12,13,0.34) 62%, rgba(11,12,13,0.78) 100%),
    linear-gradient(100deg, rgba(11,12,13,0.86) 0%, rgba(11,12,13,0.46) 46%, rgba(11,12,13,0.04) 80%); }
[dir="rtl"] .hero__scrim { background:
    linear-gradient(180deg, rgba(11,12,13,0.50) 0%, rgba(11,12,13,0.20) 38%, rgba(11,12,13,0.34) 62%, rgba(11,12,13,0.78) 100%),
    linear-gradient(260deg, rgba(11,12,13,0.86) 0%, rgba(11,12,13,0.46) 46%, rgba(11,12,13,0.04) 80%); }
.hero__inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); padding-top: calc(var(--header-h) + 2rem); }
.hero__eyebrow { color: var(--metallic); }
.hero__title { font-size: clamp(2.6rem, 4.6vw, 4.75rem); line-height: 0.98; color: var(--white); max-width: min(17ch, 920px); margin: 0.9rem 0 1.2rem; text-shadow: 0 2px 30px rgba(0,0,0,0.3); }
.hero__sub { font-size: var(--fs-lead); max-width: 600px; color: rgba(255,255,255,0.9); line-height: 1.5; }
.hero__actions { display: flex; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; }
.hero__meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); border-top: 1px solid var(--line-dark); padding-top: 1.3rem; flex-wrap: wrap; }
/* Short viewports: keep the whole hero block clear of the header */
@media (max-height: 820px) {
  .hero__title { font-size: clamp(2.2rem, 3.6vw, 3.4rem); margin: 0.6rem 0 0.9rem; }
  .hero__sub { font-size: 1.05rem; }
  .hero__meta { margin-top: 1rem; padding-top: 1rem; }
  .hero__actions { margin-top: 1.1rem; }
}
.hero__project { display: flex; flex-direction: column; gap: 0.2rem; }
.hero__project-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--metallic); font-weight: 700; }
.hero__project-name { font-family: var(--font-serif); font-size: 1.5rem; }
.lang-ar .hero__project-name { font-family: var(--font-ar); font-weight: 700; }
.hero__project-info { font-size: 0.88rem; color: rgba(255,255,255,0.7); }
.hero__controls { display: flex; align-items: center; gap: 1.2rem; }
.hero__count { font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: 0.05em; }
.hero__count .total { color: rgba(255,255,255,0.5); }
.hero__arrows { display: flex; gap: 0.5rem; }
.hero__btn { width: 50px; height: 50px; border: 1px solid var(--line-dark); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--white); transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.hero__btn:hover { background: var(--white); color: var(--graphite); }
.hero__btn .ico { width: 1.2em; height: 1.2em; }
.hero__progress { position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 3px; background: var(--metallic); width: 0; }
.hero__progress.is-running { transition: width linear; }
.hero__pause { width: 40px; height: 40px; border: 1px solid var(--line-dark); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--white); }
.hero__pause:hover { background: rgba(255,255,255,0.1); }

/* ---- Section side navigator ---- */
.sidenav { position: fixed; inset-inline-end: 1.4rem; inset-block-start: 50%; transform: translateY(-50%); z-index: var(--z-sidenav); display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.sidenav__btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(247,245,240,0.8); backdrop-filter: blur(8px); display: inline-flex; align-items: center; justify-content: center; color: var(--text); transition: background var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast); }
.sidenav__btn:hover { background: var(--graphite); color: var(--white); }
.sidenav__btn[disabled] { opacity: 0.3; cursor: not-allowed; }
.sidenav__btn .ico { width: 1.1em; height: 1.1em; }
.sidenav__count { font-size: 0.78rem; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.sidenav__count .total { color: var(--text-muted); }
.sidenav__dots { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.4rem 0; }
.sidenav__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); transition: background var(--dur-fast), transform var(--dur-fast); }
.sidenav__dot[aria-current="true"] { background: var(--emerald); transform: scale(1.4); }
.sidenav__dot:hover { background: var(--emerald); }
.sidenav__dot .sidenav__label { position: absolute; inset-inline-end: calc(100% + 0.8rem); inset-block-start: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--graphite); color: var(--white); font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.6rem; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); }
.lang-ar .sidenav__dot .sidenav__label { inset-inline-end: auto; inset-inline-start: calc(100% + 0.8rem); }
.lang-ar .sidenav { inset-inline-end: auto; inset-inline-start: 1.4rem; }
.sidenav__dot:hover .sidenav__label, .sidenav__dot:focus-visible .sidenav__label { opacity: 1; }

/* ---- Archive filters ---- */
.archive-toolbar { display: flex; align-items: center; gap: 1rem; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.5rem; }
.search { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.search .ico { position: absolute; inset-inline-start: 0.9rem; inset-block-start: 50%; transform: translateY(-50%); width: 1.1em; height: 1.1em; color: var(--text-muted); pointer-events: none; }
.search input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.6rem; border: 1px solid var(--line-strong); border-radius: 100px; background: var(--white); }
.lang-ar .search input { padding: 0.75rem 2.6rem 0.75rem 1rem; }
.lang-ar .search .ico { inset-inline-start: auto; inset-inline-end: 0.9rem; }
.search input:focus { outline: none; border-color: var(--emerald); }
.view-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 100px; overflow: hidden; }
.view-toggle button { padding: 0.6rem 0.8rem; color: var(--text-muted); display: inline-flex; align-items: center; }
.view-toggle button[aria-pressed="true"] { background: var(--graphite); color: var(--white); }
.view-toggle .ico { width: 1.1em; height: 1.1em; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.filter-chip { padding: 0.5rem 1rem; border: 1px solid var(--line-strong); border-radius: 100px; font-size: 0.84rem; font-weight: 600; color: var(--text-soft); background: var(--white); transition: all var(--dur-fast); }
.filter-chip:hover { border-color: var(--graphite); }
.filter-chip[aria-pressed="true"] { background: var(--emerald); border-color: var(--emerald); color: var(--white); }
.filters__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.filters__count { font-size: 0.88rem; color: var(--text-muted); font-weight: 600; }
.filters__count b { color: var(--text); }
.clear-filters { font-size: 0.84rem; font-weight: 700; color: var(--emerald); display: inline-flex; align-items: center; gap: 0.4em; }
.clear-filters[hidden] { display: none; }

.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.archive-grid[data-view="list"] { grid-template-columns: 1fr; }
.archive-grid[data-view="list"] .pcard { display: grid; grid-template-columns: 0.9fr 1.1fr; background: var(--white); border: 1px solid var(--line); }
.archive-grid[data-view="list"] .pcard__media { aspect-ratio: 16 / 10; }
.archive-grid[data-view="list"] .pcard__overlay { position: static; background: none; color: var(--text); justify-content: center; }
.archive-grid[data-view="list"] .pcard__title { color: var(--text); }
.archive-grid[data-view="list"] .pcard__loc, .archive-grid[data-view="list"] .pcard__scope { color: var(--text-soft); }
.archive-grid[data-view="list"] .pcard__reveal { max-height: none; opacity: 1; margin-top: 0.9rem; }
.archive-grid[data-view="list"] .pcard__cta { color: var(--emerald); }
.project-item[hidden] { display: none; }
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--text-muted); grid-column: 1 / -1; }
.empty-state .h3 { color: var(--text); margin-bottom: 0.5rem; }

.filter-drawer-toggle { display: none; }

/* ---- Gallery + lightbox ---- */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.5rem, 0.3rem + 0.6vw, 1rem); }
.gallery__item { grid-column: span 6; cursor: zoom-in; overflow: hidden; background: var(--stone); position: relative; }
.gallery__item:nth-child(3n+1) { grid-column: span 12; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); aspect-ratio: 16/10; }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item .zoom { position: absolute; inset-block-end: 0.8rem; inset-inline-end: 0.8rem; width: 38px; height: 38px; border-radius: 50%; background: rgba(13,14,15,0.7); color: var(--white); display: grid; place-items: center; opacity: 0; transition: opacity var(--dur-fast); }
.gallery__item:hover .zoom { opacity: 1; }

.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(13,14,15,0.95); display: none; align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 3rem); }
.lightbox[data-open="true"] { display: flex; }
.lightbox__img { max-width: 92vw; max-height: 82vh; object-fit: contain; box-shadow: var(--shadow-lg); }
.lightbox__close, .lightbox__nav { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-dark); color: var(--white); display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); transition: background var(--dur-fast); }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,0.18); }
.lightbox__close { inset-block-start: 1.5rem; inset-inline-end: 1.5rem; }
.lightbox__nav { inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { inset-inline-start: 1.5rem; }
.lightbox__nav--next { inset-inline-end: 1.5rem; }
.lightbox__caption { position: absolute; inset-block-end: 1.5rem; inset-inline: 0; text-align: center; color: var(--text-on-dark-soft); font-size: 0.9rem; }
.lightbox__ico { width: 1.4em; height: 1.4em; }

/* ---- Image compare ---- */
.compare { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius-lg); user-select: none; touch-action: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__after { clip-path: inset(0 0 0 50%); }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare__divider { position: absolute; inset-block: 0; inset-inline-start: 50%; width: 2px; background: var(--white); transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); }
.compare__handle { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: var(--shadow-md); pointer-events: none; }
.compare__handle .ico { width: 1.3em; height: 1.3em; color: var(--graphite); }
.compare__label { position: absolute; inset-block-start: 1rem; padding: 0.35rem 0.7rem; background: rgba(13,14,15,0.7); color: var(--white); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; pointer-events: none; }
.compare__label--before { inset-inline-start: 1rem; }
.compare__label--after { inset-inline-end: 1rem; }

/* ---- Saudi map ---- */
.ksa-map { position: relative; }
.ksa-map svg { width: 100%; height: auto; }
.ksa-map .land { fill: var(--stone); stroke: var(--line-strong); stroke-width: 1.5; }
.section--dark .ksa-map .land { fill: var(--charcoal); stroke: var(--line-dark); }
.map-marker { cursor: pointer; }
.map-marker__dot { fill: var(--emerald); transition: r var(--dur-fast) var(--ease); }
.map-marker__ring { fill: none; stroke: var(--emerald); stroke-width: 1.5; opacity: 0.4; transform-origin: center; }
.map-marker:hover .map-marker__dot, .map-marker:focus-visible .map-marker__dot { fill: var(--metallic); }
.map-marker__label { font-family: var(--font-sans); font-size: 13px; font-weight: 700; fill: var(--text); }
.section--dark .map-marker__label { fill: var(--white); }
.lang-ar .map-marker__label { font-family: var(--font-ar); }
.map-tooltip { position: absolute; pointer-events: none; background: var(--graphite); color: var(--white); padding: 0.6rem 0.9rem; border-radius: var(--radius); font-size: 0.82rem; transform: translate(-50%, -120%); opacity: 0; transition: opacity var(--dur-fast); white-space: nowrap; box-shadow: var(--shadow-md); }
.map-tooltip[data-show="true"] { opacity: 1; }
.map-tooltip b { display: block; font-size: 0.92rem; }

/* ---- Services explorer ---- */
.svc-explorer { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.svc-index { border-top: 1px solid var(--line); }
.svc-index__item { width: 100%; text-align: start; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 0.5rem; border-bottom: 1px solid var(--line); transition: padding var(--dur-fast) var(--ease), color var(--dur-fast); color: var(--text); }
.svc-index__num { font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 700; }
.svc-index__name { font-family: var(--font-serif); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem); }
.lang-ar .svc-index__name { font-family: var(--font-ar); font-weight: 700; }
.svc-index__item .ico { margin-inline-start: auto; width: 1.1em; height: 1.1em; color: var(--emerald); opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-fast), transform var(--dur-fast); }
.svc-index__item[aria-selected="true"] { padding-inline-start: 1.2rem; color: var(--emerald); }
.svc-index__item[aria-selected="true"] .ico { opacity: 1; transform: translateX(0); }
.svc-index__item:hover { color: var(--emerald); }
.svc-panel { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.svc-panel__media { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; background: var(--stone); margin-bottom: 1.5rem; }
.svc-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-panel__pane { display: none; }
.svc-panel__pane[data-active="true"] { display: block; animation: fadeIn var(--dur) var(--ease); }
.svc-panel__related { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0; }

/* ---- Integrated disciplines ---- */
.disciplines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.section--dark .disciplines, .section--dark .disciplines { background: var(--line-dark); border-color: var(--line-dark); }
.discipline { background: var(--bg); padding: 1.6rem 1.4rem; min-height: 150px; display: flex; flex-direction: column; gap: 0.6rem; transition: background var(--dur-fast); }
.section--dark .discipline { background: var(--charcoal); }
.discipline:hover { background: var(--white); }
.section--dark .discipline:hover { background: var(--graphite); }
.discipline__ico { width: 2rem; height: 2rem; color: var(--emerald); }
.section--dark .discipline__ico { color: var(--metallic); }
.discipline h4 { font-size: 1.05rem; }
.discipline p { font-size: 0.85rem; color: var(--text-soft); }
.section--dark .discipline p { color: var(--text-on-dark-soft); }

/* ---- BIM layers ---- */
.bim-stack { position: relative; aspect-ratio: 4/3; }
.bim-stack__layer { position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.bim-stack__layer img { width: 100%; height: 100%; object-fit: cover; }
.bim-stack__layer[data-on="false"] { opacity: 0; }
.bim-toggles { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.bim-toggle { padding: 0.6rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 100px; font-size: 0.84rem; font-weight: 700; transition: all var(--dur-fast); }
.bim-toggle[aria-pressed="true"] { background: var(--emerald); color: var(--white); border-color: var(--emerald); }
.section--dark .bim-toggle { border-color: var(--line-dark); color: var(--text-on-dark-soft); }
.section--dark .bim-toggle[aria-pressed="true"] { background: var(--metallic); border-color: var(--metallic); color: var(--graphite); }

/* ---- Process timeline ---- */
.timeline { position: relative; }
.timeline__item { display: grid; grid-template-columns: 90px 1fr; gap: 1.5rem; padding-bottom: 2.5rem; position: relative; }
.timeline__item::before { content: ""; position: absolute; inset-inline-start: 26px; inset-block: 0.6rem -0.6rem; width: 1px; background: var(--line-strong); }
.timeline__item:last-child::before { display: none; }
.lang-ar .timeline__item::before { inset-inline-start: auto; inset-inline-end: 26px; }
.timeline__num { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-family: var(--font-serif); font-size: 1.2rem; background: var(--bg); position: relative; z-index: 1; }
.section--dark .timeline__num { background: var(--charcoal); border-color: var(--line-dark); color: var(--white); }
.timeline__body h4 { margin-bottom: 0.4rem; }
.timeline__body p { color: var(--text-soft); }
.section--dark .timeline__body p { color: var(--text-on-dark-soft); }

/* ---- Sticky project info panel ---- */
.case-layout { display: grid; grid-template-columns: 1fr 320px; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
.case-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.facts { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.facts__row { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.facts__row:last-child { border-bottom: 0; }
.facts__row dt { color: var(--text-muted); font-weight: 600; }
.facts__row dd { font-weight: 700; text-align: end; }

/* ---- Logo wall / process bits ---- */
.icon-row { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.value-card { padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); height: 100%; }
.value-card__ico { width: 2.2rem; height: 2.2rem; color: var(--emerald); margin-bottom: 1rem; }
.value-card h4 { margin-bottom: 0.5rem; }
.value-card p { color: var(--text-soft); font-size: 0.92rem; }

/* sector card */
.sector-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); min-height: 280px; display: flex; align-items: flex-end; color: var(--white); }
.sector-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.sector-card:hover img { transform: scale(1.06); }
.sector-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,14,15,0.9), rgba(13,14,15,0.1) 70%); }
.sector-card__body { position: relative; padding: 1.6rem; }
.sector-card h3 { color: var(--white); font-size: 1.5rem; }
.sector-card p { color: var(--text-on-dark-soft); font-size: 0.9rem; margin-top: 0.3rem; }

/* ---- Hero: premium staggered reveal (JS adds .is-ready) ---- */
.js .hero .hero__eyebrow,
.js .hero .hero__title,
.js .hero .hero__sub,
.js .hero .hero__actions,
.js .hero .hero__meta {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.hero.is-ready .hero__eyebrow { opacity: 1; transform: none; transition-delay: 0.10s; }
.hero.is-ready .hero__title   { opacity: 1; transform: none; transition-delay: 0.22s; }
.hero.is-ready .hero__sub     { opacity: 1; transform: none; transition-delay: 0.36s; }
.hero.is-ready .hero__actions { opacity: 1; transform: none; transition-delay: 0.50s; }
.hero.is-ready .hero__meta    { opacity: 1; transform: none; transition-delay: 0.62s; }
.hero__title { max-width: 15ch; }

/* ---- Header shrink on scroll ---- */
.header__inner { transition: height var(--dur-fast) var(--ease); }
.logo-mbi { transition: width var(--dur-fast) var(--ease); }
.header[data-scrolled="true"] .header__inner { height: 68px; }

@media (prefers-reduced-motion: reduce) {
  .js .hero .hero__eyebrow, .js .hero .hero__title, .js .hero .hero__sub,
  .js .hero .hero__actions, .js .hero .hero__meta { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Saudi map — premium refinement
   ========================================================================== */
.ksa-map {
  position: relative; max-width: 760px; margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem); border-radius: 28px;
  background:
    radial-gradient(circle at 50% 42%, rgba(8,114,96,0.12), transparent 58%),
    var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.ksa-map .land { fill: #E4DED2; stroke: #C9C1B4; stroke-width: 2; }
.map-marker__dot { fill: var(--emerald); r: 6; }
.map-marker__ring { fill: rgba(8,114,96,0.14); stroke: var(--metallic); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.map-marker__label { fill: var(--text); font-family: var(--font-sans); font-size: 13px; font-weight: 800; }
.map-marker:hover .map-marker__dot, .map-marker:focus-visible .map-marker__dot { fill: var(--metallic); }

.map-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.6rem, 1.5vw, 1.25rem); max-width: 760px; margin: 1.75rem auto 0; }
.map-stat { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 1.1rem 0.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast); text-align: center; }
.map-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.map-stat__num { font-family: var(--font-serif); font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1; color: var(--emerald); }
.map-stat__label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; }
@media (max-width: 560px) { .map-stats { grid-template-columns: 1fr 1fr; } }