:root {
    --bg: #FFFBF7;
    --surface: #F5F0EB;
    --surface-2: #F0E8DD;
    --surface-sunk: #EFE7DA;
    --surface-card: #F5F0EB;

    --border-faint: #E8DFD1;
    --border: #DCCFB9;

    --text: #2D2D2D;
    --text-sub: #4A4A4A;
    --text-muted: #6B6B6B;
    --text-label: #6B6B6B;
    --text-dim: #8A8A8A;
    --text-nav: #6B6B6B;

    --gold: #C75B39;
    --gold-2: #B04E2F;
    --gold-tint: rgba(199, 91, 57, 0.14);
    --gold-on: #FFFBF7;
  }

  body { background: var(--bg); color: var(--text); }
  .hero__h1 { font-weight: 600; }
  h2 { font-weight: 500; }

  .btn {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .guarantee__icon svg, .card__icon svg {
    color: #8A9A5B; /* olive — вторичный акцент */
  }
  @media (min-width: 1000px) {
    main {
      max-width: 1160px;
      padding-left: 48px;
      padding-right: 48px;
    }
    .hero__h1 {
      max-width: 780px;
      font-size: 64px;
    }
    .hero__dek {
      max-width: 620px;
      font-size: 19px;
    }
    #sec-services .card-grid {
      grid-template-columns: repeat(4, 1fr);
    }
    #sec-services .card-grid:nth-of-type(2) {
      grid-template-columns: repeat(5, 1fr);
    }
    .home-founder__card {
      max-width: 720px;
    }
    #sec-reviews .home-reviews__carousel {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      overflow: visible;
    }
    #sec-coverage .home-coverage__grid {
      grid-template-columns: repeat(3, 1fr);
    }
    .home-guides .card-grid {
      grid-template-columns: repeat(5, 1fr);
    }
    .final-cta {
      padding-left: 80px;
      padding-right: 80px;
    }
  }

  /* ============ Visual/UX upgrade pass — конкурентный анализ, превью-only ============ */
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .reveal.is-visible { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; opacity: 1; transform: none; }
  }

  /* Hero decorative line-art (sun + coastal arches) — desktop only */
  .hero__visual { display: none; }
  @media (min-width: 1000px) {
    .hero { position: relative; }
    .hero__visual {
      display: block;
      position: absolute;
      top: 10px;
      right: 8px;
      opacity: 0.92;
      pointer-events: none;
    }
  }

  /* Founder photo — bigger, more weight */
  .home-founder__photo {
    width: 168px;
    height: 168px;
    border-radius: var(--r-4);
    border: 2px solid var(--gold);
    object-fit: cover;
  }
  @media (max-width: 640px) {
    .home-founder__photo { width: 120px; height: 120px; }
  }
  .home-founder__card { align-items: center; }

  /* Reviews — aggregate rating row + quote glyph */
  .reviews-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 20px;
    font-family: 'Manrope', sans-serif;
    color: var(--text-muted);
    font-size: 14px;
  }
  .reviews-rating b { color: var(--text); font-size: 16px; }
  .reviews-rating svg { color: var(--gold); }
  .review-card { position: relative; }
  .review-card::before {
    content: '"';
    position: absolute;
    top: 6px;
    right: 16px;
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    line-height: 1;
    color: var(--gold);
    opacity: 0.25;
  }

  /* City coverage — abstract coastal line-art above the grid */
  .coverage-map { display: block; margin: 4px 0 28px; width: 100%; max-width: 640px; }

  /* Process steps (Как работает Krepko) */
  .process-steps {
    display: grid;
    gap: 20px;
    counter-reset: step;
    margin: 8px 0 0;
  }
  @media (min-width: 720px) {
    .process-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  }
  .process-step {
    position: relative;
    padding: 18px 18px 18px 0;
    border-top: 2px solid var(--gold);
  }
  .process-step__num {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: var(--gold);
    margin-bottom: 6px;
  }
  .process-step__text { color: var(--text-sub); font-size: 14px; line-height: 1.55; margin: 0; }

  /* Subtle CTA hover lift (micro-interaction) */
  .btn { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
  .btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
  

  /* ============ Round 3: service card hover, timeline, city photo-cards ============ */

  /* 5. Service cards — left accent bar grows on hover + lift */
  #sec-services .card--service {
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
  }
  #sec-services .card--service::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 4px; height: 0;
    background: var(--gold);
    transition: height .3s ease;
  }
  #sec-services .card--service:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(26, 43, 60, 0.16);
  }
  #sec-services .card--service:hover::after { height: 100%; }
  #sec-services .card__arrow {
    transition: opacity .25s ease, transform .25s ease;
  }
  @media (hover: hover) {
    #sec-services .card__arrow { opacity: 0; transform: translateX(-4px); }
    #sec-services .card--service:hover .card__arrow { opacity: 1; transform: translateX(0); }
  }

  /* 6. City cards — illustrated background + gradient overlay */
  .card--city-visual {
    position: relative;
    height: 260px;
    padding: 0 !important;
    overflow: hidden;
    display: block;
  }
  .card--city-visual__media { position: absolute; inset: 0; }
  .card--city-visual__media svg {
    width: 100%; height: 100%; display: block;
    transition: transform .5s ease;
  }
  @media (hover: hover) {
    .card--city-visual:hover .card--city-visual__media svg { transform: scale(1.08); }
  }
  .card--city-visual__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(26,43,60,0.88) 0%, rgba(26,43,60,0.25) 55%, rgba(26,43,60,0) 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 20px;
  }
  .card--city-visual .card__title { color: #FFFBF7; margin: 0 0 4px; }
  .card--city-visual .card__meta--districts, .card--city-visual .card__meta--districts .nowrap { color: rgba(255,251,247,0.82); }
  .card--city-visual .card__meta--districts .sep { color: rgba(255,251,247,0.45); }
  @media (max-width: 720px) {
    #sec-coverage .home-coverage__grid {
      display: flex;
      overflow-x: auto;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      gap: 16px;
      padding-bottom: 10px;
      -webkit-overflow-scrolling: touch;
    }
    #sec-coverage .card--city-visual { flex: 0 0 240px; scroll-snap-align: start; }
  }

  /* 7. Vertical timeline (process) */
  .timeline { position: relative; padding-left: 40px; margin-top: 12px; }
  .timeline::before {
    content: '';
    position: absolute;
    left: 11px; top: 4px; bottom: 4px;
    width: 2px;
    background: linear-gradient(to bottom, var(--gold), #8A9A5B);
  }
  .timeline-item {
    position: relative;
    margin-bottom: 36px;
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .timeline-item:last-child { margin-bottom: 0; }
  .timeline-item.is-visible { opacity: 1; transform: none; }
  .timeline-item::before {
    content: '';
    position: absolute;
    left: -34px; top: 2px;
    width: 22px; height: 22px;
    background: var(--bg);
    border: 3px solid var(--border);
    border-radius: 50%;
    transition: border-color .3s ease, background .3s ease;
  }
  .timeline-item.is-visible::before { border-color: var(--gold); }
  .timeline-item__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    margin: 0 0 4px;
  }
  .timeline-item__text { color: var(--text-sub); font-size: 14px; line-height: 1.55; margin: 0; }
  @media (prefers-reduced-motion: reduce) {
    .timeline-item { opacity: 1; transform: none; }
  }
  
  
  
  
  /* боевые стили задают svg { fill: none }

  /* ============ Round 4: wider desktop + bigger header/footer + consultation CTA ============ */
  @media (min-width: 1000px) {
    main { max-width: 1440px; padding-left: 64px; padding-right: 64px; }
    .hero__h1 { max-width: 900px; font-size: 72px; }
    .hero__dek { max-width: 680px; font-size: 20px; }
    #sec-services .card-grid { grid-template-columns: repeat(4, 1fr); }
    #sec-services .card-grid:nth-of-type(2) { grid-template-columns: repeat(5, 1fr); }
    .home-guides .card-grid { grid-template-columns: repeat(5, 1fr); }
    #sec-reviews .home-reviews__carousel { grid-template-columns: repeat(3, 1fr); }
    #sec-coverage .home-coverage__grid { grid-template-columns: repeat(3, 1fr); }
    .home-founder__card { max-width: 860px; }
    .coverage-map { max-width: 860px; }
  }
  
  
  

  /* ============ Round 5: LegalFlow-like proportions across the whole page ============ */
  @media (min-width: 1000px) {

    /* --- Hero: centered composition, oversized serif --- */
    .hero--home { text-align: center; padding: 96px 0 88px; }
    .hero--home .hero__h1 {
      max-width: 1100px;
      margin-left: auto; margin-right: auto;
      font-size: 84px;
      line-height: 1.08;
    }
    .hero--home .hero__dek {
      max-width: 720px;
      margin-left: auto; margin-right: auto;
      font-size: 20px;
      margin-top: 24px;
    }
    .hero--home .hero__cta-row {
      justify-content: center;
      margin-top: 44px;
      gap: 20px;
    }
    .hero--home .hero__cta-value { margin-top: 20px; }
    .hero--home .hero__meta-row { justify-content: center; gap: 64px; margin-top: 64px; }

    /* decorative art recentred above the headline */
    .hero__visual {
      position: static;
      display: flex;
      justify-content: center;
      margin-bottom: 8px;
      opacity: 0.55;
    }
    .hero__visual svg { width: 190px; height: 150px; }

    /* hero secondary link becomes an outline button (matches reference pair) */
    .hero--home .hero__link-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 20px 40px;
      border: 1px solid var(--text);
      color: var(--text);
      font-family: 'Manrope', sans-serif;
      font-weight: 600;
      font-size: 15px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      text-decoration: none;
      transition: background .18s ease, color .18s ease, transform .18s ease;
    }
    .hero--home .hero__link-secondary:hover {
      background: #1A2B3C; color: #FFFBF7; transform: translateY(-2px);
    }
    .hero--home .btn--gold { padding: 20px 44px; font-size: 15px; }

    /* --- Section rhythm: big breathing room like the reference --- */
    main > section,
    main > .home-body { padding-top: 88px; padding-bottom: 88px; }
    .rh-section-break { margin-top: 0 !important; }

    /* --- Centered section headers --- */
    #sec-services, #sec-reviews, #sec-coverage, .home-guides, .home-faq { text-align: center; }
    #sec-services .p-label, #sec-reviews .p-label,
    #sec-coverage .p-label, .home-guides .p-label { display: inline-block; margin-bottom: 16px; }
    #sec-services h2, #sec-reviews h2, #sec-coverage h2,
    .home-guides h2, .home-faq h2, .final-cta h2 {
      font-size: 48px;
      line-height: 1.15;
      margin-bottom: 20px;
    }
    .home-services-grid__h2-sub { font-size: 32px !important; margin-top: 56px; }
    #sec-coverage .home-coverage__dek, .home-guides__dek {
      max-width: 680px; margin-left: auto; margin-right: auto; font-size: 18px;
    }
    .reviews-rating { justify-content: center; }
    .coverage-map { margin-left: auto; margin-right: auto; }

    /* cards/text inside centered sections stay left-aligned for readability */
    #sec-services .card, #sec-reviews .review-card,
    .home-guides .card, .home-faq .faq__item { text-align: left; }

    /* --- Body copy block --- */
    .home-body .pillar-body { max-width: 860px; margin: 0 auto; }
    .home-body h2 { font-size: 44px; line-height: 1.15; }
    .home-body p { font-size: 18px; line-height: 1.7; }

    /* --- Guarantees --- */
    #sec-guarantees .guarantees__grid { gap: 40px; }
    .guarantee__title { font-size: 19px; }
    .guarantee__text { font-size: 15px; }

    /* --- Founder --- */
    #sec-founder .home-founder__card { padding: 40px; gap: 36px; }

    /* --- FAQ --- */
    .home-faq .faq__list { max-width: 980px; margin: 0 auto; }
    .home-faq .faq__q { font-size: 17px; padding: 22px 24px; }

    /* --- Final CTA --- */
    .final-cta { text-align: center; padding: 88px 64px; }
    .final-cta p { font-size: 19px; max-width: 720px; margin-left: auto; margin-right: auto; }
    .final-cta__actions { justify-content: center; gap: 20px; margin-top: 36px; }
    .final-cta .btn { padding: 20px 44px; font-size: 15px; }
  }
  

  @media (min-width: 1000px) {
    .hero--home .hero__cta-value { text-align: center; width: 100%; }
  }

  .hero__accent { color: var(--gold); }
  @media (min-width: 1000px) {
    /* hero/content follows the same wide gutters */
    main {
      max-width: 1760px;
      padding-left: clamp(24px, 4.5vw, 88px);
      padding-right: clamp(24px, 4.5vw, 88px);
    }
    .hero--home .hero__h1 { max-width: 1240px; font-size: 88px; }
  }

  /* Round 6b: larger brand + nav type (was too small) */
  

  /* hero ornament — restrained divider instead of the illustrative art */
  @media (min-width: 1000px) {
    .hero__visual { opacity: 1; margin-bottom: 28px; }
    .hero__visual svg { width: 240px; height: 24px; }
  }
  

  /* фото основателя — в одном ключе с карточками */
  .home-founder__photo { border-radius: 4px !important; }


  /* ============ Round 8: единый вводный блок (метрики + почему + гарантии + процесс) ============ */
  .intro {
    background: var(--surface);
    border-top: 1px solid var(--border-faint);
    border-bottom: 1px solid var(--border-faint);
    padding: 56px 24px 64px;
  }
  @media (min-width: 1000px) {
    .intro {
      padding: 72px clamp(24px, 4.5vw, 88px) 88px;
      margin-left: calc(-1 * clamp(24px, 4.5vw, 88px));
      margin-right: calc(-1 * clamp(24px, 4.5vw, 88px));
    }
  }

  /* --- метрики: крупные цифры в ряд --- */
  .intro__metrics {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    max-width: 900px;
    margin: 0 auto 56px;
  }
  .intro__metrics .hero__meta-item {
    flex: 1 1 160px;
    text-align: center;
    padding: 0 24px;
    border-right: 1px solid var(--border);
  }
  .intro__metrics .hero__meta-item:last-child { border-right: 0; }
  .intro__metrics .hero__meta-item small {
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
  }
  .intro__metrics .hero__meta-item b {
    display: block;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    color: #1A2B3C;
  }
  @media (max-width: 720px) {
    .intro__metrics .hero__meta-item { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--border); padding: 16px 0; }
    .intro__metrics .hero__meta-item:last-child { border-bottom: 0; }
    .intro__metrics .hero__meta-item b { font-size: 30px; }
  }

  /* --- «Почему» --- */
  .intro__why { max-width: 780px; margin: 0 auto 56px; text-align: center; }
  .intro__why .p-label { display: inline-block; margin-bottom: 14px; }
  .intro__why h2 { font-size: 40px; line-height: 1.18; margin: 0 0 20px; }
  .intro__why p { font-size: 17px; line-height: 1.75; color: var(--text-sub); margin: 0 0 16px; }
  @media (min-width: 1000px) { .intro__why h2 { font-size: 46px; } .intro__why p { font-size: 18px; } }

  /* --- гарантии --- */
  .intro__guarantees {
    max-width: 1100px;
    margin: 0 auto 64px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  @media (min-width: 720px) { .intro__guarantees { grid-template-columns: 1fr 1fr; gap: 28px 40px; } }
  @media (min-width: 1200px) { .intro__guarantees { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
  .intro__guarantees .guarantee {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-top: 20px;
    border-top: 2px solid var(--gold);
  }
  .intro__guarantees .guarantee__icon { color: #8A9A5B; flex-shrink: 0; margin-top: 2px; }
  .intro__guarantees .guarantee__title { font-size: 17px; margin: 0 0 6px; }
  .intro__guarantees .guarantee__text { font-size: 14px; line-height: 1.6; color: var(--text-sub); margin: 0; }

  /* --- процесс --- */
  .intro__how { max-width: 780px; margin: 0 auto; text-align: center; }
  .intro__how .p-label { display: inline-block; margin-bottom: 14px; }
  .intro__how h2 { font-size: 36px; line-height: 1.18; margin: 0 0 32px; }
  @media (min-width: 1000px) { .intro__how h2 { font-size: 42px; } }
  .intro__how .timeline { text-align: left; max-width: 560px; margin: 0 auto; }
  .intro__how .timeline-item::before { background: var(--surface); }

  /* ============ Round 9: двухрядная лента (города / услуги) с parallax ============ */
  .marquee {
    background: #1A2B3C;
    padding: 56px 0;
    overflow: hidden;
    margin-left: calc(-1 * clamp(24px, 4.5vw, 88px));
    margin-right: calc(-1 * clamp(24px, 4.5vw, 88px));
  }
  .marquee__row { overflow: hidden; }
  .marquee__row--top { margin-bottom: 20px; }
  .marquee__track {
    display: flex;
    gap: 20px;
    width: max-content;
    will-change: transform;
  }
  .marquee__set { display: flex; gap: 20px; flex: 0 0 auto; }

  /* карточки внутри ленты — фиксированный размер */
  .marquee .card {
    flex: 0 0 auto;
    width: 280px;
    margin: 0;
  }
  .marquee .card--city-visual { height: 190px; }
  .marquee .card--service {
    height: 190px;
    background: var(--surface);
    border-color: rgba(255, 251, 247, 0.14);
    justify-content: space-between;
    padding: 22px;
  }
  .marquee .card--service .card__title { font-size: 18px; }
  .marquee .card--service .card__meta { font-size: 12px; }
  .marquee .card--service:hover { transform: translateY(-6px); }

  @media (max-width: 720px) {
    .marquee { padding: 40px 0; }
    .marquee .card { width: 210px; }
    .marquee .card--city-visual, .marquee .card--service { height: 150px; }
    .marquee__track, .marquee__set { gap: 14px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .marquee__track { transform: none !important; }
  }

  /* ============ Round 9b: лента на полный экран (как в оригинале LegalFlow) ============ */
  .marquee {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: clamp(40px, 6vh, 72px) 0;
    box-sizing: border-box;
  }
  .marquee__row--top { margin-bottom: 0; }

  /* карточки крупнее — занимают экран по вертикали */
  .marquee .card { width: clamp(260px, 26vw, 400px); }
  .marquee .card--city-visual,
  .marquee .card--service { height: clamp(240px, 34vh, 400px); }

  .marquee .card--service { padding: 28px; }
  .marquee .card--service .card__title { font-size: 22px; line-height: 1.25; }
  .marquee .card--service .card__meta { font-size: 13px; }
  .marquee .card--service .card__icon svg { width: 26px; height: 26px; }
  .marquee .card--city-visual .card__title { font-size: 26px; }
  .marquee .card--city-visual__overlay { padding: 26px; }

  .marquee__track, .marquee__set { gap: 24px; }

  /* мобильный: не растягиваем на весь экран */
  @media (max-width: 720px) {
    .marquee {
      min-height: 0;
      padding: 40px 0;
      gap: 14px;
    }
    .marquee .card { width: 220px; }
    .marquee .card--city-visual, .marquee .card--service { height: 190px; }
    .marquee .card--service { padding: 18px; }
    .marquee .card--service .card__title { font-size: 17px; }
    .marquee .card--city-visual .card__title { font-size: 20px; }
    .marquee__track, .marquee__set { gap: 14px; }
  }

  /* Индикатор прочитанного переехал в site-nav.css (2026-08-07): полоса
     нужна на всех страницах, а не только там, где грузится этот файл. */

  /* ============ Round 10b: лента в светлой палитре (убран navy-фон) ============ */
  .marquee {
    background: var(--surface) !important;       /* sand вместо navy */
    border-top: 1px solid var(--border-faint);
    border-bottom: 1px solid var(--border-faint);
  }
  /* карточки услуг: cream на песочном фоне + обычная граница */
  .marquee .card--service {
    background: var(--bg);
    border-color: var(--border);
  }
  /* следующий блок уводим в cream, чтобы не слиться с песочной лентой */
  .intro {
    background: var(--bg);
  }

  /* высокие мониторы: не раздуваем ленту пустотой */
  @media (min-width: 721px) {
    .marquee { min-height: min(100vh, 980px); }
  }

  /* лента — тот же фон, что у хедера (--surface-sunk #EFE7DA) */
  .marquee { background: var(--surface-sunk) !important; }

  /* ============ Round 11: тонкая бегущая строка с перечнем услуг ============ */
  .ticker {
    background: var(--surface-sunk);
    border-top: 1px solid var(--border-faint);
    border-bottom: 1px solid var(--border-faint);
    overflow: hidden;
    padding: 18px 0;
    margin-left: calc(-1 * clamp(24px, 4.5vw, 88px));
    margin-right: calc(-1 * clamp(24px, 4.5vw, 88px));
  }
  .ticker__track {
    display: flex;
    width: max-content;
    animation: ticker-scroll 46s linear infinite;
  }
  .ticker:hover .ticker__track { animation-play-state: paused; }
  .ticker__set { display: flex; align-items: center; flex: 0 0 auto; }
  .ticker__item {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1A2B3C;
    white-space: nowrap;
    padding: 0 4px;
  }
  .ticker__sep {
    color: var(--gold);
    font-size: 12px;
    padding: 0 26px;
    line-height: 1;
  }
  @keyframes ticker-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  @media (max-width: 720px) {
    .ticker { padding: 14px 0; }
    .ticker__item { font-size: 12px; letter-spacing: 0.1em; }
    .ticker__sep { padding: 0 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ticker__track { animation: none; }
    .ticker { overflow-x: auto;
  touch-action: pan-x;
  overscroll-behavior-x: contain; }
  }

  /* ============ Round 11b: hero растягивается, тикер прижат к низу экрана ============ */
  @media (min-width: 721px) {
    .hero--home {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: 24px;
      padding-bottom: 24px;
      box-sizing: border-box;
    }
  }

  /* тикер — full-bleed, от края до края экрана */
  .ticker {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .hero__free {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 14px 0 0;
  }
  @media (min-width: 1000px) { .hero__free { font-size: 15px; margin-top: 18px; } }

  /* ремарка под кнопкой: снимает возражение в момент клика */
  .hero__free { margin: 16px 0 0 !important; }
  @media (min-width: 1000px) { .hero__free { margin-top: 18px !important; } }

  /* ============ Round 12: подзаголовок + ремарка = единый блок ============ */
  .hero__lead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 660px;
    margin: 24px auto 0;
  }
  .hero__lead .hero__dek { margin: 0 !important; max-width: none; }
  .hero__lead-rule {
    display: block;
    width: 48px;
    height: 1px;
    background: var(--border);
  }
  .hero__lead .hero__free { margin: 0 !important; }
  /* группу отделяем от кнопки бОльшим воздухом — закон близости */
  @media (min-width: 1000px) {
    .hero__lead { gap: 14px; margin-top: 26px; }
    .hero--home .hero__cta-row { margin-top: 40px; }
  }

  /* ============ Round 13: две колонки — контент слева, основатель справа ============ */
  .intro__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 64px;
  }
  @media (min-width: 1000px) {
    .intro__top {
      grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
      gap: 64px;
      align-items: start;
      margin-bottom: 72px;
    }
  }

  /* левая колонка — по левому краю, без центрирования */
  .intro__col-left .intro__metrics {
    justify-content: flex-start;
    max-width: none;
    margin: 0 0 40px;
  }
  .intro__col-left .intro__metrics .hero__meta-item {
    flex: 0 1 auto;
    text-align: left;
    padding: 0 32px 0 0;
    margin-right: 32px;
    border-right: 1px solid var(--border);
  }
  .intro__col-left .intro__metrics .hero__meta-item:last-child {
    border-right: 0; margin-right: 0; padding-right: 0;
  }
  .intro__col-left .intro__why {
    text-align: left;
    max-width: none;
    margin: 0;
  }
  .intro__col-left .intro__why .p-label { margin-bottom: 12px; }

  /* правая колонка — карточка основателя */
  .intro__col-right { text-align: left; }
  .intro__col-right .p-label { display: inline-block; margin-bottom: 14px; }
  .intro__col-right .home-founder__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--gold);
    border-radius: 4px;
    padding: 28px;
    max-width: none;
  }
  .intro__col-right .home-founder__photo {
    width: 100%;
    height: auto;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 0;
    border-radius: 4px !important;
  }
  .intro__col-right .home-founder__name { font-size: 20px; margin: 0 0 2px; }
  .intro__col-right .home-founder__role { display: block; }
  .intro__col-right .home-founder__text { font-size: 15px; line-height: 1.65; margin: 8px 0 0; }
  .intro__col-right .home-founder__link { margin-top: 6px; display: inline-block; }

  @media (max-width: 720px) {
    .intro__col-left .intro__metrics { flex-direction: column; }
    .intro__col-left .intro__metrics .hero__meta-item {
      border-right: 0; margin-right: 0; padding: 14px 0;
      border-bottom: 1px solid var(--border);
    }
    .intro__col-left .intro__metrics .hero__meta-item:last-child { border-bottom: 0; }
  }

  /* карточка основателя целиком кликабельна */
  a.home-founder__card {
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  @media (hover: hover) {
    a.home-founder__card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px rgba(26, 43, 60, 0.12);
      border-color: var(--gold);
    }
    a.home-founder__card:hover .home-founder__name { color: var(--gold); }
  }
  a.home-founder__card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  /* ============ Round 13b: фото слева, текст справа внутри карточки ============ */
  .intro__col-right a.home-founder__card {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }
  .intro__col-right .home-founder__photo {
    width: 132px;
    max-width: none;
    height: 132px;
    margin: 0;
  }
  .intro__col-right .home-founder__body { min-width: 0; }
  .intro__col-right .home-founder__text { margin-top: 10px; }

  @media (max-width: 520px) {
    .intro__col-right a.home-founder__card {
      grid-template-columns: 96px minmax(0, 1fr);
      gap: 16px;
      padding: 20px;
    }
    .intro__col-right .home-founder__photo { width: 96px; height: 96px; }
  }

  /* ============ Round 14: карточка тянется на всю высоту — ровный прямоугольник ============ */
  @media (min-width: 1000px) {
    .intro__top { align-items: stretch; }
    .intro__col-right { display: flex; }
    .intro__col-right a.home-founder__card {
      display: grid;
      grid-template-columns: 1fr;                 /* сбрасываем прежние 132px + текст */
      grid-template-rows: auto minmax(160px, 1fr) auto;
      height: 100%;
      width: 100%;
      gap: 18px;
      padding: 24px;
    }
    /* фото занимает весь свободный остаток — низы колонок совпадают */
    .intro__col-right .home-founder__photo {
      width: 100%;
      height: 100%;
      max-width: none;
      aspect-ratio: auto;
      object-fit: cover;
      object-position: center 20%;
      align-self: stretch;
    }
    .intro__col-right .p-label { margin: 0; }
    .intro__col-right .home-founder__body { align-self: end; }
    .intro__col-right .home-founder__text { margin-top: 8px; }
  }

  /* ============ Round 14b: фото не должно распирать карточку ============
     min-height:0 + minmax(0,1fr) — иначе картинка навязывает свою натуральную
     высоту, карточка перерастает левую колонку и снизу слева зияет пустота. */
  @media (min-width: 1000px) {
    .intro__col-right { min-height: 0; }
    .intro__col-right a.home-founder__card {
      grid-template-rows: auto minmax(0, 1fr) auto;
      min-height: 0;
    }
    .intro__col-right .home-founder__photo {
      min-height: 0;
      height: 100%;
    }
  }

  /* ============ Round 14c: фото абсолютом — не диктует высоту карточки ============
     Пока <img> в потоке, после его загрузки браузер закладывает натуральную высоту
     в грид-строку, и карточка перерастает левую колонку. Выносим картинку из
     расчёта: обёртка тянется по 1fr, изображение заполняет её абсолютом. */
  .founder-photo { display: block; }
  @media (min-width: 1000px) {
    .founder-photo {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow: hidden;
      border-radius: 4px;
    }
    .intro__col-right .home-founder__photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 22%;
    }
  }

  /* ============ Round 15: портрет в центре + карточки по бокам (по мотивам Marcus Muller,
     но в тёплой палитре: sand-карточки на cream, Playfair на цифрах — премиально, не хайтек) ============ */
  .portrait {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }
  @media (min-width: 1000px) {
    .portrait {
      grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr) minmax(0, 1fr);
      gap: 24px;
      align-items: stretch;
      margin-bottom: 56px;
    }
  }

  .portrait__col { display: grid; gap: 16px; grid-auto-rows: 1fr; }
  @media (min-width: 1000px) { .portrait__col { gap: 24px; } }

  /* карточка */
  .stat {
    background: var(--surface);
    border: 1px solid var(--border-faint);
    border-radius: 4px;
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    transition: border-color .2s ease, transform .2s ease;
  }
  @media (min-width: 1000px) { .stat { padding: 28px 30px; } }
  @media (hover: hover) { .stat:hover { border-color: rgba(199, 91, 57, .45); } }

  .stat__label {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .stat__value {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1;
    color: #1A2B3C;
  }
  .stat__value--sm { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: 0.01em; }

  .stat__lead {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.2;
    color: #1A2B3C;
  }
  .stat__body {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-sub);
  }
  .stat--text { justify-content: flex-start; }

  /* портрет */
  .portrait__figure {
    position: relative;
    margin: 0;
    min-height: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--surface-sunk);
  }
  .portrait__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    object-position: center 18%;
  }
  @media (min-width: 1000px) {
    .portrait__figure { position: relative; }
    .portrait__img { position: absolute; inset: 0; min-height: 0; }
  }
  /* тёплая подпись поверх фото — мягкий градиент вместо чёрной плашки */
  .portrait__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 26px 22px;
    background: linear-gradient(to top,
      rgba(26, 43, 60, 0.86) 0%,
      rgba(26, 43, 60, 0.45) 55%,
      rgba(26, 43, 60, 0) 100%);
  }
  .portrait__label {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
  }
  .portrait__name {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 24px;
    color: #FFFBF7;
  }
  .portrait__role {
    margin: 2px 0 0;
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 251, 247, 0.75);
  }

  /* реплика об основателе — отдельной строкой под композицией */
  .founder-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto 56px;
    padding: 22px 26px;
    background: var(--bg);
    border: 1px solid var(--border-faint);
    border-left: 2px solid var(--gold);
    border-radius: 4px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .founder-note__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-sub);
  }
  .founder-note__arrow { color: var(--gold); font-size: 20px; flex-shrink: 0; }
  @media (hover: hover) {
    .founder-note:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(26, 43, 60, 0.10);
      border-color: rgba(199, 91, 57, .5);
    }
  }

  /* ============ Round 15b: фото мягче — тёплый тон + растворение краёв ============
     Причина «остроты»: холодный зелёный фон снимка спорит с тёплой палитрой,
     плюс жёсткий прямоугольный обрез. Лечим тон-мэппингом и маской. */
  .portrait__figure {
    background: transparent !important;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: visible !important;
  }
  .portrait__frame {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 4px;
    overflow: hidden;
    /* тёплая подложка — просвечивает сквозь растворённые края */
    background:
      radial-gradient(120% 90% at 50% 35%, rgba(199, 91, 57, 0.10), transparent 70%),
      var(--surface);
  }
  .portrait__img {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 16%;
    /* зелёный фон уводим в тёплый, слегка гасим контраст */
    filter: sepia(0.32) saturate(0.82) hue-rotate(-14deg) contrast(0.94) brightness(1.05);
    /* края растворяются, вместо жёсткой рамки */
    -webkit-mask-image:
      radial-gradient(125% 105% at 50% 42%, #000 58%, rgba(0,0,0,0.55) 82%, transparent 100%);
    mask-image:
      radial-gradient(125% 105% at 50% 42%, #000 58%, rgba(0,0,0,0.55) 82%, transparent 100%);
  }

  /* подпись — под фото, без тёмной плашки поверх лица */
  .portrait__caption {
    position: static !important;
    padding: 0 !important;
    background: none !important;
    text-align: center;
  }
  .portrait__label { color: var(--gold); }
  .portrait__name { color: #1A2B3C !important; }
  .portrait__role { color: var(--text-muted) !important; }

  @media (max-width: 999px) {
    .portrait__frame { min-height: 340px; }
  }

  /* ============ Round 15c: без фильтра, кадр выше ============ */
  .portrait__img {
    filter: none !important;               /* убираем sepia/hue-rotate — фото в исходном тоне */
    object-position: center 4% !important; /* голова ближе к верхнему краю */
  }

  /* ============ Round 15d: реально поднимаем голову ============
     Пропорции фото (384×512) и контейнера почти совпадают → при object-fit:cover
     кроп ~20px, и object-position ничего не решал. Увеличиваем кадр по высоте и
     срезаем пустое пространство над головой сверху. Маску переносим на рамку,
     иначе растворение уезжает за пределы видимой области. */
  .portrait__img {
    height: 128% !important;
    top: -22% !important;
    object-position: center top !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .portrait__frame {
    -webkit-mask-image:
      radial-gradient(125% 105% at 50% 42%, #000 58%, rgba(0,0,0,0.55) 82%, transparent 100%);
    mask-image:
      radial-gradient(125% 105% at 50% 42%, #000 58%, rgba(0,0,0,0.55) 82%, transparent 100%);
  }

  /* ============ Round 16: направленные появления в блоке «Почему» ============ */
  .anim {
    opacity: 0;
    transition: opacity .65s cubic-bezier(.22,.61,.36,1),
                transform .65s cubic-bezier(.22,.61,.36,1);
    will-change: transform, opacity;
  }
  .anim--left  { transform: translate3d(-48px, 0, 0); }   /* слева направо */
  .anim--right { transform: translate3d(48px, 0, 0); }    /* справа налево */
  .anim--up    { transform: translate3d(0, 48px, 0); }    /* снизу вверх */
  .anim.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

  @media (prefers-reduced-motion: reduce) {
    .anim { opacity: 1; transform: none; transition: none; }
  }

  /* карточки блока «Почему» — без hover-реакции (они не кликабельны) */
  @media (hover: hover) {
    .stat:hover { border-color: var(--border-faint) !important; transform: none !important; }
  }

  /* языки: крупнее и плотнее — визуальный вес вровень с «1049» и «2020».
     Разделители мельче, иначе строка из 4 кодов не помещается в карточку. */
  .stat__value--langs {
    font-size: clamp(30px, 3.1vw, 44px) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .stat__sep {
    font-size: 0.5em;
    font-weight: 400;
    color: var(--gold);
    padding: 0 0.28em;
    vertical-align: middle;
  }

  /* языки без разделителей — держим ритм за счёт межбуквенного интервала */
  .stat__value--langs {
    font-size: clamp(32px, 3.4vw, 48px) !important;
    letter-spacing: 0.04em;
    word-spacing: 0.22em;
  }

  /* ============ Round 17: отзывы masonry-сеткой (по мотивам Flock Ramp,
     но в тёплой палитре: sand-карточки, терракотовая кавычка) ============ */
  .rv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 8px;
    text-align: left;
  }
  @media (min-width: 720px) { .rv-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) {
    /* masonry: карточки разной высоты кладутся в 3 колонки без «лесенки» */
    .rv-grid {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: masonry;
      align-items: start;
      gap: 24px;
    }
  }

  .rv {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border-faint);
    border-radius: 4px;
  }

  /* крупная кавычка в кружке — акцент из референса, но терракотовый */
  .rv__quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border-faint);
    color: var(--gold);
    flex-shrink: 0;
  }

  .rv__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    quotes: none;
  }
  @media (min-width: 1000px) { .rv__text { font-size: 17px; } }

  .rv__author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
  .rv__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--surface-sunk);
    border: 1px solid var(--border);
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: #1A2B3C;
    flex-shrink: 0;
  }
  .rv__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .rv__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #1A2B3C;
  }
  .rv__src {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
  }
  .rv__glogo { flex-shrink: 0; }

  /* ============ Round 18: форма заявки перед футером (структура Flock Ramp,
     палитра наша: sand-поля на cream, Playfair в заголовке, прямая кнопка) ============ */
  .contact-form {
    padding: 72px 0 88px;
    text-align: center;
  }
  .contact-form__head { max-width: 720px; margin: 0 auto 40px; }
  .contact-form__head .p-label { display: inline-block; margin-bottom: 14px; }
  .contact-form__head h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.18; margin: 0 0 16px; }
  .contact-form__dek { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text-sub); }

  .cform {
    max-width: 860px;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .cform__row { display: grid; grid-template-columns: 1fr; gap: 22px; }
  @media (min-width: 720px) { .cform__row { grid-template-columns: 1fr 1fr; } }

  .cform__field { display: flex; flex-direction: column; gap: 10px; }
  .cform__label {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .cform__req { color: var(--gold); margin-left: 2px; }

  .cform__input {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    transition: border-color .18s ease, background .18s ease;
  }
  .cform__input::placeholder { color: var(--text-dim); }
  .cform__input:hover { border-color: var(--border); background: var(--surface-sunk); }
  .cform__input:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--bg);
    box-shadow: 0 0 0 3px rgba(199, 91, 57, 0.12);
  }
  .cform__textarea { resize: vertical; min-height: 140px; line-height: 1.6; }

  /* select — свой значок вместо системной стрелки */
  .cform__select-wrap { position: relative; display: block; }
  .cform__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    cursor: pointer;
  }
  .cform__select-wrap::after {
    content: '';
    position: absolute;
    right: 18px; top: 50%;
    width: 8px; height: 8px;
    margin-top: -6px;
    border-right: 1.6px solid var(--gold);
    border-bottom: 1.6px solid var(--gold);
    transform: rotate(45deg);
    pointer-events: none;
  }

  /* согласие на обработку данных (RGPD) */
  .cform__consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-sub);
    cursor: pointer;
  }
  .cform__checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px; height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    cursor: pointer;
    position: relative;
    transition: background .15s ease, border-color .15s ease;
  }
  .cform__checkbox:checked { background: var(--gold); border-color: var(--gold); }
  .cform__checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #FFFBF7;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .cform__checkbox:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .cform__consent a { color: var(--gold); }

  .cform__submit {
    width: 100%;
    padding: 20px 32px;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #FFFBF7;
    background: var(--gold);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: filter .18s ease, transform .18s ease;
  }
  .cform__submit:hover { filter: brightness(1.06); transform: translateY(-2px); }
  .cform__submit:focus-visible { outline: 2px solid #1A2B3C; outline-offset: 3px; }

  .cform__alt {
    margin: 0;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
  }
  .cform__alt a { color: var(--gold); }

  @media (max-width: 720px) {
    .contact-form { padding: 48px 0 56px; }
    .cform { gap: 18px; }
  }

  /* honeypot — вне экрана, но не display:none (иначе боты его распознают) */
  .cform__honeypot {
    position: absolute !important;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none;
  }
  .cform__status {
    margin: 0;
    padding: 16px 18px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
  }
  .cform__status--ok {
    background: rgba(138, 154, 91, 0.12);
    border: 1px solid rgba(138, 154, 91, 0.45);
    color: #4d5a2e;
  }
  .cform__status--err {
    background: rgba(199, 91, 57, 0.10);
    border: 1px solid rgba(199, 91, 57, 0.45);
    color: #8f3d22;
  }
  .cform__submit[disabled] { opacity: .6; cursor: progress; transform: none; }

  /* заголовок формы — одной строкой, ниже плашка со скидкой */
  .contact-form__head { max-width: none; }
  .contact-form__h2 {
    white-space: nowrap;
    font-size: clamp(22px, 3.4vw, 46px);
    margin-bottom: 18px !important;
  }
  .contact-form__bonus {
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
    background: var(--gold-tint);
    border: 1px solid rgba(199, 91, 57, 0.35);
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #8f3d22;
  }
  @media (max-width: 600px) {
    .contact-form__bonus { font-size: 13px; padding: 9px 14px; }
  }

  /* На узких экранах строка физически не влезает (507px текста в 375px экрана)
     и рвёт страницу горизонтальным скроллом — там разрешаем перенос. */
  @media (max-width: 760px) {
    .contact-form__h2 { white-space: normal; }
  }

  /* плашку убираем — просто серый текст */
  .contact-form__bonus {
    display: block !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: var(--text-muted) !important;
  }

  /* ============ Фикс горизонтального скролла на мобильном ============
     Кнопка консультации + бургер с подписью «Меню» не помещались в 375px
     и растягивали документ до 424px. Ужимаем шапку, у бургера оставляем иконку. */
  
  /* тикер: 100vw включает ширину скроллбара — на мобильном это давало лишние пиксели */
  .ticker { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  @media (min-width: 1000px) {
    .ticker {
      width: 100vw !important;
      max-width: 100vw !important;
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
    }
  }
  /* Клип живёт на main, а не на html/body. Причина: overflow с html —
     и с body, если у html visible, — распространяется на viewport
     (CSS overflow propagation). В iOS Safari это делает страницу
     скролл-контейнером: адресная строка перестаёт сворачиваться, а
     внизу появляется граница «дна». На main propagation не работает,
     клип обычный. Именно clip, не hidden: hidden убил бы sticky. */
  /* Никаких overflow на main/html/body: на iOS Safari любой такой клип
     рисует светлую плашку под панелью и убивает её прозрачность.
     Горизонтальный вылет лечится точечно у самих виновников. */

  /* скидка в финальном CTA — спокойной строкой, без плашки */
  .final-cta__bonus {
    margin: 12px auto 0 !important;
    max-width: 720px;
    font-size: 16px;
    color: var(--text-muted);
  }

  /* фраза-мостик перед блоком цифр */
  .intro__bridge {
    margin: 0 auto 36px;
    max-width: 900px;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.2;
    color: #1A2B3C;
  }
  @media (min-width: 1000px) { .intro__bridge { margin-bottom: 48px; } }

  /* CTA после отзывов */
  /* Кнопка и приглашение оставить отзыв — в столбик с зазором.
     Раньше здесь стоял ряд без gap: после того как под кнопку добавили ссылку
     «Уже работали с нами?», она встала вплотную и наезжала на кнопку.
     На страницах услуг тот же блок описан в reviews-block.css, здесь — своя
     копия, потому что главная этот файл не подключает. */
  .reviews-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 32px 0 8px;
  }

  /* ============ Round 19: услуги строчным списком (по мотивам Koch Ecommerce,
     палитра наша: sand-полотно, терракотовые иконки, тонкие разделители) ============ */
  .srows {
    background: var(--surface);
    border: 1px solid var(--border-faint);
    border-radius: 4px;
    padding: 8px 0;
    margin-top: 8px;
    text-align: left;
  }
  .srow {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "icon title action" "icon meta action";
    align-items: center;
    column-gap: 18px;
    padding: 20px 26px;
    border-bottom: 1px solid var(--border-faint);
    text-decoration: none;
    color: inherit;
    transition: background .18s ease, padding-left .18s ease;
  }
  .srow:last-child { border-bottom: 0; }
  @media (hover: hover) {
    .srow:hover { background: var(--bg); padding-left: 32px; }
    .srow:hover .srow__action { color: var(--gold); }
    .srow:hover .srow__action svg { transform: translateX(4px); }
  }
  .srow:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

  .srow__icon { grid-area: icon; display: inline-flex; color: var(--gold); }
  .srow__icon svg { width: 26px; height: 26px; }

  .srow__title {
    grid-area: title;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.25;
    color: #1A2B3C;
  }
  .srow__meta {
    grid-area: meta;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
  }
  .srow__action {
    grid-area: action;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color .18s ease;
  }
  .srow__action svg { transition: transform .18s ease; }

  .srows__footer { margin-top: 28px; }
  .srows__all {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
  }
  .srows__all:hover { text-decoration: none; }

  @media (max-width: 640px) {
    .srow {
      grid-template-columns: 36px minmax(0, 1fr);
      grid-template-areas: "icon title" "icon meta" "action action";
      padding: 18px 18px;
      row-gap: 2px;
    }
    .srow__icon svg { width: 22px; height: 22px; }
    .srow__action { margin-top: 10px; font-size: 12px; }
    @media (hover: hover) { .srow:hover { padding-left: 18px; } }
  }
  
  
  

  

  /* строка «Смотреть все услуги» — визуально отделена как переход в каталог */
  .srow--all {
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
  .srow--all .srow__title { font-size: clamp(18px, 2vw, 22px); }
  .srow--all .srow__action { color: var(--gold); }
  /* внутренности аккордеона наследуют форму родителя */
  .faq__q, .faq__a { border-radius: 0 !important; }
  .faq__item > .faq__q { border-radius: 4px 4px 0 0 !important; }
  .faq__item:not([open]) > .faq__q { border-radius: 4px !important; }
  .faq__a { border-radius: 0 0 4px 4px !important; }

  /* — 3. контейнеры иконок и аватары — */
  .rv__quote, .rv__avatar, .guarantee__icon {
    border-radius: 50% !important;
  }
  /* иконке-галочке в гарантиях нужен внутренний воздух под круг */
  .guarantee__icon {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* служебное: skip-link не должен выбиваться */
  .skip-link { border-radius: 0 0 4px 4px !important; }
  /* внешний контейнер cookie-баннера — тоже 4px */
  .cookie-consent { border-radius: 4px !important; }

  /* подпись под фразой-мостиком — без рамки и фона */
  .intro__bridge { margin-bottom: 14px !important; }
  .intro__bridge-sub {
    margin: 0 auto 40px;
    max-width: 720px;
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-sub);
  }
  @media (min-width: 1000px) {
    .intro__bridge-sub { font-size: 17px; margin-bottom: 52px; }
  }

  /* ============ Round 22: процесс — горизонтальная дорожка ============ */
  .steps {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    position: relative;
    text-align: left;
  }
  .step { display: grid; grid-template-columns: 56px 1fr; align-items: start; gap: 16px; }
  .step__dot {
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--border);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
  }
  .step__num {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--gold);
    line-height: 1;
  }
  .step__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-sub);
    align-self: center;
  }

  @media (min-width: 900px) {
    .steps {
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      margin-top: 44px;
    }
    /* Линия набрана отдельными сегментами между соседними кружками, а не
       одной сплошной: сплошная проходила сквозь кружки и наползала на них. */
    .step {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      gap: 18px;
    }
    .step__text { font-size: 15px; max-width: 240px; }
  }

  @media (prefers-reduced-motion: reduce) { .step { opacity: 1; transform: none; } }

  /* ============ Round 23: гарантии — сетка 2×2 с разделителями (по мотивам «The core values») ============ */
  .values {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    max-width: 1100px;
    margin: 0 auto 64px !important;
    position: relative;
  }
  @media (min-width: 800px) {
    .values { grid-template-columns: 1fr 1fr !important; }
    /* вертикаль по центру */
    .values::before {
      content: '';
      position: absolute;
      left: 50%; top: 0; bottom: 0;
      width: 1px;
      background: var(--border-faint);
    }
  }
  .value {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 34px 40px;
    border: 0 !important;
    background: none !important;
    border-radius: 0 !important;
  }
  /* горизонтальные разделители между рядами */
  @media (min-width: 800px) {
    .value:nth-child(1), .value:nth-child(2) {
      border-bottom: 1px solid var(--border-faint) !important;
    }
    .value:nth-child(odd) { padding-left: 0; }
    .value:nth-child(even) { padding-right: 0; padding-left: 56px; }
  }
  @media (max-width: 799px) {
    .value { padding: 26px 0; }
    .value + .value { border-top: 1px solid var(--border-faint) !important; }
  }

  /* Тёплая терракотовая заливка вместо cream+обводка — даёт цветовые якоря
     на песочной подложке, иначе ряд читается плоско. */
  .value__icon {
    width: 52px; height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0;
    background: rgba(199, 91, 57, 0.10);
    color: var(--gold);
    flex-shrink: 0;
  }
  .value__icon svg { width: 24px; height: 24px; }
  .value__title {
    margin: 0 0 8px;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(21px, 2.1vw, 26px);
    line-height: 1.2;
    color: #1A2B3C;
  }
  .value__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-sub);
  }

  /* ============ Round 24: города — слайдер со стрелками (по мотивам «Our locations») ============ */
  .home-coverage { text-align: left !important; }
  .loc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--border-faint);
  }
  .loc-head__text { max-width: 640px; }
  .loc-head .p-label { display: inline-block; margin-bottom: 12px; }
  .loc-head h2 { margin: 0 0 12px; }
  .loc-head .home-coverage__dek { margin: 0; max-width: none; }

  .loc-nav { display: flex; gap: 10px; flex-shrink: 0; }
  .loc-nav__btn {
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    color: #1A2B3C;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
  }
  .loc-nav__btn:hover { background: var(--gold); border-color: var(--gold); color: #FFFBF7; }
  .loc-nav__btn:disabled { opacity: .35; cursor: default; }
  .loc-nav__btn:disabled:hover { background: var(--bg); color: #1A2B3C; border-color: var(--border); }

  .loc-track {
    display: flex;
    gap: 28px;
    overflow-x: auto;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 36px 0 6px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .loc-track::-webkit-scrollbar { display: none; }

  .loc {
    flex: 0 0 min(88%, 520px);
    scroll-snap-align: start;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 22px;
  }
  @media (min-width: 900px) { .loc { flex-basis: calc(50% - 14px); } }

  .loc__media { border-radius: 4px; overflow: hidden; background: var(--surface); }
  .loc__media svg { display: block; width: 100%; height: 260px; }
  .loc__name {
    margin: 0 0 18px;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(28px, 3vw, 40px);
    color: #1A2B3C;
  }
  .loc__label {
    margin: 0 0 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .loc__value { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--text-sub); }
  .loc__link {
    display: inline-block;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
  }
  .loc__link:hover { text-decoration: none; }

  /* ============ Round 26: шаги во всю ширину, без заголовка ============ */
  .intro__how {
    max-width: none !important;
    width: 100vw;
    margin: 0 calc(50% - 50vw) !important;
    padding: clamp(48px, 6vw, 88px) clamp(20px, 5vw, 88px);
  }
  /* заголовок снят — верхний отступ дорожки теперь лишний */
  .intro__how .steps {
    margin-top: 0 !important;
    max-width: 1320px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  @media (min-width: 900px) {
    .intro__how .steps { --g: clamp(28px, 3.5vw, 56px); gap: var(--g); }
    .intro__how .step { position: relative; }
    /* Сегмент живёт в промежутке между двумя кружками и не заходит на них:
       от правого края своего (50% + 28px) до левого края следующего
       (100% + gap + 50% − 28px) ⇒ ширина = 100% + gap − 56px. */
    .intro__how .step::before,
    .intro__how .step::after {
      content: '';
      position: absolute;
      top: 27px;
      left: calc(50% + 28px);
      width: calc(100% + var(--g) - 56px);
      height: 2px;
      z-index: 0;
    }
    .intro__how .step::before { background: var(--border-faint); }
    /* заливка сегмента — свой прогресс 0…1, растёт слева направо */
    /* без transition: значение и так обновляется каждый кадр скролла,
       а переход в .25s заставлял линию догонять курсор и дёргаться */
    .intro__how .step::after {
      background: var(--gold);
      transform: scaleX(var(--seg, 0));
      transform-origin: left center;
      will-change: transform;
    }
    /* у последнего кружка сегмента нет */
    .intro__how .step:last-child::before,
    .intro__how .step:last-child::after { display: none; }
    .intro__how .step__text { max-width: 260px; }
  }

  /* кружки загораются по мере прохождения дорожки */
  .step__dot {
    transition: background .35s ease, border-color .35s ease;
  }
  .step__num { transition: color .35s ease; }
  .step.is-on .step__dot {
    background: var(--gold);
    border-color: var(--gold);
    /* «бульк» — упругий скачок в момент активации, возврат в исходный размер */
    animation: stepPop .55s cubic-bezier(.34, 1.56, .64, 1);
  }
  .step.is-on .step__num { color: #fff; }
  @keyframes stepPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.24); }
    70%  { transform: scale(.95); }
    100% { transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .step__dot, .step__num, .intro__how .step::after { transition: none; }
    .step.is-on .step__dot { animation: none; }
  }

  /* ============ Round 28: вернуть терракоту и объём ============ */
  /* Метрики были navy — на песочных карточках вся секция читалась серой. */
  .stat__value { color: var(--gold); }
  .stat {
    border: 0 !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(45, 45, 45, .04),
                0 10px 28px -14px rgba(45, 45, 45, .14);
  }
  /* тонкий терракотовый кант сверху — деталь, которая держит карточку */
  .stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), rgba(199, 91, 57, .18));
  }
  .stat__label { letter-spacing: .12em; }

  /* Иконки принципов были почти невидимы на песочном фоне */
  .value__icon {
    width: 56px; height: 56px;
    background: rgba(199, 91, 57, .14);
  }
  .value__icon svg { width: 26px; height: 26px; }

  /* Единая черта-акцент под всеми заголовками секций главной. */
  .values__h::after,
  #sec-services > h2::after,
  #sec-reviews > h2::after,
  .home-guides > h2::after,
  #sec-coverage h2::after,
  .home-faq h2::after,
  .intro__how > h2::after,
  .final-cta > h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 2px;
    margin: 18px 0 0;
    background: var(--gold);
  }
  /* заголовок философии и «Как мы работаем» центрированы всегда (их секции
     центрированы на любой ширине), остальные — с десктопа */
  .values__h::after,
  .intro__how > h2::after { margin-left: auto; margin-right: auto; }
  @media (min-width: 1000px) {
    #sec-services > h2::after,
    #sec-reviews > h2::after,
    .home-guides > h2::after,
    #sec-coverage h2::after,
    .home-faq h2::after,
    .final-cta > h2::after { margin-left: auto; margin-right: auto; }
  }
  /* в финальном CTA фон тёмный — черта берёт цвет текста */
  .final-cta > h2::after { background: currentColor; opacity: .5; }
  /* Заголовки секций на мобиле стоят по левому краю, и черта под ними —
     тоже слева. Финальный CTA центрирован на любой ширине, поэтому черта
     под ним висела слева от заголовка и выглядела сбитой. */
  .final-cta > h2::after { margin-left: auto; margin-right: auto; }

  /* ============ Round 25: гарантии во всю ширину экрана ============ */
  /* Заголовок остаётся на фоне страницы и работает как анонс: песочная
     секция начинается уже под ним — «эта секция будет про…». */
  .values__h {
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 72px) 20px clamp(22px, 3vw, 34px);
    background: none;
    text-align: center;
    font-size: 36px;
    line-height: 1.18;
  }
  @media (min-width: 1000px) { .values__h { font-size: 42px; } }
  .values {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 0 !important;
    background: var(--surface);
    border-top: 1px solid var(--border-faint);
    border-bottom: 1px solid var(--border-faint);
  }
  /* внешние поля создаём паддингом ячеек, чтобы фон шёл до краёв */
  @media (min-width: 800px) {
    .value {
      min-height: 260px;
      padding: 56px clamp(24px, 4.5vw, 88px) !important;
      align-content: center;
    }
    /* вертикальный разделитель по центру уже есть у .values::before */
    .value:nth-child(odd)  { padding-right: 56px !important; }
    .value:nth-child(even) { padding-left: 56px !important; }
  }
  @media (min-width: 1400px) {
    .value { min-height: 300px; padding-top: 64px !important; padding-bottom: 64px !important; }
  }
  /* текст не растягиваем на весь экран — иначе строки нечитаемо длинные */
  .value__body { max-width: 560px; }

  @media (max-width: 799px) {
    .value { padding: 30px clamp(20px, 6vw, 32px) !important; }
  }

  /* отступ до следующего блока вернём секции */
  /* .intro, а не #sec-intro: философия с шагами переехала в отдельную
     секцию .intro--flow, когда услуги подняли выше по странице. */
  .intro .values + * { margin-top: 64px; }
  /* у второй половины свой заголовок с паддингом — верхний отступ секции
     и её граница дублировали бы разделитель после блока услуг */
  .intro--flow {
    border-top: 0;
    padding-top: clamp(16px, 2vw, 32px);
  }

  /* ============ Round 26: возврат ритма терракоты и песочного ============
     Диагноз: 4 секции подряд шли на голом cream (услуги → отзывы → гайды →
     города) — палитра «размылась». Плюс финальный CTA был на #F0E8DD,
     которого нет в палитре. Возвращаем чередование фонов и акценты. */

  /* 1. финальный CTA — в палитру, на песочный из токенов */
  .final-cta {
    background: var(--surface) !important;
    border-top: 1px solid var(--border-faint);
    border-bottom: 1px solid var(--border-faint);
  }

  /* 2. отзывы — песочная подложка во всю ширину, чтобы разбить череду cream */
  #sec-reviews {
    background: var(--surface-sunk);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: clamp(24px, 4.5vw, 88px);
    padding-right: clamp(24px, 4.5vw, 88px);
    border-top: 1px solid var(--border-faint);
    border-bottom: 1px solid var(--border-faint);
  }
  /* карточки на песочном фоне поднимаем до cream — иначе сливаются */
  #sec-reviews .rv { background: var(--bg); }
  #sec-reviews .rv__quote { background: var(--surface); }

  /* 3. терракота в акцентах, где её не хватало */
  .p-label { color: var(--gold); }                    /* надзаголовки секций */
  .rv__avatar { color: var(--gold); }                 /* инициал в отзыве */
  .loc__media { border: 1px solid var(--border-faint); }
  .stat__label { color: var(--text-muted); }

  /* 4. активная стрелка слайдера — терракотовая, а не серая */
  .loc-nav__btn:not(:disabled) { border-color: var(--gold); color: var(--gold); }
  .loc-nav__btn:not(:disabled):hover { background: var(--gold); color: #FFFBF7; }

  /* ============ Round 29: зебра секций + единый вертикальный ритм ============
     Смысловые блоки разделяет чередование фона, а не линии, поэтому границы
     у полос сняты. Полоса = full-bleed фон на всю ширину окна.
     Порядок сверху вниз:
       hero cream · лента sand · знакомство cream · услуги SAND ·
       философия (заголовок cream → карточки sand) · шаги cream ·
       отзывы SAND · гайды cream · города SAND · вопросы cream · CTA sand   */

  :root { --sec-pad: clamp(52px, 6vw, 92px); }

  /* — полосы: цвет хедера (--surface-sunk #EFE7DA), одна механика full-bleed.
       Карточки внутри остаются на --surface #F5F0EB и потому всплывают. — */
  #sec-services,
  #sec-coverage,
  #sec-reviews {
    background: var(--surface-sunk);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: clamp(24px, 4.5vw, 88px);
    padding-right: clamp(24px, 4.5vw, 88px);
  }

  /* — границы больше не нужны: разделяет сам фон — */
  #sec-reviews,
  .final-cta,
  .marquee,
  .intro,
  .values {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  /* — единый вертикальный ритм у всех секций — */
  #sec-intro,
  #sec-services,
  #sec-reviews,
  .home-guides,
  #sec-coverage,
  .home-faq,
  .final-cta {
    padding-top: var(--sec-pad) !important;
    padding-bottom: var(--sec-pad) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Философия: свой отступ даёт заголовок, секции хватает половины ритма.
     Шаги — тоже полоса, её паддинг уже задан в Round 26. */
  .intro--flow {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .values__h { padding-top: var(--sec-pad); }
  .intro__how { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }

  /* ============ Round 30: зебра по смысловым блокам ============
     Правило: заголовок ВСЕГДА лежит внутри своей полосы, а не над ней.
     Раньше «Философия работы» висела на cream, а её карточки были на sunk —
     отсюда ощущение, что часть заголовков «без фона».

       hero cream · лента SUNK · знакомство cream · Популярное SUNK ·
       Философия cream · Как мы работаем SUNK · Отзывы cream ·
       Гайды SUNK · Города cream · Вопросы SUNK · CTA cream            */

  /* — полосы цвета хедера — */
  .marquee, .ticker,
  #sec-services,
  .intro__how,
  .home-guides,
  .home-faq {
    background: var(--surface-sunk) !important;
  }
  /* — промежутки на cream — */
  #sec-reviews,
  #sec-coverage,
  .final-cta,
  .values {
    background: var(--bg) !important;
  }

  /* full-bleed для полос, у которых его ещё не было */
  .home-guides,
  .home-faq,
  .final-cta {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: clamp(24px, 4.5vw, 88px);
    padding-right: clamp(24px, 4.5vw, 88px);
  }
  /* у CTA из module-process.css рамка со ВСЕХ сторон + скругление: снятия
     border-top/bottom мало, по бокам оставались вертикальные полоски */
  .final-cta {
    border: 0 !important;
    border-radius: 0 !important;
  }

  /* Философия целиком на cream: заголовок и карточки в одной полосе */
  .intro--flow { background: var(--bg); }
  .values__h { padding-bottom: clamp(24px, 3vw, 40px); }

  /* Карточки — на --surface: светлее sunk-полос и темнее cream-промежутков,
     поэтому читаются на любом фоне зебры. */
  .rv, .card, .faq__item, .loc { background: var(--surface); }

  /* ============ Round 31: строка услуги всплывает при наведении ============
     Было: сдвиг padding-left — строка «прыгала» и ломала сетку.
     Стало: подъём + лёгкое увеличение на мягкой пружине, строка отрывается
     от списка тенью и скруглением, соседние строки не двигаются. */
  .srow {
    position: relative;
    z-index: 0;
    border-radius: 6px;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1),
                box-shadow .32s cubic-bezier(.22, 1, .36, 1),
                background-color .25s ease,
                border-color .25s ease;
  }
  .srow__icon { transition: transform .32s cubic-bezier(.22, 1, .36, 1); }

  @media (hover: hover) {
    .srow:hover {
      padding-left: 26px;                 /* гасим прежний сдвиг влево */
      transform: translateY(-4px) scale(1.015);
      background: var(--bg);
      box-shadow: 0 22px 44px -20px rgba(45, 45, 45, .30),
                  0 3px 10px rgba(45, 45, 45, .06);
      border-bottom-color: transparent;   /* линия резала бы поднятую строку */
      z-index: 3;
    }
    .srow:hover .srow__icon { transform: scale(1.12); }
    /* глобальный a:hover подчёркивает весь текст строки — гасим */
    .srow:hover .srow__title,
    .srow:hover .srow__meta,
    .srow:hover .srow__action { text-decoration: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .srow, .srow__icon { transition: none; }
    .srow:hover { transform: none; }
  }

  /* ============ Round 32: FAQ — две колонки, список без карточек ============
     По мотивам 1inch Questions/Answers: заголовок закреплён слева, вопросы
     идут справа чистым списком с терракотовым «+», который при раскрытии
     превращается в «−». Палитра и Playfair — наши. */

  /* список, а не набор плашек */
  .home-faq .faq__item {
    background: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-faint) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .home-faq .faq__item:last-child { border-bottom: 0 !important; }

  /* Селектор с summary — в module-process.css лежит `.faq__item > summary.faq__q`
     (специфичность 0,2,1), которое перебивало и размер, и паддинги. */
  .home-faq .faq__list { gap: 0 !important; }   /* gap рвал линию разделителей */
  .home-faq .faq__item > summary.faq__q {
    position: relative;
    display: block;
    padding: 26px 46px 26px 0 !important;   /* маркер справа */
    font-family: 'Playfair Display', serif !important;
    font-weight: 500 !important;
    font-size: clamp(20px, 1.9vw, 27px) !important;
    line-height: 1.35;
    color: #1A2B3C;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    list-style: none;
    text-align: left;
  }
  .home-faq .faq__q::-webkit-details-marker { display: none; }
  .home-faq .faq__q::marker { content: ''; }

  /* «+» из двух линий: вертикаль схлопывается — получается «−» */
  /* Маркер: две ОДИНАКОВЫЕ горизонтальные линии, вторая повёрнута на 90° —
     центры совпадают автоматически. Прежний вариант (горизонталь + отдельная
     вертикаль со своим margin-top) смешивался с боевым `translateY(-50%)`
     у `.faq__q::after` и давал «⊥» вместо «+». */
  .home-faq .faq__item > summary.faq__q::before,
  .home-faq .faq__item > summary.faq__q::after {
    content: '' !important;
    left: auto !important;
    right: 0;
    position: absolute;
    top: calc(26px + 0.675em);          /* центр первой строки */
    width: 22px;
    height: 1.8px;
    margin: 0 !important;
    background: var(--gold);
    transform: translateY(-50%);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  }
  .home-faq .faq__item > summary.faq__q::after {
    transform: translateY(-50%) rotate(90deg);
  }
  .home-faq .faq__item[open] > summary.faq__q::after {
    transform: translateY(-50%) rotate(90deg) scaleX(0);
  }

  /* ответ — просто текст: в module-process.css у него фон, рамка и скругление */
  .home-faq .faq__item > .faq__a {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 46px 30px 0;   /* выровнен с вопросом: маркер уехал вправо */
    margin: 0 !important;
    overflow: hidden;
    text-align: left;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.7;
    color: var(--text-sub);
    max-width: none;      /* во всю ширину колонки — до линии-разделителя */
  }

  /* две колонки: заголовок слева, вопросы справа */
  @media (min-width: 900px) {
    .home-faq .faq {
      display: grid;
      grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.5fr);
      gap: clamp(32px, 5vw, 88px);
      align-items: start;
      text-align: left;
      max-width: 1320px;
      margin: 0 auto;
    }
    /* липкость убрана: колонка коротка, а список вопросов при закрытых
       ответах ненамного выше — залипание давало только рывок под шапкой */
    .home-faq .faq__aside { position: static; }
    .home-faq .faq > .faq__aside h2 { margin: 0; text-align: left; }
    .home-faq .faq h2::after { margin-left: 0; margin-right: 0; }
    .home-faq .faq__list { margin: 0; max-width: none; }
  }

  /* левая колонка: подводка + кнопка связи */
  .home-faq .faq__dek {
    margin: 22px 0 0;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.7;
    color: var(--text-sub);
    max-width: 44ch;
    text-align: left;
  }
  .home-faq .faq__cta {
    display: inline-flex;
    margin-top: 28px;
  }
  /* Колонка по ширине кнопки: ссылка снизу центрируется относительно неё,
     а не относительно всей левой колонки. */
  .home-faq .faq__actions {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }
  /* Второстепенная ссылка под кнопкой: без рамки и фона, приглушена — не
     спорит с основным действием, но остаётся кликабельной. */
  .home-faq .faq__more {
    margin-top: 14px;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-sub);
    opacity: .55;
    border-bottom: none;
    text-decoration: none;
    transition: opacity .2s ease, color .2s ease;
  }
  .home-faq .faq__more:hover,
  .home-faq .faq__more:focus-visible {
    opacity: 1;
    color: var(--gold);
    text-decoration: none;
    border-bottom: none;
  }

  /* ============ Round 34: гайды — карточки с обложкой ============
     По мотивам «All posts»: медиа сверху, заголовок, описание, «Читать →».
     Фотографий к статьям нет (у всех один og-логотип), поэтому обложка
     графическая: ромб из hero + тематическая иконка. */
  .home-guides .gcards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
    text-align: left;
  }
  @media (min-width: 760px) { .home-guides .gcards { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1060px) { .home-guides .gcards { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

  .home-guides .gcard {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--border-faint);
    border-radius: 4px;
    padding: clamp(30px, 2.8vw, 44px);
    min-height: clamp(300px, 26vh, 380px);
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 0;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1),
                box-shadow .32s cubic-bezier(.22, 1, .36, 1);
  }
  .home-guides .gcard__title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(22px, 1.95vw, 28px);
    line-height: 1.24;
    color: #1A2B3C;
  }
  .home-guides .gcard__dek {
    margin: 18px 0 30px;
    font-size: clamp(15px, 1.1vw, 16px);
    line-height: 1.7;
    color: var(--text-sub);
  }
  /* «Читать» — визуально кнопка, но остаётся span: вся карточка уже <a>,
     вложенная ссылка/кнопка внутри ссылки невалидна */
  .home-guides .gcard__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: auto;
    padding: 13px 22px;
    border: 1px solid var(--gold);
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    transition: background-color .25s ease, color .25s ease;
  }
  .home-guides .gcard__more svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }

  @media (hover: hover) {
    .home-guides .gcard:hover {
      transform: translateY(-5px);
      box-shadow: 0 24px 48px -22px rgba(45, 45, 45, .32),
                  0 3px 10px rgba(45, 45, 45, .05);
      z-index: 2;
    }
    .home-guides .gcard:hover .gcard__more {
      background: var(--gold);
      color: #FFFBF7;
    }
    .home-guides .gcard:hover .gcard__more svg { transform: translateX(5px); }
    .home-guides .gcard:hover .gcard__title { text-decoration: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .home-guides .gcard,
    .home-guides .gcard__more,
    .home-guides .gcard__more svg { transition: none; }
    .home-guides .gcard:hover { transform: none; }
  }

  .home-guides .gcards__foot { margin-top: 40px; text-align: center; }

  /* ============ Round 45: шаги — заголовок и содержание ============
     Секция была единственной без заголовка, а четыре коротких фразы плавали
     в пустой полосе. Возвращаем связку «заголовок + подзаголовок», как у
     остальных, и даём каждому шагу вторую строку с конкретикой. */
  .intro__how h2 { margin: 0; }
  .intro__how .sec-dek { margin: 20px auto 0; }
  .intro__how .steps { margin-top: clamp(40px, 4.5vw, 64px) !important; }

  .intro__how .step__text {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.25;
    color: #1A2B3C;
    max-width: 260px;
  }
  .intro__how .step__note {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-sub);
    max-width: 260px;
  }
  @media (max-width: 899px) {
    .intro__how .step__text,
    .intro__how .step__note { max-width: none; }
    .intro__how .step__note { grid-column: 2; }
  }

  /* ============ Round 43: отзывы — слайдер карточек ============
     По мотивам Bobbin: карточки в ряд, крайняя подрезана краем экрана и
     намекает на продолжение; круглые стрелки поверх; плашка рейтинга уехала
     вниз под ленту, как итог блока. */
  /* По мотивам Les Amis: один отзыв за раз во всю ширину, крупной цитатой.
     Три коротких отзыва в ряд выглядели мелко и не читались как аргумент —
     поштучно каждый получает вес. */
  #sec-reviews .rv-wrap {
    position: relative;
    margin-top: 48px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(56px, 7vw, 96px);   /* место под стрелки по бокам */
  }

  #sec-reviews .rv-track {
    display: flex;
    gap: 0;
    overflow-x: auto;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #sec-reviews .rv-track::-webkit-scrollbar { display: none; }

  #sec-reviews .rv {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0;
    text-align: center;
    transform: none !important;
    box-shadow: none !important;
  }

  /* инициалы вместо аватара — фотографий клиентов у нас нет */
  #sec-reviews .rv__quote {
    order: -1;
    width: 74px; height: 74px;
    margin: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface) !important;
    color: var(--gold);
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 26px;
    letter-spacing: .02em;
    line-height: 1;
  }

  #sec-reviews .rv__text {
    margin: 0;
    max-width: 900px;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(20px, 2.1vw, 30px);
    line-height: 1.42;
    color: #1A2B3C;
  }
  #sec-reviews .rv__author {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  #sec-reviews .rv__avatar { display: none; }   /* инициал уже сверху */
  #sec-reviews .rv__meta { align-items: center; text-align: center; }
  #sec-reviews .rv__name { font-size: 17px; font-weight: 600; color: #1A2B3C; }
  #sec-reviews .rv__src { justify-content: center; }

  /* круглые стрелки поверх ленты */
  #sec-reviews .rv-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-faint);
    border-radius: 50% !important;
    background: var(--surface);
    color: #1A2B3C;
    cursor: pointer;
    box-shadow: none;
    transition: opacity .25s ease, background-color .25s ease, color .25s ease;
  }
  #sec-reviews .rv-nav--prev { left: 0; }
  #sec-reviews .rv-nav--next { right: 0; }
  #sec-reviews .rv-nav:disabled { opacity: .3; pointer-events: none; }
  @media (hover: hover) {
    #sec-reviews .rv-nav:not(:disabled):hover {
      background: var(--gold);
      border-color: var(--gold);
      color: #FFFBF7;
    }
  }
  @media (max-width: 999px) { #sec-reviews .rv-nav { display: none; } }

  /* рейтинг — итоговой плашкой под лентой */
  #sec-reviews .reviews-rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 40px auto 0;
    padding: 14px 28px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 15px;
    color: var(--text-sub);
  }
  #sec-reviews .reviews-cta { margin-top: 32px; }

  /* ============ Round 42: единый вертикальный ритм ============
     Правило: у КАЖДОЙ полосы верхний отступ равен нижнему и равен --sec-pad.
     Нарушители, найденные аудитом:
       • .intro задавал 56px сверху / 64px снизу;
       • между карточками принципов и шагами висел лишний margin 64px,
         хотя полосы уже разделены сменой фона;
       • .final-cta нёс padding 88/64 из module-process.css. */

  #sec-intro,
  #sec-services,
  #sec-reviews,
  .home-guides,
  #sec-coverage,
  .home-faq,
  .final-cta,
  .intro,
  .intro__how {
    padding-top: var(--sec-pad) !important;
    padding-bottom: var(--sec-pad) !important;
  }
  /* и margin у самого CTA из module-process.css — ритм задаёт только padding */
  .final-cta { margin-top: 0 !important; margin-bottom: 0 !important; }

  /* ============ Round 47: интерактивная карта Испании ============
     Вместо слайдера карточек — контур страны с пульсирующими точками в шести
     городах. Клик по точке открывает панель с деталями. Контур построен по
     реальным координатам побережья, точки — по широте/долготе городов. */
  .map-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 44px;
    align-items: center;
  }
  @media (min-width: 1000px) {
    .map-wrap { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: clamp(32px, 4vw, 72px); }
  }

  .map-stage {
    position: relative;
    transform: translate3d(0, var(--par, 0px), 0);
    will-change: transform;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
  }
  /* Смещение за курсором сглаживается покадрово в JS, поэтому transition тут
     не нужен: с ним каждое движение мыши перезапускало анимацию и ход выходил
     резиновым, с рывками. 3D-поворот убран намеренно — Safari растрирует SVG
     в перспективе, и карта дёргалась вместе с подписями. */
  .map {
    width: 100%; height: auto; display: block; overflow: visible;
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  }
  @media (prefers-reduced-motion: reduce) { .map { transform: none; transition: none; } }

  /* ===== Окружение суши: контекст без единого движущегося пикселя ===== */

  .map__isle { fill: url(#mapFill); stroke: var(--gold); stroke-width: 1.6; opacity: .55; }

  /* Передний план смещается сильнее фона — глубина набирается разной
     скоростью слоёв, а не поворотом в перспективе. */
  .map__fore { transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0); }

  /* ===== Города-спутники выбранной провинции ===== */
  .map__sat { opacity: 0; pointer-events: none; transition: opacity .45s ease; }
  .map__sat.is-on { opacity: 1; }
  .map__sat circle { fill: var(--gold-2); opacity: .5; }
  /* появляются лесенкой, вслед за обводкой провинции */
  .map__sat.is-on:nth-of-type(3n+1) { transition-delay: .15s; }
  .map__sat.is-on:nth-of-type(3n+2) { transition-delay: .28s; }
  .map__sat.is-on:nth-of-type(3n+3) { transition-delay: .41s; }

  /* ===== Расстояния вдоль лучей ===== */
  .map__dist {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 500;
    fill: var(--text-sub);
    text-anchor: middle;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
  }
  .map__dist.is-on { opacity: .6; }

  /* ===== Аликанте — база сети ===== */
  .map__base {
    fill: none;
    stroke: var(--gold-2);
    stroke-width: 1.4;
    stroke-dasharray: 3 5;
    opacity: .5;
  }

  .map__land {
    fill: url(#mapFill);
    stroke: var(--gold);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    /* мягкий ореол по периметру вместо контуров-эха: море читается, линий нет */
    filter: drop-shadow(0 18px 34px rgba(45, 45, 45, .10))
            drop-shadow(0 0 14px rgba(199, 91, 57, .16));
  }

  /* Контур прорисовывается при въезде секции в экран: длина пути задана с
     запасом, анимируем смещение штриха. Точки проявляются следом. */
  .home-coverage .map__land {
    stroke-dasharray: 3400;
    stroke-dashoffset: 3400;
  }
  .home-coverage.is-visible .map__land { animation: mapDraw 1.8s cubic-bezier(.55, 0, .25, 1) forwards; }
  @keyframes mapDraw { to { stroke-dashoffset: 0; } }

  .home-coverage .map__pin { opacity: 0; }
  /* Задержки привязаны к городу, а не к порядку в DOM: группа провинций
     заняла nth-of-type(1), точки сместились на 2…7, и последняя оставалась
     без задержки — появлялась раньше, чем прочерчивался контур страны. */
  .home-coverage.is-visible .map__pin { animation: mapPinIn .5s cubic-bezier(.22, 1, .36, 1) forwards; }
  /* Контур рисуется 1.8s — раньше этого ни одна точка не появляется. */
  .home-coverage.is-visible .map__pin[data-city="alicante"]  { animation-delay: 1.8s; }
  .home-coverage.is-visible .map__pin[data-city="valencia"]  { animation-delay: 1.95s; }
  .home-coverage.is-visible .map__pin[data-city="murcia"]    { animation-delay: 2.1s; }
  .home-coverage.is-visible .map__pin[data-city="madrid"]    { animation-delay: 2.25s; }
  .home-coverage.is-visible .map__pin[data-city="barcelona"] { animation-delay: 2.4s; }
  .home-coverage.is-visible .map__pin[data-city="malaga"]    { animation-delay: 2.55s; }
  /* только opacity: у точек позиция задана атрибутом transform="translate(x,y)",
     и анимация transform сбила бы их в угол карты */
  @keyframes mapPinIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Провинция выбранного города: заливка проявляется, обводка прочерчивается
     по контуру. Лежит под точками, поэтому клики по ним не перехватывает. */
  .map__prov {
    fill: rgba(199, 91, 57, .12);
    stroke: var(--gold-2);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  .map__prov.is-on {
    opacity: 1;
    animation: provDraw 1.1s cubic-bezier(.55, 0, .25, 1) forwards;
  }
  @keyframes provDraw { to { stroke-dashoffset: 0; } }

  /* Заслонка на время вступления. Раньше классов было два и их таймеры
     отсчитывались от загрузки страницы, а контур — от появления секции в
     экране: при заходе сверху вступление успевало отыграть в невидимой
     секции. Теперь один класс, и снимает его та же партитура, что запускает
     отрисовку контура. */
  .home-coverage.is-hold .map__ray,
  .home-coverage.is-hold .map__prov { opacity: 0 !important; animation: none !important; }
  /* Спутники ждут дольше остальных: они деталь провинции, а не карты, и
     проступают, когда её обводка уже прочерчена. Класс снимается один раз —
     при переключении городов спутники появляются сразу. */
  .home-coverage.is-sat-hold .map__sat { opacity: 0 !important; transition: none !important; }
  .map__ray.is-live { transition: opacity .55s ease; }

  .map__pin { cursor: pointer; outline: none; }
  .map__halo { fill: transparent; }          /* увеличенная зона клика */
  .map__dot  { fill: var(--gold); }
  /* Кольцо не «дышит» само — оно расходится в тот момент, когда до города
     дошла волна по лучу. Пульс вешает JS, покадрово отслеживая волну. */
  .map__pulse {
    fill: var(--gold);
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
  }
  @keyframes mapPulse {
    0%   { transform: scale(.5); opacity: .5; }
    75%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
  }

  .map__label {
    font-family: 'Manrope', sans-serif;
    font-size: 21px;
    font-weight: 600;
    fill: var(--text-sub);
    text-anchor: middle;
    pointer-events: none;
    transition: fill .25s ease;
  }

  .map__pin:hover .map__dot,
  .map__pin:focus-visible .map__dot { r: 9; }
  .map__pin:hover .map__label,
  .map__pin:focus-visible .map__label { fill: #1A2B3C; }
  /* активный город виден издалека: точка крупнее, темнее и в светлом кольце */
  .map__dot { transition: r .3s cubic-bezier(.22, 1, .36, 1), fill .3s ease; }
  .map__pin.is-active .map__dot { fill: var(--gold-2); r: 13; }
  .map__pin.is-active .map__halo { fill: rgba(199, 91, 57, .16); }
  .map__pin.is-active .map__label { fill: #1A2B3C; font-size: 24px; }
  .map__label { transition: fill .25s ease, font-size .25s ease; }
  .map__pin:focus-visible .map__halo { fill: rgba(199, 91, 57, .14); }

  /* раскладка: слева заголовок с описанием, справа карта */
  .map-wrap { align-items: center; }
  @media (min-width: 1000px) {
    /* карта слева, текст со списком справа */
    .map-wrap { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); }
    .map-stage { grid-column: 1; grid-row: 1; }
    .map-intro { grid-column: 2; grid-row: 1; }
  }
  /* заголовок с описанием — по центру над картой */
  .map-head { text-align: center; max-width: 760px; margin: 0 auto; }
  .map-head h2 { margin: 0; }
  .map-head .home-coverage__dek { margin: 20px auto 0; max-width: 62ch; }
  .map-intro { text-align: left; }

  /* Карточка одного города. Высота фиксирована под самый длинный вариант —
     при переключении колонка не прыгает. */
  .city { margin-top: 30px; display: flex; flex-direction: column; }
  /* Ни рамки, ни подложки: город подаётся свободным текстом — так же, как
     отзыв. И листается так же: горизонтальной лентой со снапом, а не
     подменой карточки со всплытием снизу. */
  .city__body { position: relative; }
  .city__track {
    display: flex;
    overflow-x: auto;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .city__track::-webkit-scrollbar { display: none; }
  .city__card {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    /* карточки растянуты по высоте ленты, ссылка прижата к низу — иначе она
       вставала сразу за абзацем и прыгала по высоте от города к городу */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  @media (prefers-reduced-motion: reduce) {
    .city__track { scroll-behavior: auto; }
  }

  .city__name {
    margin: 0 0 16px;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(30px, 2.8vw, 40px);
    line-height: 1.1;
    color: #1A2B3C;
  }
  .city__lead {
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
  }
  @media (min-width: 1000px) { .city__lead { font-size: 17px; } }

  .city__link {
    margin-top: auto;
    display: inline-block;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--gold);
  }

  /* Стрелки по бокам карточки — как в отзывах: левая гаснет на первом
     городе, правая на последнем. */
  .city { position: relative; padding: 0 clamp(52px, 5vw, 68px); }
  .city__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 46px; height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-faint);
    border-radius: 50% !important;
    background: var(--surface);
    color: #1A2B3C;
    cursor: pointer;
    transition: opacity .25s ease, background-color .25s ease,
                border-color .25s ease, color .25s ease;
  }
  #city-prev { left: 0; }
  #city-next { right: 0; }
  /* Как в отзывах: на крайнем городе стрелка не исчезает, а гаснет —
     иначе кнопка пропадает и композиция прыгает. */
  .city__btn:disabled { opacity: .3; pointer-events: none; }
  @media (hover: hover) {
    .city__btn:not(:disabled):hover {
      background: var(--gold);
      border-color: var(--gold);
      color: #FFFBF7;
    }
  }
  @media (max-width: 599px) {
    .city { padding: 0; }
    .city__btn { position: static; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .map__pulse { animation: none; opacity: 0; }
    .map-card { animation: none; }
    /* reveal-скрипт при reduce не вешает is-visible — без этого контур
       остался бы недорисованным, а точки невидимыми */
    .home-coverage .map__land { stroke-dasharray: none; stroke-dashoffset: 0; }
    .home-coverage .map__pin { opacity: 1; animation: none; }
    /* обводка провинции тоже осталась бы недочерченной */
    .map__prov { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
    .map__prov.is-on { animation: none; }
  }

  /* ============ Round 48: карта — тёмная сцена, лучи, коридор, зоны ============
     Секция инвертирована: navy-полотно, карта светится терракотом. Внутри
     четыре слоя поверх контура — поток документов из Украины, зоны выезда
     со спутниками, лучи между городами и сами точки. */

  /* Секция вернулась в светлую палитру: тёмное полотно выбивалось из
     страницы сильнее, чем работало на акцент. Лучи остаются. */

  /* — лучи между городами: от активного расходятся бегущим пунктиром — */
  /* Луч — сплошная линия: прочерчивается от активного города к соседнему.
     Длина пути измеряется в JS и кладётся в --len. */
  /* Луч: сплошная тусклая линия, по которой бежит светлое пятно —
     градиент stroke="url(#ray-…)", стопы двигает покадрово JS. Так момент
     прилёта волны известен точно, и пульс города вешается ровно на него,
     а не на параллельный таймер, который дрейфует. */
  .map__ray {
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
    stroke-dasharray: var(--len, 400);
    stroke-dashoffset: var(--len, 400);
    transition: opacity .25s ease;
  }
  .map__ray.is-live {
    opacity: 1;
    /* линии прокладываются по очереди; импульсы пойдут по ним следом, залпом */
    animation: rayShoot .9s cubic-bezier(.35, 0, .2, 1) forwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes rayShoot { to { stroke-dashoffset: 0; } }

  /* Вспышка города. Класс перевешивается на каждом приходе волны, поэтому
     анимация одноразовая: город молчит, пока импульс до него не дошёл. */
  .map__pin.is-hit .map__dot   { animation: dotHit .8s cubic-bezier(.22, 1, .36, 1); }
  .map__pin.is-hit .map__pulse { animation: mapPulse 1.1s cubic-bezier(.22, 1, .36, 1); }
  /* у активного города точка крупнее — своя амплитуда, иначе вспышка «схлопывает» её */
  .map__pin.is-active.is-hit .map__dot { animation: dotHitActive .8s cubic-bezier(.22, 1, .36, 1); }
  @keyframes dotHit {
    0%   { r: 7;    fill: var(--gold); }
    22%  { r: 12.5; fill: var(--gold-2); }
    100% { r: 7;    fill: var(--gold); }
  }
  @keyframes dotHitActive {
    0%   { r: 13; }
    22%  { r: 18; }
    100% { r: 13; }
  }

  @media (prefers-reduced-motion: reduce) {
    .map__ray.is-live { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  }

  /* ============ Round 46: зебра пересобрана под новый порядок ============
     Города переехали выше (сразу после «Популярного»), гайды — ниже отзывов.
     Фоны привязаны к селекторам, а не к позиции, поэтому чередование сбилось:
     города и философия оказались двумя cream подряд, гайды и вопросы — двумя
     песочными. Переназначаем по новой последовательности:

       hero cream · лента SUNK · знакомство cream · Популярное SUNK ·
       Города cream · Философия SUNK · Как работаем cream · Отзывы SUNK ·
       Гайды cream · Вопросы SUNK · CTA cream                              */

  .values__h, .sec-dek--values, .values,
  #sec-reviews {
    background: var(--surface-sunk) !important;
  }
  .intro__how,
  .home-guides {
    background: var(--bg) !important;
  }
  /* заголовок философии теперь часть песочной полосы — растягиваем его,
     иначе фон лёг бы только под текстом шириной 780px */
  .values__h, .sec-dek--values {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: clamp(24px, 4.5vw, 88px);
    padding-right: clamp(24px, 4.5vw, 88px);
  }
  /* Подзаголовок — часть песочной полосы. Тянем фон во всю ширину, а текст
     держим узкой колонкой боковыми паддингами: сам <p> текстовый, обернуть
     его в контейнер без правки разметки нельзя. !important — ниже по файлу
     общее правило .sec-dek задаёт max-width 680px и обрезало бы полосу. */
  .sec-dek--values {
    /* полоса во всю ширину, но текст внутри идёт по центру — как заголовок
       «Философия работы» над ней */
    text-align: center;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 calc(50% - 50vw) !important;
    padding-top: 0 !important;
    padding-bottom: clamp(28px, 3.4vw, 44px) !important;
    padding-left: max(clamp(24px, 4.5vw, 88px), calc((100vw - 680px) / 2)) !important;
    padding-right: max(clamp(24px, 4.5vw, 88px), calc((100vw - 680px) / 2)) !important;
  }

  /* Философия — одна полоса: открывает заголовок, закрывают карточки.
     Секция-обёртка отступов не несёт, иначе они удвоятся. */
  .intro--flow { padding-top: 0 !important; padding-bottom: 0 !important; }
  .values__h { padding-top: var(--sec-pad) !important; }
  .intro .values + * { margin-top: 0 !important; }
  /* низ полосы задают внутренние паддинги нижних карточек (56px на десктопе,
     30px на мобильном) — добираем недостающее, чтобы низ совпал с верхом */
  /* Полный отступ, без вычитания внутренних паддингов ячеек: вычитание
     оставляло под нижним рядом всего ~36px, и полоса читалась обрезанной. */
  .values { padding-bottom: var(--sec-pad) !important; }
  /* Разделитель тянулся на всю высоту контейнера (top:0 / bottom:0) и упирался
     в следующую полосу. Обрезаем его по нижнему ряду карточек. */
  @media (min-width: 800px) {
    .values::before { bottom: var(--sec-pad) !important; }
  }

  /* Боковые поля — на контейнере, как у всех секций. Раньше их создавали
     паддинги самих ячеек, а у нечётных левый обнулялся (`nth-child(odd)
     { padding-left: 0 }`) — карточки упирались в края окна. */
  .values {
    padding-left: clamp(24px, 4.5vw, 88px) !important;
    padding-right: clamp(24px, 4.5vw, 88px) !important;
  }
  .value,
  .value:nth-child(odd),
  .value:nth-child(even) {
    padding-left: clamp(20px, 2.2vw, 40px) !important;
    padding-right: clamp(20px, 2.2vw, 40px) !important;
  }

  /* ============ Round 41: города — раздвижной аккордеон ============
     По мотивам Wayflyer: шесть узких панелей в ряд, наведённая плавно
     раздвигается и раскрывает детали, соседние сжимаются. Слайдер со
     стрелками остаётся на узких экранах, где аккордеон не имеет смысла. */
  @media (min-width: 1000px) {
    #sec-coverage .loc-track {
      display: flex;
      gap: 12px;
      overflow: visible;
      scroll-snap-type: none;
      padding: 40px 0 0;
      height: clamp(400px, 46vh, 520px);
      /* ширина как у карточек гайдов: секция уже full-bleed, дорожка просто
         занимает её целиком внутри боковых паддингов clamp(24px,4.5vw,88px) */
      width: auto;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
    }
    /* стрелки нужны только слайдеру */
    #sec-coverage .loc-nav { display: none; }
    /* без стрелок раскладка «текст слева / кнопки справа» теряет смысл:
       заголовок оставался в блоке 640px у левого края, а черта под ним
       центрировалась по этому блоку и уезжала от центра секции */
    #sec-coverage .loc-head {
      display: block;
      border-bottom: 0;
      padding-bottom: 0;
    }
    #sec-coverage .loc-head__text {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
    }

    #sec-coverage .loc {
      flex: 1 1 0;
      min-width: 0;
      display: block;
      position: relative;
      overflow: hidden;
      border-radius: 4px;
      gap: 0;
      scroll-snap-align: none;
      transform: none !important;
      box-shadow: none !important;
      /* !important — ниже по файлу `.rv, .loc` задаёт transition для
         transform/box-shadow и затирал бы переход ширины */
      transition: flex-grow .55s cubic-bezier(.22, 1, .36, 1) !important;
      will-change: flex-grow;
    }
    #sec-coverage .loc:hover { flex-grow: 3.6; }

    /* Фон панели: силуэт достопримечательности города — узнаваемо и без
       стоковых фотографий. Рисуется одним цветом, поэтому масштабируется
       без потерь и весит копейки. */
    #sec-coverage .loc__media {
      position: absolute;
      inset: 0;
      border-radius: 0;
      background: linear-gradient(to bottom, var(--surface) 0%, var(--surface-sunk) 100%);
      color: rgba(26, 43, 60, .30);      /* цвет силуэта */
      transition: transform .7s cubic-bezier(.22, 1, .36, 1), color .5s ease;
    }
    #sec-coverage .loc:hover .loc__media { color: rgba(199, 91, 57, .42); }
    /* лёгкий наезд камеры на раскрытой панели */
    #sec-coverage .loc:hover .loc__media { transform: scale(1.04); }
    #sec-coverage .loc__media svg { width: 100%; height: 100%; display: block; }
    /* затемнение снизу, чтобы текст читался поверх подложки */
    #sec-coverage .loc::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(26, 43, 60, .80) 0%, rgba(26, 43, 60, .38) 42%, rgba(26, 43, 60, .06) 74%);
      pointer-events: none;
    }

    #sec-coverage .loc__body {
      position: absolute;
      inset: auto 0 0 0;
      z-index: 1;
      padding: 26px 26px 28px;
      display: flex;
      flex-direction: column;
    }
    #sec-coverage .loc__name {
      margin: 0;
      color: #FFFBF7;
      font-size: clamp(24px, 2vw, 32px);
      white-space: nowrap;
    }

    /* детали скрыты, пока панель узкая */
    #sec-coverage .loc__label,
    #sec-coverage .loc__value,
    #sec-coverage .loc__link {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .32s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
      white-space: nowrap;
    }
    #sec-coverage .loc__label { color: rgba(255, 251, 247, .62); margin: 16px 0 4px; }
    #sec-coverage .loc__value { color: rgba(255, 251, 247, .9); margin: 0; }
    #sec-coverage .loc__link  { color: #FFFBF7; margin-top: 18px; }

    #sec-coverage .loc:hover .loc__label,
    #sec-coverage .loc:hover .loc__value,
    #sec-coverage .loc:hover .loc__link {
      opacity: 1;
      transform: none;
    }
    /* лёгкая лесенка: детали появляются вслед за раздвижением */
    #sec-coverage .loc:hover .loc__label { transition-delay: .12s; }
    #sec-coverage .loc:hover .loc__value { transition-delay: .16s; }
    #sec-coverage .loc:hover .loc__link  { transition-delay: .22s; }

    @media (prefers-reduced-motion: reduce) {
      #sec-coverage .loc,
      #sec-coverage .loc__label,
      #sec-coverage .loc__value,
      #sec-coverage .loc__link { transition: none; }
    }
  }

  /* ============ Round 40: кнопки секций — по принципу «Читать» ============
     Обе были сплошной терракотовой заливкой и перетягивали внимание с
     контента. Приводим к outline-виду карточной кнопки: обводка + терракотовый
     текст, заливка приходит только при наведении. Заливка у .btn--gold идёт
     через background-image (градиент), поэтому гасим именно его. */
  .srows__foot .btn,
  .gcards__foot .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 34px !important;
    background: none !important;
    background-image: none !important;
    border: 1px solid var(--gold) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Manrope', sans-serif;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold) !important;
    transition: background-color .25s ease, color .25s ease;
  }
  @media (hover: hover) {
    .srows__foot .btn:hover,
    .gcards__foot .btn:hover {
      background: var(--gold) !important;
      background-image: none !important;
      color: #FFFBF7 !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .srows__foot .btn, .gcards__foot .btn { transition: none; }
  }

  /* ============ Round 39: «Популярное» — прайс-лист вместо таблицы ============
     Было: общая рамка-коробка вокруг трёх строк (читалась как таблица),
     900px пустоты между названием и «Подробнее», кнопка висела отдельно.
     Стало: коробки нет — только волосяные разделители; слева крупный номер
     для ритма; справа срок, который раньше прятался в серой мете. */

  #sec-services .srows {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: 1320px;
    margin: 44px auto 0;
  }
  #sec-services .srow {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto 30px;
    align-items: center;
    column-gap: clamp(16px, 2vw, 32px);
    padding: clamp(24px, 2.6vw, 34px) 8px;
    border-bottom: 1px solid var(--border-faint) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none;
    color: inherit;
    transition: padding-left .3s cubic-bezier(.22, 1, .36, 1),
                border-color .3s ease;
  }
  #sec-services .srow:first-child { border-top: 1px solid var(--border-faint) !important; }

  #sec-services .srow__num {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1;
    color: var(--gold);
    opacity: .38;
    transition: opacity .3s ease;
  }
  #sec-services .srow__body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
  #sec-services .srow__title {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: clamp(21px, 2vw, 28px);
    line-height: 1.22;
    color: #1A2B3C;
  }
  #sec-services .srow__cat {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* срок — то, ради чего заполняли правую часть */
  #sec-services .srow__term { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  #sec-services .srow__term-val {
    font-family: 'Playfair Display', serif;
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1;
    color: #1A2B3C;
    white-space: nowrap;
  }
  #sec-services .srow__term-sub {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  #sec-services .srow__go {
    display: inline-flex;
    justify-content: flex-end;
    color: var(--gold);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  }

  @media (hover: hover) {
    #sec-services .srow:hover {
      padding-left: 20px;
      border-color: var(--gold) !important;
      background: none !important;
    }
    #sec-services .srow:hover .srow__num { opacity: 1; }
    #sec-services .srow:hover .srow__go { transform: translateX(6px); }
  }
  @media (max-width: 720px) {
    #sec-services .srow { grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 14px; }
    #sec-services .srow__go { display: none; }
    #sec-services .srow__num { font-size: 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #sec-services .srow, #sec-services .srow__go, #sec-services .srow__num { transition: none; }
  }

  /* кнопка перестаёт «висеть»: шире и ближе к списку */
  #sec-services .srows__foot { margin-top: 40px; }

  /* ============ Round 38: оживление прокрутки ============ */

  /* hover отзывам и городам — единственные карточки, где его не было */
  .rv, .loc {
    position: relative;
    z-index: 0;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1),
                box-shadow .32s cubic-bezier(.22, 1, .36, 1);
  }
  @media (hover: hover) {
    .rv:hover, .loc:hover {
      transform: translateY(-5px);
      box-shadow: 0 24px 48px -22px rgba(45, 45, 45, .30),
                  0 3px 10px rgba(45, 45, 45, .05);
      z-index: 2;
    }
    .loc:hover .loc__link { color: var(--gold-2); }
  }

  /* портрет двигается медленнее страницы — сдвиг задаёт JS через --par */
  .portrait__figure { will-change: transform; }
  .portrait__frame { transform: translate3d(0, var(--par, 0px), 0); }

  /* счётчик не должен «прыгать» шириной, пока крутятся цифры */
  .stat__value { font-variant-numeric: tabular-nums; }

  @media (prefers-reduced-motion: reduce) {
    .rv, .loc { transition: none; }
    .rv:hover, .loc:hover { transform: none; }
    .portrait__frame { transform: none !important; }
  }

  /* ============ Round 37: ни одного подчёркивания при наведении ============
     Источник — глобальное `a:hover { text-decoration: underline }

    /* переход в каталог кнопкой под списком, как «Читать больше» у гайдов */
  .srows__foot { text-align: center; }

