/* =========================================================
   MERIOS — ETALON design system
   Palette and component styling sampled directly from the
   supplied reference render (00_master/MERIOS_MASTER_REFERENCE).
   Loaded AFTER style.css so it overrides the previous system.
   ========================================================= */

:root {
  /* Exact palette from the MERIOS brand board swatches — not sampled from the
     JPEG, which warmed the gold toward peach and hid the sky accent entirely. */
  --bg: #0A0D12;          /* Чёрный */
  --bg-deep: #05070B;
  --surface: #1A1F29;     /* Тёмный графит */
  --surface-2: #2B313C;   /* Серый */
  --line: #2B313C;
  --line-soft: #1E2430;

  --gold: #D4AF37;        /* Золотой */
  --gold-soft: #F0D98C;
  --gold-bright: #F4E3A8;
  --gold-deep: #A8862A;
  --gold-dim: #9A7E30;

  --sky: #7ECBFF;         /* Небесный — акцент в заголовке и на иконках */
  --sky-dim: #4E9ACB;

  --text: #FFFFFF;        /* Белый */
  --text-dim: #C6CDD9;
  --text-mute: #A2ABBB;

  --maxw: 1220px;
  --r-card: 14px;
  --r-pill: 999px;

  --display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: var(--display);
  --accent-font: var(--sans);
}

html, body { background: var(--bg); }
body {
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}
/* the previous theme laid a film-grain overlay over everything; the reference
   is clean flat colour, so switch it off rather than fight it per-section */
body::before { display: none !important; }

h1, h2, h3, h4 { color: var(--text); }
h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
h1 { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; line-height: 1.04; }

a { color: inherit; }
.wrap { display: block; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 34px; box-sizing: border-box; }

/* ---------- buttons: pills, per the reference ---------- */
.btn {
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  padding: 14px 30px;
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--text);
  background: transparent;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.btn:hover { border-color: var(--gold); color: var(--gold-soft); background: rgba(212,175,55,.07); }
.btn.solid {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-color: transparent;
  color: #221703;
}
.btn.solid:hover { background: linear-gradient(135deg, #FFE7C4, var(--gold-soft)); color: #221703; }
.btn.ghost { border-color: var(--line); color: var(--text-dim); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold-soft); }
.btn.whatsapp { border-color: #25d366; color: #7fe6a8; }
.btn.whatsapp:hover { background: #25d366; color: #08160d; }

/* ---------- header ---------- */
header.site { background: rgba(10,13,18,.94); border-bottom: 1px solid var(--line-soft); }
.nav { padding: 14px 34px; }
.brand { gap: 12px; font-family: var(--display); font-weight: 700; letter-spacing: .12em; }
.brand > span { line-height: 1.1; }
.brand .sub {
  font-family: var(--sans);
  font-size: .44rem;
  font-weight: 600;
  letter-spacing: .30em;
  color: var(--gold);
  margin-top: 3px;
}
nav.links { gap: 22px; font-size: .8rem; }
nav.links a { color: var(--text-dim); font-weight: 500; }
nav.links a:hover, nav.links a.active { color: var(--gold-soft); }
nav.links a.active::after { background: var(--gold); }

/* ---------- hero: photo left-weighted, text over a soft scrim ---------- */
.hero.hero-photo { background-position: center right; }
.hero-photo-overlay {
  background:
    linear-gradient(90deg, rgba(5,7,11,.95) 0%, rgba(5,7,11,.86) 38%,
                    rgba(5,7,11,.45) 62%, rgba(5,7,11,.30) 100%),
    linear-gradient(180deg, rgba(5,7,11,.65) 0%, transparent 30%, rgba(5,7,11,.75) 100%);
}
.hero .eyebrow { color: var(--gold); letter-spacing: .22em; font-weight: 600; }
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 4.05rem); text-transform: uppercase; }
.hero .lead { color: var(--text-dim); font-size: 1.06rem; max-width: 480px; }
.hero-actions { gap: 14px; margin-top: 32px; }

/* ---------- stat band: one rounded card split into cells ---------- */
.hero-stats, .stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(180deg, rgba(26,31,41,.92), rgba(16,20,27,.92));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-top: 44px;
}
.hero-stats .cell, .stat-band .cell {
  padding: 26px 18px;
  text-align: center;
  border-right: 1px solid var(--line-soft);
  background: transparent;
}
.hero-stats .cell:last-child, .stat-band .cell:last-child { border-right: 0; }
.hero-stats .ic, .stat-band .ic { display: block; margin: 0 auto 12px; color: var(--gold); }
.hero-stats .num, .stat-band .num {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 7px;
}
.hero-stats .label, .stat-band .label {
  display: block;
  color: var(--text-dim);
  font-size: .82rem;
  line-height: 1.35;
}

