/* Flow markup for the former coordinate canvases. Sizes, type and colours are
   the measured values of the live site; placement is ordinary flex flow. */
.flow, .flow *, .flow *::before, .flow *::after { box-sizing: border-box; }
/* Zero specificity, so each block below sets its own spacing with one class.
   Lists are reset against `.site-records ul`; a list's own spacing therefore
   uses two classes. The site sheet also indents every list by id
   (`#allrecords ul`), so a list states its indent in --flow-list-indent. */
:where(.flow) :where(p, h1, h2, h3) { margin: 0; padding: 0; }
.flow ul { margin: 0; padding: 0; list-style: none; }
#allrecords .flow ul { padding-left: var(--flow-list-indent, 0); }
#allrecords .flow a { color: inherit; text-decoration: none; }
/* Controls use two classes: the site sheet resets `button[data-open-dialog]`. */

/* Sloped divider: a 960 x 100 drawing on wide screens, 320 x 30 below. The
   artwork is wider than the page: only its horizontal paint is bounded, the
   vertical overlap stays. `clip` does not create a scroll container. */
.flow-divider { position: relative; overflow-x: clip; overflow-y: visible; background-color: var(--flow-divider-base); }
.flow-divider::before { content: ''; display: block; padding-top: 9.375%; }
.flow-divider--snow { --flow-divider-base: #f2f2f2; --flow-divider-fill: #fff; }
.flow-divider--mist { --flow-divider-base: #fff; --flow-divider-fill: #f2f2f2; }
.flow-divider--night { --flow-divider-base: #333; --flow-divider-fill: #fff; }
.flow-divider__slope { position: absolute; left: -137.5%; top: 26.667%; width: 375%; height: 106.667%; background-color: var(--flow-divider-fill); transform: rotate(4deg); }
.flow-divider__track, .flow-divider__motion { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.flow-divider__rider { position: absolute; left: -128.75%; top: -93.333%; width: 11.25%; height: 120%; }
@media (min-width: 960px) {
  .flow-divider::before { padding-top: 10.4167%; }
  .flow-divider__slope { left: -12.5%; top: -40%; width: 125%; height: 80%; }
  .flow-divider__rider { left: -9.5833%; top: -47%; width: 6.25%; height: 60%; }
}

/* Section title */
.flow-title__text { min-height: 69px; padding: 0 20px; color: #222; font: 600 28px/1.3 var(--t-headline-font, Arial); text-align: center; }
@media (min-width: 480px) { .flow-title__text { min-height: 50px; } }
@media (min-width: 640px) { .flow-title__text { font-size: 36px; } }
/* The offers title is the heavier of the two and keeps its own box heights. */
.flow-title--offers .flow-title__text { min-height: 78px; font-weight: 700; }
@media (min-width: 480px) { .flow-title--offers .flow-title__text { min-height: 40px; font-size: 24px; } }
@media (min-width: 640px) { .flow-title--offers .flow-title__text { min-height: 60px; font-size: 36px; } }

/* Card lists: a wrapping centred row, or a swipe strip where a row cannot fit. */
.flow .flow-cards__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 60px; max-width: 1200px; margin: 0 auto; padding: 15px 12px 25px; --flow-list-indent: 12px; }
.flow-cards--packages .flow-cards__list { padding-top: 10px; padding-bottom: 30px; }
@media (max-width: 1199px) {
  .flow .flow-cards__list { gap: 20px; }
  .flow-cards--prices .flow-cards__list { row-gap: 60px; padding-bottom: 65px; }
  .flow-cards--offers .flow-cards__list { padding-top: 10px; padding-bottom: 30px; }
}
@media (max-width: 999px) {
  .flow-cards--prices .flow-cards__list { row-gap: 20px; padding-bottom: 35px; }
  .flow-cards--packages .flow-cards__list { flex-wrap: nowrap; justify-content: flex-start; gap: 19px; max-width: none; padding-right: 15px; --flow-list-indent: 15px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 15px; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 659px) {
  .flow-cards--prices .flow-cards__list, .flow-cards--offers .flow-cards__list { flex-wrap: nowrap; justify-content: flex-start; gap: 19px; max-width: none; padding-right: 15px; --flow-list-indent: 15px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 15px; -webkit-overflow-scrolling: touch; }
  .flow-cards--prices .flow-cards__list { padding-top: 20px; padding-bottom: 40px; }
}
@media (max-width: 479px) {
  .flow-cards--prices .flow-cards__list { padding-top: 10px; padding-bottom: 30px; }
  .flow-cards--packages .flow-cards__list { padding-bottom: 20px; }
}

.flow-card { position: relative; z-index: 0; display: flex; flex: 0 0 320px; flex-direction: column; width: 320px; min-height: 320px; padding: 20px 21px 22px; border-radius: 20px; background-color: #fff; box-shadow: 1px 0 2px 3px rgba(144, 144, 144, 0.04); color: #616161; font-family: var(--t-text-font, Arial); text-align: left; scroll-snap-align: start; }
.flow-card__art { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; border: 1px solid transparent; border-radius: 20px; background: #fff center / cover no-repeat; box-shadow: 2px 0 4px 5px rgba(144, 144, 144, 0.07); }
.flow-card--accent .flow-card__art { border: 2px solid #1f5bff; }
.flow-card__flame { position: absolute; top: 0; left: 10px; z-index: -1; width: 320px; height: 324px; pointer-events: none; }
.flow-card__icon { position: absolute; pointer-events: none; }
.flow-card__title { color: #222; font: 700 24px/1.05 var(--t-headline-font, Arial); }
/* As in the source, the last text line may share 4px of leading with the price. */
.flow-card__text { margin: 14px 0 -4px; font-size: 18px; line-height: 1.02; }
.flow-card__foot { display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; }
.flow-card__note { font-weight: 700; font-size: 18px; line-height: 1.02; }
.flow-card__price { color: #1f5bff; font-weight: 700; font-size: 20px; line-height: 31px; }
.flow-card__season { display: flex; align-items: center; margin-top: 9px; font-size: 18px; line-height: 1.12; }
.flow-card__season strong { font-weight: 700; }
.flow-card__chip { display: flex; align-items: center; justify-content: center; height: 34px; margin-top: 7px; padding: 0 12px; border-radius: 8px; background-color: #efefef; font-weight: 700; font-size: 20px; line-height: 31px; white-space: nowrap; }
.flow-card__chip--wide { min-width: 200px; margin-top: 9px; padding: 0 9px; }
/* Package cards: the description and its bold ending stay together. A short
   title leaves spare height; as in the source, three fifths of it go above. */
.flow-cards--packages .flow-card__title { flex: 3 0 auto; }
.flow-card__lead { flex: 2 0 auto; }
.flow-card__lead .flow-card__text { margin: 13px 0 0; }
.flow-card__lead .flow-card__note { margin-top: 2px; }
.flow-card__lead + .flow-card__foot { margin-top: 0; }
.flow-card__total { color: #1f5bff; font-weight: 900; font-size: 24px; line-height: 37.2px; }
.flow-card__chip + .flow-card__total { margin-top: 4px; }
.flow-card__actions { display: flex; align-self: stretch; gap: 20px; margin: 21px 0 0 -1px; }
.flow-card__total + .flow-card__actions { margin-top: 14px; }

.flow-card--hot { text-align: center; }
.flow-card--hot .flow-card__title { margin-top: 10px; }
.flow-card--hot .flow-card__note { max-width: 182px; margin: 20px auto 0; }
.flow-card--hot .flow-card__total { align-self: center; font-size: 36px; line-height: 39.6px; }
.flow-card--hot .flow-card__total + .flow-card__actions { margin-top: 64px; text-align: left; }
.flow-card--evening .flow-card__title { max-width: 212px; margin: 0 auto; line-height: 1.15; text-align: center; }
.flow-card--evening .flow-card__text { width: 280px; margin: 7px -2px 0 0; }
.flow-card--evening .flow-card__total { align-self: center; }

/* Source hover: the artwork layer fades out on wide pointer screens only. */
@media (min-width: 1200px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .flow-card__art { transition: opacity 0.2s linear; }
  .flow-card--slow .flow-card__art { transition-duration: 0.3s; }
  .flow-card:hover .flow-card__art { opacity: 0; }
}

.flow .flow-button { position: relative; z-index: 0; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 10px; width: 130px; height: 40px; padding: 0; border: 0; border-radius: 30px; overflow: hidden; color: #fff; font: 600 14px/1.55 var(--t-text-font, Arial); text-transform: uppercase; cursor: pointer; -webkit-appearance: none; appearance: none; }
#allrecords .flow a.flow-button { color: #fff; }
.flow .flow-button--signup { background-image: linear-gradient(0.126turn, #4f4cff 0%, #7574ff 53%, #9796ff 100%); }
.flow .flow-button--signup::after { content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: #5553ff; opacity: 0; transition: opacity 0.2s ease-in-out; }
/* #0477cb: white 14px text reaches 4.66:1 (WCAG AA); was #058ff3 at 3.37:1. Owner-approved 2026-10-11. */
.flow .flow-button--telegram { background-color: #0477cb; transition: background-color 0.2s ease-in-out; }
.flow-button__icon { flex: 0 0 20px; width: 20px; height: 20px; background: center / contain no-repeat; }
@media (hover: hover) {
  .flow .flow-button--signup:hover::after { opacity: 1; }
  .flow .flow-button--telegram:hover { background-color: #0568b3; }
}

/* Season dates: a real button; the note opens on hover, focus and tap. */
.flow-tip { position: relative; display: inline-flex; margin-left: 4px; }
.flow .flow-tip__button { position: relative; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 1px solid #1f5bff; border-radius: 50%; background: none; color: #1f5bff; cursor: pointer; -webkit-appearance: none; appearance: none; }
.flow-tip__button::after { content: ''; position: absolute; top: -8px; right: -8px; bottom: -8px; left: -8px; }
.flow-tip__button svg { display: block; }
.flow-tip__bubble { position: absolute; bottom: calc(100% + 15px); left: 50%; z-index: 5; width: 280px; padding: 15px; border-radius: 10px; background-color: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); color: #000; font: 400 14px/1.4 var(--t-text-font, Arial); text-align: left; white-space: normal; transform: translateX(-50%); visibility: hidden; opacity: 0; pointer-events: none; }
.flow-tip:hover .flow-tip__bubble, .flow-tip:focus-within .flow-tip__bubble, .flow-tip[data-open] .flow-tip__bubble { visibility: visible; opacity: 1; }
.flow-tip[data-dismissed] .flow-tip__bubble { visibility: hidden; opacity: 0; }

/* First screen of the rental pages */
.flow-hero__stage { position: relative; z-index: 0; display: flex; flex-direction: column; min-height: 680px; min-height: max(100vh, 680px); background: #fff center / cover no-repeat; color: #fff; text-align: center; }
.flow-hero__stage::before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0)); }
.flow-hero__body { display: flex; flex-direction: column; align-items: center; padding: 110px 20px 40px; }
.flow-hero__title { width: 100%; max-width: 270px; min-height: 210px; color: #fff; font: 400 34px/1.3 'Roboto', Arial, sans-serif; }
.flow-hero__lead { width: 100%; max-width: 250px; min-height: 115px; font: 400 23px/1.55 'Roboto', Arial, sans-serif; }
.flow-hero__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.flow .flow-hero__button { display: flex; align-items: center; justify-content: center; width: 250px; height: 55px; padding: 0; border: 0; border-radius: 30px; background-color: #00911f; color: #fff; font: 600 23px/1.55 Arial, sans-serif; cursor: pointer; -webkit-appearance: none; appearance: none; }
#allrecords .flow a.flow-hero__button { color: #fff; }
.flow .flow-hero__button--call { font-size: 22px; }
/* On narrow screens the messenger comes first, as on the live page. */
.flow .flow-hero__button--chat { order: -1; }
@media (min-width: 480px) {
  .flow-hero__stage::before { background-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--flow-hero-shade, 0.6)), rgba(255, 255, 255, 0.1)); }
  .flow-hero__body { padding-top: 50px; }
  .flow-hero__title { max-width: 460px; min-height: 285px; font-size: 48px; line-height: 1.4; }
  .flow-hero__lead { max-width: 340px; min-height: 110px; font-size: 31px; }
  .flow-hero__actions { gap: 15px; }
  .flow .flow-hero__button { width: 310px; height: 45px; }
}
@media (min-width: 640px) {
  .flow-hero__stage { min-height: 840px; min-height: max(100vh, 840px); }
  .flow-hero__body { padding-top: 140px; }
  .flow-hero__title { max-width: 550px; min-height: 270px; }
  .flow-hero__lead { max-width: 570px; min-height: 85px; }
  .flow-hero__actions { gap: 10px; }
}
@media (min-width: 960px) {
  .flow-hero__stage { min-height: 550px; min-height: max(100vh, 550px); }
  .flow-hero__body { padding-top: 105px; }
  .flow-hero__title { max-width: 940px; min-height: 220px; font-size: 69px; }
  .flow-hero__lead { max-width: 850px; min-height: 130px; font-size: 44px; }
  .flow-hero__actions { flex-direction: row; gap: 20px; }
  .flow .flow-hero__button { width: 260px; height: 75px; }
  .flow .flow-hero__button--call { width: 280px; }
  .flow .flow-hero__button--chat { order: 0; }
}
@media (min-width: 1200px) {
  .flow-hero__stage { justify-content: center; }
  .flow-hero__body { min-height: 550px; padding-top: 75px; padding-bottom: 10px; }
  .flow-hero__title { max-width: 1120px; min-height: 235px; }
  .flow-hero__lead { min-height: 145px; }
  .flow .flow-hero__button { width: 270px; }
  .flow .flow-hero__button--chat { height: 85px; }
  .flow .flow-hero__button--call { width: 300px; height: 85px; }
}

/* Footer directory: six columns; a strip that scrolls where they cannot fit. */
.flow-footer-menu { position: relative; z-index: 0; display: block; padding: 40px 0 90px; overflow: hidden; color: #616161; }
/* Phones see the left part of the panorama: a 1270px picture on a 320px artboard. */
.flow-footer-menu__art { position: absolute; top: 0; left: -66px; z-index: -1; width: 396.875%; height: 100%; background: center / cover no-repeat; }
.flow-footer-menu__art::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 61%); }
.flow-footer-menu__scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.flow-footer-menu__inner { width: max-content; margin: 0 auto; padding: 0 20px; }
.flow-footer-menu__columns { display: flex; gap: 65px; }
.flow-footer-menu__column { flex: 0 0 141px; }
.flow-footer-menu__column:last-child { flex-basis: auto; }
.flow-footer-menu__title { display: flex; align-items: center; min-height: 48px; font: 400 20px/1.2 var(--t-headline-font, Arial); }
.flow .flow-footer-menu__links { margin-top: 12px; }
.flow-footer-menu__links li + li { margin-top: 8.2px; }
.flow-footer-menu__links li { font: 400 14px/1.2 var(--t-headline-font, Arial); }
#allrecords .flow-footer-menu .flow-footer-menu__links a { display: inline-block; text-decoration: underline; }
.flow-footer-menu__legal { margin: 57px 0 0 1px; font: 400 20px/1.55 var(--t-text-font, Arial); white-space: nowrap; }
#allrecords .flow-footer-menu .flow-footer-menu__legal a { text-decoration: underline; }
@media (min-width: 480px) {
  .flow-footer-menu { padding: 80px 0 50px; }
  .flow-footer-menu__art { left: 0; width: 100%; }
}
@media (min-width: 1200px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .flow-footer-menu__links a { transition: transform 0.2s linear; }
  .flow-footer-menu__links a:hover, .flow-footer-menu__links a:focus-visible { transform: scale(1.1); }
}

/* Gift certificate offer; promotion.mjs reveals the fixed record. */
.flow-promotion__card { position: absolute; top: 390px; top: min(390px, calc(100vh - 280px)); right: 20px; z-index: 0; width: 260px; height: 260px; border-radius: 20px; overflow: hidden; background: #fff705 center / cover no-repeat; color: #fff; text-align: center; }
.flow-promotion__card::before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-image: linear-gradient(0deg, rgba(71, 71, 71, 0) 24%, #d38110 100%); }
.flow-promotion__text { padding: 6px 29px 0; font: 600 20px/27px var(--t-headline-font, Arial); }
.flow .flow-promotion__buy { position: absolute; top: 203px; left: 40px; width: 180px; box-shadow: 4px 4px 4px rgba(97, 97, 97, 0.05); }
.flow-promotion__close { position: absolute; top: 2px; right: 2px; width: 41px; height: 40px; }
.flow .flow-promotion__close button { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 30px; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.flow-promotion__close button::before { content: ''; width: 20px; height: 20px; background-color: #fff; -webkit-mask: url('/reference-assets/tilda/lib/icons/button/circlecross_semibold.svg') center / contain no-repeat; mask: url('/reference-assets/tilda/lib/icons/button/circlecross_semibold.svg') center / contain no-repeat; }
@media (min-width: 480px) {
  .flow-promotion__card { top: 421px; top: min(421px, calc(100vh - 280px)); right: 81px; }
  .flow-promotion__text { padding-top: 36px; }
  .flow-promotion__close { top: 1px; }
}
/* On a short window the cookie notice (77px, 30px from the bottom) would
   cover the purchase button; until it is answered the card stays above it. */
body:has(.block-886:not([hidden])) .flow-promotion__card { top: min(390px, calc(100vh - 377px)); }
@media (min-width: 480px) {
  body:has(.block-886:not([hidden])) .flow-promotion__card { top: min(421px, calc(100vh - 377px)); }
}

/* Short text blocks of the two freeride pages. Each keeps the type, column
   width, offsets and height of its five artboards; the columns are centred. */
.flow-prose { color: #000; }
.flow-prose__title { max-width: 560px; margin: 0 auto; color: #000; font: 700 20px/1.55 'Roboto', Arial, sans-serif; text-align: center; }
.flow-prose__text { margin: 0 auto; }

.flow-prose--note { min-height: 372px; padding: 25px 10px 11px; }
.flow-prose--note .flow-prose__title { max-width: 300px; }
.flow-prose--note .flow-prose__text { max-width: 300px; margin-top: 18px; font: 400 16px/1.45 Arial, sans-serif; }
@media (min-width: 480px) {
  .flow-prose--note { min-height: 286px; padding: 35px 20px 15px; }
  .flow-prose--note .flow-prose__title { max-width: 560px; }
  .flow-prose--note .flow-prose__text { max-width: 460px; margin-top: 19px; }
}
@media (min-width: 640px) {
  .flow-prose--note { min-height: 276px; padding: 25px 20px 16px; }
  .flow-prose--note .flow-prose__text { max-width: 590px; margin-top: 8px; font-size: 18px; line-height: 1.55; }
}
@media (min-width: 960px) {
  .flow-prose--note { min-height: 289px; padding: 45px 20px 21px; }
  .flow-prose--note .flow-prose__text { max-width: 620px; margin-top: 24px; }
}
@media (min-width: 1200px) {
  .flow-prose--note { min-height: 294px; padding: 36px 20px 23px; }
  .flow-prose--note .flow-prose__text { max-width: 760px; margin-top: 18px; font-size: 20px; }
}

.flow-prose--lead { min-height: 430px; padding: 20px 5px 25px; }
.flow-prose--lead .flow-prose__title { max-width: 310px; font-size: 30px; }
.flow-prose--lead .flow-prose__text { max-width: 250px; margin-top: 13px; font: 400 20px/1.55 'Roboto', Arial, sans-serif; }
@media (min-width: 480px) {
  .flow-prose--lead { min-height: 290px; padding: 35px 20px 29px; }
  .flow-prose--lead .flow-prose__title { max-width: 560px; }
  .flow-prose--lead .flow-prose__text { max-width: 420px; margin-top: 24px; }
}
@media (min-width: 640px) {
  .flow-prose--lead { min-height: 210px; padding: 20px 20px 10px; }
  .flow-prose--lead .flow-prose__text { max-width: 550px; margin-top: 9px; }
}
@media (min-width: 960px) {
  .flow-prose--lead { padding: 25px 20px 16px; }
  .flow-prose--lead .flow-prose__text { max-width: 820px; margin-top: 29px; }
}
@media (min-width: 1200px) {
  .flow-prose--lead { padding: 20px 20px 51px; }
  .flow-prose--lead .flow-prose__text { max-width: 980px; }
}