/* подзаголовок секции — по образцу .home-guides__dek */
  .sec-dek {
    max-width: 680px;
    margin: 20px auto 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-sub);
  }
  /* у «Философии» заголовок несёт нижний отступ — снимаем его,
     чтобы подзаголовок не отрывался от него */
  .intro--flow .values__h { padding-bottom: 0; }

  /* высоту ответа анимирует JS (Round 33) — <details> нативно не плавный.
     padding без !important: его тоже надо анимировать, иначе при height:0
     остаётся полоса отступа и раскрытие «прыгает». */
  .home-faq .faq__item > .faq__a { will-change: height; }
  @media (prefers-reduced-motion: reduce) {
    .home-faq .faq__q::before, .home-faq .faq__q::after { transition: none; }
  }

  /* ============ Round 50: типографическая ревизия ============
     Заголовки секций собирались в разное время и разошлись: на мобильном они
     были 17 / 18 / 24 / 36px, на десктопе 42 / 44 / 48px, веса 500 и 800, а у
     «Вопросы? Ответы» отличался ещё и цвет. Здесь одна шкала на все секции. */
  #sec-services h2,
  #sec-reviews h2,
  #sec-coverage .map-head h2,
  .home-guides h2,
  .home-faq .faq__aside h2,
  .final-cta h2,
  .intro__how h2,
  .values__h {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(30px, 4vw, 48px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    color: #1A2B3C !important;
    letter-spacing: -0.01em;
  }

  /* Подзаголовки секций тоже разъехались: 14 / 15 / 18px при одинаковой роли. */
  .sec-dek,
  #sec-coverage .home-coverage__dek,
  .home-guides__dek,
  .home-faq .faq__dek {
    font-size: clamp(16px, 1.3vw, 18px) !important;
    line-height: 1.6 !important;
    color: var(--text-sub) !important;
  }


  /* ============ Round 51: плавная десктопная шкала ============
     Медиазапрос включался на 1000px и сразу выдавал максимум: hero 88px,
     логотип 36px, меню 18px. На широком мониторе это в пропорции, а в окне
     ноутбука выглядело непомерно крупным — отсюда «в Chrome как для
     пенсионеров»: дело не в браузере, а в ширине окна. Ниже интерполяция:
     нижняя граница — размер для окна ~1000px, верхняя — прежний максимум,
     который набирается к ~2000px. */
  @media (min-width: 1000px) {
    .hero--home .hero__h1,
    .hero__h1 {
      font-size: clamp(34px, calc(2.28vw + 26.6px), 72px) !important;
    }
    .hero--home .hero__dek,
    .hero__dek {
      font-size: clamp(14px, calc(0.14vw + 12.8px), 16px) !important;
    }
    .home-services-grid__h2-sub {
      font-size: clamp(19px, calc(0.57vw + 13.3px), 26.6px) !important;
    }
  }

  /* Те же правки для шкал, заданных вне медиазапроса: максимум набирался
     уже к 1200–1400px, дальше заголовки стояли на месте. */
  #sec-services h2,
  #sec-reviews h2,
  #sec-coverage .map-head h2,
  .home-guides h2,
  .home-faq .faq__aside h2,
  .final-cta h2,
  .intro__how h2,
  .values__h {
    font-size: clamp(25px, calc(0.95vw + 21px), 40px) !important;
  }
  .sec-dek,
  #sec-coverage .home-coverage__dek,
  .home-guides__dek,
  .home-faq .faq__dek {
    font-size: clamp(14px, calc(0.14vw + 12.8px), 16px) !important;
  }
  .city__name { font-size: clamp(23px, calc(0.95vw + 15.2px), 34px) !important; }


  /* Вертикальный ритм тоже был фиксирован: 88–96px воздуха между секциями
     на любом десктопе. На широком мониторе это норма, в окне ноутбука —
     половина экрана уходит в пустоту. Та же интерполяция, что у кеглей. */
  :root { --sec-pad: clamp(42px, calc(3.04vw + 15.2px), 76px); }

  @media (min-width: 1000px) {
    .hero--home {
      padding-top: clamp(42px, calc(2.66vw + 15.2px), 68px) !important;
      padding-bottom: clamp(40px, calc(2.66vw + 13.3px), 72px) !important;
    }
    .hero--home .hero__meta-row {
      gap: clamp(23px, calc(1.71vw + 5.7px), 49px) !important;
      margin-top: clamp(23px, calc(1.71vw + 5.7px), 49px) !important;
    }
    main > section, main > .home-body {
      padding-top: clamp(40px, calc(2.66vw + 13.3px), 72px);
      padding-bottom: clamp(40px, calc(2.66vw + 13.3px), 72px);
    }
    .final-cta {
      padding-left: clamp(21px, calc(1.71vw + 7.6px), 49px) !important;
      padding-right: clamp(21px, calc(1.71vw + 7.6px), 49px) !important;
    }
    .value {
      padding-top: clamp(28px, calc(1.71vw + 11.4px), 49px) !important;
      padding-bottom: clamp(28px, calc(1.71vw + 11.4px), 49px) !important;
    }
    .intro__top { gap: clamp(27px, calc(1.71vw + 9.5px), 49px) !important; }
    .home-services-grid__h2-sub { margin-top: clamp(27px, calc(1.33vw + 13.3px), 46px) !important; }
  }


  /* Перенос в заголовке задан вручную: «контакт» всегда уходит на вторую
     строку. На узких экранах строка ломается сама, и жёсткий перенос там
     только мешает — поэтому он выключается. */
  .hero__br { display: none; }
  @media (min-width: 760px) { .hero__br { display: inline; } }
  .ticker__item { font-weight: 500 !important; }
  .ticker { padding: clamp(7px, 0.6vw, 11px) 0 !important; }
  


  /* ═══════════════ Round 52: типографическая система ═══════════════
     До этого одна и та же роль набиралась разными кеглями: «заголовок
     карточки» встречался как 18 / 20 / 21 / 22 / 23px, «подпись» — как
     14 / 15 / 16px, веса и интерлиньяж расходились внутри одной роли.
     Ниже семь ступеней; каждая тянется от узкого десктопа к широкому,
     соседние ступени различаются заметно — иначе разница читается
     не как иерархия, а как небрежность. */
  :root {
    --fs-display:  clamp(32px, calc(2.25vw + 27px), 72px);  /* заголовок hero */
    --fs-title:    clamp(24px, calc(0.875vw + 22.5px), 40px);    /* заголовки секций */
    --fs-subtitle: clamp(18px, calc(0.44vw + 15.25px), 24px);     /* карточки, вопросы, города */
    --fs-lead:     clamp(15.5px, calc(0.1875vw + 15.25px), 19px);  /* подводки и крупные абзацы */
    --fs-body:     clamp(14.5px, calc(0.1875vw + 13.25px), 17px);/* основной текст */
    --fs-small:    clamp(13px, calc(0.1875vw + 11.25px), 15px); /* вторичный текст */
    --fs-micro:    clamp(10.5px, calc(0.1875vw + 8.75px), 12.5px); /* капс-лейблы */
    --fs-btn:      clamp(12px, calc(0.1875vw + 10.25px), 14px);/* кнопки */

    --lh-title: 1.15;
    --lh-subtitle: 1.28;
    --lh-lead: 1.6;
    --lh-body: 1.7;
    --lh-micro: 1.45;
  }

  /* — 1. дисплей и заголовки секций — */
  .hero--home .hero__h1, .hero__h1 {
    font-size: var(--fs-display) !important;
    line-height: 1.08 !important;
  }
  #sec-services h2, #sec-reviews h2, #sec-coverage .map-head h2,
  .home-guides h2, .home-faq .faq__aside h2, .final-cta h2,
  .intro__how h2, .values__h {
    font-size: var(--fs-title) !important;
    line-height: var(--lh-title) !important;
  }

  /* — 2. заголовки карточек, вопросы, имена городов — одна ступень — */
  .city__name,
  .home-guides .gcard__title,
  #sec-services .srow__title,
  .value__title,
  .home-faq .faq__item > summary.faq__q,
  .intro__bridge,
  .portrait__name {
    font-size: var(--fs-subtitle) !important;
    line-height: var(--lh-subtitle) !important;
    font-weight: 500 !important;
  }
  /* отзыв — та же ступень, но это цитата: интерлиньяж читательский */
  #sec-reviews .rv__text, .rv__text {
    font-size: var(--fs-subtitle) !important;
    line-height: 1.45 !important;
  }

  /* — 3. подводки и крупные абзацы — */
  .hero--home .hero__dek, .hero__dek,
  .sec-dek, #sec-coverage .home-coverage__dek, .home-guides__dek,
  .home-faq .faq__dek,
  .city__lead,
  .intro__bridge-sub {
    font-size: var(--fs-lead) !important;
    line-height: var(--lh-lead) !important;
  }

  /* — 8. декоративные цифры: своя роль, но интерлиньяж без люфта — */
  .stat__value, #sec-services .srow__num, .step__num,
  .rv__quote, .rv__avatar, .city__num {
    line-height: 1 !important;
  }


  /* ═══════════════ Round 52b: шкала отступов ═══════════════
     Под заголовками секций стояли 16 / 8 / 0px, карточки набирали поля
     30 / 30–20 / 24–8px, сетки — 24 и 32px. Сводим к четырём величинам,
     которые тоже тянутся вместе с шириной экрана. */
  :root {
    --gap-title-dek:    clamp(8px, 0.7vw, 14px);    /* заголовок → подводка */
    --gap-head-content: clamp(26px, 2.2vw, 44px);   /* шапка секции → контент */
    --pad-card:         clamp(20px, 1.6vw, 30px);   /* внутренние поля карточек */
    --gap-grid:         clamp(18px, 1.5vw, 28px);   /* между карточками */
  }

  #sec-services h2, #sec-reviews h2, #sec-coverage .map-head h2,
  .home-guides h2, .final-cta h2, .intro__how h2, .values__h {
    margin-top: 0 !important;
    margin-bottom: var(--gap-title-dek) !important;
  }
  .sec-dek,
  #sec-coverage .home-coverage__dek,
  .home-guides__dek {
    margin-top: 0 !important;
    margin-bottom: var(--gap-head-content) !important;
  }
  /* у FAQ шапка стоит сбоку, поэтому ей нужен только внутренний ритм */
  .home-faq .faq__aside h2 { margin: 0 0 var(--gap-title-dek) !important; }

  /* Заголовок и подводка «Философии» — полосы во всю ширину с собственным
     фоном. Внешние отступы разрывали заливку, поэтому у них margin остаётся
     нулевым, а воздух даёт внутренний padding. */
  .values__h { margin-bottom: 0 !important; }
  .sec-dek--values { margin-bottom: 0 !important; }
  .home-faq .faq__dek { margin: 0 0 var(--gap-title-dek) !important; }

  /* карточки: одни поля на все виды */
  .home-guides .gcard { padding: var(--pad-card) !important; }
  .home-guides .gcards { gap: var(--gap-grid) !important; }
  .map-wrap { gap: clamp(24px, 2.6vw, 56px) !important; }