/* ---------- section rhythm ---------- */
section { padding: 78px 0; }
.section-head { margin-bottom: 34px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head h2 { font-size: clamp(1.7rem, 2.9vw, 2.35rem); margin-bottom: .35em; }
.section-head p { color: var(--text-dim); }
.section-head .eyebrow { color: var(--gold); letter-spacing: .2em; font-size: .72rem; font-weight: 600; }

/* ---------- feature cards with outline icons ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 30px 22px;
  text-align: center;
  transition: border-color .25s ease, transform .25s ease;
}
.feature-card:hover { border-color: var(--gold-dim); transform: translateY(-3px); }
.feature-card .ic { color: var(--gold); margin: 0 auto 16px; display: block; }
.feature-card h4 {
  font-family: var(--sans);
  font-size: .96rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  color: var(--text);
}
.feature-card p { margin: 8px 0 0; font-size: .84rem; color: var(--text-mute); }

/* ---------- location cards ---------- */
.place-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.place-card {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, #16202F 0%, #0C1119 55%, #070A0F 100%);
}
.place-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.place-card .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,11,.15) 40%, rgba(5,7,11,.88) 100%);
}
.place-card .cap { position: relative; padding: 18px 18px 16px; width: 100%; }
.place-card .cap b {
  display: block;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.place-card .cap i {
  display: block;
  font-style: normal;
  font-size: .8rem;
  color: var(--gold-soft);
  letter-spacing: .06em;
  margin-top: 2px;
}
/* skyline suggestion for cards awaiting a real photograph */
.place-card.no-photo::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background:
    repeating-linear-gradient(90deg,
      rgba(212,175,55,.10) 0 6px, transparent 6px 13px,
      rgba(212,175,55,.06) 13px 22px, transparent 22px 34px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
  mask-image: linear-gradient(180deg, transparent, #000 70%);
}

/* ---------- generic panels reused from the old theme ---------- */
.panel, .pillar, .icon-item, .country-card, .product-card, .guarantee-card,
.contact-item, .form-panel, .trust-group, .cat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.product-card:hover, .country-card:hover, .cat-card:hover { border-color: var(--gold-dim); }
section.alt { background: var(--bg-deep); }
footer.site { background: var(--bg-deep); border-top: 1px solid var(--line-soft); }
.footer-grid h5 { color: var(--gold); letter-spacing: .16em; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .feature-grid, .place-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats, .stat-band { grid-template-columns: repeat(2, 1fr); }
  .hero-stats .cell:nth-child(2), .stat-band .cell:nth-child(2) { border-right: 0; }
  .hero-stats .cell:nth-child(-n+2), .stat-band .cell:nth-child(-n+2) {
    border-bottom: 1px solid var(--line-soft);
  }
}
@media (max-width: 760px) {
  section { padding: 54px 0; }
  .wrap { padding: 0 20px; }
  .nav { padding: 12px 18px; }
  .hero h1 { font-size: clamp(1.95rem, 7.4vw, 2.5rem); }
  .hero .lead { font-size: .98rem; }
  .hero-actions .btn { width: 100%; }
  .feature-grid, .place-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .feature-card { padding: 22px 14px; }
  .hero-stats .num, .stat-band .num { font-size: 1.5rem; }
}
@media (max-width: 480px) {
  .place-grid { grid-template-columns: 1fr; }
}

/* ---------- footer social row ---------- */
.footer-social { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.footer-social a {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  transition: color .22s ease, border-color .22s ease, background .22s ease;
}
.footer-social a:hover { color: var(--gold); border-color: var(--gold-dim); background: rgba(212,175,55,.08); }
.footer-social svg { width: 19px; height: 19px; }

/* ---------- motion, respecting the user's system preference ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- visible keyboard focus on every interactive element ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Arabic: mirror the whole shell, not just the text ---------- */
body.is-rtl .nav, body.is-rtl nav.links, body.is-rtl .nav-actions,
body.is-rtl .footer-grid, body.is-rtl .feature-grid, body.is-rtl .place-grid { direction: rtl; }
body.is-rtl .brand { flex-direction: row; }
body.is-rtl nav.links { margin-right: 0; margin-left: 22px; }
body.is-rtl .brand { margin-right: 0; margin-left: 26px; }
body.is-rtl .hero-photo { background-position: center left; }
body.is-rtl .hero-photo-overlay {
  background:
    linear-gradient(270deg, rgba(5,7,11,.95) 0%, rgba(5,7,11,.86) 38%,
                    rgba(5,7,11,.45) 62%, rgba(5,7,11,.30) 100%),
    linear-gradient(180deg, rgba(5,7,11,.65) 0%, transparent 30%, rgba(5,7,11,.75) 100%);
}
body.is-rtl .hero-stats .cell, body.is-rtl .stat-band .cell {
  border-right: 0; border-left: 1px solid var(--line-soft);
}
body.is-rtl .hero-stats .cell:last-child, body.is-rtl .stat-band .cell:last-child { border-left: 0; }
body.is-rtl .place-card .cap { text-align: right; }


/* ---------- tri-colour hero headline (white / gold / sky) ---------- */
/* Rebuilt in JS after every language switch, because applyLang() writes
   textContent and would otherwise wipe the spans. */
.hero h1 .w1 { color: var(--text); }
.hero h1 .w2 { color: var(--gold); }
/* Три цвета в одной фразе спорили между собой, а голубой ещё и с тёплым
   кадром обложки. Оставляем белый и золотой — акцент один. */
.hero h1 .w3 { color: var(--text); }
.hero h1 span { display: inline; }

/* ---------- "Почему MERIOS — это лучшее решение": circular gold icon medallions ---------- */
.why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.why-card { text-align: center; }
.why-ic {
  width: 92px; height: 92px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  background: radial-gradient(circle at 50% 40%, rgba(212,175,55,.16), rgba(212,175,55,.02) 70%);
  border: 1px solid rgba(212,175,55,.34);
  box-shadow: 0 0 26px rgba(212,175,55,.10), inset 0 0 22px rgba(212,175,55,.06);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.why-card:hover .why-ic {
  border-color: rgba(212,175,55,.7);
  box-shadow: 0 0 34px rgba(212,175,55,.22), inset 0 0 26px rgba(212,175,55,.10);
}
.why-card h4 {
  font-family: var(--sans); font-size: .92rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px; color: var(--text);
}
.why-card p { font-size: .82rem; color: var(--text-mute); margin: 0; line-height: 1.5; }

/* ---------- trust bar ---------- */
.trust-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); padding: 22px 18px;
}
.trust-item { display: flex; align-items: center; gap: 14px; padding: 0 10px; }
.trust-item .ic { color: var(--gold); flex: none; }
.trust-item b {
  display: block; font-family: var(--sans); font-size: .84rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; color: var(--text);
}
.trust-item span { display: block; font-size: .78rem; color: var(--text-mute); margin-top: 2px; }

/* ---------- closing CTA + 3D Studio card ---------- */
.cta-split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; }
.cta-main {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line);
  background-size: cover; background-position: 18% center;
  min-height: 260px; display: flex; align-items: center;
}
.cta-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,7,11,.55) 0%, rgba(5,7,11,.90) 42%, rgba(5,7,11,.95) 100%);
}
.cta-body { position: relative; padding: 38px 40px; max-width: 460px; margin-left: auto; }
.cta-body h3 { font-size: clamp(1.3rem, 2.2vw, 1.85rem); margin: 0 0 10px; }
.cta-body p { color: var(--text-dim); margin: 0 0 22px; font-size: .94rem; }

