/*
 * Visual reproduction layer.
 *
 * This file is deliberately loaded after styles.css.  It translates the
 * dimensions and states from the exported Drupal theme to the compact static
 * markup, without changing the rendered contract of the original site.
 */

@font-face {
  font-family: "Montserrat";
  src: url("./assets/fonts/Montserrat-Regular400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("./assets/fonts/Montserrat-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "M PLUS Rounded 1c";
  src: url("./assets/fonts/MPLUSRounded1c-Regular400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "M PLUS Rounded 1c";
  src: url("./assets/fonts/MPLUSRounded1c-Medium500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "M PLUS Rounded 1c";
  src: url("./assets/fonts/MPLUSRounded1c-ExtraBold800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: Roboto;
  src: url("./assets/fonts/Roboto400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Roboto;
  src: url("./assets/fonts/Roboto-Bold700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --source-orange: #ff5c22;
  --source-green: #557614;
  --source-blue: #d5eaef;
  --source-footer: #4e700d;
}

body {
  color: #222;
  font-family: Roboto, Arial, sans-serif;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.container {
  width: calc(100% - 40px);
  max-width: 1280px;
}

h1, h2, h3,
.trip-card h3,
.review-card cite,
.mini-videos figcaption,
.benefits h3 {
  font-family: "M PLUS Rounded 1c", MPlus, Arial, sans-serif;
}

.site-header {
  height: 70px;
  box-shadow: 0 3px 5px rgb(0 0 0 / 25%);
}

.site-header__inner {
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
  gap: 20px;
}

.site-logo img,
.header__logo-image {
  width: 200px;
  max-height: none;
}

.site-nav {
  gap: 10px;
  font-family: Montserrat, sans-serif;
}

.site-nav a {
  position: relative;
  color: #000;
  font-family: Montserrat, sans-serif;
  font-size: .8rem;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a::after {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--source-orange);
  content: "";
  transition: width .3s;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--source-orange);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  width: 100%;
}

.page {
  padding-top: 70px;
}

.button--outline {
  border-color: var(--source-green);
  font-family: "M PLUS Rounded 1c", MPlus, Arial, sans-serif;
}

.button--outline:hover,
.button--outline:focus-visible {
  background-color: var(--source-blue);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3f8a7c;
}

/* The review action is outside the blue panels, but its source hover state
   has the same light-green fill and double contour as the reference image. */
.button--reviews:hover,
.button--reviews:focus-visible {
  background-color: var(--green-light);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3f8a7c;
}

/* The two panels in "Что делать дальше?" reproduce the compact source
   forms: a short contact form and a selector leading to a chosen trip. */
.contact-panel {
  min-width: 0;
  padding: 30px 50px 50px;
  border-radius: 40px;
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 620px));
  justify-content: center;
  gap: 40px;
}

@media (max-width: 999px) {
  .form-grid {
    grid-template-columns: minmax(0, 620px);
  }
}

.contact-panel h3 {
  margin: 0 0 30px;
  color: #081f32;
  font-family: "M PLUS Rounded 1c", MPlus, Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}

.site-form--talk {
  width: min(100%, 450px);
  margin: 0 auto;
  justify-items: center;
  gap: 20px;
}

.site-form--talk > input {
  width: 100%;
  height: 54px;
  padding: 0 30px;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 15px;
  color: #081f32;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
}

.site-form--talk .captcha-line {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #081f32;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.site-form--talk .captcha-line span { color: var(--source-orange); }

.site-form--talk .captcha-line input {
  width: 40px;
  height: 25px;
  padding: 2px 4px;
  border: 2px solid var(--source-green);
  border-radius: 5px;
}

.site-form--talk small { display: none; }

.site-form--talk .button {
  width: 172px;
  min-height: 53px;
  font-size: 1rem;
}

/* Trip sign-up form: retain the source form's 250px columns, field sizing
   and CAPTCHA fieldset while using a compact semantic layout. */
.site-form--signup {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  gap: 20px;
  color: #000;
  font-family: Roboto, Arial, sans-serif;
}

.signup-grid {
  display: flex;
  gap: 30px;
}

.signup-column {
  display: grid;
  flex: 0 0 250px;
  align-content: start;
  gap: 20px;
}

.site-form--signup label {
  display: block;
  color: #000;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
}

.site-form--signup label > span,
.signup-captcha legend span,
.signup-captcha label span {
  color: var(--source-orange);
}

.site-form--signup input,
.site-form--signup textarea,
.site-form--signup select {
  display: block;
  width: 250px;
  margin-top: 7px;
  border: 2px solid var(--source-green);
  border-radius: 5px;
  padding: 4px;
  color: #000;
  font-family: Roboto, Arial, sans-serif;
}

.site-form--signup input { height: 32px; }

.site-form--signup input:focus,
.site-form--signup textarea:focus,
.site-form--signup select:focus,
.site-form--signup input:focus-visible,
.site-form--signup textarea:focus-visible,
.site-form--signup select:focus-visible {
  outline: none;
  box-shadow: none;
}

.site-form--signup textarea {
  height: 127px;
  min-height: 127px;
  resize: vertical;
}

.site-form--signup select {
  width: 80px;
  height: 28px;
  padding: 1px 4px;
}

.signup-captcha {
  width: 250px;
  margin: 0;
  padding: 7px 12px 12px;
  border: 2px solid var(--source-green);
  border-radius: 15px;
}

.signup-captcha legend {
  padding: 0 2px;
  color: #000;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
}

.signup-captcha label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.signup-captcha input {
  display: inline-block;
  width: 40px;
  height: 25px;
  margin-top: 0;
  padding: 2px 4px;
}

.signup-captcha small {
  display: block;
  width: 200px;
  margin-top: 8px;
  color: #000;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.2;
}

/* Форма записи: подсказки, счётчики «− 2 +», выбор опыта, примечание под кнопкой. */
.site-form--signup .signup-help {
  display: block;
  margin-top: -14px;
  color: #555;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.25;
}

.site-form--signup textarea[name="comment"] {
  height: auto;
  min-height: 64px;
}

.signup-label {
  display: block;
  color: #000;
  font-size: 18px;
  line-height: 1.2;
}

.stepper {
  display: inline-flex;
  align-items: center;
  margin-top: 7px;
  border: 2px solid var(--source-green);
  border-radius: 5px;
  overflow: hidden;
}

.stepper button {
  width: 40px;
  height: 36px;
  border: 0;
  background: #f1f5e8;
  color: #000;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.stepper button:hover { background: #dfe8c8; }

.site-form--signup .stepper input {
  width: 48px;
  height: 36px;
  margin: 0;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-size: 18px;
  -moz-appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stepper button:focus-visible,
.signup-chips input:focus-visible + span {
  outline: 3px solid #2d8b8a;
  outline-offset: 2px;
}

.signup-chips {
  margin: 0;
  padding: 0;
  border: 0;
}

.signup-chips legend {
  padding: 0;
  margin-bottom: 7px;
  color: #000;
  font-size: 18px;
}

.signup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 250px;
}

.site-form--signup .signup-chips label { display: inline-block; font-size: 16px; }

.site-form--signup .signup-chips input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.signup-chips span {
  display: inline-block;
  padding: 6px 12px;
  border: 2px solid var(--source-green);
  border-radius: 999px;
  background: #fff;
  color: #000 !important;
  cursor: pointer;
}

.signup-chips input:checked + span {
  background: var(--source-green);
  color: #fff !important;
}

[data-children-ages][hidden] { display: none; }

.site-form--signup [data-children-ages] .signup-help { margin-top: 5px; }

.site-form--signup > .button[type="submit"] {
  width: auto;
  min-width: 172px;
  padding-inline: 26px;
}

.signup-note {
  margin: -8px 0 0;
  color: #555;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
}

.site-form--signup > .button {
  justify-self: center;
  width: 172px;
  min-height: 53px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
}

@media (max-width: 570px) {
  .signup-grid {
    flex-direction: column;
    gap: 20px;
  }

  .signup-column { flex-basis: auto; }
}

.form-success {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  border: 3px solid var(--source-green);
  border-radius: 20px;
  padding: 32px;
  background: #fff;
  color: var(--source-green);
  font-family: "M PLUS Rounded 1c", MPlus, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}

.trip-choice-form {
  display: grid;
  justify-items: center;
  gap: 40px;
}

.trip-choice-form select {
  width: 235px;
  height: 54px;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 15px;
  background: #f1f1f3;
  color: rgb(0 0 0 / 50%);
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  text-align: center;
}

.trip-choice-form .button {
  width: 235px;
  min-height: 80px;
  padding: 8px 50px;
  font-family: "M PLUS Rounded 1c", MPlus, Arial, sans-serif;
  font-size: 1rem;
}

/* Both actions in the light-blue home panels have the same source hover:
   green fill, white inner contour and turquoise outer contour. */
.contact-panel .button--outline:hover,
.contact-panel .button--outline:focus-visible {
  background-color: #91a657;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3f8a7c;
}

/* Home banner: the image itself defines the banner height. */
.hero--home.main__intro {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
}

/* The fixed header occupies its own vertical space; it must not cover the
   upper part of the home banner. */
.page-home main {
  padding-top: 70px;
}

.main__intro-image,
.main__intro-image img {
  width: 100%;
}

.main__intro-text-container,
.main__intro-button-container {
  position: absolute;
  top: 0;
  display: flex;
  width: calc(100% - 40px);
  height: 100%;
  padding: 0 20px;
}

.main__intro-text-container {
  align-items: center;
  justify-content: flex-start;
}

.main__intro-button-container {
  align-items: flex-end;
  justify-content: flex-end;
}

.main__intro-text {
  width: 90%;
  margin: 0;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-shadow: rgb(0 0 0 / 70%) 0 0 25px;
}

.hero--home .hero__button {
  position: static;
  width: 120px;
  min-height: 30px;
  height: 30px;
  margin-bottom: 15px;
  padding: 0;
  border-width: 3px;
  border-radius: 14px;
  background: #fff;
  font-size: .75rem;
}

.hero--home .hero__button:hover,
.hero--home .hero__button:focus-visible {
  background-color: rgb(85 118 20 / 90%);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3f8a7c;
}

.hero--trip {
  height: auto;
  aspect-ratio: 10 / 3;
  background: none;
}

.hero--trip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The hero image is taller than its 10:3 frame: keep the painted sailboat
   below the fixed header instead of cropping from the top. */
.hero--trip[data-trip-id="onego-sailing-regatta-1-2026-08-02"] img {
  object-position: center top;
}

/* Keep the year with the title wording on the first desktop line. */
@media (min-width: 1100px) {
  .trip-detail[data-trip-id="onego-sailing-regatta-1-2026-08-02"],
  .trip-detail[data-trip-id="onego-sailing-regatta-2-2026-08-08"] {
    --content-heading-size: 44px;
    --content-heading-line-height: 53px;
  }
}

/* Home and trip-list cards. */
.section--trips {
  padding: 50px 0;
}

.page-home .section h2,
.section--trips h1 {
  margin: 0 0 50px;
  color: var(--source-orange);
  font-family: "M PLUS Rounded 1c", MPlus, Arial, sans-serif;
  font-size: 43px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.trip-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.trip-card {
  width: min(400px, 100%);
  min-height: 0;
  border: 4px solid rgb(0 0 0 / 8%);
  border-radius: 20px;
  box-shadow: 0 4px 15px rgb(0 0 0 / 15%);
  transition: box-shadow .2s ease-in-out;
}

.trip-card:hover,
.trip-card:focus-visible {
  transform: none;
  box-shadow: 0 4px 15px rgb(85 118 20 / 70%);
}

.trip-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.trip-card__body {
  /* The longest card has at least 50px between its description and frame. */
  padding: 20px 20px 50px;
}

.trip-card h3,
.trip-card__dates {
  color: #102a43;
  /* The source cards use Roboto. On Windows, -webkit-font-smoothing is
     intentionally ignored by browsers, so choosing the source face is what
     actually reproduces its rasterisation. */
  font-family: Roboto, Arial, sans-serif !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The home page has a generic rounded-heading rule with equal importance.
   Card labels are an exception and must retain the same Roboto rendering as
   the cards on trips.html. */
.page-home .trip-card h3 {
  font-family: Roboto, Arial, sans-serif !important;
}

.trip-card h3 {
  font-size: 20px;
  line-height: 1.2;
}

.trip-card__dates {
  margin: 2px 0 20px;
  font-size: 19px;
}

.trip-card__type {
  margin: 0 0 28px;
  color: #5c6b7a;
  font-size: 12px;
}

.trip-card__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
}

/* Common home blocks. */
.section--why,
.section--reviews,
.section--how,
.section--forms {
  padding: 50px 0;
}

.container--reading > p {
  color: #646464;
  font-size: 18px;
  line-height: 1.45;
}

.mini-videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  max-width: none;
  margin: 50px 0 0;
}

.mini-videos figure {
  width: 275px;
}

.mini-videos img,
.mini-videos video {
  display: block;
  width: 275px;
  height: 155px;
  aspect-ratio: 272 / 152;
  object-fit: cover;
  object-position: center;
  vertical-align: top;
  border-radius: 20px;
  overflow: hidden;
}

.mini-videos figcaption {
  margin-top: 5px;
  color: var(--source-orange);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.review-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 50px 0 0;
}

.review-card {
  width: min(400px, 100%);
  min-height: 0;
  padding: 30px;
  border: 1px solid #dce1df;
  border-radius: 10px;
}

.review-card img {
  width: 150px;
  height: 150px;
}

.review-card blockquote {
  margin: 25px 0;
  color: #52657a;
  font-size: 13px;
}

.review-card cite {
  color: #102a43;
  font-size: 20px;
}

.benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
}

.benefits article {
  width: 245px;
}

.benefits img {
  width: 133px;
  height: 133px;
}

.benefits h3 {
  margin-top: 12px;
  color: var(--source-orange);
  font-size: 20px;
  font-weight: 800;
}

/* Stable vertical contact controls from the original site. */
.side-actions {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.floating-social,
.floating-contact {
  /* The Drupal theme did not apply the site's global border-box reset here. */
  box-sizing: content-box;
  position: fixed;
  top: 50%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  transform: translateY(-50%);
}

.floating-social {
  left: 0;
  width: 50px;
  height: 120px;
  border: 1px solid var(--source-green);
  border-left: 0;
  border-radius: 0 14px 14px 0;
}

.floating-social .icons-circle {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}

.floating-social .icons-circle:hover {
  filter: drop-shadow(2px 2px 4px rgb(0 0 0 / 30%));
  opacity: .8;
  transform: translateX(1px);
}

.floating-contact {
  right: 0;
  flex-direction: column;
  width: 50px;
  height: 90px;
  padding: 7px 0;
  border: 1px solid var(--source-orange);
  border-right: 0;
  border-radius: 14px 0 0 14px;
}

.icons-circle-contact {
  position: relative;
  display: flex;
  align-items: center;
  margin: 10px;
  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}

.icons-circle-contact:hover {
  filter: drop-shadow(2px 2px 4px rgb(0 0 0 / 30%));
  opacity: .8;
  transform: translateX(2px);
}

.icons-phone-tooltip,
.icons-email-tooltip {
  position: absolute;
  right: 25px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--source-green);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  transition: opacity .3s ease-in-out, visibility .3s ease-in-out, transform .3s ease-in-out;
}

.icons-circle-contact:hover .icons-phone-tooltip,
.icons-circle-contact:hover .icons-email-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-10px);
}

.site-footer {
  padding: 40px 0;
  background: var(--source-footer);
  color: #d6dfbe;
}

.site-footer p {
  max-width: 1280px;
  margin: 14px 0;
}

@media (min-width: 480px) {
  .main__intro-text-container { line-height: 1.8em; }
  .hero--home .main__intro-text { font-size: 24px !important; line-height: inherit !important; }
  .hero--home .hero__button { width: 160px; min-height: 40px; height: 40px; margin-bottom: 25px; font-size: .87rem; }
}

@media (min-width: 700px) {
  .main__intro-text-container { line-height: 2.2em; }
  .hero--home .main__intro-text { width: 80%; font-size: 1.8em !important; line-height: inherit !important; }
  .hero--home .hero__button { width: 180px; min-height: 45px; height: 45px; margin-bottom: 30px; border-width: 4px; font-size: 1rem; }
}

@media (min-width: 900px) {
  .site-header { height: 100px; }
  .page { padding-top: 100px; }
  .page-home main { padding-top: 100px; }
  .site-logo img, .header__logo-image { width: 250px; }
  .site-nav { gap: 20px; }
  .site-nav a { font-size: .9rem; }
  .main__intro-text-container { line-height: 3em; }
  .hero--home .main__intro-text { font-size: 2.1em !important; line-height: inherit !important; }
  .hero--home .hero__button { width: 200px; min-height: 50px; height: 50px; margin-bottom: 50px; border-width: 5px; font-size: 1.12rem; }
}

@media (min-width: 1000px) {
  .site-logo img, .header__logo-image { width: 341px; }
  .site-nav a { font-size: 1rem; }
}

@media (min-width: 1024px) {
  .main__intro-text-container { line-height: 3.7em; }
  .hero--home .hero__button { width: 240px; min-height: 60px; height: 60px; margin-bottom: 60px; font-size: 1.37rem; }
}

@media (min-width: 1100px) {
  .site-logo img, .header__logo-image { width: 390px; }
  .main__intro-text-container { line-height: 3.7em; }
  .hero--home .main__intro-text { font-size: 48px !important; line-height: 57.6px !important; }
}

@media (min-width: 1340px) {
  .site-header__inner,
  .main__intro-text-container { width: 1280px; }

  /*
   * The source text layer has no horizontal padding; the button layer keeps
   * its 20px content-box padding.  This is what puts the title on two lines
   * and aligns the button's right edge with the menu in the reference.
   */
  .hero--home .main__intro-text-container {
    box-sizing: content-box;
    width: 1280px;
    padding-inline: 0;
    transform: translateX(20px);
  }
  .hero--home .main__intro-button-container {
    box-sizing: content-box;
    /* 1240px content + 40px side padding = the header's 1280px frame. */
    width: 1240px;
  }
  .site-logo img, .header__logo-image { width: 488px; }
  .main__intro-text { width: 80%; font-size: 48px; line-height: 57.6px; }
  .hero--home .hero__button { width: 283px; min-height: 75px; height: 75px; margin-bottom: 80px; font-size: 1.7rem; }
}

/* The header follows the exact same 1280px frame as page content and footer.
   Its former inner padding shifted the visible logo and the last menu item by
   20px once the shared container reached its maximum width. */
@media (min-width: 1320px) {
  .site-header__inner {
    width: 1280px;
    max-width: 100%;
    padding-inline: 0;
  }
}

@media (max-width: 768px) {
  .site-header__inner { gap: 8px; }
  .site-header__cta { margin-left: auto; }
  .site-header__cta .button { min-height: 39px; padding: 8px 12px; font-size: .85rem; }
  .menu-toggle {
    display: block !important;
    flex: 0 0 40px;
    width: 40px;
    height: 28px;
    padding: 5px;
    background-color: #fff;
    background-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    background-position: 5px 5px, 5px 13px, 5px 21px;
    background-size: 30px 2px;
    background-repeat: no-repeat;
    border-radius: 4px;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
  }
  .menu-toggle:hover,
  .menu-toggle:focus-visible {
    box-shadow: 0 2px 6px rgb(0 0 0 / .3), 0 0 0 5px rgb(85 118 20 / .14);
    transform: scale(1.1);
  }
  /* The base button also draws pseudo-elements and exposes its screen-reader
     label. The reference has exactly three lines when the menu is closed. */
  .menu-toggle::before,
  .menu-toggle::after {
    content: none !important;
    display: none !important;
  }
  .menu-toggle .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    background: none !important;
  }
  .site-header.is-open .menu-toggle {
    background-color: #fff;
    background-image: none;
  }
  .site-header.is-open .menu-toggle::before,
  .site-header.is-open .menu-toggle::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 13px !important;
    right: 5px !important;
    width: 30px !important;
    height: 2px !important;
    background: #000 !important;
    transform-origin: center;
  }
  .site-header.is-open .menu-toggle::before { transform: rotate(45deg) !important; }
  .site-header.is-open .menu-toggle::after { transform: rotate(-45deg) !important; }
  /* The menu travels in from the left and occupies exactly the hero image
     under the fixed header, rather than leaving its lower part exposed. */
  .site-nav {
    top: 70px;
    left: -100%;
    right: auto;
    width: 100%;
    display: flex !important;
    height: auto;
    min-height: calc(100vw * 736 / 1917);
    max-height: none;
    overflow: hidden;
    font-family: "M PLUS Rounded 1c", MPlus, sans-serif;
    transition: left .3s ease;
    pointer-events: none;
  }
  .site-header.is-open .site-nav { left: 0; pointer-events: auto; }
  .site-nav a {
    color: #fff;
    font-family: "M PLUS Rounded 1c", MPlus, sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    text-decoration: none;
    text-decoration-color: currentColor;
    /* Five pixels of click/touch breathing room on every side. */
    padding: 5px;
  }
  .site-nav a::after {
    display: block;
    bottom: 0;
    height: 3px;
    background-color: currentColor;
  }
  .site-nav a:hover,
  .site-nav a:focus-visible {
    color: #fff !important;
    font-weight: 500;
    text-decoration: none;
  }
  .site-nav a:hover::after,
  .site-nav a:focus-visible::after {
    width: 100%;
  }
  .trip-grid { gap: 20px; }
  .page-home .section h2, .section--trips h1 { font-size: 35px; }
  .mini-videos { gap: 30px; }
  .benefits { justify-content: center; }
}

@media (max-width: 480px) {
  .container { width: calc(100% - 28px); }
  .site-header:not(.site-header--trip) .site-header__inner { padding-inline: 14px; }
  .site-logo img, .header__logo-image { width: 198px; }
  .main__intro-text-container, .main__intro-button-container { width: calc(100% - 20px); padding: 0 10px; }
  .hero--home .main__intro-text { font-size: 16px !important; line-height: 1.3 !important; }
  .hero--home .hero__button { width: 120px; min-height: 30px; height: 30px; margin-bottom: 15px; border-width: 3px; font-size: .7rem; }
  .page-home .section h2, .section--trips h1 { margin-bottom: 30px; font-size: 30px; }
  .section--trips, .section--why, .section--reviews, .section--how, .section--forms { padding: 30px 0; }
  .trip-card__body { padding: 18px 14px 15px; }
  .mini-videos { gap: 20px; }
  .mini-videos figure, .mini-videos img, .mini-videos video { width: 220px; }
  .mini-videos img, .mini-videos video { height: 124px; }
  .review-card { padding: 25px 20px; }
  .benefits article { width: 100%; }
  .site-footer { padding: 30px 0 80px; }
}

/* Headers on every trip-detail page follow the source's dedicated "pohod"
   variant: logo, CTA and hamburger only. Text navigation is available solely
   after opening the hamburger, even on desktop. */
.site-header--trip .site-header__cta {
  margin-left: 0;
  justify-self: center;
}

.site-header--trip .site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  position: relative;
}