/* ═══ Каскад проявления (2026-08-03) ═══
   Задержки жили в атрибутах style — visual lint их запрещает, и правильно:
   в шаблоне им не место. Порядок внутри группы задаёт nth-of-type. */
.faq__item:nth-of-type(2) { transition-delay: 60ms; }
.faq__item:nth-of-type(3) { transition-delay: 120ms; }
.faq__item:nth-of-type(4) { transition-delay: 180ms; }
.faq__item:nth-of-type(5) { transition-delay: 240ms; }
.faq__item:nth-of-type(6) { transition-delay: 300ms; }
.faq__item:nth-of-type(7) { transition-delay: 360ms; }
.faq__item:nth-of-type(8) { transition-delay: 360ms; }
.faq__item:nth-of-type(9) { transition-delay: 360ms; }
.gcard:nth-of-type(2) { transition-delay: 70ms; }
.gcard:nth-of-type(3) { transition-delay: 140ms; }
.gcard:nth-of-type(4) { transition-delay: 210ms; }
.gcard:nth-of-type(5) { transition-delay: 280ms; }
.gcard:nth-of-type(6) { transition-delay: 350ms; }
.hero__cta-row:nth-of-type(1) { transition-delay: 270ms; }
.hero__h1:nth-of-type(1) { transition-delay: 90ms; }
.hero__lead:nth-of-type(1) { transition-delay: 180ms; }
.intro__bridge-sub:nth-of-type(1) { transition-delay: 90ms; }
.portrait__caption:nth-of-type(1) { transition-delay: 140ms; }
.rv:nth-of-type(2) { transition-delay: 110ms; }
.rv:nth-of-type(3) { transition-delay: 220ms; }
.srow:nth-of-type(2) { transition-delay: 70ms; }
.srow:nth-of-type(3) { transition-delay: 140ms; }
.stat:nth-of-type(2) { transition-delay: 120ms; }
.stat:nth-of-type(3) { transition-delay: 240ms; }
.stat:nth-of-type(5) { transition-delay: 120ms; }
.stat:nth-of-type(6) { transition-delay: 240ms; }
.step:nth-of-type(2) { transition-delay: 110ms; }
.step:nth-of-type(3) { transition-delay: 220ms; }
.step:nth-of-type(4) { transition-delay: 330ms; }
.value:nth-of-type(3) { transition-delay: 130ms; }
.value:nth-of-type(4) { transition-delay: 130ms; }