.cta-studio {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); padding: 34px 28px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  transition: border-color .25s ease, background .25s ease;
}
.cta-studio:hover { border-color: var(--gold-dim); background: #1E2430; }
.cta-studio .cs-ic { color: var(--gold); margin-bottom: 6px; }
.cta-studio b { font-family: var(--display); font-size: 1.4rem; color: var(--text); }
.cta-studio span { color: var(--text-mute); font-size: .84rem; }

@media (max-width: 1080px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); gap: 26px 16px; }
  .trust-bar { grid-template-columns: 1fr 1fr; gap: 18px 10px; }
  .cta-split { grid-template-columns: 1fr; }
  .cta-body { margin-left: 0; }
}
@media (max-width: 700px) {
  .why-grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .why-ic { width: 74px; height: 74px; margin-bottom: 12px; }
  .why-card h4 { font-size: .82rem; }
  .why-card p { font-size: .76rem; }
  .trust-bar { grid-template-columns: 1fr; padding: 18px 14px; }
  .cta-body { padding: 26px 20px; }
  .cta-main { background-position: 70% center; min-height: 220px; }
}

/* ---------- mobile drawer, per board variant 4 ---------- */
.nav-ic { display: none; }
@media (max-width: 1080px) {
  nav.links {
    background: var(--bg);
    padding: 26px 24px 34px;
    gap: 2px;
  }
  nav.links a {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 14px;
    min-height: 48px;
    border-radius: 10px;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  nav.links a.active { background: var(--surface); color: var(--gold); }
  nav.links a.active::after { display: none; }
  .nav-ic { display: flex; color: var(--gold); flex: none; }
  .nav-ic svg { width: 19px; height: 19px; }

  .drawer-extra { margin-top: auto; padding-top: 26px; }
  .drawer-social { display: flex; gap: 14px; margin-bottom: 18px; }
  .drawer-social a {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
  }
  .drawer-social svg { width: 19px; height: 19px; }
  .drawer-phone {
    display: block; color: var(--text); font-size: 1.02rem;
    font-weight: 600; letter-spacing: .04em;
  }
}
@media (min-width: 1081px) { .drawer-extra { display: none; } }

/* ---------- mobile hero: keep the chair visible ---------- */
/* At 390px the "center right" focal point pushes the chair off-screen and the
   bottom scrim buries what is left, so the cover reads as text on black. The
   board shows the chair clearly under the headline — shift the focal point and
   lift the lower scrim so the product stays part of the composition. */
@media (max-width: 760px) {
  .hero.hero-photo { background-position: 62% center; background-size: cover; }
  .hero-photo-overlay {
    background:
      linear-gradient(180deg,
        rgba(5,7,11,.92) 0%,
        rgba(5,7,11,.80) 26%,
        rgba(5,7,11,.42) 52%,
        rgba(5,7,11,.30) 72%,
        rgba(5,7,11,.80) 100%);
  }
  .hero .lead { max-width: 100%; }
}

/* ---------- multi-angle viewer (3D Studio) ---------- */
.viewer { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
.viewer-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background:
    radial-gradient(ellipse at 50% 82%, rgba(212,175,55,.10), transparent 62%),
    linear-gradient(180deg, #141A24 0%, #0A0D12 100%);
  min-height: 420px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; overflow: hidden; user-select: none;
}
.viewer-stage.dragging { cursor: grabbing; }
.viewer-stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.viewer-stage img {
  max-height: 400px; width: auto; object-fit: contain;
  pointer-events: none; -webkit-user-drag: none;
}
.v-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(10,13,18,.72); border: 1px solid var(--line);
  color: var(--gold); font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, background .2s ease;
}
.v-nav:hover { border-color: var(--gold); background: rgba(212,175,55,.12); }
.v-prev { left: 14px; } .v-next { right: 14px; }
.v-badge {
  position: absolute; top: 14px; right: 16px;
  border: 1px solid var(--gold-dim); border-radius: var(--r-pill);
  padding: 5px 13px; font-size: .72rem; letter-spacing: .1em; color: var(--gold);
}
.viewer-side { display: flex; flex-direction: column; gap: 14px; }
.v-label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.v-select {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 14px; font-family: var(--sans); font-size: .9rem; min-height: 48px;
}
.v-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.v-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.v-thumbs button, .v-thumbs .v-thumb {
  padding: 0; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); overflow: hidden; cursor: pointer; aspect-ratio: 1/1;
}
.v-thumbs button.active, .v-thumbs .v-thumb.active { border-color: var(--gold); }
.v-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.v-note { font-size: .78rem; color: var(--text-mute); margin: 0; line-height: 1.5; }