.site-header--trip .site-logo { grid-column: 1; }
.site-header--trip .site-header__cta { grid-column: 2; }
.site-header--trip .menu-toggle { grid-column: 3; }

.site-header--trip .site-header__cta .button {
  width: 110px;
  min-height: 25px;
  height: 25px;
  padding: 0;
  border: 3px solid rgb(0 0 0 / .3);
  border-radius: 14px;
  color: #fff;
  font-family: "M PLUS Rounded 1c", MPlus, Arial, sans-serif;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.site-header--trip .site-header__cta .button:hover,
.site-header--trip .site-header__cta .button:focus-visible {
  background-color: var(--source-orange);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3f8a7c;
}

.site-header--trip .menu-toggle {
  display: block !important;
  flex: 0 0 40px;
  width: 40px;
  height: 28px;
  padding: 5px;
  border: 0;
  border-radius: 4px;
  background-color: #fff;
  background-image: linear-gradient(#111, #111), linear-gradient(#111, #111), linear-gradient(#111, #111);
  background-position: center 5px, center 13px, center 21px;
  background-repeat: no-repeat;
  background-size: 30px 2px;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease;
}

.site-header--trip .menu-toggle::before,
.site-header--trip .menu-toggle::after {
  content: none !important;
  display: none !important;
}

.site-header--trip .menu-toggle .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  background: none !important;
}

.site-header--trip .menu-toggle:hover,
.site-header--trip .menu-toggle:focus-visible {
  box-shadow: 0 2px 6px rgb(0 0 0 / .3), 0 0 0 5px rgb(85 118 20 / .14);
  transform: scale(1.1);
}

.site-header--trip.is-open .menu-toggle {
  background-image: none;
}

.site-header--trip.is-open .menu-toggle::before,
.site-header--trip.is-open .menu-toggle::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 13px !important;
  right: 5px !important;
  width: 30px !important;
  height: 2px !important;
  background: #000 !important;
  transform-origin: center;
}