/* ═══════════ Мобильная полировка (2026-08-04) ═══════════
   Диагноз с замера на 375px: .map-wrap — grid, а у grid-элементов
   min-width: auto — контент карты и лента городов раскладывались в 663px
   и уезжали за экран (подписи и текст городов обрезались). */
@media (max-width: 999px) {
  .map-wrap > * { min-width: 0; }
  .map-stage, .map, .city, .city__body, .city__track { max-width: 100%; }
  .city__card { min-width: 100%; width: 100%; }
}

@media (max-width: 599px) {
  /* Сдвиг карты за курсором и параллакс не нужны на таче */
  .map, .map-stage { transform: none !important; }

  /* Стрелки городов встали столбиком (position: static из базового
     правила): кнопки — прямые дети .city без обёртки, поэтому в ряд их
     ставит строчный поток — блочный контейнер и inline-flex кнопки */
  .city { display: block; }
  .city__btn {
    position: static; transform: none;
    display: inline-flex; margin: 14px 10px 0 0;
  }

  /* Подписи карты: SVG сжат втрое против десктопа, 21px виртуальных
     превращались в ~8px экранных. Кегль в координатах viewBox. */
  .map__label { font-size: 34px; }
  .map__pin.is-active .map__label { font-size: 38px; }
  .map__dot { r: 9; }
  .map__pin.is-active .map__dot { r: 15; }

  /* Гайды: на десктопе карточки одного роста в сетке, на мобилке колонка —
     фиксированный рост оставлял дыру между текстом и «Читать» */
  .home-guides .gcard { min-height: 0; }
  .home-guides .gcard__dek { margin-bottom: 22px; }
  .home-guides .gcard__more { margin-top: 0; }
}