@media (max-width: 900px) {
  .viewer { grid-template-columns: 1fr; }
  .viewer-stage { min-height: 320px; }
  .viewer-stage img { max-height: 300px; }
}

/* ---------- country tiles with real flags ---------- */
.country-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.country-tile {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  min-height: 210px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(160deg, #16202F 0%, #0C1119 55%, #070A0F 100%);
  transition: border-color .25s ease, transform .25s ease;
}
.country-tile:hover { border-color: var(--gold-dim); transform: translateY(-3px); }
.country-tile > img, .country-tile > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.country-tile .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,11,.25) 30%, rgba(5,7,11,.92) 100%);
}
.ct-body { position: relative; padding: 20px 18px 18px; width: 100%; }
.ct-flag, .ct-flags img {
  width: 40px; height: auto; border-radius: 3px;
  display: block; margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.ct-flags { display: flex; gap: 8px; margin-bottom: 12px; }
.ct-flags img { margin-bottom: 0; width: 34px; }
.ct-body b {
  display: block; font-family: var(--display);
  font-size: 1.14rem; font-weight: 700; color: var(--text); margin-bottom: 3px;
}
.ct-body span { display: block; font-size: .82rem; color: var(--text-dim); }
.ct-body i {
  display: block; font-style: normal; font-size: .76rem;
  color: var(--gold-soft); letter-spacing: .05em; margin-top: 7px;
}
.country-tile.new-markets { background: linear-gradient(160deg, #1A2233 0%, #0B0F17 100%); }

@media (max-width: 1080px) { .country-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .country-grid { grid-template-columns: 1fr; } .country-tile { min-height: 180px; } }

/* ---------- language switcher with real flag artwork ---------- */
.flag-img {
  width: 20px; height: auto; border-radius: 2px;
  display: inline-block; vertical-align: middle;
  margin-right: 2px; flex: none;
}
.lang-current { display: inline-flex; align-items: center; gap: 7px; }
.lang-menu button.lang-opt { display: flex; align-items: center; gap: 10px; }
.lang-menu button.lang-opt .flag-img { width: 22px; }


/* ---------- real flag artwork in cards and lists ---------- */
/* The emoji versions of these used to render as the bare letters "KG"/"KZ" on
   Windows, which ships no flag glyphs. These are real SVGs at a real size. */
.country-card .cc-flag {
  display: block; width: 46px; height: auto; margin: 0 auto 12px;
  border-radius: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.trust-group .trust-country {
  display: flex; align-items: center; gap: 10px;
}
.trust-group .trust-country .tc-flag {
  width: 26px; height: auto; border-radius: 2px; flex: none;
  box-shadow: 0 1px 5px rgba(0,0,0,.5);
}
body.is-rtl .trust-group .trust-country { flex-direction: row-reverse; }

.country-tile > img.ct-photo-bishkek { object-position: 50% 92%; }
.place-card img.pc-photo-bishkek { object-position: 50% 70%; }

/* The three group-structure cards carried a number and nothing else — the
   flattest blocks on the page. Same 58px chip as the guarantee cards. */
.pillar .p-ic {
  width: 58px; height: 58px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-dim); border-radius: 14px;
  background: linear-gradient(160deg, rgba(212,175,55,.08), transparent 70%);
}
.pillar .num { display: block; }

.country-card .cc-ic { display: block; margin: 0 auto 10px; }
.country-card .cc-ic .ic-art { margin: 0 auto; }

.country-tile > img.ct-photo-baku { object-position: 50% 40%; }
.place-card img.pc-photo-baku { object-position: 50% 46%; }

/* ================= MERIOS BUSINESS — chair rental (business.html) =========
   Each line keeps the accent colour it has on the client's own offer sheet, so
   the page is recognisable next to their printed material, while the page
   chrome stays on the brand's black + gold. */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.rent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rent-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); overflow: hidden;
  transition: border-color .3s ease, transform .3s ease;
}
.rent-card:hover { transform: translateY(-4px); }
.rent-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.rent-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rent-photo .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10,13,18,.85) 100%);
}
.rent-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.rent-body h3 {
  font-family: var(--sans); font-size: 1.02rem; font-weight: 700;
  letter-spacing: .09em; margin: 0; color: var(--accent, var(--gold));
}
.rent-sub {
  display: block; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-mute); margin: 4px 0 16px;
}
/* Equal height so the four price tables line up across the row even though
   the lines have three or four features. */
.rent-feats { list-style: none; margin: 0 0 18px; padding: 0; min-height: 118px; }
.rent-feats li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .82rem; color: var(--text-dim); line-height: 1.45; margin-bottom: 8px;
}
.rent-feats .rent-tick { flex: none; margin-top: 2px; }

