/* /visa/japan/japan-hero.css v1 (09.10.2026) — первый экран Японии по схеме Шенгена (schengen.css v8 + air):
   фото справа на месте карты, ширина «предмета» = --jp-map (те же числа, что --sc-map), текст не заходит на него;
   слева тот же кремовый шов (#F7F5F0 → #fbecd9), фото мягко растворяется в шов. Тексты не меняются.
   Подключать ПОСЛЕДНИМ в <head> страницы /visa/japan/ (после vcp-buttons.css). Только html-префикс, без !important. */
html .jp-hero {
  --jp-col: max(0px, (100vw - 1280px) / 2);
  
}
html .jp-hero__art {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: auto;
  width: min(100%, var(--jp-art, 100%));
  margin: 0;
  pointer-events: none;
}
html .jp-hero__art picture { display: contents; }
html .jp-hero__art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: right center;
  /* шов слева (как переход карты Шенгена) и мягкий низ, чтобы фото не обрывалось линией */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 24%), linear-gradient(180deg, #000 84%, transparent 100%);
  mask-composite: intersect;
}
/* ≥768: те же ширины, что карта Шенгена; фото 16:9 шире «предмета» на 75% и уходит под кремовую часть */
@media (min-width: 768px) {
  html .jp-hero {
    --jp-map: min(46vw, 520px, calc(100vw - 464px), calc(100vh - var(--bar-h, 61px)));
    --jp-gap: 48px;
    --jp-art: calc(var(--jp-map) * 1.75);
    background: #F7F5F0;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }
  html .jp-hero__copy {
    flex: 0 1 680px;
    max-width: calc(100vw - var(--jp-map) - 32px - var(--jp-gap));
  }
  html .jp-hero__crumbs {
    background: #F7F5F0;
    position: relative;
    top: auto;
    z-index: 3;
    grid-column: 1;
    grid-row: 1;
  }
  html .jp-hero__grid { grid-column: 1; grid-row: 2; align-items: flex-start; position: relative; z-index: 1; min-height: calc(var(--jp-art) * 9 / 16); }
  html .jp-hero__art {
    position: absolute;
    grid-row: 2;
    grid-column: 1;
    top: auto;
    right: 0;
    bottom: auto;
    left: auto;
    width: var(--jp-art);
    height: auto;
    margin: 0;
    z-index: 0;
  }
  html .jp-hero__art img { height: auto; max-height: none; }
  html .jp-hero .clients { grid-column: 1; grid-row: 3; position: relative; z-index: 2; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* Текст на кремовой колонке. */
  html .jp-hero__copy { background: #F7F5F0; }
}
@media (min-width: 1024px) {
  html .jp-hero {
    --jp-map: min(46vw, 520px, calc(100vh - var(--bar-h, 61px)));
    --jp-gap: clamp(48px, 12.9vw - 84.1px, 81px);
  }
  html .jp-hero__copy { background: #F7F5F0; }
}
@media (min-width: 1101px) {
  html .jp-hero { --jp-map: min(46vw, 640px, calc(100vh - var(--bar-h, 61px))); }
}
@supports (height: 1svh) {
  @media (min-width: 768px) {
    html .jp-hero { --jp-map: min(46vw, 520px, calc(100vw - 464px), calc(100svh - var(--bar-h, 61px))); }
  }
  @media (min-width: 1024px) {
    html .jp-hero { --jp-map: min(46vw, 520px, calc(100svh - var(--bar-h, 61px))); }
  }
  @media (min-width: 1101px) {
    html .jp-hero { --jp-map: min(46vw, 640px, calc(100svh - var(--bar-h, 61px))); }
  }
}
/* <768: как Шенген — фото под текстом на всю ширину, верх растворяется в фон страницы */
@media (max-width: 767px) {
  html .jp-hero { background: #F7F5F0; }
  html .jp-hero__art {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin: 24px 0 0;
  }
  html .jp-hero__art img {
    height: auto;
    aspect-ratio: 16 / 9;
    object-position: center center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, transparent 0, #000 18%);
    mask-composite: add;
  }
}

/* 27.10: лента как на главной. Без подложки, радиуса и тени. Ширина 920 по центру, на 820 не уже. */
html .jp-hero .clients,
html .sc-hero .clients {
  position: relative;
  z-index: 2;
  width: min(920px, calc(100% - 48px));
  margin: 48px auto 0;
  padding: 8px 0 4px;
  text-align: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 767px) {
  html .jp-hero { display: flex; flex-direction: column; }
  html .jp-hero__grid { order: 1; }
  html .jp-hero__art { order: 2; }
  html .jp-hero .clients,
  html .sc-hero .clients {
    order: 3;
    margin-top: 32px;
    padding: 8px 0 4px;
  }
  html .sc-hero .sc-hero__map { order: 2; }
}
html .jp-hero .clients__rule,
html .sc-hero .clients__rule {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 0 18px;
}
html .jp-hero .clients__line,
html .sc-hero .clients__line {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(12, 22, 51, 0.28);
}
html .jp-hero .clients__mid,
html .sc-hero .clients__mid {
  flex: 0 0 auto;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 13px;
  text-transform: uppercase;
  color: #6B665C;
  white-space: nowrap;
}
html .jp-hero .cm__row,
html .sc-hero .cm__row { padding-left: 48px; }
@media (max-width: 767px) {
  html .jp-hero .cm__row,
  html .sc-hero .cm__row { padding-left: 32px; }
}
/* 27.10: Шенген с 768 — карта и текст в одном ряду, лента строкой ниже, не на карте. */
@media (min-width: 768px) {
  html .sc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-height: 0;
    overflow: visible;
  }
  html .sc-hero__crumbs {
    position: relative;
    top: auto;
    grid-column: 1;
    grid-row: 1;
  }
  html .sc-hero__grid {
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
    min-height: 0;
    z-index: 1;
  }
  html .sc-hero__map {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    align-self: start;
    width: var(--sc-map);
    height: auto;
    z-index: 0;
  }
  html .sc-hero__map img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
  html .sc-hero .clients {
    grid-column: 1 / -1;
    grid-row: 3;
    width: min(920px, calc(100% - 48px));
    margin-top: 32px;
    margin-right: auto;
    margin-left: auto;
    justify-self: center;
  }
}

/* 26.10: зона 44 px уходит наружу, телефон и почта не перекрываются. */
html #faq .jp-faq__contact .jp-faq__tel,
html #faq .jp-faq__contact .jp-faq__mail {
  display: inline-flex;
  box-sizing: border-box;
  min-height: 44px;
  height: 44px;
}
html #faq .jp-faq__contact .jp-faq__tel {
  align-items: flex-end;
  padding: calc(44px - 1.25em) 0 0;
  margin: calc(4px - (44px - 1.25em)) 0 0;
}
html #faq .jp-faq__contact .jp-faq__mail {
  align-items: flex-start;
  padding: 0 0 calc(44px - 1.25em);
  margin: 4px 0 calc(1.25em - 44px);
}

/* 26.10: кнопка консультации — контур акцента, не серая плашка. */
html .jp-faq .jp-faq__btn {
  background: #fff;
  border: 1.5px solid #83652F;
  color: #83652F;
  height: 48px;
  min-height: 48px;
  border-radius: 12px;
  box-shadow: none;
}
html .jp-faq .jp-faq__btn:hover {
  background: #83652F;
  border-color: #83652F;
  color: #fff;
}
html .jp-faq .jp-faq__btn:active {
  background: #83652F;
  color: #fff;
}
html .jp-faq .jp-faq__btn:focus-visible {
  outline: 2px solid #83652F;
  outline-offset: 2px;
  box-shadow: none;
}

/* 26.10: тот же блок «Готовы оформить визу?», что на главной. */
html .jp-faq .jp-faq__in { padding-bottom: 64px; }
html .jp-faq .jp-faq__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  row-gap: 24px;
  column-gap: 24px;
  width: 100%;
  margin-top: 64px;
  text-align: left;
}
html .jp-faq .jp-faq__cta-copy { flex: none; min-width: 0; max-width: none; }
html .jp-faq .jp-faq__cta-h {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  color: #201f1c;
}
html .jp-faq .jp-faq__cta-sub { margin: 10px 0 0; max-width: 46ch; }
html .jp-faq .jp-faq__btn {
  justify-self: stretch;
  align-self: center;
  width: 100%;
  border-width: 1.5px;
}
html .jp-faq .jp-faq__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  align-self: stretch;
  width: 100%;
  max-width: none;
  height: 128px;
  margin-left: 0;
  box-sizing: border-box;
  background: #F7EEE4;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (min-width: 341px) {
  html .jp-faq .jp-faq__contact { padding: 24px; }
}
@media (min-width: 768px) {
  html .jp-faq .jp-faq__in { padding-bottom: 80px; }
  html .jp-faq .jp-faq__cta {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    row-gap: 24px;
    margin-top: 80px;
  }
  html .jp-faq .jp-faq__cta-copy { grid-column: 1; grid-row: 1; }
  html .jp-faq .jp-faq__btn { grid-column: 2; grid-row: 1; width: auto; justify-self: end; }
  html .jp-faq .jp-faq__contact { grid-column: 1 / -1; grid-row: 2; }
  html .jp-faq .jp-faq__cta-h { font-size: 22px; }
}
@media (min-width: 1024px) {
  html .jp-faq .jp-faq__in { padding-bottom: 96px; }
  html .jp-faq .jp-faq__cta { margin-top: 96px; }
  html .jp-faq .jp-faq__cta-h { font-size: 30px; }
}
@media (min-width: 1200px) {
  html .jp-faq .jp-faq__cta {
    grid-template-columns: minmax(0, 1fr) auto 380px;
    column-gap: 40px;
    row-gap: 0;
  }
  html .jp-faq .jp-faq__btn { grid-column: 2; grid-row: 1; justify-self: center; }
  html .jp-faq .jp-faq__contact {
    grid-column: 3;
    grid-row: 1;
    width: 380px;
    justify-self: end;
  }
  html .jp-faq .jp-faq__cta-h { font-size: 28px; }
}