/* ═══════════ Мобильная адаптация, полный проход (2026-08-04) ═══════════
   Правки собраны по секциям сверху вниз. Общий принцип: на 375px каждая
   секция должна помещаться в 1–1.5 экрана и сохранять терракотовые
   акценты, а не превращаться в серый столбец текста. */
@media (max-width: 719px) {

  /* ── Знакомство: портрет первым, факты — сеткой 2×3 ──
     Было: 6 карточек и портрет столбцом на 2.5 экрана. Порядок держит
     flex-order, сами колонки распускаем. */
  /* «Обложка» (выбор Daniil 2026-08-04): фото во всю ширину, имя и роль
     на градиенте прямо на снимке, текст выезжает из-под фото по мере
     прокрутки (двигает home-redesign.js через --slide). Порядок элементов
     собирает flex: bridge-sub в DOM стоит до .portrait, а визуально идёт
     после фото. */
  #sec-intro.intro { display: flex !important; flex-direction: column; }
  .portrait { display: contents; }
  .intro__bridge { order: 1; }
  #sec-intro.intro .portrait__figure { order: 2; }
  #sec-intro.intro > .intro__bridge-sub { order: 3; }
  #sec-intro.intro .portrait__col--left  { order: 4; }
  #sec-intro.intro .portrait__col--right { order: 5; }

  /* Карточка знакомства по референсу rockfi.fr (2026-08-04): чистое фото
     с именем на снимке и кнопкой «Написать →» поверх. Крафтовые подложки
     и печать убраны — строгость важнее украшений. */
  #sec-intro.intro .portrait__figure {
    width: 100% !important; max-width: none !important;
    margin: 16px 0 6px !important;
    padding: 0 !important; background: none !important;
    box-shadow: 0 18px 44px rgba(26, 43, 60, .18) !important;
    border-radius: 14px !important;
    position: relative; z-index: 2;
    overflow: hidden !important;
    transform: none !important;
  }
  #sec-intro.intro .portrait__figure::before,
  #sec-intro.intro .portrait__figure::after { content: none !important; }
  .portrait__frame {
    aspect-ratio: 1 / 1.14 !important; border-radius: 0 !important;
    min-height: 0 !important; box-shadow: none !important;
  }
  .portrait__frame::after { content: none !important; }
  .portrait__frame .portrait__img {
    -webkit-mask-image: none !important; mask-image: none !important;
    object-position: center 62% !important;
  }
  .portrait__caption {
    position: absolute !important; left: 0; right: 0; bottom: 0;
    padding: 64px 92px 16px 18px !important; text-align: left !important;
    background: linear-gradient(180deg, transparent, rgba(20, 22, 20, .6) 74%) !important;
  }
  .portrait__caption .portrait__name { color: #FFFBF7 !important; font-size: 20px !important; }
  .portrait__caption .portrait__role { color: rgba(255, 251, 247, .78) !important; font-size: 10px !important; letter-spacing: .18em; }
  /* кнопка поверх фото — как «Voir tous nos conseillers» у референса */
  .portrait__chat {
    position: absolute; right: 12px; bottom: 14px; z-index: 3;
    display: inline-flex; align-items: center;
    background: rgba(255, 251, 247, .92); color: var(--text);
    padding: 12px 16px; border-radius: 999px; text-decoration: none;
    font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .portrait__chat:active { transform: scale(.96); }

  /* Текст: в потоке стоит на своём месте, transform прячет его верх под
     фото; --slide отдаёт JS (0 → спрятан, 1 → выехал). Прямое связывание
     со скроллом — без transition, иначе дёргается на пальце. */
  #sec-intro.intro > .intro__bridge-sub {
    grid-column: auto;
    text-align: left; margin: 22px 0 0;
    position: relative; z-index: 1;
    transform: translateY(calc((1 - var(--slide, 1)) * -128px));
    opacity: var(--slide, 1);
  }

  .portrait__col {
    display: grid !important; grid-template-columns: 1fr 1fr;
    gap: 12px; margin-top: 12px;
  }
  .portrait__col--left .stat:nth-child(3),      /* «четыре языка» шире прочих */
  .portrait__col--right .stat:nth-child(3) {    /* «27 минут» тоже */
    grid-column: 1 / -1;
  }
  .stat { padding: 16px 16px 14px; margin: 0 !important; }
  .stat__label { font-size: 10px; letter-spacing: .14em; }
  .stat__value { font-size: clamp(26px, 8vw, 34px); }
  .stat__value--langs { font-size: clamp(20px, 6vw, 26px); }

  /* ── Философия: иконка и заголовок в одну строку, текст под ними ──
     Крупные иконки-плашки съедали ширину и рвали выравнивание. */
  .value {
    display: grid !important; grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px; align-items: center; text-align: left;
    min-height: 0 !important; padding: 18px 0 !important;
  }
  .value__icon { width: 40px; height: 40px; margin: 0; }
  .value__icon svg { width: 16px; height: 16px; }
  .value__body { text-align: left; }
  .value__title { margin: 0 0 6px; }
  .value__text { margin: 0; }

  /* ── Шаги: базовый grid 56px/1fr оставляем, но заголовок и пояснение
     держим в одной текстовой колонке, а от круга к кругу тянем нить —
     маршрут читается сверху вниз ── */
  .step { position: relative; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; }
  .step__dot { width: 48px; height: 48px; grid-row: 1 / 3; }
  .step__text { grid-column: 2; align-self: center; text-align: left; }
  .step__note { grid-column: 2; margin: 0; text-align: left; }
  .step:not(:last-child)::before {
    content: ''; position: absolute; left: 23.5px; top: 54px; bottom: -30px;
    width: 1px; background: linear-gradient(180deg, var(--gold), var(--border));
    opacity: .5;
  }

  /* ── Финальный CTA: кнопка не шире экрана ── */
  .final-cta .btn { max-width: 100%; white-space: normal; }
}