.rent-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.rent-table th {
  font-family: var(--sans); font-size: .64rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute);
  text-align: left; padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--accent-soft, rgba(212,175,55,.07));
}
.rent-table td {
  font-size: .82rem; color: var(--text-dim); padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.rent-table td b { color: var(--text); font-weight: 600; }
.rent-table td i { font-style: normal; color: var(--text-mute); font-size: .72rem; margin-left: 5px; }

.rent-best { margin-top: auto; padding-top: 4px; }
.rent-best b {
  font-family: var(--display); font-size: 1.75rem; line-height: 1;
  color: var(--accent, var(--gold));
}
.rent-unit { font-size: .82rem; color: var(--text-dim); }
.rent-note { display: block; font-size: .72rem; color: var(--text-mute); margin-top: 4px; }
.rent-cta { margin-top: 16px; width: 100%; text-align: center; }

/* line accents, straight off the client's offer sheet */
.ln-eco       { --accent: #D8DCE4; --accent-soft: rgba(216,220,228,.07); }
.ln-orange    { --accent: #F07A24; --accent-soft: rgba(240,122,36,.09); }
.ln-premium   { --accent: #D4AF37; --accent-soft: rgba(212,175,55,.09); }
.ln-exclusive { --accent: #D8382F; --accent-soft: rgba(216,56,47,.09); }
.rent-card:hover { border-color: var(--accent); }
.rent-cta { border-color: var(--accent); }

.rent-save {
  display: flex; align-items: center; gap: 18px; margin-top: 26px;
  padding: 20px 24px; border: 1px solid var(--gold-dim); border-radius: var(--r-card);
  background: linear-gradient(120deg, rgba(212,175,55,.08), transparent 65%);
}
.rent-save b {
  display: block; font-family: var(--sans); font-size: .92rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text);
}
.rent-save span { display: block; font-size: .84rem; color: var(--text-dim); margin-top: 3px; }

/* ------------------------------------------------------------ how it works */
.step-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step-node {
  position: relative; text-align: center; padding: 26px 18px 24px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
}
.step-node .step-num {
  display: block; font-family: var(--display); font-size: .82rem;
  letter-spacing: .18em; color: var(--gold-dim); margin-bottom: 12px;
}
.step-node .icon-chip {
  width: 58px; height: 58px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-dim); border-radius: 14px;
  background: linear-gradient(160deg, rgba(212,175,55,.08), transparent 70%);
}
.step-node p { font-size: .85rem; color: var(--text-dim); margin: 0; line-height: 1.5; }
.step-node:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -12px; width: 8px; height: 8px;
  border-top: 1px solid var(--gold-dim); border-right: 1px solid var(--gold-dim);
  transform: translateY(-50%) rotate(45deg);
}

/* ----------------------------------------------------------- partner band */
.partner-band {
  display: flex; align-items: flex-start; gap: 26px;
  padding: 34px 32px; border: 1px solid var(--gold-dim); border-radius: var(--r-card);
  background: linear-gradient(120deg, rgba(212,175,55,.10), rgba(26,31,41,.5) 60%);
}
.partner-band .ic-art { flex: none; margin-top: 4px; }
.partner-band h2 { margin: 0 0 10px; font-size: 1.5rem; }
.partner-band p { margin: 0 0 20px; color: var(--text-dim); font-size: .9rem; max-width: 62ch; }

body.is-rtl .rent-table th, body.is-rtl .rent-feats li { text-align: right; }
body.is-rtl .rent-table td i { margin-left: 0; margin-right: 5px; }
body.is-rtl .step-node:not(:last-child)::after { right: auto; left: -12px; transform: translateY(-50%) rotate(-135deg); }
body.is-rtl .partner-band { flex-direction: row-reverse; text-align: right; }

@media (max-width: 1080px) {
  .rent-grid { grid-template-columns: repeat(2, 1fr); }
  .step-flow { grid-template-columns: repeat(2, 1fr); }
  .step-node:nth-child(2)::after { display: none; }
}
@media (max-width: 620px) {
  .rent-grid, .step-flow { grid-template-columns: 1fr; }
  .step-node::after { display: none !important; }
  .partner-band { flex-direction: column; gap: 16px; padding: 26px 20px; }
  .rent-save { flex-direction: column; text-align: center; gap: 12px; }
}


/* ================== photographic beds behind icon cards ====================
   The icon stays — it is what makes a card scannable at a glance — but it now
   sits on the brand's own photography instead of flat panel colour.
   Sources are the client's library only: real MERIOS locations where the card
   is genuinely about that place, the same interiors defocused everywhere else.
   No stock imagery: a stock airport photo under "Airports" would read as a
   MERIOS installation and claim a presence the company has not stated. */
.has-bed {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  isolation: isolate;
  border: 1px solid var(--line);
  transition: border-color .3s ease, transform .3s ease;
}
.has-bed > .bed, .has-bed > picture > .bed {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
/* The scrim is what keeps the copy the loudest thing on the card. */
.has-bed::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
      rgba(5,7,11,.46) 0%, rgba(5,7,11,.66) 42%, rgba(5,7,11,.90) 100%);
}
.has-bed:hover { border-color: var(--gold-dim); transform: translateY(-3px); }
.has-bed:hover > .bed, .has-bed:hover > picture > .bed { transform: scale(1.10); }

/* icon holders sitting on a photo need their own ground to stay legible */
.has-bed .icon-chip,
.has-bed .g-icon,
.has-bed .p-ic {
  background: rgba(10,13,18,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-color: rgba(212,175,55,.55);
}
.has-bed .why-ic {
  background: radial-gradient(circle at 50% 40%, rgba(10,13,18,.72), rgba(10,13,18,.5) 70%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.has-bed h3, .has-bed h4, .has-bed b, .has-bed .num, .has-bed .g-num {
  text-shadow: 0 1px 14px rgba(0,0,0,.8);
}
.has-bed p, .has-bed span, .has-bed .label, .has-bed li {
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}

/* per-card padding, since these containers had none of their own */
.icon-item.has-bed  { padding: 26px 18px 24px; }
.why-card.has-bed   { padding: 28px 20px 26px; }
.pillar.has-bed     { padding: 30px 26px 28px; }
.step-node.has-bed  { border-color: var(--line); }
.feature-card.has-bed { background: transparent; }
.guarantee-card.has-bed { background: transparent; }
.guarantee-card.has-bed:hover { background: transparent; }

/* full-width strips: one bed behind a whole row, graded darker still */
.hero-stats.has-bed, .stat-band.has-bed, .trust-bar.has-bed, .partner-band.has-bed {
  position: relative; overflow: hidden; isolation: isolate;
}
.hero-stats.has-bed::after, .stat-band.has-bed::after, .trust-bar.has-bed::after {
  background: linear-gradient(180deg, rgba(5,7,11,.72) 0%, rgba(5,7,11,.86) 100%);
}
.partner-band.has-bed::after {
  background: linear-gradient(120deg, rgba(5,7,11,.62) 0%, rgba(5,7,11,.88) 70%);
}
.hero-stats.has-bed:hover, .stat-band.has-bed:hover,
.trust-bar.has-bed:hover, .partner-band.has-bed:hover { transform: none; }

@media (max-width: 560px) {
  .icon-item.has-bed { min-height: 150px; }
}

/* A photo behind a card is decoration; nothing here may move for a visitor
   who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .has-bed, .has-bed > .bed, .has-bed > picture > .bed { transition: none; }
  .has-bed:hover { transform: none; }
  .has-bed:hover > .bed, .has-bed:hover > picture > .bed { transform: scale(1.04); }
}

/* The step number was set in the dim gold that reads on flat panel colour;
   over a photograph it disappears. */
.step-node.has-bed .step-num { color: var(--gold-soft); }
.step-node.has-bed::after {
  background: linear-gradient(180deg,
      rgba(5,7,11,.58) 0%, rgba(5,7,11,.74) 45%, rgba(5,7,11,.92) 100%);
}

/* ============ venue strip (from the client's brand board) ==================
   Seven interiors in one row, each with its icon and label sitting on the
   photograph. The board runs them edge to edge with hairline separators; the
   same idea here, but as real cards so they can wrap on narrow screens. */
.venue-strip-sec { padding-top: 0; }
.venue-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.vs-tile {
  position: relative;
  margin: 0;
  min-height: 250px;
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  transition: border-color .3s ease, transform .35s ease;
}
.vs-tile img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
  transition: transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.vs-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
      rgba(5,7,11,.30) 0%, rgba(5,7,11,.34) 40%,
      rgba(5,7,11,.80) 74%, rgba(5,7,11,.95) 100%);
}
.vs-tile:hover { border-color: var(--gold-dim); transform: translateY(-4px); }
.vs-tile:hover img { transform: scale(1.12); }
.vs-tile figcaption {
  position: relative;
  width: 100%;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vs-tile figcaption .ic-art { flex: none; }
.vs-tile figcaption span {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--text);
  text-shadow: 0 1px 12px rgba(0,0,0,.85);
}
body.is-rtl .vs-tile figcaption { text-align: right; }

@media (max-width: 1240px) { .venue-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .venue-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  {
  .venue-strip { grid-template-columns: 1fr; gap: 12px; }
  .vs-tile { min-height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-tile, .vs-tile img { transition: none; }
  .vs-tile:hover { transform: none; }
  .vs-tile:hover img { transform: scale(1.05); }
}

/* =================== placement.html — partner pitch ========================
   Built from the client's two posters. Layout follows them: four quick chips
   under the hero, the two cooperation models side by side split by an OR, the
   owner benefits, then requirements against what MERIOS covers. */
.pl-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pl-chip {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: linear-gradient(140deg, rgba(212,175,55,.06), transparent 65%);
}
.pl-chip .icon-chip {
  width: 46px; height: 46px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-dim); border-radius: 12px;
}
.pl-chip b {
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1.35; color: var(--text);
}

/* ------------------------------------------------------ the two models */
.pl-options {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 18px; align-items: stretch;
}
.pl-opt {
  display: flex; flex-direction: column;
  padding: 30px 28px 26px; border: 1px solid var(--gold-dim);
  border-radius: var(--r-card);
  background: linear-gradient(165deg, rgba(212,175,55,.07), rgba(26,31,41,.55) 62%);
}
.pl-opt-tag {
  align-self: flex-start; padding: 5px 16px; margin-bottom: 16px;
  border: 1px solid var(--gold-dim); border-radius: 999px;
  font-family: var(--sans); font-size: .64rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft);
}
.pl-opt h3 {
  font-family: var(--display); font-size: 1.6rem; margin: 0 0 12px; color: var(--text);
}
.pl-opt-promise {
  display: block; padding: 8px 16px; margin-bottom: 20px;
  border-radius: 999px; text-align: center;
  background: linear-gradient(100deg, rgba(212,175,55,.85), rgba(212,175,55,.45));
  color: #14100A; font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.pl-opt-list, .pl-cover, .pl-col-list { list-style: none; margin: 0; padding: 0; }
.pl-opt-list li, .pl-cover li, .pl-col-list li {
  display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px;
  font-size: .87rem; line-height: 1.5; color: var(--text-dim);
}
.pl-tick { flex: none; margin-top: 1px; }
.pl-opt-foot {
  display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px;
  border-top: 1px solid rgba(212,175,55,.28);
}
.pl-opt-foot b {
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
  letter-spacing: .03em; color: var(--gold-soft);
}
.pl-or { display: flex; align-items: center; justify-content: center; }
.pl-or span {
  width: 66px; height: 66px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-dim); background: var(--bg);
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; color: var(--gold-soft);
  box-shadow: 0 0 30px rgba(212,175,55,.18);
}

/* ---------------------------------------------------- owner benefits */
.pl-owner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pl-ocard {
  text-align: center; padding: 26px 16px 24px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); transition: border-color .3s ease, transform .3s ease;
}
.pl-ocard:hover { border-color: var(--gold-dim); transform: translateY(-3px); }
.pl-ocard .icon-chip {
  width: 54px; height: 54px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-dim); border-radius: 14px;
  background: linear-gradient(160deg, rgba(212,175,55,.08), transparent 70%);
}
.pl-ocard h4 {
  font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gold-soft); margin: 0 0 8px; line-height: 1.35;
}
.pl-ocard p { font-size: .82rem; color: var(--text-mute); margin: 0; line-height: 1.5; }