/* 26.10: «Нас выбирают» под фото и под картой, не между текстом и предметом. */
html .jp-hero h1 { max-width: 6.5em; }
html .jp-kicker { color: #1a2744; }
html .jp-kicker__rule { display: none; }
html .jp-hero__actions,
html .sc-hero__actions { gap: 12px; }
html .jp-hero__actions .sg-btn,
html .sc-hero__actions .sc-btn {
  text-transform: none;
  height: 48px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
}
html .jp-hero .sc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  max-width: 36rem;
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(20, 32, 51, 0.14);
  color: #3e4a5c;
  font-size: 15px;
  line-height: 1.4;
}
html .jp-hero .sc-dot { display: none; }
html .jp-hero .sc-meta .sc-dot + span { white-space: nowrap; }
html .jp-hero .sc-meta .sc-dot + span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 12px;
  border-radius: 50%;
  background: #ca9961;
  vertical-align: 0.18em;
}

/* 06.11: сцена на весь блок, текст поверх. Крем и лента — после героя. */
html .jp-hero,
html .sc-hero {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: #F7F5F0;
}
html .jp-hero__scene,
html .sc-hero__scene {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: max(680px, calc(100vw * 0.535));
  min-height: max(680px, calc(100vw * 0.535));
  padding: 0;
}
html .jp-hero__art,
html .sc-hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  z-index: 0;
  pointer-events: none;
}
html .jp-hero__art picture,
html .sc-hero__art picture {
  display: block;
  width: 100%;
  height: 100%;
}
html .jp-hero__art img,
html .sc-hero__art img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: right center;
  mask-image: none;
  -webkit-mask-image: none;
}
html .jp-hero__art::after,
html .sc-hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 12, 8, 0.84) 0%, rgba(18, 12, 8, 0.7) 34%, rgba(18, 12, 8, 0) 55%);
}
html .jp-hero__crumbs,
html .jp-hero__grid,
html .sc-hero__crumbs,
html .sc-hero__grid {
  position: relative;
  z-index: 2;
  min-height: 0;
  background: transparent;
}
html .jp-hero__copy,
html .sc-hero__copy {
  background: transparent;
  max-width: min(640px, 46vw);
}
html .jp-hero h1,
html .sc-hero h1,
html .jp-kicker,
html .sc-kicker,
html .jp-lead,
html .sc-lead {
  color: #F8F4EC;
}
html .sc-hero h1 { max-width: 10em; }
html .jp-hero .vcp-crumbs,
html .sc-hero .vcp-crumbs,
html .jp-hero .vcp-crumbs a,
html .sc-hero .vcp-crumbs a {
  color: rgba(248, 244, 236, 0.86);
}
html .jp-hero .sc-meta,
html .sc-hero .sc-meta {
  color: #F8F4EC;
  border-top-color: rgba(248, 244, 236, 0.32);
}
html .jp-hero .clients,
html .sc-hero .clients {
  order: 2;
  position: relative;
  z-index: 2;
  margin: 36px auto 8px;
  background: transparent;
}
@media (max-width: 767px) {
  html .jp-hero__scene,
  html .sc-hero__scene {
    box-sizing: border-box;
    height: calc(100dvh - 61px);
    min-height: calc(100dvh - 61px);
    max-height: calc(100dvh - 61px);
    justify-content: flex-start;
    padding: 12px 0 0;
  }
  html .jp-hero__art,
  html .sc-hero__art { overflow: hidden; }
  html .jp-hero__art img {
    height: 155%;
    object-position: center top;
  }
  html .sc-hero__art img {
    height: 185%;
    object-position: center top;
  }
  html .jp-hero__art::after,
  html .sc-hero__art::after {
    background: linear-gradient(180deg, rgba(18, 12, 8, 0.86) 0%, rgba(18, 12, 8, 0.74) 59%, rgba(18, 12, 8, 0) 78%);
  }
  html .jp-hero__copy,
  html .sc-hero__copy { max-width: none; }
  html .jp-hero__actions,
  html .sc-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  html .jp-hero__actions .sg-btn,
  html .sc-hero__actions .sc-btn { width: 100%; }
  html .sc-hero .sc-meta {
    flex-wrap: nowrap;
    gap: 6px 8px;
    font-size: 13px;
    letter-spacing: -0.01em;
  }
}
@supports (height: 1svh) {
  @media (max-width: 767px) {
    html .jp-hero__scene,
    html .sc-hero__scene {
      height: calc(100svh - 61px);
      min-height: calc(100svh - 61px);
      max-height: calc(100svh - 61px);
    }
  }
}
@media (max-height: 640px) {
  html .jp-hero__copy,
  html .sc-hero__copy { display: flex; flex-direction: column; }
  html .jp-kicker,
  html .sc-kicker { order: 0; }
  html .jp-hero h1,
  html .sc-hero h1 { order: 1; }
  html .jp-lead,
  html .sc-lead { order: 2; }
  html .jp-hero__actions,
  html .sc-hero__actions { order: 3; }
  html .jp-hero .sc-meta,
  html .sc-hero .sc-meta,
  html .jp-trust { order: 4; }
}
@media (max-width: 767px) and (orientation: landscape) {
  html .jp-hero__scene,
  html .sc-hero__scene {
    height: max(430px, calc(100dvh - 61px));
    min-height: max(430px, calc(100dvh - 61px));
    max-height: none;
    justify-content: flex-start;
    padding: 2px 0 0;
  }
  html .jp-hero__crumbs,
  html .sc-hero__crumbs { min-height: 0; }
  html .jp-hero__crumbs .vcp-crumbs,
  html .sc-hero__crumbs .vcp-crumbs {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.2;
    min-height: 0;
  }
  html .jp-kicker,
  html .sc-kicker { margin-bottom: 2px; }
  html .jp-hero h1,
  html .sc-hero h1 { max-width: none; margin: 0; line-height: 1.05; }
  html .jp-lead,
  html .sc-lead { margin-top: 2px; line-height: 1.25; }
  html .jp-hero__actions,
  html .sc-hero__actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    margin-top: 4px;
  }
  html .jp-hero__actions .sg-btn,
  html .sc-hero__actions .sc-btn {
    width: auto;
    flex: 0 0 auto;
    height: 48px;
    min-height: 48px;
  }
  html .jp-hero .sc-meta,
  html .sc-hero .sc-meta { margin-top: 4px; padding-top: 4px; }
  html .jp-hero__art img,
  html .sc-hero__art img {
    height: 100%;
    object-position: center 42%;
  }
}
@supports (height: 1svh) {
  @media (max-width: 767px) and (orientation: landscape) {
    html .jp-hero__scene,
    html .sc-hero__scene {
      height: max(430px, calc(100svh - 61px));
      min-height: max(430px, calc(100svh - 61px));
      max-height: none;
    }
  }
}
@media (min-width: 768px) and (max-width: 1279px) {
  html .jp-hero__scene,
  html .sc-hero__scene {
    box-sizing: border-box;
    height: min(608px, calc(100dvh - 61px));
    min-height: 0;
    max-height: min(608px, calc(100dvh - 61px));
    justify-content: flex-end;
    padding: 0 0 28px;
  }
}
@supports (height: 1svh) {
  @media (min-width: 768px) and (max-width: 1279px) {
    html .jp-hero__scene,
    html .sc-hero__scene {
      height: min(608px, calc(100svh - 61px));
      min-height: 0;
      max-height: min(608px, calc(100svh - 61px));
    }
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  html .jp-hero__art img { object-position: 60% center; }
  html .sc-hero__art img { object-position: 68% center; }
}
@media (min-width: 901px) and (max-width: 1279px) {
  html .sc-hero__art img { object-position: 72% center; }
}

/* 06.11: Шенген темнее тем же кадром. Японию не трогаем. */
html .sc-hero__art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(8, 8, 10, 0.32);
}

/* 06.11: две строки заголовка на узком десктопе. */
@media (min-width: 768px) and (max-width: 809px) {
  html .jp-hero h1 {
    font-size: 48px;
    max-width: 12em;
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  html .sc-hero h1 {
    font-size: 42px;
    max-width: 14em;
    letter-spacing: -0.03em;
  }
}