/* ── Отзывы: свайп с «подглядыванием» следующего + точки ──
   На десктопе три колонки; до 999px лента снапа уже была, но карточка
   занимала 100% — о следующих отзывах ничто не говорило, а стрелки
   скрыты. Теперь из-за края выглядывает кусок следующего отзыва,
   под лентой — точки (рисует home-redesign.js). */
@media (max-width: 999px) {
  #sec-reviews .rv { flex: 0 0 88%; min-width: 88%; scroll-snap-align: start; }
  #sec-reviews .rv:last-child { flex-basis: 100%; min-width: 100%; }
  .rv-dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
  .rv-dots button {
    appearance: none; border: 0; cursor: pointer; padding: 8px;
    background: none; line-height: 0;
  }
  .rv-dots button::before {
    content: ''; display: block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--border); transition: background .3s ease, transform .3s ease;
  }
  .rv-dots button.is-on::before { background: var(--gold); transform: scale(1.35); }
}
@media (min-width: 1000px) { .rv-dots { display: none; } }


/* ═══════════ Мобильная полировка round 2 (2026-08-04) ═══════════
   Замер на 430×932 (iPhone 14 Pro Max), секция за секцией через CDP
   (computed styles + boundingClientRect), не на глаз. Так нашлись
   баги, которые на скриншоте не всегда заметны. */