/* --------------------------------------------- requirements vs cover */
.pl-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 18px; }
.pl-panel {
  padding: 30px 28px; border: 1px solid var(--line);
  border-radius: var(--r-card); background: var(--surface);
}
.pl-panel-gold {
  border-color: var(--gold-dim);
  background: linear-gradient(150deg, rgba(212,175,55,.07), rgba(26,31,41,.5) 65%);
}
.pl-panel h3 {
  font-family: var(--sans); font-size: .86rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text); margin: 0 0 22px;
}
.pl-needs { display: grid; gap: 16px; }
.pl-need { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; }
.pl-need .icon-chip {
  width: 46px; height: 46px; grid-row: span 2;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-dim); border-radius: 12px;
}
.pl-need b {
  font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gold-soft); display: block;
}
.pl-need span { font-size: .8rem; color: var(--text-mute); display: block; margin-top: 3px; }
.pl-cover { columns: 2; column-gap: 26px; }
.pl-cover li { break-inside: avoid; }

/* -------------------------------------------- visitors vs owners split */
.pl-two { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 30px; align-items: start; }
.pl-col-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pl-col-head b {
  font-family: var(--sans); font-size: .84rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-soft);
}
.pl-mark {
  align-self: center; width: 96px; height: 96px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(212,175,55,.35);
  background: radial-gradient(circle at 50% 40%, rgba(212,175,55,.14), transparent 72%);
}
body.is-rtl .pl-col-head, body.is-rtl .pl-opt-list li,
body.is-rtl .pl-cover li, body.is-rtl .pl-col-list li { flex-direction: row-reverse; }
body.is-rtl .pl-opt-tag { align-self: flex-end; }

