/* ==========================================================================
   УСЛУГИ — точная вёрстка по утверждённым макетам (правка №95)
   references/Услуги — Desktop.pdf  (артборд 1440 × 5656, поля 60)
   references/Услуги — Mobile.pdf   (артборд  393 × 6284, поля 12)

   Особенность макета: контент секций начинается не от поля страницы (60),
   а от 396 px; подпись секции вынесена влево, в поле. Внутри секций текст
   обтекает фото — на десктопе это настоящий float, поэтому порядок в DOM
   «заголовок → фото → продолжение» повторяет макет буква в букву, а на
   мобильном тот же DOM переставляется флексом (order).

   Типографика — materials/DESIGN.md, геометрия — замеры по рендерам макета.
   Мобильная раскладка базовая, десктопная включается с 1024 px.
   ========================================================================== */

.us{
  --gut:12px;            /* поля мобильной версии */
  --line:#505050;        /* background_dark_grey — рамки макета */
  --off:0px;             /* отступ контента секций от поля страницы */
  overflow-x:clip;
}
.us-shell{width:100%;margin-inline:auto;padding-inline:var(--gut)}

/* ---------- Типографика ---------- */
.us-eyebrow{display:none;margin:0;font-size:16px;font-weight:400;line-height:16px;
  text-transform:uppercase;color:#fff}
/* mobile/big_text_mobile → desktop/big_text */
.us-h1{margin:0;font-size:40px;font-weight:700;line-height:.89;letter-spacing:-.08em;
  text-transform:uppercase;color:#fff}
/* mobile/h_6_mobile → desktop/h_1 */
.us-h2{margin:0;font-size:24px;font-weight:700;line-height:24.96px;letter-spacing:-.02em;
  text-transform:uppercase;color:#fff}
/* mobile/h_2_nobile → desktop/h_2 */
.us-lead{margin:0;font-size:16px;font-weight:600;line-height:20px;letter-spacing:-.02em;
  text-transform:uppercase;color:#fff}
/* text_16px */
.us-note{margin:0;font-size:16px;font-weight:400;line-height:17px;color:#fff}
/* mobile/h_2_mobile → desktop/h_5 */
.us-h3{margin:0;font-size:20px;font-weight:700;line-height:19px;
  text-transform:uppercase;color:#fff}

.us-list{margin:0;padding:0 0 0 8px;list-style:none;counter-reset:us}
.us-list li{counter-increment:us;display:grid;grid-template-columns:22px minmax(0,1fr);
  column-gap:4px;font-size:16px;font-weight:400;line-height:17px;color:#fff}
.us-list li+li{margin-top:11px}
.us-list li::before{content:counter(us) ".";text-align:right;color:#fff}

/* Кнопка макета — та же, что на «Бассейнах»/«Фонтанах» */
.us-btn{display:flex;align-items:center;justify-content:center;
  width:100%;height:54px;padding:0 20px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  font-size:14px;font-weight:700;line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:#fff;text-align:center;cursor:pointer;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.us-btn:hover,.us-btn:focus-visible{background:#fff;border-color:#fff;color:#121212}
.us-btn--fill{background:#fff;border-color:#fff;color:#121212}
.us-btn--fill:hover,.us-btn--fill:focus-visible{background:rgba(255,255,255,.04);border-color:var(--line);color:#fff}

/* desktop/numbers */
.us-num{display:block;font-size:96px;font-weight:700;letter-spacing:-.04em;
  line-height:68px;color:#fff;font-variant-numeric:tabular-nums}

/* ==========================================================================
   MOBILE (базовая раскладка, макет 393 px)
   ========================================================================== */

/* ---------- Герой ----------
   В мобильном макете кадр стоит между абзацем и кнопкой, на десктопе —
   лежит подложкой под всем блоком. Порядок задаём флексом. */
/* шапка на мобильном и планшете — 89 px (см. .header__in в style.css) */
.us-hero{position:relative;display:flex;flex-direction:column;padding-top:89px}
.us-hero__in{order:1}
.us-hero__media{order:2}
.us-hero__cta{order:3}
.us-hero__crumbs{padding-top:18px}
.us-hero__crumbs .crumbs{padding-block:0}
.us-hero .us-h1{margin-top:26px}
.us-hero__lead{margin-top:29px}
.us-hero__lead b{font-weight:inherit}
.us-hero__note{margin-top:26px}
.us-hero__media{position:relative;margin:39px calc(-1 * var(--gut)) 0;
  height:310px;overflow:hidden;background:#1e1e1e}
.us-hero__media picture{display:block;height:100%}
.us-hero__media img{display:block;width:100%;height:100%;object-fit:cover}
.us-hero__drop{display:none}
.us-hero__cta{margin-top:32px}

/* ---------- Секции ---------- */
.us-sec{padding-top:119.5px}
.us-sec__body{display:flex;flex-direction:column}
.us-h2{order:1}
.us-h2--b{order:2;margin-top:0}
.us-fig{order:3;margin:20.8px 0 0;height:275px;overflow:hidden;background:#1e1e1e}
.us-fig img{display:block;width:100%;height:100%;object-fit:cover}
.us-sec__lead{order:4;margin-top:20.2px}
.us-sec__note{order:5;margin-top:6.5px}
.us-formats{order:6;margin-top:33.4px}
.us-formats .us-list{margin-top:13.5px}
.us-sec__cta{order:7;margin-top:22.4px}

/* «Пруды и водоёмы»: фото между заголовком и текстом — как на остальных */
.us-sec--p .us-fig{height:275px}

/* ---------- Сервис и сопровождение ---------- */
.us-serv__grid{order:6;margin-top:23px;display:flex;flex-direction:column;gap:8px}
.us-serv__photo{margin:0;height:366px;overflow:hidden;background:#1e1e1e}
.us-serv__photo img{display:block;width:100%;height:100%;object-fit:cover}
.us-scard{border:1px solid var(--line);padding:15px 20px 16px;height:190px;
  display:flex;flex-direction:column}
.us-scard__cap{margin:auto 0 0;font-size:20px;font-weight:400;line-height:21px;color:#fff}
.us-serv__cta{order:7;margin-top:22px}

.us-end{height:120px}

/* ==========================================================================
   DESKTOP (макет 1440 px)
   ========================================================================== */
@media (min-width:1024px){
  .us{--gut:60px;--off:336px}
  .us-shell{max-width:1440px}
  .us-eyebrow{display:block}

  .us-h1{font-size:128px}
  .us-h2{font-size:48px;line-height:50.4px;letter-spacing:0}
  .us-lead{font-size:20px;line-height:24px;letter-spacing:-.01em}
  .us-h3{font-size:24px;line-height:22.8px}
  .us-list li{font-size:20px;line-height:19.5px}
  .us-list li+li{margin-top:10.5px}
  .us-btn{height:48px;font-size:16px}

  /* --- Герой: кадр под клином + вырезка фонтана поверх --- */
  .us-hero{display:block;padding-top:0;min-height:961px}
  .us-hero__media{position:absolute;inset:0;margin:0;height:961px;z-index:0;
    background:transparent;
    clip-path:polygon(0 44.63%,49.29% 69.78%,72.71% 69.78%,100% 50.73%,100% 100%,0 100%)}
  .us-hero__drop{display:block;position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:max(100%,1440px);aspect-ratio:1440 / 961;pointer-events:none;z-index:1}
  .us-hero__drop img{position:absolute;left:1.50%;top:44.02%;width:47.69%;height:43.90%}
  .us-hero__in{position:relative;z-index:2}
  .us-hero__crumbs{padding-top:137.4px}
  /* заголовок в правой части, подпись — в поле слева */
  .us-hero .us-h1{margin:-19px 0 0 var(--off);text-align:left}
  .us-hero__lead{margin:30.9px 0 0 660px;max-width:300px}
  /* в макете первые две строки абзаца выходят влево за колонку */
  .us-hero__lead b{display:block;width:400px;margin-left:-208.8px;font-weight:inherit}
  .us-hero__note{margin:17px 0 0 660px;max-width:305px}
  .us-hero__cta{position:relative;z-index:2;margin-top:31.7px}
  .us-hero__cta .us-btn{width:324px;margin-left:660px}

  /* --- Секции: подпись слева в поле, контент с отступом 336 --- */
  .us-sec{padding-top:167px}
  .us-sec--f{padding-top:98.8px}
  .us-sec__body{display:block;position:relative;margin-left:var(--off)}
  .us-eyebrow{position:absolute;left:calc(-1 * var(--off));top:0}
  .us-h2--b{display:block}

  /* Фото стоит слева отдельной колонкой (315 + 20), текст — в правой (650).
     Ширины текстовых блоков заданы явно: в макете строки рвутся именно так. */
  .us-fig{float:left;width:315px;height:611px;margin:14px 20px 0 0}
  .us-sec--f .us-h2--b,
  .us-sec--f .us-sec__lead,
  .us-sec--f .us-sec__note,
  .us-sec--f .us-formats{margin-left:334px;width:650px}
  .us-sec--f .us-h2--b{margin-top:0}
  .us-sec--f .us-sec__lead{margin-top:17.8px;width:500px}
  .us-sec--f .us-sec__note{margin-top:15.5px;width:265px}
  .us-sec--f .us-formats{margin-top:25.3px}
  .us-formats .us-list{margin-top:9.8px}
  .us-sec__cta{clear:both;margin-top:27px}
  .us-sec__cta .us-btn{width:650px}

  /* --- «Бассейны»: фото шириной 650 уходит в поле страницы --- */
  .us-sec--b .us-fig{width:650px;height:593px;margin:38.2px 20px 0 calc(-1 * var(--off))}
  .us-sec--b .us-sec__lead,
  .us-sec--b .us-sec__note,
  .us-sec--b .us-formats,
  .us-sec--b .us-sec__cta{margin-left:334px;width:650px}
  .us-sec--b .us-sec__lead{margin-top:38.4px;width:365px}
  .us-sec--b .us-sec__note{margin-top:23.7px;width:250px}
  .us-sec--b .us-formats{margin-top:114.5px}
  .us-sec--b .us-formats .us-list{margin-top:13.2px;width:255px}
  /* кнопка остаётся в правой колонке, рядом с фото */
  .us-sec--b .us-sec__cta{clear:none;margin-top:38px}

  /* --- «Пруды и водоёмы»: композиция по центру всей полосы 1320.
         Обтекания здесь нет, поэтому колонка остаётся флексом — в макете
         фото стоит НИЖЕ вводного абзаца, а не сразу за заголовком. --- */
  .us-sec--p .us-sec__body{display:flex;flex-direction:column;margin-left:0;text-align:center}
  .us-sec--p .us-eyebrow{position:static;order:0;text-align:center}
  .us-sec--p .us-fig{order:5}
  .us-sec--p .us-h2{margin-top:22.3px}
  .us-sec--p .us-sec__lead{margin:19px auto 0;width:680px}
  /* в макете этого абзаца на десктопе нет — он показан только в мобильной версии */
  .us-sec--p .us-sec__note{display:none}
  .us-sec--p .us-fig{float:none;width:651px;height:321px;margin:24.5px auto 0}
  .us-sec--p .us-formats{width:310px;margin:21.5px auto 0;text-align:left}
  .us-sec--p .us-formats .us-list{margin-top:14px}
  .us-sec--p .us-sec__cta{margin-top:38px}
  .us-sec--p .us-sec__cta .us-btn{margin-left:var(--off)}

  /* --- «Сервис»: без обтекания, текст от левого края колонки --- */
  .us-sec--s .us-sec__lead{margin-top:21.6px;width:500px}
  .us-sec--s .us-sec__note{margin-top:17.2px;width:305px}

  /* --- Сервис и сопровождение --- */
  .us-serv__grid{margin-top:31px;display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;row-gap:20px}
  .us-serv__photo{grid-column:1;grid-row:1 / span 2;height:400px}
  .us-scard{height:190px;padding:15.5px 20px 16px}
  .us-serv__cta{margin-top:23.9px}

  .us-end{height:170px}
}

/* ---------- Планшет 600–1023 px ---------- */
@media (min-width:600px) and (max-width:1023px){
  .us-shell{max-width:744px}
  .us-h1{font-size:72px}
  .us-h2{font-size:32px;line-height:33.3px}
  .us-hero__media{height:380px}
  .us-fig,.us-sec--p .us-fig{height:340px}
  .us-serv__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .us-serv__photo{grid-column:1 / -1;height:340px}
}