/* ── 1. Портрет: фигура схлопывалась до 138px ──
   Причина: .portrait стал flex-column (см. блок выше), а у
   .portrait__figure стоит margin: 0 auto без ширины. Для flex-item
   в column-контейнере auto-маргины по кросс-оси ОТМЕНЯЮТ
   align-items:stretch и включают shrink-to-fit — фигура сжималась
   до ширины самого узкого контента (подписи «Daniil Pavlovskyi»),
   а не до 300px из max-width. .portrait__img внутри абсолютно
   спозиционирован и в intrinsic-размер не идёт, поэтому спасти
   ширину через контент было нечем. Замер подтвердил: было 138px
   вместо 300px. Лечим явным width — на фигуру, кросс-ось больше
   не задаёт auto-margin. */
@media (max-width: 719px) {
  .portrait__figure {
    width: min(300px, 80vw);
    max-width: none;
  }
}

/* ── 2. Hero: левый край на фоне центрированного «Один контакт…» ──
   .hero__lead (линия + «Первая консультация бесплатно») и следующая
   секция intro__bridge уже центрированы; h1/dek — нет, оставались
   левым блоком без text-align. На 430px это читалось как две разные
   вёрстки подряд. Приводим hero к центру, как договорились —
   единое выравнивание по всей мобильной странице.
   Заодно — чуть больше воздуха сверху: module-hero.css даёт hero
   padding 32px 0 24px, и когда nav «прилипает» при скролле (шапка
   sticky, верхняя строка с почтой/телефоном уезжает), заголовок
   почти вплотную к нему. */
@media (max-width: 719px) {
  .hero--home {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 28px;
  }
  .hero--home .hero__cta-row { justify-content: center; }
}

/* ── 3. Карточки статистики: паддинг и тень ──
   Базовая .stat — flex-column с justify-content:space-between, и
   между парами в ряду (grid-auto-rows:1fr) число уже садится на одну
   линию независимо от того, в 1 или 2 строки встал лейбл — замер
   boundingClientRect это подтвердил (top/bottom числа совпадают
   попиксельно). Не трогаем эту механику. Правим то, что снимок
   действительно показал: паддинг снизу на 2px меньше верхнего
   (16/16/14 — мелкая, но заметная асимметрия) и тень, которая на
   маленькой карточке 190×108 выглядит тяжелее, чем на макете. */
@media (max-width: 719px) {
  .stat {
    padding: 18px 16px;
    box-shadow: 0 1px 2px rgba(45, 45, 45, .03),
                0 6px 16px -10px rgba(45, 45, 45, .12);
  }
}

/* ── 4. Отзывы: лишние 56px полей и «мусор» от соседней карточки ──
   #sec-reviews .rv-wrap держит padding: 0 clamp(56px,7vw,96px) для
   круглых стрелок — на 430px это clamp даёт 56px с каждой стороны
   (7vw уже меньше минимума), т.е. лента сама сужается до 270px из
   430, а карточка (88% от неё) — до 238px. Стрелки на этой ширине
   и так скрыты (max-width:999px), поле под них не нужно — снимаем.
   Соседняя карточка теперь честно выглядывает на ширину экрана, а не
   на треть суженной ленты. Плюс мягкая маска по краям: текст соседней
   карточки центрирован, и его случайный обрезанный кусок у самого
   края читался как визуальный мусор — гасим его в градиент. */
@media (max-width: 999px) {
  #sec-reviews .rv-wrap { padding-left: 0; padding-right: 0; }
  #sec-reviews .rv-track {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 91%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 91%, transparent 100%);
  }

  /* точки-пагинация были 23×23 — заметно меньше тап-зоны в 44px.
     Увеличиваем hit-area паддингом, сам кружок (::before) не растёт. */
  .rv-dots { gap: 4px; }
  .rv-dots button { padding: 18px; }
}

/* ── 5. Карточка города: ссылка «Подробнее» отрывалась от текста ──
   .city__card — flex-column, все 6 карточек лежат в одну строку
   .city__track и по умолчанию стретчатся по высоте до самой длинной
   (описание Мурсии — три строки против одной у Аликанте), чтобы лента
   не прыгала по высоте при свайпе между городами — это сознательно.
   Но .city__link держался на margin-top:auto, то есть у коротких
   описаний он проваливался в самый низ карточки, а между абзацем и
   ссылкой повисало ~130px пустоты — читалось как разрыв вёрстки.
   Резерв под длинный текст оставляем (иначе высота дёргается на
   каждом свайпе), но лишний воздух переносим под ссылку, а не между
   ней и текстом — там он выглядит как обычный нижний паддинг блока. */
@media (max-width: 719px) {
  .city__link {
    margin-top: 18px;
    /* тап-зона: строка текста была 21px, увеличиваем hit-area
       паддингом с компенсацией отрицательным margin, чтобы соседние
       элементы не сдвинулись. */
    padding: 12px 0;
    margin-bottom: -12px;
  }
}


/* ═══════════ Мобильный hero — правки Daniil (2026-08-04) ═══════════ */
@media (max-width: 719px) {
  /* 1. Заголовок в две строки: «Krepko — единственный» / «нужный контакт».
     Кегль подобран так, чтобы первая половина влезала в строку на 360–500px,
     balance не даёт болтаться одинокому слову. */
  /* !important здесь вынужденный: Round 52 ставит на .hero__h1
     font-size: var(--fs-display) !important — обычное правило проигрывает
     независимо от специфичности и позиции */
  /* Кегль выведен из замера Playfair 600: «Krepko — единственный» = 399px
     при 36px. Формула держит эту строку на 12–13px уже экрана по всей
     сетке 360–500px, поэтому заголовок ложится ровно в две строки:
     «Krepko — единственный» / «нужный контакт». */
  .hero--home .hero__h1 {
    font-size: clamp(25px, calc(8.9vw - 5px), 34px) !important;
    line-height: 1.16 !important;
  }

  /* 2. Воздух между заголовком, подводкой и кнопкой */
  .hero--home .hero__h1 { margin-bottom: clamp(18px, 5vw, 26px) !important; }
  .hero--home .hero__lead { margin-top: 0; }
  .hero--home .hero__free { margin-top: 14px; }
  .hero--home .hero__cta-row { margin-top: clamp(22px, 6vw, 32px) !important; }
  .hero--home { padding-bottom: 44px; }

  /* 3. Бегущая строка во всю ширину экрана. Расчёт от центра контейнера:
     каким бы ни был родительский паддинг, лента доезжает до краёв окна. */
  .ticker {
    width: 100vw !important;
    max-width: none !important;      /* чей-то max-width резал 100vw до контент-бокса */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}





/* ═══════════ Hero-ротатор услуг по референсу rockfi.fr (2026-08-04) ═══
   Заголовок статичен, а список услуг (бывшая бегущая строка) листается
   вертикально сам: активная строка тёмная с терракотовым маркером,
   соседние тают. Тикер на мобилке скрыт — его контент переехал сюда. */
.hero__roll { display: none; }
@media (max-width: 719px) {
  .ticker { display: none !important; }

  .hero__roll {
    display: block; position: relative;
    height: calc(5 * 28px); overflow: hidden;
    margin-top: clamp(44px, 11vw, 56px);   /* у референса большой воздух после заголовка */
    /* хвосты почти гаснут — оптический центр держит активная строка */
    -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.35) 16%, #000 34%, #000 66%, rgba(0,0,0,.35) 84%, transparent);
    mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.35) 16%, #000 34%, #000 66%, rgba(0,0,0,.35) 84%, transparent);
  }
  .hero__roll ul {
    list-style: none; margin: 0; padding: 0;
    /* движение ведёт JS покадрово — CSS-транзиция на iOS иногда
       глоталась, и лента расходилась с подсветкой */
    will-change: transform;
  }
  .hero__roll li {
    height: 28px; display: flex; align-items: center;
    /* старый глобальный стиль даёт li { margin-bottom: 4px } — шаг ленты
       становился 36px при формуле 32, и подсветка уползала на +4px за такт */
    margin: 0 !important;
    /* точка живёт за левым краем строки: overflow: hidden из блока
       полировки её обрезал — потому «точки не было» */
    overflow: visible !important; text-overflow: clip;
    position: relative; padding-left: 0;
    /* по референсу: неактивные у левого края; активную выделяют цвет,
       вес, буллет и сдвиг вправо с лёгким ростом */
    font-family: 'Manrope', sans-serif; font-size: 14.5px; font-weight: 500;
    color: var(--text-muted); opacity: .3;
    white-space: nowrap;
    transition: color 640ms cubic-bezier(.17, .84, .44, 1),
                opacity 640ms cubic-bezier(.17, .84, .44, 1),
                padding 640ms cubic-bezier(.17, .84, .44, 1);
    text-align: left; justify-content: flex-start;
  }
  /* точка прибита к ОКНУ барабана, не к строке: проявляется и гаснет
     на своём месте, никуда не ездит */
  /* Механика точки и сдвига — дословно по CSS референса (46509.css):
     активная строка получает padding-left: 1em с транзицией 640ms,
     а точка живёт на строке и ВЫПЛЫВАЕТ из-за её левого края в
     освободившееся место: translate(-100%, -50%) → (0, -50%),
     прозрачность 420ms. Гашение — те же транзиции в обратную сторону. */
  .hero__roll li::before {
    content: ''; position: absolute; left: 0; top: 50%;
    min-width: .35em; min-height: .35em; border-radius: 50%;
    background: var(--gold);
    transform: translate(-100%, -50%); opacity: 0;
    transition: opacity 420ms cubic-bezier(.17, .84, .44, 1),
                transform 640ms cubic-bezier(.17, .84, .44, 1);
  }
  .hero__roll li.is-c::before { transform: translate(0, -50%); opacity: 1; }
  /* прибывшая строка: чернеет и сдвигается ПАДДИНГОМ (как у референса) —
     точка выплывает в освободившееся место */
  .hero__roll li.is-c {
    color: var(--text); opacity: 1; font-weight: 600;
    padding-left: 1em;
  }
  .hero__roll li.is-n { opacity: .55; }

  /* CTA — пилюля по контенту, как у референса; старые мобильные правила
     растягивали кнопку на всю ширину */
  /* .cta-row на мобилке — flex-колонка со stretch: width:auto в ней всё
     равно растягивает кнопку, поэтому прижимаем сам элемент */
  .hero--home .hero__cta-row { display: flex; align-items: flex-start; }
  .hero--home .hero__cta-row .btn { align-self: flex-start !important; }
  .hero--home .hero__cta-row .btn {
    border-radius: 999px !important;
    width: auto !important; min-width: 0 !important; flex: 0 0 auto !important;
    padding-left: 30px !important; padding-right: 30px !important;
  }

  /* подпись и черта под заголовком — к левому краю (контейнер может быть
     flex-колонкой с центрированием из module-hero) */
  .hero--home .hero__lead { align-items: flex-start !important; text-align: left !important; }
  .hero--home .hero__lead-rule { margin-left: 0 !important; }
  .hero--home .hero__free { text-align: left !important; }

  /* hero центрирование больше не нужно: композиция списочная, всё влево */
  .hero--home { text-align: left; }
  .hero--home .hero__cta-row { justify-content: flex-start; }
  .hero--home .hero__lead { text-align: left; }
  .hero--home .hero__visual { display: none; }  /* декоративная линия сверху лишняя */
}
@media (prefers-reduced-motion: reduce) {
  .hero__roll ul { transition: none; }
}