/* ------------------------------------------------------------- CTA */
.pl-cta {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 0;
  border: 1px solid var(--gold-dim); border-radius: var(--r-card); overflow: hidden;
}
.pl-cta img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-cta-body {
  padding: 40px 38px;
  background: linear-gradient(120deg, rgba(212,175,55,.09), rgba(26,31,41,.6) 65%);
}
.pl-cta-body h2 { margin: 0 0 12px; font-size: 1.65rem; }
.pl-cta-body p { margin: 0 0 24px; color: var(--text-dim); font-size: .92rem; max-width: 54ch; }
.pl-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1080px) {
  .pl-chips { grid-template-columns: repeat(2, 1fr); }
  .pl-owner { grid-template-columns: repeat(3, 1fr); }
  .pl-options, .pl-two { grid-template-columns: 1fr; gap: 18px; }
  .pl-or, .pl-mark { margin: 0 auto; }
  .pl-split, .pl-cta { grid-template-columns: 1fr; }
  .pl-cta img { max-height: 300px; }
}
@media (max-width: 620px) {
  .pl-chips, .pl-owner { grid-template-columns: 1fr; }
  .pl-cover { columns: 1; }
  .pl-opt, .pl-panel, .pl-cta-body { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { .pl-ocard:hover { transform: none; } }

/* ============ legibility pass — contrast, weight, size ====================
   Measured on the card ground #1A1F29 before this pass:
     body copy at --text-mute  3.62:1  (below the 4.5:1 needed to read)
     icon plate border --gold-dim  2.48:1  (why the icons looked empty)
   The tokens above were lifted; these rules fix the second half of the
   problem — everything was set at the same small size and weight, so nothing
   led the eye and nothing looked deliberate. */

/* --- the tick. A filled gold disc with a dark check, not a hairline ring. */
.pl-tick { flex: none; margin-top: 1px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.55)); }

/* --- the value word carries the line; the rest supports it */
.pl-lead {
  font-family: var(--sans); font-weight: 800; font-size: 1.02em;
  color: var(--gold-bright); letter-spacing: .01em; margin-right: .4em;
  white-space: nowrap;
}