.site-header--trip.is-open .menu-toggle::before { transform: rotate(45deg) !important; }
.site-header--trip.is-open .menu-toggle::after { transform: rotate(-45deg) !important; }

.site-header--trip .site-nav {
  position: fixed;
  top: 70px;
  left: -100%;
  right: auto;
  display: flex !important;
  width: 100%;
  min-height: calc(100vh - 70px);
  padding: 30px max(24px, calc((100% - 430px) / 2));
  overflow: auto;
  flex-direction: column;
  align-items: flex-start;
  background: rgb(85 118 20 / .9);
  color: #fff;
  pointer-events: none;
  transition: left .3s ease;
}

.site-header--trip.is-open .site-nav {
  left: 0;
  pointer-events: auto;
}

.site-header--trip .site-nav a {
  color: #fff !important;
  font-family: "M PLUS Rounded 1c", MPlus, Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
}

.site-header--trip .site-nav a:hover,
.site-header--trip .site-nav a:focus-visible {
  color: #fff !important;
  font-weight: 500;
}

.site-header--trip .site-nav a::after {
  bottom: -2px;
  background-color: currentColor;
}

@media (min-width: 480px) {
  .site-header--trip .site-header__cta .button {
    width: 130px;
    font-size: 15px;
  }
}

@media (min-width: 768px) {
  .site-header--trip .site-header__cta .button {
    width: 164px;
    min-height: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
}

@media (min-width: 890px) {
  .site-header--trip .site-nav {
    top: 100px;
    min-height: calc(100vh - 100px);
  }
}

@media (min-width: 900px) {
  .site-header--trip .site-header__cta .button {
    width: 183px;
    min-height: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
}

@media (min-width: 1100px) {
  .site-header--trip .site-header__cta .button {
    width: 201px;
    min-height: 55px;
    height: 55px;
    font-size: 1.3rem;
  }
}

@media (min-width: 1340px) {
  .site-header--trip .site-header__cta .button {
    width: 220px;
    min-height: 60px;
    height: 60px;
    font-size: 1.4rem;
  }
}

@media (max-width: 459px) {
  .site-header--trip .site-header__inner {
    padding-right: 5px;
    padding-left: 5px;
  }
}

@media (max-width: 399px) {
  .site-header--trip .menu-toggle {
    flex-basis: 20px;
    width: 20px;
    height: 14px;
    padding: 2.5px;
    background-position: center 2.5px, center 6.5px, center 10.5px;
    background-size: 15px 1px;
  }

  .site-header--trip.is-open .menu-toggle::before,
  .site-header--trip.is-open .menu-toggle::after {
    top: 6.5px !important;
    right: 2.5px !important;
    width: 15px !important;
    height: 1px !important;
  }
}

@media (max-width: 379px) {
  .site-header--trip .header__logo-image {
    width: 168px;
  }
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("./assets/fonts/IBMPlexSans-Regular400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("./assets/fonts/IBMPlexSans-SemiBold600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Date / duration / price block on trip pages. The separator takes the width
   of the longer of the two labels, never the width of its grid column. */
.trip-detail .facts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 0;
  row-gap: 30px;
  margin: 30px 0 54px;
}

.trip-detail h1 { margin-bottom: 54px; }

.trip-detail .facts article {
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  gap: 0;
}

.trip-detail .facts strong,
.trip-detail .facts span {
  display: block;
  width: max-content;
  max-width: 100%;
  font-family: "IBM Plex Sans", IBMPlex, sans-serif;
  font-size: 30px;
  font-weight: 600;
  text-align: center;
}

.trip-detail .facts strong {
  order: 0;
  padding: 0;
  border: 0;
  color: var(--source-green);
  line-height: 34px;
}

.trip-detail .facts article::after {
  order: 1;
  width: 100%;
  margin: 10px 0;
  border-top: 3px solid rgb(0 0 0 / .7);
  content: "";
}

.trip-detail .facts span {
  order: 2;
  color: #000;
  line-height: 34px;
  opacity: .7;
  text-transform: uppercase;
}

@media (min-width: 900px) and (max-width: 1200px) {
  .trip-detail .facts strong,
  .trip-detail .facts span { font-size: 25px; }
  .trip-detail .facts strong { line-height: 22px; }
  .trip-detail .facts span { line-height: 22px; }
  .trip-detail .facts article::after { margin: 10px 0; border-top-width: 2px; }
}

@media (min-width: 670px) and (max-width: 899px) {
  .trip-detail .facts strong,
  .trip-detail .facts span { font-size: 20px; }
  .trip-detail .facts strong { line-height: 18px; }
  .trip-detail .facts span { line-height: 18px; }
  .trip-detail .facts article::after { margin: 5px 0; border-top-width: 2px; }
}

@media (max-width: 669px) {
  .trip-detail .facts strong,
  .trip-detail .facts span { font-size: 18px; }
  .trip-detail .facts strong { line-height: 16px; }
  .trip-detail .facts span { line-height: 16px; }
  .trip-detail .facts article::after { margin: 5px 0; border-top-width: 1px; }
}

@media (max-width: 579px) {
  .trip-detail .facts {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    row-gap: 30px;
  }
}

@media (min-width: 900px) {
  .trip-detail .facts { flex-wrap: nowrap; }
}

@media (min-width: 580px) and (max-width: 899px) {
  .trip-detail .facts {
    justify-content: center;
    column-gap: 100px;
  }
}

/* Source accordion heading, preserved at the same size on narrow screens:
   the original stylesheet contains no smaller type breakpoint for it. */
.trip-detail .detail-accordions {
  display: grid;
  gap: 12px;
  margin: 20px 0 28px;
}

.trip-detail .detail-accordions button {
  display: flex;
  align-items: center;
  margin-top: 0;
  color: var(--source-green);
  font-family: Roboto, Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 21.85px;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-all;
}

.trip-detail .detail-accordion__panel {
  display: block;
  max-height: 0;
  margin: 0;
  padding: 0 22px;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease-in, opacity .3s ease-in, padding .3s ease-in;
}

.trip-detail .detail-accordion__panel.is-open {
  display: block;
  max-height: 1400px;
  padding: 16px 22px;
  opacity: .8;
}

.trip-detail .detail-accordions button[aria-expanded="true"]::before {
  content: "—";
  line-height: 30px;
  transform: translateY(-1px);
}

/* Trip status labels and badges use IBM Plex Sans SemiBold in the source. */
.trip-detail .status-grid article {
  gap: 0;
  line-height: 20px;
}

.trip-detail .status-grid span {
  color: #000;
  font-family: "IBM Plex Sans", IBMPlex, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  opacity: .9;
}

.trip-detail .status-grid strong {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--source-green);
  color: #fff;
  font-family: "IBM Plex Sans", IBMPlex, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 20px;
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}

@media (min-width: 900px) and (max-width: 1200px) {
  .trip-detail .status-grid span { font-size: 18px; }
  .trip-detail .status-grid strong { font-size: 20px; }
}

@media (min-width: 670px) and (max-width: 899px) {
  .trip-detail .status-grid span,
  .trip-detail .status-grid strong { font-size: 20px; }
}

@media (min-width: 580px) and (max-width: 669px) {
  .trip-detail .status-grid span,
  .trip-detail .status-grid strong { font-size: 18px; }
}

@media (max-width: 579px) {
  .trip-detail .status-grid span { font-size: 16px; }
  .trip-detail .status-grid strong { font-size: 16px; }
}

@media (max-width: 379px) {
  .trip-detail .status-grid { grid-template-columns: 1fr; }
}

/* Each status remains an indivisible content-led badge.  Rows wrap before
   badges touch or escape the content area. */
.trip-detail .status-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
}

.trip-detail .status-grid article {
  flex: 0 0 auto;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
}

/* Галерея: полоса и управляющие кнопки Colorbox из исходного образца. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.modal-card--gallery {
  display: block;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.modal-card--gallery > img {
  display: block;
  max-height: calc(100vh - 104px);
  cursor: pointer;
}

.modal-gallery-bar {
  display: flex;
  align-items: center;
  height: 28px;
  background: #fff;
}

.modal-card--gallery .modal-nav {
  position: static;
  display: flex;
  align-items: center;
  margin-left: 4px;
  gap: 5px;
  transform: translateY(4px);
}

.modal-card--gallery .modal-control {
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  background-image: url('./assets/gallery/lightbox-controls-reference.png');
  background-repeat: no-repeat;
  background-size: 102px 40px;
  cursor: pointer;
}

.modal-card--gallery .modal-control--previous { background-position: -8px -10px; }
.modal-card--gallery .modal-control--next { background-position: -40px -10px; }
.modal-card--gallery .modal-control--close { background-position: -75px -10px; }

.modal-card--gallery .modal-close {
  position: static;
  margin-right: 4px;
  margin-left: auto;
  font-size: 0;
  transform: translateY(4px);
}

.modal-card--gallery .modal-count {
  position: static;
  margin-left: 10px;
  color: #555;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 14px;
  transform: translateY(4px);
}

.modal-card--gallery .modal-control:hover { filter: brightness(.92); }

/* Адаптивная YouTube-вставка после фотогалереи. */
.video-embed {
  width: min(100%, var(--video-width, 560px));
  aspect-ratio: var(--video-width, 560) / var(--video-height, 315);
  margin: 46px auto 0;
  overflow: hidden;
  border-radius: 20px;
  background: #000;
}

.video-embed iframe,
.video-embed video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Видео похода: два ролика занимают один ряд, пока это позволяет область контента. */
.trip-videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px;
  margin-top: 46px;
}