/* ═══════════ Верх мобильной главной по rockfi.fr (2026-08-04) ═══════════
   Поток: hero (заголовок → ротатор → CTA → фото-карточка) → манифест →
   «промесса» с одной большой метрикой. Прежние элементы знакомства
   на мобилке скрыты; десктоп не тронут. */
.hero__free-m, .hcard { display: none; }

@media (max-width: 719px) {
  /* hero: подводка не нужна — у rockfi после ротатора сразу CTA */
  .hero--home .hero__lead { display: none !important; }
  .hero--home { padding-bottom: 26px; }

  .hero__free-m {
    display: block; margin: 12px 0 0;
    font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2);
  }

  /* фото-карточка в hero — как советник у референса */
  .hcard {
    display: block; position: relative;
    margin-top: 26px; border-radius: 14px; overflow: hidden;
    box-shadow: 0 18px 44px rgba(26, 43, 60, .18);
  }
  .hcard img { display: block; width: 100%; aspect-ratio: 1 / 1.12; object-fit: cover; object-position: center 62%; }
  .hcard__grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(20, 22, 20, .6) 88%); }
  .hcard__who { position: absolute; left: 18px; bottom: 16px; color: #FFFBF7; }
  .hcard__who b { display: block; font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 500; }
  .hcard__who i { font-style: normal; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
  /* кнопка на фото — по формуле референса (.button.is-secondary-rec):
     белый 15% + blur, прямоугольник со скруглением 6px */
  .hcard__go {
    position: absolute; right: 12px; bottom: 14px;
    display: inline-flex; align-items: center;
    background: #ffffff26; color: #FFFBF7;
    padding: 13px 15px; border-radius: 6px; text-decoration: none;
    font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 500;
    letter-spacing: -.2px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .hcard__go:active { transform: scale(.96); }


  /* «промесса»: на мобилке прежнее знакомство уходит целиком */
  #sec-intro .intro__bridge,
  #sec-intro .intro__bridge-sub,
  #sec-intro .portrait { display: none !important; }
  #sec-intro.intro { display: block !important; }

}


/* ═══════════ Полировка верха мобильной главной по rockfi.fr (2026-08-04, round 2) ═══════════
   Точечные правки поверх «Hero-ротатора» и «Верха мобильной главной»:
   1) больше воздуха между ротатором и CTA (было ~23px — «прилипало»);
   2) единый левый край с hero. У прежних мобильных блоков и #sec-intro был двойной инсет:
      main даёт 24px паддинга, а сами блоки добавляли ещё 24px сверху —
      итого 48px против 24px у заголовка/ротатора/фото-карточки выше.
      Отсюда и не совпадал левый край, и фраза манифеста не влезала
      в 3-4 строки (ужималась в 5 при более узком боксе);
   3) защита строк ротатора от переноса на грани переносов;
   4) дот-иконка манифеста — «уголком» (горизонтальная и вертикальная
      грань от одной точки), а не плотный блок 3×2, как было. */
@media (max-width: 719px) {
  /* 1. Ротатор → CTA: было clamp(22px,6vw,32px); !important — перебивает
     Round «Мобильный hero — правки Daniil», тоже !important на этом же свойстве. */
  .hero--home .hero__cta-row { margin-top: clamp(52px, 13vw, 68px) !important; }

  /* Заголовок → ротатор: было clamp(20px,5vw,30px), чуть тесновато */
  .hero__roll { margin-top: clamp(26px, 6.5vw, 34px); }

  /* строки ротатора не переносятся ни при каких обстоятельствах —
     на случай длинных лейблов на узких экранах */
  .hero__roll li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #sec-intro { padding-left: 0 !important; padding-right: 0 !important; }


  /* защитный максимум ширины у имени в hcard, чтобы на самых узких
     экранах (<360px) оно гарантированно не подходило к пилюле ближе 12px */
  .hcard__who { max-width: calc(100% - 130px); }
}


/* ═══ Правки Daniil 2026-08-04 (вечер) ═══ */
@media (max-width: 719px) {
  /* CTA — прямые углы вместо пилюли */
  .hero--home .hero__cta-row .btn { border-radius: 6px !important; }

  /* заголовок выше: hero стартует плотнее к шапке */
  .hero--home { padding-top: 18px !important; }
}


/* «Первая консультация бесплатно» — справа от кнопки, в одну строку с ней */
@media (max-width: 719px) {
  .hero--home .hero__cta-row {
    flex-direction: row !important; align-items: center !important;
    flex-wrap: wrap; gap: 14px;
  }
  .hero__free-m { margin: 0; max-width: 150px; line-height: 1.5; }
}


/* ═══════════ Сцена-стек «Кто мы» по референсу onewhale.io (2026-08-05) ═══
   Sticky-фото, карточки фактов наезжают снизу по скроллу и складываются
   стопкой с индивидуальными поворотами. «Вес»: back-изинг — карточка
   проскакивает финальную точку и осаживается. Двигает home-redesign.js. */
.stack { display: none; }
@media (max-width: 719px) {
  #sec-intro.intro { padding-top: 0 !important; padding-bottom: 0 !important; }

  /* пробег короче: следующая секция приходит вскоре после того,
     как стопка сложилась. Отрицательное поле убирает пустоту, которую
     даёт вертикальное центрирование фото в пине (~252px) — фото
     поднимается ближе к hero, но в кадре по-прежнему встаёт в центр. */
  .stack {
    display: block; position: relative; height: 215vh;
    margin-top: calc(-1 * clamp(120px, 17.5vh, 200px));
    /* сцена заходит под хвост hero — прозрачна для тапов, иначе
       перехватывает кнопку «Связаться» */
    pointer-events: none;
    /* Никакого overflow: любой клип-контейнер в этой зоне на iOS Safari
       рисует светлую кромку над панелью и убивает прозрачность панели.
       Обрезка тут и не нужна: карточки в ожидании стоят ниже фото, но
       внутри самой сцены (её высота 215vh), а к концу пробега все
       припаркованы в кадре — торчать нечему. */
  }
  .stack__pin {
    /* Клип пина — единственный элемент главной, который режет по высоте
       ровно на границе экрана (на /about/ такого нет, потому там полосы
       и не было). Любая высота, равная вьюпорту, на iOS даёт видимую
       кромку среза над панелью Safari. Поэтому пин выше экрана на
       --pin-extra, срез уходит под панель, а контент центрируется по
       видимой области. */
    --pin-extra: 0px;
    position: sticky; top: 0;
    height: 100vh; height: 100lvh;
    /* пин заходит под хвост hero отрицательным полем .stack и перехватывал
       тапы по кнопке «Связаться». Сам он прозрачен для кликов; кликается
       только содержимое карточек и фото. */
    pointer-events: none;
    /* на всю ширину экрана: раньше пин был ровно по краям карточек
       (24..406) и его overflow срезал их углы прямой вертикалью —
       это и читалось как «рамка» поверх стопки */
    width: 100vw; margin-left: calc(50% - 50vw);
    /* фото стоит в центре экрана — карточки начинают наезжать на него
       там же, а не под самой шапкой */
    display: flex; align-items: center; justify-content: center;
  }

  /* база сцены — та самая hero-карточка с фото: в пине она встаёт по
     центру, стопка складывается прямо на неё */
  .stack__pin .hcard {
    display: block; position: relative;
    width: min(382px, calc(100vw - 48px));
    margin: 0;
  }
  /* стопка «придавливает» фото — оно темнеет по прогрессу */
  .stack__pin .hcard::after {
    content: ''; position: absolute; inset: 0; border-radius: 14px;
    background: rgba(20, 22, 20, 1); opacity: calc(var(--sp, 0) * .38);
    pointer-events: none;
  }

  /* «колодец» строго формата фото: стопка живёт внутри него, и всё, что
     при повороте выходит за края фото, срезается — никаких выступающих
     уголков на светлом фоне («белые полосы» слева и справа) */
  /* Карточки — прямые дети сцены, никакой обёртки. Размер строго равен
     фото: та же ширина и та же высота (aspect-ratio кадра 1/1.18).
     Первая ложится в кадр идеально, остальные — криво поверх неё.
     Ничто их не режет: они самый верхний слой сцены. */
  .hcard, .stack__card { pointer-events: auto; }
  .stack__card {
    position: absolute; left: 50%; z-index: 4;
    top: calc(50% - var(--pin-extra, 0px) / 2);
    width: min(382px, calc(100vw - 48px));
    aspect-ratio: 1 / 1.12;      /* строго аспект фото — размеры совпадают */
    box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 24px 24px 26px;
    /* бумага: тёплый градиент + мягкий блик от верхнего края */
    background:
      radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, .55), transparent 62%),
      linear-gradient(168deg, #F7EBD8 0%, #F1E2C9 52%, #EAD8BC 100%);
    border-radius: 14px;
    /* тиснёный кант: светлая грань сверху, тень снизу — карточка «толстая» */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .75),
      inset 0 -1px 0 rgba(120, 92, 54, .16),
      0 2px 4px rgba(26, 43, 60, .10),
      0 18px 38px rgba(26, 43, 60, .26);
    overflow: hidden;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    /* позицию и поворот считает JS через --y/--r/--dx */
    transform: translate(-50%, -50%)
               translate(calc(var(--dx, 0) * 1px), calc(var(--y, 120) * 1vh))
               rotate(calc(var(--r, 0) * 1deg));
    will-change: transform;
  }
  .stack__lbl {
    display: block; margin-bottom: 10px;
    font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: rgba(26, 43, 60, .55);
  }
  .stack__big {
    display: block; margin: 0 0 8px;
    font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
    font-size: clamp(30px, 8.6vw, 38px); line-height: 1.04; color: var(--ink, #1A2B3C);
  }
  .stack__card p { margin: 0; font-family: 'Manrope', sans-serif; font-size: 14px; line-height: 1.6; color: rgba(26, 43, 60, .78); }

  .stack__card--cta { background: var(--gold); }
  .stack__card--cta .stack__lbl { color: rgba(255, 251, 247, .7); }
  .stack__card--cta .stack__big { color: #FFFBF7; }
  .stack__card--cta p { color: rgba(255, 251, 247, .85); }
  .stack__go {
    display: inline-flex; margin-top: 16px;
    background: #FFFBF7; color: var(--gold-2); text-decoration: none;
    padding: 13px 26px; border-radius: 8px;
    font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700;
  }
  .stack__go:active { transform: scale(.96); }

}
@media (prefers-reduced-motion: reduce) and (max-width: 719px) {
  .stack { height: auto; padding: 48px 0; }
  .stack__pin { position: static; height: auto; flex-direction: column; gap: 16px; padding: 72px 0 56px; }
  .stack__card { position: static; transform: none; margin: 12px auto 0; aspect-ratio: auto; min-height: 200px; width: min(382px, calc(100vw - 48px)); }
}


/* ═══════════ Детализация карточек сцены-стека (2026-08-05) ═══════════
   Фактура премиального бланка: зерно бумаги, тиснёный водяной знак,
   индекс слоя в углу, волосяные линейки, служебный хвост внизу. */
@media (max-width: 719px) {
  /* зерно бумаги — очень слабый шум поверх заливки */
  .stack__card::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
    mix-blend-mode: multiply; opacity: .12; pointer-events: none;
  }
  .stack__card > * { position: relative; z-index: 1; }

  /* тиснёный водяной знак — инициал Krepko, вдавлен в бумагу */
  .stack__mark {
    position: absolute; right: -.12em; top: -.22em; z-index: 0;
    font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
    font-size: 210px; line-height: 1; color: transparent;
    -webkit-text-stroke: 1px rgba(120, 92, 54, .13);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    pointer-events: none; user-select: none;
  }

  /* индекс слоя: моноширинно, у верхнего края, на волосяной линейке */
  .stack__no {
    position: absolute; left: 24px; right: 24px; top: 22px; z-index: 1;
    padding-bottom: 12px; border-bottom: 1px solid rgba(120, 92, 54, .18);
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
    letter-spacing: .18em; color: rgba(120, 92, 54, .62);
  }
  /* терракотовая метка справа от индекса */
  .stack__no::after {
    content: ''; position: absolute; right: 0; top: 3px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold); opacity: .75;
  }

  .stack__lbl { color: rgba(120, 92, 54, .72); }
  .stack__big { letter-spacing: -.015em; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
  .stack__card p { color: rgba(58, 46, 30, .82); }

  /* служебный хвост: два поля на волосяной линейке, как в бланке */
  .stack__foot {
    display: flex; justify-content: space-between; gap: 16px;
    margin-top: 16px; padding-top: 12px;
    border-top: 1px solid rgba(120, 92, 54, .18);
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase; color: rgba(120, 92, 54, .58);
  }
  .stack__foot i { font-style: normal; }

  /* ── финальная карточка: терракота с фольгой ── */
  .stack__card--cta {
    background:
      radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, .22), transparent 60%),
      linear-gradient(168deg, #CE6642 0%, #C75B39 54%, #B04E2F 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .28),
      inset 0 -1px 0 rgba(90, 34, 16, .3),
      0 2px 4px rgba(26, 43, 60, .12),
      0 20px 42px rgba(176, 78, 47, .34);
  }
  .stack__card--cta::before { opacity: .1; }
  .stack__card--cta .stack__no {
    color: rgba(255, 251, 247, .72); border-bottom-color: rgba(255, 251, 247, .26);
  }
  .stack__card--cta .stack__no::after { background: #FFFBF7; opacity: .9; }
  .stack__card--cta .stack__mark {
    -webkit-text-stroke: 1px rgba(255, 251, 247, .17);
    text-shadow: 0 1px 0 rgba(90, 34, 16, .2);
  }
  .stack__card--cta .stack__lbl { color: rgba(255, 251, 247, .72); }
  .stack__card--cta .stack__big { color: #FFFBF7; text-shadow: 0 1px 0 rgba(90, 34, 16, .25); }
  .stack__card--cta p { color: rgba(255, 251, 247, .88); }
  .stack__go {
    box-shadow: 0 6px 16px rgba(90, 34, 16, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
  }
}


/* ═══ Safe-area на iOS: контент заходит под панель Safari, но последний
   экран не прячет свои элементы под неё (viewport-fit=cover в base.html) ═══ */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-footer { padding-bottom: calc(var(--sec-pad, 40px) + env(safe-area-inset-bottom)); }
}


/* ═══ Мобильная защита от горизонтального вылета (2026-08-05) ═══
   Раньше вылет прикрывал overflow-x: clip на main, но на iOS Safari любой
   такой клип рисует светлую плашку под панелью и убивает её прозрачность.
   Поэтому лечим виновников точечно: full-bleed блоки, у которых 100vw
   считается от окна, а родитель уже смещён отрицательным полем — сумма
   давала лишние ~24px. На мобильном им достаточно ширины родителя. */
@media (max-width: 999px) {
  /* На узком экране боковой выезд появления расширял документ на время
     анимации (translate3d(±48px) у .anim--left/right) — именно этот вылет
     и глушил прежний overflow-клип. Едем снизу: по вертикали документ
     не расширяется. */
  .anim--left, .anim--right { transform: translate3d(0, 48px, 0); }

}

/* ═══ Мобильные шапки секций по центру (2026-08-05) ═══
   На десктопе (≥1000px) секции центрирует правило Round «Centered section
   headers», на мобильном заголовки, подводки и черты-акценты оставались
   слева — вёрстка читалась как две разные. Списки услуг и шаги остаются
   левыми: они читаются как перечни. */
@media (max-width: 999px) {
  #sec-services > h2,
  #sec-services > .sec-dek,
  #sec-reviews > h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  #sec-services > h2::after,
  #sec-reviews > h2::after,
  #sec-coverage h2::after { margin-left: auto; margin-right: auto; }
}

/* ═══ Отзывы и города на мобильном (2026-08-05) ═══ */
@media (max-width: 999px) {
  /* Отзыв занимал 88% ленты — соседний «подглядывал» справа, но сам текст
     из-за этого сидел не по центру экрана. Полная ширина: центр карточки
     совпадает с центром экрана. */
  #sec-reviews .rv { flex: 0 0 100%; min-width: 100%; }
  /* маска по краям ленты гасила «мусор» от соседней карточки при 88%.
     На полной ширине соседа не видно, зато маска съедала края самого
     текста — первые и последние буквы строк уходили в прозрачность. */
  #sec-reviews .rv-track {
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* Ленты листаются по горизонтали, но overflow-y: auto (значение по
     умолчанию при заданном overflow-x) делал их ещё и вертикально
     прокручиваемыми: у ленты городов scrollHeight был на 12px больше
     видимой высоты, и палец таскал содержимое во все стороны. */
  #sec-reviews .rv-track,
  .city__track {
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }
}

/* Карточка города: текст по центру, стрелки — по бокам от него.
   До этого на узком экране кнопки уезжали под текст в строчный поток. */
@media (max-width: 599px) {
  .city {
    position: relative;
    display: block;
    padding: 0 48px;
  }
  .city__card {
    align-items: center;
    text-align: center;
    /* карточки одного роста — по самому длинному описанию (Мурсия), иначе
       лента прыгает на свайпе. У коротких городов резерв уходил в низ, и
       стрелки вставали ниже текста. Центрируем — стрелки оказываются
       ровно по бокам от него. */
    justify-content: center;
  }
  .city__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 40px;
    height: 40px;
  }
  #city-prev { left: 0; }
  #city-next { right: 0; }
}


/* ── телефон: заголовки секций в общий ряд (17.08) ──
   Центрирование секций объявлено в @media (min-width: 1000px), поэтому на
   узком экране «Разобраться самому» и «Вопросы? Ответы» оставались слева
   вместе с чертой-акцентом и выбивались из шести соседних секций. */
@media (max-width: 999px) {
  .home-guides > h2,
  .home-faq h2,
  .home-faq .faq > .faq__aside h2 { text-align: center; }

  .home-guides > h2::after,
  .home-faq h2::after,
  .home-faq .faq h2::after { margin-left: auto; margin-right: auto; }

  .home-guides__dek,
  .home-faq .faq__dek { text-align: center; }
}