/* --- body copy: bigger, lighter, more line spacing */
.pl-opt-list li, .pl-cover li, .pl-col-list li {
  font-size: .95rem; line-height: 1.55; color: var(--text-dim); margin-bottom: 15px;
}
.pl-ocard p { font-size: .88rem; line-height: 1.6; color: var(--text-dim); }
.pl-need span { font-size: .85rem; color: var(--text-dim); }
.pl-chip b { font-size: .84rem; }

/* --- icon plates: visible border, real ground, bigger box */
.pl-chip .icon-chip, .pl-ocard .icon-chip, .pl-need .icon-chip {
  border: 1px solid rgba(212,175,55,.55);
  background: linear-gradient(155deg, rgba(212,175,55,.16), rgba(10,13,18,.55) 72%);
  box-shadow: inset 0 0 18px rgba(212,175,55,.10), 0 4px 18px rgba(0,0,0,.45);
}
.pl-chip .icon-chip { width: 58px; height: 58px; }
.pl-ocard .icon-chip { width: 66px; height: 66px; }
.pl-need .icon-chip { width: 54px; height: 54px; }
.pl-need { grid-template-columns: 54px 1fr; }

/* --- headings: heavier, brighter, with room to breathe */
.pl-ocard h4 { font-size: .88rem; color: var(--gold-bright); letter-spacing: .05em; margin-bottom: 10px; }
.pl-need b { font-size: .84rem; color: var(--gold-bright); }
.pl-panel h3 { font-size: .95rem; color: var(--gold-bright); }
.pl-col-head b { font-size: .95rem; color: var(--gold-bright); }
.pl-opt-foot b { font-size: .9rem; color: var(--gold-bright); }
.pl-opt-tag { font-size: .68rem; color: var(--gold-bright); border-color: rgba(212,175,55,.6); }

/* --- panels sit on a photographic bed now, so they need their own scrim */
.pl-opt.has-bed::after, .pl-panel.has-bed::after {
  background: linear-gradient(165deg, rgba(5,7,11,.86) 0%, rgba(5,7,11,.93) 55%, rgba(5,7,11,.97) 100%);
}
.pl-opt.has-bed:hover, .pl-panel.has-bed:hover { transform: none; }

/* --- the two columns get a card of their own instead of floating on black */
.pl-col {
  padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: linear-gradient(160deg, rgba(26,31,41,.9), rgba(10,13,18,.85));
}
.pl-col-head { padding-bottom: 16px; border-bottom: 1px solid rgba(212,175,55,.25); }

/* ---------------------------------------------------- trust strip */
.pl-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 26px;
}
.pl-trust span {
  padding: 11px 20px; border: 1px solid rgba(212,175,55,.32); border-radius: 999px;
  font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  color: var(--gold-bright); background: rgba(212,175,55,.05); white-space: nowrap;
}

/* ------------------------------------------------------ mobile scale
   On a 390px phone the five-column grids squeezed to ~60px of text width.
   One column, larger type, bigger tap targets. */
@media (max-width: 760px) {
  .pl-hero h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1.12; }
  .pl-opt-list li, .pl-cover li, .pl-col-list li { font-size: 1rem; margin-bottom: 17px; }
  .pl-ocard p, .pl-need span { font-size: .92rem; }
  .pl-chip b, .pl-ocard h4, .pl-need b { font-size: .92rem; }
  .pl-opt h3 { font-size: 1.45rem; }
  .pl-col, .pl-opt, .pl-panel { padding: 24px 20px; }
  .pl-trust span { font-size: .84rem; padding: 10px 16px; }
}
.country-tile > img.ct-photo-samara { object-position: 50% 62%; }

/* Six place cards now, not four — three per row reads better than a cramped
   six-across, and the row still halves cleanly on tablet. */
.place-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .place-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .place-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- motion
   Added by js/motion.js. Both rules are purely additive: if the script never
   runs, the bar is simply never inserted and the header keeps its full height.
   Nothing on the page is hidden waiting for JS. */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 120;
  width: 100%; height: 2px; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #8C6F1E, #D4AF37 45%, #F4E3A8);
  will-change: transform; pointer-events: none;
}
header.site { transition: padding .28s cubic-bezier(.2,.7,.3,1), background .28s ease; }
header.site.condensed {
  background: rgba(10,13,18,.985);
  box-shadow: 0 10px 30px rgba(0,0,0,.38);
}
header.site.condensed .nav-row { padding-top: 6px; padding-bottom: 6px; }
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  header.site { transition: none; }
}

/* ============================================================
   Правки по итогам проверки на соответствие стандартам
   ============================================================ */

/* Основной текст карточек был 12,2 px на телефоне — ниже порога
   комфортного чтения. Поднимаем до 14 px, заголовки следом. */
@media (max-width: 720px) {
  .why-card p { font-size: .875rem; line-height: 1.6; }
  .why-card h4 { font-size: .95rem; }
}

/* Ярлык линии не проходил по контрасту (3,56 при норме 4,5).
   Осветляем красный, оттенок сохраняем. */
.ln-exclusive { --accent: #F2776D; --accent-soft: rgba(242,119,109,.10); }


/* ------------------------------------------------------------------
   Обёртка <picture> не должна вмешиваться в раскладку: она прозрачна,
   всю геометрию по-прежнему задаёт сама картинка.
------------------------------------------------------------------ */
.has-bed > picture {
  position: absolute; inset: 0; z-index: -2; display: block;
}
.has-bed > picture > .bed {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.country-tile > picture {
  position: absolute; inset: 0; display: block;
}
.country-tile > picture > img {
  width: 100%; height: 100%; object-fit: cover;
}