/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 730px;
  padding: 88px 28px;
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--white);
  background: var(--soft-black);
}
/* The photo is two cut-outs: the room (hero-bg) and Maria (hero-fg), cropped tighter than the
   full shot (hero.webp). Geometry is computed from the full shot's box, so Maria stays where she
   was; the full shot sits under the room and fills whatever the crop leaves uncovered
   (a strip on the left on desktop, top and right edges on tablet), the room's edges fading into it.
   --w0: full-shot width, --px/--py: its background-position. Crop measured against hero.webp:
   width 84.17%, offset 11.25% / 13.55% (of its height = 12.00% of its width). */
.hero__media {
  --w0: 111cqw;
  --px: 0;
  --py: 0.55;
  --h0: calc(var(--w0) * 0.88583);
  --x0: calc((100cqw - var(--w0)) * var(--px));
  --y0: calc((100cqh - var(--h0)) * var(--py));
  --w1: calc(var(--w0) * 0.8417);
  --x1: calc(var(--x0) + var(--w0) * 0.1125);
  --y1: calc(var(--y0) + var(--w0) * 0.12);
  --h1: calc(var(--w1) * 0.88522);
  --feather: 8cqw;
  position: absolute;
  inset: 0;
  container-type: size;
}
.hero__layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
.hero__layer--full {
  background-image: url("../assets/img/hero.webp");
  background-size: var(--w0) auto;
  background-position: var(--x0) var(--y0);
}
.hero__layer--room {
  background-image: url("../assets/img/hero-bg.webp");
  background-size: var(--w1) auto;
  background-position: var(--x1) var(--y1);
  mask-image:
    linear-gradient(90deg, transparent var(--x1), #000 calc(var(--x1) + var(--feather)),
      #000 calc(var(--x1) + var(--w1) - var(--feather)), transparent calc(var(--x1) + var(--w1))),
    linear-gradient(180deg, transparent var(--y1), #000 calc(var(--y1) + var(--feather)),
      #000 calc(var(--y1) + var(--h1) - var(--feather)), transparent calc(var(--y1) + var(--h1)));
  mask-composite: intersect;
}
.hero__layer--fg {
  background-image: url("../assets/img/hero-fg.webp");
  background-size: var(--w1) auto;
  background-position: var(--x1) var(--y1);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 1.18%, rgba(0, 0, 0, 0.665) 28.42%, rgba(0, 0, 0, 0.469) 45.43%, rgba(102, 102, 102, 0) 62%);
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1124px;
}
.hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 700;
  letter-spacing: -1px;
}
.hero__lead {
  max-width: 560px;
  margin-top: 28px;
  margin-bottom: 64px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}
/* Pinned to the bottom edge, as far from it as the title is from the top. */
.hero__cta { margin-top: auto; }
.hero__cta-short { display: none; }

/* ---------- Audience ("Для кого") ---------- */
/* Laid out like "Чим я можу допомогти" below (.help, .help-card), in its own colours. */

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.about__info { display: flex; flex-direction: column; gap: 62px; }
.about__lead { max-width: 441px; }
.about__facts { display: flex; flex-direction: column; }
.about__facts li {
  position: relative;
  padding: 16px 0 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}
.about__facts li:first-child { padding-top: 0; }
.about__facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.about__facts li::before {
  content: "";
  position: absolute;
  left: 9px;
  top: calc(16px + 9px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.about__facts li:first-child::before { top: 9px; }
.about__more { align-self: flex-start; margin-top: -22px; }
.about__photo {
  position: relative;
  min-height: 644px;
  border-radius: var(--radius);
  overflow: hidden;
}
.about__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1.22);
  transform-origin: 50% 45%;
}

/* ---------- Help ---------- */
.audience,
.help {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding-top: 100px;
  padding-bottom: 100px;
}
.audience .h2,
.help .h2 { max-width: 772px; }
.help-card {
  display: flex;
  width: 100%;
  max-width: 620px;
  flex-direction: column;
  padding: 12px;
  border-radius: var(--radius);
  color: var(--soft-black);
}
.help-card--lime { background: var(--lime-soft); }
.help-card__list {
  flex: 1;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--white);
}

/* ---------- Reviews ---------- */
.reviews {
  display: flex;
  flex-direction: column;
  gap: 90px;
  padding: 120px 28px 150px;
}
.reviews__track {
  --visible: 3; /* cards in view; js/reviews-slider.js reads it too */
  --track-gap: 24px;
  display: grid;
  grid-template-columns: repeat(var(--visible), minmax(0, 1fr));
  align-items: stretch; /* every card as tall as the tallest */
  gap: calc(var(--track-gap) + 24px) var(--track-gap); /* rows: the «more» button hangs 24px below a card */
}
/* The slider (js/reviews-slider.js): the cards become one row the track slides
   along, clipped by the viewport, with an arrow in each side margin. */