.trip-videos .video-embed {
  flex: 0 1 var(--video-width, 560px);
  margin: 0;
}

/* Secondary headings inside the payment terms are labels, not page headings. */
.payment > h3:not(:first-child) {
  margin: 24px 0 10px;
  color: var(--source-green);
  font-family: IBMPlex, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

/* Заголовки блоков «Стоимость похода». */
.cost-grid h3,
.payment h3 {
  color: rgb(0 0 0 / .5);
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 33px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cost-grid h3 .cost-title__mark,
.cost-grid h3 .cost-title__included,
.cost-grid h3 .cost-title__excluded {
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 33px;
}

.cost-grid h3 .cost-title__mark--included,
.cost-grid h3 .cost-title__included {
  color: var(--green);
}

.cost-grid h3 .cost-title__mark--excluded,
.cost-grid h3 .cost-title__excluded {
  color: rgb(255 92 34);
}

@media (max-width: 900px) {
  .cost-grid h3,
  .payment h3,
  .cost-grid h3 .cost-title__mark,
  .cost-grid h3 .cost-title__included,
  .cost-grid h3 .cost-title__excluded {
    font-size: 24px;
    line-height: 27px;
  }
}

/* Таблица цен: параметры исходной темы. */
.prices {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  gap: 0;
  margin: 26px auto;
  color: #000;
  font-family: Roboto, sans-serif;
  font-size: 1.12em;
  font-weight: 400;
  line-height: 160%;
  opacity: .8;
}

.prices > * {
  padding: 15px;
  border: 3px solid #fff;
  border-radius: 20px;
  background: #eee;
  color: inherit;
  font: inherit;
}

@media (max-width: 960px) {
  .cost-grid {
    grid-template-columns: 1fr;
    row-gap: 38px;
  }

  .payment {
    margin-top: 38px;
  }
}

/* Встраиваемая карта: исходные габариты 994×529 и адаптация без overflow. */
.map-embed {
  position: relative;
  width: min(100%, 994px);
  aspect-ratio: 994 / 529;
  margin-inline: auto;
  overflow: hidden;
  border: 2px solid var(--green);
  border-radius: 25px;
}

.map-embed iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-embed__source {
  position: absolute;
  top: 0;
  left: 0;
  color: #eee;
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.map-embed__source + .map-embed__source {
  top: 14px;
}

/* Общий футер: новая композиция при сохранении исходной палитры. */
.site-footer {
  padding: 40px 0;
  background: var(--source-footer);
  color: #d6dfbe;
}

.site-footer__layout {
  min-width: 0;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 44px;
}

.site-footer__contacts {
  display: grid;
  gap: 18px;
}

.site-footer__contact-link,
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  color: inherit;
  font-family: Roboto, Arial, sans-serif;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.site-footer__contact-link {
  font-size: 24px;
  text-decoration: none;
}

.site-footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.site-footer__social-link {
  flex-direction: row-reverse;
  font-size: 18px;
  text-decoration: none;
}

.site-footer__social-link > span {
  position: relative;
}

.site-footer__social-link > span::after {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  content: "";
  background-color: currentColor;
  transition: width .3s;
}

.site-footer__social-link:hover > span::after,
.site-footer__social-link:focus-visible > span::after {
  width: 100%;
}

.site-footer__social .site-footer__icon {
  width: 26px;
  height: 26px;
}

.site-footer__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.site-footer__divider {
  height: 1px;
  margin: 32px 0 26px;
  background: currentColor;
  opacity: .8;
}

.site-footer__legal {
  max-width: 1280px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.site-footer__legal p {
  margin: 0 0 12px;
}

.site-footer__legal p:last-child {
  margin-bottom: 0;
}

.site-footer__contact-link:hover,
.site-footer__contact-link:focus-visible,
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  color: #fff;
}

@media (max-width: 500px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .site-footer__social {
    align-items: flex-start;
  }

}

@media (max-width: 600px) {
  .site-footer {
    padding: 30px 0 80px;
  }

  .site-footer__social-link {
    flex-direction: row;
  }
}

@media (min-width: 501px) and (max-width: 600px) {
  .site-footer__top {
    gap: 10px;
  }
}

/* FAQ reproduces the original Drupal page's typography and accordion rhythm. */
.page--faq .section--faq {
  padding: 72px 0 50px;
}

.page--faq h1,
.page--list h1 {
  margin: 0 0 34px;
  color: var(--source-orange);
  font-family: "M PLUS Rounded 1c", MPlus, sans-serif;
  font-size: 43px;
  font-weight: 800;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page--faq .faq {
  display: block;
}

.page--faq .faq h2 {
  margin: 40px 0 0;
  color: rgb(0 0 0 / .5);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page--faq .faq__section:first-child h2 {
  margin-top: 0;
}

.page--faq .faq__group {
  display: grid;
  gap: 0;
}

.page--faq .faq__item {
  display: block;
  margin-top: 20px;
}

.page--faq .faq__button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--source-green);
  cursor: pointer;
  font-family: Roboto, Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 40px;
  text-align: left;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.page--faq .faq__button::before {
  display: inline-flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 10px 0 0;
  border-radius: 50%;
  background: var(--source-green);
  color: #fff;
  content: "+";
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}

.page--faq .faq__button[aria-expanded="true"]::before {
  content: "—";
}

.page--faq .faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  padding: 0 30px;
  overflow: hidden;
  border-radius: 20px;
  background: #eee;
  color: #000;
  opacity: 0;
  transition: grid-template-rows .3s ease-out, margin .3s ease-out, padding .3s ease-out, opacity .3s ease-out;
}

.page--faq .faq__answer-inner {
  min-height: 0;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.page--faq .faq__answer-inner p,
.page--faq .faq__answer-inner ul,
.page--faq .faq__answer-inner ol {
  margin: 0 0 1em;
}

.page--faq .faq__answer-inner > :last-child {
  margin-bottom: 0;
}

.page--faq .faq__answer-inner ul,
.page--faq .faq__answer-inner ol {
  padding-left: 1.3em;
}

.page--faq .faq__answer-inner a {
  color: var(--source-orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.page--faq .faq__answer.is-open {
  grid-template-rows: 1fr;
  margin: 15px 0;
  padding: 15px 30px;
  opacity: .8;
  transition-timing-function: ease-in;
}

@media (max-width: 900px) {
  .page--faq .section--faq {
    padding-top: 25px;
  }

  .page--list .section--list {
    padding-top: 25px;
  }

  .page--faq .faq h2 {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .page--faq h1,
  .page--list h1 {
    font-size: 36px;
  }

  .page--faq .faq__answer {
    padding-inline: 20px;
  }

  .page--faq .faq__answer.is-open {
    padding: 15px 20px;
  }

  .review-grid {
    width: 100%;
    max-width: 340px;
    margin: 50px auto 0;
  }

  .review-card {
    margin-inline: auto;
  }
}

.page--list .section--list {
  padding: 72px 0 50px;
}

.page-list__content {
  color: #000;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.page-list__content ol,
.page-list__content h2 {
  opacity: .8;
}

.page-list__content ol {
  margin: 0;
  padding-left: 0;
  list-style-position: inside;
}

.page-list__content li {
  padding-left: 0;
}

.page-list__content h2 {
  margin: 20px 0 0;
  color: inherit;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
}

@media (max-width: 900px) {
  .page--list .section--list {
    padding-top: 25px;
  }
}

@media (max-width: 500px) {
  .review-grid {
    width: 100%;
    max-width: 340px;
    margin: 50px auto 0;
  }

  .review-card {
    margin-inline: auto;
  }
}

.trip-detail .detail-accordion__panel p:first-child { margin-top: 0; }
.trip-detail .detail-accordion__panel p:last-child { margin-bottom: 0; }

.trip-detail .detail-accordion__panel.is-open { max-height: 5000px; }
.trip-detail .detail-accordion__panel > p > strong { color: var(--green); font-weight: 600; }
.trip-detail .detail-accordion__panel h3 + ul + p > strong { color: var(--orange); }
.trip-detail .detail-accordion__panel .content-underline { text-decoration: underline; }

/*
 * Main page headings other than the calibrated hero title.  A heading starts
 * 1.8 of its own font size after the previous content fragment and leaves
 * 1.3 font sizes before the following fragment.
 * The layout therefore changes proportionally with typography at breakpoints,
 * rather than combining incidental section padding with heading margins.
 */
:root {
  --content-heading-size: 48px;
  --content-heading-line-height: 58px;
  --content-heading-before: calc(var(--content-heading-size) * 1.8);
  --content-heading-after: calc(var(--content-heading-size) * 1.3);
}

h1:not(.main__intro-text),
.page-home .section h2 {
  font-size: var(--content-heading-size) !important;
  line-height: var(--content-heading-line-height) !important;
  margin-bottom: var(--content-heading-after) !important;
}

/* First headings on ordinary pages: count from the lower edge of the fixed header. */
main.page > .section:first-child {
  padding-top: 0 !important;
}

main.page > .section:first-child h1:not(.main__intro-text) {
  margin-top: var(--content-heading-before) !important;
}

/* The home-page hero title is deliberately excluded. */
.page-home main > .section:not(.hero):not(.section--forms) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.page-home .section h2 {
  margin-top: var(--content-heading-before) !important;
}

/* On trip pages, title and every following h2 use the same content-to-title gap. */
.trip-detail,
.trip-detail ~ .section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.trip-detail h1 {
  margin-top: var(--content-heading-before) !important;
}

.trip-detail ~ .section h2 {
  margin-top: var(--content-heading-before);
  margin-bottom: var(--content-heading-after);
}

@media (max-width: 1023px) {
  :root {
    --content-heading-size: 43px;
    --content-heading-line-height: 52px;
  }
}

@media (max-width: 768px) {
  :root {
    --content-heading-size: 38px;
    --content-heading-line-height: 46px;
  }

  main.page {
    padding-top: 70px;
  }
}

@media (max-width: 600px) {
  :root {
    --content-heading-size: 34px;
    --content-heading-line-height: 41px;
  }
}

@media (max-width: 450px) {
  :root {
    --content-heading-size: 30px;
    --content-heading-line-height: 36px;
  }

}

/* The final content fragment has one shared breathing space before the footer. */
main > .section:last-child {
  padding-bottom: 60px !important;
}

/* Narrow FAQ: wrapped questions keep a natural rhythm and the control stays
   with the first text line instead of centring against the whole question. */
@media (max-width: 768px) {
  .page--faq .faq__button {
    align-items: flex-start;
    line-height: 1.25;
  }

  .page--faq .faq__button::before {
    margin-top: 0;
  }
}
/* Неполный последний ряд фотогалереи остаётся по центру. */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery > button {
  flex: 0 0 calc((100% - 40px) / 3);
}

@media (max-width: 1000px) {
  .gallery > button {
    flex-basis: calc((100% - 20px) / 2);
  }
}

@media (max-width: 500px) {
  .gallery > button {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   Layout fixes (2026-11): hero scrim, trip grid, trip header, burger and
   mobile contact control. Kept at the end so it overrides earlier layers.
   ========================================================================== */

/* --- Home first screen: the photo and the text share one grid cell. The
   text block stays in normal flow, so the button always sits below the
   heading and the banner grows if the text needs more room. --- */
.hero--home.main__intro {
  display: grid !important;
  grid-template: minmax(0, auto) / minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
}

.hero--home .main__intro-image {
  position: relative;
  grid-area: 1 / 1;
  overflow: hidden;
}

.hero--home .main__intro-image picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero--home .main__intro-image img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.hero--home .main__intro-image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .45) 40%, rgb(0 0 0 / .15) 75%, rgb(0 0 0 / 0) 100%);
  content: "";
  pointer-events: none;
}

.hero--home .main__intro-text-container {
  position: relative !important;
  top: auto !important;
  z-index: 1;
  grid-area: 1 / 1;
  align-self: center;
  box-sizing: border-box !important;
  display: flex;
  width: 100% !important;
  height: auto !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  padding: 24px max(20px, calc((100% - 1280px) / 2)) !important;
  transform: none !important;
}

.hero--home .hero__button {
  position: static !important;
  flex: none;
  margin: 0 !important;
}

@media (max-width: 699px) {
  .hero--home .main__intro-image::after {
    background: linear-gradient(90deg, rgb(0 0 0 / .62), rgb(0 0 0 / .4));
  }
  .hero--home .main__intro-text-container { gap: 12px; padding: 20px 16px !important; }
  .hero--home .hero__button {
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 20px !important;
    font-size: .9rem !important;
  }
}

@media (max-width: 480px) {
  .hero--home .main__intro-text { width: 100%; font-size: 18px !important; }
}

/* --- Trip cards: 4 in a row on wide screens, 2x2 on laptops/tablets,
   one column on phones. --- */
.trip-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: none;
  margin-inline: 0;
}

.trip-grid .trip-card {
  width: auto;
  display: flex;
  flex-direction: column;
}

.trip-grid .trip-card__body { padding: 20px 18px 28px; }
.trip-grid .trip-card h3 { font-weight: 700; }
.trip-grid .trip-card__dates { font-size: 17px; }

.trip-grid .trip-card__type {
  margin: 0 0 16px;
  color: #4a5866;
  font-size: 15px;
  line-height: 1.35;
}

.trip-grid .trip-card__text {
  color: #2b3a48;
  font-size: 15px;
  line-height: 1.45;
}

@media (max-width: 1199px) {
  .trip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 880px;
    margin-inline: auto;
  }
  .trip-grid .trip-card__dates { font-size: 19px; }
}

@media (max-width: 599px) {
  .trip-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
    gap: 22px;
  }
}

/* --- Burger: 44x44 tap target on every header variant. --- */
.site-header .menu-toggle {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  background-position: center 14px, center 21px, center 28px;
  background-size: 30px 2px;
}

.site-header.is-open .menu-toggle::before,
.site-header.is-open .menu-toggle::after {
  top: 21px !important;
  right: 7px !important;
  width: 30px !important;
  height: 2px !important;
}

@media (max-width: 768px) {
  .site-nav a { padding: 9px 5px; }
  .site-header--trip .site-header__cta .button {
    width: auto;
    height: 44px;
    min-height: 44px;
    padding: 0 16px;
    font-size: 15px;
  }
}

@media (max-width: 459px) {
  .site-header--trip .site-header__inner { gap: 6px; padding-inline: 8px; }
  .site-header--trip .site-header__cta .button { padding: 0 10px; font-size: 13px; }
}

@media (max-width: 379px) {
  .site-header--trip .header__logo-image { width: 160px; }
  .site-header--trip .site-header__cta .button { padding: 0 8px; font-size: 12px; }
}

/* --- Trip-page header: flex row at every width (logo, CTA, burger on
   narrow screens; logo, full navigation, CTA on desktop). --- */
.site-header--trip .site-header__inner {
  display: flex;
  align-items: center;
}
.site-header--trip .site-logo { flex: 0 1 auto; min-width: 0; }
.site-header--trip .site-logo img { max-width: 100%; }
.site-header--trip .site-header__cta { flex: none; margin-left: auto; }
.site-header--trip .menu-toggle { flex: none; }

/* Full navigation next to the CTA on desktop, burger only below 1024px. */
@media (min-width: 1024px) {
  .site-header--trip .site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .site-header--trip .site-logo { order: 1; }
  .site-header--trip .site-nav {
    position: static;
    order: 2;
    display: flex !important;
    width: auto;
    min-height: 0;
    margin-left: auto;
    padding: 0;
    overflow: visible;
    flex-direction: row;
    align-items: center;
    gap: 20px !important;
    background: none;
    color: #000;
    pointer-events: auto;
    transition: none;
  }
  .site-header--trip .site-header__cta { order: 3; margin-left: 0; }
  .site-header--trip .menu-toggle { display: none !important; }
  .site-header--trip .site-nav a {
    color: #000 !important;
    font-family: Montserrat, sans-serif;
    font-size: .9rem;
    font-weight: 400;
    line-height: inherit;
  }
  .site-header--trip .site-nav a:hover,
  .site-header--trip .site-nav a:focus-visible {
    color: var(--source-orange) !important;
    font-weight: 400;
  }
  .site-header--trip .site-nav a::after {
    bottom: -8px;
    background-color: var(--source-orange);
  }
  .site-header--trip .site-logo img { width: 250px !important; }
  .site-header--trip .site-nav a { font-size: .85rem; }
  .site-header--trip .site-header__cta .button { width: auto; padding: 0 22px; }
}

@media (min-width: 1340px) {
  .site-header--trip .site-logo img { width: 390px !important; }
  .site-header--trip .site-nav a { font-size: 1rem; }
}

/* --- Floating contacts: side panels on desktop, one compact "Связаться"
   control on phones and tablets. --- */
.contact-fab { display: none; }

@media (max-width: 768px) {
  .floating-social,
  .floating-contact { display: none !important; }

  .contact-fab {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 60;
    display: block;
    transition: transform .25s ease, opacity .25s ease;
  }
  /* Steps aside while the visitor scrolls down through content. */
  .contact-fab.is-tucked:not([open]) { opacity: 0; pointer-events: none; transform: translateY(90px); }
  .contact-fab__toggle {
    display: flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--source-green);
    box-shadow: 0 4px 14px rgb(0 0 0 / .3);
    color: #fff;
    list-style: none;
    cursor: pointer;
    user-select: none;
  }
  .contact-fab__toggle::-webkit-details-marker { display: none; }
  .contact-fab__toggle::marker { content: ""; }
  .contact-fab__toggle:focus-visible { outline: 3px solid #2d8b8a; outline-offset: 3px; }
  .contact-fab[open] .contact-fab__toggle { background: #3f5a0c; }
  .contact-fab__toggle-icon {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
  }
  .contact-fab__sheet {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    display: grid;
    width: max-content;
    min-width: 240px;
    max-width: calc(100vw - 32px);
    gap: 2px;
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 28px rgb(0 0 0 / .28);
  }
  .contact-fab__link {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-radius: 10px;
    color: #222;
    font-size: 1rem;
    text-decoration: none;
  }
  .contact-fab__link:hover,
  .contact-fab__link:focus-visible { background: #f1f5e6; }
  .contact-fab__icon { width: 32px; height: 32px; flex: none; }

  /* Keep the last footer lines clear of the fixed control. */
  .site-footer { padding-bottom: 88px; }
}