.reviews__slider { position: relative; }
.reviews__slider.is-active .reviews__viewport {
  margin: -24px 72px -72px;
  padding: 24px 0 72px; /* the hovered card's lift and shadow, the «more» button below the edge */
  overflow: hidden;
  overflow: clip; /* unlike hidden, focus inside never scrolls the clipped box */
}
.reviews__slider.is-active .reviews__track {
  display: flex;
  align-items: stretch;
  max-width: none;
  margin: 0;
  will-change: transform;
}
.reviews__slider.is-active .review {
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--track-gap)) / var(--visible));
  min-width: 0;
}
.reviews__arrow,
.review__more {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--soft-black);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.reviews__arrow[hidden], .review__more[hidden] { display: none; }
.reviews__arrow:hover, .review__more:hover { background: var(--soft-black); color: var(--white); }
.reviews__arrow { top: 50%; transform: translateY(-50%); }
.reviews__arrow--prev { left: 0; }
.reviews__arrow--prev svg { transform: scaleX(-1); }
.reviews__arrow--next { right: 0; }
.review {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 26px 40px; /* 16px between the text and the «more» button's top half */
  border-radius: var(--radius);
  background: var(--paper);
}
.review__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* js/reviews.js sets --review-lines to what the shortest review needs at this
     width, so it is read in full and the others get «Показати більше». */
  -webkit-line-clamp: var(--review-lines, 13);
  line-clamp: var(--review-lines, 13);
  overflow: hidden;
}
.review__text p + p { margin-top: 22px; }
/* «Показати більше»: a round arrow pointing down, astride the card's bottom edge. */
.review__more {
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
}
.review__more svg { transform: rotate(90deg); }
.author { display: flex; align-items: center; gap: 12px; }
.author img {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  object-fit: cover;
}
.author__name { font-weight: 600; }
.author__role { font-size: var(--fs-small); line-height: 18.75px; }

/* ---------- Contacts ---------- */
.contacts {
  display: grid;
  grid-template-columns: minmax(0, 683px) minmax(0, 554px);
  justify-content: space-between;
  gap: 20px;
  padding-right: 76px;
}
.contacts__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}
.contacts .h3 { margin-top: 0; }
.contacts__lead { padding-top: 16px; }
.contacts__links { display: flex; flex-direction: column; gap: 2px; padding-top: 21px; }
.contacts__links a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  font-weight: 600;
  transition: opacity 0.2s ease;
}
.contacts__links a:hover { opacity: 0.7; }
.contacts__email { font-weight: 400 !important; overflow-wrap: anywhere; }
.contacts__email img { margin-right: -4px; }
.contacts .logo { margin-top: auto; }

/* ---------- Review modal ---------- */
.modal {
  width: min(1019px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0; /* padding lives on .modal__inner so backdrop clicks are unambiguous */
  border: 0;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--soft-black);
}
.modal::backdrop { background: var(--modal-scrim); }
.modal__inner { padding: 26px; }
.modal__bar {
  position: sticky;
  top: 26px;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  height: 0;
}
.modal__close {
  display: block;
  padding: 8px;
  margin: -8px -8px 0 0;
  border-radius: 50%;
  background: var(--paper);
}
.modal__text p + p { margin-top: 22px; }
.modal__body .author { padding-right: 40px; padding-bottom: 24px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  /* background-size: cover, background-position: 60% 50% */
  .hero__media { --w0: max(100cqw, 112.89cqh); --px: 0.6; --py: 0.5; }
  .contacts { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-right: var(--section-pad); }
  /* Let the logo drop below the form, as in the mobile design. */
  .contacts__info { display: contents; }
  .form-frame { max-width: 554px; }
  .contacts .logo { order: 3; margin-top: 0; }
}

@media (max-width: 960px) {
  .about { grid-template-columns: 1fr; }
  .about__photo { min-height: 0; aspect-ratio: 620 / 644; }
  .reviews__track { --visible: 1; max-width: 640px; margin: 0 auto; }
  .reviews__slider.is-active .reviews__track { --visible: 2; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  /* The hero splits in two: a photo banner with the title, then the lead and the button
     on the page background. One grid (the content box is flattened with display: contents):
     row 1 stacks the photo, its shade (::after) and the title; the button's row keeps its
     height while the button is docked to the bottom edge (js/ui.js). */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto var(--btn-h);
    row-gap: 16px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    color: var(--soft-black);
    background: none;
  }
  .hero__content { display: contents; }
  .hero__media,
  .hero::after,
  .hero__title { grid-area: 1 / 1; }
  /* Same layered photo as desktop, scaled up and pushed right so Maria fills the right side
     (the chair runs off the edge) and sits on the banner's bottom; the title takes the left. */
  .hero__media {
    --w0: 175cqw;
    --px: 0.67;
    --py: 1;
    position: relative;
    aspect-ratio: 358 / 520;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--soft-black);
  }
  .hero__layer--full { background-image: url("../assets/img/hero-mobile.webp"); }
  .hero::after {
    position: relative;
    border-radius: var(--radius);
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 45%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0) 75%);
  }
  /* One word per line, flush left: every space is wider than the line. */
  .hero__title {
    position: relative;
    z-index: 1;
    align-self: start;
    padding: 24px 20px;
    color: var(--white);
    word-spacing: 100vw;
  }
  /* The desktop break goes; .keep groups words that share a line (index.html, i18n-en.js). */
  .hero__title br { display: none; }
  .hero__title .keep { white-space: nowrap; word-spacing: normal; }
  .hero__lead { max-width: none; margin-top: 8px; margin-bottom: 0; padding: 0 4px; font-size: var(--fs-body); line-height: var(--lh-body); }
  .hero__cta { width: 100%; margin-top: 0; }
  .hero__cta-full { display: none; }
  .hero__cta-short { display: inline; }

  .about__info { gap: 32px; }
  .about__more { margin-top: 0; }

  .audience,
  .help { gap: 32px; padding: 48px 16px; }
  .contacts .h3 br { display: none; }

  .reviews { gap: 32px; padding: 48px 0 56px; margin: 0 calc(-1 * var(--gutter)); }
  .reviews .section-head { padding: 0 var(--gutter); }
  .reviews__track {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--gutter) 32px; /* the «more» button hangs 24px below a card */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .reviews__track::-webkit-scrollbar { display: none; }
  .review {
    flex: 0 0 85%;
    scroll-snap-align: start;
    padding: 20px 20px 36px;
  }

  .contacts { padding: 24px 16px; }
  .modal__inner { padding: 20px; }
  .modal__bar { top: 20px; }
}